微信小程序webview组件交互,内联h5页面并网页实现

日期：2020-11-15 栏目：程序人生浏览：次

小程序支持webview以后，我们开发的好多h5页面，就可以直接在小程序里使用了，比如我们开发的微信商城，文章详情页，商品详情页，就可以开发一套，多处使用了。我们今天来讲一讲。在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信支付。所以我们这节课就要涉及到小程序和webview的交互了。

老规矩先看效果。

因为这里涉及的东西比较多，录gif太多，没法上传，我就录制了一段视频出来。

https://v.qq.com/x/page/t0913iprnay.html

原理

先说下实现原理吧，实现原理就是我们在webview的h5页面里实现下单功能，然后点击支付按钮，我们点击支付按钮的时候会跳转到小程序页面，把订单号，订单总金额，传递到小程序里，然后小程序里使用订单号和订单金额去调起微信支付，实现付款，付款成功或者失败时都会有回调。我们再把对应的回调传递给webview，刷新webview里的订单和支付状态。

一，定义webview显示h5页面

关于webview的使用，我就不做讲解了，官方文档里写的很清楚，用起来也很简单。

https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

微信小程序webview组件交互,内联h5页面并网页实现

webview很简单，就是用一个webview组件，显示我们的网页。

二，定义h5页面

我这里启动一个本地服务器，用来展示一个简单的h5页面。

微信小程序webview组件交互,内联h5页面并网页实现

上图是我在浏览器里显示的效果。

接下来我们在小程序的webview里显示这个页面，也很简单，只需要把我们的src定义为我们的本地网页链接就可以了。

微信小程序webview组件交互,内联h5页面并网页实现

这里有一点需要注意

因为我们是本地链接，我们需要到开发者工具里把这一项给勾选。

微信小程序webview组件交互,内联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>点击支付</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分钱吧，花的是自己的钱，心疼。。。。

关键点说一下

1，必须引入jweixin，才可以实现h5跳转小程序。

2，跳转到小程序页面的方法

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

这里要和你小程序的页面保持一致。payDataStr是我们携带的参数

微信小程序webview组件交互,内联h5页面并网页实现