小程序获取手机号——小程序入门与实战（15）

上一章节我们学习了小程序登录的部分流程，今天我们继续来把登录流程完善。

小程序客户端将获取到的微信用户绑定的手机号传给后端，返回给小程序客户端自定义登录状态 token。

获取手机号

获取微信用户绑定的手机号，需先调用wx.login接口。

请注意：

需要用户主动触发才可以发起获取手机号接口，所以我们需要 button 组件的帮助。

button 组件

按钮，为表单组件。

常用属性：

• open-type 微信开放能力，值为字符串。

  • getPhoneNumber 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息。
  • getUserInfo 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息
  • share 触发用户转发
• bindgetphonenumber 获取用户手机号回调
• bindgetuserinfo 用户点击该按钮时，会返回获取到的用户信息

上面的属性一定要了解，这些我们后面全都会用到的。

使用方法

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

将 button 组件 open-type 的值设置为 getPhoneNumber

当用户点击同意之后，我们就可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据，然后我们将加密数据返回给后端，让后端去进行解密获取手机号。

注意

在回调中调用 wx.login登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。

bindgetphonenumber()回调函数

getPhoneNumber (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    console.log(e.detail.encryptedData)
  }
  

• encryptedData 包括敏感数据在内的完整用户信息的加密数据
• iv 加密算法的初始向量

这些都是要传给后台的数据。

代码详解

部分 personal.wxml

  <view class="nick-name">
            <blcok wx:if="{{token == '' && is_fill_info == false}}">
                点击登录
            </blcok>
            <blcok wx:if="{{token  && is_fill_info == false}}">
                点击授权头像昵称
            </blcok>
            <block wx:if="{{token  && is_fill_info == true}}">
                @黔在在
            </block>
        </view>
        
<!--        手机号登录-->
        <button class="phone_number_button" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" wx:if="{{token == '' && is_fill_info == false}}"></button>

部分 personal.js

data:{
     open_id:'',
        token:'',
        is_fill_info:false,
        code:'',
        unionId:""

},
onShow(){
        let token = wx.getStorageSync('user_token');
        if(token){
            this.setData({
                token:token
            })

        } else {
            this.wxLogin()
        }

    },
     //手机回调
    getPhoneNumber(e){
    //encryptedData: 包括敏感数据在内的完整用户信息的加密数据
    //iv : 加密算法的初始向量
        if(e.detail.encryptedData){
            wx.login({
                success: res => {
                    if (res.code) {
                        this.setData({
                            code: res.code
                        }, res => {
                            this.phone(e);
                        })
                    } else {
                        wx.showModal({
                            content: " 获取code失败",
                            showCancel: false
                        })
                    }
                }
            });
        }

    },
    //传给后端去解密
    phone(e){
        wx.showLoading({
            title: '正在登录',
            mask: true
        })
        //传给后端的参数
        
        sandBox.post({
            api:'api/sir/user/wechat/login',
            data:{
                code:this.data.code,
                encryptedData: e.detail.encryptedData,
                iv: e.detail.iv,
                openId: this.data.open_id,
                unionId:this.data.unionId
            }
        }).then(res=>{
            res= res.data;
            if(res.status){
                if(res.data && res.data.access_token){
                    //将拿到的token，做一下处理，客户端跟服务端协调一致
                    let access_token = res.data.token_type + ' ' + res.data.access_token;
                    //将token存在本地
                    wx.setStorageSync('user_token', access_token);
                    this.setData({
                        token:access_token
                    })
                }
            } else {
                wx.hideLoading()
                wx.showModal({
                    content: res.message || '请求失败，请重试',
                    showCancel: false
                })
            }
            wx.hideLoading()
        }).catch(rej=>{
            wx.hideLoading()
            wx.showModal({
                content: rej.message || '请求失败，请重试',
                showCancel: false
            })
        })
    }

然后我们的页面就变成下面这个样子了。

还需要用户去授权头像昵称。

大家肯定有疑问，wx:if 是什么？别着急，在下一章节会跟大家详细讲解。

总结

• button 组件
• 授权用户手机号
• getPhoneNumber() 回调函数

至此小程序登录的功能我们就学习完成了，所以下一章节我们讲解何为 wx.if 条件渲染跟如何拿到用户的头像昵称。

本文由博客群发一文多发等运营工具平台 OpenWrite 发布