微信小程序webview組件交互,內聯h5頁面并網頁實現微信支付實現解析

2019-11-19 11:01:45

字體：大中小

來源：轉載

供稿：網友

前言

小程序支持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跳轉小程序。

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

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的支付功能。
是不是很簡單呢。

源碼地址

https://github.com/qiushi123/xiaochengxu_demos