大家好，下面是我身为小白分享给小白哈，
不懂就问相互学习共同进步！
亲测自用原生代码，感谢大神指点赐教鼓励勿喷；
只需9个一键复制粘贴步骤一气呵成；
先来本文最终主要实现效果：
获取微信小程序用户头像昵称的填写能力和方法原生写法
一：先捋一捋思路逻辑：
1：获取之前有个环节是wx.checkSession先自动判断缓存里
有没用户之前的信息session_key有没过期，
没有或者过期就执行下一步；
2：用获取用户返回的code,
然后配合服务器后端wx.request获取返回用户openid,（后端写法可以关注找我要）；
3：返回有了openid即用户唯一标识可以定义全局和存缓存后续更新用户相关信息用
4：编辑个人中心页面 和跳转用户信息获取授权页
二：开码：
1.先在小程序文件包目录中新建image文件夹，
然后将下面的图片命名为avatarUrl作为默认头像放进/image文件夹中初始化备用，
图片链接：/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.codewx.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.dataconst app = getApp()getApp().globalData.openid = openidconsole.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.avatarUrlthis.setData({userInfo:res.detail})app.userInfo.avatarUrl = res.detail.avatarUrlwx.setStorageSync('userInfo', res.detail)console.log( "缓存头像临时Url:",wx.getStorageSync('userInfo'))var filePath = getApp().userInfo.avatarUrlconsole.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.dataif([userInfo.avatarUrl] == '/image/avatarUrl.png') {wx.showToast({title: '头像不能为空',icon: 'none'})return}const {nickName} = this.dataif(!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的话要对接好后端配合才能获取，要需要的朋友评论留言一下，
样式想弄漂亮就要慢慢去美化啦！多多赐教共同进步哈！
希望能点个关注支持一下，陆续会发其它文章资源出来保持交流相互学习！
