小程序-安卓手机无法保存图片("fail invalid file type")，坑...

在小程序里很常见的一个需求，就是分享功能--当然就会存在把图片保存到相册的需求。经过多次测试，在ios上保存没有问题，但是在安卓手机上无法保存至相册。

经过一步一步的debug，发现在saveImageToPhotosAlbum方法中，

具体在安卓机上显示如下："fail invalid file type"

为了解决这个问题，也查了很多文档，最终解决，解决方法如下：

/**
 * 下载图片
 * @param {*} url 远端图片地址
 */
async function downLoadImg(url, filePath) {
  return new Promise((resolve, reject) => {
    uni.downloadFile({
      url: url,
      filePath: filePath || '',
      success: res => {
        resolve(res)
      },
      fail: () => {
        // eslint-disable-next-line
        uni.showToast({
          title: '图片生成失败',
          duration: 2000,
          icon: 'none'
        })
        reject()
      }
    })
  })
}
/**
 * 生成保存图片的临时路径
 * @param {*} tempFilePath
 */
function saveImageToAlbum(tempFilePath) {
  uni.saveImageToPhotosAlbum({
    filePath: tempFilePath,
    success: function() {
      uni.showToast({
        title: '已保存到相册'
      })
      let fileMgr = wx.getFileSystemManager()
      fileMgr.unlink({
        filePath: tempFilePath,
        success: function(r) {
          // eslint-disable-next-line
          console.log(r, '&&&&&&&&&')
        }
      })
    }
  })
}
// 验证是否允许保存相册
function savePic(tempFilePath) {
  wx.getSetting({
    success(res) {
      if (!res.authSetting['scope.writePhotosAlbum']) {
        // 接口调用询问
        wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            saveImageToAlbum(tempFilePath)
          },
          fail() {
            rejectSavePic(tempFilePath)
          }
        })
      } else {
        saveImageToAlbum(tempFilePath)
      }
    }
  })
}
// 用户拒绝了授权
function rejectSavePic(tempFilePath) {
  wx.showModal({
    title: '保存图片',
    content: '保存图片需要您授权',
    showCancel: true,
    confirmText: '确定',
    success: res => {
      if (res.confirm) {
        // 打开设置页面
        wx.openSetting({
          success: data => {
            if (data.authSetting['scope.writePhotosAlbum']) {
              saveImageToAlbum(tempFilePath)
            }
          }
        })
      }
    }
  })
}

/**
 * 用户保存图片到本地后分享
 * @param {string} BGURL  背景图地址
 */

export const saveCanvasPoster = async url => {
  try {
    uni.showLoading({
      title: '海报生成中...',
      mask: true
    })
    let fileName = new Date().valueOf()
    let filePath = wx.env.USER_DATA_PATH + '/' + fileName + '.jpg'
    // 背景 TODO 背景上传
    const resData = await downLoadImg(url, filePath)
    savePic(resData.filePath)

    uni.hideLoading() // 保存成功后弹框消失
  } catch (err) {
    realtimeLog.error(err) // 埋点记录错误

    uni.hideLoading() // 弹框消失
  }
}

最终在安卓手机上测试，并未发现问题~

撒花✿✿ヽ(°▽°)ノ✿

小程序还有其他的坑，今天又遇到一个，我大概描述下：第一次进入小程序的时候，会走app.vue的onShow函数，但是关闭后再进入，会先执行page里面的onShow函数....所以，大家在app.vue获取值，再赋值的时候，可能存在在page的onShow里获取不到,解决方法：就是在page的onShow里也要执行