环境
  • 微信开发者工具 Stable 1.06.2303220
  • 云开发控制台 v1.5.47
用户的openid和头像名称信息 
openidopenid

头像和名称并不能唯一代表用户。头像名称等信息是可以公开的，而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()

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

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

修改“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

基本流程为：

wx.login()wx.request()
wx.login()openid
https://api.weixin.qq.com/sns/jscode2session?appid=&secret=&js_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：云函数

getMyOpenidindex.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：开发者服务器

https://api.weixin.qq.com/sns/jscode2session?appid=&secret=&js_code=&grant_type=authorization_code
https://mp.weixin.qq.com


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

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

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