微信小程序部分功能踩坑指南

前言

开发项目时，实际遇到的一些功能需求和问题汇总。列出了当时参考的一些文章和官方文档。
开发框架：mpvue
官方文档：5分钟快速上手

小程序跳转外链

参考文章：小程序跳转到非小程序页面的外部链接地址

要跳转的链接必须是https的
需要用web-view组件，web-view组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。（个人类型与海外类型的小程序暂不支持使用。也就是说个人申请的小程序，就别想跳转了）
需要在小程序后台配置业务域名，也就是你要跳转网页地址的域名。（设置-开发设置 -业务域名）
配置业务域名时，会要求下载校验文件，该文件需要放置到访问外链地址的根目录下，可能会需要运维协助
跳转外链后，如果打开的二级页中有新的域名地址，同样需要重复上述步骤

小程序内部页面跳转

官方文档：小程序页面跳转

低版本兼容

为便于开发者解决低版本基础库无法兼容小程序的新功能的问题，开发者可设置小程序最低基础库版本要求。

开发者可以登录小程序管理后台，进入「设置 - 基本设置 - 基础库最低版本设置」进行配置。在配置前，开发者可查看近 30 天内访问当前小程序的用户所使用的基础库版本占比，以帮助开发者了解当前用户使用的情况。

官方文档：低版本兼容处理

微信小程序基础库版本与客户端版本对应关系

小程序iphonex适配

参考文章：微信小程序API之设备获取系统信息getSystemInfo

参考文章：微信小程序适配iphoneX

mpvue支持less

参考文章：2步配置mpvue支持less

小程序生命周期

参考文章：小程序生命周期

官方文档：mpvue的生命周期

坑点：右上角按钮只是把小程序退到了后台，并没有关闭小程序，所以如果未做处理，下次进去还是上一次退出前的状态。不会像h5一样刷新打开页面。也没有开放销毁小程序的监听。
前台、后台定义：当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

swiper 间距轮播

参考文章：微信小程序使用swiper组件实现类3D轮播图

参考文章：小程序swiper组件实现不同效果间距轮播

最后用的第二篇里面的方法三，需要用到Animation动画对象
第一篇文章里直接用css的transition，动画不流畅。

小程序swiper组件bug：

参考文章：微信小程序swiper组件卡死来回疯狂轮播

小程序引入外部字体

参考文章：小程序如何引入外部字体
用过里面的方法二

图片预览

只有图片全屏预览后，才能通过长按图片吊起菜单栏（保存图片，分享图片，收藏图片）

参考文章：图片预览

保存图片到相册

小程序保存图片到本地授权问题

// 保存图片
export function saveImg (imgurl) {
  wx.showLoading({
    title: '图片保存中...'
  })
  wx.downloadFile({
    url: imgurl,
    success: function (res) {
      // 图片保存到本地
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function (data) {
          wx.hideLoading()
          wx.showModal({
            title: '图片已存入相册',
            content: '好东西要分享，发给朋友们看看。',
            showCancel: false
          })
        },
        fail: function (err) {
          console.log(err)
          if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg === 'saveImageToPhotosAlbum:fail auth deny' || err.errMsg === 'saveImageToPhotosAlbum:fail authorize no response') {
            // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
            wx.showModal({
              title: '提示',
              content: '需要您授权保存相册',
              showCancel: false,
              success: modalSuccess => {
                wx.openSetting({
                  success (settingdata) {
                    console.log('settingdata', settingdata)
                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                      wx.showModal({
                        title: '提示',
                        content: '获取权限成功,再次点击按钮即可保存',
                        showCancel: false
                      })
                    } else {
                      wx.showModal({
                        title: '提示',
                        content: '获取权限失败，将无法保存到相册！',
                        showCancel: false
                      })
                    }
                  },
                  fail (failData) {
                    console.log('failData', failData)
                  },
                  complete (finishData) {
                    console.log('finishData', finishData)
                  }
                })
              }
            })
          }
        },
        complete (res) {
          wx.hideLoading()
        }
      })
    }
  })
}

转发小程序

1. 显示转发按钮

wx.showShareMenu(Object object)

  mounted () {
    wx.showShareMenu({
      withShareTicket: true
    })
  },

2. 自定义转发的标题、图片

onShareAppMessage(Object)
监听用户点击页面内转发按钮（