[incubator-weex-site] branch draft updated: Update web.md

[zs...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

zshshr pushed a commit to branch draft
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git


The following commit(s) were added to refs/heads/draft by this push:
     new ceb90cf  Update web.md
ceb90cf is described below

commit ceb90cf7be466cc82dbeec6f7b1c09f987e7f9dd
Author: zshshr <zh...@gmail.com>
AuthorDate: Fri Dec 14 14:13:30 2018 +0800

    Update web.md
---
 docs/docs/components/web.md | 143 +++++++++++++++++++++++++-------------------
 1 file changed, 83 insertions(+), 60 deletions(-)

diff --git a/docs/docs/components/web.md b/docs/docs/components/web.md
index 0b14b64..b5d9457 100644
--- a/docs/docs/components/web.md
+++ b/docs/docs/components/web.md
@@ -1,85 +1,108 @@
+---
+title: <web>
+type: references
+group: Build-in Components
+order: 8.27
+version: 2.1
+---
 
-# &lt;web&gt;
+<span class="weex-version">v0.5+</span>
 
-`<web>` 用于在 WEEX 页面中显示由 src 属性指定的网页内容。
+`<web>` is used to display web content that specified by `src` attribute in weex page. You also can use `webview` module to control WebView behavior such as goBack, goForward and reload, See [webview module](../modules/webview.html) for more information.
 
-<div style="text-align: center"><img src="https://img.alicdn.com/tfs/TB161pxoiLaK1RjSZFxXXamPFXa-1465-758.png" width="850"></div>
+## Basic Usage
 
-`<web>` 可以使 H5 与 Native 元素相结合。
+> **Note:** `<web>` does not support any nested child components, and must specific `width` and `height` in style attribute, otherwise it won't work.
 
-* 如图1：您可以整个页面铺满 Web 页面（快速兼容您之前的 H5 页面）
-* 如图2：可以使用 Web 和其他 Weex 组件合成复杂页面
-* 如图3：使用 Web 组合出多种效果（设置透明背景的 H5 页面，灵活配置各类 H5 活动资讯）
+```html
+<web src="https://vuejs.org"></web>
+```
 
-```vue
-<template>
-  <web src="https://www.taobao.com/"></web>
-</template>
-<script></script>
+See the [example](http://dotwe.org/vue/81da1f0129dfc72e1666cfd4b90f20ae).
 
-<style></style>
-```
+## Attributes
 
-::: warning 注意
-* `<web>` 不支持任何嵌套的子组件。
-* `<web>` 必须指定 width 和 height 的样式属性，否则将不起作用。
-* 您可以使用 [webview module](/docs/webview.html)来控制 `<web>`。
-:::
+| Attribute | Type   | Value | Default Value |
+| --------- | ------ | ----- | ------------- |
+| `src`     | String | {URL} | -             |
 
-## 属性
+### `src`
 
-* **src** `[必选]`
+A URL value for web content to be loaded. You can specify a URL which is relative to bundle URL, it will be rewritten to the real resource URL (local or remote). See also: [Path](../../guide/advanced/path.html).
 
-要加载的网页内容的 URL。建议指定线上真实存在的 URL 地址。
+## Events
 
-## 事件
+Only support `appear` and `disappear` event in **[common events](../../wiki/common-events.html)**.
 
-支持 appear 和 disappear 事件同时支持：
+### pagestart
 
-* **pagestart** 会在 Web 页面开始加载时调用。
+`pagestart` event handler will be called when the web content is start loading.
 
-    事件对象：
-    - url: {String} 当前 Web 页面的 URL。
+**Event object**:
 
-* **pagefinish** 会在 Web 页面完成加载时调用。
+- `url`: {String} URL of current web content.
 
-    事件对象：
-    - url: {String} 当前 Web 页面的 URL。
-    - canGoBack: {Boolean} 当前 Web 页面是否可以回退。
-    - canGoForward: {Boolean} 当前 Web 页面是否可以前进。
-    - title: {String} 当前 Web 页面的标题（仅限 iOS 平台）。
+### pagefinish
 
-* **error** 会在 Web 页面加载失败时调用。
+`pagefinish` event handler will be called when the web content is loaded.
 
-* **receivedtitle** 会在 Web 页面的标题发生改变时调用（仅限 Android 平台）。
+**Event object**:
 
-```vue
-<template>
-  <div class="wrapper">
-    <web @pagestart="onPageStart" @pagefinish="onPageFinish" @error="onError" src="https://www.taobao.com/"></web>
-  </div>
-</template>
-<script>
-  module.exports = {
-    methods: {
-      onPageStart: function(e) {
-         // page start load
-      },
-      onPageFinish: function(e) {
-         // page finish load
-      },
-      onError: function(e) {
-         // page load error
-      }
-    }
-  }
-</script>
+- `url`: {String} URL of current web content.
+- `canGoBack`: {Boolean} Can current web content go back.
+- `canGoForward`: {Boolean} Can current web content go forward.
+- `title`: {String} Title of current web content (iOS platform only).
+
+### error
+
+`error` event handler will be called when the web content loaded failed.
+
+### receivedtitle
+
+`receivedtitle` event handler will be called when the title of web content had changed (Android platform only).
+
+**Event object**:
+
+- `url`: {String} URL of current web content.
 
-<style></style>
+### Handle `<web>` Events
+
+Bind events on `<web>`:
+
+```html
+<web @pagestart="onPageStart" @pagefinish="onPageFinish" @error="onError" src="https://vuejs.org"></web>
+```
+
+Add event handler:
+
+```js
+export default {
+  methods: {
+    onPageStart (event) {
+      // page start load
+    },
+    onPageFinish (event) {
+      // page finish load
+    },
+    onError (event) {
+      // page load error
+    },
+  }
+}
 ```
 
-## Demo
+See the [example](http://dotwe.org/vue/f9606de73fe386d554217371c4d60d03).
+
+## Styles
+
+Support **[common styles](../../wiki/common-styles.html)**.
+
+## Usage Notes
+
+- The `width` and `height` in the styles of `<web>` must be specified.
+- `<web>` can not have any nested child component.
+- You can use [webview module](../modules/webview.html) to control `<web>` component, see the [example](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939).
 
-* [体验示例](http://dotwe.org/vue/9f8a7be89a4ad881ff515145cc9306ea)
+## Examples
 
-上述示例监听了 pagestart、pagefinish 及 error 事件，同时使用了  [webview module](/docs/webview.html) 提供的 API。
\ No newline at end of file
+- [Browser example](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939)