一、調(diào)整

小程序用戶頭像昵稱獲取規(guī)則調(diào)整公告

以前通過wx.getUserProfile獲取用戶信息，用戶點(diǎn)擊同意以后，便可以直接獲取相關(guān)信息，但是官方最近做出了調(diào)整，直接將頭像和昵稱使用默認(rèn)值填充了，所以我們無法直接獲取用戶的信息了，需要新增一個頁面用于用戶自定義頭像和昵稱。

二、應(yīng)對措施

微信新增了頭像填充能力：頭像昵稱填寫

2.1 更新頭像

就是設(shè)置button的open-type為chooseAvatar，當(dāng)用戶點(diǎn)擊時，就會觸發(fā)“修改頭像”事件。

button按鈕

    <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
      修改頭像
    </button>

回調(diào)函數(shù)onChooseAvatar：

  //用戶選中自定義頭像的回調(diào)
  onChooseAvatar(e) {
    const {
      avatarUrl
    } = e.detail
    // 獲取到的avatarUrl（臨時地址）：http://tmp/ZENIKXqaUC20a19f3c2fd621b82c7662b952e000d532.jpeg
    console.log(avatarUrl);
    //更新當(dāng)前頁面信息
    this.setData({
      ['userInfo.avatarUrl']: avatarUrl,
    })
  },

獲取到的頭像地址是一個臨時地址，并不是長期有效的，我們需要將這個地址對應(yīng)的文件存到自己的服務(wù)器上或者云存儲中。
例如使用云開發(fā)的存儲能力：微信小程序云開發(fā)-存儲

2.2 更新昵稱

<input type="nickname" class="nick-name-input" placeholder="請輸入昵稱" 	bindblur="changeNickName"/>

  // 用戶修改昵稱
  changeNickName(e){
    let name = e.detail.value;
    if(name.length === 0) return;
    this.setData({
      ['userInfo.nickName']: name
    })
  }

這里沒有使用bindtap而是直接使用bindblur是因為如果直接使用提示的個人微信昵稱填充時，不會觸發(fā)bindtap事件。

三、完整代碼

主要是邏輯代碼，樣式還需要根據(jù)自己的業(yè)務(wù)進(jìn)行調(diào)整。
index.wxml

<!--index.wxml-->
<view class="container">
  <view class="userinfo" wx:if="{{hasUserInfo}}">
    <block>
      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
    <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
      修改頭像
    </button>
    <input type="nickname" class="nick-name-input" placeholder="請輸入昵稱" 	bindblur="changeNickName"/>
  </view>
  <button bindtap="getUserProfile" wx:else>獲取用戶信息</button>
</view>

index.js

// index.js
// 獲取應(yīng)用實例
const app = getApp()

Page({
  data: {
    userInfo: {},
    hasUserInfo: false
  },
  onLoad() {

  },
  getUserProfile(e) {
    // 推薦使用wx.getUserProfile獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認(rèn)，開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復(fù)彈窗
    wx.getUserProfile({
      desc: '展示用戶信息', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹(jǐn)慎填寫
      success: (res) => {
        console.log(res.userInfo)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  //用戶選中自定義頭像的回調(diào)
  onChooseAvatar(e) {
    const {
      avatarUrl
    } = e.detail
    // 獲取到的avatarUrl（臨時地址）：http://tmp/ZENIKXqaUC20a19f3c2fd621b82c7662b952e000d532.jpeg
    console.log(avatarUrl);

    this.setData({
      ['userInfo.avatarUrl']: avatarUrl,
    })
  },
  // 用戶修改昵稱
  changeNickName(e){
    let name = e.detail.value;
    if(name.length === 0) return;
    this.setData({
      ['userInfo.nickName']: e.detail.value
    })
  }
})

index.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.avatar-wrapper{
  margin: 10px 0;
}

.nick-name-input{
  border: 1px solid #f1f1f1;
  padding:5px;
}

修改后：

注意：修改后的userInfo應(yīng)該同步更新到數(shù)據(jù)庫中，因為當(dāng)前僅僅只是修改該了data中的數(shù)據(jù)。文章來源地址http://www.zghlxwxcb.cn/news/detail-412669.html

到了這里，關(guān)于微信小程序最新用戶頭像昵稱獲取規(guī)則調(diào)整應(yīng)對措施（2022）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！