<web>

简介

<web> 用于在 WEEX 页面中显示由 src 属性指定的网页内容。

&lt;web&gt; - 图1

<web> 可以使 H5 与 Native 元素相结合。

  • 如图1：您可以整个页面铺满 Web 页面（快速兼容您之前的 H5 页面）
  • 如图2：可以使用 Web 和其他 Weex 组件合成复杂页面
  • 如图3：使用 Web 组合出多种效果（设置透明背景的 H5 页面，灵活配置各类 H5 活动资讯）
  1. <template>
  2.   <web src="https://www.taobao.com/"></web>
  3. </template>
  4. <script></script>
  6. <style></style>

::: warning 注意

  • <web> 不支持任何嵌套的子组件。
  • <web> 必须指定 width 和 height 的样式属性，否则将不起作用。
  • 您可以使用 webview module来控制 <web>。 :::

属性

  • src [必选]

要加载的网页内容的 URL。建议指定线上真实存在的 URL 地址。

事件

支持 appear 和 disappear 事件同时支持：

  • pagestart 会在 Web 页面开始加载时调用。

    事件对象：

    • url: {String} 当前 Web 页面的 URL。

  • pagefinish 会在 Web 页面完成加载时调用。

    事件对象：

    • url: {String} 当前 Web 页面的 URL。
    • canGoBack: {Boolean} 当前 Web 页面是否可以回退。
    • canGoForward: {Boolean} 当前 Web 页面是否可以前进。
    • title: {String} 当前 Web 页面的标题（仅限 iOS 平台）。

  • error 会在 Web 页面加载失败时调用。

  • receivedtitle 会在 Web 页面的标题发生改变时调用（仅限 Android 平台）。

  1. <template>
  2.   <div class="wrapper">
  3.     <web @pagestart="onPageStart" @pagefinish="onPageFinish" @error="onError" src="https://www.taobao.com/"></web>
  4.   </div>
  5. </template>
  6. <script>
  7.   module.exports = {
  8.     methods: {
  9.       onPageStart: function(e) {
  10.          // page start load
  11.       },
  12.       onPageFinish: function(e) {
  13.          // page finish load
  14.       },
  15.       onError: function(e) {
  16.          // page load error
  17.       }
  18.     }
  19.   }
  20. </script>
  22. <style></style>

示例

上述示例监听了 pagestart、pagefinish 及 error 事件，同时使用了 webview module 提供的 API。