使用用户授权方式获取微信头像昵称

使用用户授权方式获取微信头像昵称

注：以uniapp为例，部分写法与原生微信有所不同

老版本

可直接通过wx.getUserProfile的方式获取用户信息，然后填充头像和昵称，但在2022 年 10 月 25 日已被回收，返回信息为默认灰色头像和昵称：‘微信用户’，

以下方式仅针对开发调试，不上线的情况：

在微信开发者工具中：右上角详情 -> 本地设置 -> 调试基础库-> 选择2.21.2~2.27.0之间的版本-> 推送-> 确定

设置后可在开发版本使用这种方式获取用户信息

参考文档：小程序用户头像昵称获取规则兼容文档

<image class="img" :src="userInfo.avatarUrl ? userInfo.avatarUrl : '/static/images/headers.jpg'" @click="getUser"></image>
<text>{{ userInfo.nickName || '未登录' }}</text>

getUser() {
    wx.getUserProfile({
    desc: '用于完善用户信息', // 新版已弃用，只能获取默认头像和昵称,然后onChooseAvatar方法获取头像
    success: (res) => {
        console.log(res)
        this.userInfo = res.userInfo;
        this.nickname = this.userInfo.nickName;
    }
  })
},

新版本

参考文档：头像昵称填写能力及对应原生写法

头像

需要将 [button] 组件 open-type 的值设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar（对应uniapp中的写法如下） 事件回调获取到头像信息的临时路径。

昵称

需要将 [input] 组件 type 的值设置为 nickname，当用户在此input进行输入时，键盘上方会展示微信昵称

<button v-if="userInfo.avatarUrl" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
    <image class="img" :src="userInfo.avatarUrl ? userInfo.avatarUrl : '/static/images/headers.jpg'"></image>
</button>
<input type="nickname" @blur="handleBlur()" :focus="focus" v-model="nickname">

// 获取微信头像
onChooseAvatar(e) {
    this.userInfo.avatarUrl = e.detail.avatarUrl; //头像地址
    uni.setStorageSync("avatarUrl",this.avatarUrl)
},
// 获取用户昵称
handleBlur() {
    if(this.nickname==''){
        uni.showToast({
            title:"不能为空",
            icon:'error'
        })
    }else{
        this.isEdit = false
    }
},

另外

wx.authorize方法中的scope.userInfo也不能再使用，

通过wx.createUserInfoButton弹出用户授权是小游戏的方法，不是小程序！！！

可以使用的部分参考文档：用户授权列表