环境
- 微信开发者工具 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()
在小程序里,要想获取并使用用户信息,需要用户授权才行。下面是一个示例小程序:
- 页面显示时,若缓存中没有用户信息,则显示缺省的图标和用户名。若缓存中有用户信息,则显示用户的图标和用户名。
- 点击“获取用户信息”按钮,从微信服务器获取用户信息,然后把图标和用户名替换为微信用户的图标和用户名。此外,把信息缓存到本地。
- 同理,点击“清除用户信息”按钮,则把图标和用户名替换为缺省的图标和用户名,并把本地缓存的信息清空。
在微信开发者工具中,创建一个新项目 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://www.toymoban.com/news/detail-600232.html
我没有具体试验过,有待研究。文章来源地址https://www.toymoban.com/news/detail-600232.html
参考
https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000cc48f96c5989b0086ddc7e56c0a
https://blog.csdn.net/calm_programmer/article/details/124207072
到了这里,关于微信小程序开发之获取用户信息的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!