本文详细介绍了如何在微信小程序中获取并存储用户头像和昵称的步骤，包括wx.checkSession的使用、用户授权、openid的获取以及在不同页面间的数据同步。代码示例覆盖了从app.js到mine和login页面的配置和交互过程。
大家好，下面是我身为小白分享给小白哈，
不懂就问相互学习共同进步！
亲测自用原生代码，感谢大神指点赐教鼓励勿喷；
只需9个一键复制粘贴步骤一气呵成；
先来本文最终主要实现效果：
获取微信小程序用户头像昵称的填写能力和方法原生写法
一：先捋一捋思路逻辑：
1：获取之前有个环节是wx.checkSession先自动判断缓存里
有没用户之前的信息session_key有没过期，
没有或者过期就执行下一步；
2：用获取用户返回的code,
然后配合服务器后端wx.request获取返回用户openid,（后端写法可以关注找我要）；
3：返回有了openid即用户唯一标识可以定义全局和存缓存后续更新用户相关信息用
4：编辑个人中心页面 和跳转用户信息获取授权页
二：开码：
1.先在小程序文件包目录中新建image文件夹，
然后将下面的图片命名为avatarUrl作为默认头像放进/image文件夹中初始化备用，
图片链接：https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0
2.在app.js页中一键复制下面代码粘贴：
App({
data: {
},
userInfo:{
nickName:'',
avatarUrl:''
},
globalData:{
openid:''
},
onLaunch: function () {
let userInfo = wx.getStorageSync('userInfo');
if (!userInfo){
wx.setStorage({
key:'userInfo',
data:{avatarUrl:'/image/avatarUrl.png'
}
})
}
wx.checkSession({
fail () {
wx.login({
success: (res) => {
const {code} = res.code
wx.setStorageSync('code', res.code)
console.log("获取并缓存code:", res.code)
if (res) {
wx.request({
url: '你的服务器API地址',
method: 'POST',
data: { code: res.code },
header:{'content-Type': 'application/x-www-form-urlencoded;charset=utf-8',},
success:res=> {
console.log("后端:openid:", res.data)
let openid = res.data
const app = getApp()
getApp().globalData.openid = openid
console.log('缓存openid:',app.globalData.openid)
wx.setStorageSync('openid', res.data)
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
console.log("session_key 已经失效，重新登陆获取流程")
}
})
}
})
3.在page页面里新建文件夹mine再对着mine文件夹新建page，定义名字就写mine后会自动生成四个文件
有了mine.js页面并在里边一键复制粘贴进去下面代码：
const app = getApp()
Page({
data: {
userInfo:{
nickName:'',
avatarUrl:''
}
},
onShow() {
this.setData({
nickName:wx.getStorageSync('nickName'),
userInfo:wx.getStorageSync('userInfo'),
mobile:wx.getStorageSync('mobile')
})
},
})
4：在mine.wxml页面一键复制粘贴进去下面代码：
<button bind:chooseavatar="onChooseAvatar">
<navigator url="/pages/login/login" open-type="navigate">
<image class="avatar" src="{{userInfo.avatarUrl}}"> </image>
</navigator>
</button>
<view wx:if="{{!nickName}}" class="login-text">点击授权登录</view>
<block wx:else>
<view class="login-text">{{nickName}}</view>
</block>
5：在mine.wxss页面一键复制粘贴进去下面代码：
.avatar {
width: 160rpx;
height: 160rpx;
border: 1rpx solid #ffffff;
border-radius: 50%;
margin-top: 1rpx;
}
.txan[plain] {
border: none;
border-color: transparent;
}
.login-text {
font-size: 35rpx;
display: flex;
align-items: center;
/*垂直居中 */
justify-content: center;
}
6.page页面里新建文件夹login(再对着login文件夹右键新建page,定义名字就写login后会自动生成四个文件)，
然后一键复制粘贴进去下面代码到login.js页:
const app = getApp();
Page({
data: {
userInfo:{
avatarUrl:''
}
},
onShow() {
this.setData({
userInfo:wx.getStorageSync('userInfo'),
})
},
onChooseAvatar: function (res) {
const { userInfo } = res.detail.avatarUrl
this.setData({userInfo:res.detail})
app.userInfo.avatarUrl = res.detail.avatarUrl
wx.setStorageSync('userInfo', res.detail)
console.log( "缓存头像临时Url:",wx.getStorageSync('userInfo'))
var filePath = getApp().userInfo.avatarUrl
console.log('头像路径filePath:',filePath)
var fileName = Math.random().toString(36).substr(2);
console.log('头像图片文件名fileName:',fileName)
},
bindKeyInput: function (e) {
},
fromsubmit (e) {
const nickName = e.detail.value;
this.setData({nickName: e.detail.value,})
console.log("nickName:",nickName)
wx.setStorageSync('nickName', e.detail.value)
console.log( "名字有了放缓存:",wx.getStorageSync('nickName'))
},
setBtnTap() {
const {userInfo} = this.data
if([userInfo.avatarUrl] == '/image/avatarUrl.png') {
wx.showToast({
title: '头像不能为空',
icon: 'none'
})
return
}
const {nickName} = this.data
if(!nickName) {
wx.showToast({
title: '昵称不能为空',
icon: 'none'
})
return
}
wx.navigateBack({
url: 'B?id=1'
})
},
})
7:一键复制粘贴进去下面代码到login.wxml页:
<button class="avatar-wrapper bg-gradual-blue shadow-blur"
open-type="chooseAvatar" bindchooseavatar="onChooseAvatar" style="width: 268rpx; height: 233rpx; display: block; box-sizing: border-box; left: 0rpx; top: -3rpx; position: relative">
<image class="avatar" src="{{userInfo.avatarUrl}}" style="position: relative; left: 0rpx; top: 17rpx"> </image>
<text class="position" style="width: 176rpx; height: 47rpx; display: flex; box-sizing: border-box">同步头像</text>
</button>
<view>
<form bindsubmit="fromsubmit">
<input style="width: 486rpx; height: 64rpx; display: block; box-sizing: border-box" type="nickname"
name="nickName"
class="nickname-input"
placeholder="点击使用微信昵称"
bindinput="fromsubmit"
bindKeyInput="bindKeyInput"
input value="{{nickName}}"
/></form>
</view>
<button class="bc lg user-confirm-btn user-confirm-btn--{{canSaveUser?'enabled':'disabled'}}"
form-type="submit"
catchtap="setBtnTap"
type="primary">保存</button>
8:一键复制粘贴进去下面代码到login.wxss页:
.avatar-wrapper {
width: 10rpx;
height: 250rpx;
margin-top: 0rpx;
margin-bottom: 30rpx;
border-radius: 20rpx;
margin-top: 30rpx;
}
.avatar {
width: 150rpx;
height: 150rpx;
border: 1rpx solid #ffffff;
border-radius: 50%;
}
.nickname-input {
margin-bottom: 72rpx;
margin: 0 auto;
align-items: center;
justify-content: center;
font-size: 38rpx;
font-weight: 400;
color: #6164f8;
text-align: center;
/* 实线边框solid */
border-style: solid;
/* 圆角弧度radius */
border-radius: 25px;
/* 边框大小设置 */
border-width: 1px;
/* 输入框长度设置 */
width: 220px;
}
9.app.json页全选粘贴下面这段：
{
"pages": [
"pages/mine/mine",
"pages/index/index",
"pages/login/login"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
OK , 搞定！
点击编译 测试一下吧！
点击头像 进去获取一下头像和昵称，
用户openid的话要对接好后端配合才能获取，要需要的朋友评论留言一下，
样式想弄漂亮就要慢慢去美化啦！多多赐教共同进步哈！
希望能点个关注支持一下，陆续会发其它文章资源出来保持交流相互学习！
1617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
