微信小程序授权登录+获取手机号 一、官方文档背景：小程序登录的链接:微信小程序获取手机号的链接: 二、微信小程序授权登录+获取手机号1、简单说明官方文档的操作：先授权登录后拿手机号2、前端代码：（1）自定义util.js,替换util的原生utils.js(其实原生也可以用，按个人喜好）（2）login.wxml（3）login.wxss（4）login.json（5）login.js 三、以上操作后的页面展示：附提醒：
一、官方文档背景：
这个图一定要认真去看，一步一步来，不要着急
小程序登录的链接:
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html.
微信小程序获取手机号的链接:
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html.
二、微信小程序授权登录+获取手机号 1、简单说明官方文档的操作：先授权登录后拿手机号
（1）前端调用wx.login接口拿到获取临时登录凭证code，并回传到后端
（2）后端利用auth.code2Session接口，换取 用户唯一标识OpenID和 会话密钥 session_key
（3）前端点击按钮时触发getPhoneNumber(e)回传给后端 encryptedData和iv 加密数据解密算法
（4）后端利用从前端得到的session_key、加密数据解密算法和自己拿到的app_id进行解密手机号后回传给前端
2、前端代码： （1）自定义util.js,替换util的原生utils.js(其实原生也可以用，按个人喜好） //封装请求//const server = 'https://XXXX/';//正式域名 必须为httpsconst server = 'http://127.0.0.1:8080/';//测试域名//本地前后端调试时可以先不检验合法域名（在微信开发者工具中的本地设置记得打钩这一选项），就可以进行访问HTTP啦const requestUrl = ({ url, params, success, method = "post"}) => { wx.showLoading({ title: '加载中', }); // let headerPost = {'content-type': 'application/x-www-form-urlencoded'} let headerPost= {'content-Type': 'application/json'} let headerGet = {'content-Type': 'application/json'} return new Promise((resolve, reject) => { wx.request({ url: server + url, method: method, data: params, header: method = 'post' ? headerPost : headerGet, success: (res) => { wx.hideLoading(); if (res['statusCode'] == 200) { resolve(res)//异步成功之后执行的函数 } else { wx.showToast({ title: res.data.msg || '请求出错', icon: 'none', duration: 2000, mask: true }) reject(res.ErrorMsg); } }, fail: (res) => { wx.hideLoading(); wx.showToast({ title: res.data.msg || '', icon: 'none', duration: 2000, mask: true }) reject('网络出错'); }, complete: function () { wx.hideLoading() } }) })}module.exports = { requestUrl: requestUrl} （2）login.wxml <view wx:if="{{canIUse}}"> <view class='header'> <image src='/images/wx.jpg '></image> </view> <view class='content'> <view>申请获取以下权限：</view> <text>获得你的手机号</text> </view> <button class='bottom' type='primary' open-type="getPhoneNumber" lang="zh_CN" bindgetphonenumber="getPhoneNumber"> 微信授权 </button></view><view wx:else>请升级微信版本</view>
附：样式图片
（3）login.wxss .header { margin: 90rpx 0 90rpx 50rpx; text-align: center; width: 650rpx; height: 300rpx; line-height: 450rpx;}.header image { width: 200rpx; height: 200rpx; border-radius: 100rpx;}.content { margin-left: 50rpx; margin-bottom: 90rpx;}.content text { display: block; color: #9d9d9d; margin-top: 40rpx;}.bottom { border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx;} （4）login.json { "usingComponents": {}, "navigationBarTitleText":"授权登录"} （5）login.js import requestUrl from '../../utils/util.js'// 获取应用实例const app = getApp()Page({ data: { //判断小程序的API，回调，参数，组件等是否在当前版本可用。 canIUse: wx.canIUse('button.open-type.getUserInfo'), openid: null, sessionkey:null, token: null, phonenumber:null }, onLoad: function (options) { //登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId if (res.code) { console.log('code', res.code) requestUrl.requestUrl({ url: "wx/getOpenId", params: { code: res.code }, method: 'GET', }).then((res) => { this.data.openid = res.data.data.openId this.data.sessionkey = res.data.data.sessionKey }).catch((errorMsg) => { console.log(errorMsg) }) } } }) }, //获取手机号 getPhoneNumber: function (e) {//点击的“拒绝”或者“允许 // console.log(e.detail.errMsg) // console.log(e.detail.iv) // console.log(e.detail.encryptedData) if(e.detail.errMsg=="getPhoneNumber:ok"){//点击了“允许”按钮， requestUrl.requestUrl({ url:"wx/getPhone", params: { encryptedData: e.detail.encryptedData, iv: e.detail.iv, sessionKey: this.data.sessionkey, openId: this.data.openid }, method:"post", }).then((res) => {//then接收一个参数，是函数，并且会拿到我们在requestUrl中调用resolve时传的参数 console.log("允许授权了") let data = { token: res.data.data.token, phonenumber: res.data.data.phone, openid: res.data.data.openId, sessionKey: res.data.data.sessionKey } if(res.data.code==200){ wx.navigateTo({ url: `../index/index?token=${data.token}&phone=${data.phonenumber}&openid=${data.openid}&sessionKey=${data.sessionKey}`, success: function(res) {}, }) } }).catch((errorMsg) => { console.log(errorMsg) }) } }}) 三、以上操作后的页面展示：
附提醒：
1、获取手机号之前必须先登录
2、想要获取手机号必须要通过按钮点击获取
3、登录必须要有一个页面，否则正式提交上线审核不通过
4、我的请求代码是封装的，可以使用微信官方的进行请求后端的哈
5、前后端逻辑就是这些，主要就是数据要传到就行，交互就完成啦，最好的话后端还是需要传个token给前端进行保存，避免重复登录
1
编写不易，如果有帮助到的话，可以关注，点赞和收藏哦~ ↩︎