You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ha...@apache.org on 2017/10/13 13:04:11 UTC
[16/51] [abbrv] incubator-weex-site git commit: rearrangement the
structure of the document
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/common-event.md
----------------------------------------------------------------------
diff --git a/source/cn/references/common-event.md b/source/cn/references/common-event.md
deleted file mode 100644
index fe0805f..0000000
--- a/source/cn/references/common-event.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: 通用事件
-type: references
-order: 5
-version: 2.1
-has_chapter_content: true
----
-
-# 通用事件
-
-Weex 提供了通过事件触发动作的能力，例如在用户点击组件时执行 JavaScript。下面列出了可被添加到 Weex 组件上以定义事件动作的属性：
-
-## `click`
-
-当组件上发生点击手势时被触发。
-
-**注意：**
-
-`<input>` 和 `<switch>` 组件目前不支持 `click` 事件，请使用 `change` 或 `input` 事件来代替。
-
-### 事件对象
-
-- `type`: `click`
-- `target`: 触发点击事件的目标组件
-- `timestamp`: 触发点击事件时的时间戳
-
-
-## `longpress`
-
-如果一个组件被绑定了 `longpress` 事件，那么当用户长按这个组件时，该事件将会被触发。
-
-**注意：**
-
-`<input>` 和 `<switch>` 组件目前不支持 `click` 事件，请使用 `change` 或 `input` 事件来代替。
-
-### 事件对象
-- `type` : `longpress`
-- `target` : 触发长按事件的目标组件
-- `timestamp` : 长按事件触发时的时间戳
-
-## Appear 事件
-
-如果一个位于某个可滚动区域内的组件被绑定了 `appear` 事件，那么当这个组件的状态变为在屏幕上可见时，该事件将被触发。
-
-### 事件对象
-
-- `type` : `appear`
-- `target` : 触发 Appear 事件的组件对象
-- `timestamp` : 事件被触发时的时间戳
-- `direction` : 触发事件时屏幕的滚动方向，`up` 或 `down`
-
-## Disappear 事件
-
-如果一个位于某个可滚动区域内的组件被绑定了 `disappear` 事件，那么当这个组件被滑出屏幕变为不可见状态时，该事件将被触发。
-
-### 事件对象
-
-- `type` : `disappear`
-- `target` : 触发 Disappear 事件的组件对象
-- `timestamp` : 事件被触发时的时间戳
-- `direction` : 触发事件时屏幕的滚动方向，`up` 或 `down`
-
-## Page 事件
-
-*注意：仅支持 iOS 和 Android，H5 暂不支持。*
-
-Weex 通过 `viewappear` 和 `viewdisappear` 事件提供了简单的页面状态管理能力。
-
-`viewappear` 事件会在页面就要显示或配置的任何页面动画被执行前触发，例如，当调用 `navigator` 模块的 `push` 方法时，该事件将会在打开新页面时被触发。`viewdisappear` 事件会在页面就要关闭时被触发。
-
-与组件的 `appear` 和 `disappear` 事件不同的是，`viewappear` 和 `viewdisappear` 事件关注的是整个页面的状态，所以**它们必须绑定到页面的根元素上**。
-
-特殊情况下，这两个事件也能被绑定到非根元素的body组件上，例如`wxc-navpage`组件。
-
-### 事件对象
-
-- `type` : `viewappear` 或 `viewdisappear`
-- `target` : 触发事件的组件对象
-- `timestamp` : 事件被触发时的时间戳
-
-## 示例
-
-```html
-<template>
- <div>
- <div class="box" @click="onclick" @longpress="onlongpress" @appear="onappear" @disappear="ondisappear"></div>
- </div>
-</template>
-
-<script>
- const modal = weex.requireModule('modal')
- export default {
- methods: {
- onclick (event) {
- console.log('onclick:', event)
- modal.toast({
- message: 'onclick',
- duration: 0.8
- })
- },
- onlongpress (event) {
- console.log('onlongpress:', event)
- modal.toast({
- message: 'onlongpress',
- duration: 0.8
- })
- },
- onappear (event) {
- console.log('onappear:', event)
- modal.toast({
- message: 'onappear',
- duration: 0.8
- })
- },
- ondisappear (event) {
- console.log('ondisappear:', event)
- modal.toast({
- message: 'ondisappear',
- duration: 0.8
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .box {
- border-width: 2px;
- border-style: solid;
- border-color: #BBB;
- width: 250px;
- height: 250px;
- margin-top: 250px;
- margin-left: 250px;
- background-color: #EEE;
- }
-</style>
-```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/common-style.md
----------------------------------------------------------------------
diff --git a/source/cn/references/common-style.md b/source/cn/references/common-style.md
deleted file mode 100644
index 937e8de..0000000
--- a/source/cn/references/common-style.md
+++ /dev/null
@@ -1,627 +0,0 @@
----
-title: 通用样式
-type: references
-order: 1.4
-version: 2.1
----
-
-# 通用样式
-
-所有 Weex 组件都支持以下通用样式规则。
-
-## 盒模型
-
-
-
-Weex 盒模型基于 [CSS 盒模型](https://www.w3.org/TR/css3-box/)，每个 Weex 元素都可视作一个盒子。我们一般在讨论设计或布局时，会提到「盒模型」这个概念。
-
-盒模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界 margin edge, 边框边界 border edge, 内边距边界 padding edge 与内容边界 content edge。这四层边界，形成一层层的盒子包裹起来，这就是盒模型大体上的含义。
-
-**注意：**
-Weex 对于长度值目前只支持*像素*值，不支持相对单位（`em`、`rem`）。
-
-- `width {length}`：，默认值 0
-- `height {length}`：，默认值 0
-- `padding {length}`：内边距，内容和边框之间的距离。默认值 0
-
- 可有如下写法：
-
- - `padding-left {length}`：，默认值 0
- - `padding-right {length}`：，默认值 0
- - `padding-top {length}`：，默认值 0
- - `padding-bottom {length}`：，默认值 0
-- `margin`：
-
- 外边距，元素和元素之间的空白距离。值类型为 length，默认值 0
-
- 可有如下写法：
-
- - `margin-left {length}`：，默认值 0
- - `margin-right {length}`：，默认值 0
- - `margin-top {length}`：，默认值 0
- - `margin-bottom {length}`：，默认值 0
-- border：
-
- 设定边框，`border` 目前不支持类似这样 `border: 1 solid #ff0000;` 的组合写法。
-
- 可有如下写法：
-
- - `border-style`：
-
- 设定边框样式，值类型为 string，可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
-
- 可有如下写法：
-
- - `border-left-style {string}`：可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
- - `border-top-style {string}`：可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
- - `border-right-style {string}`：可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
- - `border-bottom-style {string}`：可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
-
- - `border-width {length}`：
-
- 设定边框宽度，非负值, 默认值 0
-
- 可有如下写法：
-
- - `border-left-width {length}`：，非负值, 默认值 0
- - `border-top-width {length}`：，非负值, 默认值 0
- - `border-right-width {length}`：，非负值, 默认值 0
- - `border-bottom-width {length}`：，非负值, 默认值 0
-
- - `border-color {color}`：
-
- 设定边框颜色，默认值 `#000000`
-
- 可有如下写法：
-
- - `border-left-color {color}`：，默认值 `#000000`
- - `border-top-color {color}`：，默认值 `#000000`
- - `border-right-color {color}`：，默认值 `#000000`
- - `border-bottom-color {color}`：，默认值 `#000000`
- - `border-radius {length}`：
-
- 设定圆角，默认值 0
-
- 可有如下写法：
-
- - `border-bottom-left-radius {length}`：，非负值, 默认值 0
- - `border-bottom-right-radius {length}`：，非负值, 默认值 0
- - `border-top-left-radius {length}`：，非负值, 默认值 0
- - `border-top-right-radius {length}`：，非负值, 默认值 0
-
-
-### 注意：
-
-Weex 盒模型的 `box-sizing` 默认为 `border-box`，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。
-
-目前在 `<image>` 组件上尚无法只定义一个或几个角的 `border-radius`。比如你无法在这两个组件上使用 `border-top-left-radius`。该约束只对 iOS 生效，Android 并不受此限制。
-
-尽管 `overflow:hidden` 在 Android 上是默认行为，但只有下列条件都满足时，一个父 view 才会去 clip 它的子 view。这个限制只对 Android 生效，iOS 不受影响。
-* 父view是`div`, `a`, `cell`, `refresh` 或 `loading`。
-* 系统版本是 Android 4.3 或更高。
-* 系统版本不是 Andorid 7.0。
-* 父 view 没有 `background-image` 属性或系统版本是 Android 5.0 或更高。
-
-### 示例：
-
-```html
-<template>
- <div>
- <image style="width: 400px; height: 200px; margin-left: 20px;" src="https://g.alicdn.com/mtb/lab-zikuan/0.0.18/weex/weex_logo_blue@3x.png"></image>
- </div>
-</template>
-```
-
-## Flexbox
-
-Weex 布局模型基于 CSS [`Flexbox`](http://www.w3.org/TR/css3-flexbox/)，以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。
-
-Flexbox 包含 flex 容器和 flex 成员项。如果一个 Weex 元素可以容纳其他元素，那么它就成为 flex 容器。需要注意的是，flexbox 的老版规范相较新版有些出入，比如是否能支持 wrapping。这些都描述在 W3C 的工作草案中了，你需要注意下新老版本之间的不同。另外，老版本只在安卓 4.4 版以下得到支持。
-
-### Flex 容器
-
-在 Weex 中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 `display: flex;` 属性。
-
-- `flex-direction`：
-
- 定义了 flex 容器中 flex 成员项的排列方向。可选值为 `row` | `column`，默认值为 `column`
-
- - `column`：从上到下排列。
- - `row`：从左到右排列。
-
-- `justify-content`：
-
- 定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。可选值为 `flex-start` | `flex-end` | `center` | `space-between`，默认值为 `flex-start`。
-
- - `flex-start`：是默认值，所有的 flex 成员项都排列在容器的前部；
- - `flex-end`：则意味着成员项排列在容器的后部；
- - `center`：即中间对齐，成员项排列在容器中间、两边留白；
- - `space-between`：表示两端对齐，空白均匀地填充到 flex 成员项之间。
-
- 
-
-- `align-items`：
-
- 定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。可选值为 `stretch` | `flex-start` | `center` | `flex-end`，默认值为 `stretch`。
-
- - `stretch` 是默认值，即拉伸高度至 flex 容器的大小；
- - `flex-start` 则是上对齐，所有的成员项排列在容器顶部；
- - `flex-end` 是下对齐，所有的成员项排列在容器底部；
- - `center` 是中间对齐，所有成员项都垂直地居中显示。
-
- 
-
-### Flex 成员项
-
-flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 `flex: 1`，它们将平均分配剩余空间. 如果一个成员项设置的值为 `flex: 2`，其它的成员项设置的值为 `flex: 1`，那么这个成员项所占用的剩余空间是其它成员项的2倍。
-
-- `flex {number}`：值为 number 类型。
-
-### 示例
-
-一个简单的网格布局。
-
-
-
-```html
-<template>
- <div>
- <div v-for="(v, i) in list" class="row">
- <div v-for="(text, k) in v" class="item">
- <div>
- <text>{{text}}</text>
- </div>
- </div>
- </div>
- </div>
-</template>
-<style scoped>
- .item{
- flex:1;
- justify-content: center;
- align-items:center;
- border-width:1;
- }
- .row{
- flex-direction: row;
- height:80px;
- }
-</style>
-<script>
- module.exports = {
- data: function () {
- return {
- list:[
- ['A', 'B', 'C'],
- ['D', 'E', 'F'],
- ['G', 'H', 'I']
- ]
- }
- }
- }
-</script>
-```
-
-一个在相对于屏幕水平居中，全屏居中的 `<div>`。
-
-```html
-<template>
- <div class="wrapper">
- <div class="box">
- </div>
- </div>
-</template>
-
-<style scoped>
- .wrapper {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: #cccccc;
- justify-content: center;
- align-items: center;
- }
- .box {
- width: 200px;
- height: 200px;
- background-color: #fc0000;
- }
-</style>
-```
-
-## 定位
-
-Weex 支持 `position` 定位，用法与 CSS position 类似。为元素设置 `position` 后，可通过 `top`、`right`、`bottom`、`left` 四个属性设置元素坐标。
-
-- `position {string}`：
-
- 设置定位类型。可选值为 `relative` | `absolute` | `fixed` | `sticky`，默认值为 `relative`。
-
- - `relative` 是默认值，指的是相对定位；
- - `absolute` 是绝对定位，以元素的容器作为参考系；
- - `fixed` 保证元素在页面窗口中的对应位置显示；
- - `sticky` 指的是仅当元素滚动到页面之外时，元素会固定在页面窗口的顶部。
-- `top {number}`：距离上方的偏移量，默认为 0。
-- `bottom {number}`：距离下方的偏移量，默认为 0。
-- `left {number}`：距离左方的偏移量，默认为 0。
-- `right {number}`：距离右方的偏移量，默认为 0。
-
-**注意：**
-
-1. Weex 目前不支持 `z-index` 设置元素层级关系，但靠后的元素层级更高，因此，对于层级高的元素，可将其排列在后面。
-2. 如果定位元素超过容器边界，在 Android 下，超出部分将**不可见**，原因在于 Android 端元素 `overflow` 默认值为 `hidden`，但目前 Android 暂不支持设置 `overflow: visible`。
-
-### 示例
-
-
-
-```html
-<template scoped>
- <div class="wrapper">
- <div class="box box1">
- </div>
- <div class="box box2">
- </div>
- <div class="box box3">
- </div>
- </div>
-</template>
-
-<style>
- .wrapper {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: #cccccc;
- }
- .box {
- width: 400px;
- height: 400px;
- position: absolute;
- }
- .box1 {
- top: 0;
- left: 0;
- background-color: #ff0000;
- }
- .box2 {
- top: 150px;
- left: 150px;
- background-color: #0055dd;
- }
- .box3 {
- top: 300px;
- left: 300px;
- background-color: #00ff49;
- }
-</style>
-```
-
-## transform
-
-transform 属性向元素应用 2D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
-
-目前支持的 transform 声明格式:
-
-- translate( <number/percentage> [, <number/percentage>]?)
-- translateX( <number/percentage> )
-- translateY( <number/percentage> )
-- scale( <number>)
-- scaleX( <number> )
-- scaleY( <number> )
-- rotate( <angle/degree> )
-- rotateX( <angle/degree> ) <span class="api-version">v0.14+</span>
-- rotateY( <angle/degree> ) <span class="api-version">v0.14+</span>
-- perspective( <number> ) Android 4.1及以上版本支持 <span class="api-version">v0.16+</span>
-- transform-origin: number/percentage/keyword(top/left/right/bottom)
-
-### 示例
-
-```HTML
-<template>
- <div class="wrapper">
- <div class="transform">
- <text class="title">Transformed element</text>
- </div>
- </div>
-</template>
-
-<style>
- .transform {
- align-items: center;
- transform: translate(150px,200px) rotate(20deg);
- transform-origin: 0 -250px;
- border-color:red;
- border-width:2px;
- }
- .title {font-size: 48px;}
-</style>
-```
-
-
-
-## transition <span class="api-version">v0.16.0+</span>
-
-现在您可以在CSS中使用transition属性来提升您应用的交互性与视觉感受，transition中包括布局动画，即LayoutAnimation，现在布局产生变化的同时也能使用transition带来的流畅动画。transition允许CSS的属性值在一定的时间区间内平滑地过渡。
-
-### 参数
-
-- ``transition-property``:允许过渡动画的属性名，设置不同样式transition效果的键值对，默认值为空，表示不执行任何transition，下表列出了所有合法的参数属性：
-
-| 参数名 | 描述 |
-| --------------- | ------------------------------ |
-| width | transition过渡执行的时候是否组件的宽度参与动画 |
-| height | transition过渡执行的时候是否组件的高度参与动画 |
-| top | transition过渡执行的时候是否组件的顶部距离参与动画 |
-| bottom | transition过渡执行的时候是否组件的底部距离参与动画 |
-| left | transition过渡执行的时候是否组件的左侧距离参与动画 |
-| right | transition过渡执行的时候是否组件的右侧距离参与动画 |
-| backgroundColor | transition过渡执行的时候是否组件的背景颜色参与动画 |
-| opacity | transition过渡执行的时候是否组件的不透明度参与动画 |
-| transform | transition过渡执行的时候是否组件的变换类型参与动画 |
-
-- ``transition-duration``:指定transition过渡的持续时间 (单位是毫秒)，默认值是 `0`，表示没有动画效果。
-
-- ``transition-delay``:指定请求transition过渡操作到执行transition过渡之间的时间间隔 (单位是毫秒或者秒)，默认值是 `0`，表示没有延迟，在请求后立即执行transition过渡。
-
-- ``transition-timing-function``:描述transition过渡执行的速度曲线，用于使transition过渡更为平滑。默认值是 `ease`。下表列出了所有合法的属性：
-
-| 属性名 | 描述 |
-| ------------------------------ | ---------------------------------------- |
-| ease | transition过渡逐渐变慢的过渡效果 |
-| ease-in | transition过渡慢速开始，然后变快的过渡效果 |
-| ease-out | transition过渡快速开始，然后变慢的过渡效果 |
-| ease-in-out | transition过渡慢速开始，然后变快，然后慢速结束的过渡效果 |
-| linear | transition过渡以匀速变化 |
-| cubic-bezier(x1, y1, x2, y2) | 使用三阶贝塞尔函数中自定义transition变化过程，函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 [cubic-bezier](http://cubic-bezier.com/) 和 [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve). |
-
-### 示例
-
-```html
-<style scoped>
- .panel {
- margin: 10px;
- top:10px;
- align-items: center;
- justify-content: center;
- border: solid;
- border-radius: 10px;
-
- transition-property: width,height,backgroundColor;
- transition-duration: 0.3s;
- transition-delay: 0s;
- transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
- }
-</style>
-```
-
-## 伪类 <span class="api-version">v0.9.5+</span>
-
-Weex 支持四种伪类：`active`, `focus`, `disabled`, `enabled`
-
-所有组件都支持 `active`, 但只有 `input` 组件和 `textarea` 组件支持 `focus`, `enabled`, `disabled`。
-
-### 规则
-
-- 同时生效的时候，优先级高覆盖优先级低
-
- - 例如：`input:active:enabled` 和 `input:active` 同时生效，前者覆盖后者
-
-- 互联规则如下所示
-
- 
-
-### 示例
-
-```html
-<template>
- <div class="wrapper">
- <image :src="logoUrl" class="logo"></image>
- </div>
-</template>
-
-<style scoped>
- .wrapper {
- align-items: center;
- margin-top: 120px;
- }
- .title {
- font-size: 48px;
- }
- .logo {
- width: 360px;
- height: 82px;
- background-color: red;
- }
- .logo:active {
- width: 180px;
- height: 82px;
- background-color: green;
- }
-</style>
-
-<script>
- export default {
- props: {
- logoUrl: {
- default: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png'
- },
- target: {
- default: 'World'
- }
- },
- methods: {
- update (e) {
- this.target = 'Weex';
- }
- }
- };
-</script>
-```
-
-[试一下](http://dotwe.org/vue/df2c8f254620d6d30d0906ee75fe5b99)
-
-## 线性渐变 <span class="api-version">v0.10+</span>
-
-Weex 支持线性渐变背景，具体介绍可参考 [W3C description of the gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients)。
-
-所有组件均支持线性渐变。
-
-### 使用
-
- 你可以通过 `background-image` 属性创建线性渐变。
-
-```css
-background-image: linear-gradient(to top,#a80077,#66ff00);
-```
-
-目前暂不支持 `radial-gradient`（径向渐变）。
-
-Weex 目前只支持两种颜色的渐变，渐变方向如下：
-
-* to right
- 从左向右渐变
-* to left
- 从右向左渐变
-* to bottom
- 从上到下渐变
-* to top
- 从下到上渐变
-* to bottom right
- 从左上角到右下角
-* to top left
- 从右下角到左上角
-
-### Note
-
-- `background-image` 优先级高于 `background-color`，这意味着同时设置 `background-image` 和 `background-color`，`background-color` 被覆盖。
-- 不要使用 `background` 简写.
-
-### 示例
-
-```html
-<template>
- <scroller style="background-color: #3a3a3a">
- <div class="container1" style="background-image:linear-gradient(to right,#a80077,#66ff00);">
- <text class="direction">to right</text>
- </div>
- <div class="container1" style="background-image:linear-gradient(to left,#a80077,#66ff00);">
- <text class="direction">to left</text>
- </div>
- <div class="container1" style="background-image:linear-gradient(to bottom,#a80077,#66ff00);">
- <text class="direction">to bottom</text>
- </div>
- <div class="container1" style="background-image:linear-gradient(to top,#a80077,#66ff00);">
- <text class="direction">to top</text>
- </div>
- <div style="flex-direction: row;align-items: center;justify-content: center">
- <div class="container2" style="background-image:linear-gradient(to bottom right,#a80077,#66ff00);">
- <text class="direction">to bottom right</text>
- </div>
- <div class="container2" style="background-image:linear-gradient(to top left,#a80077,#66ff00);">
- <text class="direction">to top left</text>
- </div>
- </div>
- </scroller>
-</template>
-<style>
- .container1 {
- margin: 10px;
- width: 730px;
- height: 200px;
- align-items: center;
- justify-content: center;
- border: solid;
- border-radius: 10px;
- }
-
- .container2 {
- margin: 10px;
- width: 300px;
- height: 300px;
- align-items: center;
- justify-content: center;
- border: solid;
- border-radius: 10px;
- }
-
- .direction {
- font-size: 40px;
- color: white;
- }
-</style>
-```
-
-## 阴影(box-shadow) <span class="api-version">v0.11+</span>
-
-Weex 支持阴影属性：`active`, `focus`, `disabled`, `enabled` `inset(可选)`,`offset-x`,`offset-y`, `blur-radius`,`color`
-
-
-### 注意
-
-- box-shadow仅仅支持iOS
-
-### 示例
-
-```html
-<template>
- <div class="wrapper">
- <div style="width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px rgb(255, 69, 0);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow: 20px 10px 5px rgba(255, 69, 0, 0.8);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgba(255, 69, 0, 0.8);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgb(255, 69, 0);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px black;">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px #008B00;">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- </div>
-</template>
-
-<style scoped>
- .wrapper {align-items: center; margin-top: 120px;}
- .title {font-size: 48px;}
-</style>
-
-<script>
- module.exports = {
- data: function () {
- return {
- logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
- target: 'World'
- };
- }
- };
-</script>
-```
-
-## 其他基本样式
-
-- `opacity {number}`：取值范围为 [0, 1] 区间。默认值是 1，即完全不透明；0 是完全透明；0.5 是 50% 的透明度。
-- `background-color {color}`：设定元素的背景色，可选值为色值，支持RGB（ `rgb(255, 0, 0)` ）；RGBA（ `rgba(255, 0, 0, 0.5)` ）；十六进制（ `#ff0000` ）；精简写法的十六进制（ `#f00` ）；色值关键字（`red`），默认值是 `transparent` 。
-
-**注意：** [色值的关键字列表](./color-names.html)。
-
-## 上手样式
-
-如果对于样式写法需要更多上手参考，可参考每个组件的文档中，都有常见的例子可供参考。
-
-你可以按照以下步骤来规划 Weex 页面的样式。
-
-1. 全局样式规划：将整个页面分割成合适的模块。
-2. flex 布局：排列和对齐页面模块。
-3. 定位盒子：定位并设置偏移量。
-4. 细节样式处理：增加特定的具体样式。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/a.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/a.md b/source/cn/references/components/a.md
index 5e54b0c..2b61fc1 100644
--- a/source/cn/references/components/a.md
+++ b/source/cn/references/components/a.md
@@ -1,7 +1,8 @@
---
title: <a>
type: references
-order: 2.1
+group: 内置组件
+order: 8.04
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/cell.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/cell.md b/source/cn/references/components/cell.md
index 09f402f..6c0ee52 100644
--- a/source/cn/references/components/cell.md
+++ b/source/cn/references/components/cell.md
@@ -1,7 +1,8 @@
---
title: <cell>
type: references
-order: 2.6
+group: 内置组件
+order: 8.07
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/div.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/div.md b/source/cn/references/components/div.md
index 90d8711..9fafd76 100644
--- a/source/cn/references/components/div.md
+++ b/source/cn/references/components/div.md
@@ -1,7 +1,8 @@
---
title: <div>
type: references
-order: 2.3
+group: 内置组件
+order: 8.01
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/image.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/image.md b/source/cn/references/components/image.md
index c096a48..a276a75 100644
--- a/source/cn/references/components/image.md
+++ b/source/cn/references/components/image.md
@@ -1,7 +1,8 @@
---
title: <image>
type: references
-order: 2.4
+group: 内置组件
+order: 8.02
version: 2.1
---
@@ -101,15 +102,15 @@ version: 2.1
## 组件方法
<sup class="api-version">v0.16.0+</sup>
-
+
- save：保存当前图片到本地
- - 参数
+ - 参数
回调函数作为方法入参，接收保存结果.
```
var image = this.$refs.imageRef; // image 是之前已经定义过的ref
image.save(function(result) {
console.log(JSON.stringify(result))
- });
+ });
```
- 异步返回的数据描述
```
@@ -120,7 +121,7 @@ version: 2.1
```
- 说明
对于 iOS 系统需要添加 `NSPhotoLibraryAddUsageDescription`相册访问权限, iOS 11 需要再添加一个`NSPhotoLibraryAddUsageDescription`权限, [查看更多iOS系统权限](https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html)
-
+
[试一试](http://dotwe.org/vue/fadcd44a7031943ff0feaaf1895df414)
## 约束
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/index.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/index.md b/source/cn/references/components/index.md
deleted file mode 100644
index 9a02e72..0000000
--- a/source/cn/references/components/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: 内建组件
-type: references
-order: 2
-version: 2.1
----
-
-# 内建组件
-
-- [<a>](./a.html)
-- [<indicator>](./indicator.html)
-- [<switch>](./switch.html)
-- [<text>](./text.html)
-- [<textarea>](./textarea.html)
-- [<video>](./video.html)
-- [<web>](./web.html)
-- [<div>](./div.html)
-- [<image>](./image.html)
-- [<input>](./input.html)
-- [<list>](./list.html)
-- [<cell>](./cell.html)
-- [<refresh> & <loading>](./refresh.html)
-- [<scroller>](./scroller.html)
-- [<slider>](./slider.html)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/indicator.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/indicator.md b/source/cn/references/components/indicator.md
index aa1cab4..7da0fa7 100644
--- a/source/cn/references/components/indicator.md
+++ b/source/cn/references/components/indicator.md
@@ -1,7 +1,8 @@
---
title: <indicator>
type: references
-order: 2.11
+group: 内置组件
+order: 8.14
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/input.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/input.md b/source/cn/references/components/input.md
index 3cf83fd..654a27d 100644
--- a/source/cn/references/components/input.md
+++ b/source/cn/references/components/input.md
@@ -1,7 +1,8 @@
---
title: <input>
type: references
-order: 2.5
+group: 内置组件
+order: 8.10
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/list.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/list.md b/source/cn/references/components/list.md
index 8e1e63c..51df6b0 100644
--- a/source/cn/references/components/list.md
+++ b/source/cn/references/components/list.md
@@ -1,7 +1,8 @@
---
title: <list>
type: references
-order: 2.5
+group: 内置组件
+order: 8.06
version: 2.1
---
@@ -62,7 +63,7 @@ version: 2.1
## 事件
- `loadmore` <sup class="wx-v">0.5+</sup>：如果列表滚动到底部将会立即触发这个事件，你可以在这个事件的处理函数中加载下一页的列表项。
-- `scroll` <sup class="wx-v">0.11+</sup>: 列表发生滚动时将会触发该事件，事件的默认抽样率为10px，即列表每滚动10px触发一次，可通过属性`offset-accuracy`设置抽样率。
+- `scroll` <sup class="wx-v">0.11+</sup>: 列表发生滚动时将会触发该事件，事件的默认抽样率为10px，即列表每滚动10px触发一次，可通过属性`offset-accuracy`设置抽样率。
事件中 event 对象属性：
- `contentSize {Object}`：列表的内容尺寸
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/loading.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/loading.md b/source/cn/references/components/loading.md
index cd630c3..08db367 100644
--- a/source/cn/references/components/loading.md
+++ b/source/cn/references/components/loading.md
@@ -1,7 +1,8 @@
---
title: <loading>
type: references
-order: 2.7
+group: 内置组件
+order: 8.08
version: 2.1
---
@@ -124,4 +125,4 @@ version: 2.1
</style>
```
-[Try it](http://dotwe.org/vue/d5c1b2336a703a6e6e47c303af41ffcd)
\ No newline at end of file
+[Try it](http://dotwe.org/vue/d5c1b2336a703a6e6e47c303af41ffcd)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/refresh.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/refresh.md b/source/cn/references/components/refresh.md
index 24a5823..c2a335b 100644
--- a/source/cn/references/components/refresh.md
+++ b/source/cn/references/components/refresh.md
@@ -1,7 +1,8 @@
---
title: <refresh>
type: references
-order: 2.8
+group: 内置组件
+order: 8.09
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/scroller.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/scroller.md b/source/cn/references/components/scroller.md
index acac227..504d9c4 100644
--- a/source/cn/references/components/scroller.md
+++ b/source/cn/references/components/scroller.md
@@ -1,7 +1,8 @@
---
title: <scroller>
type: references
-order: 2.9
+group: 内置组件
+order: 8.05
version: 2.1
---
@@ -62,7 +63,7 @@ version: 2.1
## 事件
- `loadmore` <sup class="wx-v">v0.5+</sup>：如果滚动到底部将会立即触发这个事件，你可以在这个事件的处理函数中加载下一页的列表项。
-- `scroll` <sup class="wx-v">0.11+</sup>: 列表发生滚动时将会触发该事件，事件的默认抽样率为10px，即列表每滚动10px触发一次，可通过属性`offset-accuracy`设置抽样率。 参见 [scroll event demo](http://dotwe.org/vue/9ef0e52bacaa20182a693f2187d851aa)。
+- `scroll` <sup class="wx-v">0.11+</sup>: 列表发生滚动时将会触发该事件，事件的默认抽样率为10px，即列表每滚动10px触发一次，可通过属性`offset-accuracy`设置抽样率。 参见 [scroll event demo](http://dotwe.org/vue/9ef0e52bacaa20182a693f2187d851aa)。
事件中 event 对象属性：
- `contentSize {Object}`：列表的内容尺寸
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/slider.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/slider.md b/source/cn/references/components/slider.md
index 0a23c2e..bb2098d 100644
--- a/source/cn/references/components/slider.md
+++ b/source/cn/references/components/slider.md
@@ -1,7 +1,8 @@
---
title: <slider>
type: references
-order: 2.11
+group: 内置组件
+order: 8.13
version: 2.1
---
@@ -43,9 +44,9 @@ version: 2.1
事件中 event 对象属性：
- `index`：展示的图片索引
- - `scroll` <sup class="wx-v">0.11+</sup>: 列表发生滚动时将会触发该事件，事件的默认抽样率为10px，即列表每滚动10px触发一次，可通过属性`offset-accuracy`设置抽样率。
+ - `scroll` <sup class="wx-v">0.11+</sup>: 列表发生滚动时将会触发该事件，事件的默认抽样率为10px，即列表每滚动10px触发一次，可通过属性`offset-accuracy`设置抽样率。
[体验一下](http://dotwe.org/vue/832e8f50cc325975b9d3aba93a9f6c39)
- 事件中 event 对象属性：
+ 事件中 event 对象属性：
- `offsetXRatio {number}`：表示当前页面的偏移比例，取值范围为[-1, 1]，负值表示向左侧滚动，正值向右。例如，`-0.2`表示当前item有20%的区域被滚动到slider左侧边界以外，`0.3`表示当前item有30%的区域被滚动到slider右侧边界以外。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/switch.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/switch.md b/source/cn/references/components/switch.md
index 42b24d9..0863a81 100644
--- a/source/cn/references/components/switch.md
+++ b/source/cn/references/components/switch.md
@@ -1,7 +1,8 @@
---
title: <switch>
type: references
-order: 2.12
+group: 内置组件
+order: 8.12
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/text.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/text.md b/source/cn/references/components/text.md
index b91f6f9..e264f92 100644
--- a/source/cn/references/components/text.md
+++ b/source/cn/references/components/text.md
@@ -1,7 +1,8 @@
---
title: <text>
type: references
-order: 2.13
+group: 内置组件
+order: 8.02
version: 2.1
---
@@ -58,7 +59,7 @@ version: 2.1
1. `<text>` 里直接写文本头尾空白会被过滤，如果需要保留头尾空白，暂时只能通过数据绑定写头尾空格。
-## iconfont
+## iconfont
`支持版本:v0.12.0`
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/textarea.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/textarea.md b/source/cn/references/components/textarea.md
index a5ec4d4..ca1eb6d 100644
--- a/source/cn/references/components/textarea.md
+++ b/source/cn/references/components/textarea.md
@@ -1,7 +1,8 @@
---
title: <textarea>
type: references
-order: 2.14
+group: 内置组件
+order: 8.11
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/video.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/video.md b/source/cn/references/components/video.md
index eee6eb9..d0a7b30 100644
--- a/source/cn/references/components/video.md
+++ b/source/cn/references/components/video.md
@@ -1,7 +1,8 @@
---
title: <video>
type: references
-order: 2.15
+group: 内置组件
+order: 8.15
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/waterfall.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/waterfall.md b/source/cn/references/components/waterfall.md
index 169ec89..643efb5 100644
--- a/source/cn/references/components/waterfall.md
+++ b/source/cn/references/components/waterfall.md
@@ -1,7 +1,8 @@
---
title: <waterfall>
type: references
-order: 2.5
+group: 内置组件
+order: 8.17
version: 2.1
---
@@ -61,4 +62,4 @@ version: 2.1
### 示例
-参见 [playground waterfall example](http://dotwe.org/vue/7a9195643e9e8da352b0d879cdbe68c0)
\ No newline at end of file
+参见 [playground waterfall example](http://dotwe.org/vue/7a9195643e9e8da352b0d879cdbe68c0)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/components/web.md
----------------------------------------------------------------------
diff --git a/source/cn/references/components/web.md b/source/cn/references/components/web.md
index 42f0681..ed60bd1 100644
--- a/source/cn/references/components/web.md
+++ b/source/cn/references/components/web.md
@@ -1,7 +1,8 @@
---
title: <web>
type: references
-order: 2.16
+group: 内置组件
+order: 8.16
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/downgrade.md
----------------------------------------------------------------------
diff --git a/source/cn/references/downgrade.md b/source/cn/references/downgrade.md
deleted file mode 100644
index 1393c2b..0000000
--- a/source/cn/references/downgrade.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: 降级方案
-type: references
-order: 1.3
-version: 2.1
----
-
-# 降级方案
-
-Weex 2.0 降级方案改成模块的形式支持，具体请参考[downgrade](https://www.npmjs.com/package/@weex-project/downgrade)
-
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/gesture.md
----------------------------------------------------------------------
diff --git a/source/cn/references/gesture.md b/source/cn/references/gesture.md
deleted file mode 100644
index be81e45..0000000
--- a/source/cn/references/gesture.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: 手势
-type: references
-order: 1.7
-version: 2.1
----
-
-# 手势
-
-*注：该功能属于实验性功能*
-
-Weex 封装了原生的触摸事件以提供手势系统。使用手势类似于在 Weex 中使用事件，只需在节点上设置 `on` 特性来监听手势即可。
-
-## 手势类型
-
-目前，仅支持以下四种手势类型：
-
-- **Touch**：当触摸到一个点，移动或从触摸面移开时触发 `touch` 手势。触摸手势很精准，它会返回所有详细的事件信息。所以，监听 `touch` 手势可能很慢，即使只移动一丁点也需要处理大量事件。有三种类型的 `touch` 手势：
-
- - `touchstart` 将在触摸到触摸面上时触发。
- - `touchmove` 将在触摸点在触摸面移动时被触发。
- - `touchend` 将在从触摸面离开时被触发。
-
-- **Pan**：`pan` 手势也会返回触摸点在触摸面的移动信息，有点类似于 `touch` 手势。但是 `pan` 手势只会采样收集部分事件信息因此比 `touch` 事件要快得多，当然精准性差于 `touch`。`pan` 也有三中类型的手势，这些手势的意义与 `touch` 完全一样：
-
- - `panstart`
- - `panmove`
- - `panend`
- - `horizontalpan` <span class="api-version">v0.10+</span>：手势的 `start/move/end` 状态保存在 `state` 特性中。目前该手势在 Android 下会与 click 事件冲突。
- - `verticalpan` <span class="api-version">v0.10+</span>：势的 `start/move/end` 状态保存在 `state` 特性中。目前该手势在 Android 下会与 click 事件冲突。
-- **Swipe**：`swipe` 将会在用户在屏幕上滑动时触发，一次连续的滑动只会触发一次 `swiper` 手势。
-- **LongPress**：`LongPress` 将会在触摸点连续保持 500 ms以上时触发。
-
-`touch` 和 `pan` 非常接近，它们的特点可以总结成这样：
-
-- **Touch**：完整信息，精准、很慢
-- **Pan**：抽样信息，很快，不够精准
-
-开发者可以根据自己的情况选择合适的手势。
-
-## 属性
-
-以下属性可以在手势的回调中使用：
-
-- `direction`：仅在 `swipe` 手势中存在，返回滑动方向，返回值可能为 `up`, `left`, `bottom`, `right`。
-- `changedTouches`：一个数组，包含了当前手势的触摸点的运动轨迹
-
-### changedTouches
-
-`changedTouches` 是一个数组，其子元素中包含以下属性：
-
-- `identifier`：触摸点的唯一标识符。
-- `pageX`：触摸点相对于文档左侧边缘的 X 轴坐标。
-- `pageY`：触摸点相对于文档顶部边缘的 Y 轴坐标。
-- `screenX`：触摸点相对于屏幕左侧边缘的 X 轴坐标。
-- `screenY`：触摸点相对于屏幕顶部边缘的 Y 轴坐标。
-
-## 约束
-
-目前，由于会触发大量事件冲突，Weex Android 还不支持在滚动类型的元素上监听手势，例如 `scroller`, `list` 和 `webview` 这三个组件。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/html5-apis.md
----------------------------------------------------------------------
diff --git a/source/cn/references/html5-apis.md b/source/cn/references/html5-apis.md
deleted file mode 100644
index a8c802a..0000000
--- a/source/cn/references/html5-apis.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: HTML5 APIs
-type: references
-order: 1.3
-version: 2.1
----
-
-# HTML5 APIs
-
-Weex HTML5 APIs 与 [Vue APIs](https://vuejs.org/v2/api/) 保持一致，请直接参考 [Vue APIs](https://vuejs.org/v2/api/)。
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/index.md
----------------------------------------------------------------------
diff --git a/source/cn/references/index.md b/source/cn/references/index.md
index 9988c3c..f2217ed 100644
--- a/source/cn/references/index.md
+++ b/source/cn/references/index.md
@@ -1,19 +1,7 @@
---
-title: 通用特性
+title: References
type: references
-order: 1
+order: 0
version: 2.1
+has_chapter_content: true
---
-
-# 通用特性
-
-- [iOS APIs](./ios-apis.html)
-- [Android APIs](./android-apis.html)
-- [HTML5 APIs](./html5-apis.html)
-- [通用样式](./common-style.html)
-- [文本样式](./text-style.html)
-- [颜色名称](./color-names.html)
-- [手势](./gesture.html)
-- [路径](./path.html)
-- [事件冒泡](./bubble.html)
-- [降级方案](./downgrade.html)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/ios-apis.md
----------------------------------------------------------------------
diff --git a/source/cn/references/ios-apis.md b/source/cn/references/ios-apis.md
index 0668923..5002c14 100644
--- a/source/cn/references/ios-apis.md
+++ b/source/cn/references/ios-apis.md
@@ -1,7 +1,8 @@
---
title: iOS APIs
type: references
-order: 1.1
+group: API
+order: 2.3
version: 2.1
---
@@ -14,7 +15,7 @@ version: 2.1
- 重置 JSFramework
## Handler (对应于 Android 的 Adapter) 介绍
-
+
- `WXImgLoaderDefaultImpl` 图片下载 handler。Weex 会把需要设置图片的 View 和 URL 透露出来，Native 端需要实现这个接口进行图片下载。WeexSDK kernel 本身没有提供图片下载的默认实现。
接口定义如下：
@@ -36,7 +37,7 @@ version: 2.1
* finished : a Boolean value indicating whether download action has finished.
*/
- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;
- @end
+ @end
```
## Native 和 JS 通信
@@ -44,10 +45,10 @@ version: 2.1
- 自定义通知事件
用于 native 自定义部分和 js 进行实践通知，比如传递下拉事件到 js，这个是在 component 基类的方法，可以直接使用
-
+
```
/**
- * @abstract Fire an event to the component and tell Javascript which value has been changed.
+ * @abstract Fire an event to the component and tell Javascript which value has been changed.
* @param eventName 事件名称，可以在weex文件某个标签组件监听，命名规范为 onXXX
* @param params 数据
* @param domChanges 发生改变的数据
@@ -60,9 +61,9 @@ version: 2.1
多用于 Module 回调结果给 js，回调类型分为下面两种：
1. `WXModuleCallback` 为了性能考虑，该回调只能回调通知js一次，之后会被释放，多用于一次结果
-
+
2. `WXModuleKeepAliveCallback` 该回调可以设置是否为多次回调类型，多次回调的场景如持续监听位置的变化，并返回给 js。
-
+
```
@implementation WXEchoModule
@synthesize weexInstance; // 让该module 获得当前instance
@@ -78,7 +79,7 @@ version: 2.1
WeexSDK 在 `WXSDKInstance` 类中提供了方法 `setFrame(CGRect)` 来改变容器的大小。
如：在导航栏从有到无过程，需要 weexView 的变化， 可以在此时 native 调用该方法设置
-
+
## 降级使用
@@ -88,4 +89,3 @@ Weex 处于发展阶段会增加一些新的特性和功能，但是这些新的
Native 端可以通过接口 WXSDKInstance 中的 onFailed 回调进行处理，如果是主动降级则返回的错误 domain 为 `TemplateErrorType`，Native 端可以跳转到对应的 H5 页面，或者用其他的方式提示用户当前环境不支持 Weex。
-
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/js-framework-apis.md
----------------------------------------------------------------------
diff --git a/source/cn/references/js-framework-apis.md b/source/cn/references/js-framework-apis.md
new file mode 100644
index 0000000..2aafd5e
--- /dev/null
+++ b/source/cn/references/js-framework-apis.md
@@ -0,0 +1,67 @@
+---
+title: JS Framework APIs
+type: references
+group: API
+order: 2.4
+version: 2.1
+---
+
+# JS Framework APIs
+
+## BroadcastChannel <span class="api-version">v0.9+</span>
+
+`BroadcastChannel` API 是 Weex 实例间通信的解决方案。
+
+### 参考
+
++ [BroadcastChannel specification](https://html.spec.whatwg.org/multipage/comms.html#broadcasting-to-other-browsing-contexts).
++ [MessageEvent specification](https://html.spec.whatwg.org/multipage/comms.html#messageevent)
+
+### API
+
++ `postMessage(message)`: 通过消息通道发送特定消息给其他 BroadcastChannel 对象。
++ `close`: 关闭 BroadcastChannel 对象，以便垃圾回收。
++ `onmessage`: Event 处理函数, 当 BroadcastChannel 对象接收到消息时触发。
+
+### 使用
+
+```javascript
+const Stack = new BroadcastChannel('Avengers')
+Stack.onmessage = function (event) {
+ console.log(event.data) // in this case, it's "Hulk Smash !!!"
+}
+
+// in another instance
+const Hulk = new BroadcastChannel('Avengers')
+Hulk.postMessage("Hulk Smash !!!")
+```
+
+运行以上代码，Stack 可以从 Hulk 接收消息。
+
+### 注意
+
+需要注意的是: ** `message` 如果是一个对象，该对象不会深拷贝。**
+
+参考以下例子
+
+```javascript
+const a = new BroadcastChannel('app')
+const b = new BroadcastChannel('app')
+
+const message = {
+ lists: ['A', 'B']
+}
+
+a.onmessage = function (event) {
+
+ // in this case, event.data is a reference of message
+ console.assert(event.data === message)
+
+}
+
+b.postMessage(message)
+```
+
+在这个例子中，`event.data` 全等于 `message`。
+
+与深拷贝相比，这种方式能够提高效率并减少内存消耗。但是，不建议开发者在使用时缓存或修改事件对象 (所有类型的事件处理程序都应该有此限制)。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/js-service.md
----------------------------------------------------------------------
diff --git a/source/cn/references/js-service.md b/source/cn/references/js-service.md
new file mode 100644
index 0000000..a59c407
--- /dev/null
+++ b/source/cn/references/js-service.md
@@ -0,0 +1,119 @@
+---
+title: JS Service
+type: references
+group: API
+order: 2.6
+version: 2.1
+---
+
+
+# JS Service
+
+<span class="weex-version">v0.9.5+</span>
+
+JS service 和 Weex 实例在 JS runtime 中并行运行。Weex 实例的生命周期可调用 JS service 生命周期。目前提供创建、刷新、销毁生命周期。
+
+**重要提醒: JS Service 非常强大但也很危险，请小心使用！**
+
+
+## 注册 JS Service
+
+### iOS
+
+```objective-c
+[WeexSDKEngine registerService:@"SERVICE_NAME" withScript: @"SERVICE_JS_CODE" withOptions: @{}];
+```
+
+### Android
+
+```java
+HashMap<String, String> options = new HashMap<>()
+options.put("k1", "v1")
+String SERVICE_NAME = "SERVICE_NAME"
+String SERVICE_JS_CODE = "SERVICE_JS_CODE"
+boolean result = WXSDKEngine.registerService(SERVICE_NAME, SERVICE_JS_CODE, options)
+```
+
+### Web
+```html
+<!-- 必须在 JSFM 之后加载 -->
+<script src="SERVICE_JS_CODE_URL"></script>
+```
+
+
+
+## 编写一个 JS service
+
+```javascript
+// options: native inject options
+// options.serviceName is native options name
+service.register(options.serviceName, {
+ /**
+ * JS Service lifecycle. JS Service `create` will before then each instance lifecycle `create`. The return param `instance` is Weex protected param. This object will return to instance global. Other params will in the `services` at instance.
+ *
+ * @param {String} id instance id
+ * @param {Object} env device environment
+ * @return {Object}
+ */
+ create: function(id, env, config) {
+ return {
+ instance: {
+ InstanceService: function(weex) {
+ var modal = weex.requireModule('modal')
+ return {
+ toast: function(title) {
+ modal.toast({ message: title })
+ }
+ }
+ }
+ },
+ NormalService: function(weex) {
+ var modal = weex.requireModule('modal')
+ return {
+ toast: function(title) {
+ modal.toast({ message: title })
+ }
+ }
+ }
+ }
+ },
+
+ /**
+ * JS Service lifecycle. JS Service `refresh` will before then each instance lifecycle `refresh`. If you want to reset variable or something on instance refresh.
+ *
+ * @param {String} id instance id
+ * @param {Object} env device environment
+ */
+ refresh: function(id, env, config){
+
+ },
+
+ /**
+ * JS Service lifecycle. JS Service `destroy` will before then each instance lifecycle `destroy`. You can deleted variable here. If you doesn't detete variable define in JS Service. The variable will always in the js runtime. It's would be memory leak risk.
+ *
+ * @param {String} id instance id
+ * @param {Object} env device environment
+ * @return {Object}
+ */
+ destroy: function(id, env) {
+
+ }
+})
+```
+
+## Using JS Service (vuejs)
+
+```html
+<script>
+var _InstanceService = new InstanceService(weex)
+var _NormalService = new service.normalService(weex)
+
+module.exports = {
+ created: fucntion() {
+ // called modal module to toast something
+ _InstanceService.toast('Instance JS Service')
+ _NormalService.toast('Normal JS Service')
+ }
+}
+</script>
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/js-service/index.md
----------------------------------------------------------------------
diff --git a/source/cn/references/js-service/index.md b/source/cn/references/js-service/index.md
deleted file mode 100644
index d4004d5..0000000
--- a/source/cn/references/js-service/index.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: JS Service
-type: references
-order: 9
-version: 2.1
----
-
-
-# JS Service
-
-<span class="weex-version">v0.9.5+</span>
-
-JS service 和 Weex 实例在 JS runtime 中并行运行。Weex 实例的生命周期可调用 JS service 生命周期。目前提供创建、刷新、销毁生命周期。
-
-**重要提醒: JS Service 非常强大但也很危险，请小心使用！**
-
-
-## 注册 JS Service
-
-### iOS
-
-```objective-c
-[WeexSDKEngine registerService:@"SERVICE_NAME" withScript: @"SERVICE_JS_CODE" withOptions: @{}];
-```
-
-### Android
-
-```java
-HashMap<String, String> options = new HashMap<>()
-options.put("k1", "v1")
-String SERVICE_NAME = "SERVICE_NAME"
-String SERVICE_JS_CODE = "SERVICE_JS_CODE"
-boolean result = WXSDKEngine.registerService(SERVICE_NAME, SERVICE_JS_CODE, options)
-```
-
-### Web
-```html
-<!-- 必须在 JSFM 之后加载 -->
-<script src="SERVICE_JS_CODE_URL"></script>
-```
-
-
-
-## 编写一个 JS service
-
-```javascript
-// options: native inject options
-// options.serviceName is native options name
-service.register(options.serviceName, {
- /**
- * JS Service lifecycle. JS Service `create` will before then each instance lifecycle `create`. The return param `instance` is Weex protected param. This object will return to instance global. Other params will in the `services` at instance.
- *
- * @param {String} id instance id
- * @param {Object} env device environment
- * @return {Object}
- */
- create: function(id, env, config) {
- return {
- instance: {
- InstanceService: function(weex) {
- var modal = weex.requireModule('modal')
- return {
- toast: function(title) {
- modal.toast({ message: title })
- }
- }
- }
- },
- NormalService: function(weex) {
- var modal = weex.requireModule('modal')
- return {
- toast: function(title) {
- modal.toast({ message: title })
- }
- }
- }
- }
- },
-
- /**
- * JS Service lifecycle. JS Service `refresh` will before then each instance lifecycle `refresh`. If you want to reset variable or something on instance refresh.
- *
- * @param {String} id instance id
- * @param {Object} env device environment
- */
- refresh: function(id, env, config){
-
- },
-
- /**
- * JS Service lifecycle. JS Service `destroy` will before then each instance lifecycle `destroy`. You can deleted variable here. If you doesn't detete variable define in JS Service. The variable will always in the js runtime. It's would be memory leak risk.
- *
- * @param {String} id instance id
- * @param {Object} env device environment
- * @return {Object}
- */
- destroy: function(id, env) {
-
- }
-})
-```
-
-## Using JS Service (vuejs)
-
-```html
-<script>
-var _InstanceService = new InstanceService(weex)
-var _NormalService = new service.normalService(weex)
-
-module.exports = {
- created: fucntion() {
- // called modal module to toast something
- _InstanceService.toast('Instance JS Service')
- _NormalService.toast('Normal JS Service')
- }
-}
-</script>
-```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/jsfm-apis.md
----------------------------------------------------------------------
diff --git a/source/cn/references/jsfm-apis.md b/source/cn/references/jsfm-apis.md
deleted file mode 100644
index ffe6029..0000000
--- a/source/cn/references/jsfm-apis.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: JS Framework APIs
-type: references
-order: 1.3
-version: 2.1
----
-
-# JS Framework APIs
-
-## BroadcastChannel <span class="api-version">v0.9+</span>
-
-`BroadcastChannel` API 是 Weex 实例间通信的解决方案。
-
-### 参考
-
-+ [BroadcastChannel specification](https://html.spec.whatwg.org/multipage/comms.html#broadcasting-to-other-browsing-contexts).
-+ [MessageEvent specification](https://html.spec.whatwg.org/multipage/comms.html#messageevent)
-
-### API
-
-+ `postMessage(message)`: 通过消息通道发送特定消息给其他 BroadcastChannel 对象。
-+ `close`: 关闭 BroadcastChannel 对象，以便垃圾回收。
-+ `onmessage`: Event 处理函数, 当 BroadcastChannel 对象接收到消息时触发。
-
-### 使用
-
-```javascript
-const Stack = new BroadcastChannel('Avengers')
-Stack.onmessage = function (event) {
- console.log(event.data) // in this case, it's "Hulk Smash !!!"
-}
-
-// in another instance
-const Hulk = new BroadcastChannel('Avengers')
-Hulk.postMessage("Hulk Smash !!!")
-```
-
-运行以上代码，Stack 可以从 Hulk 接收消息。
-
-### 注意
-
-需要注意的是: ** `message` 如果是一个对象，该对象不会深拷贝。**
-
-参考以下例子
-
-```javascript
-const a = new BroadcastChannel('app')
-const b = new BroadcastChannel('app')
-
-const message = {
- lists: ['A', 'B']
-}
-
-a.onmessage = function (event) {
-
- // in this case, event.data is a reference of message
- console.assert(event.data === message)
-
-}
-
-b.postMessage(message)
-```
-
-在这个例子中，`event.data` 全等于 `message`。
-
-与深拷贝相比，这种方式能够提高效率并减少内存消耗。但是，不建议开发者在使用时缓存或修改事件对象 (所有类型的事件处理程序都应该有此限制)。
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/migration/difference.md
----------------------------------------------------------------------
diff --git a/source/cn/references/migration/difference.md b/source/cn/references/migration/difference.md
deleted file mode 100644
index b11c6c2..0000000
--- a/source/cn/references/migration/difference.md
+++ /dev/null
@@ -1,249 +0,0 @@
----
-title: Weex 和 Vue 2.x 的语法差异
-type: references
-order: 12.2
-version: 2.1
----
-
-# Weex 和 Vue 2.x 的语法差异
-
-## Overview
-
-
-| | Weex | Vue |
-| ---- | ---- | --- |
-| 生命周期 | `ready: function() {}` | `mounted: function() {}` |
-| 条件指令 | `if="{% raw %}{{!foo}}{% endraw %}"` | `v-if="!foo"` |
-| 循环指令 | `repeat="{% raw %}{{item in list}}{% endraw %}"` | `v-for="item in list"` |
-| 样式类名 | `class="btn btn-{% raw %}{{type}}{% endraw %}"` | `:class="['btn', 'btn-' + type]"` |
-| 内联样式 | `style="color:{% raw %}{{textColor}}{% endraw %}"` | `:style="{ color: textColor }"` |
-| 事件绑定 | `onclick="handler"` | `@click="handler"` |
-| 原生事件 | `onclick="xxx"` | `@click.native="xxx"` |
-| 数据绑定 | `src="{% raw %}{{rightItemSrc}}{% endraw %}"` | `:src="rightItemSrc"` |
-| 内容/槽 | `<content></content>` | `<slot></slot>` |
-| 数据初始化 | `data: { value: 'x' }` | `data: function() { return { value: 'x' } }` |
-| 标签 ID | `id="xxx"` | `ref="xxx"` |
-| 获取节点 | `this.$el('xxx')` | `this.$refs.xxx` |
-
-
-## Reference
-
-See the source code of `weex-vue-migration` for more details:
-
-+ [template-rewriter](https://github.com/songsiqi/weex-vue-migration/blob/master/src/template-rewriter/rewriter.js)
-+ [script-rewriter](https://github.com/songsiqi/weex-vue-migration/blob/master/src/script-rewriter/rewriter.js)
-
-## LifeCycle Hooks 生命周期钩子
-| weex | vue | Description |
-| --------- | ------------- | ------------------------- |
-| init | beforeCreate | 组件实例刚刚被创建，组件属性如data计算之前 |
-| created | created | 组件实例创建完成，属性已绑定，但DOM还未生成 |
-| | beforeMount | 模板编译/挂载之前 |
-| ready | mounted | 模板编译/挂载之后 |
-| | beforeUpdate | 组件更新之前 |
-| | updated | 组件更新之后 |
-| | activated | for`keep-alive`, 组件被激活时调用 |
-| | deactivated | for`keep-alive`, 组件被移除时调用 |
-| | beforeDestroy | 组件被销毁前调用 |
-| destroyed | destroyed | 组件被销毁后调用 |
-
-# Data Binding 数据绑定
-
-在weex中，使用{% raw %}{{…}}{% endraw %}在`<template>`中绑定在`<script>`里定义的数据；在vue中，需要在要绑定的属性前加 `:` 。如以下示例。
-
-* 类名
-
- - weex
-
- ```html
- <div class="btn btn-{{type}}"></div>
- ```
-
- - vue
-
- ```html
- <div :class="['btn', 'btn-' + type]"></div>
- ```
-
-* 样式绑定
-
- * weex
-
- ```html
- <div style="color:{{textColor}}"></div>
- ```
-
- * vue
-
- ```html
- <div :style="{color: textColor}"></div>
- ```
-
-# if指令
-
-* weex
-
- ```html
- <image src="..." if="{{shown}}"></image>
- ```
-
- or
-
- ```html
- <image src="..." if="shown"></image>
- ```
-
-* vue
-
- ```html
- <image src="..." v-if="shown"></image>
- ```
-
-# 循环指令
-
-* weex: repeat
- - `$index`为索引
-
- ```html
- <div repeat="{{list}}">
- <text>No. {{$index + 1}}</text>
- <div>
- ```
-
- or
-
- ```html
- <div repeat="{{v in list}}">
- <text>No. {{$index + 1}}, {{v.nickname}}</text>
- </div>
- ```
-
- - 对象参数的顺序
-
- ```html
- <div repeat="{{(key, value) in list}}">
- <text>No. {{key + 1}}, {{value.nickname}}</text>
- </div>
- ```
-
- - `track-by`
-
- ```html
- <div repeat="{{item in items}}" track-by="item.id" class="{{gender}}"></div>
- ```
-
-* vue: v-for
-
- - 移除`$index`索引
-
- - 对象参数的改变：改为(value, key), 与通用的对象迭代器保持一致
-
- ```html
- <div repeat="{{(value, key) in list}}">
- <text>No. {{key + 1}}, {{value.nickname}}</text>
- </div>
- ```
-
- - `track-by` 替换为`v-bind`
-
- ```html
- <div v-for="item in items" v-bind:key="item.id">
- ```
-
-# 初始化数据
-
-* weex
-
- ```javascript
- data: { value: 'x' }
- ```
-
-* vue
-
- ```javascript
- props: { value: { default: 'x' } }
- ```
-
- 动态数据
-
- ```javascript
- data: function () { return { value: 'x' } }
- ```
-
-
-# 围绕DOM的实例方法
-
-* 获取节点
-
- - weex: `this.$el('xxx')`
-
- ```html
- <template>
- <container>
- <text id="top">Top</text>
- </container>
- </template>
- <script>
- module.exports = {
- methods: {
- toTop: function () {
- var top = this.$el('top')
- }
- }
- }
- </script>
- ```
-
- - vue
-
- ```javascript
- this.$refs.xxx
- ```
-
-
-
-# 事件
-* 事件绑定
- - weex
-
- ```html
- <div onclick="handler"></div>
- ```
-
- - vue
-
- ```html
- <div @click="handler"></div>
- ```
-
-* 事件触发
- - weex: dispatch和broadcast
-
- ```javascript
- this.$dispatch()
- ```
-
- ```javascript
- this.$broadcast()
- ```
-
- - vue: emit
-
- ```javascript
- this.$emit()
- ```
-
- > 注：Weex 的 `$dispatch` 与组件无关，在任意组件中都可以通过 `$on` 捕获到，Vue 的`$emit` 用于触发组件(标签)的自定义事件。
-
-* 原生事件
- - weex
-
- ```javascript
- onclick="xxx"
- ```
-
- - vue
-
- ```javascript
- @click.native="xxx"
- ```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/migration/index.md
----------------------------------------------------------------------
diff --git a/source/cn/references/migration/index.md b/source/cn/references/migration/index.md
deleted file mode 100644
index 1238936..0000000
--- a/source/cn/references/migration/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: 迁移
-type: references
-order: 12
-version: 2.1
----
-
-# 迁移
-
-- [如何将原有 Weex 项目改造成 Vue 版本](./migration-from-weex.html)
-- [Weex 和 Vue 2.x 的语法差异](./difference.html)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/migration/migration-from-weex.md
----------------------------------------------------------------------
diff --git a/source/cn/references/migration/migration-from-weex.md b/source/cn/references/migration/migration-from-weex.md
deleted file mode 100644
index 34c3c6d..0000000
--- a/source/cn/references/migration/migration-from-weex.md
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: 如何将原有 Weex 项目改造成 Vue 版本
-type: references
-order: 12.1
-version: 2.1
----
-
-# 如何将原有 Weex 项目改造成 Vue 版本
-
-Weex 本身有一套语法规则，和 Vue 本身很相似，现在 Weex 与 Vue 有了官方合作，支持将 Vue 2.x 作为内置的前端框架，我们也推荐大家使用 Vue 2.x 的语法开发原生应用。对于现存旧版的 `.we` 文件，建议大家将其改造成 Vue 版本。
-
-## 要解决的问题
-
-> 将内核切换成 Vue 之后，原先基于 Weex 语法开发的项目将如何过渡到 Vue ？
-
-首先需要明确一点：Weex 原有的前端框架也会继续存在于 WeexSDK 中，依然支持 `.we` 文件格式的写法。
-
-此外，由于 `.we` 和 `.vue` 文件的格式本身就比较接近，所以迁移成本比较小，建议大家将现有 `.we` 格式的文件都转换成 `.vue` 格式。我们也推出了相应的工具和方法辅助迁移，在内部也有大量的成功实践，下边将重点介绍一下将 `.we` 文件转成 `.vue` 文件的方法。
-
-## 第一步，借助工具实现语法转换
-
-首先介绍一个工具： **[weex-vue-migration](https://github.com/songsiqi/weex-vue-migration)** ，它可以自动将 `.we` 文件转为 `.vue` 文件，绝大多数的模板语法都能自动转换，语法差异如下：
-
-| | Weex | Vue |
-| ---- | ---- | --- |
-| 生命周期 | `ready: function() {}` | `mounted: function() {}` |
-| 条件指令 | `if="{% raw %}{{!foo}}{% endraw %}"` | `v-if="!foo"` |
-| 循环指令 | `repeat="{% raw %}{{item in list}}{% endraw %}"` | `v-for="item in list"` |
-| 样式类名 | `class="btn btn-{% raw %}{{type}}{% endraw %}"` | `:class="['btn', 'btn-' + type]"` |
-| 内联样式 | `style="color:{% raw %}{{textColor}}{% endraw %}"` | `:style="{ color: textColor }"` |
-| 事件绑定 | `onclick="handler"` | `@click="handler"` |
-| 原生事件 | `onclick="xxx"` | `@click.native="xxx"` |
-| 数据绑定 | `src="{% raw %}{{rightItemSrc}}{% endraw %}"` | `:src="rightItemSrc"` |
-| 内容/槽 | `<content></content>` | `<slot></slot>` |
-| 数据初始化 | `data: { value: 'x' }` | `data: function() { return { value: 'x' } }` |
-| 标签 ID | `id="xxx"` | `ref="xxx"` |
-| 获取节点 | `this.$el('xxx')` | `this.$refs.xxx` |
-
-想要了解更多语法差异的细节，可以参考这篇文章：[《Weex 和 Vue 2.x 的语法差异》](./difference.html) 。
-
-### 使用方法
-
-首先安装工具：
-
-```bash
-npm install weex-vue-migration -g
-```
-
-转换文件：
-
-```bash
-weex-vue-migrate demo.we
-```
-
-转换成功后，将会在当前目录下生成 `demo.vue` 文件，控制台将会有如下输出：
-
-```
-[Success]: Migrate demo.we => demo.vue in 33ms
-Migration finished in 0.035s
-```
-
-除了逐个转换 `.we` 文件以外，`weex-vue-migration` 还支持批量转换整个目录，参考其[说明文档](https://github.com/songsiqi/weex-vue-migration/blob/master/README.md)可以了解更详细的使用方法。
-
-### 注意事项
-
-转换工具将不再支持 Weex 中废弃的语法，如果代码中有如下写法，建议先手动修改再做转换。
-
-0. 忽略 `require('@weex-components')` 语句，可以通过 npm 包的方式引入外部组件。
-0. 无法转换 `repeat="list"` 写法，仅支持 `repeat="item in list"` 格式。
-0. 不支持转换 `<script type="config"></script>`，目前 Vue 中不支持原有的降级配置。
-
-## 第二步，手动调整代码细节
-
-模板和样式的转换都可以借助工具轻易转换过来，`<script>` 中基本的语法也可以转换；但是由于 javascript 的写法比较灵活，仅仅使用工具做转换，并不一定能完美过渡。工具只能处理语法但是理解不了代码中的逻辑，在 Weex 和 Vue 的框架特性存在一些差异，有些差异还是需要手动修改才可以生效。
-
-> 提示：在代码中使用的“黑科技”越多，项目就越难以转换。
-
-### 样式单位
-
-在 `.we` 文件写样式时，开发者通常都不写长度单位，默认会被视为 `px`。在新的 Vue 版本的 Web 渲染器中，`<style>` 中的样式将会直接转化成 CSS class，如果不写单位、浏览器将无法正确识别，会导致在 Web 端无法正常渲染。Native 环境中不受影响。
-
-尽管不影响 Native 页面的渲染，也建议给样式长度加上单位 `px`。
-
-### 旧框架中的内置属性
-
-+ `vm._app`
- + `vm._app.differ`
- + `vm._app.doc`
- + `vm._app.updateActions()`
-
-### 事件派发机制
-
-+ `$dispatch` 、`$broadcast` 、`$call` 方法已经废弃。
-+ `$emit` 行为不一致。
-
-可以使用 Vuex 管理数据状态。
-
-### 直接操作 Virtual-DOM
-
-Weex 和 Vue 中的 Virtual-DOM 格式并不相同，如果你使用了 `this.$el('id')` 获取了某个组件的 element 之后，又修改了其中的某些属性或者调用了某些方法，这些操作在 Vue 中很难找到直接的对应写法。
-
-从另一个角度讲，我们也非常不建议在 Weex 或 Vue 项目中直接操作 Virtual-DOM，这些写法都应该修改。
-
-## 调整开发环境和工具
-
-在文件转换完成后，还需要重新调整一下开发环境。
-
-### 文件的编译
-
-`weex-loader` 同时支持编译 `.we` 和 `.vue` 文件，如果你使用的是 `webpack` 来配置编译环境，将不需要做任何改变就能直接编译 `.vue` 文件。
-
-需要注意的是，Vue 本身就是一个独立的前端框架，使用 Vue 编写的项目在 Web 上完全可以不依赖 Weex 容器运行。在这种情况下，需要配置基于 `vue-loader` 的编译脚本生成适用于 Web 平台 js 文件；然后引入 Vue 格式的 Weex 组件库就可以在 Web 中。
-
-### 辅助工具
-
-Weex 提供了 [weex-toolkit](https://github.com/weexteam/weex-toolkit) 的脚手架工具来辅助开发和调试、[weex-pack](https://github.com/weexteam/weex-pack) 实现打包原生应用；同样在 Vue 中也有 [vue-cli](https://github.com/vuejs/vue-cli) 脚手架工具。Weex 和 Vue 的工具互相做了适配，建议在创建项目和开发 Vue 项目的时候使用 `vue-cli` ，在调试时使用 `weex-toolkit`，在打包原生应用时使用 `weex-pack` 。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/animation.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/animation.md b/source/cn/references/modules/animation.md
index c4381f1..4e6fe93 100644
--- a/source/cn/references/modules/animation.md
+++ b/source/cn/references/modules/animation.md
@@ -1,7 +1,8 @@
---
title: animation
type: references
-order: 3.1
+group: 内置模块
+order: 9.04
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/clipboard.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/clipboard.md b/source/cn/references/modules/clipboard.md
index 300340c..3e2955e 100644
--- a/source/cn/references/modules/clipboard.md
+++ b/source/cn/references/modules/clipboard.md
@@ -1,7 +1,8 @@
---
title: clipboard
type: references
-order: 3.2
+group: 内置模块
+order: 9.08
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/dom.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/dom.md b/source/cn/references/modules/dom.md
index a177929..e3e6ba1 100644
--- a/source/cn/references/modules/dom.md
+++ b/source/cn/references/modules/dom.md
@@ -1,7 +1,8 @@
---
title: dom
type: references
-order: 3.3
+group: 内置模块
+order: 9.01
version: 2.1
---
@@ -154,15 +155,15 @@ version: 2.1
<text class="info">Left: {{size.left}}</text>
<text class="info">Right: {{size.right}}</text>
</div>
-
+
<text class="info btn" @click='click()'>{{this.tip}}</text>
-
+
</div>
-</template>
+</template>
<script>
const dom = weex.requireModule('dom')
-
+
function round(size) {
var roundSize = {
'width': Math.round(size.width),
@@ -196,7 +197,7 @@ version: 2.1
this.size = round.call(this,option.size);
})
},
-
+
methods:{
click:function() {
if (this.ref === 'viewport') {
@@ -206,14 +207,14 @@ version: 2.1
this.ref = 'viewport'
this.tip = "get box rect"
}
-
+
const result = dom.getComponentRect(this.ref, option => {
console.log('getComponentRect:', option)
this.size = round.call(this,option.size);
})
}
}
-
+
}
</script>
@@ -227,13 +228,13 @@ version: 2.1
margin-left:170px;
padding-left:35px;
border-color: rgb(162, 217, 192);
-
+
}
.btn:active {
background-color: #8fbc8f;
border-color: gray;
}
-
+
.box {
align-items:center;
margin-left: 150px;
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/globalevent.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/globalevent.md b/source/cn/references/modules/globalevent.md
index e92a114..200f063 100644
--- a/source/cn/references/modules/globalevent.md
+++ b/source/cn/references/modules/globalevent.md
@@ -1,7 +1,8 @@
---
title: globalEvent
type: references
-order: 3.9
+group: 内置模块
+order: 9.13
version: 2.1
---
@@ -21,7 +22,7 @@ API 开发完成后，当需要发送事件时，需要通过以下方法：
```javascript
/**
- *
+ *
* @param eventName eventName
* @param params event params
*/
@@ -48,7 +49,7 @@ mWXSDKInstance.fireGlobalEventCallback("geolocation",params);
### iOS
-```object-c
+```object-c
[weexInstance fireGlobalEvent:@"geolocation" params:@{@"key":@"value"}];
```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/index.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/index.md b/source/cn/references/modules/index.md
deleted file mode 100644
index 543b9d2..0000000
--- a/source/cn/references/modules/index.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: 内建模块
-type: references
-order: 3
-has_chapter_content: true
-version: 2.1
----
-
-# 内建模块
-
-- [animation](./animation.html)
-- [WebSocket](./websocket.html)
-- [picker](./picker.html)
-- [clipboard](./clipboard.html)
-- [dom](./dom.html)
-- [modal](./modal.html)
-- [navigator](./navigator.html)
-- [storage](./storage.html)
-- [stream](./stream.html)
-- [webview](./webview.html)
-- [globalEvent](./globalevent.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/meta.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/meta.md b/source/cn/references/modules/meta.md
index a7d667e..95c1400 100644
--- a/source/cn/references/modules/meta.md
+++ b/source/cn/references/modules/meta.md
@@ -1,7 +1,8 @@
---
title: meta
type: references
-order: 3.12
+group: 内置模块
+order: 9.06
version: 2.1
---
@@ -41,11 +42,11 @@ import App from './app.vue'
const meta = weex.requireModule('meta')
// 配置 viewport 的宽度为 640px
-meta.setViewport({
+meta.setViewport({
width: 640
})
-App.el = '#root'
+App.el = '#root'
new Vue(App)
```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/modal.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/modal.md b/source/cn/references/modules/modal.md
index 6c42e50..12084c4 100644
--- a/source/cn/references/modules/modal.md
+++ b/source/cn/references/modules/modal.md
@@ -1,7 +1,8 @@
---
title: modal
type: references
-order: 3.4
+group: 内置模块
+order: 9.02
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/navigator.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/navigator.md b/source/cn/references/modules/navigator.md
index fdfa55d..543d858 100644
--- a/source/cn/references/modules/navigator.md
+++ b/source/cn/references/modules/navigator.md
@@ -1,7 +1,8 @@
---
title: navigator
type: references
-order: 3.5
+group: 内置模块
+order: 9.05
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/picker.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/picker.md b/source/cn/references/modules/picker.md
index d1623b0..ed1cff2 100644
--- a/source/cn/references/modules/picker.md
+++ b/source/cn/references/modules/picker.md
@@ -1,7 +1,8 @@
---
title: picker
type: references
-order: 3.11
+group: 内置模块
+order: 9.10
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/storage.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/storage.md b/source/cn/references/modules/storage.md
index 2a88a3a..181ec3a 100644
--- a/source/cn/references/modules/storage.md
+++ b/source/cn/references/modules/storage.md
@@ -1,7 +1,8 @@
---
title: storage
type: references
-order: 3.6
+group: 内置模块
+order: 9.09
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/stream.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/stream.md b/source/cn/references/modules/stream.md
index 2ec1695..4506cd7 100644
--- a/source/cn/references/modules/stream.md
+++ b/source/cn/references/modules/stream.md
@@ -1,7 +1,8 @@
---
title: stream
type: references
-order: 3.7
+group: 内置模块
+order: 9.07
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/timer.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/timer.md b/source/cn/references/modules/timer.md
deleted file mode 100644
index 3ac0c71..0000000
--- a/source/cn/references/modules/timer.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: Timer
-type: references
-version: 0.10
----
-
-# Timer
-Weex Timer可以用来延时启动一个一次性任务或者重复任务。Timer会尽最大努力提供精确的延时，但是延时可能并不精确，延时时间很可能会超过用户期望的时间。实际上，timer仅仅是为了支持HTML5中的polyfill，*不建议*开发者直接使用timer.
-
-## API
-Timer中延时的单位是毫秒，且延时时间应该为一个非负的**int**值(int值最大为0x7FFFFF).如果延时时间为零，会将该任务马上插入任务队列的尾部。对于其他非法值，timer的行为未定义。
-
-### setTimeout(fn, timeout)
-`setTimeout()`会等待指定的时间，然后执行给出的函数。
-* 可以使用 `clearTimeout()`去阻止`setTimeout()`运行如果此时对应的`setTimeout()`还没有运行的话。
-* 如果需要重复执行任务，使用`setInterval()`.
-
-#### Arguments
-* `fn` (function): 待执行的函数.
-* `timeout` (number): 执行函数前的等待时间，单位为毫秒。
-
-#### Return value
-一个Number对象, 表示这个任务的id。把id传入clearTimeout(fnId)中可以用来取消任务。
-
-### setInterval(fn, interval)
-`setInterval()`每隔指定的时间间隔后，会执行对应的函数。`setInterval()`不会停止，除非`clearInterval()`被调用。`setInterval()`的返回值可以用来作为`setInterval()`的参数。
-
-#### Arguments
-* `fn` (function): 待执行的函数。
-* `interval` (number): 这次执行函数与下一次函数之间的时间间隔，单位为毫秒。
-
-#### Return value
-一个Number对象，代表任务序列的id。可以把这个值传入`clearInterval`中来终止重复任务的执行。
-
-### clearTimeout(fnId)
-`clearTimeout()`可以用来提前终止`setTimeout()`启动的任务。仅当`setTimeout()`对应的任务没有被执行时，`clearTimeout()`才可以用来终止该任务，否则`clearTimeout()`没有任何效果。
-
-#### Arguments
-* `fnId` (number): `setTimeout()`的返回值.
-
-### clearInterval(fnId)
- `clearInterval()`可以用来终止 `setInterval()`启动的任务序列。
-
-#### Arguments
-* `fnId` (number): `setInterval()`的返回值
-
-[Try it](http://dotwe.org/vue/ad564965f1eac5a4bc86946ecff70a0c)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/websocket.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/websocket.md b/source/cn/references/modules/websocket.md
index 701af41..f940e0e 100644
--- a/source/cn/references/modules/websocket.md
+++ b/source/cn/references/modules/websocket.md
@@ -1,7 +1,8 @@
---
title: WebSocket
type: references
-order: 3.11
+group: 内置模块
+order: 9.12
version: 2.1
---
@@ -13,7 +14,7 @@ version: 2.1
WebSockets 是一种先进的技术, 这使得在用户的 H5/iOS/Android 和一个服务器之间打开一个的交互式通信会话成为可能, 有了这个 API，你可以向服务器发送消息, 并接收事件驱动的响应, 无需轮询服务器的响应
## **注意：**
-- iOS和h5提供 WebSockets 的 protocol 默认实现，安卓使用需要提供自定义 adapter 实现，source:
+- iOS和h5提供 WebSockets 的 protocol 默认实现，安卓使用需要提供自定义 adapter 实现，source:
- [DefaultWebSocketAdapter.java](https://github.com/apache/incubator-weex/blob/dev/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapter.java);
- [DefaultWebSocketAdapterFactory.java](https://github.com/apache/incubator-weex/blob/dev/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapterFactory.java);
- 集成例子参考weex [playground](https://github.com/apache/incubator-weex/tree/dev/android/playground)
@@ -216,4 +217,4 @@ WebSockets 是一种先进的技术, 这使得在用户的 H5/iOS/Android 和一
</script>
```
-[Have a try](http://dotwe.org/vue/6d8bdfe66f24fda1a2dc6158b0182573)
\ No newline at end of file
+[Have a try](http://dotwe.org/vue/6d8bdfe66f24fda1a2dc6158b0182573)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/modules/webview.md
----------------------------------------------------------------------
diff --git a/source/cn/references/modules/webview.md b/source/cn/references/modules/webview.md
index 7cfe32a..8483c63 100644
--- a/source/cn/references/modules/webview.md
+++ b/source/cn/references/modules/webview.md
@@ -1,7 +1,8 @@
---
title: webview
type: references
-order: 3.8
+group: 内置模块
+order: 9.11
version: 2.1
---