小程序開發實戰案例五 | 小程序如何嵌入H5頁面詳情 - 支付寶,小程序,webview 鹽焗代碼蝦博客

在接入小程序過程中會遇到需要將 H5 頁面集成到小程序中情況，今天我們就來聊一聊怎麼把 H5 頁面塞到小程序中。

本篇文章將會從下面這幾個方面來介紹：

小程序承載頁面的前期準備
小程序如何承載 H5
小程序和 H5 頁面如何通訊
小程序和 H5 頁面的相互跳轉

小程序承載頁面的前期準備

首先介紹下我們在用小程序承載頁面之前需要做些什麼。

第一步當然就是 先有一個 H5 地址 啦，支付寶這邊對 H5 地址的要求如下：

僅支持 https 開頭的地址
不支持 IP 地址及端口號
不支持重定向頁面

第二步就是要 將H5 頁面地址配置到支付寶的白名單 裏面，這一步必不可少的；如果不配置的話，後面在訪問小程序的時候會遇到頁面訪問受限的報錯，詳見 👉[web-view頁面訪問受限]

具體步驟可以參考[配置 H5 域名]，下面我簡單寫一下：

登陸小程序詳情界面 -> 找到 開發設置 -> H5 域名配置 -> 點擊添加

按照上面的匹配規則提示進行操作
- 1、下載校驗文件
- 2、把下載下來的校驗文件放到 H5 地址域名的根目錄下面
- 3、在域名地址裏輸入 H5 地址
- 4、點擊圖片中的 點擊這裏 進行校驗
- 5、校驗通過之後就可以添加了

小程序如何承載 H5

前期準備完成後，我們就可以在小程序中去嵌入 H5 頁面了，嵌入的步驟非常簡單，需要用到的組件是 web-view ，在 web-view 組件的 src 屬性中傳入 H5 的頁面地址，就可以在小程序裏面訪問 H5 頁面了，代碼示例如下：

<view class="page">
  <web-view
    src="https://render.alipay.com/p/s/web-view/index"
  ></web-view>
</view>

web-view 組件在使用過程中需要注意：

每個小程序界面只能設置一個 web-view ，也就是隻能設置一個 H5 頁面
web-view 組件會自動鋪滿整個頁面
個人類型的小程序不支持使用這個組件

另外，如果有小夥伴沒有完成前面配置 H5 域名步驟的話，也沒有關係；在調試階段，我們可以在小程序開發工具上選擇忽略 web-view 域名合法性檢查，這樣就不會有報錯的情況了。詳細操作步驟參考👉[小程序如何忽略域名校驗]

‼️ 劃重點：每次 H5 域名配置完成之後，都需要重新上線一個版本，版本上線之後，新配置的才會生效。

小程序和 H5 頁面如何通訊

小程序承載 H5 頁面後只是第一步，我們在實現部分功能上更多會遇到的就是如何實現數據在小程序和 H5 頁面之間進行傳輸，此時就要用到 onMessage 屬性和 postMessag 方法了。

注意： 小程序和 H5 數據傳輸是需要 H5 先發消息給小程序，小程序接收到消息後再發消息給 H5。

H5 端方法代碼如下：

需要注意在 H5 頁面使用 my.postMessage 和 my.onMessage 方法時必須要引入 https://appx/web-view.min.js （此鏈接僅支持在支付寶客户端內訪問）

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>webview與小程序通信</title>
  </head>

  <body>
    <button onclick="send()">發送</button>
    <button onclick="isminiapp()">判斷是否在小程序內</button>
    <button onclick="onmessage()">開始監聽小程序發送的消息</button>
    <button onclick="getminiappid()">我要調用小程序獲取APPID的API</button>
    <!-- h5 log 工具方便在小程序內查看h5的log-->
    <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
    <script>
      eruda.init();
    </script>
    
    <!--引入https://appx/web-view.min.js， 如該 H5 頁面需要同時在非支付寶客户端內使用，為避免該請求404，可參考以下寫法 -->
    <script>
      if (navigator.userAgent.indexOf('AlipayClient') > -1) {
        document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
      }
    </script>
    <script>
      //發送消息
      function send() {
        my.postMessage({
          name: "h5發送測試web-view"
        });
      }
      //監聽小程序發給H5頁面的消息
      function onmessage() {
        my.onMessage = function (e) {
          console.log(e);
        }
      }
      //判斷是否在小程序內
      function isminiapp() {
        my.getEnv(function (res) {
          console.log(res.miniprogram) // true  
        });
      }
      //H5內通過通信獲取APPID（先給小程序發送消息，表示H5內需要APPID）
      function getminiappid() {
        my.postMessage({
          name: "getappid"
        });
      }
    </script>
  </body>

</html>

小程序端接收方法：

<!-- .axml -->
<view>
  <web-view id="web-view-1" src="..." onMessage="test"></web-view>
</view>

// 小程序頁面對應的 page.js 聲明 test 方法，
// 由於 page.axml 裏的 web-view 組件設置了 onMessage="test",
// 當頁面裏執行完 my.postMessage 後，test 方法會被執行
Page({
  onLoad(e){
    this.webViewContext = my.createWebViewContext('web-view-1');    
  },
  test(e){
    my.alert({
      content:JSON.stringify(e.detail),
    });  
    this.webViewContext.postMessage({'sendToWebView': '1'});
  },
});

小程序和 H5 頁面的相互跳轉

瞭解完通訊之後，我們再來看看另外一個功能，即小程序和 H5 頁面怎麼相互跳轉。

小程序和 H5 頁面跳轉分為兩種情況，分別是：

從 A 小程序的 a 頁面（ H5 承載頁面）跳轉到 A 小程序的 b 頁面
從 A 小程序的 a 頁面（ H5 承載頁面）跳轉到 B 小程序的 b 頁面

同一個小程序頁面跳轉

這種情況跳轉比較簡單，只要在 H5 頁面裏面引入 https://appx/web-view.min.js 後，直接使用my.navigateTo 或者是 my.redirectTo 進行跳轉就可以了。

代碼如下：

<script type="text/javascript" src="https://appx/web-view.min.js"></script>
<!-- 如該 H5 頁面需要同時在非支付寶客户端內使用，為避免該請求404，可參考以下寫法 -->
<!-- 請儘量在 html 頭部執行以下腳本 -->
<script>
  if (navigator.userAgent.indexOf('AliApp') > -1) {
    document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
  }
</script>
<script>
  my.navigateTo({url: '../get-user-info/get-user-info'});
</script>

不同小程序頁面跳轉

不同小程序頁面的跳轉邏輯是這樣的：H5 頁面告訴 A 小程序説我要跳轉 B 小程序啦，A 小程序接到指令後執行跳轉到 B 小程序的命令。

代碼如下：

H5 頁面代碼

<script type="text/javascript" src="https://appx/web-view.min.js"></script>
<!-- 如該 H5 頁面需要同時在非支付寶客户端內使用，為避免該請求404，可參考以下寫法 -->
<!-- 請儘量在 html 頭部執行以下腳本 -->
<script>
  if (navigator.userAgent.indexOf('AliApp') > -1) {
    document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
  }
</script>
<script>
  // 網頁向小程序 postMessage 消息
  my.postMessage({name:"跳轉B小程序"});
  // 接收來自小程序的消息。
  my.onMessage = function(e) {
    console.log(e); // {'sendToWebView': '1'}
  }
  // 判斷是否運行在小程序環境裏
  my.getEnv(function(res) {
    console.log(res.miniprogram) // true
  });
  my.startShare();
</script>

小程序代碼：

<!-- .axml -->
<view class="page">
  <web-view
      id="web-view-1"
    src="https://render.alipay.com/p/s/web-view/index"
    onMessage="test"
  ></web-view>
</view>

// 小程序頁面對應的 page.js 聲明 test 方法，
// 由於 page.axml 裏的 web-view 組件設置了 onMessage="test",
// 當頁面裏執行完 my.postMessage 後，test 方法會被執行
Page({
  onLoad(e) {
    this.webViewContext = my.createWebViewContext('web-view-1');
  },
  test(e) {
    my.navigateToMiniProgram({
      appId: 'B小程序的appid', 
      path: 'pages/index/index?p=1&q=2',
      query: {
        a: 'foo',
        b: 'bar',
      },
      success: function (res) {
        console.log(res);
      },
      fail: function (err) {
        console.log(err);
      }
    });
    this.webViewContext.postMessage({ sendToWebView: '1' });
  },
});