微信小程序如何获取用户信息资源（记录–微信小程序获取用户信息（附代码、流程图））
导读：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助...
这里给大家分享我在网上总结出来的一些知识 ，希望对大家有所帮助
本篇文章主要总结了微信小程序开发 ，获取用户信息的整个流程步骤 。补充了网上很多碎片化的代码 ，本人梳理了思路写下了这篇文章 。
思路
1 、在js文件中 ，设置userinfo 、hasUserinfo 、canIUseGetUserProfile数据 2 、先判断本地缓存（ wx.getStorageSync() ）是否含有用户的数据 ，如果有就用缓存里的数据 ，没有就进行第三步 3 、在界面添加登录按钮 ，用户点击按钮调用wx.getUserProfile()函数来提示用户授权登录 ，授权成功后 ，把用户头像数据和名称数据保存到缓存区里 ，并且改变全局变量的值流程图
自己大概画了一下大概的流程 ，但希望对您有帮助！ 考虑到一些新手 ，我将完整代码发给大家 ，大家按照代码对应写入对应位置即可！wxml
js
注意：avatarUrl:../../images/ckbg1.png 这行代码意思是当没有获取到用户信息时 ，页面展示头像的路径 ，自己要先准备好一张图片（放在images文件夹下） ，并填好头像路径！
data: {
//用户基本信息(头像 、昵称)
userinfo: {
avatarUrl:../../images/ckbg1.png,
nickName:未授权
},
//是否已经获取用户信息
hasUserInfo: false,
//是否可以调用获取信息得函数
canIUseGetUserProfile: false,
},
//第一次获取用户信息
getUserProfile : function(e){
wx.getUserProfile({
desc: 获取您的微信个人信息,
success:(res)=>{
this.setData({
userinfo:res.userInfo,
hasUserInfo:true
})
wx.setStorageSync(userinfo, res.userInfo)
},
fail:function(e){
wx.showToast({
title: 你选择了取消,
icon: "none",
duration: 1500,
mask: true
})
}
})
},
onLoad: function(n) {
this.setData({
canIUseGetUserProfile : true
})
},
onShow: function() {
//获取用户的本地缓存数据 ，userinfo信息是在用户授权登录时保存的
var n = wx.getStorageSync("userinfo");
//当本地缓存的用户名称不为""或者null时 ，设置userinfo信息
if(n.nickName != && n.nickName != null){
this.setData({
userinfo: n,
hasUserInfo:true,
canIUseGetUserProfile:true
})
// 通过wx.login获取登录凭证（code） ，然后通过code去获取我们用户的openid
wx.login({
success:(res)=>{
console.log(res);
},
})
}
//清空缓存信息 ，测试使用
// wx.removeStorage({
// key: userinfo,
// });
},
在这里有必要讲解几处代码：
1 、当页面加载完毕时（onLoad函数） ，我们将canIUseGetUserProfile数据设置ture ，代表可以使用使用getUserProfile了 ，避免页面没有加载完毕就去获取用户信息！
2 、当页面即将展示时（onShow函数) ，调用wx.getStorageSync获取本地缓存数据 ，来控制按钮的显示与否
wxss
.banner {
border-radius: 10rpx;
border: none;
box-sizing: content-box;
padding: 20rpx 0;
width: 90%;
height: 370rpx;
margin: 20rpx auto;
background:linear-gradient(109.6deg, rgb(204, 228, 247) 11.2%, rgb(237, 246, 250) 100.2%);
/* background-image:image("../../images/cloudbg.jpg"); */
text-align: center;
}
.topContainer {
width: 100%;
height: 260rpx;
background-size: 100%;
border-radius: 9px;
}
.userinfo-nickname {
color:black;
}
.userLogin{
width: 50%;
box-sizing: none;
font-size: medium;
}
.userinfo-avatar {
width: 150rpx;
height: 150rpx;
margin-bottom: 10rpx;
border-radius: 50%;
}
当缓存里没有记录用户信息时 ，显示的页面会出现登录按钮：
点击按钮后 ，弹出授权信息
点击允许后 ，会出现微信头像和微信名称
效果展示：
https://blog.csdn.net/calm_programmer/article/details/124207072
如果对您有所帮助 ，欢迎您点个关注 ，我会定时更新技术文档 ，大家一起讨论学习 ，一起进步 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！