1.获取用户信息
wx.getUserProfile(Object object)
获取用户信息。页面产生点击事件(例如button
上bindtap
的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回userInfo
。该接口用于替换wx.getUserInfo
,详见微信小程序官方文档。
wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写success: (res) => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}})
2.将获取到的信息缓存起来:
wx.setStorage(Object object)
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
wx.setStorage({key:"key",data:"value"})
可在调试器中查看是否缓存成功:key和value下是否有值存在
3.获取缓存信息
(1)异步获取wx.getStorage(Object object)
从本地缓存中异步获取指定 key 的内容。缓存相关策略请查看存储。
wx.getStorage({key: 'key',success (res) {console.log(res.data)}})
(2)同步获取Object wx.getStorageInfoSync()
wx.getStorageInfo({success (res) {console.log(res.keys)console.log(res.currentSize)console.log(res.limitSize)}})
try {const res = wx.getStorageInfoSync()console.log(res.keys)console.log(res.currentSize)console.log(res.limitSize)} catch (e) {// Do something when catch error}
以上是要用到的知识点,下面为实际代码:
(实现第一次登陆时需要授权才可以获取到头像和昵称,重新编译后无需授权直接获取到头像和昵称的效果)
<!-- wxml --><button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称</button><image bindtap="bindViewTap" src="{{name.avatarUrl}}" mode="cover"></image><text>{{name.nickName}}</text>
// jsPage({data:{name:'',canIUseGetUserProfile: true,//显示登录按钮(wx:if 是遇 true 显示,hidden 是遇 false 显示。)},onLoad(){wx.getStorage({//异步获取缓存key:"name",//本地缓存中指定的 keysuccess:(res)=>{ console.log('获取缓存成功',res.data)this.setData({name:res.data, //将得到的缓存给key canIUseGetUserProfile: false, }) fail:(err)=>{console.log("获取失败",err);} }})//因为异步操作耗时,后显示这个。与下面的console.log("======")比较 try {//同步操作(按顺序显示),先显示这个。与下面的console.log("======")比较 var count= wx.getStorageSync('count', '')console.log('count',count);} catch (e) { }console.log('======'); },getUserProfile(e){//获取用户信息绑定的单击事件wx.getUserProfile({//获取用户信息desc: '用于完善会员资料',// 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写success:(res)=>{console.log("---",res); this.setData({name:res.userInfo})wx.setStorage({key:'name',//本地缓存中指定的 key(类型:string)data:res.userInfo,//需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象(类型:any)success:(s)=>{console.log('存储缓存成功====',s);this.setData({canIUseGetUserProfile: false //隐藏登录按钮 })},fail:(f)=>{console.log('存储缓存失败====',f);}})wx.setStorage({//第二个缓存key:"count",data:"缓存2"})}})}})
效果图:
第一次点击允许登录后:
缓存成功:
重新编译后:
同时也可在模拟器中看到您的头像和昵称。
如果觉得《微信小程序授权登录获取用户信息并保存至缓存用于下次登录》对你有帮助,请点赞、收藏,并留下你的观点哦!