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:10 UTC
[15/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/native-dom-api.md
----------------------------------------------------------------------
diff --git a/source/cn/references/native-dom-api.md b/source/cn/references/native-dom-api.md
deleted file mode 100644
index 91c2308..0000000
--- a/source/cn/references/native-dom-api.md
+++ /dev/null
@@ -1,223 +0,0 @@
----
-title: Native DOM APIs
-type: references
-order: 6
-version: 2.1
-has_chapter_content: true
----
-
-# Native DOM APIs
-
-Weex 在 JS 引擎中，为每个页面都提供了一套 Native DOM APIs，这套接口和 HTML DOM APIs 非常接近，利用这套接口我们可以通过 JavaScript 控制 native 的渲染逻辑。而且 Weex 上层的 Vue 2.0 也是基于这套接口进行适配的。
-
-*绝大多数情况下 JS 框架会把 Native DOM APIs 都封装好，开发者不需要直接对 Native DOM 进行操作。*
-
-* `Document` 类，整个页面文档。
-* `Node` 类，结点的基础类。
-* `Element` 类，元素结点，继承自 `Node`，单个视图单元。
-* `Comment` 类，注释结点，继承自 `Node`，无实际意义，通常用作占位符。
-
-**每个 Weex 页面都有一个 `weex.document` 对象，该对象就是一个 `Document` 类的实例，也是下面所有接口调用的起点。**
-
-接下来详细介绍它们的用法：
-
-## `Document` 类
-
-每个 `Document` 实例在创建的时候都会自动拥有一个 `documentElement` 属性，表示文档结点。该文档结点可以拥有一个 `body`，即文档的主体结点。
-
-**注意事项**: 文档的主体结点只接受 `<div>`、`<list>` 或 `<scroller>` 三种类型的元素结点。
-
-### 构造函数
-
-**`new Document(id: string, url: string?)`**
-
-### 成员方法
-
-**`createElement(tagName: string, props: Object?): Element`**
-
-* 创建一个特定类型 `tagName` 的 `Element` 实例，即一个元素结点。`props` 可以包含 `attr` 对象和 `style` 对象。比如 `createBody('div', {style: {backgroundColor: '#ffffff'}})`。
-
-**`createComment(text: string): Comment`**
-
-* 创建一个 `Comment` 的实例，即一个注释结点，并设置一段文本描述。
-
-**`createBody(tagName: string, props: Object?): Element`**
-
-* 创建文档主体结点，并自动挂载到 `documentElement` 下。
-
-**`fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)`**
-
-* 触发一个特定类型的事件，并附带一个事件对象 `e`。当该事件在产生过程中修改了 DOM 的特性或样式，则第四个参数用来描述这些改变，参数格式和上面 `createElement` 方法的格式相同。
-
-**`destroy()`**
-
-* 销毁当前文档。一旦销毁之后文档将不会再工作。
-
-### 只读成员变量
-
-**`id: string`**
-
-* 每个 `Document` 实例都有一个唯一的 `id`。这同时也是每个 Weex 页面唯一拥有的 `id`。
-
-**`URL: string?`**
-
-* 如果当前 Weex 页面有 JS bundle URL 的话，这里则会返回 这个 URL。
-
-**`body: Element`**
-
-* 文档的主体结点，概念类似 HTML DOM 里的 `document.body`。
-
-**`documentElement: Element`**
-
-* 文档的对应结点，概念类似 HTML DOM 里的 `document.documentElement`。
-* `body` 和 `documentElement` 的关系是：`documentElement` 是 `body` 的父结点。
-
-**`getRef(id): Node`**
-
-* 根据结点 id 获取结点。
-
-## `Node` 类
-
-### 构造函数
-
-**`new Node()`**
-
-### 成员
-
-**`destroy()`**
-
-### 只读成员变量或方法
-
-**`ref: string`**
-
-* 每个 `Node` 实例都有各自的在整个 `Document` 实例中唯一的 `ref` 值。
-
-**`nextSibling: Node?`**
-
-**`previousSibling: Node?`**
-
-**`parentNode: Node?`**
-
-* 上述三个接口和 HTML DOM 的定义吻合。
-
-**`children: Node[]`**
-
-* 该结点拥有的所有子结点的数组。
-
-**`pureChildren: Node[]`**
-
-* 该结点拥有的所有子元素的数组。和 `children` 的区别是，`pureChildren` 只包含了 `Element` 实例而不包含 `Comment` 实例。
-
-## `Element` 类 <small>继承自 `Node`</small>
-
-### 构造函数
-
-**`new Element(type: string, props: Object?)`**
-
-* 创建一个特定类型 `type` 的元素结点，参数 `props` 可以包含 `attr` 对象或 `style` 对象。
-
-### DOM 树操作
-
-**`appendChild(node: Node)`**
-
-**`insertBefore(node: Node, before: Node?)`**
-
-* 上述两个接口类似 HTML DOM。
-
-**`insertAfter(node: Node, after: Node?)`**
-
-* 在一个子结点之前插入新结点 after。
-
-**`removeChild(node: Node, preserved: boolean?)`**
-
-* 删除子结点 `node`，参数 `preserved` 表示立刻从内存中删除还是暂时保留。
-
-**`clear()`**
-
-* 清除所有的子结点。
-
-### DOM 属性本身操作
-
-**`setAttr(key: string, value: string, silent: boolean?)`**
-
-**`setStyle(key: string, value: string, silent: boolean?)`**
-
-* 上述两个接口中，当 `silent` 为真的时候，结点仅更新自己，不会传递命令给客户端渲染层。该参数用来处理用户事件在发生时已经改变结点相关属性的情况下，不会在 Native DOM 也改变之后重复发送命令给客户端。
-
-**`addEvent(type: string, handler: Function)`**
-
-**`removeEvent(type: string)`**
-
-**`fireEvent(type: string, e: any)`**
-
-* 绑定事件、解绑定事件、触发事件。
-
-#### 特定组件类型的组件方法
-
-特殊的：不同组件类型可以拥有自己特有的方法，比如 `<web>` 组件支持 `refresh` 方法，详见各组件的描述，在此情况下，我们会产生特定组件类型的 class，比如 `WebElement`，它继承自 `Element`。
-
-如：
-
-> #### `WebElement` <small>继承自 `Element`</small>
->
-> 表示在 Weex 页面中嵌入一个 webview
->
-> **`refresh()`**: 刷新当前 webview
-
-### 只读成员变量或方法
-
-**`ref`, `nextSibling`, `previousSibling`, `parentNode`**
-
-* 继承自 `Node`。
-
-**`nodeType: number`**
-
-* 永远是数字 `1`。
-
-**`type: string`**
-
-* 和构造函数里的 `type` 一致。
-
-**`attr: Object`**
-
-* 当前结点的所有特性的键值对。推荐通过 `setAttr()` 方法进行修改，而不要直接修改这里的对象。
-
-**`style: Object`**
-
-* 当前结点的所有样式的键值对。推荐通过 `setStyle()` 方法进行修改，而不要直接修改这里的对象。
-
-**`event: Object`**
-
-* 当前结点的所有事件绑定。每个事件类型对应一个事件句柄方法。推荐通过 `addEvent()` / `removeEvent()` 方法进行修改，而不要直接修改这里的对象。
-
-**`toJSON(): Object`**
-
-* 返回描述该元素结点的一段 JSON 对象，形如：`{ref: string, type: string, attr: Object, style: Object, event: Array(string), children: Array}`。
-
-## `Comment` 类 <small>继承自 `Node`</small>
-
-### 构造函数
-
-**`new Comment(value: string)`**
-
-### 只读成员变量或方法
-
-**`ref`, `nextSibling`, `previousSibling`, `parentNode`**
-
-* 继承自 `Node`。
-
-**`nodeType: number`**
-
-* 永远是数字 `8`。
-
-**`type: string`**
-
-* 永远是字符串 `'comment'`
-
-**`value: string`**
-
-* 和构造函数里的 `value` 一致。
-
-**`toJSON(): Object`**
-
-* 返回描述该注释结点的一段 JSON 对象，形如：`<!-- value -->`。
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/path.md
----------------------------------------------------------------------
diff --git a/source/cn/references/path.md b/source/cn/references/path.md
deleted file mode 100644
index 9e5a889..0000000
--- a/source/cn/references/path.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Path (英)
-type: references
-order: 1.9
-version: 2.1
-has_chapter_content: true
----
-
-# Path
-
-<span class="weex-version">v0.9+</span>
-
-本文将介绍 Weex 中 uri(url) 的用法。包括使用图像、字体等资源，处理相对路径以及如何访问本地及打包的资源文件。
-
-## Schemes
-
-* 本地资源
-
- Weex SDK 提供 `local` scheme 来访问打包在应用程序中的资源，此 scheme 无法在 H5 环境下使用。目前，开发者可以在 `image` 组件和字体文件中使用本地资源。
-
- * 在 iOS 中，Weex 会在 `bundle resources` 中查找。例如，`image` 组件的 `src` 属性为 `local:///app_icon'`， Weex 会加载 `bundle resouce` 中名为 `app_icon` 的图像资源，而字体文件也以相同的方式工作。
-
- * 在 Android 中，`image` 组件将从 `drawable` 资源文件夹加载，如 `res/drawable-xxx`。但加载字体文件是不同的，Android 框架无法从 `res` 加载字体文件，因此 SDK 将从 `asserts` 文件夹加载它。
-
-* HTTP/HTTPS
-
- 它的工作方式与 web 相同，Weex 一直支持这种方式。
-
-* File
-
-使用 `file` scheme 访问本地磁盘文件。这个方案有其局限性：你不应该在源页面中硬编码文件 url。因为不管它是否在不同的平台（iOS，Android）上运行，内容将在另一个设备上完全不同，这取决于具体的设备。
-
-所以一种可行的方案是在运行时动态获取文件 url，你可以使用它来显示本地磁盘的图像，或者稍后上传它。
-
-## 相对路径
-
-[与我们在 HTML 中的用法类似](https://www.w3.org/TR/html4/types.html#type-uri)，Weex 以相同的方式处理相对路径。以`/`、`.`、`..`、`//` 开头的相对 URI 将相对于 bunle url 解析。
-
-这意味着， 一个以 `/` 开头的路径将是相对于 JS Bundle 文件的根文件夹。`.` 则是当前文件夹，`..` 是父文件夹。 `//` 则被解析为与 JS Bundle 相同的 scheme。
-
-## URI Adapter
-
-以上所有是默认实现，开发者可以通过提供一个 `URI Adapter` 来扩展或覆盖默认实现。与其他 Adapter 相同，应在 Weex SDK 初始化之前设置自定义 Adapter。
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/platform-difference.md
----------------------------------------------------------------------
diff --git a/source/cn/references/platform-difference.md b/source/cn/references/platform-difference.md
deleted file mode 100644
index 8789ebf..0000000
--- a/source/cn/references/platform-difference.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: Weex 和 Web 平台的差异
-type: references
-order: 12
-version: 2.1
-has_chapter_content: true
----
-
-# Weex 和 Web 平台的差异
-
-Weex 是一个跨平台解决方案，Web 平台只是其一种运行环境，除此之外还可以在 Android 和 iOS 客户端中运行。原生开发平台和 Web 平台之间的差异，在功能和开发体验上都有一些差异。
-
-## Weex 环境中没有 DOM
-
-DOM（Document Object Model），即文档对象模型，是 HTML 和 XML 文档的编程接口，是 Web 中的概念。Weex 的运行环境以原生应用为主，在 Android 和 iOS 环境中渲染出来的是原生的组件，不是 DOM Element。
-
-### 不支持 DOM 操作
-
-既然原生环境中不支持 Web API，没有 `Element` 、`Event` 、`File` 等对象，详细列表可以参考 [Web APIs on MDN](https://developer.mozilla.org/en-US/docs/Web/API)。不支持选中元素，如 `document.getElementById` 、 `document.querySelector` 等；当然也不支持基于 DOM API 的程序库（如 jQuery）。
-
-### 有限的事件类型
-
-Weex 支持在标签上绑定事件，和在浏览器中的写法一样，但是 Weex 中的事件是由原生组件捕获并触发的，行为和浏览器中有所不同，事件中的属性也和 Web 中有差异。
-
-+ 并不支持 Web 中所有的事件类型，详情请参考[《通用事件》](./common-event.html)。
-+ 不区分事件的捕获阶段和冒泡阶段，相当于 DOM 0 级事件。
-
-## Weex 环境中没有 BOM
-
-BOM（Browser Object Model），即浏览器对象模型，是浏览器环境为 javascript 提供的接口。Weex 在原生端没有并不基于浏览器运行，不支持浏览器提供的 BOM 接口。
-
-### 没有 `window` 、`screen` 对象
-
-Weex 中并未提供浏览器中的 `window` 和 `screen` 对象，不支持使用全局变量。如果是想要获取设备的屏幕或环境信息，可以使用 `WXEnvironment` 变量。
-
-+ `WXEnvironment`
- + `weexVersion`: WeexSDK 的版本。
- + `appName`: 应用的名称。
- + `appVersion`: 应用的版本。
- + `platform`: 运行平台，可能的值是 `Web` 、`Android` 、`iOS` 之一。
- + `osName`: 系统的名称。
- + `osVersion`: 系统版本。
- + `deviceWidth`: 设备宽度。
- + `deviceHeight`: 设备高度。
-
-### 没有 `document` 对象
-
-在浏览器中 `document` 表示了当前活动的文档模型，在 Android 和 iOS 环境中并没有这个对象，也不支持与其相关的 DOM 操作。
-
-### 没有 `history` 、`location` 、`navigator` 对象
-
-+ `history` 保存了当前页面的历史记录，并且提供了前进后退操作。
-+ `location` 记录了当前页面 URL 相关的信息。
-+ `navigator` 记录了当前浏览器中的信息。
-
-这些接口与浏览器自身的实现有关，可以控制页面的前进后退并且获取状态信息。虽然在 Android 和 iOS 中也有“历史”和“导航”的概念，但是它是用于多个管理视图之间的跳转的。换句话说，在浏览器中执行“前进”、“后退”仍然会处于同一个页签中，在原生应用中“前进”、“后退”则会真实的跳转到其他页面。
-
-此外 Weex 也提供了 `navigator` 模块来操作页面的跳转，使用方法参考[《navigator 导航控制》](./modules/navigator.html)。
-
-## 能够调用移动设备原生 API
-
-在 Weex 中能够调用移动设备原生 API，使用方法是通过注册、调用模块来实现。其中有一些模块是 Weex 内置的，如 clipboard 、 navigator 、storage 等。
-
-+ [《clipboard 剪切板》](./modules/clipboard.html)
-+ [《navigator 导航控制》](./modules/navigator.html)
-+ [《storage 本地存储 》](./modules/storage.html)
-
-为了保持框架的通用性，Weex 内置的原生模块有限，不过 Weex 提供了横向扩展的能力，可以扩展原生模块，具体的扩展方法请参考[《iOS 扩展》](./advanced/index.html) 和[《Android 扩展》](./advanced/extend-to-android.html)。
-
-> 有些接口在浏览器环境中也存在，不过在使用时应该注意浏览器的兼容性；如剪贴板功能，出于安全性考虑，绝大多数浏览器都限制其使用。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/text-style.md
----------------------------------------------------------------------
diff --git a/source/cn/references/text-style.md b/source/cn/references/text-style.md
deleted file mode 100644
index 06ebf5a..0000000
--- a/source/cn/references/text-style.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: 文本样式
-type: references
-order: 1.5
-version: 2.1
----
-
-# 文本样式
-
-<span class="weex-version">v0.5+</span>
-
-文本类组件共享一些通用样式, 这类组件目前包括 [`<text>`](./components/text.html) 和 [`<input>`](./components/input.html)。
-
-## 属性
-
-- `color {color}`：文字颜色。
-
- 可选值为色值，支持 RGB（ `rgb(255, 0, 0)` ）；RGBA（ `rgba(255, 0, 0, 0.5)` ）；十六进制（ `#ff0000` ）；精简写法的十六进制（ `#f00` ）；色值关键字（`red`）。
-
-- `lines {number}`: 指定文本行数。仅在 `<text>` 组件中支持。默认值是 `0` 代表不限制行数。
-
-- `font-size {number}`：文字大小。
-
-- `font-style {string}`：字体类别。可选值 `normal` | `italic`，默认为 `normal`。
-
-- `font-weight {string}`<span class="api-version">v0.9+</span>：字体粗细程度
-
- * 可选值: `normal`, `bold`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`
- * normal 等同于 400, bold 等同于 700；
- * 默认值: `normal`；
- * iOS 支持 9 种 font-weight值；Android 仅支持 400 和 700, 其他值会设为 400 或 700
- * 类似 `lighter`, `bolder` 这样的值暂时不支持
-
-- `text-decoration {string}`：字体装饰，可选值 `none` | `underline` | `line-through`，默认值为 `none`。
-
-- `text-align {string}`：对齐方式。可选值 `left` | `center` | `right`，默认值为 `left`。目前暂不支持 `justify`, `justify-all`。
-
-- `font-family {string}`：设置字体。
-
- 这个设置 **不保证** 在不同平台，设备间的一致性。如所选设置在平台上不可用，将会降级到平台默认字体。
-
-- `text-overflow {string}`：设置内容超长时的省略样式。可选值 `clip` | `ellipsis`
-
-## 其它参考
-
-- [颜色关键字列表](./color-names.html)。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/unit.md
----------------------------------------------------------------------
diff --git a/source/cn/references/unit.md b/source/cn/references/unit.md
deleted file mode 100644
index 65931bf..0000000
--- a/source/cn/references/unit.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: CSS 单位
-type: references
-order: 4
-version: 2.1
-has_chapter_content: true
----
-
-# CSS 单位
-
-## CSS `color` 单位
-
-支持以下写法：
-
-```css
-.classA {
- /* 3-chars hex */
- color: #0f0;
- /* 6-chars hex */
- color: #00ff00;
- /* rgba */
- color: rgb(255, 0, 0);
- /* rgba */
- color: rgba(255, 0, 0, 0.5);
- /* transparent */
- color: transparent;
- /* Basic color keywords */
- color: orange;
- /* Extended color keywords */
- color: darkgray;
-}
-```
-
-### 注意
-
-* 不支持 `hsl()`, `hsla()`, `currentColor`, 8个字符的十六进制颜色。
-
-* `rgb(a,b,c)` 或 `rgba(a,b,c,d)` 的性能比其他颜色格式差很多，请选择合适的颜色格式。
-
-颜色名称可查看 [颜色名称列表](./color-names.html).
-
-## CSS `length` 单位
-
-在 Weex 中，我们只支持 `px` 长度单位。并且它将在 JavaScript 运行时和本机渲染器中解析为数字类型。
-
-下面这些不同的写法，解析的结果完全相同。
-
-```css
-.classA { font-size: 48px; line-height: 64px; }
-```
-
-不支持类似 `em`，`rem`，`pt` 这样的 CSS 标准中的其他长度单位。
-
-## CSS `number` 单位
-
-仅仅一个数字。用于 [`opacity`](./common-style.html)，[`lines`](./text-style.html)等。
-
-有时值必须是整数，例如：`lines`。
-
-## CSS `percentage` 单位 (暂不支持)
-
-表示百分比值，如“50％”，“66.7％”等。
-
-它是 CSS 标准的一部分，但 Weex 暂不支持。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/vue/difference-of-vuex.md
----------------------------------------------------------------------
diff --git a/source/cn/references/vue/difference-of-vuex.md b/source/cn/references/vue/difference-of-vuex.md
deleted file mode 100644
index ce1a560..0000000
--- a/source/cn/references/vue/difference-of-vuex.md
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: 使用 Vuex 和 vue-router
-type: references
-order: 10.2
-version: 2.1
----
-
-# 使用 Vuex 和 vue-router
-
-Vue.js 也有较多周边技术产品，如 [Vuex](https://github.com/vuejs/vuex) 和 [vue-router](https://github.com/vuejs/vue-router) 等，这些库也可以在 Weex 中很好的工作。
-
-> 我们基于 Weex 和 Vue 开发了一个的完整项目 [weex-hackernews](https://github.com/weexteam/weex-hackernews) ，在项目中使用了 Vuex 和 vue-router ，能够实现同一份代码，在 iOS、Android、Web 下都能完整地工作。
-
-## 使用 Vuex
-
-
-
-Vuex 是一个专为 Vue.js 应用程序开发的状态管理工具库，可以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
-
-由于在 Vuex 本身就是平台无关的，有较强的移植能力，完全可以在 Weex 中正常地使用 Vuex ，阅读其[官方文档](https://vuex.vuejs.org/zh-cn/)可以了解详细的使用方法。
-
-Vuex 也集成到了其官方调试工具 [devtools extension](https://github.com/vuejs/vue-devtools)中，提供了诸如 time-travel 调试、状态快照导入导出等高级调试功能。这些工具在 Web 平台中可以一如既往地工作。
-
-## 使用 vue-router
-
-vue-router 是专为 Vue.js 开发的便于实现单页应用的工具库，能够以声明式的方法编写页面的导航和跳转信息。
-
-由于 Weex 的运行环境不只是浏览器，通常是以移动端原生环境为主，然而在 Android 和 iOS 中都没有浏览器的 History API，也不存在 DOM，因此如果想在 Weex 环境中使用 vue-router ，有些功能受到了限制，使用时应该注意。
-
-### 路由模式
-
-vue-router 提供了三种运行模式：
-
-+ `hash`: 使用 URL hash 值来作路由。默认模式。
-+ `history`: 依赖 HTML5 History API 和服务器配置。查看 [HTML5 History 模式](https://router.vuejs.org/zh-cn/essentials/history-mode.html)。
-+ `abstract`: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。
-
-配置方法是在定义路由时，传递 `mode` 属性：
-
-```js
-new Router({
- mode: 'abstract',
- // ...
-})
-```
-
-从三种模式的介绍中也可以看出来，Weex 环境中只支持使用 abstract 模式。不过，vue-router 自身会对环境做校验，**如果发现没有浏览器的 API，vue-router 会自动强制进入 abstract 模式**，所以在使用时只要不写 `mode` 配置即可。默认 vue-router 会在浏览器环境中使用 hash 模式，在移动端原生环境中使用 abstract 模式。
-
-### 编程式导航
-
-vue-router 中使用 `<router-link>` 创建导航链接，不过在其中使用了基于 DOM 事件的一些特性，在 Weex 原生环境中并不能很好的工作。在 Weex 中，你必须使用[编程式导航](https://router.vuejs.org/zh-cn/essentials/navigation.html)来编写页面跳转逻辑。
-
-编程式导航其实就是通过主动调用 router 实例上的 `push` 方法实现跳转。
-
-使用 `<router-link>` 的代码示例：
-
-```html
-<!-- 只能在 Web 中使用，Native 环境不支持！ -->
-<template>
- <div>
- <router-link to="profile">
- <text>Profile</text>
- </router-link>
- </div>
-</template>
-```
-
-在 Weex 中，需要写成这个样子：
-
-```html
-<template>
- <div>
- <text @click="jump">Profile</text>
- </div>
-</template>
-
-<script>
- import router from './path/to/router'
- export default {
- methods: {
- jump () {
- router.push('profile')
- }
- }
- }
-</script>
-```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/vue/difference-with-web.md
----------------------------------------------------------------------
diff --git a/source/cn/references/vue/difference-with-web.md b/source/cn/references/vue/difference-with-web.md
deleted file mode 100644
index 99ac620..0000000
--- a/source/cn/references/vue/difference-with-web.md
+++ /dev/null
@@ -1,137 +0,0 @@
----
-title: Vue 2.x 在 Weex 和 Web 中的差异
-type: references
-order: 10.1
-version: 2.1
----
-
-
-# Vue.js 在 Weex 和 Web 中的差异
-
-## 平台差异
-
-Vue.js 最初是为 Web 平台设计的，虽然可以基于 Weex 开发原生应用，但是 Web 开发和原生开发毕竟不同，在功能和开发体验上都有一些差异，这些差异从本质上讲是原生开发平台和 Web 平台之间的差异，可以通过[《Weex 和 Web 平台的差异》](../platform-difference.html)了解更多细节和原因。
-
-由于运行平台存在差异，Weex 不支持 Vue.js 中与 DOM 相关的功能：
-
-+ 不支持事件冒泡和捕获机制，`.prevent` 、`.capture` 、`.stop` 、`.self` 等事件修饰符在原生环境中无意义。
-+ 键盘事件的 `.{keyCode | keyAlias}` 修饰符在原生环境中无意义。(参考 [Vue 相关文档](https://cn.vuejs.org/v2/guide/events.html#按键修饰符))
-+ 无需自行调用 `vm.$mount`，默认会将入口组件挂载到原生应用的视图中。
-+ 不支持 `v-html` 和 `v-text` 指令。
-
-## 功能差异
-
-### 仅引入了 Vue Runtime
-
-Vue 除了提供默认的完整包以外，还提供一个更小巧的 `vue.runtime.js`，在这个文件中移除了模板编译的相关操作，Weex 中也仅引入 Vue Runtime 的功能，这样做除了可以减少代码体积以外，还能减少运行期编译模板的负担，提升性能。
-
-具体的差异有：
-
-+ 定义组件时不支持使用 `template` 属性。
-+ 不支持使用 `x-templates`。
-+ 不支持使用 `Vue.compile`。
-
-### 隔离多页面的作用域
-
-Weex 在原生端使用的是“多页”的实现，不同的 js bundle 将会在不同的原生页面中执行；也就是说，不同的 js bundle 之间将不同共享 js 变量。即使是 `Vue` 这个变量，在不同页面中也对应了不同的引用。
-
-基于这个特性，Vue 中全局功能将只在当前页面内生效：
-
-+ `Vue.config`
-+ `Vue.component`
-+ `Vue.directive`
-+ `Vue.filter`
-+ `Vue.mixin`
-+ `Vue.use`
-
-> 注：以上接口的功能并未受影响，只是其生效范围将会限制在同一页面内。
-
-## 样式差异
-
-Web 中的 CSS 非常的灵活，积累了特别多的属性，支持多种布局方法；这是其优势，也是浏览器性能优化的一个瓶颈。
-
-Weex 中的样式是由原生渲染器解析的，出于性能和功能复杂度的考虑，Weex 对 CSS 的特性做了一些取舍，使其更符合最佳实践。
-
-### 单类名选择器和作用域
-
-Weex 中只支持单个类名选择器，不支持关系选择器，也不支持属性选择器。
-
-```css
-/* 支持单个类名选择器 */
-.one-class {
- font-size: 36px;
-}
-
-/* 不支持关系选择器 */
-.parent > .child {
- padding-top: 10px;
-}
-
-/* 不支持属性选择器，不支持 `v-cloak` 指令 */
-[v-cloak] {
- color: #FF6600;
-}
-```
-
-这个只是对样式定义的限制，不影响样式类名的使用，在标签中可以添加多个样式类名，如：
-
-```html
-<template>
- <div class="one two three"><div>
-</template>
-```
-
-### 组件级别的作用域
-
-在 Weex 中，写在组件 `<style>` 里的样式只能用在当前组件中，默认是 `scoped` 作用域。为了保持和 Native 的一致性，建议在 `.vue` 文件中写样式时，加上 `scoped` 属性，即： `<style scoped>`。
-
-### 支持的样式属性
-
-Weex 支持的样式特性是 CSS 的子集，并且会不断扩充；在实现过程中我们参考了 [CSS 属性在浏览器中的使用频率](https://gist.github.com/Jinjiang/ea6b403036b7287cf8b8508729b77ac0#css-properties)，优先实现其中频率最高的一些属性。
-
-Weex 支持了基本的盒模型和 flexbox 布局，以及其他常用样式，详情可参考[Weex 通用样式文档](../common-style.html)。
-
-在编写样式时，还应该注意一下几点：
-
-+ 不需要写样式前缀。
-+ Weex 不支持 `display: none;`，因此也不支持 `v-show` 指令。
-+ 为了优化样式解析的效率，样式属性暂不支持简写，涉及一下属性：
- + `border` 、`border-(top|bottom|left|right)`
- + `margin`
- + `padding`
- + `flex`
-
-## 编译环境的差异
-
-在 Weex 中使用 Vue.js ，你所需要关注的运行平台除了 Web 之外还有 Android 和 iOS ，在开发和编译环境上还有一些不同点。针对 Web 和原生平台，将 Vue 项目源文件编译成目标文件，有两种不同的方式：
-
-+ 针对 Web 平台，和普通 Vue 2.X 项目一样，可以使用任意官方推荐的方式编译源文件，如 Webpack + vue-loader 或者 Browserify + vueify 。
-+ 针对 Android 和 iOS 平台，我们提供了 [weex-loader](https://github.com/weexteam/weex-loader) 工具支持编译 `.vue` 格式的单文件组件；也就是说，目前只能使用 Webpack + weex-loader 来生成原生端可用的 js bundle。
-
-### 使用 weex-loader
-
-weex-loader 是 Webpack 的一个加载器，使用方法参考其[官方文档](http://webpack.github.io/docs/using-loaders.html)。需要提醒的是，如果 Webpack 配置的入口文件是个 `.vue` 格式的文件的话，还需要额外传递 `entry` 参数，通常设置为 `true`，表示将当前组件作为入口组件。为了能正常匹配 `.vue` 文件，Webpack 配置文件中 weex-loader 的匹配规则也需要有所调整。
-
-```js
-module.exports = {
- // 针对 .vue 文件要添加 entry 参数
- entry: './path/to/App.vue?entry=true',
-
- // 其他配置项 ...
-
- module: {
- loaders: [{
-
- // 匹配包含了 entry 参数的 .vue 文件路径
- test: /\.vue(\?[^?]+)?$/,
- loaders: ['weex-loader']
- }]
- },
-}
-```
-
-如果使用 `.js` 文件作为 Webpack 配置的入口文件，则不需要额外配置这些参数，我们推荐使用 Javascript 文件作为编译的入口文件。
-
-### 搭建原生开发环境
-
-Weex 项目生成的是原生应用，学习一些开发原生应用的基础知识，会对你开发 Weex 项目很有帮助。参考[《集成 Weex 到已有应用》](../../guide/integrate-to-your-app.html)了解更多信息。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/vue/index.md
----------------------------------------------------------------------
diff --git a/source/cn/references/vue/index.md b/source/cn/references/vue/index.md
deleted file mode 100644
index 75d165f..0000000
--- a/source/cn/references/vue/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Vue
-type: references
-order: 10
-version: 2.1
----
-
-
-# Vue
-
-- [Vue 2.x 在 Weex 和 Web 中的差异](./difference-with-web.html)
-- [使用 Vuex 和 vue-router](./difference-of-vuex.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/web-standards.md
----------------------------------------------------------------------
diff --git a/source/cn/references/web-standards.md b/source/cn/references/web-standards.md
deleted file mode 100644
index 3d35a47..0000000
--- a/source/cn/references/web-standards.md
+++ /dev/null
@@ -1,584 +0,0 @@
----
-title: Web 标准
-type: references
-order: 8
-version: 2.1
-has_chapter_content: true
----
-
-# Weex 中的 Web 标准
-
-## HTML
-
-refs: https://www.advancedwebranking.com/html/ 2016-12-11
-
-### Overview
-
-| percentage | name | supported |
-| ---- | ---- | ---- |
-| 98.1% | `<head>` | - |
-| 97.9% | `<body>` | - |
-| 97.9% | `<html>` | - |
-| 97% | `<title>` | - |
-| 93.9% | `<meta>` | - |
-| 89.9% | `<div>` | ✓ |
-| 89.6% | `<a>` | ✓ |
-| 88.5% | `<script>` | ✓ |
-| 86.5% | `<link>` | - |
-| 86.3% | `<img>` | ✓ |
-| 81.5% | `<p>` | - (can be customized) |
-| 75.6% | `<span>` | - (can be customized) |
-| 73.8% | `<li>` | - (can be customized) |
-| 73.7% | `<ul>` | - (can be customized) |
-| 70.3% | `<br>` | ✕ |
-| 60.4% | `<style>` | ✓ |
-| 55.8% | `<h1>` | - (can be customized) |
-| 52.7% | `<h2>` | - (can be customized) |
-| 48.4% | `<input>` | ✓ |
-| 46.9% | `<form>` | ✕ |
-| 44.3% | `<strong>` | - (can be customized) |
-| 43.1% | `<h3>` | - (can be customized) |
-| 30.9% | `<table>` | ✕ |
-| 30.3% | `<tr>` | ✕ |
-| 30.2% | `<td>` | ✕ |
-
-### Forms
-
-| percentage | name | supported |
-| ---- | ---- | ---- |
-| 49.5% | `<option>` | ✕ |
-| 30.2% | `<input>` | ✓ |
-| 16.6% | > `[type="hidden"]` | - |
-| 8% | > `[type="text"]` | ✓ |
-| 4.2% | > `[type="submit"]` | - |
-| 2% | > `[type="checkbox"]` | - (`<switch>`) |
-| 1.2% | > `[type="email"]` | ✓ |
-| 1.1% | > `[type="radio"]` | ✕ |
-| 0.9% | > `[type="image"]` | - |
-| 0.8% | > `[type="button"]` | - |
-| 0.6% | > `[type="search"]` | ✕ |
-| 0.6% | > `[type="password"]` | ✓ |
-| 0.1% | > `[type="tel"]` | ✓ |
-| 0.1% | > `[type="number"]` | ✓ |
-| 0% | > `[type="reset"]` | - |
-| 0% | > `[type="file"]` | ✕ |
-| 0% | > `[type="date"]` | ✓ |
-| 0% | > `[type="url"]` | ✓ |
-| 0% | > `[type="range"]` | ✕ |
-| 0% | > `[type="color"]` | ✕ |
-| 0% | > `[type="time"]` | ✓ |
-| 0% | > `[type="datetime-local"]` | ✕ |
-| 7.2% | `<label>` | - |
-| 6.1% | `<form>` | - |
-| 3.7% | `<button>` | - (can be customized) |
-| 2.6% | > `[type="button"]` | - |
-| 1.3% | > `[type="submit"]` | - |
-| 0% | > `[type="reset"]` | - |
-| 1.9% | `<select>` | ✕ |
-| 0.7% | `<textarea>` | ✓ |
-| 0.5% | `<fieldset>` | - |
-| 0.1% | `<optgroup>` | ✕ |
-| 0.1% | `<legend>` | - |
-| 0% | `<progress>` | ✕ |
-| 0% | `<datalist>` | - |
-| 0% | `<output>` | - |
-| 0% | `<meter>` | - |
-
-## CSS Properties
-
-refs: https://www.chromestatus.com/metrics/feature/popularity 2016-12-11
-
-| percentage | name | supported |
-| ---- | ---- | ---- |
-| 90.5115% | display | ✕ `flex` only |
-| 89.8243% | margin | ✓ (not support combo) |
-| 88.7012% | width | ✓ |
-| 88.6468% | overflow | ✓ iOS only, `hidden` only for Android |
-| 88.6432% | background-color | ✓ |
-| 88.0803% | height | ✓ |
-| 87.7648% | font-size | ✓ |
-| 87.3837% | padding | ✓ |
-| 87.2721% | color | ✓ |
-| 86.9788% | text-align | ✓ |
-| 86.6841% | position | ✓ `relative` by default, `static` not supported |
-| 86.6039% | font-family | ✓ |
-| 86.5943% | font-weight | ✓ |
-| 85.0072% | opacity | ✓ |
-| 80.6911% | max-width | ✕ |
-| 79.4476% | box-sizing | ✕ `border-box` only |
-| 75.7623% | max-height | ✕ |
-| 74.9939% | webkit-user-select | ✕ |
-| 57.0292% | align-items | ✓ |
-| 56.8182% | justify-content | ✓ `space-around` not supported well in browser |
-| 50.5941% | flex-direction | ✓ |
-| 48.5052% | border | ✓ |
-| 47.5161% | top | ✓ |
-| 46.9136% | background | ✕ |
-| 46.1552% | cursor | ✕ |
-| 46.1443% | margin-left | ✓ |
-| 46.0956% | left | ✓ |
-| 46.0848% | text-decoration | ✓ |
-| 45.9575% | float | ✕ |
-| 45.8391% | border-bottom | ✓ |
-| 45.7639% | padding-left | ✓ |
-| 45.7128% | margin-top | ✓ |
-| 45.7013% | line-height | ✓ |
-| 45.5836% | background-image | ✕ |
-| 45.0837% | z-index | ✕ |
-| 45.0649% | right | ✓ |
-| 45.0516% | margin-bottom | ✓ |
-| 45.0459% | white-space | ✕ |
-| 44.8710% | margin-right | ✓ |
-| 44.8476% | vertical-align | ✕ |
-| 44.6306% | padding-top | ✓ |
-| 44.1466% | border-radius | ✓ |
-| 44.0136% | border-top | ✓ |
-| 43.9815% | padding-bottom | ✓ |
-| 43.9392% | padding-right | ✓ |
-| 43.8539% | visibility | ✕ |
-| 43.4306% | background-position | ✕ |
-| 43.4098% | background-repeat | ✕ |
-| 43.0391% | clear | ✕ |
-| 42.9100% | bottom | ✓ |
-| 42.2092% | content | ✕ |
-| 42.0690% | box-shadow | ✕ |
-| 41.9004% | border-color | ✓ |
-| 41.7341% | outline | ✕ |
-| 41.4297% | border-right | ✓ |
-| 41.2605% | border-left | ✓ |
-| 41.1127% | min-height | ✕ |
-| 41.0736% | font-style | ✓ |
-| 41.0523% | min-width | ✕ |
-| 40.4298% | list-style | ✕ |
-| 39.7341% | font | ✕ |
-| 38.8999% | background-size | ✕ |
-| 38.7811% | border-width | ✓ |
-| 38.7718% | border-collapse | ✕ |
-| 37.8110% | border-style | ✓ |
-| 37.4962% | text-overflow | ✓ must work with `lines` |
-| 37.3471% | text-transform | ✕ |
-| 37.2154% | transition | ✕ |
-| 36.5155% | overflow-y | ✕ |
-| 36.3025% | transform | ✕ |
-| 36.2488% | text-indent | ✕ |
-| 35.5075% | text-shadow | ✕ |
-| 34.7607% | webkit-appearance | ✕ |
-| 34.1925% | list-style-type | ✕ |
-| 34.0238% | border-spacing | ✕ |
-| 33.6664% | word-wrap | ✕ |
-| 31.9961% | overflow-x | ✕ |
-| 31.9922% | zoom | ✕ |
-| 31.2495% | border-bottom-left-radius | ✕ |
-| 31.1306% | pointer-events | ✕ |
-| 31.1229% | border-top-left-radius | ✕ |
-| 30.2131% | border-bottom-color | ✓ |
-| 29.9608% | border-top-color | ✓ |
-| 29.4297% | border-bottom-right-radius | ✕ |
-| 29.2668% | border-top-right-radius | ✕ |
-| 28.6489% | letter-spacing | ✕ |
-| 27.8327% | animation | ✕ |
-| 26.6738% | border-right-width | ✓ |
-| 26.0169% | src | ✕ |
-| 25.2661% | clip | ✕ |
-| 25.2512% | webkit-font-smoothing | ✕ |
-| 25.1971% | border-bottom-width | ✓ |
-| 25.0246% | border-right-color | ✓ |
-| 24.7790% | direction | ✕ |
-| 24.4094% | webkit-tap-highlight-color | ✕ |
-| 23.9751% | border-left-color | ✓ |
-| 23.9321% | border-top-width | ✓ |
-| 23.7902% | fill | ✕ |
-| 23.2617% | border-left-width | ✓ |
-| 22.7278% | table-layout | ✕ |
-| 21.5766% | word-break | ✕ |
-| 20.4319% | background-clip | ✕ |
-| 19.3198% | transform-origin | ✕ |
-| 18.9233% | filter | ✕ |
-| 17.7879% | resize | ✕ |
-| 16.2501% | flex | ✕ |
-| 15.1656% | font-variant | ✕ |
-| 14.9181% | text-rendering | ✕ |
-| 14.7125% | webkit-filter | ✕ |
-| 14.5263% | transition-duration | ✕ |
-| 14.3966% | transition-property | ✕ |
-| 14.2124% | webkit-box-orient | ✕ |
-| 13.5432% | outline-offset | ✕ |
-| 12.9300% | transition-timing-function | ✕ |
-| 12.2788% | unicode-range | ✕ |
-| 12.0880% | word-spacing | ✕ |
-| 11.9124% | quotes | ✕ |
-| 11.6800% | border-bottom-style | ✓ |
-| 11.4263% | webkit-background-clip | ✕ |
-| 11.0070% | flex-grow | ✕ |
-| 10.5925% | backface-visibility | ✕ |
-| 10.4417% | animation-name | ✕ |
-| 10.4302% | stroke | ✕ |
-| 10.4144% | animation-duration | ✕ |
-| 10.2804% | touch-action | ✕ |
-| 9.9663% | list-style-position | ✕ |
-| 9.8662% | order | ✕ |
-| 9.7770% | outline-width | ✕ |
-| 9.7504% | transition-delay | ✕ |
-| 9.4689% | border-top-style | ✓ |
-| 9.3474% | webkit-box-pack | ✕ |
-| 9.3078% | webkit-box-align | ✕ |
-| 9.2375% | page-break-inside | ✕ |
-| 9.1898% | webkit-line-clamp | ✕ |
-| 8.9350% | list-style-image | ✕ |
-| 8.8339% | page-break-after | ✕ |
-| 8.5735% | speak | ✕ |
-| 8.4754% | unicode-bidi | ✕ |
-| 8.4307% | animation-timing-function | ✕ |
-| 8.1464% | webkit-box-flex | ✕ |
-| 8.0048% | orphans | ✕ |
-| 7.9947% | widows | ✕ |
-| 7.6671% | flex-wrap | ✓ not supported well in browser |
-| 7.5756% | animation-fill-mode | ✕ |
-| 7.4163% | animation-delay | ✕ |
-| 7.3284% | border-left-style | ✓ |
-| 7.1586% | outline-color | ✕ |
-| 6.9102% | flex-shrink | ✕ |
-| 6.7754% | perspective | ✕ |
-| 6.7748% | border-right-style | ✓ |
-| 6.4619% | outline-style | ✕ |
-| 6.0382% | animation-iteration-count | ✕ |
-| 5.9838% | background-origin | ✕ |
-| 5.9714% | fill-opacity | ✕ |
-| 5.9357% | will-change | ✕ |
-| 5.3740% | stroke-width | ✕ |
-| 5.3172% | transform-style | ✕ |
-| 5.2608% | overflow-wrap | ✕ |
-| 5.1730% | background-attachment | ✕ |
-| 4.9039% | counter-increment | ✕ |
-| 4.5950% | counter-reset | ✕ |
-| 4.5031% | align-self | ✕ |
-| 4.4109% | webkit-box-ordinal-group | ✕ |
-| 4.4046% | webkit-animation-direction | ✕ |
-| 3.7598% | background-position-x | ✕ |
-| 3.6867% | border-image | ✕ |
-| 3.6601% | background-position-y | ✕ |
-| 3.5749% | webkit-user-drag | ✕ |
-| 3.3376% | flex-basis | ✕ |
-| 3.1840% | align-content | ✕ |
-| 3.1832% | flex-flow | ✕ |
-| 3.1774% | image-rendering | ✕ |
-| 3.0879% | webkit-margin-start | ✕ |
-| 2.9551% | font-stretch | ✕ |
-| 2.8934% | empty-cells | ✕ |
-| 2.7619% | webkit-margin-after | ✕ |
-| 2.7220% | perspective-origin | ✕ |
-| 2.6125% | webkit-margin-end | ✕ |
-| 2.6089% | column-count | ✕ |
-| 2.5880% | webkit-text-fill-color | ✕ |
-| 2.5466% | webkit-box-direction | ✕ |
-| 2.4618% | font-feature-settings | ✕ |
-| 2.3959% | webkit-mask-image | ✕ |
-| 2.3431% | webkit-padding-end | ✕ |
-| 2.2555% | stroke-dasharray | ✕ |
-| 2.1788% | user-select | ✕ |
-| 2.1679% | object-fit | ✕ |
-| 2.0643% | column-gap | ✕ |
-| 2.0459% | text-size-adjust | ✕ |
-| 2.0253% | caption-side | ✕ |
-| 1.9695% | stroke-dashoffset | ✕ |
-| 1.7923% | stroke-linecap | ✕ |
-| 1.7861% | animation-direction | ✕ |
-| 1.7559% | webkit-font-feature-settings | ✕ |
-| 1.7404% | stroke-opacity | ✕ |
-| 1.5926% | stroke-miterlimit | ✕ |
-| 1.5786% | fill-rule | ✕ |
-| 1.4859% | webkit-user-modify | ✕ |
-| 1.3439% | webkit-border-image | ✕ |
-| 1.3091% | animation-play-state | ✕ |
-| 1.2676% | contain | ✕ |
-| 1.2029% | webkit-padding-start | ✕ |
-| 1.1840% | webkit-margin-before | ✕ |
-| 1.1269% | page-break-before | ✕ |
-| 1.1222% | webkit-margin-top-collapse | ✕ |
-| 1.0418% | columns | ✕ |
-| 1.0354% | webkit-mask-size | ✕ |
-| 0.9650% | border-image-slice | ✕ |
-| 0.9425% | stop-color | ✕ |
-| 0.9408% | webkit-mask-repeat | ✕ |
-| 0.9125% | webkit-box-lines | ✕ |
-| 0.8804% | webkit-column-break-inside | ✕ |
-| 0.8752% | size | ✕ |
-| 0.8334% | font-kerning | ✕ |
-| 0.8034% | stroke-linejoin | ✕ |
-| 0.7869% | tab-size | ✕ |
-| 0.7689% | break-inside | ✕ |
-| 0.7589% | webkit-text-stroke-width | ✕ |
-| 0.7353% | column-width | ✕ |
-| 0.6924% | webkit-mask-position | ✕ |
-| 0.6869% | border-image-width | ✕ |
-| 0.6323% | border-image-repeat | ✕ |
-| 0.5994% | border-image-outset | ✕ |
-| 0.5885% | all | ✕ |
-| 0.5859% | webkit-text-stroke-color | ✕ |
-| 0.5435% | webkit-print-color-adjust | ✕ |
-| 0.5420% | webkit-text-stroke | ✕ |
-| 0.5195% | writing-mode | ✕ |
-| 0.4741% | clip-rule | ✕ |
-| 0.4685% | webkit-clip-path | ✕ |
-| 0.4578% | text-anchor | ✕ |
-| 0.4535% | shape-rendering | ✕ |
-| 0.4526% | webkit-column-break-before | ✕ |
-| 0.4494% | clip-path | ✕ |
-| 0.4452% | webkit-mask | ✕ |
-| 0.4393% | mix-blend-mode | ✕ |
-| 0.4166% | text-align-last | ✕ |
-| 0.4033% | column-rule | ✕ |
-| 0.3990% | webkit-mask-box-image | ✕ |
-| 0.3989% | font-variant-ligatures | ✕ |
-| 0.3881% | column-fill | ✕ |
-| 0.3865% | webkit-line-break | ✕ |
-| 0.3857% | border-image-source | ✕ |
-| 0.3528% | stop-opacity | ✕ |
-| 0.3075% | webkit-perspective-origin-y | ✕ |
-| 0.3054% | webkit-perspective-origin-x | ✕ |
-| 0.2994% | webkit-writing-mode | ✕ |
-| 0.2717% | dominant-baseline | ✕ |
-| 0.2634% | column-rule-color | ✕ |
-| 0.2586% | webkit-box-decoration-break | ✕ |
-| 0.2467% | webkit-text-security | ✕ |
-| 0.2374% | webkit-background-origin | ✕ |
-| 0.2146% | font-variant-caps | ✕ |
-| 0.2005% | column-rule-style | ✕ |
-| 0.1976% | shape-outside | ✕ |
-| 0.1971% | webkit-padding-before | ✕ |
-| 0.1896% | break-after | ✕ |
-| 0.1782% | webkit-padding-after | ✕ |
-| 0.1774% | text-orientation | ✕ |
-| 0.1747% | webkit-text-orientation | ✕ |
-| 0.1655% | mask | ✕ |
-| 0.1626% | alignment-baseline | ✕ |
-| 0.1572% | page | ✕ |
-| 0.1530% | webkit-column-break-after | ✕ |
-| 0.1521% | webkit-box-reflect | ✕ |
-| 0.1504% | webkit-text-emphasis-color | ✕ |
-| 0.1499% | object-position | ✕ |
-| 0.1470% | break-before | ✕ |
-| 0.1455% | webkit-margin-collapse | ✕ |
-| 0.1452% | baseline-shift | ✕ |
-| 0.1451% | hyphens | ✕ |
-| 0.1309% | rx | ✕ |
-| 0.1304% | ry | ✕ |
-| 0.1256% | background-blend-mode | ✕ |
-| 0.1136% | font-variant-numeric | ✕ |
-| 0.1135% | background-repeat-x | ✕ |
-| 0.1123% | background-repeat-y | ✕ |
-| 0.1086% | webkit-text-emphasis | ✕ |
-| 0.1058% | webkit-rtl-ordering | ✕ |
-| 0.1040% | column-rule-width | ✕ |
-| 0.1036% | isolation | ✕ |
-| 0.1002% | webkit-highlight | ✕ |
-| 0.0843% | webkit-transform-origin-y | ✕ |
-| 0.0786% | webkit-transform-origin-x | ✕ |
-| 0.0770% | webkit-app-region | ✕ |
-| 0.0685% | column-span | ✕ |
-| 0.0653% | r | ✕ |
-| 0.0611% | y | ✕ |
-| 0.0602% | x | ✕ |
-| 0.0555% | webkit-border-vertical-spacing | ✕ |
-| 0.0545% | webkit-border-horizontal-spacing | ✕ |
-| 0.0542% | webkit-border-start-width | ✕ |
-| 0.0450% | webkit-border-start-color | ✕ |
-| 0.0424% | webkit-border-after-width | ✕ |
-| 0.0424% | webkit-border-before-width | ✕ |
-| 0.0423% | webkit-border-end-width | ✕ |
-| 0.0351% | marker | ✕ |
-| 0.0349% | webkit-border-end-color | ✕ |
-| 0.0347% | webkit-border-after-color | ✕ |
-| 0.0347% | webkit-border-before-color | ✕ |
-| 0.0342% | mask-type | ✕ |
-| 0.0328% | color-interpolation-filters | ✕ |
-| 0.0325% | webkit-border-end | ✕ |
-| 0.0319% | vector-effect | ✕ |
-| 0.0307% | color-rendering | ✕ |
-
-## CSS Units and Values
-
-refs: https://drafts.csswg.org/css-values/ 2016-12-11
-
-### Textual
-
-* pre-defined keywords
- * CSS-wide keywords
- * `initial`
- * `inherit`
- * `unset`
-* `<custom-ident>`: author-defined identifiers ✓
-* `<string>`: quoted strings (`"xxx"`)
-* `<url>`: resourec locators (`url()`)
-
-### Numeric
-
-* `<integer>` ✓
-* `<number>` ✓
-* `<percentage>`
-
-### Length `<length>`
-
-* relative
- * font-relative
- * `em`
- * `ex`
- * `ch`
- * `ic`
- * `rem` ✓🔧
- * viewport-percentage
- * `vw` ✓🔧
- * `vh` ✓🔧
- * `vi`
- * `vb`
- * `vmin` ✓🔧
- * `vmax` ✓🔧
-* absolute
- * `cm` ✓🔧
- * `mm` ✓🔧
- * `Q` ✓🔧
- * `in` ✓🔧
- * `pc` ✓🔧
- * `pt` ✓🔧
- * `px` autofixed to number
-
-### Quantities
-
-* `<angle>`
- * `deg`
- * `grad`
- * `rad`
- * `turn`
-* `<time>`
- * `s`
- * `ms`
-* `<frequency>`
- * `Hz`
- * `kHz`
-* `<resolution>`
- * `dpi`
- * `dpcm`
- * `dppx`
-
-### Elsewhere
-
-* `<color>` ✓
-* `<image>`
-* `<position>`
-
-### Functional
-
-* `calc()`
-* `toggle()`
-* `attr()`
-
-## JS APIs
-
-refs: https://www.w3.org/standards/techs/js 2016-12-11
-
-### Completed Work
-
-#### Standards
-
-| last update | spec | supported |
-| ---- | ---- | ---- |
-| 2016-11-17 | Media Source Extensions™ | - (media related) |
-| 2016-11-08 | Geolocation API Specification 2nd Edition | ✕ developing |
-| 2016-10-27 | Pointer Lock | - |
-| 2016-10-18 | Vibration API (Second Edition) | ✕ |
-| 2016-04-19 | Web Storage (Second Edition) | ✓ async `storage` module |
-| 2015-10-22 | Web Notifications | ✕ |
-| 2015-05-19 | HTML5 Web Messaging | ✕ `BroadcastChannel` developing |
-| 2015-02-24 | Pointer Events | - |
-| 2015-02-10 | Vibration API | ✕ |
-| 2015-02-03 | Server-Sent Events | ✕ |
-| 2015-01-08 | Indexed Database API | ✕ |
-| 2014-03-13 | Metadata API for Media Resources 1.0 | - (media related) |
-| 2014-02-11 | Progress Events | ✕ |
-| 2014-01-16 | JSON-LD 1.0 Processing Algorithms and API | - |
-| 2013-12-12 | Performance Timeline | - (perf related) |
-| 2013-12-12 | User Timing | - (perf related) |
-| 2013-10-31 | Widget Interface | - |
-| 2013-10-29 | Page Visibility (Second Edition) | ✕ `onviewappear`/`onviewdisappear` |
-| 2013-10-10 | Touch Events | ✕ |
-| 2013-02-21 | Selectors API Level 1 | - |
-| 2012-12-17 | Navigation Timing | - (perf related) |
-| 2012-12-17 | High Resolution Time | - (perf related) |
-| 2008-12-22 | Element Traversal Specification | - |
-
-### Drafts
-
-#### Proposed Recommendations
-
-| last update | spec | supported |
-| ---- | ---- | ---- |
-| 2016-09-15 | WebIDL Level 1 | - |
-
-#### Candidate Recommendations
-
-| last update | spec | supported |
-| ---- | ---- | ---- |
-| 2016-12-08 | Performance Timeline Level 2 | - (perf related) |
-| 2016-11-22 | Page Visibility Level 2 | ✕ `onviewappear`/`onviewdisappear` |
-| 2016-11-01 | High Resolution Time Level 2 | - (perf related) |
-| 2016-08-18 | DeviceOrientation Event Specification | ✕ |
-| 2016-07-21 | Resource Timing Level 1 | - (perf related) |
-| 2016-07-14 | Presentation API | - |
-| 2016-07-07 | Battery Status API | ✕ |
-| 2016-07-05 | Encrypted Media Extensions | - |
-| 2016-05-19 | Media Capture and Streams | - (media related) |
-| 2014-12-11 | Web Cryptography API | - |
-| 2014-09-09 | HTML Media Capture | - (media related) |
-| 2012-09-20 | The WebSocket API | ✕ |
-
-#### Last Call Drafts
-
-| last update | spec | supported |
-| ---- | ---- | ---- |
-| 2011-12-01 | Geolocation API Specification Level 2 | ✕ |
-
-#### Other Working Drafts
-
-| last update | spec | supported |
-| ---- | ---- | ---- |
-| 2016-12-09 | MediaStream Image Capture | - (media related) |
-| 2016-12-06 | MediaStream Recording | - (media related) |
-| 2016-12-06 | Selection API | ✕ |
-| 2016-12-05 | Input Events | ✕ |
-| 2016-12-02 | Gamepad | - |
-| 2016-11-29 | WebDriver | - |
-| 2016-11-24 | WebRTC 1.0: Real-time Communication Between Browsers | ✕ |
-| 2016-11-22 | Pointer Lock 2.0 | - |
-| 2016-11-07 | Remote Playback API | - (media related) |
-| 2016-11-03 | Resource Timing Level 2 | - (perf related) |
-| 2016-11-02 | Audio Output Devices API | - (media related) |
-| 2016-11-01 | Indexed Database API 2.0 | ✕ |
-| 2016-11-01 | User Timing Level 2 | - (perf related) |
-| 2016-10-31 | The Screen Orientation API | ✕ |
-| 2016-10-31 | High Resolution Time Level 3 | - (perf related) |
-| 2016-10-24 | UI Events KeyboardEvent code Values | - |
-| 2016-10-24 | UI Events KeyboardEvent key Values | - |
-| 2016-10-11 | Service Workers 1 | ✕ |
-| 2016-09-21 | Identifiers for WebRTC's Statistics API | - |
-| 2016-09-13 | Accelerometer Sensor | ✕ |
-| 2016-09-13 | Gyroscope Sensor | ✕ |
-| 2016-09-13 | Magnetometer Sensor | ✕ |
-| 2016-08-30 | Ambient Light Sensor | ✕ |
-| 2016-08-30 | Media Capture from DOM Elements | - (media related) |
-| 2016-08-30 | Generic Sensor API | ✕ |
-| 2016-08-03 | Wake Lock API | ✕ |
-| 2016-07-19 | Proximity Sensor | ✕ |
-| 2016-07-19 | Pointer Events - Level 2 | - |
-| 2016-07-14 | Screen Capture | ✕ |
-| 2016-07-12 | Media Capture Depth Stream Extensions | - (media related) |
-| 2016-05-17 | Cooperative Scheduling of Background Tasks | ✕ |
-| 2016-04-22 | Navigation Timing Level 2 | - (perf related) |
-| 2016-04-03 | Clipboard API and events | ✕ `clipboard` module |
-| 2015-12-15 | Push API | ✕ |
-| 2015-12-08 | Web Audio API | - (media related) |
-| 2015-10-15 | FindText API | - |
-| 2015-09-24 | Web Workers | ✕ |
-| 2015-04-21 | File API | ✕ |
-| 2014-02-20 | Network Service Discovery | ✕ |
-| 2012-03-06 | MediaStream Capture Scenarios | - (media related) |
-| 2011-12-15 | Audio Processing API | - (media related) |
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/references/weex-variable.md
----------------------------------------------------------------------
diff --git a/source/cn/references/weex-variable.md b/source/cn/references/weex-variable.md
index 1fa8688..a6bdd11 100644
--- a/source/cn/references/weex-variable.md
+++ b/source/cn/references/weex-variable.md
@@ -1,7 +1,8 @@
---
title: Weex 实例变量
type: references
-order: 7
+group: API
+order: 2.5
version: 2.1
has_chapter_content: true
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/resources.md
----------------------------------------------------------------------
diff --git a/source/cn/resources.md b/source/cn/resources.md
new file mode 100644
index 0000000..f2cb72c
--- /dev/null
+++ b/source/cn/resources.md
@@ -0,0 +1,6 @@
+---
+title: 资源
+type: community
+has_chapter_content: false
+version: 2.1
+---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/tools/download.ejs
----------------------------------------------------------------------
diff --git a/source/cn/tools/download.ejs b/source/cn/tools/download.ejs
new file mode 100644
index 0000000..ef2c86f
--- /dev/null
+++ b/source/cn/tools/download.ejs
@@ -0,0 +1,3 @@
+layout: download
+type: download
+---
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/tools/helpers.md
----------------------------------------------------------------------
diff --git a/source/cn/tools/helpers.md b/source/cn/tools/helpers.md
new file mode 100644
index 0000000..58fba73
--- /dev/null
+++ b/source/cn/tools/helpers.md
@@ -0,0 +1,77 @@
+---
+title: Weex语法支持插件
+type: tools
+order: 5.1
+version: 2.1
+---
+
+# Weex语法支持插件
+
+[Weex Language Support](https://plugins.jetbrains.com/plugin/9189-weex-language-support) 插件是官方提供的一个工具，你可以使用它在IntelliJ IDEA，WebStorm等一系列IDE上对Weex DSL进行语法高亮，自动补全和错误检查等操作。
+
+### 支持的IDE
+你可以在任何操作系统上的下列IDE上安装和使用Weex Language Support插件：
+**IntelliJ IDEA Ultimate, PhpStorm, WebStorm, PyCharm, RubyMine, AppCode, CLion, Gogland, Rider**
+
+### 安装
+在IDE的插件仓库中搜索`Weex Language Support`来安装该插件，安装完毕后重启IDE即可激活插件相关功能
+
+
+### 配置
+打开`Preferences -> Other Settings -> Weex language support`可配置插件的相关功能
+
+- Target Weex Version: 配置插件以哪一个版本的语法规则来对DSL进行提示及检查，默认值`LATEST`表示总是应用最行新版本weex的语法规则
+- Vue Support: 配置插件是否支持Weex 2.0版本的DSL(.vue文件)，开启后重启生效（注意：如果IDE内有其他支持Vue语法的插件，则需要关闭相应的插件后Weex插件才能生效）
+- Custom Rules: 引入自定义的Weex DSL规则，如果你在native中定义了自己的Module或Component，可通过自定义规则引入插件中来提供相应的提示和补全支持，自定义规则的格式将在后文列出
+- Global Weex Components: 默认地，插件会解析当前工程及npm root路径下的`node_modules`目录，解析其中包含的Weex Components并对其提供补全支持。如果你的项目中引用了这两个路径以外的Components，可以在此处将其添加到搜索路径中，插件将会将其中的Components载入，并在编写DSL时为相应的标签提供补全支持
+
+### 自定义规则格式
+自定义规则包含在一个json文件中，json文件的根节点为数组类型，数组中的每一个元素对应DSL中的一个标签。
+我们以`<loading>`标签的规则来举例：
+```js
+{
+ "tag": "loading", //标签名，不可为空
+ "attrs": [ //标签属性列表，可为空
+ {
+ "name": "display", //属性名，不可为空
+ "valuePattern": null, //属性值的正则表达式，用于检测值是否合法，可为空
+ "valueEnum": [ //属性值枚举，可为空
+ "show",
+ "hide"
+ ],
+ "valueType": "var", //属性值类型，必须是var或function，决定该从数据列表还是函数列表中查找属性值补全的候选值，不可为空
+ "since": 0, //该属性何时被添加到sdk中，例如0.11，默认为0
+ "weexOnly": false //该属性是否仅在1.0语法中可用，默认为false
+ }
+ ],
+ "events": [ //事件列表。可为空
+ {
+ "name": "loading", //事件名称，不可为空
+ "since": 0 //该事件何时被添加到sdk中
+ }
+ ],
+ "parents": [ //该标签允许被作为哪些标签的子元素，空表示可以作为任意元素的子元素
+ "list",
+ "scroller"
+ ],
+ "childes": [ //该标签允许哪些元素作为自己的子元素，空表示任意元素都可作为子元素
+ "text",
+ "image",
+ "loading-indicator"
+ ],
+ "document": "/references/components/loading.html" //文档地址，配置该属性之后可在编辑界面中对应的标签上直接打开文档
+ }
+```
+
+### 使用
+插件的绝大部分功能被集成到编辑器上下文中，会随用户输入在需要补全，提示或Lint时被触发，无需特殊干预。下列功能需要用户手动触发：
+#### 文档搜索
+打开IDE右侧工具栏的`Weex Documents`即可对文档进行搜索，搜索结果与官网保持同步，勾选 `EN` 可切换搜索结果为英文内容
+
+
+#### 打开标签对应的文档
+将光标定位到标签上，并通过`Show Intention Actions`操作（OSX上默认键为 option + enter，可通过Keymap查看）打开Intenion菜单，选择`Open Document`可打开标签对应的文档
+
+
+### 参与插件建设
+请将Issues及Pull Requests提交到[weex-language-support](https://github.com/misakuo/weex-language-support)项目中
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/tools/index.md
----------------------------------------------------------------------
diff --git a/source/cn/tools/index.md b/source/cn/tools/index.md
new file mode 100644
index 0000000..c6c4517
--- /dev/null
+++ b/source/cn/tools/index.md
@@ -0,0 +1,13 @@
+---
+title: 开发工具
+type: tools
+order: 5
+version: 2.1
+---
+
+# 开发工具
+
++ [Playground App](./playground.html)
++ [Online Playground](http://dotwe.org/vue/)
++ [weex-toolkit](./toolkit.html)
++ [Weex Language Support插件](./plugin.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/tools/market.md
----------------------------------------------------------------------
diff --git a/source/cn/tools/market.md b/source/cn/tools/market.md
new file mode 100644
index 0000000..5d2c774
--- /dev/null
+++ b/source/cn/tools/market.md
@@ -0,0 +1,6 @@
+---
+title: Weex Market
+type: tools
+order: 5.3
+version: 2.1
+---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/tools/playground.ejs
----------------------------------------------------------------------
diff --git a/source/cn/tools/playground.ejs b/source/cn/tools/playground.ejs
new file mode 100644
index 0000000..7f3b070
--- /dev/null
+++ b/source/cn/tools/playground.ejs
@@ -0,0 +1,3 @@
+layout: playground
+type: playground
+---
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/tools/toolkit.md
----------------------------------------------------------------------
diff --git a/source/cn/tools/toolkit.md b/source/cn/tools/toolkit.md
new file mode 100644
index 0000000..2cc9674
--- /dev/null
+++ b/source/cn/tools/toolkit.md
@@ -0,0 +1,231 @@
+---
+title: 使用 weex-toolkit
+type: tools
+order: 5.1
+version: 2.1
+---
+
+# weex-toolkit
+
+[weex-toolkit](https://github.com/weexteam/weex-toolkit) 是官方提供的一个脚手架命令行工具，你可以使用它进行 Weex 项目的创建，调试以及打包等功能。
+
+### 安装
+
+使用 `npm` 安装:
+
+``` bash
+$ npm install -g weex-toolkit
+```
+安装成功后，你输入 `weex` 应该可以看到下面的提示效果；
+
+
+
+如果你本地没有安装 node.js 你可以前往[官网](https://nodejs.org/en/)下载安装。
+
+*请确保你的 node 版本是>=6，你可以使用 [n](https://github.com/tj/n) 来进行 node 的版本管理。
+
+中国用户如果npm遭遇网络问题，可以使用淘宝的 [cnpm](https://npm.taobao.org/) 镜像：
+
+``` bash
+$ npm install -g cnpm --registry=https://registry.npm.taobao.org
+$ cnpm install -g weex-toolkit
+```
+
+如果你安装的过程中遇到了问题，比如 *permission error* 你可以去 [weex-toolkit issues](https://github.com/weexteam/weex-toolkit/issues) 找到解决方法。
+
+
+### 初始化 weex 项目
+
+
+```bash
+$ weex init awesome-project
+```
+
+执行完命令后，在 `awesome-project` 目录中就创建了一个使用 `Weex` 和 `Vue` 的模板项目。
+
+
+然后我们进入项目所在路径，`weex-toolkit` 已经为我们生成了标准项目结构。
+
+在 `package.json` 中，已经配置好了几个常用的 npm script，分别是：
+
+- `build`: 源码打包，生成 JS Bundle
+- `dev`: webpack watch 模式，方便开发
+- `serve`: 开启静态服务器
+- `debug`: 调试模式
+
+我们先通过 `npm install` 安装项目依赖。之后运行根目录下的 `npm run dev & npm run serve` 开启 watch 模式和静态服务器。
+
+然后我们打开浏览器，进入 `http://localhost:8080/index.html` 即可看到 Weex h5 页面。
+
+
+### 实时预览
+
+`weex-toolkit` 支持预览你当前开发的weex页面(`.we`或者`.vue`)，你只需要指定预览的文件路径即可：
+
+``` bash
+$ weex src/foo.vue
+```
+
+浏览器会自动弹出页面，这个时候你可以看到你所编辑的 Weex页面的具体效果和页面布局。如果你使用 [Playground](https://weex.apache.org/cn/playground.html) 扫描右边的二维码，就能够看到 Weex 在 Android/IOS 设备上的效果了。
+
+如果你需要预览整个项目目录，你可以输入这样的命令:
+
+``` bash
+$ weex src --entry src/foo.vue
+```
+你需要在传入的参数指定预览的目录和入口文件。
+
+### 打包weex项目
+
+如果开发完成后，你可以使用 `weex compile` 通过命令行工具进行单个文件或者整个项目的打包。
+
+``` bash
+weex compile src/foo.vue dist
+```
+命令行需要两个参数，你的源码文件或者目录， 以及你生成打包后的目录地址。
+
+
+### 调试 Weex 页面
+
+weex-toolkit支持调试工具。**[weex devtools](https://github.com/weexteam/weex-devtool)** ，它是专门为Weex定制的一款实现了 [**Chrome Debugging Protocol**](https://developer.chrome.com/devtools/docs/debugger-protocol) 的 inspect/debug 工具，能够帮助你快速查看 app 运行状态和调试 Weex 中的 JS 代码，当前支持 **IOS** 和 **Android** 两个平台。
+
+#### 用法
+
+``` bash
+ weex debug [options] [we_file|bundles_dir]
+ ```
+
+ 选项:
+
+```
+-h, --help 显示帮助
+-V, --verbose 显示 debug 服务器运行时的各种 log
+-v, --version 显示版本
+-p, --port [port] 设置 debug 服务器端口号 默认为8088
+-e, --entry [entry] debug 一个目录时,这个参数指定整个目录的入口 bundle 文件,这个 bundle 文件的地址会显示在 debug 主页上(作为二维码)
+-m, --mode [mode] 设置构建 we 文件的方式，transformer 最基础的风格适合单文件， loader:webpack 风格 适合模块化的多文件 . 默认为 transformer
+```
+#### 开启调试
+
+```
+$ weex debug
+```
+
+单纯启动一个调试服务器，并同时唤起Chrome浏览器打开`调试主页`。
+这个`调试主页`上会有一个二维码，使用 Playground App 扫这个二维码可以开启 Playground 调试。
+开启调试后,设备列表中会出现您的设备，根据提示进行后续的调试操作。
+
+#### 调试 `.we` | `.vue` 文件
+
+```
+$ weex debug your_weex.vue
+```
+
+这个命令会将 `your_weex.vue` 编译成 `JS Bundle` 文件 部署到 debug 服务器；
+并启动debug服务器如上述命令那样打开的`调试vue主页`会多显示一个二维码，使用 Playground App扫这个二维码码可以加载 `your_weex.we` (注意要先扫描开启调试的那个二维码码)。
+这个命令会自动检测 `your_weex.we` 文件变动，如果发现内容被修改则立即重新编译部署，并刷新 `debugger` 页面。
+.
+#### 调试整个bundle/we文件夹
+
+同样你也可以调试整个目录的文件，你只需要传入目录的路径和入口文件即可；
+
+```
+$weex debug your/we/path -e index.we
+```
+
+这个命令会编译你指定目录下的所有的 `.we` 文件,并把编译好的 JS Bundle 部署到 debug 服务器,他们的地址会映射到 http://lcoalhost:8088/weex/ 下
+比如 `your/we/path/index.we` 可以通过 http://lcoalhost:8088/weex/index.js 访问。
+`your/we/path/demo/test.we` 可以通过 http://lcoalhost:8088/weex/demo/index.js 。
+
+`-e` 参数可以指定一个入口的 `.we` 文件，这个文件的地址会显示在`调试主页`上(作为二维码)。
+
+#### 特性
+##### 连接设备
+
+
+##### Inspector
+
+ Inspector 能够用来查看 `Element` \ `NetWork` \ `Console log` \ `ScreenCast` \ `BoxModel` \ `Native View` 等。
+
+
+##### Element
+
+
+##### NetWork
+##### 查看网络请求的总耗时和延时
+
+
+##### 查看网络请求的header和response
+
+
+##### 控制台
+
+
+##### 资源
+
+
+#### Debugger
+
+ 调试器用来调试 Weex 中的 JS 代码，能够设置断点、查看调用栈。
+
+
+##### Breakpoint and CallStack
+
+
+#### 集成devtools
+- Android
+ - 请参考文档 [Weex devtools (Android)](../../references/advanced/integrate-devtool-to-android.html)，其中有详细说明。
+- IOS
+ - 请参考文档 [Weex devtools (iOS)](../../references/advanced/integrate-devtool-to-ios.html)， 其中有详细说明。
+
+
+### weex-toolkit 对 weexpack 的水平扩展
+
+[weexpack](https://github.com/weexteam/weex-pack) 是基于 Weex 快速搭建应用原型的利器。它能够帮助开发者通过命令行创建 Weex 工程，添加相应平台的 Weex app 模版，并基于模版从本地，GitHub 或者 Weex 应用市场安装插件，快速打包 Weex 应用并安装到手机运行，对于具有分享精神的开发者而言还能够创建 Weex 插件模版并发布插件到 Weex 应用市场。
+
+现在使用 `weex-toolkit` 同样支持对 `weexpack` 的命令调用,如果你当前的项目与 `weexpack` 生成的项目目录一致，那么你可以直接实现对于 `platform` 的操作，从而构建具体的 Android/IOS app 。
+
+### weex platform 以及 run 命令
+
+如果我们希望在模拟器或者真机上查看 Weex 运行的效果，我们可以使用 `platform` 添加或者删除 Weex 应用模板。
+
+``` bash
+$ weex platform add ios
+```
+在第一次使用 platform/plugin 命令的时候，可能会遇到下面的界面，你只需要输入 Y 或者直接 enter 键即可。
+
+
+添加ios平台，然后这个时候只要输入:
+
+``` bash
+$ weex run ios
+```
+
+就能看到启动的模拟器运行的效果了。
+
+
+### weex plugin 命令
+
+如果你想使用[插件市场](https://market.dotwe.org)的插件，你可以使用：
+
+```bash
+$ weex plugin add plugin_name
+```
+
+你只需要输入插件的名称就可以从远程添加插件到你本地的项目，比如添加 weex-chart，我们可以输入命令：
+
+``` bash
+$ weex plugin add weex-chart
+```
+
+
+我们可以使用`plugin remove`移除插件，比如移除安装好的 weex-cahrt：
+
+``` bash
+$ weex plugin remove weex-chart
+```
+
+关于 `weexpack` 更加详细的介绍，你可以阅读 [官方文档](https://github.com/weexteam/weex-pack)。
+
+
+
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/v-0.10/advanced/create-a-weex-project.md
----------------------------------------------------------------------
diff --git a/source/cn/v-0.10/advanced/create-a-weex-project.md b/source/cn/v-0.10/advanced/create-a-weex-project.md
deleted file mode 100644
index 780341b..0000000
--- a/source/cn/v-0.10/advanced/create-a-weex-project.md
+++ /dev/null
@@ -1,271 +0,0 @@
----
-title: 如何创建一个 Weex 项目
-type: advanced
-order: 3
-has_chapter_content: true
-version: 0.10
----
-
-# 如何创建一个 Weex 项目
-
-对于前端开发者来说开发一个 app 是不容易的，既然 Weex 能以 web 的开发体验构建高性能、可扩展的 native 应用，那我们怎么利用 Weex 简单高效的开发一个 native 应用呢？Weex 替你考虑了这件事。在本章中，我们将学习如何使用 Weexpack 工具快速生成一个全新的 Weex 项目。
-
-根据你的操作系统的不同，步骤也略有差异，如果你从未接触过 native 开发，请慢慢来，遇到问题随时查阅 [FAQ](../faq.md)。
-
-首先，不论任何平台，我们都需要 node.js 和 Weexpack。在本节中，默认你已经安装好了 node.js 和 npm，如有疑问，可参考上一章 [如何在本地开发 Weex 页面](../guide/develop-on-your-local-machine.html)。
-
-Weexpack 是 Weex 新一代的工程开发套件，它允许开发者通过简单的命令，创建 weex 工程项目，将项目运行在不同的开发平台上。未来，我们考虑会将其集成在 weex-toolkits 上，但目前仍需要单独安装。好在安装 Weexpack 非常简单，可以直接使用 npm 安装：
-
-```bash
-npm install weexpack -g
-```
-
-或者用 cnpm：
-
-```bash
-cnpm install weexpack -g
-```
-
-接下来的步骤会有一些复杂和区别，根据开发平台的不同，我们提供了快速导航便于阅读：
-
-- [iOS](#ios)
-- [Android](#android)
-
-## iOS
-
-Mac 是唯一可以开发 iOS 应用的平台，因此创建 iOS 项目只支持 mac。对于 iOS，你需要安装 [Xcode](https://developer.apple.com/xcode/) 和 [CocoaPods](https://guides.cocoapods.org/using/getting-started.html) 。
-
-安装 Xcode 最简单的方法是到 [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12)。Xcode 体积较大，下载请耐心等待。
-
-安装好 Xcode 后，你需要运行 Xcode，使 Xcode 自动安装开发者工具和确认使用协议。
-
-之后你还需要安装 [CocoaPods](https://guides.cocoapods.org/using/getting-started.html) 。CocoaPods 是 Xcode 项目的类库管理工具，可以使用如下命令安装：
-
-```bash
-$ sudo gem install cocoapods
-```
-
-如果执行该命令无反应，很可能是 gem source 问题，你可以切换为淘宝 gem source：
-
-```bash
-$ gem sources --remove https://rubygems.org/
-$ gem sources -a https://ruby.taobao.org/
-$ sudo gem install cocoapods
-```
-
-如有问题，可参考 [CocoaPods 官方文档](https://guides.cocoapods.org/using/getting-started.html)
-
-### 创建项目
-
-然后，就可以使用 weexpack 创建 weex 工程了：
-
-```bash
-$ weexpack init appName
-```
-
-weexpack 会自动新建以 appName 命名的目录，并将项目模板拉取到该目录。
-
-最终形成如下目录结构：
-
-```bash
--> /appName
-.
-|—— .gitignore
-|—— README.md
-|—— package.json
-|-- android.config.json
-|-- ios.config.json
-|—— webpack.config.js
-|—— /src
-| |—— index.we
-|—— /html5
-| |—— index.html
-|—— /ios
-| |—— /playground
-| |—— /sdk
-| |—— /WXDevtool
-|—— /android
-| |—— /playground
-| |—— /appframework
-```
-
-其中：
-
-- `webpack.config.js` 是 webpack 配置文件，用于生成 `.we` 文件的 JSBunlde
-- `ios.config.json` 是 iOS 项目配置文件
-- `android.config.json` 是 Android 项目配置文件
-- `/src` 目录放置 Weex 页面
-- `/html5` 是 H5 端入口文件
-- `/ios` 放置 iOS 项目
-- `/android` 放置 Android 项目
-
-紧接着，进入目录，并且安装依赖：
-
-```bash
-$ cd appName && npm install
-```
-
-至此，项目模版创建完成，接下来我们可以自定义我们的 APP 信息并打包运行。
-
-### 运行与打包
-
-如果一切正常，你可以使用 weexpack 打包或模拟器运行了：
-
-模拟器运行
-
-```bash
-$ weexpack run ios
-```
-
-构建 ipa 包：
-
-```bash
-$ weexpack build ios
-```
-
-构建包的过程中，将会提示让您输入 CodeSign（证书）、Profile(provisioning profile)、AppId，只有输入真实的这些信息才能成功打包。 其余如AppName，和入口 weex bundle 文件可以编辑项目目录下的 `ios.config.json` 配置。 打完包成功之后，可以在 `/playground/build/ipa_build/` 目录下获取 ipa 文件。
-
-注：证书需要预先安装到 keychain 中，在 keychain 中点击右键获取证书 id（证书名称）、provisioning profile 文件（\*mobileprovision）需要获取 UUID，进入目录可以看到 mobileprovision_UUID.sh 文件，此文件可以获取到 UUID。
-
-mobileprovision_UUID.sh 用法如下：
-
-```bash
-$ ./mobileprovision_UUID.sh *mobileprovision
-```
-
-参数（\*mobileprovision）为 provisioning profile 文件路径
-
-** 注：run 与 build 部分涉及 pod 的依赖安装问题。**
-
-- 首先要安装 cocoapods ，具体安装步骤可查看[这里](https://cocoapods.org/)，建议安装 0.39.0 版本。
-- 为了加快 CLI 执行速度，weexpack 创建的工程默认安装了需要的依赖库。但是命令执行依然会更新需要升级的依赖库。
- - 如果出现这种错误提示 `unable to find a specification for 'WeexSDK'` 这种错误，说明你本地没有更新 cocoapods master 仓库，运行 `pod repo update` ，此时运行 `pod search WeexSDK`：
-
- 
-
- 说明 master repo 更新成功。以上是以 `WeexSDK` 为例，其他库类似。
-
- - 如果出现这种错误 `error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.` 进入 playground 目录（podfile 文件所在目录）按提示执行。
-
- 更多 pod 使用细节请移步[cocoapods](https://cocoapods.org/)
-
-- mobileprovision，参数（\*mobileprovision）为 provisioning profile 文件路径。
-
-----
-
-## Android
-
-在 Mac 平台开发 Android 首先需要下载 [Android Studio](https://developer.android.com/studio/install.html)（你可能需要翻墙才能访问）。[Android Studio](https://developer.android.com/studio/install.html) 为我们提供了 Android SDK 及 AVD（模拟器）以便我们快速运行 Android 项目。
-
-下载完成后运行 Android Studio，任意新建一个 Android 项目，在第二步中选择 **Android 5.1**，然后点击 next 完成项目创建，如图所示：
-
-
-
-待 Android Studio 打开后，在顶部菜单栏选择 Tools -> Android -> AVD Manager，安装 Android 模拟器：
-
-
-
-之后，打开模拟器运行 Android。
-
-**注意：**
-
-1. 必须保持模拟器运行。
-2. 保证 Android build-tool 的版本为 23.0。【可以在 Android Studio 的 SDK Manager 里查看是否已安装这个版本，如果没有可选择安装这一版本】。
-
-### 配置环境变量
-
-因为 Android Studio 安装的 SDK 不会自动配置环境变量（你自己安装的 SDK 同样不会）。所以需要您自己手动配置 Android_HOME 环境变量和 PATH
-
-如果是 Android Studio 安装的 SDK 安装路径可已在 SDK manager 里找到（打开 SDK manager 的方式请参照图2）
-
-Windows 下请参照 [window 下如何设置 ANDROID 环境变量](http://jingyan.baidu.com/article/09ea3ede1b4df6c0aede39ab.html)
-
-Linux/Mac 下只需编辑 `.bash_profile` 增加 PATH 即可：
-
-```bash
-vim ~/.bash_profile
-```
-
-然后添加下列代码进去（路径替换为你的真实路径）
-
-```bash
-export ANDROID_HOME=/xxx/Library/Android/sdk
-export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/build-tools
-```
-
-然后保存退出（:wq）。再执行下列命令：
-
-```bash
-source ~/.bash_profile
-```
-
-### 创建项目
-
-然后，就可以使用 weexpack 创建 weex 工程了：
-
-```bash
-$ weexpack init appName
-```
-
-weexpack 会自动新建以 appName 命名的目录，并将项目模板拉取到该目录。
-
-最终形成如下目录结构：
-
-```bash
--> /appName
-.
-|—— .gitignore
-|—— README.md
-|—— package.json
-|-- android.config.json
-|-- ios.config.json
-|—— webpack.config.js
-|—— /src
-| |—— index.we
-|—— /html5
-| |—— index.html
-|—— /ios
-| |—— /playground
-| |—— /sdk
-| |—— /WXDevtool
-|—— /android
-| |—— /playground
-| |—— /appframework
-```
-
-其中：
-
-- `webpack.config.js` 是 webpack 配置文件，用于生成 `.we` 文件的 JSBunlde
-- `ios.config.json` 是 iOS 项目配置文件
-- `android.config.json` 是 Android 项目配置文件
-- `/src` 目录放置 Weex 页面
-- `/html5` 是 H5 端入口文件
-- `/ios` 放置 iOS 项目
-- `/android` 放置 Android 项目
-
-紧接着，进入目录，并且安装依赖：
-
-```bash
-$ cd appName && npm install
-```
-
-至此，项目模版创建完成，接下来我们可以自定义我们的 APP 信息并打包运行。
-
-### 运行与打包
-
-如果一切正常，你可以使用 weexpack 打包或模拟器运行了：
-
-Android 的打包和构建是一体的 ：
-
-```bash
-$ weexpack run android
-```
-
-同样的你可以更改项目目录下的android.config.json
-
-- `AppName`: 应用名
-- `AppId`: application_id 包名
-- `SplashText`: 欢迎页上面的文字
-- `WeexBundle`: 指定的 weex bundle 文件（支持文件名和 url 的形式）
-
- 指定文件名则以本地文件的方式加载 bundle，指定 url 则以远程的方式加载 JSBundle。如果以本地方式指定 bundle `.we` 文件请放到 `src` 目录。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/v-0.10/advanced/customize-a-native-component.md
----------------------------------------------------------------------
diff --git a/source/cn/v-0.10/advanced/customize-a-native-component.md b/source/cn/v-0.10/advanced/customize-a-native-component.md
deleted file mode 100644
index 404f25c..0000000
--- a/source/cn/v-0.10/advanced/customize-a-native-component.md
+++ /dev/null
@@ -1,168 +0,0 @@
----
-title: 自定义 native 组件
-type: advanced
-order: 7
-has_chapter_content: true
-version: 0.10
----
-
-# 如何自定义 native 组件？
-
-Weex 已经包含了最关键的平台组件，例如 `ScrollView, ListView, Text, Imageview` 等等。当然，这些组件并不能完全满足你的需求。另外，那些在你的工程中常用的大量原生 UI 组件，可能需要被简单地集合到 Weex 中。幸运的是，通过任意已存在的组件来创建你的自定义组件是一件很方便的事。
-
-## Android
-
-### 步骤：
-
-1.自定义组件必须继承自 `WXComponent` 或者 `WXContainer` ；
-2.weex SDK 可以识别 @WXComponentProp (name = value(value 是 attr 或者 dsl style))；
-3.方法必须是 `public` 的；
-4.组件类不能是一个内部类；
-5.自定义组件不能被 ProGuard 之类的工具混淆；
-6.组件方法在 UI 线程被调用，因此不要在里面进行耗时的操作；
-7.Weex 的参数类型可以是 int, double, float, String, Map, List 和实现了 WXObject 接口的自定义类；
-
-### 参考以下例子：
-
-``` java
- `package com.taobao.weex.ui.component;
-// ……
-
-public class MyViewComponent extends WXComponent{
-
- public MyViewComponent(WXSDKInstance instance, WXDomObject node,
- WXVContainer parent, String instanceId, boolean lazy) {
- super(instance, node, parent, instanceId, lazy);
- }
-
- @Override
- protected void initView() {
- //TODO:your own code ……
- }
-
- @Override
- public WXFrameLayout getView() {
- //TODO:your own code ………
- }
- @WXComponentProp(name=WXDomPropConstant.WX_ATTR_VALUE)
- public void setMyViewValue(String value) {
- ((TextView)mHost).setText(value);
- }
-
-}
-```
-
-必须注册组件：
-
-``` java
-WXSDKEngine.registerComponent("MyView", MyViewComponent.class);
-```
-
-## iOS
-
-虽然 WeexSDK 中有很多的 native 的 Component，但这有可能并不能满足你的需求。在之前你可能已经写了一些很酷炫 native 的组件，想包装一下，导入到 Weex 中，因此我们提供了让开发者实现自己的 native Component。下面将以 WeexSDK 中已经存在的 Component：`image` 为例子，介绍一下如何构建一个 native Component。假设你已经了解 iOS 开发
-
-### 注册 Component
-
-注册一个 component 比较简单，调用 `WXSDKEngine` 中的 `registerComponent:withClass:` 方法，传入组件的标签名称，还有对应的 class 然后你可以创建一个 `WXImageComponent` 表示 `image` 组件的实现。在 `.we` 文件中，只需要写 `<image></image>`
-
-### 添加属性
-
-现在我们要做一些让 image component 更加强大的事情。既然作为一个图片的 component，那它应该要有源，给他加上一个 `src` 的属性，同时给它加上一个 `resize` 的属性（可以配置的有 `contain/cover/stretch`）
-
-```object-c
-@interface WXImageComponent ()
-
-@property (nonatomic, strong) NSString *imageSrc;
-@property (nonatomic, assign) UIViewContentMode resizeMode;
-
-@end
-```
-
-component 中所有的 style，attribute，events 都会被传递到 Component 的初始化方法中，所以，你可以在初始化方法中存储你感兴趣的一些属性值
-
-```object-c
-@implementation WXImageComponent
-
-- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
-{
- if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
- _imageSrc = [WXConvert NSString:attributes[@"src"]];
- _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
-}
-
- return self;
-}
-
-@end
-```
-
-attribute 中拿到的值的类型都是 `id`，我们可以用转换方法把它转换到任何值。Weex SDK 提供了一些基础的转换方法，可以参考 `WXConvert` 类，或者你可以添加自己的转换函数。
-
-### Hooking 渲染生命周期
-
-native 的 component 是由 Weex 管理的，Weex 创建，布局，渲染，销毁。Weex 的 component 生命周期都是可以 hook 的，你可以在这些生命周期中去做自己的事情。
-
-| 方法 | 描述 |
-| :-: | --- |
-| initWithRef:type:... | 用给定的属性初始化一个component. |
-| layoutDidFinish | 在component完成布局时候会调用. |
-| loadView | 创建component管理的view. |
-| viewWillLoad | 在component的view加载之前会调用. |
-| viewDidLoad | 在component的view加载完之后调用. |
-| viewWillUnload | 在component的view被释放之前调用. |
-| viewDidUnload | 在component的view被释放之后调用. |
-| updateStyles: | 在component的style更新时候调用. |
-| updateAttributes: | 在component的attribute更新时候调用. |
-| addEvent: | 给component添加event的时候调用. |
-| removeEvent: | 在event移除的时候调用. |
-
-在 image component 的例子里面，如果我们需要我们自己的 image view 的话，可以复写 `loadView`这个方法.
-
-```object-c
-- (UIView *)loadView
-{
-return [[WXImageView alloc] init];
-}
-```
-
-现在我们使用 `WXImageView` 渲染 `image` component。
-作为一个 image component，我们需要拿到服务器图片，而且把它设置进 image view 里. 这个操作可以在 `viewDidLoad` 方法中做，这个方法是在 view 已经被创建而且加载了时候 Weex SDK 会调用到，而且 `viewDidLoad` 这个方法是你做额外初始化工作比如改变 content mode(也就是设置resize) 的最好时间.
-
-```object-c
-- (void)viewDidLoad
-{
- UIImageView *imageView = (UIImageView *)self.view;
- imageView.contentMode = _resizeMode;
- imageView.userInteractionEnabled = YES;
- imageView.clipsToBounds = YES;
- imageView.exclusiveTouch = YES;
-
- // Do your image fetching and updating logic
-}
-```
-
-如果可以改变 image 的 src，也可以 hook `updateAttributes:` 方法来做属性更新操作，当 `updateAttributes:` 或者 `updateStyles:` 被调用的时候， component 的 view 已经加载完成
-
-```object-c
-- (void)updateAttributes:(NSDictionary *)attributes
-{
- if (attributes[@"src"]) {
- _imageSrc = [WXConvert NSString:attributes[@"src"]];
- // Do your image updating logic
- }
-
- if (attributes[@"resize"]) {
- _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
- self.view.contentMode = _resizeMode;
- }
-}
-```
-
-或许你需要考虑更多的生命周期方法去 Hook，当布局完成时候，像 `layoutDidFinish`，如果你想了解更多，可以参考一下`WXComponent.h` 声明的方法。
-
-现在你可以用在任何 `.we` 文件里面使用 `<image>`，而且可以加上 image 的属性。
-
-```html
-<image style="your-custom-style" src="image-remote-source" resize="contain/cover/stretch"></image>
-```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/cn/v-0.10/advanced/cuszomize-native-apis.md
----------------------------------------------------------------------
diff --git a/source/cn/v-0.10/advanced/cuszomize-native-apis.md b/source/cn/v-0.10/advanced/cuszomize-native-apis.md
deleted file mode 100644
index 55e5e4c..0000000
--- a/source/cn/v-0.10/advanced/cuszomize-native-apis.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: 自定义 native API
-type: advanced
-order: 8
-has_chapter_content: true
-version: 0.10
----
-
-# 如何自定义 native API？
-
-Weex 的 SDK 只提供了页面渲染的能力，但是一些其它操作，比如网络请求、图片加载、重定向等功能需要你自己去实现，这个例子讲述了如何用原生代码去扩展 Weex 的功能。
-
-## 关于 URLHelper 的例子
-
-### 新建一个 WXModule
-
-```java
-public class URLHelperModule extends WXModule{
- private static final String WEEX_CATEGORY="com.taobao.android.intent.category.WEEX";
- @WXModuleAnno
- public void openURL(String url){
- if (TextUtils.isEmpty(url)) {
- return;
- }
- StringBuilder builder=new StringBuilder("http:");
- builder.append(url);
- Uri uri = Uri.parse(builder.toString());
- Intent intent = new Intent(Intent.ACTION_VIEW, uri);
- intent.addCategory(WEEX_CATEGORY);
- mWXSDKInstance.getContext().startActivity(intent);
- }
-}
-```
-
-这里要注意 `@WXModuleAnno` 这个注解，它表示了你把这个方法暴露给 JavaScript。
-
-```java
-public class URLHelperModule extends WXModule{
-
- @WXModuleAnno
- public void openURL(String url,String callbackId){
- //...
- //callback to javascript
- Map<String, Object> result = new HashMap<String, Object>();
- result.put("ts", System.currentTimeMillis());
- WXBridgeManager.getInstance().callback(mWXSDKInstance.getInstanceId(), callbackId, result);
- }
-}
-```
-
-### 把module注册到WXSDKEngine：
-
-```java
-try {
- WXSDKEngine.registerModule("myURL", URLHelperModule.class);
- //'myURL' is the name you'll use in javascript
- } catch (WXException e) {
- WXLogUtils.e(e.getMessage());
- }
-```
-
-### 在 JavaScript 中使用 `eventModule`：
-
-```javascript
-let URLHelper = require('@weex-module/myURL');//same as you registered
-URLHelper.openURL("http://www.taobao.com",function(ts){
- console.log("url is open at "+ts);
-});
-```
-
-## 一些注意事项：
-
-1. 定义一个 components 需要继承 `WXModule`
-
-2. 不要忘记添加 `@WXModuleAnno` 注解，不然 Weex 没法识别这个方法
-
-3. 定义的方法必须是 `public 的
-
-4. module 类一定不能是内部类
-
-5. 你定义的 components 不能被混淆，不然会找不到
-
-6. Module 中的方法会在 UI 线程中被调用，所以一定不要做一些耗时操作
-
-7. Moudle 中的方法参数类型可以为 `int`，`double`，`float`，`String`，`Map`，`List`，以及实现 `WXObject` 接口的类。