dom doc

GitBox Fri, 28 Dec 2018 23:12:37 -0800

zshshr closed pull request #287: * [doc] Update 
meta/stream/websocker/refresh/loading/dom doc
URL: https://github.com/apache/incubator-weex-site/pull/287


This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:

As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):

diff --git a/docs/docs/components/loading.md b/docs/docs/components/loading.md
index 93e33ba43..d45d44bb0 100644
--- a/docs/docs/components/loading.md
+++ b/docs/docs/components/loading.md
@@ -2,39 +2,34 @@
 
 ### <span class="weex-version">v0.6.1+</span>
 
+::: warning
 The `<loading>` Component provide a pullup to loading function for some 
special containers, its usage and attributes are similar to the `<refresh>` 
Component.
 > **Note：** To be rendered properly, the `<loading>` Component must appear 
 > inside the special Component such as 
 > `<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>`.
+:::
 
- - Example:
-
-```
-<list>
-  ...
-  ...
+```vue{5}
+<scroller>
+  <div v-for="num in lists">
+    <text>{{num}}</text>
+  </div>
   <loading>
-    ...
+    <text>Loading</text>
   </loading>
-</list>
+</scroller>
 ```
 
- - Complete example goes 
[here](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
-
 ## Child Components
 
  - Any other components, like the `<text>` and `<image>` components, can be 
put inside the loading component.
 
  - `<loading-indicator>`: This is a dedicated component which provides a 
default loading animation effect, can only be used inside the `<refresh>` or 
the `<loading>` components.
 
- - Example:
-
-```
-<loading>
-  <text>Loading</text>
-  <loading-indicator></loading-indicator>
-  ...
-</loading>
-```
- - Complete example goes 
[here](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
+ ```vue{3}
+ <loading>
+   <text>Loading</text>
+   <loading-indicator></loading-indicator>
+ </loading>
+ ```
 
 ## Attributes
 
@@ -52,33 +47,6 @@ The `<loading>` Component provide a pullup to loading 
function for some special
 
 > **Note：** The visibility of `<loading>` component can be controlled by 
 > display attribute with the value show and hide. A `display="show"` should 
 > always be paired with a `display="hide"` statement.
 
- - Example:
-
-```
-<template>
-  <list>
-    ...
-    ...
-    <loading @loading="onloading" :display="loadinging ? 'show' : 'hide'">
-      ...
-    </loading>
-    ...
-  </list>
-</template>
-
-<script>
-  ...
-  methods: {
-    onloading (event) {
-      this.loadinging = true
-      setTimeout(() => {
-        this.loadinging = false
-      }, 2000)
-    },
-  }
-</script>
-```
- - Complete example goes 
[here](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
 
 ## Styles
 
@@ -90,8 +58,12 @@ The `<loading>` Component provide a pullup to loading 
function for some special
 
  - Triggered when the scroller or list is pulled up.
 
- - Complete example goes 
[here](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
-
+ ```vue
+ <loading @loading="onloading" :display="loadinging ? 'show' : 'hide'">
+   <text>Loading ...</text>
+   <loading-indicator></loading-indicator>
+ </loading>
+ ```
 
 ## Example
 
diff --git a/docs/docs/components/refresh.md b/docs/docs/components/refresh.md
index 1a93600a4..ca37c508f 100644
--- a/docs/docs/components/refresh.md
+++ b/docs/docs/components/refresh.md
@@ -2,38 +2,35 @@
 
 ### <span class="weex-version">v0.6.1+</span>
 
+::: warning
 The `<refresh>` Component provide a pulldown-refresh function for some special 
containers, its usage and attributes are similar to the `<loading>` Component.
-> **Note：** To be rendered properly, the `<refresh>` Component must appear 
inside the special Component such as 
`<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>`.
 
- - Example:
+To be rendered properly, the `<refresh>` Component must appear inside the 
special Component such as 
`<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>`.
+:::
 
-```
-<list>
+```vue{2}
+<scroller>
   <refresh>
-    ...
+    <text>Refreshing...</text>
   </refresh>
-  ...
-</list>
+  <div v-for="num in lists">
+    <text>{{num}}</text>
+  </div>
+</scroller>
 ```
 
- - Complete example goes 
[here](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
-
 ## Child Components
 
  - Any other components, like the `<text>` and `<image>` components, can be 
put inside the refresh component.
 
  - `<loading-indicator>`: This is a dedicated component which provides a 
default refresh animation effect, can only be used inside the `<refresh>` or 
the `<loading>` components.
 
- - Example:
-
-```
+```vue{2}
 <refresh>
   <text>Refreshing</text>
   <loading-indicator></loading-indicator>
-  ...
 </refresh>
 ```
- - Complete example goes 
[here](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
 
 ## Attributes
 
@@ -51,32 +48,6 @@ The `<refresh>` Component provide a pulldown-refresh 
function for some special c
 
 > **Note：** The visibility of `<refresh>` component can be controlled by 
 > display attribute with the value show and hide. A `display="show"` should 
 > always be paired with a `display="hide"` statement.
 
- - Example:
-
-```
-<template>
-  <list>
-    <refresh @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
-      ...
-    </refresh>
-    ...
-  </list>
-</template>
-
-<script>
-  ...
-  methods: {
-    onrefresh (event) {
-      this.refreshing = true
-      setTimeout(() => {
-        this.refreshing = false
-      }, 2000)
-    },
-  }
-</script>
-```
- - Complete example goes 
[here](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
-
 ## Styles
 
  - Please check out the [common styles](/wiki/common-styles.html)
@@ -96,34 +67,12 @@ The `<refresh>` Component provide a pulldown-refresh 
function for some special c
   - `viewHeight` : The height of refreshView
   - `type` : "pullingdown" constant string type for this event
 
-
- - Example:
-
-```
-<scroller>
-  <refresh @refresh="onrefresh" @pullingdown="onpullingdown">
-    ...
+```vue{2}
+  <refresh @refresh="onrefresh" @pullingdown="onpullingdown" 
:display="refreshing ? 'show' : 'hide'">
+    <text>Refreshing ...</text>
+    <loading-indicator></loading-indicator>
   </refresh>
-  ...
-</scroller>
-
-<script>
-  export default {
-    methods: {
-      onrefresh (event) {
-        ...
-      },
-      onpullingdown (event) {
-        console.log("dy: " + event.dy)
-        console.log("pullingDistance: " + event.pullingDistance)
-        console.log("viewHeight: " + event.viewHeight)
-        console.log("type: " + type)
-      }
-    }
-  }
-</script>
 ```
- - Complete example goes 
[here](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
 
 
 
diff --git a/docs/docs/modules/dom.md b/docs/docs/modules/dom.md
index d4f1a32ea..e1cbf56b4 100644
--- a/docs/docs/modules/dom.md
+++ b/docs/docs/modules/dom.md
@@ -6,7 +6,9 @@ The `dom` module is used to manipulate the components in weex 
pages.
 
 You can use these APIs to get a component's bounding rect in the page, or 
scroll a list to some specific component, or add a font-face rule to the page 
and so on.
 
-> **Note:** The `addRule` method is currently used only with font-face 
supportability.
+::: warning
+The `addRule` method is currently used only with font-face supportability.
+:::
 
 ## API
 
@@ -14,7 +16,9 @@ You can use these APIs to get a component's bounding rect in 
the page, or scroll
 
 Scroll the scrollable component to the referenced component. This API should 
only be used in the children components of a scrollable component, such as in a 
`<scroller>` or `<list>` component.
 
-> **NOTE:** You can use `weex.requireModule('dom')` to requrie the dom module, 
and use `weex.requireModule('dom').scrollToElement` to call this API.
+::: warning
+You can use `weex.requireModule('dom')` to requrie the dom module, and use 
`weex.requireModule('dom').scrollToElement` to call this API.
+:::
 
 #### Arguments
 
@@ -27,7 +31,7 @@ Scroll the scrollable component to the referenced component. 
This API should onl
 
 [Scroll To Floor](http://dotwe.org/vue/56e0d256cbb26facd958dbd6424f42b2)
 
-### getComponentRect(ref, callback) <span class="api-version">v0.9.4+</span>
+### getComponentRect(ref, callback) <Badge text="0.9.4+" type="warn" 
vertical="middle"/>
 
 `support: >=0.9.4`
 
@@ -56,9 +60,28 @@ If you want to get the bounding rect of outside viewport of 
the weex container,
 [get box's rect](http://dotwe.org/vue/d69ec16302e06300096c7285baef538a)
 
 
-### addRule(type, contentObject) <span class="api-version">v0.12.0+</span>
+### getLayoutDirection(ref, callback) <Badge text="0.20.0+" type="warn" 
vertical="middle"/>
 
-`support: >=0.12.0`
+You can get the layout direction the referenced component using this API.
+
+An example callback result should be like:
+
+```json
+{
+  "result": "rtl",
+}
+```
+
+#### Example
+
+```javascript
+const element = this.$refs['kkk'][0];
+dom.getLayoutDirection(element, function(ret) {
+  console.log(ret.result);
+});
+```
+
+### addRule(type, contentObject) <Badge text="0.12.0+" type="warn" 
vertical="middle"/>
 
 Weex provide the ability of loading custom through **DOM.addRule**. Developers 
can load *iconfont* and *custom font* by specifying the **font-family**.
 
@@ -76,17 +99,20 @@ The parameter of **Add Rule** is illustrated as following:
 * **fontFamily** You should provide the name of your font-family there, the 
valid name should be a string.
 * **src** The src of your custom font, and url('') is reserved for protocol 
reason, the supported parameters are listed below:
     * **http**. Read from http, e.g. 
`url('http://at.alicdn.com/t/font_1469606063_76593.ttf')`
-    * **https**. Read from https, e.g. 
`url('https://at.alicdn.com/t/font_1469606063_76593.ttf')` 
+    * **https**. Read from https, e.g. 
`url('https://at.alicdn.com/t/font_1469606063_76593.ttf')`
     * **local**, *Android ONLY*. Read from assets directory e.g. 
`url('local://foo.ttf')`, the **foo.ttf** is in your android assets directory.
-    * **file**. Read from a local file, e.g. 
`url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')`
 
+    * **file**. Read from a local file, e.g. 
`url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')`
     * **data**. Read from a base64 data source, e.g. 
`url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')`, 
the above data field is only a part of the actual data.
 
 #### Note
-> **Note:** You can name `fontFamily` in `addRule` as you wish in your page, 
any string is OK. But this is not the real font-family name of the font file. 
The real name or system name for the font is stored in binrary data of ttf 
file. You must ensure that the real font-family name of font file is unique. Or 
your font may not be successfully registered to device and your text may 
display as a '?'.
 
-> **Note:** Specially, if you are using http://www.iconfont.cn/ to build your 
iconfont. Make sure that you set a unique enough font-family name for your font 
in project settings.
+::: warning
+You can name `fontFamily` in `addRule` as you wish in your page, any string is 
OK. But this is not the real font-family name of the font file. The real name 
or system name for the font is stored in binrary data of ttf file. You must 
ensure that the real font-family name of font file is unique. Or your font may 
not be successfully registered to device and your text may display as a '?'.
+
+Specially, if you are using http://www.iconfont.cn/ to build your iconfont. 
Make sure that you set a unique enough font-family name for your font in 
project settings.
 
-> **Note:** Calling `addRule` in `beforeCreate` is recommended.
+Calling `addRule` in `beforeCreate` is recommended.
+:::
 
 #### Example
 Check the custom font 
[example](http://dotwe.org/vue/7e328ee2ac9b7205c9ee37f4e509263d).
diff --git a/docs/docs/modules/meta.md b/docs/docs/modules/meta.md
index e75f6b0a7..8ed02eeb0 100644
--- a/docs/docs/modules/meta.md
+++ b/docs/docs/modules/meta.md
@@ -26,9 +26,11 @@ it is only in the rendering of the components will be 
implemented The correspond
 
 Referance: W3C Spec [CSS Device 
Adaptation](https://drafts.csswg.org/css-device-adapt/#viewport-meta).
 
-+ `options`: viewport configuration
-  + `width`: Number or `"device-width"` or `"device-height"`.
-  + `height`: Number or `"device-width"` or `"device-height"`.
+  |key|Description|
+  |---|---|
+  |options.width|Number or `"device-width"` or `"device-height"`|
+  |options.height|Number or `"device-width"` or `"device-height"`|
+  |options.roundOffDeviation <Badge text="0.20.0+" type="warn" 
vertical="middle"/>|Boolean, The default value is true, which means that the 
layout engine ignores the error caused by the decimal point in the layout; if 
there is a gap in the component splicing, you can set the `roundOffDeviation` 
to false, and the layout engine will automatically fill in the decimal point 
error.|
 
 The default unit of the width and height is `px`, other units are not 
supported.
 
@@ -44,7 +46,8 @@ const meta = weex.requireModule('meta')
 
 // The width of the viewport is set to 640px
 meta.setViewport({
-  width: 640
+  width: 640,
+  roundOffDeviation: false
 })
 
 App.el = '#root'
diff --git a/docs/docs/modules/stream.md b/docs/docs/modules/stream.md
index 0f8ccda74..74b3af9d1 100644
--- a/docs/docs/modules/stream.md
+++ b/docs/docs/modules/stream.md
@@ -30,6 +30,13 @@ Start a network request, use two callbacks to receive 
server's response data.
 
     * body(string): the HTTP body.
 
+::: warning
+- The `body` parameter only supports arguments of type `string`. Do not use 
the `JSON` format directly, you must convert it to a string.
+- The `GET` request does not support arguments as `body`. Please use the URL 
to set the parameters.
+- The default value of `Content-Type` is `application/x-www-form-urlencoded`.
+- If you need to send data in `JSON` format via POST, you need to set 
`Content-Type` to `application/json`.
+:::
+
 * callback(function): A callback function whose argument is the response 
object of the request. Callback function will receive a `response` object.
 
     * status(number): response status code.
@@ -61,4 +68,11 @@ Start a network request, use two callbacks to receive 
server's response data.
 
 ### Example
 
-[stream demo](http://dotwe.org/vue/e182a9fbbeb6f0763cd1df1baddf1e10)
+- [Simple Demo](http://dotwe.org/vue/80b21a0fce98acdffad96c57b2eadd1d)
+- [Post Demo](http://dotwe.org/vue/6dd65122144d9ad26594c0f900c75cd4)
+
+  <IPhoneImg 
imgSrc="https://img.alicdn.com/tfs/TB1UWA7n4TpK1RjSZFGXXcHqFXa-750-1334.gif"; />
+
+- [Get Demo](http://dotwe.org/vue/892bd1c977b61762baca8e02a65b6d97)
+
+  <IPhoneImg 
imgSrc="https://img.alicdn.com/tfs/TB1.Bg6nZbpK1RjSZFyXXX_qFXa-750-1334.gif"; />
diff --git a/docs/docs/modules/websockets.md b/docs/docs/modules/websockets.md
index 4b08a8419..e191cf02b 100644
--- a/docs/docs/modules/websockets.md
+++ b/docs/docs/modules/websockets.md
@@ -13,11 +13,12 @@ version: 2.1
 
 WebSockets is an advanced technology that makes it possible to open an 
interactive communication session between the user's H5/iOS/android and a 
server. With this API, you can send messages to a server and receive 
event-driven responses without having to poll the server for a reply
 
-## **Notes:**
+::: warning
 - iOS and h5 provide  webSocket default handle. if you use webSocket in 
android environment . you should provide custom adapter implementation,source:
   - 
[DefaultWebSocketAdapter.java](https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapter.java);
   - 
[DefaultWebSocketAdapterFactory.java](https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapterFactory.java);
   - refer:  [weex 
playground](https://github.com/apache/incubator-weex/tree/master/android/playground)
+:::
 
 ## API
 ### `WebSocket(url, protocol)`
@@ -29,6 +30,12 @@ create websocket
 - `url {string}`:The URL to which to connect;
 - `protocol {string}`:the websocket protocol
 
+```js
+const ws = weex.requireModule('webSocket');
+
+ws.WebSocket('ws://echo.websocket.org','');
+```
+
 ### `send(data)`
 
 Transmits data to the server over the WebSocket connection
@@ -37,6 +44,13 @@ Transmits data to the server over the WebSocket connection
 
 - `data {string}`:A text string to send to the server.
 
+```js
+const ws = weex.requireModule('webSocket');
+ws.WebSocket('ws://echo.websocket.org','');
+
+ws.send('some message.');
+```
+
 ### `close(code,reason)`
 
 Closes the WebSocket connection or connection attempt, if any. If the 
connection is already CLOSED, this method does nothing.
@@ -46,6 +60,13 @@ Closes the WebSocket connection or connection attempt, if 
any. If the connection
 - `code {number}`: the status code explaining why the connection is being 
closed.
 - `reason {string}`:a string explaining why the connection is closing
 
+```js
+const ws = weex.requireModule('webSocket');
+ws.WebSocket('ws://echo.websocket.org','');
+
+ws.close();
+```
+
 ### `onopen(options)`
 
 An event listener to be called when the WebSocket connection's readyState 
changes to OPEN; this indicates that the connection is ready to send and 
receive data.
@@ -54,6 +75,15 @@ An event listener to be called when the WebSocket 
connection's readyState change
 
 - `options {object}`:an empty object
 
+```js
+const ws = weex.requireModule('webSocket')
+ws.WebSocket('ws://echo.websocket.org','');
+
+ws.onopen = function(event) {
+  console.log('onopen', event);
+}
+```
+
 ### `onmessage(options)`
 
 An event listener to be called when a message is received from the server
@@ -63,6 +93,15 @@ An event listener to be called when a message is received 
from the server
 - `options {object}`:the server message options
   - `data {string}`: The listener received message
 
+  ```js
+  const ws = weex.requireModule('webSocket')
+  ws.WebSocket('ws://echo.websocket.org','');
+
+  ws.onmessage = function(event) {
+    console.log('onmessage', event);
+  }
+  ```
+
 ### `onclose(options)`
 
 An event listener to be called when the WebSocket connection's readyState 
changes to CLOSED
@@ -74,6 +113,15 @@ An event listener to be called when the WebSocket 
connection's readyState change
   - `reason {string}`: Returns a string indicating the reason the server 
closed the connection
   - `wasClean {boolen}`: Returns a Boolean that Indicates whether or not the 
connection was cleanly closed.
 
+  ```js
+  const ws = weex.requireModule('webSocket')
+  ws.WebSocket('ws://echo.websocket.org','');
+
+  ws.onclose = function(event) {
+    console.log('onclose', event);
+  }
+  ```
+
 ### `onerror(options)`
 
 An event listener to be called when an error occurs.
@@ -83,137 +131,18 @@ An event listener to be called when an error occurs.
 - `options {object}`:the error event
   - `data {string}`: The listener received error data
 
-### Example
+  ```js
+  const ws = weex.requireModule('webSocket')
+  ws.WebSocket('ws://echo.websocket.org','');
 
-```html
-<template>
-  <scroller>
-    <div>
-      <div style="background-color: #286090">
-        <text class="title" style="height: 80px ;padding: 20px;color: 
white">websocket</text>
-      </div>
-      <input type="text" placeholder="please input message to send" 
class="input" autofocus="false" value="" @change="onchange" @input="oninput" 
ref="input"/>
-      <div style="flex-direction: row; justify-content: center;">
-        <text class="button" @click="connect">connect</text>
-        <text class="button" @click="send">send</text>
-        <text class="button" @click="close">close</text>
-      </div>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = send</text>
-      </div>
-      <text style="color: black;height: 80px">{{sendinfo}}</text>
-
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = onopen</text>
-      </div>
-      <text style="color: black;height: 80px">{{onopeninfo}}</text>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = onmessage</text>
-      </div>
-      <text style="color: black;height: 400px">{{onmessage}}</text>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = onclose</text>
-      </div>
-      <text style="color: black;height: 80px">{{oncloseinfo}}</text>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = onerror</text>
-      </div>
-      <text style="color: black;height: 80px">{{onerrorinfo}}</text>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = close</text>
-      </div>
-      <text style="color: black;height: 80px">{{closeinfo}}</text>
-
-    </div>
-
-  </scroller>
-</template>
-
-<style scoped>
-  .input {
-    font-size: 40px;
-    height: 80px;
-    width: 600px;
+  ws.onerror = function(event) {
+    console.log('onerror', event);
   }
-  .button {
-    font-size: 36px;
-    width: 150px;
-    color: #41B883;
-    text-align: center;
-    padding-top: 25px;
-    padding-bottom: 25px;
-    border-width: 2px;
-    border-style: solid;
-    margin-right: 20px;
-    border-color: rgb(162, 217, 192);
-    background-color: rgba(162, 217, 192, 0.2);
-  }
-</style>
-
-
-<script>
-  var websocket = weex.requireModule('webSocket')
-  export default {
-    data () {
-      return {
-        connectinfo: '',
-        sendinfo: '',
-        onopeninfo: '',
-        onmessage: '',
-        oncloseinfo: '',
-        onerrorinfo: '',
-        closeinfo: '',
-        txtInput:'',
-        navBarHeight: 88,
-        title: 'Navigator',
-        dir: 'examples',
-        baseURL: ''
-      }
-    },
-    methods: {
-      connect:function() {
-        websocket.WebSocket('ws://echo.websocket.org','');
-        var self = this;
-        self.onopeninfo = 'connecting...'
-        websocket.onopen = function(e)
-        {
-          self.onopeninfo = 'websocket open';
-        }
-        websocket.onmessage = function(e)
-        {
-          self.onmessage = e.data;
-        }
-        websocket.onerror = function(e)
-        {
-          self.onerrorinfo = e.data;
-        }
-        websocket.onclose = function(e)
-        {
-          self.onopeninfo = '';
-          self.onerrorinfo = e.code;
-        }
-      },
-      send:function(e) {
-        var input = this.$refs.input;
-        input.blur();
-        websocket.send(this.txtInput);
-        this.sendinfo = this.txtInput;
-      },
-      oninput: function(event) {
-        this.txtInput = event.value;
-      },
-      close:function(e) {
-        websocket.close();
-      },
-    },
-  }
-</script>
-```
+  ```
+
+### Example
+
+- [Demo](http://dotwe.org/vue/6b7d6dc14320e3f04e0f203cb8bcc703)
+- [Chat Demo](http://dotwe.org/vue/21d8b0a79c20e95139353d9cc8b634f5)
 
-[Have a try](http://dotwe.org/vue/6d8bdfe66f24fda1a2dc6158b0182573)
+  <IPhoneImg 
imgSrc="https://img.alicdn.com/tfs/TB11_g_n7voK1RjSZPfXXXPKFXa-264-439.gif"; />
diff --git a/docs/zh/docs/modules/dom.md b/docs/zh/docs/modules/dom.md
index d19f5fb9e..484b3bc6e 100644
--- a/docs/zh/docs/modules/dom.md
+++ b/docs/zh/docs/modules/dom.md
@@ -1,4 +1,4 @@
-# dom
+# Dom
 
 用于对 weex 页面里的组件节点进行一部分特定操作。
 
@@ -8,6 +8,8 @@
   获取某个组件的 bounding rect 布局信息
 - `addRule`
   添加 font-face rule
+- `getLayoutDirection`<Badge text="0.20.0+" type="warn" vertical="middle"/>
+  获取某个组件的布局方向（rtl、lrt、inherit）
 
 ## API
 
@@ -16,9 +18,8 @@
 让页面滚动到 ref 对应的组件
 
 ::: warning 注意
-
-- `这个 API 只能用于可滚动组件的子节点，例如 <scroller>，<list>, <waterfall> 等可滚动组件中`
-  :::
+ - `这个 API 只能用于可滚动组件的子节点，例如 <scroller>，<list>, <waterfall> 等可滚动组件中`
+:::
 
 * `ref`
   你要滚动到的那个节点
@@ -40,7 +41,7 @@ dom.scrollToElement(element, { offset: 0 });
 
 [滚动到某层](http://dotwe.org/vue/56e0d256cbb26facd958dbd6424f42b2)
 
-### getComponentRect(ref, callback)
+### getComponentRect(ref, callback) <Badge text="0.9.4+" type="warn" 
vertical="middle"/>
 
 - `ref`
   节点元素
@@ -84,7 +85,30 @@ dom.scrollToElement(element, { offset: 0 });
 
 :::
 
-### addRule(type, contentObject)
+### getLayoutDirection(ref, callback) <Badge text="0.20.0+" type="warn" 
vertical="middle"/>
+
+- `ref`
+  节点元素
+- `callback: function(ret){}`
+  回调，其中 `ret {object}` 格式如下:
+
+  ```json
+  // top, bottom, left, right 是相对于 `viewport` 的位置
+  {
+    "result": "rtl",
+  }
+  ```
+
+  调用示例：
+
+  ```javascript
+  const element = this.$refs['kkk'][0];
+  dom.getLayoutDirection(element, function(ret) {
+    console.log(ret.result);
+  });
+  ```
+
+### addRule(type, contentObject)  <Badge text="0.12.0+" type="warn" 
vertical="middle"/>
 
 `支持版本: >=0.12.0`
 Weex 提供  **DOM.addRule** 以加载自定义字体。开发者可以通过指定 **font-family**加载 *iconfont* 和 
*custom font*。
@@ -103,20 +127,18 @@ Weex 提供  **DOM.addRule** 以加载自定义字体。开发者可以通过指
 * **fontFamily** font-family的名称。
 * **src** 字体地址，url('') 是保留字段，其参数如下:
     * **http**. 从HTTP请求加载, e.g. 
`url('http://at.alicdn.com/t/font_1469606063_76593.ttf')`
-    * **https**. 从HTTPS请求加载, e.g. 
`url('https://at.alicdn.com/t/font_1469606063_76593.ttf')` 
+    * **https**. 从HTTPS请求加载, e.g. 
`url('https://at.alicdn.com/t/font_1469606063_76593.ttf')`
     * **local**, *Android ONLY*. 从assets目录读取, e.g. `url('local://foo.ttf')`,  
**foo.ttf** 是文件名在你的assets目录中.
-    * **file**. 从本地文件读取, e.g. 
`url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')`
 
+    * **file**. 从本地文件读取, e.g. 
`url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')`
     * **data**. 从base64读取, e.g. 
`url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')`, 
上述data字段不全。
 
-#### Note
-> **Note:** `addRule` 方法里的 `fontFamily` 
可以随意取。这个名字不是字体真正的名字。字体真正的名字（font-family），也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字（font-family）足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符被显示为‘?’。
-
-> **Note:** 如果你使用 http://www.iconfont.cn/ 来构建你的 iconfont。确保在项目设置中，设置一个特殊的 
font-family 名字。默认是 “iconfont”，但极大可能发生冲突。
+::: warning 注意
+`addRule` 方法里的 `fontFamily` 
可以随意取。这个名字不是字体真正的名字。字体真正的名字（font-family），也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字（font-family）足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符被显示为‘?’。
 
-> **Note:** 调用`addRule` 在 `beforeCreate` 中是被推荐的。
+如果你使用 http://www.iconfont.cn/ 来构建你的 iconfont。确保在项目设置中，设置一个特殊的 font-family 
名字。默认是 “iconfont”，但极大可能发生冲突。
 
-#### Example
-[示例](http://dotwe.org/vue/7e328ee2ac9b7205c9ee37f4e509263d)。
+调用`addRule` 在 `beforeCreate` 中是被推荐的。
+:::
 
 ## DEMO
 
diff --git a/docs/zh/docs/modules/meta.md b/docs/zh/docs/modules/meta.md
index 0f42edc34..f369ab2a3 100644
--- a/docs/zh/docs/modules/meta.md
+++ b/docs/zh/docs/modules/meta.md
@@ -18,6 +18,7 @@ Weex 容器默认的宽度 (viewport) 是 750px，通过 setViewport 方法可
 |---|---|
 |options.width|数值，或者 `"device-width"` 和 `"device-height"` 之一|
 |options.height|数值，或者 `"device-width"` 和 `"device-height"` 之一|
+|options.roundOffDeviation <Badge text="0.20.0+" type="warn" 
vertical="middle"/>|布尔值，默认值为true，表示layout引擎在布局时会忽略小数点导致的误差；若发现组件拼接处有缝隙，可以将 
`roundOffDeviation` 设置为false，此时layout引擎将自动填补小数点误差|
 
 宽度和高度的单位默认是 px，暂不支持其他单位。
 
@@ -33,7 +34,8 @@ const meta = weex.requireModule('meta');
 
 // 配置 viewport 的宽度为 640px
 meta.setViewport({
-  width: 640
+  width: 640,
+  roundOffDeviation: false
 });
 
 App.el = '#root';
diff --git a/docs/zh/docs/modules/stream.md b/docs/zh/docs/modules/stream.md
index af4c59e30..9e707d542 100644
--- a/docs/zh/docs/modules/stream.md
+++ b/docs/zh/docs/modules/stream.md
@@ -12,15 +12,17 @@
 
 ##### options {Object}
 
-请求的配置选项，支持以下配置：
+* options {Object} 请求的配置选项，支持以下配置：
 
-| 属性        | 说明                | 类型   | 是否必选 |
-| ---------- | -------------      | -----  | ----- |
-| `method` | HTTP 请求方法，值为 `GET`/`POST`/`PUT`/`DELETE`/`PATCH`/`HEAD` | string 
| 必选 |
-| `url` | 请求的 URL | string | 必选 |
-| `headers` | HTTP 请求头 | Object | 可选 |
-| `type` | 响应类型：`json`，`text` 或是 `jsonp`(在 native 原生实现中其实与 `json` 相同) | string 
| 必选 |
-| `body` | HTTP 请求体 | string | 可选 |
+  * method(string): HTTP 请求方法，值为 `GET`/`POST`/`PUT`/`DELETE`/`PATCH`/`HEAD`
+
+  * url(string): 请求的 URL | string
+
+  * headers(string): HTTP 请求头
+
+  * type(string): 响应类型：`json`，`text` 或是 `jsonp`(在 native 原生实现中其实与 `json` 相同)
+
+  * body(string): HTTP 请求体
 
 ::: warning 注意
 - `body` 参数仅支持 `string` 类型的参数，请勿直接传递 `JSON`，必须先将其转为字符串。
@@ -57,10 +59,10 @@
 ## Demo
 
 - [HTTP method 示例](http://dotwe.org/vue/80b21a0fce98acdffad96c57b2eadd1d)
-- [创建文章](http://dotwe.org/vue/6dd65122144d9ad26594c0f900c75cd4)，常见应用场景，发送 POST 
请求。
+- [Post 示例](http://dotwe.org/vue/6dd65122144d9ad26594c0f900c75cd4)，常见应用场景，发送 
POST 请求。
 
   <IPhoneImg 
imgSrc="https://img.alicdn.com/tfs/TB1UWA7n4TpK1RjSZFGXXcHqFXa-750-1334.gif"; />
 
-- [热门动画列表](http://dotwe.org/vue/892bd1c977b61762baca8e02a65b6d97)，常见应用场景，通过 
GET 请求获取数据。
+- [Get 示例](http://dotwe.org/vue/892bd1c977b61762baca8e02a65b6d97)，常见应用场景，通过 
GET 请求获取数据。
 
-  <IPhoneImg 
imgSrc="https://img.alicdn.com/tfs/TB1.Bg6nZbpK1RjSZFyXXX_qFXa-750-1334.gif"; />
\ No newline at end of file
+  <IPhoneImg 
imgSrc="https://img.alicdn.com/tfs/TB1.Bg6nZbpK1RjSZFyXXX_qFXa-750-1334.gif"; />
diff --git a/docs/zh/docs/modules/websockets.md 
b/docs/zh/docs/modules/websockets.md
index 72e265f41..4ed32ff06 100644
--- a/docs/zh/docs/modules/websockets.md
+++ b/docs/zh/docs/modules/websockets.md
@@ -18,10 +18,8 @@ h5 提供 WebSockets 的 protocol 默认实现，iOS 和 Android 需要自定义
 
 #### 参数
 
-| 属性        | 说明                | 类型   | 是否必选 |
-| ---------- | -------------      | -----  | ----- |
-| `url` | 表示要连接的 URL | string | 必选 |
-| `protocol` | WebSockets 协议名字字符串 | string | 可选 |
+ - `url`(string): 表示要连接的 URL
+ - `protocol`(string): WebSockets 协议名字字符串
 
 ```js
 const ws = weex.requireModule('webSocket');
@@ -35,9 +33,7 @@ ws.WebSocket('ws://echo.websocket.org','');
 
 #### 参数
 
-| 属性        | 说明           | 类型   | 是否必选 |
-| ---------- | ------------- | -----  | ----- |
-| `data` | 要发送到服务器的数据 | string | 可选 |
+ - `data`(string): 要发送到服务器的数据
 
 ```js
 const ws = weex.requireModule('webSocket');
@@ -52,10 +48,8 @@ ws.send('some message.');
 
 #### 参数
 
-| 属性        | 说明           | 类型   | 是否必选 |
-| ---------- | ------------- | -----  | ----- |
-| `code` | 关闭连接的状态号 | number | 可选 |
-| `reason` | 关闭的原因 | string | 可选 |
+ - `code`(number):关闭连接的状态号
+ - `reason`(string): 关闭的原因
 
 ```js
 const ws = weex.requireModule('webSocket');
@@ -89,9 +83,7 @@ ws.onopen = function(event) {
 
 #### event 对象
 
-| 属性        | 说明           | 类型   |
-| ---------- | ------------- | -----  |
-| `data` | 监听器接收的到的消息 | string |
+ - `data`(string): 监听器接收的到的消息
 
 ```js
 const ws = weex.requireModule('webSocket')
@@ -108,11 +100,9 @@ ws.onmessage = function(event) {
 
 #### event 对象
 
-| 属性        | 说明           | 类型   |
-| ---------- | ------------- | -----  |
-| `code` | 服务器返回关闭的状态码 | number |
-| `reason` | 服务器返回的关闭原因 | string |
-| `wasClean` | 是否完全关闭 | boolen |
+ - `code`(number):服务器返回关闭的状态码
+ - `reason`(string):服务器返回的关闭原因
+ - `wasClean`(boolen): 是否完全关闭
 
 ```js
 const ws = weex.requireModule('webSocket')
@@ -123,15 +113,14 @@ ws.onclose = function(event) {
 }
 ```
 
+
 ### onerror
 
 一个用于 error 事件的事件监听器，当错误发生时触发。`onerror` 接受一个函数作为 EventListener，这个监听器会接受一个 
`type` 为 "error" 的事件对象。
 
 #### event 对象
 
-| 属性        | 说明           | 类型   |
-| ---------- | ------------- | -----  |
-| `data` | 监听器接收的到的消息 | string |
+ - `data`(string): 监听器接收的到的消息
 
 ```js
 const ws = weex.requireModule('webSocket')


 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
[email protected]


With regards,
Apache Git Services

[GitHub] zshshr closed pull request #287: * [doc] Update meta/stream/websocker/refresh/loading/dom doc

Reply via email to