微信小程序面试题之实践篇

本文内容，来源于印客学院的分享，这里只做引用。

• 说说微信小程序的登录流程？
  • 场景
  • 流程
  • 扩展
• 说说微信小程序的支付流程?
  • 场景
  • 流程
  • 结束

说说微信小程序的登录流程？

场景

传统的web 开发实现登陆功能-般的做法是 输入账号密码 、或者输入手机号及短信验证码进行登录

服务端校验用户信息通过之后，下发一个代表登录态的token 给客户端，以便进行后续的交互,每当token 过期，用户都需要重新登录

而在微信小程序中，可以通过 微信官方提供的登录能力 方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系，从而实现登录功能

实现小程序用户体系主要涉及到 openid 和 code 的概念:

• 调用 wx.login() 方法会生成 code ，将 code 作为参数传递给微信服务器指定接口，就可以获取用户的 openid

对于每个小程序，微信都会将用户的微信 ID 映射出一个小程序 openid ，作为这个 用户在这个小程序的唯一标识

流程

微信小程序登陆具体实现的逻辑如下图所示：

• 通过 wx.login()获取到用户的code判断用户是否授权读取用户信息，调用 wx.getUserlnfo 读取用户数据

• 由于小程序后台授权域名无法授权微信的域名，所以需要自身后端调用微信服务器获取用户信息

• 通过 wx.request()方法请求业务方服务器，后端把 appid,appsecret 和 code 一起发送到微信服务器。appid 和 appsecret 都是微信提供的，可以在管理员后台找到

• 微信服务器返回了 openid 及本次登录的会话密钥 session_key

• 后端从数据库中查找 openid ，如果没有查到记录，说明该用户没有注册，如果有记录，则继续往下走

• session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输

• 然后生成 session并返回给小程序

• 小程序把 session 存到 storage 里面下次请求时，先从 storage 里面读取，然后带给服务端

• 服务端对比 session 对应的记录，然后校验有效期

更加详细的功能图如下所示 :

扩展

实际业务中， 我们还需要登录态是否过期

通常的做法是在登录态(临时令牌)中保存有效期数据

该有效期数据应该在服务端校验登录态时和约定的时间 (如服务端本地的系统时间或时间服务器上的标准时间) 做对比

这种方法需要将本地存储的登录态发送到小程序的服务端， 服务端判断为无效登录态时再返回需重新执行登录过程的消息给小程

另—种方式可以通过调用 wx.checkSession 检查微信登陆态是否过期：

• 如果过期 ，则发起完整的登录流程
• 如果不过期 ，则继续使用本地保存的自定义登录态

这种方式的好处是不需要小程序服务端来参与校验 ， 而是在小程序端调用AP ， 流程如下所示：

说说微信小程序的支付流程?

场景

微信小程序为电商类小程序，提供了非常完善、优秀、安全的支付功能

在小程序内可调用微信的 API完成支付功能，方便、快捷场景

如下图所示

• 用户通过分享或扫描二维码进入商户小程序，用户选择购买，完成选购流程
• 调起微信支付控件，用户开始输入支付密码
• 密码验证通过，支付成功。商户后台得到支付成功的通知
• 返回商户小程序，显示购买成功
• 微信支付公众号下发支付凭证

流程

以电商小程序为例

支付流程图如下所示 :

具体的做法:

• 打开某小程序，点击直接下单

• wx.login获取用户临时登录凭证code，发送到后端服务器换取openld

• 在下单时，小程序需要将购买的商品ld，商品数量，以及用户的openld传送到服务器

• 服务器在接收到商品ld、商品数量、openld后，生成服务期订单数据，同时经过一定的签名算法,向微信支付发送请求，获取 *预付单信息 *(prepay_id)，同时将获取的数据再次进行相应规则的签名向小程序端响应必要的信息

• 小程序端在获取对应的参数后，调用 wx.requestPayment() 发起微信支付，唤醒支付工作台，进行支

• 接下来的一些列操作都是由用户来操作的包括了微信支付密码，指纹等验证，确认支付之后执行鉴权调起支付

• 鉴权调起支付:在微信后台进行鉴权，微信后台直接返回给前端支付的结果，前端收到返回数据后对支付结果进行展示

• 推送支付结果:微信后台在给前端返回支付的结果后，也会向后台也返回一个支付结果，后台通过这个支付结果来更新订单的状态

其中后端响应数据必要的信息则是 wx.requestPayment 方法所需要的参数，大致如下

参数表如下所示:

结束

小程序支付和以往的网页、APP微信支付大同小异

可以说小程序的支付变得更加简洁，不需要设置支付目录、域名授权等操作