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

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

成品效果
  • 步骤一,点击登录,获取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登录流程以及获取头像和昵称相关推荐

  1. 微信小程序如何进行登录授权和获取用户信息

    微信小程序如何进行登录授权和获取用户信息

  2. 微信小程序 - 实现手机号登录--授权并获取手机号保存至本地

    详细代码请见文档最下方,仅供参考,更多需要请查看官方文档 一. 微信官方文档 | 获取手机号 这是服务端的 这是我们前端获取手机号需要给接口传递的两个参数  注意: 参数一:获取access_toke ...

  3. 抖音小程序request封装,登陆授权获取头像方案,及广告加载注意事项

    api.js 文件  封装request var n = function (t, n, r, o, i, a) {return i && tt.showLoading({title: ...

  4. 微信小程序API----授权登录拿到用户头像昵称等信息

    前端开发思路: 1.通过点击按钮,拿到code,传给后台,后台通过code换取session_key 和 openid 这个地方调取 wx.login 这个API 2.调取wx.getUserProf ...

  5. ajax 微信code获取_计算机毕业设计中微信小程序实现微信登录(Java后台)

    点击上方"蓝字",关注我们. 需要的材料 1:一个可以测试的微信小程序 2:此微信小程序的APPID和APPscret 流程 微信用户对应一个小程序都有一个唯一的openid,微信 ...

  6. 小程序、H5登录授权、分享、支付流程

    微信登录.分享.支付流程 [TOC] 前言 对于前端来说,微信的支付.分享.登录是一定要掌握的,今天这篇文章,主要对这三方面的流程进行详细的介绍.主要内容如下: 域名相关知识介绍 业务域名:在微信浏览 ...

  7. 新!uniapp微信小程序微信授权登录

    11月后,微信小程序对于微信授权登录做了逻辑上的更改,之前的一键授权获取用户信息的功能已不再适用.已发布审核完成的小程序不受影响,但要想再发布,只能换成新的登陆逻辑了. 首先,要说明的,个人中心页面, ...

  8. 微信小程token_微信小程序开发之登录换取token

    本文将带你了解微信小程序开发之登录换取token,希望本文对大家学微信有所帮助 前言:这次主要是介绍些业务逻辑,技术点倒是没有多少.不过在开发中,优秀的编程思路同样是非常值得学习的. 最近小程序可以说 ...

  9. 微信小程序和uni-app面试高频知识点

    微信小程序 微信小程序的项目结构 前端代码分为结构层html(WXML),表现层css(WXSS),行为层 js,在这之前首先给大家介绍一下小程序里面的一些文件类型及用途: .json 后缀的 JSO ...

最新文章

  1. STM32下SD卡驱动详解
  2. 个性二维码开源专题液化/圆角/效果
  3. 在线教育开源 java_开源项目SpringBoot在线教育平台
  4. cronschedulebuilder 到时还没运行完_为什么我的软件编译时没问题,运行时却出错?...
  5. BZOJ-1951 古代猪文 (组合数取模Lucas+中国剩余定理+拓展欧几里得+快速幂)...
  6. javascript中BOM介绍、屏幕尺寸、历史记录、URL解析、计算机信息获取、定时器、三大系列及兼容代码、封装动画函数、同步和异步
  7. 性#26684;倔强的HTML5员工
  8. c1和c2语言水平,为什么驾校不建议考C2,驾驶证C1和C2的区别
  9. shell监控web服务的多种方案
  10. 各种网络监控物理拓扑图
  11. 微信公众号php从0开发,包括功能(自定义菜单,分享)
  12. 利用 ASP.NET 2.0 中的 Web 部件和个性化释放站点的潜能 --作者:Steven A. Smith
  13. windows与linux多线程对比
  14. 动感标题文字快闪(闪白特效)开场PR模板MOGRT
  15. 人体姿态估计之CPN中文文献翻译
  16. jQuery常用插件
  17. 儿童吹泡泡水简单配方_小孩吹泡泡的 泡泡水,有谁知道详细的配方?
  18. (兼职月赚两万?)程序员如何接私活? 如何让自己的知识变现?
  19. python程序设计上机实践答案_清华大学出版社-图书详情-《C++程序设计上机实践与学习辅导(第三版)》...
  20. Tomcat 3、4、5、6、7、8、9 各版本下载地址

热门文章

  1. 哈工大计算机系统大作业2022春
  2. Xshell解决中文乱码问题
  3. oracle中member,Oracle数据库通过定义TYPE及Member对象来实现日志信息的分级管理
  4. matlab vc 2005,MATLABmex不能出现vc++ 2005 compilers的处理
  5. Java程序员从笨鸟到菜鸟之(四)练习
  6. 手把手教你创建专属个人助理,GitHub免费的
  7. 混蛋在西班牙的用法-语境方面
  8. linux mutt使用方法,linux命令——mutt的安装和使用
  9. js生成随机数的方法
  10. mysql inserted表_触发器中的inserted表和deleted表