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. 处理支付成功或失败逻辑即可

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

博客原文

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏较真的前端

不可忽视的前端安全问题——XSS攻击

1865
来自专栏啸天"s blog

proxyee-dowm无封号风险的百度云高速下载器

2484
来自专栏BeJavaGod

SSO单点登录的发展由来以及实现原理

单点登录以及权限,在很早之前都有写过,不过都比较简单,今天就具体说一下,以及下一步要做的 1、web单系统应用 早期我们开发web应用都是所有的包放在一起打成一...

3834
来自专栏王亚昌的专栏

office系列文档的在线预览解决方案 - 在linux平台下转为pdf

office系列文档包括:.ppt .pptx .doc .docx .xls .xlsx 等常用格式。

2812
来自专栏FreeBuf

对一款不到2KB大小的JavaScript后门的深入分析

在一台被入侵的服务器上,我们发现了一个攻击者遗留下来的脚本。该脚本是由JavaScript编写的,主要功能是作为Windows后门及C&C后端使用。在这里我首先...

3504
来自专栏Laoqi's Linux运维专列

SubversionEdge部署研发团队文档管理

1374
来自专栏子勰随笔

iMac(OS X)不可或缺的套件管理器 —— Homebrew

1755
来自专栏FreeBuf

如何开始对Android应用的逆向分析?

本文是我的关于如何开始Android逆向系列文章的第一部分。在文末提供了一个文档,你可以根据该文档说明部署同我一样的实验环境。

933
来自专栏Flutter入门到实战

开发工具总结(3)之Git及GitHub快速入门图文全面详解

版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/3f12bd3ccf2a

1173
来自专栏工科狗和生物喵

《实时控制软件》Git相关操作从注册到Push全教程

此处,我们可以开始建立一个很方便的本地和远程的联系的仓库。 如果你是你是直接clone的老师的库。那么可以准备删除这个本地仓库(不是文件,是git的本地仓库,好...

3026

扫码关注云+社区

领取腾讯云代金券