wechat-miniprogram

wechat miniprogram 101: getUserProfile problem

I'm trying with wechat miniprogram for the first time and I'm trying to port getUserProfile from https://github.com/Tencent/westore/blob/master/packages/westore-example/models/user.js to https://github.com/discountry/weapp-weather/tree/backup

It works but its getUserProfile functionality is not fully working for me:

    wx.getUserProfile({
      desc: '展示用户信息',
      success: (res) => {
        console.log('u.js getUserProfile success', this, res)
        this.userInfo = res.userInfo
        this.options.onUserInfoLoaded && this.options.onUserInfoLoaded()
      }
    })

Instead of getting the actual user info like this:

enter image description here

It only get a fake user info like this:

enter image description here

both the icon and the name are (retrieved) from API though.

enter image description here

I've been looking everywhere but cannot make out where the problem is. The wxml file content is a direct copy of working code:

  <view class="userinfo">
    <block wx:if="{{!userInfo.nickName}}">
      <button bindtap="getUserProfile">获取头像昵称</button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>

Moreover, the following works, but I have no clue how it works, ie, the data and control flow:

  <text class="title">hello {{name}}</text>
  <button open-type="getUserInfo" bind:getuserinfo="buttonHandler">
    授权获取个人信息
  </button>

  buttonHandler(event) {
    if (!event.detail.userInfo) return;
    this.setData({
      name: event.detail.userInfo.nickName
    });

So, Please

Solution

  • The way about getting user's info changed 3 times in serveal years.Many developers complain about it.It trouble me too much at least modification. User's avatar and nickname were used for illegal.So offical rule change frequently.

    WeChat official returned the rights of using users' nicknames and avatars back to the users themselves.

    It's the least method of getting user's avatar and nickname below:

    const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})
    <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

    When user click the avatar-upload-button with ' open-type="chooseAvatar" ',a notice model with user's avatar option will show for choosing.If user don't want to use avatar of himself.He can upload other image.

    As the same,while the input with ' type="nickname" ' get focus, wechat will notice user to input his nickname or input other content as special nickname for your application.

    Notice:The avatar image which user uploaded is local file inseated net file.

    Chinese documents only:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html