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>

// js
Page({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"})}})
}
})

效果图：

第一次点击允许登录后：

缓存成功：

重新编译后：

同时也可在模拟器中看到您的头像和昵称。

微信小程序授权登录获取用户信息并保存至缓存用于下次登录相关推荐

微信小程序开发之获取用户信息
环境微信开发者工具 Stable 1.06.2303220 云开发控制台 v1.5.47 用户的openid和头像名称信息 openid 是小程序用户的唯一标识.注意, openid 并不是微信用户 ...
微信小程序前端解密获取用户信息
在微信小程序中,通过用户手动可以获取到用户昵称,头像等基本信息,稍微敏感的信息无法获取到,需要通过后端解密才能获取到. 例如获取用户手机: 在网上找到cryptojs包,下载下来复制到utils文件夹 ...
微信小程序 open-type=“getUserInfo“ 获取用户信息失败 @杨章隐
open-type="getUserInfo" 获取用户信息失败open-type="getUserInfo" 获取用户信息"微信用户"op ...
[小程序]微信小程序登陆并获取用户信息
1.小程序js端调用框架登陆API,获取到一个临时code,拿着这个code去调用自己的服务端接口 2.在自己的服务器端,使用app_id app_secrect code可以获取到用户的openid ...
微信小程序如何同时获取用户信息和用户手机号
今天在写登陆页面的时候,由于需要的个人信息和手机号的授权,但是如果在页面上直接放2个按钮,岂不是很呆??? 索性就写了一个mask层,去引导用户授权手机号. 1. 当我点击快捷登录的微信登录时,首先 ...
微信小程序调整的获取用户信息API接口wx.getUserProfile
对于微信小程序更新后的wx.getUserProfile怎么用?小程序怎么获取用户信息 getUserProfile接口文档:https://developers.weixin.qq.com/mini ...
微信小程序getUserInfo无法获取用户信息
前言 2021年4月13日后发布的小程序新版本,无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息 ...
微信小程序中如何获取用户手机号授权登录
随着微信小程序的普及,许多应用程序需要用户登录才能提供更好的服务.而获取用户手机号码是验证用户身份和确保账户安全的重要步骤之一.因此,在本文中,我们将介绍如何在微信小程序中实现手机号授权登录. 步骤一 ...
php网页抓取浏览者手机号码_微信小程序开发之获取用户手机号码(php接口解密)...
后边要做一个微信小程序,并要能获取用户微信绑定的手机号码.而小程序开发文档上边提供的获取手机号码的接口(getPhoneNumber())返回的是密文,需要服务器端进行解密,但是官方提供的开发文档一如 ...

微信小程序授权登录获取用户信息并保存至缓存用于下次登录