支付寶小程序開放組件 web-view·H5頁面承載

版本要求：支付寶客戶端 10.1.35 或更高版本。

針對小程序不能外跳 H5 頁面，提供 web-view 頁面承載組件將 H5 嵌套進小程序，實現(xiàn)在小程序內(nèi)打開 H5 頁面。小程序跳轉(zhuǎn)相關內(nèi)容請參見 小程序跳轉(zhuǎn) FAQ，調(diào)試頁面訪問受限解決方法請參見 web-view 調(diào)試報錯頁面訪問受限處理方法，開發(fā)過程中遇到的問題可參考 web-view 常見問題，涵蓋了web-view 與 H5 、web-view 頁面設計相關、開放能力等方面。

每個頁面只能有一個 web-view ，請不要渲染多個 web-view ，會自動鋪滿整個頁面，并覆蓋其它組件。

注意：

• 不支持個人小程序使用，僅支持企業(yè)小程序。
• 不支持添加阿里域名（天貓、淘寶等）到白名單。
• 不支持多個頁面 web-view 間通訊。不支持橫屏以及全屏展示。
• 不支持 pushWindow。
• 不支持嵌套授權邏輯。web-view 跳到 H5 的白名單鏈接如需嵌套第三方的 iframe，可以把嵌入的三方 url 也添加進h5域名白名單。
• 支持 web-view 的 postMessage 傳遞多個參數(shù)。
• URL 傳參中除 ASCLL 字母、數(shù)字、~!* ()'以外的字符（如中文字符），請使用 encodeURIComponent() 函數(shù)進行編碼，及使用 decodeURIComponent() 函數(shù)進行解碼。
• 調(diào)試請以真機效果為準。

前提條件：

在使用該組件之前，請確保 H5 頁面中所有的域名地址（含靜態(tài)資源地址，例如圖片、.js 文件地址等）已經(jīng)加入到 web-view 的 H5 域名白名單內(nèi)。如未添加，請參見 配置 H5 域名 進行添加。

注意：如果已提交版本再添加的 H5 域名，需要重新提交版本審核上架。否則仍然提示頁面受限。

掃碼體驗

效果示例

示例代碼

<!-- API-DEMO page/component/webview/webview.axml -->
<view class="page">
  <web-view src="https://render.alipay.com/p/s/web-view/index" rel="external nofollow"  onMessage="onmessage"></web-view>
</view>
// API-DEMO page/component/webview/webview.js
Page({
  data: {},
   onShareAppMessage(options) {
    my.alert({content:JSON.stringify(options.webViewUrl)});
    return {
      title: '分享 web-View 組件',
      desc: 'View 組件很通用',
      path: 'page/component/component-pages/webview/baidu',
      'web-view': options.webViewUrl,
    };
  },
  onmessage(e){
    my.alert({
      content: '拿到數(shù)據(jù)'+JSON.stringify(e), // alert 框的標題
    });
  }
});

屬性

可用 API

web-view 載入的 H5 頁面可以使用手動引入 https://appx/web-view.min.js（此鏈接僅支持在支付寶客戶端內(nèi)訪問），提供了相關的 API 供您使用（調(diào)試請以真機效果為準）。 說明：如需嵌入 H5 頁面請使用表格中支持的 API，表格中如不支持請調(diào)用原生 js。

示例代碼

web-view H5 頁面代碼：

<script type="text/javascript" src="https://appx/web-view.min.js" rel="external nofollow"  rel="external nofollow" ></script>
<!-- 如該 H5 頁面需要同時在非支付寶客戶端內(nèi)使用，為避免該請求404，可參考以下寫法 -->
<!-- 請盡量在 html 頭部執(zhí)行以下腳本 -->
<script>
  if (navigator.userAgent.indexOf('AlipayClient') > -1) {
    document.writeln('<script src="https://appx/web-view.min.js" rel="external nofollow"  rel="external nofollow" ' + '>' + '<' + '/' + 'script>');
  }
</script>


<script>
  my.navigateTo({url: '../get-user-info/get-user-info'});
  // 網(wǎng)頁向小程序 postMessage 消息
  my.postMessage({name:"測試web-view"});
  // 接收來自小程序的消息。
  my.onMessage = function(e) {
    console.log(e); // {'sendToWebView': '1'}
  }
  // 判斷是否運行在小程序環(huán)境里
  my.getEnv(function(res) {
    console.log(res.miniprogram) // true
  });
  my.startShare();
</script>

my.postMessage 信息發(fā)送后，小程序頁面接收信息時，會執(zhí)行 onMessage 配置的方法：

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

用戶分享時可獲取當前 web-view 的 URL ，即在 onShareAppMessage 回調(diào)中返回 webViewUrl 參數(shù)。

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