快捷導(dǎo)航

微信小程序webview組件交互,內(nèi)聯(lián)h5頁(yè)面并網(wǎng)頁(yè)實(shí)現(xiàn)微信支付實(shí)現(xiàn)解析

更新時(shí)間：2019年08月16日 11:45:27 作者：編程小石頭

這篇文章主要介紹了小程序webview組件交互,內(nèi)聯(lián)h5頁(yè)面并網(wǎng)頁(yè)實(shí)現(xiàn)微信支付實(shí)現(xiàn)解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

小程序支持webview以后，我們開(kāi)發(fā)的好多h5頁(yè)面，就可以直接在小程序里使用了，比如我們開(kāi)發(fā)的微信商城，文章詳情頁(yè)，商品詳情頁(yè)，就可以開(kāi)發(fā)一套，多處使用了。我們今天來(lái)講一講。在小程序的webview里實(shí)現(xiàn)微信支付功能。因?yàn)槲⑿挪辉试S在小程序的webview里直接調(diào)起微信支付。所以我們這節(jié)課就要涉及到小程序和webview的交互了。

老規(guī)矩先看效果。

因?yàn)檫@里涉及的東西比較多，錄gif太多，沒(méi)法上傳，我就錄制了一段視頻出來(lái)。

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

原理

先說(shuō)下實(shí)現(xiàn)原理吧，實(shí)現(xiàn)原理就是我們?cè)趙ebview的h5頁(yè)面里實(shí)現(xiàn)下單功能，然后點(diǎn)擊支付按鈕，我們點(diǎn)擊支付按鈕的時(shí)候會(huì)跳轉(zhuǎn)到小程序頁(yè)面，把訂單號(hào)，訂單總金額，傳遞到小程序里，然后小程序里使用訂單號(hào)和訂單金額去調(diào)起微信支付，實(shí)現(xiàn)付款，付款成功或者失敗時(shí)都會(huì)有回調(diào)。我們?cè)侔褜?duì)應(yīng)的回調(diào)傳遞給webview，刷新webview里的訂單和支付狀態(tài)。

一，定義webview顯示h5頁(yè)面

關(guān)于webview的使用，我就不做講解了，官方文檔里寫(xiě)的很清楚，用起來(lái)也很簡(jiǎn)單。

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

webview很簡(jiǎn)單，就是用一個(gè)webview組件，顯示我們的網(wǎng)頁(yè)。

二，定義h5頁(yè)面

我這里啟動(dòng)一個(gè)本地服務(wù)器，用來(lái)展示一個(gè)簡(jiǎn)單的h5頁(yè)面。

上圖是我在瀏覽器里顯示的效果。

接下來(lái)我們?cè)谛〕绦虻膚ebview里顯示這個(gè)頁(yè)面，也很簡(jiǎn)單，只需要把我們的src定義為我們的本地網(wǎng)頁(yè)鏈接就可以了。

這里有一點(diǎn)需要注意

因?yàn)槲覀兪潜镜劓溄樱覀冃枰介_(kāi)發(fā)者工具里把這一項(xiàng)給勾選。

三，來(lái)看下h5頁(yè)面代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>小程序內(nèi)嵌webview</title>
  <style>
    .btn {
      font-size: 70px;
      color: red;
    }
  </style>
</head>
<body>
<h1>我是webview里的h5頁(yè)面</h1>
<a id="desc" class="btn" onclick="jumpPay()">點(diǎn)擊支付</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="點(diǎn)擊支付"
  }
  //獲取url里攜帶的參數(shù)
  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();//這里用當(dāng)前時(shí)間戳做訂單號(hào)（后面使用你自己真實(shí)的訂單號(hào)）
    let money = 1;//訂單總金額（單位分）
    let payData = {orderId: orderId, money: money};

    let payDataStr = JSON.stringify(payData);//因?yàn)橐蓞?shù)傳遞給小程序，所以這里需要轉(zhuǎn)為字符串
    const url = `../wePay/wePay?payDataStr=${payDataStr}`;
    wx.miniProgram.navigateTo({
      url: url
    });
    // console.log("點(diǎn)擊了去支付", url)
    console.log("點(diǎn)擊了去支付")
  }
</script>
</body>
</html>

h5代碼這里不做具體講解，只簡(jiǎn)單說(shuō)下。我們就是在點(diǎn)擊支付按鈕時(shí)，用當(dāng)前時(shí)間戳做為訂單號(hào)（因?yàn)橛唵翁?hào)要保證唯一），然后傳一個(gè)訂單金額（單位分），這里節(jié)約起見(jiàn)，就傳1分錢吧，花的是自己的錢，心疼。。。。

關(guān)鍵點(diǎn)說(shuō)一下

1，必須引入jweixin，才可以實(shí)現(xiàn)h5跳轉(zhuǎn)小程序。

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

2，跳轉(zhuǎn)到小程序頁(yè)面的方法

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

這里要和你小程序的頁(yè)面保持一致。payDataStr是我們攜帶的參數(shù)

四，小程序支付頁(yè)

來(lái)看下我們的小程序支付頁(yè)

小程序支付頁(yè)功能很簡(jiǎn)單，就是來(lái)接收我們h5傳過(guò)訂單號(hào)和訂單金額。然后去調(diào)起微信支付，實(shí)現(xiàn)支付。支付成功和支付失敗都有對(duì)應(yīng)的回調(diào)。

支付我們這里實(shí)用的小程序云開(kāi)發(fā)來(lái)實(shí)現(xiàn)的支付，核心代碼只有10行。由于支付不是本節(jié)的重點(diǎn)，所以這里不做具體講解。感

興趣的同學(xué)可以去看我寫(xiě)的文章和我錄的視頻

小程序支付文章：https://www.jianshu.com/p/2b391df055a9

小程序支付視頻：https://edu.csdn.net/course/play/25701/310742

下面把小程序接收參數(shù)和支付的完整代碼貼出來(lái)給大家

Page({
 //h5傳過(guò)來(lái)的參數(shù)
 onLoad: function(options) {
  console.log("webview傳過(guò)來(lái)的參數(shù)", options)
  //字符串轉(zhuǎn)對(duì)象
  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)
    //你可以在這里支付成功以后，再跳會(huì)webview頁(yè)，并把支付成功狀態(tài)傳回去
    wx.navigateTo({
     url: '../webview/webview?payOk=true',
    })
   },
   fail(res) {
    console.log("支付失敗", res)
   }
  })
 }
})

代碼里注釋很清楚，這里有一點(diǎn)，就是我們支付成功后，需要告訴h5我們支付成功了，通知h5去刷新訂單或者支付狀態(tài)。

到這里我們就完整的實(shí)現(xiàn)了小程序webview展示h5頁(yè)面，并且做到了h5和小程序的交互，實(shí)現(xiàn)了小程序webview的支付功能。
是不是很簡(jiǎn)單呢。

源碼地址

https://github.com/qiushi123/xiaochengxu_demos