webview调用小程序支付流程

最近在做一个叫资源树的小型商城项目,其中有一个场景需要在小程序中嵌入的web-view内向小程序发起支付请求完成支付,折腾了一天,在网上各种经验的帮助下总算搞定了,现在记录一下流程

环境&技术栈

采用前后端分离的开发模式

接口请求协议:https+http(https为了兼顾小程序)

后端:lnmp

前端:vue-cli+element-ui开发的spa(路由模式为history)

小程序:pages/index/index.js(默认入口文件,用于获取openid并跳转),webview页面(嵌套了spa),wxpay页面(发起小程序支付),webvieworders页面(支付成功后跳转)

步骤

1. index.js在onload里使用wx.login获取到code参数,并携带该参数向后台服务器请求openid
2. 携带后台返回的openid通过小程序路由跳转至webview页面，webview页面的js在onload里通过options参数获取到携带的openid后通过webview发送至spa应用中
3. spa入口接收到openid后保存至cookie
4. 在支付页面获取该openid并向后台(调用微信统一下单接口并返回后续wxpayment方法所需参数的地址)发起请求，拿到服务器返回的jsParameters后携带该参数通过小程序提供的wx.miniProgram.navigateTo方法跳转回小程序支付页面(逻辑自己写)，支付页面接收到该参数后解析成js对象并在请求小程序支付方法中携带该参数
5. 处理支付成功或失败逻辑即可

已完成初步测试以及小程序上线

博客原文