uniapp开发微信小程序——获取头像和昵称

我正在参加「掘金·启航计划」

前言

近期做了一个微信小程序项目（使用uniapp开发），需要展示头像和昵称；但是由于小程序调整了用户头像昵称的获取规则，调用接口只能获得默认灰色头像和称呼。相关说明如下：

因此该项目一开始做登录就获取默认的头像和昵称展示，然后使用头像选择、昵称填写的方法获得真实的头像和昵称，并将数据传给后台。

具体实现

页面布局

注：button元素使用绝对定位控制在头像的位置，这样点击头像就可以选择了

<view class="mine-info flex-ct-y">
    <view class="photo">
            <image :src="userInfo.avatar" class="pic-cover" mode="aspectFill"></image>
            <button type="balanced" open-type="chooseAvatar" @chooseavatar="chooseavatar"></button>
    </view>
    <input class="nickname" type="nickname" style="font-size:42rpx;" :value="userInfo.name"
            @input="nameInput" @blur="nameInput" />
</view>

1. 头像选择

将 button组件 open-type 的值设置为 chooseAvatar，用于获取用户头像；当用户选择需要使用的头像之后，可以从@chooseavatar回调中获取到头像的临时路径（原生微信小程序是bindchooseavatar 事件）。

chooseavatar(e) {	
    // let avatarUrl = e.detail.avatarUrl
    let avatarUrl = 'data:image/jpeg;base64,' +   uni.getFileSystemManager().readFileSync(e.detail.avatarUrl,'base64')

    uni.setStorageSync('avatarUrl', avatarUrl);
    this.userInfo.avatar = avatarUrl
    let data = {
            name: this.userInfo.name,
            avatar: avatarUrl
    }
    getUserInfo(data).then(res => {}).catch(err => {})

},

注: 真机获取的头像临时路径是以wxfile开头的，上传给后台，如果服务器没有开防火墙，就会返回错误“您的请求带有不合法参数，已被网站管理员设置拦截！”。因此需要把头像转成base64的格式上传

2. 昵称填写

将 input组件 type 的值设置为 nickname，当用户在此input进行输入时，键盘上方会展示微信昵称。再调用@input、@blur改变input框的值

nameInput(e) {
    let nickName = e.detail.value
    wx.setStorageSync('nickName', nickName);
    this.userInfo.name = nickName
    let data = {
            name: e.detail.value,
            avatar: this.userInfo.avatar
    }
    getUserInfo(data).then(res => {}).catch(err => {})
},

根据以上操作，就可以简单展示用户的真实头像和昵称了