uniapp微信登录

阐述：

自2022年11月9日微信官方平台更新了获取用户信息的方法（wx.getUserInfo），用此方法获取到的用户昵称显示‘微信用户’，具体参考用户信息接口调整说明、小程序用户头像昵称获取规则调整公告说明

官方给出的新方法是用户上传头像和手动输入昵称的方法获取用户信息。

实现代码：

<template><view><button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"><image class="avatar" :src="avatarUrl"></image></button><view class="petName"><view class="petName_name">昵称</view><input type="nickname" v-model="nickname" class="weui-input" placeholder="请输入昵称" /></view><view class="ensure" @click="ascertain">确定</view></view>
</template><script>const defaultAvatarUrl ='https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'export default {data() {return {avatarUrl: defaultAvatarUrl,nickname:''}},methods: {onChooseAvatar(e) {console.log(e);const {avatarUrl} = e.detailthis.avatarUrl=avatarUrl},ascertain(){uni.navigateBack({delta:1})}}}
</script><style lang="scss" scoped>.avatar-wrapper{height: 300rpx;text-align: center;display: flex;align-items: center;justify-content: center;}.avatar{width: 100rpx;height: 100rpx;}.petName{padding: 0 20rpx;height: 100rpx;display: flex;align-items: center;.petName_name{width: 150rpx;}}.ensure{position: fixed;bottom: 0;width: 100%;height: 80rpx;background: #07C160;color: #FFFFFF;display: flex;align-items: center;justify-content: center;}
</style>

无法获取用户昵称问题

此时使用上述方法即可实现获取用户信息，但在获取昵称时发现直接使用用户昵称无法获取，只有手动输入能拿到昵称信息。

解决方案：

input放在form标签里面，并使用blur方法

实现代码：

<template><view><button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"><image class="avatar" :src="avatarUrl"></image></button><form><view class="petName"><view class="petName_name">昵称</view><input type="nickname" v-model="form.nickname" @blur="getName" class="weui-input" placeholder="请输入昵称" /></view><view class="ensure" @click="sumbit">确定</view></form></view>
</template><script>const defaultAvatarUrl ='https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'export default {data() {return {avatarUrl: defaultAvatarUrl,form: {nickname: ''}}},methods: {getName(e) {console.log('1', e.detail.value)this.form.nickname = e.detail.value},onChooseAvatar(e) {console.log(e);const {avatarUrl} = e.detailthis.avatarUrl=avatarUrl},sumbit(){uni.navigateBack({delta:1})}}}
</script><style lang="scss" scoped>.avatar-wrapper{height: 300rpx;text-align: center;display: flex;align-items: center;justify-content: center;}.avatar{width: 100rpx;height: 100rpx;}.petName{padding: 0 20rpx;height: 100rpx;display: flex;align-items: center;.petName_name{width: 150rpx;}}.ensure{position: fixed;bottom: 0;width: 100%;height: 80rpx;background: #07C160;color: #FFFFFF;display: flex;align-items: center;justify-content: center;}
</style>

其他

前端在实现微信登录时一般要先使用uni.login获取code传递给后台，具体代码如下

sumbit() {uni.login({provider: 'weixin',success: function(loginRes) {let data = loginRes.code}});
}

uniapp微信登录相关推荐

uni-app微信小程序登录；uni-app微信登录小程序；uni-app微信登录app；
思路: 通过uni-app文档可知:实现微信登录,无论是app还是小程序,都需要唯一标识openid,然后通过openid取掉后端的登录接口,获取cookie然后做登录跳转: [-[-[必须先调用微信 ...
uniapp 微信登录取消授权，以及不等待你做出授权选择就执行方法体
uniapp 微信登录取消授权,以及不等待你做出授权选择就执行方法体问题描述关于小程序调用微信登录,调起权限询问得时候,点击取消,还会继续登录得问题,单纯从 uni.login得回调来看,不管是成 ...
uniapp—微信登录，苹果登录
目录微信登录代码实现在微信小程序和app登录,获取的unionid不一致 ios13+苹果登录在苹果登录的开发过程中,遇到的问题及解决方案. 需求说明: 我的项目需求是已有微信小程序项目,新增a ...
uniapp微信登录报错-100，login:fail [:-1]未能完成操作。（PGWXAPI错误-1。）
报内容: { "errMsg": "login:fail [:-1]未能完成操作.(PGWXAPI错误-1.),", "errCode": ...
uniapp app 实现qq登录、微信登录
一.申请 uniapp qq登录流程: 开通 | uni-app官网申请微信登录可前往微信开发平台:微信开放平台 uniapp 微信登录流程: uni-app官网申请qq登录可前往qq互联:QQ互 ...
uni-app微信小程序登录授权
uni-app微信小程序登录授权首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接 ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
uniapp 微信小程序登录方法封装
uniapp 微信小程序登录方法封装前言一.登录接口二.登录上代码总结前言 ui设计没有登录页所以将微信小程序登录方法同一封装一个方法一.登录接口 uni.getUserProfile ...
uniapp授权登录微信支付宝小程序获取code和基础信息
项目背景:采用uniapp框架开发微信和支付宝两端小程序,前端授权基础信息和code传给后端获取openid(微信)和user_id(支付宝)建立用户体系. 项目描述:之前分开用原生框架开发的时候,都 ...
uni-app APP端-微信登录流程
uni-app APP端-微信登录流程手把手教学 1.前期准备在微信开放平台注册账户微信开放平台 (qq.com) 在管理中心中创建移动应用项目,按要求填写相关信息审核通过后即可获得我们所需的 ...

uniapp微信登录

uniapp微信登录相关推荐

最新文章

热门文章