微信小程序填寫(xiě)用戶(hù)頭像和昵稱(chēng)實(shí)現(xiàn)方法淺析

更新時(shí)間：2023年02月09日 11:39:03 作者：李長(zhǎng)庚

這篇文章主要介紹了微信小程序填寫(xiě)用戶(hù)頭像和昵稱(chēng)實(shí)現(xiàn)方法，我們使用小程序往往能碰到提示允許獲取用戶(hù)頭像昵稱(chēng)，這種功能怎么實(shí)現(xiàn)呢？本篇文章帶你探索

開(kāi)放能力調(diào)整公告

總體來(lái)說(shuō)就是通過(guò)按鈕來(lái)授權(quán)獲取用戶(hù)基礎(chǔ)信息的能力都沒(méi)啦（wx.getUserProfile，wx.getUserInfo都不行了），都要使用新版本的【頭像昵稱(chēng)填寫(xiě)能力】啦。

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

獲取頭像

獲取頭像代碼

wxxl部分

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button>

js部分

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 	//獲取圖片臨時(shí)路徑
    this.setData({
      avatarUrl,
    })
  }
})

適配頭像時(shí)需要注意的地方

此時(shí)獲取到的頭像路徑為本地路徑，雖然可以在頁(yè)面上顯示，但是并不能直接入庫(kù)使用，瀏覽器上是訪問(wèn)不到的。需要上傳到我們自己的服務(wù)器，后面每次使用都從我們自己的服務(wù)器上取。其實(shí)說(shuō)白了就是之前頭像文件我們都是從微信服務(wù)器獲取的，現(xiàn)在需要去我們自己的服務(wù)器獲取了。

 wx.uploadFile({
   url: '我們自己的服務(wù)器地址', //僅為示例，非真實(shí)的接口地址
   filePath: '圖片臨時(shí)路徑',
   name: 'uploadFile',	//自定義name
   success(res) {
     console.log('res', res);	//經(jīng)自己服務(wù)器存儲(chǔ)后，將地址返回到客戶(hù)端。
   },
   fail(err) {
     console.log('err', err);
   },
   complete(cp) {
     console.log(cp);
   }
 })

獲取昵稱(chēng)

獲取頭像代碼，將input中的“type”屬性設(shè)置為‘nickname’，同時(shí)對(duì)"name"屬性設(shè)定值，點(diǎn)擊提交按鈕后根據(jù)設(shè)置的name值獲取對(duì)應(yīng)的value。

 <form bindsubmit="getUserName"> <!--定義提交事件-->
   <view class="cu-form-group">
        <view class="title">昵稱(chēng)：</view>
        <input placeholder="請(qǐng)輸入昵稱(chēng)" type="nickname" name="nickname" maxlength="32"></input>
 	</view>
 	<view class="up-bt">
        <button form-type="submit" role="button" aria-disabled="false" class="save-bt cu-btn block bg-blue margin-tb-sm lg">更新資料</button>
      </view>
 </form>

js部分

  getUserName(e) {
    console.log(e.detail.value.nickname);  //用戶(hù)輸入或者選擇的昵稱(chēng)
  },

獲取昵稱(chēng)需要注意的地方

用戶(hù)輸入或者選擇昵稱(chēng)時(shí)，會(huì)異步對(duì)用戶(hù)輸入的內(nèi)容進(jìn)行安全監(jiān)測(cè)，若未通過(guò)安全監(jiān)測(cè)，微信將清空用戶(hù)輸入的內(nèi)容，建議開(kāi)發(fā)者通過(guò) form 中form-type 為submit 的button 組件收集用戶(hù)輸入的內(nèi)容。

到此這篇關(guān)于微信小程序填寫(xiě)用戶(hù)頭像和昵稱(chēng)實(shí)現(xiàn)方法淺析的文章就介紹到這了,更多相關(guān)小程序填寫(xiě)用戶(hù)頭像和昵稱(chēng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: