众所周知小程序登录自2022年2月21日24时起回收通过<open-data>展示个人信息的能力，啥意思呢，就是头像展示成灰色，昵称展示成微信用户，例如：

话不多说直接正题。

首先介绍第一种，费力的方式：依然还是用 open-type 的值设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到获取到头像信息的临时路径。（附官方介绍：头像昵称填写 | 微信开放文档）

说白了就是让用户手动填写信息，说实话，强烈不推荐该做法。有兴趣的看下官方的示例代码，这这里我就不做过多的讲解了。

其次就是使用wx.getUserProfile，看了众多产品登录源码，都在使用这个，接下来我就简单介绍一下小程序整体登录流程以及该方法的使用。

1.wx.getUserProfile(Object,object)，该方法有个必传字段desc（声明获取用户个人信息后的用途，不超过30个字符），随便写点就行，例如完善会员资料、**信息关联。随便怎么写都行，开心就好。该方法有三个回调，success、fail、complete（用这个就行，一顶二，成功失败都会执行）。

wx.getUserProfile({desc: '编辑会员资料',complete: (res) => {if(res.errMsg == "getUserProfile:ok"){//成功的操作}else{//失败的操作}}})

附（成功信息打印结果）：

cloudID: "***************"
encryptedData: "*************"
errMsg: "getUserProfile:ok"
iv: "*******"
rawData: "{"nickName":"山西懿颖科技有限公司","gender":0,"language":"zh_CN","city":"","province":"","country":"","avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKAYRMLQErdU66S4lfdddAEqicmuJpYiale1DKib4KQXoqibcD78jcy9JJ3icvSNUP3VHITRFuqpMg/132"}"
signature: "*********"
userInfo: {nickName: "山西懿颖科技有限公司", gender: 0, language: "zh_CN", city: "", province: ""

附（失败信息打印结果）：

{errMsg: "getUserProfile:fail getUserProfile:fail auth deny"}

至此：nickName（微信用户名），avatarUrl（头像路径）都拿到了。

其实以上内容就已经够用了，接下来我会带领各位同学把微信整套登录流程走一遍。

=================《微信登录整体流程》===============

微信登录整体流程：

涉及到的方法：wx.getSetting()，wx.getUserProfile()，wx.authorize()，wx.login()。

何时需要登录？并不是所有的程序都是一进系统就要登录的，例如电商产品，查看订单，查看物流。浏览商品并不需要，所以找准定位。

一、wx.getSetting()

该方法主要用户获取用户当前设置，返回值中会出现用户以请求过的权限，例如登录。首先通过该方法查询用户是否已经登录。

wx.getSetting({success(res){//返回值//authSetting://scope.address: true//scope.invoice: true//scope.invoiceTitle: true//scope.userInfo: true//这里主要用这个//scope.userLocation: true//__proto__: Object//errMsg: "getSetting:ok"if(res.authSetting && !res.authSetting['scope.userInfo']){//执行未登录操作}}
})

二、wx.login()

该方法主要用于获取code，把获取到的code传到服务端，服务端（调用auth.code2Session方法换取OpenId、UnionID、session_key）返回Token，你用到的只有Token，括号里的内容作为扩展可以不予理会。拿到Token做本地存储，store、Storage都可以存，超哥一般往Storage里存（存储方法见2.1，往下看），建议Token做加密处理。

    wx.getSetting({success(res){if(res.authSetting && !res.authSetting['scope.userInfo']){//获取code方法wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIdtoken({code:res.code}).then( res => {//这步是token接口的请求// 获取本地缓存中的TOKENconst TOKEN = wx.setStorageSync('TOKEN',res.token);})}})}}})

至此token就成功拿到了。

2.1、wx.setStorageSync以及wx.setStorage区别以及用法

区别：显而易见wx.setStorageSync就是同步执行，wx.setStorage异步执行。

用法：

存：wx.setStorageSync（'key'，value）；

取：wx.getStorageSync（'key'）；

三、wx.getUserProfile()

wx.getUserProfile每次调用都会弹框询问用户，看下图；

前文已经说过了2022年2月21日24时起回收通过<open-data>展示个人信息的能力，所以现在以wx.getUserProfile替换当初的getUserInfo。

wx.getUserProfile（）用法已经说明，详情见上文，这里就不做重复讲解了，直接上代码；

    wx.getSetting({success(res){if(res.authSetting && !res.authSetting['scope.userInfo']){wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIdtoken({code:res.code}).then( res => {//这步是token接口的请求// 获取本地缓存中的TOKENconst TOKEN = wx.getStorageSync('TOKEN',res.token);wx.getUserProfile({desc: '编辑会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写complete: (res) => {if(res.errMsg == "getUserProfile:ok"){console.log('成功了')//存储用户昵称和头像wx.setStorageSync('userInfo', {name:res.userInfo.nickName,img:res.userInfo.avatarUrl,});}else{console.log(res)}}})})}})}}})

至此，登录这套流程就已经完事了，本文通俗易懂，简单粗暴的同学直接复制以上代码，把TOKEN接口请求你换成自己的就OK了。

----------以下方法作为拓展延伸--------

4、wx.authorize()

该方法主要用户向用户提前发起授权请求，调用后会立即弹框询问用户是否同意授权某项功能，例如（地理位置、麦克风、摄像头....），旧版的登录用wx.authorize()方法登录的也很多，只不过新版限制了getUserInfo弹出框的功能，其实还是本文一开始说的那套。

其实除登录外，例如获取授权定位。首先还是通过wx.getSetting()方法查询是否已经授权过定位，如果没有，执行wx.authorize()，提前向用户发起定位授权请求。

wx.getSetting({success(res) {if (res.authSetting['scope.record'] && !res.authSetting['scope.userLocation']) {wx.authorize({scope: 'scope.userLocation',success () {// 用户已经同意小程序使用定位功能，当再次调用wx.getLocation()方法时，不会再次询问。wx.getLocation()}})}}
})

好了，终于完事了，老样子，不要喷，喜欢的点赞带走，不喜欢的请自觉绕道，写个需要的人，喷子勿扰！！！

如有纠正或不明白的地方，欢迎大家留言探讨。

插播一条广告：

本公司自营项目：

微信电商小程序（拼团、砍价、会员、积分、限时秒杀、分销、直播等诸多功能）；

刷脸支付（招商加盟，代理加盟，一站式源码部署）；

另：接各种开发项目，PC、移动、webApp、小程序、App、M站等；

如果有需要请打开http://yykj.huijik.com进行留言，（进入页面下拉到最底端即可留言）

微信小程序登录功能实现(最新)相关推荐

微信小程序登录功能的前端设计与实现
导语 | 登录/注册这模块就像个冰山,我们通常以为它就是「输入账号密码,就完成登录了」,但实际下面还有各种需要考虑的问题.作为应用的基础能力,登录/注册的设计需要有足够的健壮性,避免出现全站性阻塞.同 ...
SpringBoot实现微信小程序登录功能
SpringBoot实现微信小程序登录微信小程序登录流程登录流程图前端代码后端代码微信小程序登录流程微信小程序官方文档:微信小程序官方文档第一次学习微信小程序的登录,以前也好奇微信小程序 ...
微信小程序登录功能实现（通过用户名和密码）
通常我们在登录微信小程序的时候都是通过授权登录,各种博文上已经有了很多案例,这里记录一下自己实际开发过程中,通过用户名和密码请求登录的流程: 1.获取用户在用户名输入框输入的信息 wxml: < ...
微信小程序登录功能wx.login
wx.login(object,object) //index.js Page ({data: {openid: null,session_key: null,unionid: null,},onLo ...
vc++6.0获取磁盘基本信息_微信小程序——常用功能2：微信小程序用户登录，申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
微信小程序登录返回 -41003
微信小程序登录解密失败小程序登录的时候,通过客户端获取的code等加密的信息,传给后端解密,可是后端解密返回 -41003 问题踩坑过程复现流程: 用户点击授权按钮.通过按钮绑定 getUser ...
微信小程序python token验证_微信小程序登录对接Django后端实现JWT方式验证登录
点击授权按钮后可以显示部分资料和头像,点击修改资料可以修改部分资料. 1.使用微信小程序登录和获取用户信息Api接口 2.把Api获取的用户资料和code发送给django后端 3.通过微信接口把co ...
android微信登录获取微信账号,微信小程序--登录授权，一键获取用户微信手机号并登录...
一.前言微信小程序登录流程时序说明: 小程序调用wx.login() 获取临时登录凭证code ,并回传到开发者服务器开发者服务器以code换取用户唯一标识openid 和会话密钥sess ...
小程序---365笔记第11天---微信小程序登录接入
接入前的准备工作参考文档:微信小程序登录接入 (必做) 登录逻辑:小程序登录逻辑梳理使用插件参考文档:https://developers.weixin.qq.com/miniprogram/dev ...

微信小程序登录功能实现(最新)

=================《微信登录整体流程》===============

插播一条广告：

微信小程序登录功能实现(最新)相关推荐

最新文章

热门文章