微信小程序：头像昵称填写

小程序又修改了头像和昵称的获取方式，一个破玩意儿改来改去的。
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html

自 2022 年 10 月 25 日 24 时后：
小程序 wx.getUserProfile 接口将被收回
插件通过 wx.getUserInfo 接口获取用户昵称头像将被收回

如业务需获取用户头像昵称，可以使用头像昵称填写能力（基础库 2.21.2 版本开始支持）
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html

1.先放效果图

下图是应用实例的截图。

小程序古了个诗界面截图.JPG

2.page.wxml代码

以弹出窗口的效果让用户填写头像和昵称。
代码中：mask区域是遮罩层，用于屏蔽主页面内容，layoutWrap区域是弹出窗口内容，让用户填写。

<!--mask layout-->
<view class="mask bg-black" wx:if="{{popupInputNicknameBoxFlg || popupInputTeamBoxFlg}}">
</view>

<!--Input Nickname layout-->
<view class="layoutWrap" wx:if="{{popupInputNicknameBoxFlg}}">
  <view class="layout light bg-mauve">
    <view class="cuIcon-close hiddenPopup" bindtap="hiddenInputNicknameBox"></view>
    <view class="title">头像昵称填写</view>
    <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
      <image class="avatar" src="{{user_data.avatarUrl?user_data.avatarUrl:defaultAvatarUrl}}" mode="aspectFill"></image>
    </button> 
    <form bindsubmit="onSaveAvatarNickname">
      <input name="nickname" maxlength="20" value="{{user_data.nickname}}" placeholder="请输入昵称"/>
      <button form-type="submit" class="saveBtn bg-mauve">保存</button>
    </form>
  </view>
</view>

3.page.wxss

/* mask layout */
.mask {
  position: absolute;
  top: 0;

  width: 100%;
  height: 100%;
  opacity:0.8;

  z-index: 2;
}

/* layout */
.layoutWrap {
  position: absolute;
  top: 20%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  

  width: 100%;  
  font-size: small;
  z-index: 3;
}
.layout {
  position: relative;
  width: 600rpx;
  height: 700rpx;
  border-radius: 15rpx;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}
.layout .title {
  font-size: larger;
  margin-bottom: 25rpx;
}
.layout .avatar {
  width: 150rpx;
  height: 150rpx;
  border: 1rpx solid #ffffff;
  border-radius: 50%;
}
.layout input {
  margin-top: 25rpx;
  margin-bottom: 50rpx;
  width: 300rpx;
  border: 1rpx solid #ffffff;
  text-align: center;
}
.layout .saveBtn {
  width: 300rpx;
  padding: 15rpx 0;
  text-align: center;
  border-radius: 5rpx;
  margin-top: 25rpx;
}
.hiddenPopup {
  position: absolute;
  right: 15rpx;
  top: 15rpx;
  
  font-size: xx-larger;
}

4.page.js

用户使用场景：

1. 用户选择头像后，后台通过onChooseAvatar将其保存到临时路径。
2. 用户输入昵称。
3. 用户点击保存按钮

后台处理逻辑：

1. 校验是否选择头像（否，则提示；是，继续处理）
2. 校验是否填写昵称（否，则提示；是，继续处理）
3. 上传头像（将其从本地路径上传到云存储）
4. 保存用户昵称和头像地址数据到数据库

  // 当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。
  onChooseAvatar: myUtils.throttleFunc(function(e) {  
    const { avatarUrl } = e.detail 
    this.setData({
      ['user_data.avatarUrl']: avatarUrl,
    })
  }, 3000), // 节流，xx毫秒内重复点击无效

  // 点击保存按钮，先上传头像到存储，再保存数据到数据库
  onSaveAvatarNickname: myUtils.throttleFunc(function(e) {
    // 没有openid，则不继续处理
    if(!this.data.user_data.openid) {return}
    // 判断是否选择了头像
    let avatarUrl = this.data.user_data.avatarUrl
    if(!avatarUrl) {      
      console.log('please choose avatar...')
      wx.showToast({
        icon: 'none',
        title: '请选择头像',
      })
      return
    }

    // 判断是否输入了昵称
    let nickname = e.detail.value.nickname.trim()
    if(!nickname) {      
      console.log('please input nickname...')
      wx.showToast({
        icon: 'none',
        title: '请输入昵称',
      })
      return
    }

    // 提示
    wx.showLoading({
      mask: true,
      title: '保存...',
    })

    // 上传头像
    this.uploadAvatarUrl(avatarUrl, nickname)
  }, 3000), // 节流，xx毫秒内重复点击无效
  
  // 上传头像
  uploadAvatarUrl(avatarUrl, nickname) {
    var that = this
    // 每个用户的头像唯一，采用openid命名
    let cloudPath = 'avatar/' + this.data.user_data.openid + '.jpg'
    console.log('avatarUrl is %s', avatarUrl )
    wx.cloud.uploadFile({
      cloudPath: cloudPath,   // 保存到存储中的路径及文件名
      filePath: avatarUrl,    // 本地待上传的文件路径
      success: res => {
        let fileID = res.fileID
        console.log("upload file success, file id is ", fileID)  
        // 再将fileID和nickname存储到数据库
        that.saveNickname(fileID, nickname)
      },
      fail: err => {
        console.log("upload file failure.", err)
      },
      complete: res => {
        console.log("upload option complete.", res)
      }
    })
  },

  // 保存头像和昵称
  saveNickname(fileID, nickname) {
    var that = this
    // 调用云函数
    wx.cloud.callFunction({
      // 要调用的云函数名称
      name: 'saveRecord',
      // 传递给云函数的参数
      data: {
        action: 'saveNickname',
        avatarUrl: fileID,
        nickname: nickname,
      },
      success: res => {
        console.log('save nickname success', res) 
        that.setData({
          ['user_data.avatarUrl']: fileID,
          ['user_data.nickname']: nickname
        })
      },
      fail: err => {
        console.error('save nickname fail', err)   
      },
      complete: () => {
        console.log('save nickname complete')
        // 关闭提示
        wx.hideLoading({
          success: (res) => {                
            that.setData({
              popupInputNicknameBoxFlg: false
            })
          },
        })
      }
    })
  },