使用web-view組件內嵌H5網頁並實現與小程式雙向通訊及API調用-移動開發平台 mPaaS-阿里雲

web-view 組件用於承載 H5 網頁，自動鋪滿整個小程式頁面。每個頁面只能有一個 web-view，請不要渲染多個web-view，會自動鋪滿整個頁面，並覆蓋其它組件。

說明

基礎庫 1.6.0 開始支援，低版本需做相容處理，操作參見小程式基礎庫說明。

屬性名稱	類型	預設值	描述
src	String	無	web-view 要渲染的 H5 網頁 URL。
onMessage	EventHandle	無	網頁向小程式 postMessage 訊息。`e.detail = { data }`

程式碼範例

<!-- axml -->
<!-- 指向支付寶首頁的 web-view -->
<web-view src="https://ds.alipay.com/" onMessage="test"></web-view>

相關 API

web-view H5 頁面可以使用手動引入 https://appx/web-view.min.js（此連結僅支援在 mPaaS 用戶端內訪問）, 提供了相關的介面返回小程式頁面。支援的介面有：

介面類別	介面名	說明
導覽列	my.navigateTo	保留當前頁面，跳轉到應用內的某個指定頁面。
導覽列	my.navigateBack	關閉當前頁面，返回上一級或多級頁面。
導覽列	my.switchTab	跳轉到指定 tabBar 頁面，並關閉其他所有非 tabBar 頁面。
導覽列	my.reLaunch	關閉當前所有頁面，跳轉到應用內的某個指定頁面。
導覽列	my.redirectTo	關閉當前頁面，跳轉到應用內的某個指定頁面。
圖片	my.chooseImage	拍照或從手機相簿中選擇圖片。
圖片	my.previewImage	預覽圖片。
互動反饋	my.alert	alert 警告框。
互動反饋	my.showLoading	顯示載入提示。
互動反饋	my.hideLoading	隱藏載入提示。
緩衝	my.setStorage	將資料存放區在本機快取中指定的 key 中，會覆蓋掉原來該 key 對應的資料。
緩衝	my.getStorage	擷取快取資料。
緩衝	my.removeStorage	刪除快取資料。
緩衝	my.clearStorage	清除本機資料緩衝。
緩衝	my.getStorageInfo	非同步擷取當前 storage 的相關資訊。
網路狀態	my.getNetworkType	擷取當前網路狀態。
向小程式發送訊息	my.postMessage	向小程式發送訊息，自訂一組或多組 key、value 資料，格式為 JSON，如：`my.postMessage({name:"測試 web-view"})`。
監聽小程式發過來的訊息	my.onMessage	監聽小程式發過來的訊息， webview 組件控制。
擷取當前環境	my.getEnv	擷取當前環境。

程式碼範例

web-view H5 頁面：

  <!-- html -->
  <script type="text/javascript" src="https://appx/web-view.min.js"></script>
  // 如該 H5 頁面需要同時在非 mPaaS 用戶端內使用，為避免該請求 404，可參考以下寫法
  // 請盡量在 html 頭部執行以下指令碼
  <script>
    if (navigator.userAgent.indexOf('AlipayClient') > -1 || navigator.userAgent.indexOf('mPaaSClient') > -1) {
      document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
    }

  // javascript
  my.navigateTo({url: '../get-user-info/get-user-info'});

  // 網頁向小程式 postMessage 訊息
  my.postMessage({name:"測試 web-view"});

  // 接收來自小程式的訊息。
  my.onMessage = function(e) {
    console.log(e); //{'sendToWebView': '1'}
  }

  // 判斷是否運行在小程式環境裡
  my.getEnv(function(res) {
    console.log(res.miniprogram) // true
  });

  my.startShare();

  </script>

my.postMessage 資訊發送後，小程式頁面接收資訊時，會執行 onMessage 配置的方法：

  // 小程式頁面對應的 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'});
    },
  )};

my.getEnv 範例程式碼：

  // 判斷是否運行在小程式環境裡
  my.getEnv(function(res){
      console.log(res.miniprogram); //true
  });

使用者分享時可擷取當前 web-view 的 URL，即在 onShareAppMessage 回調中返回 webViewUrl 參數。

  Page({
    onShareAppMessage(options) {
      console.log(options.webViewUrl)
    }
  });

常見問題

H5 怎麼傳遞資訊給小程式？

請使用 my.postMessage 介面來傳遞資料，程式碼範例如下：

my.postMessage({key1:"value1",key2:"value2"});

小程式如何傳遞資訊給 H5？

web-view 目前已支援了雙向通訊能力，更多細節參見 webview 組件控制一節。

webview 裡如何返回小程式？

web-view H5 頁面可以使用手動引入 https://appx/web-view.min.js（此連結僅支援在 mPaaS 用戶端內訪問），再調用 my.navigateTo 介面即可。

使用了小程式的 chooseImage 介面，如何在 H5 裡進行圖片上傳？

可將擷取到的圖片路徑通過 my.postMessage() 將相關資料傳遞給小程式後進行上傳。