目录

前言

一、微信小程序是什么？

二、业务流程

1、使用微信小程序登录的wx.login()方法

2、后端使用登录凭证换取session_key和openid

3、前端处理session_key、openid和token

尾言

前言

随着微信小程序大规模的铺开和宣传，在生活中随处可见微信小程序的影子。在我们身边每个人都在使用微信app，拥有极大的用户群体，而微信小程序是一个基于微信开发出来的“即时APP”，无需下载安装，仅需要在微信中直接点击就可以进行使用，完全符合小程序诞生时的定义“即用即走”，因此它在很短的时间内得到了飞速的发展。那么小程序的登录功能是如何实现的呢，下文将详细介绍。

一、微信小程序是什么？

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”，的梦想，用户扫一扫或者搜一下即可打开应用

二、业务流程

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系，下图为登录流程时序：

登录流程时序：

下面将对登录时序图进行详细讲解：

1.使用微信小程序登录的wx.login()方法

在微信小程序页面或图像加载完成后即在onload()方法里调用wx.login()方法获取用户code。

代码如下（示例）：

wx.login({success (res) {if (res.code) {//发起网络请求wx.request({url: 'https://example.com/onLogin',//上述url地址为后端提供的微信地址，用于前端将code传入后端时所用。data: {code: res.code//res.code为通过wx.login拿到的code，code字段由后端定义，具体要求由后端规定}})} else {console.log('登录失败！' + res.errMsg)}}
})

2.后端使用登录凭证换取session_key和openid

当后端同学拿到code之后，将code和AppID+AppSecret对接微信接口服务换取session_key和openid和后端生成的token通过code数据交互接口传回前端。AppID和AppSecret相当于微信小程序的身份证，获取方法：登录微信小程序的管理系统——>开发管理——>开发设置。如图所示：

3、前端处理session_key、openid和token

前端拿到session_key、openid和token之后将session_key、openid和token存入缓存，再微信小程序后续的接口请求都带上token进行请求。存入微信缓存方法如下：


this.$storageSync.set("codegetOpen", res.data.codegetOpen)
this.$storageSync.set("codegetSess", res.data.codegetSess)
this.$storageSync.set("userToken", res.data.token)//该代码段写在登录接口成功的回调函数里，res.data为后端返回的数据，具体根据返回时的数据结构不同取值

接口如何请求携带token具体看你的微信小程序封装的网络请求。这里提供未封装的原生网络请求方法，代码如下：

wx.request({url: 'example.php', //仅为示例，并非真实的接口地址data: {},header: {'content-type': 'application/json' // 默认值Authorization:this.$storageSync.get("userToken"),//从缓存中拿到token并携带请求！},success (res) {console.log(res.data)}
})

尾言：

好啦，这次微信小程序登录的流程就到这里结束啦，对了，我很高兴加入CSDN社区的大家庭，本人为本科在校大三计算机科学与技术的学生，目前在一家上市互联网厂实习，我主要的开发方向为前端方向，是一名初级的小前端，将来我将在CSDN上分享很多技术干活，以及在开发过程中遇到的一些问题，以及解决方案。要是有什么问题可以私信我，我看到一定会回复你们的呀

微信小程序：用户微信登录流程（附：流程图+源码）相关推荐

微信小程序之授权登录（附完整源码）
个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wec ...
python 自动化微信小程序_干货 | 微信小程序自动化测试最佳实践（附 Python 源码）...
原标题:干货 | 微信小程序自动化测试最佳实践(附 Python 源码) 本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善, ...
微信小程序 python 渲染_干货 | 微信小程序自动化测试最佳实践（附 Python 源码）...
本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版,进阶学习文末加群! 随着微信小程序的功能和生态日益完善,很多公司的产品业务形态逐渐从 App 延升到微信小程序. ...
微信小程序自动化测试最佳实践（附 Python 源码）
随着微信小程序的功能和生态日益完善,很多公司的产品业务形态逐渐从 App 延升到微信小程序.微信公众号等.小程序项目页面越来越多,业务逻辑也越来越复杂,全手工测试已无法满足快速增长的业务需求. 然而, ...
微信小程序python自动化测试_干货 | 微信小程序自动化测试最佳实践（附 Python 源码）...
本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善,很多公司的产品业务形态逐渐从 App 延升到微信小程序.微信公众号等.小程 ...
微信小程序获取手机号登录流程
微信小程序获取手机号登录流程首先前端使用wx.login 获取code wx.login({success(res) {if (res.code) {that.setData({code: res. ...
微信小程序获取手机号登录流程(个人开发者账号不支持)
微信小程序获取手机号登录流程所需条件 1. 非个人开发者账号 2. AppID+AppSecret 流程思路 **注意:** 代码实现常见问题所需条件 1. 非个人开发者账号获取手机号文档这 ...
微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
基于微信小程序的springboot客运汽车票购票系统源码和论文
在客运公司工作 7 年之余,对客运管理的难度深有感触.特别是在春运期间购票难依旧是长途汽车订票的一大难题.长途汽车和火车的订票管理虽然有差异,但大体上是相同的.长途汽车在售票的过程中需要对旅客的起 ...
微信小程序：笑话与趣图框架源码下载
这是一款以笑话和趣味图为主的一款微信小程序源码或者也可以说是一个框架吧里面的内容是内置在小程序里面的,所以说是一款框架也可以因为内置的内容,所以内容数量有限! 大家可以用来养账号,或者有能力的二 ...

微信小程序：用户微信登录流程（附：流程图+源码）

目录

前言

一、微信小程序是什么？

二、业务流程

1、使用微信小程序登录的wx.login()方法

2、后端使用登录凭证换取session_key和openid

3、前端处理session_key、openid和token

尾言

前言

一、微信小程序是什么？

二、业务流程

1.使用微信小程序登录的wx.login()方法

2.后端使用登录凭证换取session_key和openid

3、前端处理session_key、openid和token

尾言：

微信小程序：用户微信登录流程（附：流程图+源码）相关推荐

最新文章

热门文章