• <web>
    • 简介
    • 属性
    • 事件
    • Vue 示例
    • Rax 示例

    <web>

    简介

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

    web - 图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>不支持list，scroller，slider组件同向嵌套滚动模式，会导致滚动冲突；
    • <web> 不支持任何嵌套的子组件；
    • <web> 必须指定 width 和 height 的样式属性，否则将不起作用；
    • 您可以使用 webview module来控制 <web>；
    • <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>

    Vue 示例

    • 体验示例

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

    Rax 示例

    rax-embed 是 <web> 组件的上层封装，抹平了 Web 和 Weex 的展现

    1. import { createElement, render, Component } from 'rax';
    2. import Driver from 'driver-universal';
    3. import Embed from 'rax-embed';
    5. function App() {
    6.   const urlParam = {
    7.       paramOne:123,
    8.      paramTwo:456
    9.   };
    10.   return <Embed urlParam={urlParam} src={'http://taobao.com'} 
    11.   useIframeInWeb={true} style={{ height: 750, width: 750 }} />
    12. }
    14. render(<App />, document.body, { driver: Driver });

    rax-embed 文档