小程序web-view网页实现微信支付

admin · 发表于 2024-5-26 12:56:16

web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。支持的接口有：

1、wx.miniProgram.navigateTo;
2、wx.miniProgram.navigateBack;
3、wx.miniProgram.switchTab;
4、wx.miniProgram.reLaunch;
5、wx.miniProgram.redirectTo;
6、wx.miniProgram.postMessage;
7、wx.miniProgram.getEnv;

复制代码

h5网页中的js代码示例：

// <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })

复制代码

小程序中使用webview组件很简单，如上图所示
这里使用本地服务器，用来展示简单的h5网页，如下图：

这是在浏览器中访问的页面展示

这是在小程序web-view组件中访问h5页面，需要注意的是本地开发注意在小程序中勾选不校验合法域名，不然需要先在小程序后台配置业务域名
H5页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小程序内嵌webview</title>
<style>
.btn {
font-size: 70px;
color: red;
}
</style>
</head>
<body>
<h1>我是webview里的h5页面</h1>
<a id="desc" class="btn">点击支付</a>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
console.log(location.href);
let payOk = getQueryVariable("payOk");
console.log("payOk", payOk)
if(payOk){//支付成功
document.getElementById('desc').innerText="支持成功"
document.getElementById('desc').style.color="green"
}else{
document.getElementById('desc').innerText="点击支付"
}
//获取url里携带的参数
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
function jumpPay() {
let orderId = Date.now();//这里用当前时间戳做订单号（后面使用你自己真实的订单号）
let money = 1;//订单总金额（单位分）
let payData = {orderId: orderId, money: money};
let payDataStr = JSON.stringify(payData);//因为要把参数传递给小程序，所以这里需要转为字符串
const url = `../wePay/wePay?payDataStr=${payDataStr}`;
wx.miniProgram.navigateTo({
url: url
});
// console.log("点击了去支付", url)
console.log("点击了去支付")
}
</script>
</body>
</html>

复制代码

上述h5代码暂时无啥可讲的，我们使用了当前的时间戳作为订单号，然后传入一个1分钱，将参数传递给小程序需要使用JSON.stringify将参数转为字符串。

该页面必须引入jweixin-1.3.2.js，否则无法使用网页跳转小程序，H5页面跳转小程序的方法如下：

const url = `../wePay/wePay?payDataStr=${payDataStr}`;
wx.miniProgram.navigateTo({
url: url
});

复制代码

这里要和小程序页面保持一致，payDataStr是我们要传入小程序的参数。

这是小程序页面中的支付目录
来看看小程序支付js文件代码：

这就是小程序中接受h5传参的js支付代码
小程序中获取到订单号，然后通过小程序端取得支付参数然后调用wx.requestPayment()方法，如下图：

这是在小程序中自定义了支付函数
小程序支付JS端完整代码如下：

Page({
//h5传过来的参数
onLoad: function(options) {
console.log("webview传过来的参数", options)
//字符串转对象
let payData = JSON.parse(options.payDataStr)
console.log("orderId", payData.orderId)
let that = this;
wx.cloud.callFunction({
name: "pay",
data: {
orderId: payData.orderId,
money: payData.money
},
success(res) {
console.log("获取成功", res)
that.goPay(res.result);
},
fail(err) {
console.log("获取失败", err)
}
})
},
//微信支付
goPay(payData) {
wx.requestPayment({
timeStamp: payData.timeStamp,
nonceStr: payData.nonceStr,
package: payData.package,
signType: 'MD5',
paySign: payData.paySign,
success(res) {
console.log("支付成功", res)
//你可以在这里支付成功以后，再跳会webview页，并把支付成功状态传回去
wx.navigateTo({
url: '../webview/webview?payOk=true',
})
},
fail(res) {
console.log("支付失败", res)
}
})
}
})

复制代码

源码地址：https://github.com/qiushi123/xiaochengxu_demos

小程序web-view网页实现微信支付

本帖子中包含更多资源