微信小程序用戶授權(quán)、位置授權(quán)及獲取微信綁定手機(jī)號

1.位置授權(quán)

創(chuàng)新互聯(lián)長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為花垣企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、網(wǎng)站制作，花垣網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

位置授權(quán)相對簡單，可以直接調(diào)用方法wx.getLocation()就可以彈出授權(quán)框，

在調(diào)用前需要在app.json中設(shè)置用途說明

Page({
"permission": {
 "scope.userLocation": {
 "desc": "你的位置信息將用于xxx"
 }
 }
})

授權(quán)框

但是存在不少用戶會拒絕授權(quán),如果拒絕授權(quán)就不會再彈窗，而是直接進(jìn)入接口 fail 回調(diào)，就要手動授權(quán)，我們可以通過自定義彈窗來誘導(dǎo)用戶授權(quán)。我這里用的是wx.showMoadl確認(rèn)框。

確認(rèn)框

如果確認(rèn)就調(diào)用wx.opensetting調(diào)出授權(quán)設(shè)置頁面

wx.showModal({
   title: '提醒',
   content: '您拒絕了位置授權(quán)，將無法使用大部分功能，點擊確定重新獲取授權(quán)',
   success(res) {
   //如果點擊確定
   if (res.confirm) {
    wx.openSetting({ //打開設(shè)置頁
    success(res) { //成功，返回頁面回調(diào)
     //如果同意了位置授權(quán)則userLocation=true
     if (res.authSetting["scope.userLocation"]) { //授權(quán)中如果有位置授權(quán)則執(zhí)行邏輯
     /*你的代碼*/
     }
    }
    })
   }
   }
  })

授權(quán)設(shè)置頁

完整代碼

wx.getLocation({
  success: function(res) {
  app.globalData.lat = res.latitude;
  app.globalData.lon = res.longitude;
  },
  fail() {
  wx.showModal({
   title: '提醒',
   content: '您拒絕了位置授權(quán)，將無法使用大部分功能，點擊確定重新獲取授權(quán)',
   success(res) {
   //如果點擊確定
   if (res.confirm) {
    wx.openSetting({
    success(res) {
     //如果同意了位置授權(quán)則userLocation=true
     if (res.authSetting["scope.userLocation"]) {
     that.onLoad()
     }
    }
    })
   }
   }
  })
  }
 })

2.用戶信息授權(quán)

用戶授權(quán)步驟相對會復(fù)雜一點，因為現(xiàn)在獲取wx.getUserInfo 接口后續(xù)將不再出現(xiàn)授權(quán)彈窗。需要手動點擊去授權(quán)，所以也是需要誘導(dǎo)用戶去點擊按鈕。

<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">確認(rèn)</button>

open-type 我用到了兩種

• getUserInfo 獲取用戶信息，可以從bindgetuserinfo回調(diào)中獲取到用戶信息
• getPhoneNumber 獲取用戶手機(jī)號，可以從bindgetphonenumber回調(diào)中獲取到用戶信息（下面有）

注意:這里必須是button組件才能觸發(fā)

這里我將他封裝成了一個模擬的彈出框（樣式丑陋，自己修改），wxss就不發(fā)出來了

模擬彈出框

<!-- wxml -->
<view class='getInfo' wx:if="{{haveInfo}}">
 <view class='content'>
 <view class='text'>我們需要獲取您的授權(quán)信息</view>
 <view class='btn_block'>
  <button class='btn1' bindtap='no'>拒絕</button>
  <button class='btn2' open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">確認(rèn)</button>
 </view>
 </view>
</view>

調(diào)用bindUserInfo，如果e.detail.userInfo存在，則說明授權(quán)成功

bindGetUserInfo(e) {
 //用戶點擊允許授權(quán)
 if (e.detail.userInfo) {
  //業(yè)務(wù)邏輯
 }

授權(quán)成功后即可再調(diào)用wx.getUserInfo()，就可以獲得用戶信息

完整代碼

bindGetUserInfo(e) {
 //用戶點擊允許授權(quán)
 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
    //業(yè)務(wù)代碼
    }
   })
   }
  }
  })
 }
 }

3.獲取用戶手機(jī)授權(quán)

用戶手機(jī)授權(quán)也是需要誘導(dǎo)用戶去點擊按鈕觸發(fā)的授權(quán)框，所以也是要自定義。

和獲取用戶信息的自定義框不同的是按鈕屬性

<button class='btn2' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">確認(rèn)</button>

bindgetphonenumber函數(shù)調(diào)用成功會返回三個值：

• encryptedData：包括敏感數(shù)據(jù)在內(nèi)的完整用戶信息的加密數(shù)據(jù)，詳細(xì)見加密數(shù)據(jù)解密算法
• iv：加密算法的初始向量，詳細(xì)見加密數(shù)據(jù)解密算法
• cloudID：敏感數(shù)據(jù)對應(yīng)的云 ID，開通云開發(fā)的小程序才會返回，可通過云調(diào)用直接獲取開放數(shù)據(jù)，詳細(xì)見云調(diào)用直接獲取開放數(shù)據(jù)

其中我用到的是encryptedData、iv，將這兩個發(fā)給后端去解碼，可以獲得三個值（寫入數(shù)據(jù)庫就交給后端了，就不用再多個步驟）

• phoneNumber：用戶綁定的手機(jī)號（國外手機(jī)號會有區(qū)號）
• purePhoneNumber：沒有區(qū)號的手機(jī)號
• countryCode：區(qū)號

如果獲取成功才會返回三個值，失敗則不會，所以我們判斷是否授權(quán)獲取手機(jī)可以直接用那三個值判斷

我的代碼↓

//獲取用戶手機(jī)
 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) {
   //業(yè)務(wù)代碼
  }
  })
 }
 },

三個授權(quán)就寫到這啦，下面寫下我的流程和邏輯

————————————————————————————————

如果是新用戶進(jìn)入小程序的話，提交code到后端，后端在數(shù)據(jù)庫創(chuàng)建新的用戶，此時的新用戶數(shù)據(jù)只有少量數(shù)據(jù)的（如后端自己創(chuàng)建的id），所以我們需要將能獲取到的值傳給后端完善數(shù)據(jù)庫。

一、判斷數(shù)據(jù)庫中此用戶是否有頭像和名稱，沒有則需要授權(quán)用戶數(shù)據(jù)（傳頭像和名稱），將得到的頭像和名稱傳到后端完善數(shù)據(jù)庫，此時需要用到用戶信息的授權(quán)，即wx.getUserInfo。

二、判斷數(shù)據(jù)庫中此用戶是否有手機(jī)號，沒有則調(diào)用獲取手機(jī)號授權(quán)，即getPhoneNumber。

三、關(guān)于位置授權(quán)是項目需要，可調(diào)用wx.getLocation。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞標(biāo)題：微信小程序用戶授權(quán)、位置授權(quán)及獲取微信綁定手機(jī)號
標(biāo)題來源：http://muchs.cn/article2/pgdeic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)站導(dǎo)航、動態(tài)網(wǎng)站、ChatGPT、網(wǎng)頁設(shè)計公司、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)