微信小程序wx.opensetting廢棄之后的二次授權

最近要寫小程序,發現很多api廢棄不能使用的情況。如現在模擬一個需求,獲取地理位置授權,用戶首次進入獲取其地理位置信息要先經過授權,如果用戶同意那么將成功獲取到其地理位置,然后頁面顯示一個‘獲取位置信息’按鈕,點擊后跳到地圖并標識其當前所在位置,如果開始授權時用戶拒絕了,那么頁面會顯示一個‘授權并獲取位置信息’按鈕,用戶點擊后會跳到授權設置頁面,需要用戶手動設置,設置后根據設置結果,如果設置了同意那么返回后顯示地圖上的其所在位置,如果沒有設置同意返回后還是顯示‘授權并獲取位置信息’按鈕。



注意這里有個問題要注意,用戶第一次拒絕授權彈框后短期內微信會認為用戶拒絕該授權意愿并且不會再次吊起授權彈框,目前發現能夠吊起授權彈框的有wx.getLocation、 wx.authorize但是用戶拒絕后短期內調用這些api也不會出現授權彈框了,這里我們需要讓用戶二次授權,而二次授權就需要用戶主動設置勾選(上圖)‘使用我的地理位置’,這是這個問題的解決思路。那么看一下應該怎么寫,調用這個“二次授權”設置頁之前使用的api是wx.opensetting,即打開設置,這里引用別人的一段代碼:

//index.js
//獲取應用實例
Page({
  data: { location: {} },
  onLoad: function () {
    var that = this
    wx.getLocation({//彈出授權用戶確認后獲取其地理位置
      type: 'wgs84',
      success: function (res) {
        that.setData({
          location: {
            longitude: res.longitude,
            latitude: res.latitude
          }
        })
      }
    })
    //判斷是否獲得了用戶地理位置授權
    wx.getSetting({
      success: (res) => {
        if (!res.authSetting['scope.userLocation'])
          that.openConfirm()
      }
    })
  },

  openConfirm: function () {
    wx.showModal({
      content: '檢測到您沒打開美團外賣的定位權限,是否去設置打開?',
      confirmText: "確認",
      cancelText: "取消",
      success: function (res) {
        console.log(res);
        //點擊“確認”時打開設置頁面
        if (res.confirm) {
          console.log('用戶點擊確認')
          wx.openSetting({
            success: (res) => { }
          })
        } else {
          console.log('用戶點擊取消')
        }
      }
    });
  },
})

當然這段細節的需求跟我一開始寫的自己的需求有些不一樣,這段代碼要做的是進頁面時獲取地理授權位置信息,然后判斷是否獲取了授權,如果沒有那么彈出一個提示框主動引導授權,這里認為如果是應用是獲取地理位置是必須的如外賣小程序,那么引導用戶二次授權是必須的,如果本應用對用戶的位置可需可不需那么可以做成我一開始描述的那種需求。這里需注意到的是兩個API wx.getSetting和wx.openSetting,分別是用戶做了哪些授權設置和打開設置頁面(我放的第一張圖)。注意現在由于1.wx.openSetting已經廢棄,要用button去主動觸發授權(這里可以去搜小程序文檔wx.openSetting),2.wx.getSetting也將要廢棄所以我修改后的代碼如下(根據我自己一開始的需求)

<button wx:if="{{ldata}}" bindtap='btnTap'>獲取位置信息</button>
<button wx:else open-type="openSetting" bindopensetting='handler'>點擊授權并獲取位置信息</button>

//index.js
//獲取應用實例
const app = getApp()
Page({
  data: {
    ldata:false
  },
  onLoad: function () {
// 獲取位置
var that=this;
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.setData({
          ldata:true,
          latitude: latitude,
          longitude: longitude
        })
      },
      fail:function(res){
        console.log('拒絕授權')
        that.setData({
          ldata:false
        })
      }
    }) 
  },
  btnTap(e){
    wx.openLocation({
      latitude: this.data.latitude,
      longitude: this.data.longitude,
      scale: 28
    })
  },
  handler:function(e){
    var that = this;
    if (!e.detail.authSetting['scope.userLocation']){
      that.setData({
        ldata:false
      })
       }else{
          that.setData({
            ldata: true,
          })
          wx.getLocation({
            type: 'gcj02',
            success: function (res) {
              var latitude = res.latitude
              var longitude = res.longitude

              that.setData({
                latitude: latitude,
                longitude: longitude
              })
              wx.openLocation({
                latitude: latitude,
                longitude: longitude,
                scale: 28
              })
            }
          })
    }
    // wx.getSetting({
    //   success(res) {
    //     console.log('獲取已授權列表', res);
    //     if (!res.authSetting['scope.userLocation']) {
    //       console.log('無位置授權')
    //       that.setData({
    //         ldata: false
    //       })
    //     }
    //     else {
    //       console.log('有位置授權')
    //       that.setData({
    //         ldata: true,
    //       })
    //       wx.getLocation({
    //         type: 'gcj02',
    //         success: function (res) {
    //           var latitude = res.latitude
    //           var longitude = res.longitude
    //           that.setData({
    //             latitude: latitude,
    //             longitude: longitude
    //           })
    //           wx.openLocation({
    //             latitude: latitude,
    //             longitude: longitude,
    //             scale: 28
    //           })
    //         }
    //       })
    //     }
    //   }
    // })
  }
})

注意的地方就是頁面根據授權情況顯示不同的按鈕,由頁面ldata參數控制,用戶首次進入通過onload 中的 wx.getLocation彈框授權,如果同意ldata設置為true并保存位置信息,這時頁面直接顯示“獲取位置信息”按鈕,點擊后通過btnTap事件直接打開地圖,通過開始同意授權后保存的經緯度顯示當前位置。 當我們再次進入后已經。
如果用戶第一次拒絕了授權那么ldata設置為false,顯示的是“點擊授權并獲取位置信息”按鈕,注意這個button按鈕的設置方式open-type=”openSetting” bindopensetting=’handler’,用按鈕的open-type發起打開授權設置頁,bindopensetting是設置用戶設置授權之后的回調,我們可在回調里判斷用戶勾沒勾選同意授權,如果判斷同意了那么ldata設置為true,之后顯示的都是“獲取位置信息”,不必授權直接顯示地圖。如果沒有勾選同意那么ldata當然設置是false,之后再經過這個頁面還是顯示“點擊授權并獲取位置信息”。
最后注意的是在回調里我一開始用wx.getSetting判斷用戶在設置頁設置的授權結果,以為即將廢棄我們可以用回調函數的參數來判斷e.detail.authSetting,還有別的參數可以打印出來看一下。
感觸:剛接觸查到很多資料也是廢棄之前的東西,路漫漫其修遠兮,吾將上下而求索。。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 給提問的開發者的建議:提問之前先查詢 文檔、通過社區右上角搜索搜索已經存在的問題。 寫一個簡明扼要的標題,并且...
    極樂叔閱讀 13,784評論 0 3
  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網絡請求組件 FMDB本地數據庫組件 SD...
    陽明AGI閱讀 16,018評論 3 119
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,466評論 25 708
  • 工作日 1)面試 2)年中總結 3)盯微服務項目測試的進度 4)解決nexus無法上傳docker鏡像問題。 晚上...
    灼灼2015閱讀 204評論 0 0
  • 前幾天我騎著摩拜晃晃悠悠路過沈北的天橋,邊聽著歌邊思考著過幾天去成都的行程安排。想到成都的大熊貓、據說辣到...
    JIAHUIG閱讀 497評論 0 1