前言
小程序支持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>
新聞熱點
疑難解答
