微信小程序获取本机手机号码登录

前言

开发环境：使用uni-app开发微信小程序。
具体需求：获取本机手机号码直接登录小程序。

参考

简单了解有此功能的微信小程序的情况。

实现过程

参考：微信小程序官方文档一

参考：微信小程序官方文档二

关键实现代码

<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true">
    <div >微信用户一键登录</div>
</button>

getPhoneNumber(e) {
    uni.login({
        success: (res) => {
            this.code = res.code;
            if (this.code) {
                console.log("验证登陆请求");
                if (e.detail.errMsg == "getPhoneNumber:ok") {
                    console.log("用户点击了接受", e)
                    this.phone = e.detail.encryptedData;
                    this.iv = e.detail.iv;
                    this.getAccessToken(e); // 将code、phone、iv发给后台，让后台解密手机号，拿回openid和session
                } else {
                    console.log("用户点击了拒绝")
                }
            }
        },
        fail: () => {
            this.$refs.toast.hide();
            this.$refs.toast.error("登录失败！请重新授权登录！");
        },
    });
},
getAccessToken(e) {
    console.log(e.detail.code)
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    wx.login({
        success: res => {
            console.log(res.code);
            wx.request({
                url: '服务器后端接口',
                data: {
                    'encryptedData': e.detail.encryptedData,
                    'iv': e.detail.iv,
                    'codes': e.detail.code
                },
                method: 'GET',
                header: {
                    'content-type': 'application/json'
                },
                success: function (res) {
                    wx.setStorageSync('PhoneNumber', res.data.phoneNumber);
                    console.log("手机号为" + res.data.phoneNumber)
                },
                fail: function (err) {
                    console.log(err);
                }
            })
        }
    })
}