微信小程序开发之获取用户信息的两种方法
时间：2022-06-02 10:03:51|栏目：JavaScript代码|点击： 次
今天介绍两种微信小程序获取用户信息的方法
第一中直接授权获取（在同一页面之中）：
首先在微信程序一个页面的WXML文件写入获取用户信息的按钮
<!-- bindTap用于绑定事件 -->
<button type="default" bindtap="getUserInfor"> 登录</button>
<!-- 展示获取到的用户信息 -->
<image src="{{userinfor.avatarUrl}}" />
<view> {{userinfor.nickName}}</view>
然后是在js页面写具体点击事件的逻辑结构
data: {
userinfor:{},//用户存放获取到的用户信息
},
getUserInfor(e){
wx.getUserProfile({
desc: '用来完善用户个人信息',//展示的消息
success:(res)=>{
console.log(res.userInfo)//将用户信息打印至控制台
this.setData({ userinfor:res.userInfo})//将信息保存到定义的容器里
}
})
}
第二种方式可以实现不同页面获取用户信息：
第二中的主要思想就是将用户信息先获取到，然后将其存放在缓存中，然后再跳转到其他页面对缓存中的数据进行获取
首先我们要从A页面进入到B页面
A页面WXML代码
<button bindtap="goto" > 进入登录页面</button>
<!-- 展示用户信息 -->
<image src="{{userinfor.avatarUrl}}" />
<view> {{userinfor.nickName}}</view>
A页面JS页面代码
//
data: {
userinfor:{},
},
goto(){
wx.navigateTo({
url: '../text/text',
})
}
B页面WXML页面代码
<button type="default" bindtap="getUserInfor"> 登录</button>
B页面JS页面代码
data: {
},
getUserInfor(e){
wx.getUserProfile({
desc: '用于获取用户信息',
success:(res)=>{
const userinfor = res.userInfo
//将用户数据写入缓存
wx.setStorageSync('UserInfo', userinfor);
//跳回前一个页面
wx.navigateBack({
delta:1
})
}
})
}
当我们点击B页面登录按钮并且允许获取用户信息时，我们可以发现控制台缓存页面会跳出一个KEY值为UserInfo的键值，这就说明我们已经把用户的信息存放入缓存之中，接下来就是如何将缓存中的信息取出来，接下来我们就来到A页面编写获取缓存中数据的方法，
A页面JS页面中添加onShow方法，或者在原有的onShow方法里添加下列方法中的代码
data: {
userinfor:{},
},
onShow(){
const userinfor = wx.getStorageSync('UserInfo')
this.setData({ userinfor })
}
这时就成功将用户数据写入缓存在从其他页面读取数据
总结
其实两种获取方式都是一样的，都是用wx.getUserProfile方法进行获取，但是只是采取了不同的数据处理方式，让开发更加的便捷
栏 目：JavaScript代码
下一篇：JS使用tofixed与round处理数据四舍五入的区别
本文标题：微信小程序开发之获取用户信息的两种方法
本文地址：http://www.codeinn.net/misctech/203478.html
