微信弃用bindgetuserinfo，wx.getUserProfile使用示例

我爱模板网在使用uni-app开发一个小程序时，使用了openType="getUserInfo"，结合bindgetuserinfo来获取用户的头像、昵称等，代码如下：

<tui-button shape="circle" shadow type="green" height="88rpx" openType="getUserInfo" @getuserinfo="bindgetuserinfo">
    <image src="../../static/images/weichat.png"></image>
    微信登陆
</tui-button>

bindgetuserinfo(res){
    uni.showLoading({
        title: '加载中',
        mask: true
    });
    let userInfo = {};
    userInfo = {...res.userInfo};
    if (res.errMsg === 'getUserInfo:ok') {
        //小程序登陆
        wx.login({
            success:(res) => {
                if (res.code) {
                    //根据code获取unionid
                    this.$func.api(this.$apiConfig.wxLogin(),{
                        code: res.code
                    },res => {
                        if(res.secToken){
                            userInfo.secToken = res.secToken;
                            userInfo.userId = res.userId;
                            uni.setStorageSync('userInfo', userInfo)
                            console.log('userInfo', userInfo)
                            uni.switchTab({
                                url:'/pages/classify/classify'
                            })
                        }
                    })
                } else {
                    console.log('登录失败！' + res.errMsg)
                }
            },
        })
    }else{
        uni.hideLoading()
        console.log('取消授权');
    }
},

但是，发现在开发者工具下，正常，在手机下，就是获取不到，头像是灰色的默认头像，昵称始终是“微信用户”，都快急死了。一开始以为是渲染的问题，但是发现从一开始就是错误的，bindgetuserinfo根本获取不到。后来才知道，这种方式已经被弃用，要使用wx.getUserProfile来获取。

wx.getUserProfile的使用方法和bindgetuserinfo有本质区别，bindgetuserinfo需要给开放权限openType，并且必须是按钮上。但是wx.getUserProfile不一样，直接触发即可，会弹出授权窗口，授权后就能获取到。代码如下：

<view shape="circle" shadow type="green" height="88rpx" @click="doLoginWX">
    <image src="../../static/images/weichat.png"></image>
    微信登陆
</view>

doLoginWX(){
    wx.getUserProfile({
        desc: "获取你的昵称、头像、地区及性别",
        success: res => {
            let userInfo = {};
            userInfo = {...res.userInfo};
            //小程序登陆
            wx.login({
                success:(res) => {
                    if (res.code) {
                        //根据code获取unionid
                        this.$func.api(this.$apiConfig.wxLogin(),{
                            code: res.code
                        },res => {
                            if(res.secToken){
                                userInfo.secToken = res.secToken;
                                userInfo.userId = res.userId;
                                uni.setStorageSync('userInfo', userInfo)
                                console.log('userInfo', userInfo)
                                uni.switchTab({
                                    url:'/pages/classify/classify'
                                })
                            }
                        })
                    } else {
                        console.log('登录失败！' + res.errMsg)
                    }
                },
            })
        },
        fail: res => {
            //拒绝授权
            this.$func.msg('登录失败，您拒绝了请求')
            return;
        }
    })
},

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！