1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 最新版微信小程序授权登录(自定义头像昵称)

最新版微信小程序授权登录(自定义头像昵称)

时间:2021-01-11 08:15:36

相关推荐

最新版微信小程序授权登录(自定义头像昵称)

根据官方微信小程序开发关于登录授权API的调整,自 10月25日起有关API接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 “微信用户”。(如下图所示)

那我们如何解决?

效果图:

​​

登录授权页面

wxml代码如下:

<button>标签中将open-type="chooseAvatar"是用来设置用户头像,并且获得一个临时路径。

<buttonclass="avatar"open-type="chooseAvatar"bind:chooseavatar="onChooseAvatar"style="width:250rpx;height:200rpx;"><imageclass="avatar"src="{{avatarUrl}}"></image></button><inputbindinput="inputValue"placeholder="请输入昵称"style="width:200rpx;height:100rpx;margin:20rpxauto;"/><buttonbindtap="submit"style="background-color:aquamarine;">授权登录</button>

js代码如下:

js代码主要包括三个事件(头像临时路径)、昵称、获取授权并变灰色头像和“微信用户”。

// pages/show/show.jsconst defaultAvatarUrl = '/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'const app=getApp()Page({/*** 页面的初始数据*/data: {avatarUrl: defaultAvatarUrl,//头像临时路径,默认是defaultAvatarUrl的灰色头像},/*** 获取头像的临时路径 */onChooseAvatar(e) {const { avatarUrl } = e.detail //e.detail是从前端传过来的所选头像的临时路径this.setData({ avatarUrl, //将所选头像临时路径赋值给avatarUrl})},/***获取文本框所输入的昵称信息*/inputValue(e){console.log(e)this.setData({inputNickname:e.detail.value})},/***授权登录,将API调整后返回的nickName和avatarUrl改成我们自定义选择的头像和昵称*/submit(e){var that=thiswx.getUserProfile({ //获取登录授权的APIdesc: '获取用户必要信息',success(res){app.globalData.userInfo=res.userInfo //将API返回的信息赋值给全局变量userInfoapp.globalData.userInfo.nickName=that.data.inputNickname //更改全局变量中的userinfo中的昵称app.globalData.userInfo.avatarUrl=that.data.avatarUrl //更改头像临时路径console.log(app.globalData.userInfo)wx.setStorageSync('userInfo', res.userInfo) //将信息本地储存,方便下次不用再次授权登录wx.showToast({title: '授权成功!',success(){wx.navigateTo({url: '/pages/info/info',//登录成功返回到主页})}})}})}})

主页展示页面

wxml代码:

<view style="width: 100%;height: 400rpx;background-color: aquamarine;display: flex;flex-direction: column;justify-content: center;"><image src="{{userInfo.avatarUrl}}" style="width: 250rpx;height: 250rpx;border-radius: 50% 50%;overflow: hidden;margin: auto;"></image><view style="margin: auto;">{{userInfo.nickName}}</view></view>

js代码:

此处引用全局变量中的userInfo中的信息,此变量是我们在授权时所赋值的。

const app=getApp()Page({data: {userInfo:app.globalData.userInfo,},)}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。