After the applet supports webview, many h5 pages we have developed can be used directly in the applet. For example, we can develop a set of WeChat mall, article details page, and product details page, and use it in multiple places. Let's talk about it today. Implement the WeChat payment function in the webview of the applet. Because WeChat does not allow WeChat payment to be directly invoked in the webview of the applet. So our lesson will involve the interaction between applets and webviews.
principle
Let’s talk about the implementation principle first. The implementation principle is that we implement the order function in the h5 page of the webview, and then click the payment button. When we click the payment button, we will jump to the applet page and pass the order number, total order amount, and Go to the applet, and then use the order number and order amount in the applet to set up WeChat payment, realize the payment, and there will be a callback when the payment succeeds or fails. We then pass the corresponding callback to the webview to refresh the order and payment status in the webview.
1. Define webview to display h5 pages
Regarding the use of webview, I will not explain it. The official document is very clear and easy to use. https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
webview is very simple, it uses a webview component to display our webpage.
Second, define the h5 page
I start a local server here to display a simple h5 page.
The picture above is what I displayed in the browser.
Next, we display this page in the webview of the applet, which is also very simple, just define our src as our local web page link.
There is one thing to note here
Because we are a local link, we need to check this item in the developer tools.
Third, look at the h5 page code
<!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="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>The h5 code will not be explained in detail here, but simply explained. When we click the payment button, we use the current timestamp as the order number (because the order number must be unique), and then pass an order amount (unit points). For the sake of saving, let’s pass 1 cent, and the cost is for ourselves The money, distressed. . . .
Let me talk about the key points
1. You must introduce jweixin to realize the h5 jump applet.
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
2. How to jump to the Mini Program page
This should be consistent with the page of your applet. payDataStr is the parameter we carry
4. Mini Program Payment Page
Take a look at our mini program payment page
The function of the mini program payment page is very simple, it is to receive the order number and order amount passed by our h5. Then go to adjust WeChat payment to realize the payment. There are corresponding callbacks for payment success and payment failure.
Payment The payment realized by our practical small program cloud development here, the core code is only 10 lines. Since payment is not the focus of this section, no specific explanation will be given here.
Next, post the complete code of receiving parameters and payment of the applet for everyone
The comments in the code are very clear. There is one point here, that is, after we pay successfully, we need to tell h5 that our payment is successful, and notify h5 to refresh the order or payment status. So far, we have completely realized the display of the h5 page in the webview of the applet, and achieved the interaction between the h5 and the applet, and realized the payment function of the webview of the applet.