颖想家

在开发微信小程序时收到官方的提醒：不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息。以后用户信息要使用getUserProfile来获取了。

也就是说，在2021年4月13日后发布的小程序新版本，无法通过wx.getUserInfo与 button open-type="getUserInfo" 获取用户个人信息（头像、昵称、性别与地区）。但其实微信开发工具已经严格执行这个规范了。在开发者工具中使用getUserInfo发现头像是个写死的灰色头像，名称都是微信用户，其他的值都是空的。即便前端获取加密数据，后台解密出来的也是这种空数据。

avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"

city: ""

country: ""

gender: 0

language: ""

nickName: "微信用户"

province: ""

按照官方的这个要求，我这里将微信小程序用户登录修改为这样：

1、首先通过云函数获取用户的openid和unionid，云函数代码如下：

// 云函数入口文件

const cloud = require('wx-server-sdk')

cloud.init({

    env: cloud.DYNAMIC_CURRENT_ENV,

})

// 云函数入口函数

exports.main = async (event, context) => {

  // 这里获取到的 openId、 appId 和 unionId 是可信的，注意 unionId 仅在满足 unionId 获取条件时返回

  let { OPENID, APPID, UNIONID } = cloud.getWXContext()

  return {

    OPENID,

    APPID,

    UNIONID,

  }

}

这里获取到用户的openid和unionid后就不用再像以前通过wx.login获取登录凭证后再换取openid和unionid。

2、用户点击登录页面。此处需要做一个兼容处理，pc微信暂不支持wx.getUserProfile。参考官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html，前端wxml页面代码如下：

    <block wx:elif="{{!hasUserInfo}}">

      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>

      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

      <view wx:else> 请使用1.4.4及以上版本基础库 </view>

    </block>

    <block wx:else>

      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

      <text class="userinfo-nickname">{{userInfo.nickName}}</text>

    </block>

点击button后js代码如下：

getUserProfile(e) {

    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗

    wx.getUserProfile({

      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写

      success: (res) => {

        console.log(res);

        this.login(res.userInfo);

      },

      fail: res => {

        //拒绝授权

        util.showErrorToast('您拒绝了请求');

        return;

      }

    })

  },

  getUserInfo(e) {

    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息

    console.log(e)

    this.login(e.detail.userInfo);

  },

  login: function(userInfo) {

    wx.showLoading({

      title: '玩命加载中',

      mask: true

    });

    let that = this;

    let postData = {

      openid: that.data.openInfo.OPENID,

      unionid: that.data.openInfo.UNIONID,

      nickName: userInfo.nickName,

      city: userInfo.city,

      province: userInfo.province,

      avatarUrl: userInfo.avatarUrl,

      gender: userInfo.gender

    };

    util.request(api.WxLogin, postData).then(function (res) {

      console.log(res);

      let userDetail = {};

      userDetail['id'] = res.id;

      userDetail['nickName'] = userInfo.nickName;

      userDetail['avatarUrl'] = userInfo.avatarUrl;

      console.log(userDetail);

      wx.setStorageSync('userInfo', userDetail);

      that.counts();

      that.setData({

        userInfo: userDetail,

        showModal: false

      })

    });    

    wx.hideLoading();    

  },

wx.getUserProfile 属于被限频接口，小程序一次生命周期最多调用2次。所以，为了不影响用户体验，最好是将用户头像、昵称缓存到本地。 下次使用时，优先从缓存读取数据。官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/performance/api-frequency.html

这样就可以完成小程序用户登录了。

最后再给个官方的小程序内用户帐号登录规范调整和优化建议，里面列举了很多官方不允许的反面示例，涉及到用户登录的还是很有必要认真阅读一些，地址为：https://developers.weixin.qq.com/community/operate/doc/000640bb8441b82900e89f48351401