webview使用uni.chooseImage从相册返回不触发回调的优化处理

1 问题与方案

问题：在webview上使用uni.chooseImage进入手机系统相册，不选择图片而是直接通过手机系统返回键返回webviiew页面时，不会触发uni.chooseImage的回调，假如在选择图片之前做了防重，那么此时就没法取消防重，无法继续操作

解决方案：监听visibilitychange事件，当页面进入手机系统相册或者手机系统相册返回页面时都会触发该事件。

2 代码实现

function chooseImages () {
  return new Promise((resolve, reject) => {
    uni.chooseImage({
      sourceType: ['album'],
      success: function (res) {
        resolve(res.tempFilePaths)
      },
      fail: function (res) {
        reject(new Error('选择相册图片失败'))
      },
      complete: function () {
        console.log('选择相册图片结束')
      }
    })
  })
}
async function getImages () {
  const fn = new Promise((resolve, reject) => {
    document.addEventListener('visibilitychange', function backHandler() {
      // 页面显示：visible；页面隐藏：hidden
      if (document.visibilityState === 'visible') {
        document.removeEventListener('visibilitychange', backHandler)
        setTimeout(() => {
          if(!window.backImageFlag) {
            reject(new Error('从相册异常返回'))
          }
        }, 500)
      }
    })
  })
  window.backImageFlag = false
  // 从手机系统相册返回页面时会触发visibilitychange事件，如果uni.chooseImage的回调失效，
  // 那么下面数组中的第二个promise永远也不会有结果，只能返回数组中的第一个promise的reject结果
  const imageList = await Promise.race([
    fn,
    chooseImages()
    .finally(() => {
      window.backImageFlag = true
    })
  ])
  return imageList
}
// 选择相册图片入口
async function startGetImages () {
  try {
    const imageList = await getImages()
    console.log(imageList)
  } catch (error) {
    console.log(error.message)
  }
}