一、背景

小程序用户头像昵称获取规则调整公告：小程序用户头像昵称获取规则调整公告 | 微信开放社区

二、案例

1、点击登录按钮

点击登录按钮，先去检查用户授权信息，会弹出用户授权弹窗（首次），用户点击同意授权之后，调用 wx.login 方法获取登录凭证（code），把code传给后端写的登录接口进行解析登录，这时候用户的头像和昵称可以根据具体项目的需求自己传一个默认的头像图片和昵称给后端登录接口进行初始化。

<view class="page-container"><view class="login-btn" bindtap="checkScope">授权用户信息</view><view class="tip">若您没有账号，登录后会自动创建</view></view>

// 检查授权信息
checkScope() {// 获取授权设置信息wx.getSetting({success: (res) => {console.log(res)// 判断用户信息是否有授权if (!res.authSetting['scope.userInfo']) {// 获取授权wx.authorize({scope: 'scope.userInfo',success: (e) => {console.log('authorize: ', e)// 调用你们后端写的登录接口this.login()},fail: (err) => {console.log('authorize-err: ', err)}})} else {console.log('已授权')// 调用你们后端写的登录接口this.login()}},fail: (err)=> {console.log(err)}})
}

  // 登录login() {let _this = this;// 获取微信登录的codewx.login({success (e) {if (e.code) {// 请求后端写的登录逻辑接口// ......} else {wx.showToast({title: '登录失败！' + e.errMsg,icon: 'none',duration: 2000})console.log('登录失败！' + e.errMsg)}}})},

2、设置头像和昵称为微信账号的头像和昵称

button组件的 open-type 设置为 chooseAvatar，点击之后可以从bindchooseavatar回调中获取到用户头像信息。

input组件的 type 设置为 nickname，点击之后会出现昵称输入键盘，直接获取到昵称填写进去。

之后我们就可以把获取到的微信头像和昵称通过后端接口保存到用户信息里。

<view class="page-container"><view class="li"><text class="left">头像</text><view class="right"><buttonclass="box"open-type="chooseAvatar"bindchooseavatar="onChooseAvatar"><image class="avatar" src="{{avatarUrl}}"/></button></view></view><view class="li"><text class="left">昵称</text><view class="right"><input type="nickname" value="{{userName}}" class="weui-input" placeholder="请输入昵称" bindinput="bindinput"/></view></view><view class="submit-btn" bindtap="updateUserInfo">确定</view></view>

  // 获取微信昵称bindinput(e: any) {console.log('bindinput', e)this.setUserName(e.detail.value)},// 获取微信头像onChooseAvatar(e:any) {console.log(e)const { avatarUrl } = e.detail;// 把获取到的微信头像的图像文件上传到后端this.uploadImg(avatarUrl)},

关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式相关推荐

获取小程序用户信息+java_java获取微信小程序用户信息
第一步:获取openid.session_key等信息. /** * 获取微信小程序的用户openid和session_key/unionid * 返回格式:{"session_key&qu ...
微信小程序用户头像编辑上传
微信小程序用户头像编辑上传近期接触了一个小程序项目,需要可以修改用户头像,默认获取用户当前微信头像,点击头像,可调用手机照相机或者本地相册,更换图片. html代码如下: js代码:
asp获取微信小程序用户手机号,asp微信小程序手机号获取,微信小程序手机号asp获取方法
今天搞的这个项目里需要用到asp获取小程序用户的手机号,在网上找了下资源,一个也没有找到,难道用asp获取不到微信小程序用户的手机号码吗?非也,经过一系列操作,成功了,asp照样可以获取小程序用户的手 ...
微信中html5获取手机号,微信小程序用户授权获取手机号（getPhoneNumber）
前言小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码.有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如 ...
PHP 获取微信小程序用户手机号
截止到目前为止,小程序通过获取session_key与encryptedData与iv进行解密获取手机号的方法已经不行了,只能通过点击按钮来实现获取微信用户的手机号,本文仅以PHP为例大概流程: 1 ...
微信小程序用户登录流程思路及主要代码
微信小程序用户登录流程思路由于微信官方不允许在刚进入小程序的时候,弹出用户登陆页面,需要在进入小程序后,用户主动点击才能进入登陆页面.此时,将会给小程序开发者在设计用户登陆页面时,带来一定的麻烦.现 ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...
webform窗体怎么实现session唯一标识_微信小程序用户登录和登录态维护的实现_javascript技巧...
这篇文章主要介绍了微信小程序用户登录和登录态维护的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧让用户登录,标识用户和获取 ...
微信java 签名验证_JAVA版微信小程序用户数据的签名验证和加解密
签名验证和加解密数据签名校验为了确保开放接口返回用户数据的安全性,微信会对明文数据进行签名.开发者可以根据业务需要对数据包进行签名校验,确保数据的完整性. 签名校验算法涉及用户的session ...

关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式

一、背景

二、案例

1、点击登录按钮

2、设置头像和昵称为微信账号的头像和昵称

关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式相关推荐

最新文章

热门文章