2023年最新微信小程序获取用户openid、头像昵称的填写能力和方法原生写法

大家好，下面是我身为小白分享给小白哈，
不懂就问相互学习共同进步！
亲测自用原生代码，感谢大神指点赐教鼓励勿喷；

只需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.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 = 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.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的话要对接好后端配合才能获取，要需要的朋友评论留言一下，
样式想弄漂亮就要慢慢去美化啦！多多赐教共同进步哈！
希望能点个关注支持一下，陆续会发其它文章资源出来保持交流相互学习！

2023年最新微信小程序获取用户openid、头像昵称的填写能力和方法原生写法相关推荐

php实现微信小程序获取用户openid，昵称和头像方法
最近做微信小程序,要做一个排行榜的功能,摸索了一天,终于找到获取用户openid,昵称和头像方法. 先上wxml: <button bindtap="getInfo"> ...
微信小程序获取用户信息-头像、昵称......
微信小程序获取用户信息-头像.昵称等,并出现弹窗提示授权目录微信小程序获取用户信息-头像.昵称等,并出现弹窗提示授权 1.wx.getUserProfile文档 2.代码演示 3.演示过程(图示) ...
微信小程序获取用户的头像和昵称
JS // 获取小程序实例 var app = getApp() var sourceType = [['camera'], ['album'], ['camera', 'album']] var s ...
微信小程序获取用户信息（昵称、头像、openid等）
1.可以调用wx.getUserProfile来获取用户的昵称.头像(地址).地区及性别.但是需要通过按钮事件触发,在showModal弹窗中用户点击确定后才能获取. WXML: <view&g ...
java中用户头像是怎么弄的_微信小程序获取用户openid，头像昵称信息，后台java代码...
https://blog.csdn.net/qq_39851704/article/details/79025557 首先最近正在练习微信小程序刚刚写了一个获取用户openid的代码,貌似之前的小程序 ...
springboot 微信小程序获取用户手机号最新方式
springboot 微信小程序获取用户手机号直接开整!!! 现在有两种方式获取微信用户的手机号第一种这种方式比较旧了,也能获取到手机号,但不建议使用. 1.前端调用wx.login()(官方的 ...
微信小程序获取用户信息流程（2022年版）
开门见山地说,本文主要讲述微信小程序在2022年以后获取用户信息的主要方法,如果想要了解2022年之前微信小程序获取用户信息的相关知识或者是微信小程序之前这部分的设计思想的话,推荐博主的下面这篇博客 ...
微信小程序获取用户手机号--官方示例
微信小程序获取用户手机号–官方示例 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNu ...
微信小程序获取用户信息并保存登录状态
微信小程序获取用户信息并保存登录状态:http://www.360doc.com/content/18/0124/11/9200790_724662071.shtml 转载于:https://www ...

2023年最新微信小程序获取用户openid、头像昵称的填写能力和方法原生写法

2023年最新微信小程序获取用户openid、头像昵称的填写能力和方法原生写法相关推荐

最新文章

热门文章