【微信小程序】微信小程序获取用户信息为“微信用户”解决方案--学习微信小程序之路06

发布时间:2022-01-09沉默小管-技术博客微信小程序获取用户信息为“微信用户”解决方案--学习微信小程序之路06 1249 2

原文地址: https://www.php-china.com//detail/95

# 问题描述
微信小程序使用wx.getUserInfo获取用户信息为微信用户，根据微信小程序文档说明，该函数旧方法应该是被废弃了
[https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html)

# 解决流程
wxml代码
```html
<view class='Popup' hidden='{{iShidden}}'>
   <image src='../../assets/img/logo.png'></image>
   <view class='title'>授权提醒</view>
   <view class='tip'>请授权头像等信息，以便为您提供更好的服务</view>
   <view class='bottom flex'>
      <view class='item' bindtap='close'>随便逛逛</view>
       <button class='item grant theme-icon-color-yellow' wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 去授权 </button>
       <button class='item grant theme-icon-color-yellow' wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 去授权 </button>
   </view>
</view>
```
js代码
```javascript
 data: {
    cloneIner: null,
    loading:false,
    errorSum:0,
    errorNum:3,
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false
  },
  attached() {
    //判断微信是否可以使用wx.getUserProfile
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  methods: {
    getUserProfile(e) {
      wx.showLoading()
      wx.getUserProfile({
        desc: '用于完善会员资料',
        success: (res) => {
          this.getWxUserInfo(res);
        }
      })
    },
    getUserInfo(e) {
      this.setData({
        userInfo: e.detail.userInfo,
        hasUserInfo: true
      })
    },
    getWxUserInfo(res){
      console.log(res);
      let that = this;
      // let code = res.code;
      let nickName = res.userInfo.nickName;
      let avatarUrl = res.userInfo.avatarUrl;
      console.log(avatarUrl);
    }
  },
```