环境

• 微信开发者工具 Stable 1.06.2303220
• 云开发控制台 v1.5.47

用户的openid和头像名称信息

openid 是小程序用户的唯一标识。注意， openid 并不是微信用户的唯一标识，它是和小程序绑定的。也就是说，同一个微信用户，他在小程序A中的openid和小程序B中的openid是不同的。

头像和名称并不能唯一代表用户。头像名称等信息是可以公开的，而openid则相对私密，需要较高的安全性。

获取用户头像名称

显示用户头像名称

用户的头像和名称是公开的，可以直接在小程序中显示。

<open-data style="align-self: center; width: 150rpx; height: 150rpx;" type="userAvatarUrl"></open-data>
<open-data style="text-align: center;" type="userNickName"></open-data>
<open-data style="text-align: center;" type="userGender" lang="zh_CN">aaa</open-data>
<open-data style="text-align: center;" type="userCity" lang="zh_CN"></open-data>
<open-data style="text-align: center;" type="userProvince" lang="zh_CN"></open-data>
<open-data style="text-align: center;" type="userCountry" lang="zh_CN"></open-data>

不过，通过该方法，小程序只是能够显示用户信息，并不能使用该信息。

wx.getUserProfile()

注：该API只在较低版本（2.27.0及以下）的基础库中可用。参见我另一篇文档 https://blog.csdn.net/duke_ding2/article/details/131268508 。

在小程序里，要想获取并使用用户信息，需要用户授权才行。下面是一个示例小程序：

• 页面显示时，若缓存中没有用户信息，则显示缺省的图标和用户名。若缓存中有用户信息，则显示用户的图标和用户名。
• 点击“获取用户信息”按钮，从微信服务器获取用户信息，然后把图标和用户名替换为微信用户的图标和用户名。此外，把信息缓存到本地。
• 同理，点击“清除用户信息”按钮，则把图标和用户名替换为缺省的图标和用户名，并把本地缓存的信息清空。

在微信开发者工具中，创建一个新项目 miniprogram-11 ，输入AppID，并选择“微信云开发”。

找一张图片（本例中为 defaultUser.jpg ）作为缺省的用户头像图标，把该图片复制到 images 目录下。

修改“miniprogram -> pages -> index -> index.wxml”文件内容如下：

<banner style="margin: 100rpx; text-align:center">
  <view><image mode="aspectFill" src="{{userinfo.avatarUrl}}" style="width: 150rpx; height: 150rpx;"></image></view>

  <text>\n{{userinfo.nickName}}\n</text>
</banner>

<button wx:if="{{!hasUserInfo}}" style="width: 300rpx" type="primary" bindtap="getUserProfile">获取用户信息</button>

<button wx:if="{{hasUserInfo}}" style="width: 300rpx" type="primary" bindtap="clearUserProfile">移除用户信息</button>

修改“miniprogram -> pages -> index -> index.js”文件内容如下：

......
  data: {
    userinfo: {
      avatarUrl: '../../images/defaultUser.jpg',
      nickName: '未授权'
    },
    
    hasUserInfo: false,
  },

  getUserProfile: function(e){
    wx.getUserProfile({
      desc: '获取您的微信个人信息',
      success:(res)=>{
          this.setData({
            userinfo: res.userInfo,
            hasUserInfo: true
          })
          wx.setStorageSync('userinfo', res.userInfo)
          wx.showToast({
            title: '已获取信息',
          })
      },
      fail:function(e){
          wx.showToast({
            title: '已取消',
            icon: "none",
            duration: 1500,
            mask: true
          })
      }
    })
  },

  clearUserProfile() {
    wx.removeStorage({
        key: 'userinfo',
    })
    
    this.setData({
      userinfo: {
        avatarUrl:'../../images/defaultUser.jpg',
        nickName:'未授权',
      },
      hasUserInfo: false
    })
    
    wx.showToast({
      title: '已移除信息',
    })
  },

  onShow: function () {
    var n = wx.getStorageSync("userinfo");
    
    if(n.nickName != null && n.nickName != ''){
      console.log(n)

      this.setData({
          userinfo: n,
          hasUserInfo: true,
      })
    }
  },
......

测试效果如下：

点击“获取用户信息”按钮，如下：

如果选择“拒绝”，则提示“已取消”：

如果选择“允许”，则显示用户的图标和用户名，并提示“已获取信息”：

此时，如果点击“移除用户信息”按钮，则又恢复为缺省状态：

此外，缓存用户信息后，下次再打开页面，就会直接显示用户信息：

可以手工清除缓存信息：

获取openid

官方文档（ https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000cc48f96c5989b0086ddc7e56c0a ）给出的微信登录流程如下：

官方文档也解释了为何不能通过 wx.login直接拿到微信用户的ID编号，主要是出于安全的考虑。

基本流程为：

• 在 wx.login() 的success回调中拿到微信登录凭证code（code类似于一个临时身份证）。
• 通过 wx.request() 把code传到开发者服务器（若尚未绑定业务ID，则也传入业务用户的ID和密码来验证；若已绑定业务ID，则用户无需输入业务ID和密码）。
• 开发者服务器通过code和其它信息（AppId和AppSecret），访问微信服务器，获取微信用户ID。
• 开发者服务器绑定微信用户ID和自己的业务用户ID。

有了这个绑定信息，小程序在下次需要用户登录的时候就可以不需要输入账号密码，因为通过 wx.login() 获取到code之后，可以拿到用户的微信身份 openid ，通过绑定信息就可以查出业务侧的用户身份ID，这样静默授权的登录方式显得非常便捷。

上图中的第3步：“通过code和其他信息换取用户ID”，官方文档里提到，微信服务器提供的接口地址是： https://api.weixin.qq.com/sns/jscode2session?appid=<AppId>&secret=<AppSecret>&js_code=<code>&grant_type=authorization_code

在实现上，有几种考虑：

• 在小程序里直接 wx.request 请求
• 在云函数里请求
• 在开发者服务器里请求

方法1：小程序直接请求

在小程序里直接发上述请求，会报错： https://api.weixin.qq.com 不在以下 request 合法域名列表中，请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

官方文档里提到：

出于安全考虑，api.weixin.qq.com 不能被配置为服务器域名，相关API也不能在小程序内调用。 开发者应将 AppSecret保存到后台服务器中，通过服务器使用 getAccessToken 接口获取 access_token，并调用相关 API；

网上有人说可以配置微信开发者工具，不检验合法域名，我没仔细研究。

方法2：云函数

创建云函数 getMyOpenid ，默认生成的 index.js 文件内容如下：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

可见，默认返回值里已经包含了 openid 。

我们来测试一下。

修改 index.wxml ，添加以下内容：

<button style="width: 300rpx" type="primary" bindtap="getMyOpenid">获取openid</button>

<view style="text-align: center;">{{myOpenid}}</view>

修改页面的 index.js ，添加以下内容：

......
  data: {
    userinfo: {
      avatarUrl:'../../images/defaultUser.jpg',
      nickName:'未授权'
    },
    
    hasUserInfo: false,

    myOpenid: ''
  },

  getMyOpenid: function() {
    wx.cloud.callFunction({
      name: 'getMyOpenid'
    })
    .then(res => {
      console.log(res)

      this.setData({
        myOpenid: res.result.openid
      })
    })
  },
......

测试效果如下：

方法3：开发者服务器

具体方法就是官方文档里提到的，使用code和其它信息（AppId和AppSecret），访问微信服务器的接口地址 https://api.weixin.qq.com/sns/jscode2session?appid=<AppId>&secret=<AppSecret>&js_code=<code>&grant_type=authorization_code ，获取openid。

注：AppId和AppSecret，可以在 https://mp.weixin.qq.com 获取：

注意：AppID是公开的，AppSecret是私密的。

我没有具体试验过，有待研究。

参考

• https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000cc48f96c5989b0086ddc7e56c0a
• https://blog.csdn.net/calm_programmer/article/details/124207072