您好,登錄后才能下訂單哦!
1.位置授權
位置授權相對簡單,可以直接調用方法wx.getLocation()就可以彈出授權框,
在調用前需要在app.json中設置用途說明
Page({ "permission": { "scope.userLocation": { "desc": "你的位置信息將用于xxx" } } })
授權框
但是存在不少用戶會拒絕授權,如果拒絕授權就不會再彈窗,而是直接進入接口 fail 回調,就要手動授權,我們可以通過自定義彈窗來誘導用戶授權。我這里用的是wx.showMoadl確認框。
確認框
如果確認就調用wx.opensetting調出授權設置頁面
wx.showModal({ title: '提醒', content: '您拒絕了位置授權,將無法使用大部分功能,點擊確定重新獲取授權', success(res) { //如果點擊確定 if (res.confirm) { wx.openSetting({ //打開設置頁 success(res) { //成功,返回頁面回調 //如果同意了位置授權則userLocation=true if (res.authSetting["scope.userLocation"]) { //授權中如果有位置授權則執行邏輯 /*你的代碼*/ } } }) } } })
授權設置頁
完整代碼
wx.getLocation({ success: function(res) { app.globalData.lat = res.latitude; app.globalData.lon = res.longitude; }, fail() { wx.showModal({ title: '提醒', content: '您拒絕了位置授權,將無法使用大部分功能,點擊確定重新獲取授權', success(res) { //如果點擊確定 if (res.confirm) { wx.openSetting({ success(res) { //如果同意了位置授權則userLocation=true if (res.authSetting["scope.userLocation"]) { that.onLoad() } } }) } } }) } })
2.用戶信息授權
用戶授權步驟相對會復雜一點,因為現在獲取wx.getUserInfo 接口后續將不再出現授權彈窗。需要手動點擊去授權,所以也是需要誘導用戶去點擊按鈕。
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">確認</button>
open-type 我用到了兩種
注意:這里必須是button組件才能觸發
這里我將他封裝成了一個模擬的彈出框(樣式丑陋,自己修改),wxss就不發出來了
模擬彈出框
<!-- wxml --> <view class='getInfo' wx:if="{{haveInfo}}"> <view class='content'> <view class='text'>我們需要獲取您的授權信息</view> <view class='btn_block'> <button class='btn1' bindtap='no'>拒絕</button> <button class='btn2' open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">確認</button> </view> </view> </view>
調用bindUserInfo,如果e.detail.userInfo存在,則說明授權成功
bindGetUserInfo(e) { //用戶點擊允許授權 if (e.detail.userInfo) { //業務邏輯 }
授權成功后即可再調用wx.getUserInfo(),就可以獲得用戶信息
完整代碼
bindGetUserInfo(e) { //用戶點擊允許授權 if (e.detail.userInfo) { this.setData({ haveInfo: false }) // 獲取用戶信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo //業務代碼 } }) } } }) } }
3.獲取用戶手機授權
用戶手機授權也是需要誘導用戶去點擊按鈕觸發的授權框,所以也是要自定義。
和獲取用戶信息的自定義框不同的是按鈕屬性
<button class='btn2' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">確認</button>
bindgetphonenumber函數調用成功會返回三個值:
其中我用到的是encryptedData、iv,將這兩個發給后端去解碼,可以獲得三個值(寫入數據庫就交給后端了,就不用再多個步驟)
如果獲取成功才會返回三個值,失敗則不會,所以我們判斷是否授權獲取手機可以直接用那三個值判斷
我的代碼↓
//獲取用戶手機 getPhoneNumber(e) { if (e.detail.encryptedData) { this.setData({ havePhone: false }) wx.request({ url: app.globalData.url + 'xiao_bindphone', method: 'POST', header: { "Content-Type": "application/x-www-form-urlencoded" }, data: { user_id: app.globalData.user_id, sessionKey: app.globalData.sessionKey, encryptedData: e.detail.encryptedData, iv: e.detail.iv }, success(res) { //業務代碼 } }) } },
三個授權就寫到這啦,下面寫下我的流程和邏輯
————————————————————————————————
如果是新用戶進入小程序的話,提交code到后端,后端在數據庫創建新的用戶,此時的新用戶數據只有少量數據的(如后端自己創建的id),所以我們需要將能獲取到的值傳給后端完善數據庫。
一、判斷數據庫中此用戶是否有頭像和名稱,沒有則需要授權用戶數據(傳頭像和名稱),將得到的頭像和名稱傳到后端完善數據庫,此時需要用到用戶信息的授權,即wx.getUserInfo。
二、判斷數據庫中此用戶是否有手機號,沒有則調用獲取手機號授權,即getPhoneNumber。
三、關于位置授權是項目需要,可調用wx.getLocation。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。