首页
学习
活动
专区
圈层
工具
发布

小程序中wx.login与获取用户信息调用的时机

笔者最近在开发小程序,笔者直接嵌套的方式结合wx.login和getPhoneNumber,打算这样获取用户手机号:

代码语言:javascript
复制
getPhoneNumber(e){
        console.log(this)
        if(e.detail.errMsg.includes('ok')){
            wx.login({
            success:function(res){
            let { encryptedData, iv } = e.detail;
            console.log('code:', res.code);
            console.log('encryptedData:', encryptedData);
            console.log('iv:', iv);

            // return
            Req({
                url: apiList.getPhone,
                type: 'POST',
                data: {
                    encryptedData,
                    iv,
                    js_code: this.data.code,
                    appIdCode: '1003'
                },
                success:  (res) =>{
                    console.log(res);
                    let { openid, purePhoneNumber } = res;
                    console.log(openid, purePhoneNumber);
                    if (!openid) {

                    }
                    wx.setStorageSync("openid", openid);
                    wx.setStorageSync("phone", purePhoneNumber);
                    
                    if(this.data.back){
                        wx.redirectTo({
                            url: this.data.back
                        })
                    }else{
                        wx.navigateBack({
                            delta: 1
                        })
                    }
                    
                }
            })
            }
            })
        }else{
            console.log("用户不同意")
        }
    }

阅读上面源码,在getPhoneNumber函数中,我们先调用了wx.login,从而获取code,然后再getPhoneNumber的参数中回去iv和加密信息,将其发送给后端解密,此时有时会报错,这里微信文档已经解释的很清楚了。

注意

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

所有后面改正,提前调用login,也就是页面onload时进行login,改进代码如下:

代码语言:javascript
复制
import { apiList,Req } from "../../utils/request";
Page({
    data:{
        code:null,
        back:null
    },
    onLoad: function (options) {
        console.log("onload:", options);
        if (options.back){
            this.setData({
                back: options.back
            })
        }
        wx.login({
            success: (res) =>{
                let { code } = res;
                this.setData({code})
            }
        })
       
    },
    getPhoneNumber(e){
        console.log(this)
        if(e.detail.errMsg.includes('ok')){
            let { encryptedData, iv } = e.detail;
            console.log('code:', this.data.code);
            console.log('encryptedData:', encryptedData);
            console.log('iv:', iv);

            // return
            Req({
                url: apiList.getPhone,
                type: 'POST',
                data: {
                    encryptedData,
                    iv,
                    js_code: this.data.code,
                    appIdCode: '1003'
                },
                success:  (res) =>{
                    console.log(res);
                    let { openid, purePhoneNumber } = res;
                    console.log(openid, purePhoneNumber);
                    if (!openid) {

                    }
                    wx.setStorageSync("openid", openid);
                    wx.setStorageSync("phone", purePhoneNumber);
                    
                    if(this.data.back){
                        wx.redirectTo({
                            url: this.data.back
                        })
                    }else{
                        wx.navigateBack({
                            delta: 1
                        })
                    }
                    
                }
            })
        }else{
            console.log("用户不同意")
        }
    }

})

此时code的获取时机是早于获取电话号码的,当用加密信息去解密时,code所对应的解密信息和加密信息是配套的。

如果是第一种方式,先获取了加密信息,在去login的,此时解密信息已经更新了,拿着加密信息去解密就会报错。

每次login都会更新解密信息,并且解密信息会在微信服务器保存一段时间,我们要确保得到的加密信息是在登录之后获得的,或者这样说,我们获得的加密信息,一应要用上次login时对应的解密信息解密才能成功。

以上便是笔者在获取用户电话号码时出现的错误以及解决方法,希望对你有所帮助。

参看信息:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

下一篇
举报
领券