⼩程序webview组件交互，内联h5页⾯并⽹页实现⽀付实现解析
前⾔
⼩程序⽀持webview以后，我们开发的好多h5页⾯，就可以直接在⼩程序⾥使⽤了，⽐如我们开发的商城，⽂章详情页，商品详情页，就可以开发⼀套，多处使⽤了。我们今天来讲⼀讲。在⼩程序的webview⾥实现⽀付功能。因为不允许在⼩程序的webview⾥直接调起⽀付。所以我们这节课就要涉及到⼩程序和webview的交互了。
⽼规矩先看效果。
因为这⾥涉及的东西⽐较多，录gif太多，没法上传，我就录制了⼀段视频出来。
原理
先说下实现原理吧，实现原理就是我们在webview的h5页⾯⾥实现下单功能，然后点击⽀付按钮，我们点击⽀付按钮的时候会跳转到⼩程序页⾯，把订单号，订单总⾦额，传递到⼩程序⾥，然后⼩程序⾥使⽤订单号和订单⾦额去调起⽀付，实现付款，付款成功或者失败时都会有回调。我们再把对应的回调传递给webview，刷新webview⾥的订单和⽀付状态。
⼀，定义webview显⽰h5页⾯
关于webview的使⽤，我就不做讲解了，官⽅⽂档⾥写的很清楚，⽤起来也很简单。
webview很简单，就是⽤⼀个webview组件，显⽰我们的⽹页。
⼆，定义h5页⾯
我这⾥启动⼀个本地服务器，⽤来展⽰⼀个简单的h5页⾯。
上图是我在浏览器⾥显⽰的效果。
接下来我们在⼩程序的webview⾥显⽰这个页⾯，也很简单，只需要把我们的src定义为我们的本地⽹页链接就可以了。
这⾥有⼀点需要注意
因为我们是本地链接，我们需要到开发者⼯具⾥把这⼀项给勾选。
三，来看下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" onclick="jumpPay()">点击⽀付</a>
<script type="text/javascript" src="res.wx.qq/open/js/jweixin-1.3.2.js"></script>
<script>
console.log(location.href);
let payOk = getQueryVariable("payOk");
console.log("payOk", payOk)
if(payOk){//⽀付成功
}else{
}
//获取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 = w();//这⾥⽤当前时间戳做订单号（后⾯使⽤你⾃⼰真实的订单号）
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分钱吧，花的是⾃⼰的钱，⼼疼。。。。
关键点说⼀下
1，必须引⼊jweixin，才可以实现h5跳转⼩程序。
<script type="text/javascript" src="res.wx.qq/open/js/jweixin-1.3.2.js"></script>
2，跳转到⼩程序页⾯的⽅法
const url = `../wePay/wePay?payDataStr=${payDataStr}`;
wx.miniProgram.navigateTo({
url: url
});
这⾥要和你⼩程序的页⾯保持⼀致。payDataStr是我们携带的参数
四，⼩程序⽀付页
来看下我们的⼩程序⽀付页
⼩程序⽀付页功能很简单，就是来接收我们h5传过订单号和订单⾦额。然后去调起⽀付，实现⽀付。⽀付成功和⽀付失败都有对应的回调。
⽀付我们这⾥实⽤的⼩程序云开发来实现的⽀付，核⼼代码只有10⾏。由于⽀付不是本节的重点，所以这⾥不做具体讲解。感
兴趣的同学可以去看我写的⽂章和我录的视频
下⾯把⼩程序接收参数和⽀付的完整代码贴出来给⼤家
Page({
//h5传过来的参数
onLoad: function(options) {
console.log("webview传过来的参数", options)
//字符串转对象
let payData = JSON.parse(options.payDataStr)
console.log("orderId", derId)
let that = this;
wx.cloud.callFunction({
name: "pay",
data: {
orderId: derId,
money:
},
success(res) {
console.log("获取成功", res)
},
fail(err) {写文章的小程序
console.log("获取失败", err)
}
})
},
//⽀付
goPay(payData) {
timeStamp: payData.timeStamp,
nonceStr: Str,
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)
}
})
}
})
代码⾥注释很清楚，这⾥有⼀点，就是我们⽀付成功后，需要告诉h5我们⽀付成功了，通知h5去刷新订单或者⽀付状态。
到这⾥我们就完整的实现了⼩程序webview展⽰h5页⾯，并且做到了h5和⼩程序的交互，实现了⼩程序webview的⽀付功能。是不是很简单呢。
源码地址
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。