UniApp小程序开发如何获取用户手机号

我们在小程序开发的时候经常遇到这种需求，需要在账号登陆的时候进行手机号获取，并使用手机号登陆。

本文讲述如何在前后端分离的状态下获取手机号

　　　查阅官网文档不难发现我们需要使用uni.login()这个方法来获取用户的code，获取用户的openid和session_key是需要后端去发请求的，因为需要调取  https://api.weixin.qq.com/sns/jscode2session  这个接口来获取，官方说明不可以把这个域名作为白名单配置需要后端去发送请求。所以我们前端进行uni.login()获取code之后发送给后端让后端去结合四个参数(appid、secret、js_code、grant_type)来发送请求获取session_key和openid

话不多说放代码

uni.login({
    provider: 'weixin', //使用微信登录
    success: function(loginRes) {
　　　　　　　　　　　console.log(loginRes.code)
　　　　　　　　　　　}
})

这个里面获取到的loginRes.code就是我们需要的code，我们将code传输给后端就可以了。

后端只需要返回一个session_key我们前端就可以获取到手机号密文

html:<button open-type="getPhoneNumber" size="mini" @getphonenumber="getPhoneNumber">获取手机号</button>

函数://获取手机号
    getPhoneNumber(e) {
    if (e.detail.errMsg == "getPhoneNumber:ok") { // 用户允许或去手机号
        uni.request({
        　　url: "这里请求的地址是后端进行解密的接口",
            method: "POST",
            header: {
                'haneton-wildfire': 请求头
            },
            data: {
                encData: e.detail.encryptedData,
                iv: e.detail.iv,
                key: this.session_key,
            　},
        　　　　success: (res) => {
            　　　　console.log(res)
            }
        })
    } else {
　　　　　　　　alert("用户取消了授权")
    }
}

以上是获取手机号授权并进行解密的函数，我们需要将之前后端返回的session_key保存并在这里携带发送请求，这个方法会自动获取密文等信息

 

以上是前后端分离前端获取手机号的方法和步骤欢迎指正