微信小程序授权登录+获取手机号

一、官方文档背景：

这个图一定要认真去看，一步一步来，不要着急

小程序登录的链接:

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/';//正式域名 必须为https
const 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. 编写不易，如果有帮助到的话，可以关注，点赞和收藏哦~ ↩︎