WeChatミニプログラムのユーザーアバターとニックネームの取得ルール調整後のアバターとニックネームの取得方法について

1. 背景

ミニプログラムユーザーのアバターおよびニックネーム取得ルール調整のお知らせ:ミニプログラムユーザーのアバターおよびニックネーム取得ルール調整のお知らせ | WeChatオープンコミュニティ

 

第二に、ケース

1. ログインボタンをクリックします

ユーザー認証情報を確認するためにログインボタンをクリックすると、ユーザー認証ポップアップウィンドウ（初回）が表示されます。ユーザーが認証に同意するためにクリックすると、wx.login メソッドが呼び出され、認証情報を取得します。ログイン認証情報 (コード) を取得し、そのコードがバックエンドによって書かれたログイン インターフェイスに渡されます。ログインを解析します。このとき、デフォルトのアバター画像とニックネームをバックエンド ログイン インターフェイスに渡すことで、ユーザーのアバターとニックネームを初期化できます。特定のプロジェクトのニーズに応じて。

<view class="page-container">

  <view class="login-btn" bindtap="checkScope">授权用户信息</view>
  <view class="tip">若您没有账号，登录后会自动创建</view>

</view>

// 检查授权信息
checkScope() {
    // 获取授权设置信息
    wx.getSetting({
      success: (res) => {
        console.log(res)

        // 判断用户信息是否有授权
        if (!res.authSetting['scope.userInfo']) {
          // 获取授权
          wx.authorize({
            scope: 'scope.userInfo',
            success: (e) => {
              console.log('authorize: ', e)

              // 调用你们后端写的登录接口
              this.login()
            },
            fail: (err) => {
              console.log('authorize-err: ', err)
            }
          })
        } else {
          console.log('已授权')
          // 调用你们后端写的登录接口
          this.login()
        }
      },
      fail: (err)=> {
        console.log(err)
      }
    })
}

  // 登录
  login() {

    let _this = this;

    // 获取微信登录的code
    wx.login({
      success (e) {
        if (e.code) {

          // 请求后端写的登录逻辑接口
          // ......

        } else {
          wx.showToast({
            title: '登录失败！' + e.errMsg,
            icon: 'none',
            duration: 2000
          })
          console.log('登录失败！' + e.errMsg)
        }
      }
    })
    
  },

 

2. アバターとニックネームをWeChatアカウントのアバターとニックネームとして設定します

ボタンコンポーネントのオープンタイプはchooseAvatarに設定されており、クリック後のbindchooseavatarコールバックからユーザーアバター情報を取得できます。

入力コンポーネントの種類がニックネームに設定されており、クリックするとニックネーム入力キーボードが表示され、ニックネームを直接取得して入力することができます。

その後、取得した WeChat プロフィール写真とニックネームをバックエンド インターフェイスを通じてユーザー情報に保存できます。

<view class="page-container">

  <view class="li">
    <text class="left">头像</text>
    <view class="right">
      <button
        class="box"
        open-type="chooseAvatar"
        bindchooseavatar="onChooseAvatar">
        <image class="avatar" src="{
   
   {avatarUrl}}"/>
      </button>
      
    </view>
  </view>

  <view class="li">
    <text class="left">昵称</text>
    <view class="right">
      <input type="nickname" value="{
   
   {userName}}" class="weui-input" placeholder="请输入昵称" bindinput="bindinput"/>
    </view>
  </view>

  <view class="submit-btn" bindtap="updateUserInfo">确定</view>

</view>

  // 获取微信昵称
  bindinput(e: any) {
    console.log('bindinput', e)
    this.setUserName(e.detail.value)
  },

  // 获取微信头像
  onChooseAvatar(e:any) {
    console.log(e)
    const { avatarUrl } = e.detail;

    // 把获取到的微信头像的图像文件上传到后端
    this.uploadImg(avatarUrl)
  },