微信小程序如何获取头像、昵称和手机号(含源代码下载)

1、wx.getUserProfile获取不到头像和昵称

最近一些开发员发现，在真机环境，小程序里使用wx.getUserProfile获取不到头像和昵称了。这是因为微信调整了获取用户头像昵称的规则。

微信建议使用“头像昵称填写能力”来获取头像和昵称。

2、关键代码

2.1、WXML

    <view>
        <view>
            <text class="title" style="float:left;margin-top: 10px;">头像</text>
            <image wx:if="{{bean['avatarUrlType'] == 1}}" class="avatarUrl"  src="{{bean['avatarUrl']}}" ></image>

            <image wx:if="{{bean['avatarUrlType'] != 1}}" class="avatarUrl"  src="{{baseUrl + bean['avatarUrl']}}" ></image>

            <van-button round type="primary" size="small" 
                    style="border:none;"
                    open-type="chooseAvatar"
                    bind:chooseavatar="onChooseAvatar"
                    style="border:none;float:right;">获取微信头像                
            </van-button>            
        </view>

        <view >
            <text class="title" decode="true">昵称</text>

            <input type="nickname" value="{{bean.nickName}}" bindinput="handleChangeInput"
                   data-field="nickName"
                   maxlength="30"
                   placeholder="请输入昵称"></input>
                   
        </view>

        <view >
            <text class="title" decode="true">手机号</text>
            <input class="input" type="number" value="{{bean['phone']}}" bindinput="onInput"
                   data-field="phone"
                   maxlength="11"
                   placeholder="请输入手机号"></input>
            </van-button>
        </view>
        
        <view >
          <van-button type="info"  class='container-row container-btn-bottom mt-15 btn-opentype  btn-share'
                  style="border:none;margin-top:30px;width:40%"
                  catchtap="userInfoUpdateSelect" block>保存
          </van-button>        
        </view>
    </view>

2.2、JS

var cameraUtil = require("../../utils/camera");
var app = getApp();
Page({
    data: {
        baseUrl: uriUtil.BASE_URL,
        bean: null,
    },

    onShow: function () {
        //let that = this;
        //获取我的个人信息
        this.getMyDataList();

    },
    getMyDataList: function () {
        //从后台获取我的个人信息
    },



    bindgetphonenumber: function (e) {
      //获取微信的手机号
      let that = this;
      let encryptedData = e.detail['encryptedData'];
      let iv = e.detail['iv'];
      if (e.detail['errMsg'] !== 'getPhoneNumber:ok') {
          return;
      }

      wx.login({
          success(res) {
              if (res.code) {
                  httpUtil.postReqAndShowLoading(uriUtil.decriptPhone, {
                      encryptedData: encryptedData,
                      iv: iv,
                      loginCode: res.code
                  }, function (flag, res) {
                      if (flag) {
                          if (res['data']['purePhoneNumber']) {
                            console.info("获取到手机号：" + res['data']['purePhoneNumber']);
                            that.setData({
                              "bean.phone": res['data']['purePhoneNumber']
                            });
  
                          }else {
                            console.info("获取手机号失败，请重试");
                          }

                      } else {
                          publicUtil.showTipError(res.msg)
                      }
                  });
              }
          }
      });
    },

    handleChangeInput : function (e) {
      
      let that = this;
      let field = e.currentTarget.dataset.field;
      let value = e.detail.value;
      let bean = that.data.bean;
      bean[field] = value.trim();
      that.setData({
          bean: bean
      });

    },

    /**
     * 微信选择头像
     */
    onChooseAvatar(e) {
      let that = this;

      const { avatarUrl } = e.detail;
      console.info("头像地址:" + avatarUrl);

      that.setData({
        "bean.avatarUrl": avatarUrl,
        "bean.avatarUrlType": 1
      });

      // wx.hideLoading();
      // wx.hideToast();

      let localImageArr = [];
      localImageArr.push(avatarUrl);
      cameraUtil.uploadImage(localImageArr, 'avatarUrl', function (imgArr) {
        if (imgArr && imgArr.length > 0) {
            console.info("上传后的图片地址：" + imgArr[0]['path']);
            that.setData({
              "bean.avatarUrl":   imgArr[0]['path'],
              "bean.avatarUrlType": 2,          //头像来自本机
            });
        }
      } );


    },
});

3、截图

• 主页
  

• 点击获取微信头像，显示出头像供选择，也可以从相册选择，或者拍照
  

• 点击昵称输入栏，在键盘框上面可以看到 微信获取的昵称，点击即可填入到输入框。
  

• 点击“获取手机号”，可以弹出微信读取到的手机号
  

4、注意事项

• 微信开发工具的软件环境和真机环境是不一样的， 这种功能都是在真机环境下做验证为准。
• 头像填写能力，微信给的是一个以 wxfile://tmp 开头的临时文件， 自己需要上传图片到后端服务器做保存处理。

5、代码下载

点击下载

6、参考

小程序用户头像昵称获取规则调整公告

头像昵称填写能力