众所周知，小程序新版登录无法拿到头像和昵称！

这篇文章讲解如何获取到微信用户昵称和头像

成品效果

步骤一，点击登录，获取token
步骤二，登录按钮隐藏，展示上传按钮
步骤三，点击上传按钮
步骤四上传按钮隐藏，展示一下按钮
步骤五，点击输入框，获取用户昵称

HTML页面

<!-- 登录 -->
<view class="authorization" @click="getUser" v-if="isLogin==1">微信授权一键登录</view><!-- 获取用户头像 -->
<button class="authorization" type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar" v-if="isLogin==2">上传微信头像</button><!-- 获取用户名称 -->
<input id="nickname-input" v-model="nickname" v- class="authorization white" type="nickname" placeholder="请输入用户昵称" v-if="isLogin==3"><!-- 进入程序 -->
<view class="authorization" @click="gouser" v-if="isLogin==3" style="margin-top: 24rpx;">进入程序</view><!-- 暂不登录-->
<view class="no_login" @click="back" v-if="isLogin==1">暂不登录</view>

 data() {return {isLogin:1,code: "",avater: "",nickname: "",}},

步骤一：获取code，通过uni.login或者wx.login

methods: {//获取codegetcode() {let _this = this;wx.login({success(res) {if (res.code) {_this.code = res.code;} else {console.log('登录失败');}}});},
}

步骤二：code换取sessionKey，openid等信息，去登录，获取token

这里引用了uview组件库，注意,不是强制使用，你可以使用自己的接口使用方式

methods: {//获取sessionKey
getUser(){uni.$u.http.post('/api/user/getSessionKey', {code: this.code}).then(ress => {console.log(ress, "key数据")if (ress.code == 1) {uni.$u.http.post('/api/user/wxMobileLogin', {sessionKey: ress.data.session_key,iv: e.detail.iv,encryptedData: e.detail.encryptedData,openid: ress.data.openid}).then(res => {if (res.code == 1) {let type = res.data.typeuni.setStorageSync("token", res.data.token)uni.setStorageSync("userinfo", res.data)//进行的操作},1000)}}).catch(err => {uni.showToast({title: res.ms0g,icon: 'none',duration: 200});})}
}

步骤三：获取微信头像

//获取用户头像，获取到的头像是临时文件，要通过自己的上传接口上传到服务器chooseavatar(e) {console.log(e)this.avater = e.detail.avatarUrlthis.$uploadFile(this.avater).then((image) => {console.log(image)this.avater = image.data.fullurl})this.isLogin = 3},

步骤四：获取微信昵称

闭坑指南
注意，微信开发者工具的原生点击获取昵称，无法采用获取dom的方法去实时刷新data里的数据，采用真机调试去input事件赋值！

当你点了自己的昵称以后，发现此时页面上双向绑定的nickname你会发现无法拿到值
通过节点获取节点内容
当你想判断用户有没有输入内容的时候，可以通过trim().length获取长度来判断

gouser() {let that =thisuni.createSelectorQuery().in(this) // 注意这里要加上 in(this).select("#nickname-input").fields({properties: ["value"],}).exec((res) => {that.nickname = res?.[0]?.valuesetTimeout(()=>{if (that.nickname.trim().length==0) {uni.showToast({title: '请输入昵称！',icon: 'none'});return}let params = {nickname: that.nickname,avatar: that.avater,};console.log(params)that.$postAction('user/profile', params).then(res => {uni.switchTab({url: '/pages/tabBarView/home'})});},100)})},

【小程序】新版uniapp登录流程以及获取头像和昵称相关推荐

微信小程序如何进行登录授权和获取用户信息
微信小程序如何进行登录授权和获取用户信息
微信小程序 - 实现手机号登录--授权并获取手机号保存至本地
详细代码请见文档最下方,仅供参考,更多需要请查看官方文档一. 微信官方文档 | 获取手机号这是服务端的这是我们前端获取手机号需要给接口传递的两个参数注意: 参数一:获取access_toke ...
抖音小程序request封装，登陆授权获取头像方案，及广告加载注意事项
api.js 文件封装request var n = function (t, n, r, o, i, a) {return i && tt.showLoading({title: ...
微信小程序API----授权登录拿到用户头像昵称等信息
前端开发思路: 1.通过点击按钮,拿到code,传给后台,后台通过code换取session_key 和 openid 这个地方调取 wx.login 这个API 2.调取wx.getUserProf ...
ajax 微信code获取_计算机毕业设计中微信小程序实现微信登录(Java后台)
点击上方"蓝字",关注我们. 需要的材料 1:一个可以测试的微信小程序 2:此微信小程序的APPID和APPscret 流程微信用户对应一个小程序都有一个唯一的openid,微信 ...
小程序、H5登录授权、分享、支付流程
微信登录.分享.支付流程 [TOC] 前言对于前端来说,微信的支付.分享.登录是一定要掌握的,今天这篇文章,主要对这三方面的流程进行详细的介绍.主要内容如下: 域名相关知识介绍业务域名:在微信浏览 ...
新！uniapp微信小程序微信授权登录
11月后,微信小程序对于微信授权登录做了逻辑上的更改,之前的一键授权获取用户信息的功能已不再适用.已发布审核完成的小程序不受影响,但要想再发布,只能换成新的登陆逻辑了. 首先,要说明的,个人中心页面, ...
微信小程token_微信小程序开发之登录换取token
本文将带你了解微信小程序开发之登录换取token,希望本文对大家学微信有所帮助前言:这次主要是介绍些业务逻辑,技术点倒是没有多少.不过在开发中,优秀的编程思路同样是非常值得学习的. 最近小程序可以说 ...
微信小程序和uni-app面试高频知识点
微信小程序微信小程序的项目结构前端代码分为结构层html(WXML),表现层css(WXSS),行为层 js,在这之前首先给大家介绍一下小程序里面的一些文件类型及用途: .json 后缀的 JSO ...

【小程序】新版uniapp登录流程以及获取头像和昵称

众所周知，小程序新版登录无法拿到头像和昵称！

这篇文章讲解如何获取到微信用户昵称和头像

成品效果

HTML页面

步骤一：获取code，通过uni.login或者wx.login

步骤二：code换取sessionKey，openid等信息，去登录，获取token

步骤三：获取微信头像

步骤四：获取微信昵称

【小程序】新版uniapp登录流程以及获取头像和昵称相关推荐

最新文章

热门文章