最近在做一个叫资源树的小型商城项目,其中有一个场景需要在小程序中嵌入的web-view内向小程序发起支付请求完成支付,折腾了一天,在网上各种经验的帮助下总算搞定了,现在记录一下流程
环境&技术栈
采用前后端分离的开发模式
接口请求协议:https http(https为了兼顾小程序)
后端:lnmp
前端:vue-cli element-ui开发的spa(路由模式为history)
小程序:pages/index/index.js(默认入口文件,用于获取openid并跳转),webview页面(嵌套了spa),wxpay页面(发起小程序支付),webvieworders页面(支付成功后跳转)
步骤
- index.js在onload里使用wx.login获取到code参数,并携带该参数向后台服务器请求openid
- 携带后台返回的openid通过小程序路由跳转至webview页面，webview页面的js在onload里通过options参数获取到携带的openid后通过webview发送至spa应用中
- spa入口接收到openid后保存至cookie
- 在支付页面获取该openid并向后台(调用微信统一下单接口并返回后续wxpayment方法所需参数的地址)发起请求，拿到服务器返回的jsParameters后携带该参数通过小程序提供的wx.miniProgram.navigateTo方法跳转回小程序支付页面(逻辑自己写)，支付页面接收到该参数后解析成js对象并在请求小程序支付方法中携带该参数
- 处理支付成功或失败逻辑即可
已完成初步测试以及小程序上线
博客原文
