小程序web-view网页调取小程序支付功能

apollo__

于 2021-01-25 16:52:33 发布

阅读量731

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/apollo__/article/details/113122529

版权

本文介绍如何在小程序的web-view中调用小程序自身的支付功能。通过在payment.html页面引入微信JSSDK，修改立即支付按钮代码，并在小程序端创建对应页面及配置JS文件，实现了web与小程序之间的支付交互。

摘要由CSDN通过智能技术生成

原理：利用JSSDK提供的wx.miniProgram.navigateTo接口传递小程序支付接口必要的参数，在小程序里调起支付

1.payment.html
(1)引入微信JSSDK

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

(2)修改立即支付按钮代码

<a id="btn_pay_submit" data-url="<{link app=b2c ctl=mobile_checkout act=dopayment args0=$order.order_id}>?pay=<{$order.pay_app}>">立即支付</a>

(3)JS

/**
 * 返回url参数
 * @param {String} key 想要获取的参数key
 * @param {String} url 网址链接
 * @returns {String} key对应的value，如果没有则返回null
 */
function getParam(key, url) {
    const spTxt = '?'
    const spIdx = url.indexOf(spTxt);

    if(spIdx == -1) return false;

    const paramStr = url.split(spTxt)[1];
    let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$