微信小程序获取手机号授权完整实现

本文主要是介绍微信小程序获取手机号授权完整实现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一.app.js配置

App({
  onLaunch: function () {
    
  },
  onShow: function () {
    
  },
  onHide: function () {
    //    console.log(getCurrentPages())
  },
  one rror: function (msg) {
    //console.log(msg)
  },

  globalData: {
    userInfo: null,
    appid: "",
    appsecret: "",
    phoneNumber: '',
    getSessionKeyUrl: 'http://localhost:8888/test/getsessionkey',
    getPhoneUrl: 'http://localhost:8888/test/getphone',
    orderHomeUrl: 'http://localhost:8888/login?phone=',
    driverLoginUrl: 'http://localhost:8888/driver/login'
  }
});

二.app.json配置

{
  "pages": [
    "pages/login/login",
    "pages/main/main",
    "pages/driverlogin/driverlogin"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F8F8F8",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

三.微信授权

1.页面

<view wx:if="{{isShow}}" >
    <view class="container" style="padding:0rpx">
        <image src='./login.png' style="z-index:-99;width:100%;height:100%;" mode="widthFix"></image>
        <view style="margin-top:10rpx; width: 98%;" >
            <button class="show" type="primary" lang="zh_CN" open-type='getPhoneNumber'  bindgetphonenumber="getPhoneNumber">{{wechat}}</button>
        </view>
    </view>
</view> 
<view class="container" wx:else></view>

2.页面样式

.show{
  display: block;
  border-radius: 8rpx;
  margin: 20rpx 20rpx 20rpx 20rpx;
  font-size: 35rpx;
}

.container{
  position: fixed;  /*关键属性，设置为fixed*/
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

3.json

{
  "usingComponents": {}
}

4.js

const app = getApp();
Page({
  data: {
    // 判断小程序的API，回调，参数，组件等是否在当前版本可用。
    canIUse: wx.canIUse('button.open-type.getPhoneNumber'),
    wechat: '微信快捷登录',
    isShow: false
  },
  onl oad: function() {
    // 从缓存中取手机号
    console.log("获取手机号！")
    try {
      var value = wx.getStorageSync('phoneNumber')
      if (value) { // 说明已登录 跳转 页面
        console.log("获取缓存："+value)
        wx.navigateTo({
          url: '../main?param=' + value
        })
      }else{// 未登录 显示 微信授权页面
        this.setData({
          isShow: true
        })
      }
    } catch (e) {

    }
    // 解决第一次获取手机号失败问题
    wx.login({
      success: res => {
        if(res.code){
          console.log("code->", res.code)
        }
      }
    })
  },
  // 0.获取手机号授权
  getPhoneNumber: function(e) {
    // 用户拒绝授权
    if(e.detail.errMsg == "getPhoneNumber:fail user deny") {
      wx.showToast({
        icon: "none",
        title: '请允许获取手机号，否则功能不可用！',
      })
      return
    }
   
    /// 用户允许授权
    console.log("iv->", e.detail.iv); //包括敏感数据在内的完整用户信息的加密数据,需要解密
    console.log("encryptedData->", e.detail.encryptedData); //加密算法的初始向量，解密需要用到

    /// 获取手机号
    // 1.获取临时登录凭证code
    wx.login({
      success: res => {
        if(res.code){
          this.code = res.code;
          console.log("code->", res.code)
          this.getSessionKey(res.code, e.detail.encryptedData, e.detail.iv);
        }
      }
    })
    },
  // 2.访问登录凭证校验接口获取session_key（后续改成后台实现）
  getSessionKey: function(js_code, encryptedData, iv) {
    wx.request({
      url: app.globalData.getSessionKeyUrl,
      data: {
          'jscode': js_code,
          'sign': 'sign'
      },
      method: 'GET', 
      header: {
          'content-type': 'application/json'
      }, // 设置请求的 header
      success: function(data) {
        console.log("session_key->", data.data)
        if(data.data==undefined){
          wx.showToast({
            icon: "none",
            title: 'session_key获取失败，请重新登录！',
          })
          return
        }
        // 3. 解密获取手机号
        wx.request({
          url: app.globalData.getPhoneUrl,
          data: {
              'encryptedData': encodeURIComponent(encryptedData),//需要进行编码
              'iv': iv,
              'sessionKey': data.data,
              'sign': 'sign',
          },
          method: 'GET', 
          header: {
              'content-type': 'application/json'
          }, // 设置请求的 header
          success: function(data2) {
              console.log(data2.data.phoneNumber)
              if(data2.statusCode == 200) { 
                if(data2.data.phoneNumber==undefined){
                  // 获取手机号失败 跳转到 常规 用户登录页面（通过webview）
                  wx.navigateTo({
                    url: '../driverlogin/driverlogin'
                  })
                  return
                }
                // 存储数据到缓存
                wx.setStorage({
                  key:"phoneNumber",
                  data:data2.data.phoneNumber
                })
                // 4.跳转web-view页面
                wx.navigateTo({
                  url: '../main?param=' + data2.data.phoneNumber
                }) // 4
              }
          },
          fail: function(err) {
              console.log(err);
              wx.showToast({
                icon: "none",
                title: '获获取手机号失败，请重试！',
              })
          }
        })// 3
      },
      fail: function(err) {
          console.log(err);
          wx.showToast({
            icon: "none",
            title: 'session_key获取失败，请重新登录！',
          })
          return
      }
    })
  }// 2
})

这篇关于微信小程序获取手机号授权完整实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！