美文网首页微信小程序开发
微信小程序——用户定位授权封装

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

作者: 无题syl | 来源:发表于2021-05-06 17:02 被阅读0次

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

    问题一:定位授权封装的原因
    当首次调用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

    相关文章

      网友评论

        本文标题:微信小程序——用户定位授权封装

        本文链接:https://www.haomeiwen.com/subject/dxsddltx.html