微信小程序开发

微信小程序——用户定位授权封装

2021-05-06  本文已影响0人  无题syl

一、为什么要进行定位授权封装?
二、如何分装-思路?

问题一:定位授权封装的原因
当首次调用wx.chooseLocation获取地图定位时,微信小程序会弹出框设置是否允许程序定位(想必大家都很熟悉)
点击位置图是否允许定位->是->展示地图
否->再次点击位置图时无效必须手动选择设置页(对客户不友好
所以编码设置自动出现设置页

定位权限.png

问题二:封装思路
再点击定位时,首先调用wx.getSetting判断scope.userLocation是否已经确认过,有权限。
当用户首次点击定位或者已经授权过但是没选位置时,及authSetting[key]==undefine||true时,(key=scope.userLocation)直接调用 wx.chooseLocation,如果第一次还是取消的话,弹框提示——“请授予权限”。如果确定择可以选择位置。如果authSetting[key]=false,说明已经拒绝过一次,则调用 wx.openSetting,进行是否允许小程序定位当前位置。同样此时一样可以选择是否授权,如果允许的话,直接调用
wx.chooseLocation,不允许的话,弹框提示——“请授予权限”

封装代码

//微信getSetting的封装
wx.$getSetting = (key) => {
  return new Promise((relove, reject) => {
    wx.getSetting({
      success: ({
        authSetting
      }) => {
        let auth = authSetting[key]
        relove(auth == undefined || auth)
      }
    })
  })
}

//打开微信设置的封装
wx.$openSetting = (key) => {
  return new Promise((relove, reject) => {
    wx.openSetting({
      success: ({
        authSetting
      }) => {
        // let auth=authSetting[key]
        if (authSetting[key] == false) {
          wx.showToast({
            title: '请授予权限',
            icon: 'none'
          })
        } else {

          relove(authSetting[key])
        }

      }
    })
  })
}

/**
 * 底层封装:封装拒绝授权后唤起设置页的处理
 * @param {*} key 权限名称
 */
wx.$doWithSetting = (key) => {
  return new Promise(async (relove, reject) => {
    let hasAuth = await wx.$getSetting(key)
    if (hasAuth) relove()
    else {
      let isAuth = await wx.$openSetting(key)
      relove(isAuth)
    }
  })
}


/**
 * 上层封装:封装选取地图定位地址功能
 * @param {*} key 
 */
wx.$chooseLocation = () => {
  return new Promise(async (relove, reject) => {
    let isAuth = await wx.$doWithSetting('scope.userLocation')
    wx.chooseLocation({
      success: ({
        address,
        name
      }) => {
        relove(address + name)
      },
      fail(e) {
        //console.log(isAuth)
        if (isAuth !== undefined) {
          wx.showToast({
            title: '请授予权限',
            icon: 'none'
          })
        }
      }
    })
  })
}
7856.png
上一篇下一篇

猜你喜欢

热点阅读