小程序支持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很簡單，就是用一個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="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是我們攜帶的參數
四，小程序支付頁
來看下我們的小程序支付頁
小程序支付頁功能很簡單，就是來接收我們h5傳過訂單號和訂單金額。然後去調起微信支付，實現支付。支付成功和支付失敗都有對應的回調。
支付我們這裏實用的小程序雲開發來實現的支付，核心代碼只有10行。由於支付不是本節的重點，所以這裏不做具體講解。感興趣的同學可以去看我寫的文章和我錄的視頻
小程序支付文章：https://www.jianshu.com/p/2b391df055a9
小程序支付視頻：https://edu.csdn.net/course/play/25701/310742
下面把小程序接收參數和支付的完整代碼貼出來給大家
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)
}
})
}
})
代碼裏註釋很清楚，這裏有一點，就是我們支付成功後，需要告訴h5我們支付成功了，通知h5去刷新訂單或者支付狀態。
到這裏我們就完整的實現了小程序webview展示h5頁面，並且做到了h5和小程序的交互，實現了小程序webview的支付功能。
是不是很簡單呢。
