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:27 UTC
[32/51] [abbrv] incubator-weex-site git commit: update file structure
and fix responsive styles
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/modules/stream.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/modules/stream.md b/_drafts/v1.0/references/modules/stream.md
new file mode 100644
index 0000000..6c1b893
--- /dev/null
+++ b/_drafts/v1.0/references/modules/stream.md
@@ -0,0 +1,220 @@
+---
+title: stream
+type: references
+order: 4.7
+version: 0.10
+---
+
+# stream
+
+## 概述
+
+以下为 stream 相关的 API，用于实现网络请求。
+
+## API
+### `fetch(options, callback[,progressCallback])`
+
+发起网络请求
+
+#### 参数
+
+- `options {Object}`：请求的一些选项
+ - `method {string}`：HTTP 方法 `GET` 或是 `POST`
+ - `url {string}`：请求的 URL
+ - `headers {Object}`：HTTP 请求头
+ - `type {string}`：请求类型, `json`,`text` 或是 `jsonp` {在原生实现中其实与 json 相同)
+ - `body {string}`：HTTP 请求体。
+
+ **注意：**
+
+ - `body` 参数仅支持 `string` 类型的参数，请勿直接传递 `JSON`，必须先将其转为字符串。
+ - `GET` 请求不支持 `body` 方式传递参数，请使用 url 传参。
+
+- `callback {Function}`：响应结果回调，回调函数将收到如下的 `response` 对象：
+ - `status {number}`：返回的状态码
+ - `ok {boolean}`：如果状态码在 200~299 之间就为真。
+ - `statusText {string}`：状态描述文本
+ - `data {Object | string}`: 返回的数据，如果请求类型是 `json` 和 `jsonp`，则它就是一个 object ，如果不是，则它就是一个 string。
+ - `headers {Object}`：响应头
+- `progressCallback {Function}`：关于请求状态的回调。 这个回调函数将在请求完成后就被调用:
+ - `readyState {number}`：当前状态
+ state:'1': 请求连接中
+ opened:'2': 返回响应头中
+ received:'3': 正在加载返回数据
+ - `status {number}`：响应状态码.
+ - `length {number}`：已经接受到的数据长度. 你可以从响应头中获取总长度
+ - `statusText {string}`：状态文本
+ - `headers {Object}`：响应头
+
+#### 示例
+
+```html
+<template>
+ <div class="wrapper">
+ <list class="list">
+ <header class="header">
+ <text class="title">Search Results</text>
+ </header>
+ <refresh style="width: 750; padding: 30;" onrefresh="refreshData" display="{{refreshDisplay}}">
+ <text class="text"> ↓ Pull to refresh </text>
+ <loading-indicator class="indicator"></loading-indicator>
+ </refresh>
+ <cell class="row" repeat="item in items" id="item-{{$index}}">
+ <div>
+ <text class="item">Repo name: {{item.full_name}}</text>
+ </div>
+ <div>
+ <text class="item">Repo star: {{item.stargazers_count}}</text>
+ </div>
+ </cell>
+ <loading onloading="loadingData" style="width: 750; padding: 30;" display="{{loadingDisplay}}">
+ <text class="text">{{loadingText}}</text>
+ </loading>
+ </list>
+ <div class="up" onclick="goToTop">
+ <img class="img" src="https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png"></img>
+ </div>
+ </div>
+</template>
+
+<style>
+.wrapper {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+.list{
+ background-color: #ffffff;
+ flex: 1;
+}
+.header {
+ height: 80;
+ align-items: center;
+ justify-content: center;
+ background-color: #efefef;
+ border-bottom-color: #eeeeee;
+ border-bottom-width: 2;
+ border-bottom-style: solid;
+}
+.title {
+ text-align: center;
+}
+.text {
+ text-align: center;
+}
+.row {
+ padding: 20;
+ border-bottom-color: #eeeeee;
+ border-bottom-width: 2;
+ border-bottom-style: solid;
+}
+.up {
+ width: 70;
+ height: 70;
+ position: fixed;
+ right: 20;
+ bottom: 20;
+}
+.img {
+ width: 70;
+ height: 70;
+}
+</style>
+
+<script>
+var dom = require('@weex-module/dom') || {}
+var stream = require('@weex-module/stream') || {}
+var modal = require('@weex-module/modal') || {}
+
+var SEARCH_URL = 'https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc'
+
+module.exports = {
+ data: {
+ isLoaded: true,
+ page: 1,
+ loadingDisplay: 'hide',
+ refreshDisplay: 'hide',
+ loadingText: 'Loading...',
+ items:[]
+ },
+ created: function () {
+ var url = SEARCH_URL + '&page=' + this.page
+
+ this.renderData(url)
+
+ this.page++
+ },
+ methods: {
+ renderData: function (url) {
+ var self = this
+
+ stream.fetch({
+ method: 'GET',
+ url: url,
+ type:'json'
+ }, function(res) {
+ self.refreshDisplay = 'hide'
+ self.loadingDisplay = 'hide'
+
+ try {
+ var results = res.data.items || []
+
+ if (Array.isArray(results)) {
+ for(var i = 0; i < results.length; i++) {
+ self.items.push(results[i])
+ }
+ }
+
+ self.isLoaded = true
+ } catch(e) {}
+ },function(res){
+
+ })
+ },
+ loadingData: function (e) {
+ var url = SEARCH_URL + '&page=' + this.page
+ var self = this
+
+ if (self.isLoaded === false) return
+
+ self.loadingDisplay = 'show'
+
+ if (self.page <=10 ) {
+ self.renderData(url)
+ self.page++
+ } else {
+ self.loadingDisplay = 'hide'
+ self.loadingText = 'NO MORE!'
+ }
+ },
+ goToTop: function (e) {
+ dom.scrollToElement(this.$el('item-0'), {
+ offset: -100
+ })
+ },
+ refreshData: function (e) {
+ var url = SEARCH_URL + '&page=1'
+
+ if (this.isLoaded === false) return
+
+ this.refreshDisplay = 'show'
+
+ modal.toast({
+ 'message': 'Refreshing...',
+ 'duration': 1
+ })
+
+ this.items = []
+ this.page = 1
+ this.renderData(url)
+
+ this.refreshDisplay = 'hide'
+ }
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/ed524ade679b0fa96e980600c53ea5ce)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/modules/webview.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/modules/webview.md b/_drafts/v1.0/references/modules/webview.md
new file mode 100644
index 0000000..b6f3cbe
--- /dev/null
+++ b/_drafts/v1.0/references/modules/webview.md
@@ -0,0 +1,66 @@
+---
+title: webview
+type: references
+order: 4.8
+version: 0.10
+---
+
+# `webview`
+
+一系列的 `<web>` 组件操作接口。 比如 `goBack`、`goForward`、和 `reload`。`webview` module 与 `<web>` 组件共用。
+
+## 示例
+
+查看 [简单浏览器](../components/web.html) ，一个结合 `<web>` 组件和 `webview` module 的示例。
+
+## API
+
+### `goBack(webElement)`
+
+加载历史记录里的前一个资源地址。
+
+#### 参数
+
+* `webElement {Element}`：`<web>` 组件对象。
+
+#### 示例
+
+```javascript
+var webview = require('@weex-module/webview')
+var webElement = this.$el('webview')
+webview.goBack(webElement)
+```
+
+### `goForward(webElement)`
+
+加载历史记录里的下一个资源地址。
+
+#### 参数
+
+* `webElement {Element}`：`<web>` 组件对象。
+
+#### 示例
+
+```javascript
+var webview = require('@weex-module/webview')
+var webElement = this.$el('webview')
+webview.goForward(webElement)
+```
+
+### `reload(webElement)`
+
+刷新当前页面。
+
+#### 参数
+
+* `webElement {Element}`：`<web>` 组件对象。
+
+#### 示例
+
+```javascript
+var webview = require('@weex-module/webview')
+var webElement = this.$el('webview')
+webview.reload(webElement.ref)
+```
+
+*注意事项：未来 `<web>` 组件的 `Element` 对象将会支持直接这些方法，届时 `webview` module 将不再需要*
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/replace.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/replace.md b/_drafts/v1.0/references/replace.md
new file mode 100644
index 0000000..5ace251
--- /dev/null
+++ b/_drafts/v1.0/references/replace.md
@@ -0,0 +1,57 @@
+# Replace option
+
+The `replace` option is boolean type. It determined whether this composed component will be replaced with the `<template>` content or just as a normal `<div>` element which include the `<template>` content.
+
+For example:
+
+```
+<element name="foo">
+ <template>
+ <text>Foo</text>
+ </template>
+ <script>
+ module.exports = {
+ replace: false // by default
+ }
+ </script>
+</element>
+
+<template>
+ <foo></foo>
+</template>
+```
+
+will rendered as:
+
+```
+<div>
+ <text>Foo</text>
+</div>
+```
+
+but:
+
+```
+<element name="foo">
+ <template>
+ <text>Foo</text>
+ </template>
+ <script>
+ module.exports = {
+ replace: true
+ }
+ </script>
+</element>
+
+<template>
+ <foo></foo>
+</template>
+```
+
+will rendered as:
+
+```
+<text>Foo</text>
+```
+
+So you can choose a way you need or like to manage your virtual DOM structure.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/special-element.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/special-element.md b/_drafts/v1.0/references/special-element.md
new file mode 100644
index 0000000..e01a2c7
--- /dev/null
+++ b/_drafts/v1.0/references/special-element.md
@@ -0,0 +1,38 @@
+---
+title: 特殊元素
+type: references
+order: 1.11
+version: 0.10
+---
+
+# 特殊元素
+
+## `<content>`
+
+`<content>` 在编写组件模板时作为作为内容节点元素存在，使用时将被真正的元素替换。
+
+替代写法: `<slot>`。
+
+## 示例
+
+如示例中写法，`<content>` 节点被 `<text>` 替代。
+
+```html
+<element name="item">
+ <template>
+ <div>
+ <content></content>
+ </div>
+ </template>
+</element>
+
+<template>
+ <div>
+ <item>
+ <text>Content Text</text>
+ </item>
+ </div>
+</template>
+```
+
+[体验一下](http://dotwe.org/bf4354a0e6dbe67470ad1a988cdd565e)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/specs/index.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/specs/index.md b/_drafts/v1.0/references/specs/index.md
new file mode 100644
index 0000000..164e61b
--- /dev/null
+++ b/_drafts/v1.0/references/specs/index.md
@@ -0,0 +1,309 @@
+---
+title: JS Bundle format (英)
+type: references
+order: 5
+has_chapter_content: false
+chapter_title: 底层规范
+version: 0.10
+---
+
+# JS Bundle format
+
+JS Bundle Version: v0.3.0
+
+## v0.5.0
+
+### Whole Syntax and Structure
+
+A JS Bundle is actually a JavaScript file which follows **ES5** standard. The code is used to define some custom components for the instance and bootstrap the instance with certain name, config and data. Developers could use all kinds of JS code packager like webpack, browserify, requirejs to organize your whole instance code.
+
+### Meta Info
+
+The JS Bundle Must begin with a comment line which is a JSON object like:
+
+```javascript
+// { "framework": "Weex", "version": "0.5.0" }
+```
+
+This JSON object as least contains:
+
+* property `framework` must be `"Weex"`
+* property `version` should be corresponded with the JS Bundle format version
+
+### Global Members
+
+* `__weex_define__(name, options)`
+* `__weex_bootstrap__(name, config, data)`
+* `__weex_document__`
+* `__weex_require__(name)`
+
+#### `__weex_define__(name:string, options: object)`
+
+Define a custom component named `name` for current instance with `options`.
+
+**example:**
+
+```javascript
+__weex_define__('rmb', {
+ template: {
+ type: 'div',
+ style: {flexDirection: 'row'},
+ children: [
+ {type: 'text', attr: {value: '￥'}},
+ {type: 'text', attr: {value: this.value}}
+ ]
+ },
+ data: function () {
+ return {
+ value: '0'
+ }
+ },
+ methods: {...}
+})
+```
+
+The enabled component options contains:
+
+* `template`: just the same as [v0.3.0](#details-of-template-option-definitions)
+* `style`: just the same as [v0.3.0](#details-of-style-option-definitions)
+* `data`: a function which return a plain object to observe by the ViewModel
+* `methods`: a function map to proxy to the ViewModel
+* `computed`: a map of several computed keys for the ViewModel
+* `init`, `created`, `ready`: lifecycle methods
+* `events`: event handlers for the ViewModel
+<!-- * `components`: a map for options of sub components the ViewModel needed (So `__weex_define__(name, options)` equals to run `this.components[name] = options` in each custom components when `init`) -->
+
+The enabled ViewModel APIs contains:
+
+* `$el(id): Element`: find element by id in current ViewModel scope
+* `$vm(id): ViewModel`: find sub ViewModel by id
+* `$getConfig(): object`: get instance config info
+* `$broadcast`/`$emit`/`$dispatch`/`$on`/`$off`: listen and fire component events
+* `$transition` *(experimental)*: animation transition (see more in [animation native module](../animation.html))
+
+#### `__weex_require__(name: string): object`
+
+Get a Weex native module with several native APIs.
+
+**example:**
+
+```javascript
+var modal = __weex_require__('modal')
+modal.toast({
+ message: 'Hey!',
+ duration: 2
+})
+```
+
+polyfill for v0.3.0
+
+```javascript
+function __weex_require__(name) {
+ var result
+ define('__weex_require__', function (r, e, m) {
+ result = r('@weex-module/' + name)
+ })
+ return result
+}
+```
+
+#### `__weex_bootstrap__(nameOrOptions: string|object, config: object?, data: object?): AppInstance | Error`
+
+Start to render by a certain component name or a direct component options as the root element, and some instance `config` and instance `data`. If everything fine, it will returns the root app instance. Otherwise it will return an `Error` instance which describes something wrong.
+
+**example:**
+
+```javascript
+__weex_bootstrap__(
+ 'root',
+ {
+ // format 1:
+ // downgrade: { appVersion: '>= 0.5.0' },
+ // format 2:
+ // downgrade: function (config) { return true }
+ },
+ {
+ // external data
+ // value: '12345'
+ }
+)
+```
+
+The instance `config` now only support `downgrade` property which allows two format:
+
+1. an object like `{ osVersion, appVersion, weexVersion, deviceModel }`
+2. a function like `function (config) { return true }` to return a boolean value. `true` means normal and `false` means downgrade.
+
+The instance `data` will merge to root component data. So the root component is also easy to reuse and the instance data is easy to customize.
+
+#### `__weex_document__`
+
+An virtual-DOM `Document` instance. Also the host of [virtual-DOM APIs](./virtual-dom-apis.html). Every Weex instance has and must have just one `Document` instance.
+
+### Preserved Global Variables
+
+`define`, `bootstrap`, `module`, `exports`, `document`, `require`, `register`, `render`
+
+### A whole example
+
+```javascript
+// { "framework": "Weex", "version": "0.5.0" }
+
+var modal = __weex_require__('modal')
+
+__weex_define__('item', {
+ template: {
+ type: 'div',
+ style: { flexDirection: 'row' },
+ event: {
+ click: function (e) {
+ this.update(e)
+ }
+ },
+ children: [
+ { type: 'image', attr: { src: this.imageUrl }, ...},
+ { type: 'text', attr: { value: this.title }, ...}
+ ]
+ },
+ data: function () {
+ return {
+ imageUrl: '',
+ title: ''
+ }
+ },
+ methods: {
+ update: function (e) {
+ modal.toast({ message: this.title })
+ }
+ }
+})
+
+__weex_define__('app', {
+ template: {
+ type: 'div',
+ children: [
+ {
+ type: 'item',
+ repeat: {
+ expression: function () {
+ return this.list
+ },
+ key: '$index',
+ value: '$value'}
+ },
+ attr: {
+ imageUrl: function () {
+ return this.$value.imageUrl
+ },
+ title: function () {
+ return this.$value.title
+ }
+ }
+ }
+ ]
+ },
+ data: function () {
+ return {
+ list: [
+ { imageUrl: 'xxx', title: '111' },
+ { imageUrl: 'yyy', title: '222' },
+ { imageUrl: 'zzz', title: '333' }
+ ]
+ }
+ }
+})
+
+__weex_bootstrap__('app')
+```
+
+## v0.3.0
+
+### Whole Syntax and Structure
+
+A JS Bundle is actually a JavaScript file which follows **ES5** standard. The code is organized by several modules with AMD-like format:
+
+```javascript
+define('moduleName1', function (require, exports, module) {
+ // content of module1
+})
+
+define('moduleName2', function (require, exports, module) {
+ // content of module2
+})
+
+...
+```
+
+A whole Weex JS Bundle is concatenated by these modules and last a `bootstrap(rootComponentName, optionalConfig, optionalExternalData)` function call.
+
+```javascript
+define('@weex-component/a', function (require, exports, module) {
+ // content of composed component <a>
+})
+
+define('@weex-component/b', function (require, exports, module) {
+ // content of composed component <b>
+})
+
+bootstrap('@weex-component/b')
+```
+
+As the sample above, the component name should be hyphenated (a-z, 0-9, "-"). Other characters are not allowed.
+
+And, the method call `bootstrap()` allows 1~3 parameters: root module name (String), config info (optional JSON) and external data (optional JSON).
+
+### Content of Composed Components
+
+A module of composed component contains 3 parts: whole options definition, additional template option definition and additional style option definition.
+
+- whole options is a piece of JavaScript code to put component options (except `template` option and `style` option) into `module.exports`
+- `template` option is a piece of JSON-like object assigned to `module.exports.template` which describes the display structure of this component
+- `style` option is a piece of JSON object assigned to `module.exports.style` which describes the reusable styles in this component
+
+The `template` option is required and appeared only once, and the `style` option and whole options definition are optional.
+
+These options are defined and transformed by Transformer. Actually you can also ignore all the format limitation and write options to `module.exports` as the same result if you are not going to use Transformer. But that's not recommended.
+
+#### Details of template option definitions
+
+A piece of multi-level embedded JSON-like object which describes the view structure.
+
+Every level JSON-like object has these members below:
+
+* `type`: a required string, component name/type
+* `component`: an optional boolean, whether this component is composed or native
+* `attr`: an optional k-v pairs which contains all attributes of an element, the value could be a string, number, boolean or a function that bind some data value
+* `style`: an optional k-v pairs which contains all styles of an element, just the same format as the `attr`
+* `classList`: an optional array of strings which contains class names for styling.
+* `events`: an optional k-v pairs whose keys are event type and values are corresponding method names
+* `children`: an optional array of child components info
+* `append`: an optional string which determines a compiling workflow strategy: append node-by-node singly or a whole node tree just one time. the default value is `node` and another supported value is `tree`.
+* `shown`: a optional function which returns a boolean value to determine whether this component should be displayed
+* `repeat`: a optional function which returns a list data to displays components with each
+
+**Corresponding Keys to Weex Transformer:**
+
+- tag `name` in Weex file corresponds to `type`
+- attr `if` in Weex file corresponds to `shown`
+- attr `repeat` in Weex file corresponds to `repeat`
+- attr `append` in Weex file corresponds to `append`
+- attr `style` in Weex file with CSS syntax corresponds to `style`
+- attr `class` in Weex file with class names separated by blanks corresponds to `classList`
+- attr `on***` in Weex file with prefix `on` corresponds to a k-v pair in `events`
+- other attributes in Weex file corresponds to `attr`
+- Child nodes in Weex file corresponds to `children`
+
+All tag names, attr names are case-insensitive and transformed to lower-cased. But the attr values are case-sensitive.
+
+#### Details of style option definitions
+
+Just a two-levels JSON object.
+
+* The first levels are class names.
+* The second levels are k-v pairs which describes style names & properties for each class name.
+
+**Corresponding Keys to Weex Transformer:**
+
+* class name corresponds to first level keys
+* prop name corresponds to second level keys
+* prop value corresponds to second level values
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/specs/js-framework-apis.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/specs/js-framework-apis.md b/_drafts/v1.0/references/specs/js-framework-apis.md
new file mode 100644
index 0000000..d24dd3b
--- /dev/null
+++ b/_drafts/v1.0/references/specs/js-framework-apis.md
@@ -0,0 +1,190 @@
+---
+title: JS Framework APIs (英)
+type: references
+order: 5.2
+version: 0.10
+---
+
+# JS Framework APIs
+
+## Intro about JS Runtime
+
+These APIs are designed for JS Framework and Native Engine working together.
+
+Considering the limitation of mobile phone resource, *Weex runs only one JS runtime* to handle all Weex instances. So it need a multi-instance management layer in JavaScript. These JS Framework APIs are just designed to do the management job.
+
+* First, each Weex instance have a lifecycle, from `createInstance` to `destroyInstance`. During this period, we can import some extra data by `refreshInstance`.
+* To communicate with Native Engine, we have a couple of APIs: `sendTasks` and `receiveTasks`. They are used to call each other by some commands and messages.
+* And when JS runtime start at the beginning of the app launching, we need something initialized and configured. So we supply some APIs like `registerComponents`, `registerModules`.
+* The last API is just for debugging, we supply an API named `getRoot` to return the whole virtual-DOM data for developers.
+* If any of these API calls failed, an `Error` object should be returned.
+
+## Called by native and supplied from JS Framework
+
+### `createInstance(instanceId, code, options, data)`
+
+Create a Weex instance from Native Engine
+
+* `instanceId`: The unique id for a Weex instance, generated by Native Engine.
+* `code`: The JS bundle code send from Native Engine. It will be executed by `new Function(code)` in JS Framework. The code format depends on [JS Bundle Foramt](./js-bundle-format.html)
+* `options`: *Optional*. An options object. *Currently it supports `debug` flag which enable printing log and `bundleUrl` flag which the url of bundle.*
+* `data`: *Optional*. It's an chance to supply external data instead of the original data in JS bundle.
+
+Example:
+
+```javascript
+createInstance('x', 'define(...); define(...); define(...); bootstrap(...)')
+createInstance('x', '...', { bundleUrl, debug, ... }, { a: 1, b: 2 }})
+```
+
+### `destroyInstance(instanceId)`
+
+Destroy an existed Weex instance by id from Native Engine
+
+### `refreshInstance(instanceId, data)`
+
+Refresh data to an existed Weex instance with certain external data from Native Engine
+
+Example:
+
+```javascript
+refreshInstance('x', {a: 100, b: 200})
+```
+
+### `registerComponents(components)`
+
+Register all native components
+
+* `components`: A array of whose items are component options that are force part to use. *Currently it supports `append` attribute which forces the appending mechanism (`tree` or `node`) when first time rendering.*
+
+Example:
+
+```javascript
+registerComponents([
+ { type: 'container' },
+ { type: 'text' },
+ { type: 'image' },
+ { type: 'slider', append: 'tree' },
+ { type: 'list' },
+ { type: 'cell', append: 'tree' },
+ ...
+])
+```
+
+### `registerModules(modules)`
+
+Register the name, methods and args format of each module
+
+* `modules`: A map that collects all native module definitions. Each module definition is an array which has several API definitions. Each API definition has a `name` string and an `args` array which contains a list of each parameter's type.
+
+**NOTE: the `node` type data will actually return its `ref` property. And the `function` type data will actually return a unique function id referring to it.**
+
+Example:
+
+```javascript
+registerModules({
+ event: [
+ {name: 'openURL', args: ['string']}
+ ],
+ ...
+})
+```
+
+### `receiveTasks(instanceId, tasks)`
+
+Fire events or callbacks to an existed Weex instance from Native Engine
+
+* `tasks[]`: A task list. Each task has a `method="fireEvent|callback"` property and a list of `args`.
+ - In `fireEvent` method, the `args` is `ref` of the target, event `type`, event `data` and `domChanges` description in order. **Note: if some event make virtual-DOM data changed (e.g. value changed in `<input>` or current index changed in `<slider>`), the changing of the target element will be passed as `domChanges`.**
+ - In `callback` method, the `args` is `funcId` of a handler, `data` and `ifKeepAlive` which describes whether this callback handler should be keeping called. (Each callback handler is matched with a `funcId` when the original call happens.)
+
+Example:
+
+```javascript
+receiveTasks('x', [{method: 'fireEvent', args: ['x', '13', 'click', {a: 100, b: 200}]}])
+receiveTasks('x', [{method: 'callback', args: ['x', '7', {a: 100, b: 200}, true]}])
+```
+
+### `getRoot(instanceId)`
+
+Return a JSON object which describes the whole virtual DOM body of an existed Weex instance, which designed for debugging
+
+Example:
+
+```javascript
+getRoot('x')
+// {ref: '_root', type: 'container', attr: {...}, style: {...}, children: [...]}
+```
+
+## Called from JavaScript and implemented with native code
+
+### `sendTasks(instanceId, tasks)`
+
+Make native calls from JS Framework
+
+* `tasks[]`: A task list. Each task has a `module` name, a `method` name, and a `args[]` list.
+
+Example:
+
+```javascript
+sendTasks('x', [
+ {module: 'dom', method: 'addElement', args: ['_root', {ref: '1', type: 'container'}, -1]},
+ {module: 'dom', method: 'addElement', args: ['1', {ref: '2', type: 'text', ...}, -1]},
+ {module: 'dom', method: 'addElement', args: ['1', {ref: '3', type: 'image', ...}, -1]},
+ ...
+])
+```
+
+## Supporting other JS Framework <sup>(experimental)</sup>
+
+### Register a new JS Framework
+
+```javascript
+// lib/frameworks/index.js
+
+import Vue from '...'
+import React from '...'
+import Angular from '...'
+
+export const frameworks = {
+ Vue,
+ React,
+ Angular
+}
+```
+
+### Expose JS Framework APIs
+
+```javascript
+// 3rd-party-framework.js
+
+export function createInstance (id, code, config, data) { ... }
+export function destroyInstance (id) { ... }
+export function refreshInstance (id, data) { ... }
+export function registerComponents (components) { ... }
+export function registerModules (modules) { ... }
+export function recieveTasks (id, tasks) { ... }
+export function getRoot (id) { ... }
+```
+
+The virtual-DOM tasks should follow [virtual-DOM spec](./virtual-dom-apis.html).
+
+### Framework Helper
+
+You can import `lib/runtime/helper.js` to get two important things:
+
+* `Document` class, see [virtual-DOM spec](./virtual-dom-apis.html) for more.
+* `sendTasks` method.
+
+### JS Bundle format
+
+You must ensure the JS Bundle has its first line of code like this:
+
+```javascript
+// { "framework": "Vue" }
+...
+```
+
+to allow JS Runtime to detect which JS Framework it should be opened by.
+
+If no valid annotation found. The JS Bundle will be opened by default JS Framework of Weex.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/specs/virtual-dom-apis.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/specs/virtual-dom-apis.md b/_drafts/v1.0/references/specs/virtual-dom-apis.md
new file mode 100644
index 0000000..9291497
--- /dev/null
+++ b/_drafts/v1.0/references/specs/virtual-dom-apis.md
@@ -0,0 +1,148 @@
+---
+title: Virtual DOM APIs
+type: references
+order: 5.3
+version: 0.10
+---
+
+# Virtual DOM APIs
+
+## `Document`
+
+每个实例有一个与实例 id 对应的 document。Document 具有组成一个节点树的多个节点。
+
+### 构造函数
+
+##### `new Document(id: string, url: string?)`
+
+### 成员
+
+##### `createElement(tagName: string, props: Object?): Element`
+
+创建一个特定类型 `Element` 对象。`props` 对象可能包含一个 `attr` 对象和一个 `style` 对象。例如 `createBody('div', {style: {backgroundColor: '#ffffff'}})`
+
+##### `createComment(text: string): Comment`
+
+创建一个具有一些注释文本的 `Comment` 对象。
+
+##### `open()`
+
+初始化渲染开始时设置一个标志，表示初始化渲染开始，每个 DOM 更新将被立即调用。
+
+##### `close()`
+
+初始化渲染完成时设置一个标志，标识初始化渲染完成，DOM 更新以后将在每个任务中批处理。
+
+##### `fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)`
+
+在某个元素上触发一个带有特定类型的事件，这个事件带有一个事件对象。当事件导致一些 DOM 的变化，第四个参数将像 `createElement` 方法里的 `props` 参数一样描述这些 DOM 变化。
+
+#### 只读属性 & Getters
+
+##### `id: string`
+
+##### `URL: string?`
+
+##### `body: Element`
+
+body 元素
+
+##### `documentElement: Element`
+
+document 元素
+
+##### `getRef(ref: string): Node?`
+
+通过内部 node map 的 `ref` 获取节点。
+
+**注意：**
+
+在一个 document 被创建时会自动生成一个 `documentElement` ，并且 `body` 应该手动创建并添加到 `documentElement` 才能工作。`body` 的 `type` 必须是一个 `div`，`list` 或 `scroller`。
+
+## `Node`
+
+### 构造函数
+
+##### `new Node()`
+
+### 成员
+
+##### `destroy()`
+
+#### 只读属性 & Getters
+
+##### `ref: string`
+
+##### `nextSibling: Node?`
+
+##### `previousSibling: Node?`
+
+##### `parentNode: Node?`
+
+## `Element` extends `Node`
+
+### 构造函数
+
+##### `new Element(type: string, props: Object?, ownerDocument: Document)`
+
+创建一个元素，并且 `props` 对象可能包含一个 `attr` 对象和一个 `style` 对象。
+
+### 成员
+
+#### DOM 树
+
+##### `appendChild(node: Node)`
+
+##### `insertBefore(node: Node, before: Node?)`
+
+##### `insertAfter(node: Node, after: Node?)`
+
+##### `removeChild(node: Node, preserved: boolean?)`
+
+移除一个子节点。`preserved` 参数表示是否立即销毁删除该节点或保存它。
+
+##### `clear()`
+
+#### DOM props
+
+##### `setAttr(key: string, value: string, silent: boolean?)`
+
+如果 `silent` 为 `true`，也不会调用 native。用于有 virtual-DOM 变化的事件处理。
+
+##### `setStyle(key: string, value: string, silent: boolean?)`
+
+`silent` 参数作用与 `setAttr` 中的一样。
+
+##### `setClassStyle(classStyle: Object)`
+
+class 样式的 CSS 优先级低于内联样式，当两种样式风格出现时，内联样式的值会覆盖 class 样式的值。
+
+##### `addEvent(type: string, handler: Function)`
+
+##### `removeEvent(type: string)`
+
+##### `fireEvent(type: string, e: any)`
+
+#### 只读属性 & Getters
+
+##### `toJSON(): Object`
+
+格式化 `{ref: string, type: string, attr: Object, style: Object, event: Array(string), children: Array}`
+
+## `Comment` extends `Node`
+
+`Comment` 将不被传给渲染引擎。因此，可作为占位符使用。
+
+### 构造函数
+
+##### `new Comment(value: string)`
+
+### 成员
+
+#### 只读属性 & Getters
+
+##### `type: string`
+
+返回 `'comment'`
+
+##### `value: string`
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/text-style.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/text-style.md b/_drafts/v1.0/references/text-style.md
new file mode 100644
index 0000000..85f67c8
--- /dev/null
+++ b/_drafts/v1.0/references/text-style.md
@@ -0,0 +1,40 @@
+---
+title: 文本样式
+type: references
+order: 1.7
+version: 0.10
+---
+
+# 文本样式
+
+<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}`：字体粗细程度。可选值 `normal` | `bold`，默认为 `normal`。
+
+- `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`
+
+## 其它参考
+
+- [颜色关键字列表](./references/color-names.html)。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/units.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/units.md b/_drafts/v1.0/references/units.md
new file mode 100644
index 0000000..2ff3482
--- /dev/null
+++ b/_drafts/v1.0/references/units.md
@@ -0,0 +1,66 @@
+---
+title: CSS 单位
+type: references
+order: 1.9
+version: 0.10
+---
+
+# 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.md).
+
+## CSS `length` 单位
+
+在 Weex 中，我们只支持 `px` 长度单位。并且它将在 JavaScript 运行时和本机渲染器中解析为数字类型。所以你也可以省略 `px` 单位后缀，直接写数字。
+
+下面这些不同的写法，解析的结果完全相同。
+
+```css
+.classA { font-size: 48; line-height: 64; }
+.classB { font-size: 48px; line-height: 64px; }
+```
+
+不支持类似 `em`，`rem`，`pt` 这样的 CSS 标准中的其他长度单位。
+
+## CSS `number` 单位
+
+仅仅一个数字。用于 [`opacity`](./common-style.md#其他基本样式)，[`lines`](./text-style.md)等。
+
+有时值必须是整数，例如：`lines`。
+
+**注意：**也可以将所有的 `px` `length` 值简化为一个数字。
+
+## CSS `percentage` 单位 (暂不支持)
+
+表示百分比值，如“50％”，“66.7％”等。
+
+它是 CSS 标准的一部分，但 Weex 暂不支持。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/wxc/index.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/wxc/index.md b/_drafts/v1.0/references/wxc/index.md
new file mode 100644
index 0000000..5969ce2
--- /dev/null
+++ b/_drafts/v1.0/references/wxc/index.md
@@ -0,0 +1,44 @@
+---
+title: 官方扩展组件
+type: references
+order: 3
+has_chapter_content: true
+version: 0.10
+---
+
+# 官方扩展组件
+
+Weex 官方扩展组件指的是以 `wxc-` 开头的组件，这些组件不属于内建组件的一部分，而是 Weex 团队基于内建组件扩展的一些常用组件。这些组件依赖 `weex-components`，需要安装依赖后才可使用。
+
+使用方式如下：
+
+1. 安装依赖
+
+ 需要在工程目录下执行以下命令：
+
+ ```bash
+ npm install weex-components
+ ```
+
+2. 使用
+
+ 需要在 `<script>` 中引入依赖。
+
+ ```html
+ <template>
+ <div style="flex-direction: column;">
+ <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar>
+ </div>
+ </template>
+
+ <script>
+ require('weex-components');
+
+ module.exports = {
+ data: {},
+ methods: {
+ // more
+ }
+ }
+ </script>
+ ```
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/wxc/wxc-navpage.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/wxc/wxc-navpage.md b/_drafts/v1.0/references/wxc/wxc-navpage.md
new file mode 100644
index 0000000..6b15175
--- /dev/null
+++ b/_drafts/v1.0/references/wxc/wxc-navpage.md
@@ -0,0 +1,192 @@
+---
+title: <wxc-navpage>
+type: references
+order: 3.1
+version: 0.10
+---
+
+# <wxc-navpage> <sup>(v0.5+)</sup>
+
+`<wxc-navpage>` 组件是一个包含 navbar 的容器组件，可以根据业务场景定制 navbar 组件。同时，可以使用 `navigator` 模块控制页面的跳转，具体参考 [`navigator module`](../modules/navigator.html)。一般情况，都是配合 navbar 组件使用。如果不了解 navigator 相关知识，建议先了解下 iOS 或者 Android 的相关组件。在 H5 上，其实是相当于导航栏。
+
+用法：在 `script` 标签中通过一个 `require` 语句引入，即：`require('weex-components');`
+
+**示例**
+
+```html
+<template>
+ <div style="flex-direction: column;">
+ <wxc-navpage tab-items = {{tabItems}}></wxc-navpage>
+ </div>
+</template>
+
+<script>
+ require('weex-components');
+ // more
+</script>
+```
+
+在 `require('weex-components');` 之前 ，需要在工程目录下执行以下命令：
+
+```bash
+npm install weex-components
+```
+
+## 子组件
+
+`<wxc-navpage>` 组件支持任意 Weex 组件。
+
+## 特性
+
+`<wxc-navpage>` 组件的特性其实是对 navbar 进行功能设置，如下图所示，是 navbar 的一个简单示意。
+
+
+
+- `height {number}`：navbar 的高度，默认是 88。
+
+- `background-color {color}`：navbar 的背景颜色，默认是白色。
+
+- `title {string}`：navbar 的标题。
+
+- `title-color {color}`：navbar 标题的颜色，默认黑色。
+
+- `left-item-title {string}`：navbar 左侧按钮的标题。
+
+- `left-item-color {color}`：navbar 左侧按钮标题颜色，默认黑色。
+
+- `right-item-title {string}`：navbar 右侧按钮标题。
+
+- `right-item-color {color}`：navbar 右侧按钮标题颜色，默认黑色。
+
+- `left-item-src {string}`：navbar 左侧按钮的图标。
+
+- `right-item-src {string}`：navbar 右侧按钮的图标。
+
+### 样式
+
+- 通用样式：支持所有通用样式
+
+ - 盒模型
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+`<wxc-navpage>` 组件支持左右两项点击事件。
+
+- `naviBar.leftItem.click`: 当 navbar 的左侧按钮被点击时触发事件，需要在 `created` 时期注册事件。
+- `naviBar.rightItem.click`: 当 navbar 的右侧按钮被点击时触发事件，需要在 `created` 时期注册事件。
+
+**示例：**
+
+```html
+<template>
+ <wxc-navpage height={{...}} background-color="..." title="..." title-color="..." left-item-title="..." left-item-color="..." right-item-src="...">
+ <content> ...</content>
+ </wxc-navpage>
+</template>
+<script>
+ require('weex-components');
+ module.exports = {
+ created: function() {
+ this.$on('naviBar.rightItem.click',function(e){
+ //handle your click event here.
+ });
+
+ this.$on('naviBar.leftItem.click',function(e){
+ //handle your click event here.
+ });
+ }
+ }
+</script>
+```
+
+- 通用事件
+
+ 支持所有通用事件：
+
+ - `click`
+ - `longpress`
+ - `appear`
+ - `disappear`
+
+ 查看 [通用事件](../common-event.html)
+
+## 示例
+
+**注意：**
+
+[dotwe](http://dotwe.org) 平台暂不支持 `wxc-xxx` 类型的组件。
+
+```html
+<template>
+ <wxc-navpage data-role="none" height={{navBarHeight}} background-color="#ff5898" title={{title}} title-color="white" left-item-title="More" left-item-color="white" right-item-src="http://gtms02.alicdn.com/tps/i2/TB1ED7iMpXXXXXEXXXXWA_BHXXX-48-48.png">
+ <wxc-panel title="push a new page">
+ <wxc-button type="primary" size="small" value="push" onclick="push"></wxc-button>
+ </wxc-panel>
+ <wxc-panel title="pop to the last page">
+ <wxc-button type="success" size="small" value="pop" onclick="pop"></wxc-button>
+ </wxc-panel>
+ </wxc-navpage>
+</template>
+
+<script>
+ require('weex-components');
+ module.exports = {
+ data: {
+ navBarHeight: 88,
+ title: 'Navigator',
+ dir: 'examples',
+ baseURL: '',
+ },
+ created: function() {
+ this.$getConfig(function (config) {
+ var env = config.env;
+ if(env.platform == 'iOS'){
+ var scale = env.scale;
+ var deviceWidth = env.deviceWidth / scale;
+ this.navBarHeight = 64.0 * 750.0 / deviceWidth;
+ }
+ }.bind(this));
+
+ this.$on('naviBar.rightItem.click',function(e){
+ duration = 2;
+ this.$call('modal', 'toast', {
+ 'message': 'naviBar.rightItem.click',
+ 'duration': duration
+ });
+ });
+
+ this.$on('naviBar.leftItem.click',function(e){
+ duration = 2;
+ this.$call('modal', 'toast', {
+ 'message': 'naviBar.leftItem.click',
+ 'duration': duration
+ });
+ });
+ },
+ methods: {
+ push: function() {
+ var vm = this;
+ var params = {
+ 'url': 'http://dotwe.org/raw/dist/33dfcbe81979c60ba5de72c235d7d0f8.js',
+ 'animated' : 'true',
+ }
+ vm.$call('navigator','push',params, function () {});
+ },
+
+ pop: function() {
+ var vm = this;
+ var params = {
+ 'animated' : 'true',
+ }
+ vm.$call('navigator','pop',params, function () {});
+ }
+ }
+ }
+</script>
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/wxc/wxc-tabbar.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/wxc/wxc-tabbar.md b/_drafts/v1.0/references/wxc/wxc-tabbar.md
new file mode 100644
index 0000000..492c1cd
--- /dev/null
+++ b/_drafts/v1.0/references/wxc/wxc-tabbar.md
@@ -0,0 +1,176 @@
+---
+title: <wxc-tabbar>
+type: references
+order: 3.2
+version: 0.10
+---
+
+# <wxc-tabbar>
+
+`<wxc-tabbar>` 是一个名为 `weex-components` 依赖库的自定义组件。`<wxc-tabbar>` 能在窗口的底部显示 tab 页面，我们可以在不同的 tab 页面之间切换。
+
+用法：在 `script` 标签中通过一个 `require` 语句引入，即：`require('weex-components');`
+
+**示例**
+
+```html
+<template>
+ <div style="flex-direction: column;">
+ <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar>
+ </div>
+</template>
+
+<script>
+ require('weex-components');
+
+ module.exports = {
+ data: {},
+ methods: {
+ // more
+ }
+ }
+</script>
+```
+
+在 `require('weex-components');` 之前 ，需要在工程目录下执行以下命令：
+
+```bash
+npm install weex-components
+```
+
+## 子组件
+
+该组件不支持子组件。
+
+## 特性
+
+- `selected-index {number}`：设置默认选中的 tab 索引，默认值为 0（第一个 tab）。
+- `selected-color {color}`：设置当标题被选中时标题的颜色，默认为红色。
+- `unselected-color {color}`：设置当标题不被选中时标题的颜色，默认为黑色。
+- `tab-items {Array[Object]}`：该属性接受一个 `tabitems` 对象数组, 分别对应到对应的 tab 页面，tab 页面的顺序跟对象数组的位置对应。
+ 我们可以通过设置每一项的属性来配置 tabbar 的外观：
+
+ - `index {integer}`：必填属性，指明了 tabitem 的次序。
+ - `title {string}`：设置 tabitem 的标题，非必填，当标题为空时，标题将不会被显示
+ - `titleColor {color}`：设置 tabitem 的标题颜色，默认是黑色
+ - `image {string}`：当 tab 页面不被选中时显示的 icon，当不提供时，什么也不显示。
+ - `selectedImage {string}`：设置 tab 页面被选中时显示的图片，不提供图片时，什么也不显示。
+ - `src {string}`：设置 tab 对应的 Weex 页面的 url，为 http 开头。
+ - `visibility {string}`：值为 `visible` | `hidden`，该属性指明了 tab 页面的显示状态，默认值是 visible
+
+## 样式
+
+- 通用样式：支持所有通用样式
+
+ - 盒模型
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- `tabBar.onClick`：当 tab 页面被选中时触发，需要在 `ready` 或者 `create` 生命周期中注册，如：
+
+ **示例**
+
+ ```html
+ <template>
+ <div style="flex-direction: column;">
+ <wxc-tabbar tab-items="{{tabItems}}"></wxc-tabbar>
+ </div>
+ </template>
+
+ <script>
+ require('weex-components');
+ module.exports = {
+ data: {
+ // ...
+ },
+ created: function() {
+ var vm = this;
+ vm.$on('tabBar.onClick',function(e){
+ var detail= e.detail;
+ console.log('tabBar.onClick ' + detail.index);
+ });
+ },
+ methods: {
+ }
+ }
+ </script>
+ ```
+
+- 通用事件
+ 支持所有通用事件：
+
+ - `click`
+ - `longpress`
+ - `appear`
+ - `disappear`
+
+ 查看 [通用事件](../common-event.html)
+
+## 示例
+
+**注意：**
+
+[dotwe](http://dotwe.org) 平台暂不支持 `wxc-xxx` 类型的组件。
+
+```html
+<template>
+ <div>
+ <wxc-tabbar tab-items="{{tabItems}}"></wxc-tabbar>
+ </div>
+</template>
+
+<script>
+ require('weex-components');
+ module.exports = {
+ data: {
+ dir: 'examples',
+ tabItems: [
+ {
+ index: 0,
+ title: 'tab1',
+ titleColor: '#000000',
+ icon: '',
+ image: 'http://gtms01.alicdn.com/tps/i1/TB1qw.hMpXXXXagXXXX9t7RGVXX-46-46.png',
+ selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB16jjPMpXXXXazXVXX9t7RGVXX-46-46.png',
+ src: 'http://dotwe.org/raw/dist/ba202bcd277285c7f3cf79f9b1055dce.js?itemId=tab1',
+ visibility: 'visible',
+ },
+ {
+ index: 1,
+ title: 'tab2',
+ titleColor: '#000000',
+ icon: '',
+ image: 'http://gtms03.alicdn.com/tps/i3/TB1LEn9MpXXXXaUXpXX9t7RGVXX-46-46.png',
+ selectedImage: 'http://gtms02.alicdn.com/tps/i2/TB1qysbMpXXXXcnXXXX9t7RGVXX-46-46.png',
+ src: 'http://dotwe.org/raw/dist/7e24b83c5868dbd4462e30549999245d.js?itemId=tab2',
+ visibility: 'hidden',
+ },
+ {
+ index: 2,
+ title: 'tab3',
+ titleColor: '#000000',
+ icon: '',
+ image: 'http://gtms01.alicdn.com/tps/i1/TB1B0v5MpXXXXcvXpXX9t7RGVXX-46-46.png',
+ selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB1NxY5MpXXXXcrXpXX9t7RGVXX-46-46.png',
+ src: 'http://dotwe.org/raw/dist/8a8b49b67084423e097a6b7f549f1453.js?itemId=tab3',
+ visibility: 'hidden',
+ }
+ ],
+ },
+ created: function() {
+ var vm = this;
+ vm.$on('tabBar.onClick',function(e){
+ var detail= e.detail;
+ console.log('tabBar.onClick ' + detail.index);
+ });
+ },
+ methods: {}
+ }
+</script>
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/tools/devtools-android.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/tools/devtools-android.md b/_drafts/v1.0/tools/devtools-android.md
new file mode 100644
index 0000000..9ce8991
--- /dev/null
+++ b/_drafts/v1.0/tools/devtools-android.md
@@ -0,0 +1,123 @@
+---
+title: Devtools for Android
+type: tools
+order: 2.1
+version: 0.10
+---
+
+# Devtools for Android
+
+[](https://github.com/weexteam/weex_devtools_android/releases) [](https://www.codacy.com/app/weex_devtools/weex_devtools_android?utm_source=github.com&utm_medium=referral&utm_content=weexteam/weex_devtools_android&utm_campaign=Badge_Grade) [](https://codeclimate.com/github/weexteam/weex_devtools_android) [](https://codeclimate.com/github/weexteam/weex_devtools_android) [](https://github.com/weexteam/weex_devtools_android/issues) [  ](https://bintray.com/alibabaweex/maven/weex_inspector/_latestVersion)
+
+Weex devtools is a custom devtools for weex that implements [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol) inspired by [Stetho](https://github.com/facebook/stetho), it is designed to help you quickly inspect your app and debug your JS bundle source in a chrome web page.At present The devtools consist of two part : `Inspector` and `Debugger`. If you want it work well, you must install a `weex-devtool` as debug server.
+
+- **Inspector**
+ Inspector can be used to show your `Element` \ `NetWork` \ `Console log` \ `ScreenCast` \ `BoxModel` \ `Native View` and so on.
+
+- **Debugger**
+ Debugger can be used to debug your bundle js source, you can set `Breakpoint` \ watch `CallStack`.
+
+## Install and launch devtools server
+Open your terminal then type `npm install -g weex-toolkit` and run.Launch it just type and run the command `weex debug`, then a Chrome web page will be opened.
+
+## Use on an android device or emulator
+
+### Taste of first debug with playground
+If you are a green hand to the debug of weex, we recommend you to try your first debug with `playground`, what you need to do is just launch the playground and scan the QR code shown in the debug page which wound opened if the `devtools server` have been launched. after you scan the QR code, the web page will list your connected devices.
+
+
+
+#### How Debugger Works
+Devtools expands [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol) and the mechanism of communication between client and debug sever is based on [JSON-RPC](https://en.wikipedia.org/wiki/JSON-RPC).
+
+##### Devtools Client
+Devtools Client is integrated in App as aar, it connects to debug server through webscoket protocol with out permission check. I recommend you just packaged it in your debug version consider of the security mechanism.
+
+##### Devtools Debug Server
+Devtools Debug Server is the center node of the communication, it connects to both app and chrome, acts as the turn server of debugging protocol messages and the manager of the js runtime.
+
+##### Chrome FrontEnd
+Chrome's V8 engine acts as the javascript runtime, when debug mode is enabled, all the js code run on it. On the other side we also reuse most of the Chrome's debugging user interface, such as set breakpoint, see call stack and so on.
+
+
+
+### Enable devtools in your own app
+Of course you can reuse the code of playground to build your own app, that is the simplest way to let your app's js code debuggable. On the other hand QR code is not necessary, if your review the source code you can draw a conclusion that QR CODE is just a way to set `devtools server` address. following those steps you can do the same thing.
+
+#### Gradle dependency on inspector.
+There are two choices to set the dependency, the Choice A is recommanded if you have no change to weex_sdk or inspector, while if you use your own custom weex_sdk or inspector Choice B is suitable.
+
+ * *A - aar dependency from jcenter*.
+ ````
+ dependencies {
+ compile 'com.taobao.android:weex_inspector:0.0.8.1'
+ }
+ ````
+I strongly recommend you use the latest version since both weex sdk and devtools are developed iteratively and rapidly. See the release version list [here](https://github.com/weexteam/weex_devtools_android/releases). All the release version will publish to the [jcenter repo](https://bintray.com/alibabaweex/maven/weex_inspector).
+
+ * *B - source code dependency.*
+
+ you need to copy the dir of inspector to the same dir of your app and add `include ":inspector"`in your project's `settings.gradle` file just like playground have done, then add dependency in your app's `build.gralde`.
+ ````
+ dependencies {
+ compile project(':inspector')
+ }
+ ````
+
+##### Version compatibility
+
+| weex sdk | weex inspector | debug server |
+|----------|----------------|--------------|
+|0.8.0.1+ | 0.0.8.1 |0.2.39+ |
+|0.7.0+ | 0.0.7.13 |0.2.38 |
+|0.6.0+ | 0.0.2.2 | |
+
+
+#### Initialize in your XXXApplication file.
+````
+ public class MyApplication extends Application {
+ public void onCreate() {
+ super.onCreate();
+ initDebugEnvironment(true, "xxx.xxx.xxx.xxx"/*"DEBUG_SERVER_HOST"*/);
+ }
+ private void initDebugEnvironment(boolean enable, String host) {
+ WXEnvironment.sRemoteDebugMode = enable;
+ WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native";
+ }
+}
+````
+
+#### Ship It!
+ 1. You must launch your bundle server firstly. In your weex dir, run command "./start";
+ 2. Launch your remote debug server. Run command `weex debug`, chrome will open a web page show a simply guidance and QR code;
+ 3. Launch your app and make sure debug mode was enabled. You will see a device list in the chrome web page opened by last step, each device item have two button, `Debugger` and `Inspector`;There are two way to enable debug mode:
+ * scaning the QR code and handle the content just like the playground have done.
+ * init it in the XXXApplication by calling `initDebugEnvironment(true, "xxx.xxx.xxx.xxx")`, if you call `initDebugEnvironment(true, "xxx.xxx.xxx.xxx")` after weex sdk inited, you need to call `WXSDKEngine.reload()` to refresh the runtime.
+ 4. Once you click the button `Inspector` chrome will open a page show the inspector view, on the other side, click the button `Debugger` chrome will open a new page to show the debug view;
+
+
+
+
+
+---
+
+#### OPTIONS
+
+##### [**OPTION**] *set your remote bundle server ip.*
+
+ For example, in the playground it is in the `IndexActivity.java`, you need to change the value of `DEFAULT_IP` in IndexActivity.java from `"your_current_IP"` to a server ip like `"30.30.30.150"`:
+````
+ private static final String DEFAULT_IP = "30.30.30.150"; // "your_current_IP";
+````
+
+##### [**OPTION**] *enable network inspection.*
+````
+OkHttpClient client = new OkHttpClient();
+client.networkInterceptors().add(new OkHttpInterceptor());
+````
+
+###### Notice
+ The network inspection only support OKHttpClient right now!!! If you want to use the network inspection to catch your bundle request, you must change your bundle server ip to the real server ip.
+
+#### Known Issues
+ You can report issues and bugs [here](https://github.com/weexteam/weex_devtools_android/issues). We will reply as soon as possible.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/tools/devtools-ios.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/tools/devtools-ios.md b/_drafts/v1.0/tools/devtools-ios.md
new file mode 100644
index 0000000..801b80d
--- /dev/null
+++ b/_drafts/v1.0/tools/devtools-ios.md
@@ -0,0 +1,65 @@
+---
+title: Devtools for iOS
+type: tools
+order: 2.2
+version: 0.10
+---
+
+# Devtools for iOS
+
+通过Chrome开发者工具远程调试你的原生iOS app
+## 启动weex-devtool：
+1. 安装和运行 weex-devtool
+
+ ```
+ $:npm install -g weex-devtool
+
+ $:weex-devtool
+ ```
+
+ 它会启动chrome浏览器，展示wss ip 地址在chrome地址栏。
+## playground 安装 WXDevtool
+1. 安装依赖.
+
+ $:pod install
+### 使用
+1. AppDelegate.m 头文件
+
+ ```
+ #import "WXDevTool.h"
+ ```
+2. 在App启动的时候初始化 inspector
+
+ **注意: The inspector API 必须在weex初始化之前调用**
+ - (void)setDebug:(BOOL)isDebug;
+
+ isDebug默认是NO，那么你打开的是inspect模式。假如设置isDebug为YES，那么打开debug模式和inspect模式。
+ - (void)launchDevToolDebugWithUrl:(NSString *)url;
+
+ wssip 是 展示在 chrome 地址栏的wss 地址.
+ - 打开 debug 模式 和 inspector 模式
+
+ eg：- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+ {
+ [WXDevTool setDebug:YES];
+ [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"];
+ }
+ - 打开 inspect 模式, 移除 @selector(setDebug:) 或者 增加 [WXDevTool setDebug:NO]
+
+ eg：- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+ {
+ [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"];
+ }
+3. 编译和运行APP，chrome会显示你的设备，选择inspector。
+4. 支持不同级别的Log打印。
+
+ eg: #import "WXDevTool.h"
+ PDLogE()/PDLogW()
+### WXDevtool依赖
+
+你的app必须链接下面的frameworks/dylibs
+- libicucore.dylib
+- CFNetwork.framework
+- CoreData.framework
+- Security.framework
+- Foundation.framework
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/tools/devtools.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/tools/devtools.md b/_drafts/v1.0/tools/devtools.md
new file mode 100644
index 0000000..ab7ddb3
--- /dev/null
+++ b/_drafts/v1.0/tools/devtools.md
@@ -0,0 +1,99 @@
+---
+title: Devtools
+type: tools
+order: 2
+has_chapter_content: true
+version: 0.10
+---
+
+# Devtools
+
+**weex devtools**是专门为weex定制的一款实现了[**Chrome Debugging Protocol**](https://developer.chrome.com/devtools/docs/debugger-protocol)的inspect/debug工具，能够帮助你快速查看app运行状态和调试weex中的Javascript代码，当前支持**IOS**和**Android**两个平台。
+## 安装
+
+```
+$ npm install -g weex-toolkit
+```
+## 用法
+
+ 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:wepack风格 适合模块化的多文件.默认为transformer
+```
+#### 开启调试
+
+```
+$weex debug
+```
+
+单纯启动一个调试服务器,并同时唤起chrome浏览器打开`调试主页`.
+这个`调试主页`上会有一个二维码,使用Playground App扫这个二维码可以开启Playground调试.
+开启调试后,设备列表中会出现您的设备,根据提示进行后续的调试操作
+#### 调试 we文件
+
+```
+$weex debug your_weex.we
+```
+
+这个命令会将your_weex.we编译成bundlejs文件 部署到debug服务器
+并启动debug服务器如上述命令那样.打开的`调试主页`会多显示一个二维码,使用playground app
+扫这个码可以加载your_weex.we.(注意要先扫描开启调试的那个码)
+这个命令会自动检测your_weex.we文件变动,如果发现内容被修改则立即重新编译部署,并刷新debugger页面
+.
+#### 调试整个bundle/we文件夹
+
+```
+$weex debug your/we/path -e index.we
+```
+
+这个命令会编译你指定目录下的所有的we文件,并把编译好的bundlejs部署到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)](../advanced/integrate-devtools-to-android.html), 其中有详细说明。
+- IOS
+ - 请参考文档 [Weex devtools (IOS)](../advanced/integrate-devtools-to-ios.html), 其中有详细说明。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/tools/index.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/tools/index.md b/_drafts/v1.0/tools/index.md
new file mode 100644
index 0000000..06c424a
--- /dev/null
+++ b/_drafts/v1.0/tools/index.md
@@ -0,0 +1,96 @@
+---
+title: CLI (英)
+type: tools
+order: 1
+has_chapter_content: true
+version: 0.10
+---
+
+# CLI
+
+Please access [npmjs.com](https://www.npmjs.com/package/weex-toolkit) for latest version
+
+Weex CLI tool set
+
+## Pre Install
+some dependencies need recent version of npm to install
+
+if your
+```
+$ npm --version
+```
+output less than `2.15.1`, please run below cmd to upgrade your npm at first
+```
+sudo npm install -g npm
+```
+
+## Install
+```
+$npm install -g weex-toolkit
+```
+
+## Usage
+
+```
+$weex foo/bar/input_path [options]
+
+$weex create file_name [options]
+
+Options:
+ --qr display QR code for native runtime, **default action**
+ -o,--output transform weex we file to JS Bundle, output path (single JS bundle file or dir)
+ [for create sub cmd] it specified we file output path
+ --watch using with -o, watch input path, auto run transform if change
+ happen
+ -s,--server start a http file server, weex .we file will be transformed to JS
+ bundle on the server, specify local root path using the option
+ --port http listening port number, default is 8081
+ --wsport websocket listening port number, default is 8082
+ -f, --force [for create sub cmd] force to replace exsisting file(s)
+ --version show version of weex toolkit
+ --help Show help
+```
+
+## Examples
+
+#### create a `we file`(weex source file) using standard template
+```
+$weex create hello-world-weex
+```
+a file named 'hello-world-weex.we' will be created in current directory
+
+
+#### transform a `we file` to JS Bundle
+```
+$weex your_best_weex.we -o .
+```
+`your_best_weex.we` will be transformed to JS Bundle file `your_best_weex.js` and saved in your current directory
+
+#### transform a `we file` to JS Bundle, watch this file，auto run transformer if any change happens.
+```
+$weex your_best_weex.we -o . --watch
+```
+
+#### transform every we file in a directory
+```
+$weex we/file/storage/path -o outputpath
+```
+every `we file` in `we/file/storage/path` will be transformed to JS Bundle and saved in `outputpath` path
+
+#### preview your we file using Weex Playground App
+download & install [weex playground App](http://alibaba.github.io/weex/download.html)
+```
+$weex your_best_weex.we --qr
+```
+a QR code will display in your terminal, using Playground App scan that.
+
+
+#### start http server
+```
+$weex -s .
+```
+a http server will start running, your current directory(.) will be the document root for the server, every weex.we file will be transformed to JS Bundle when accessed through the server
+
+## Issue & Feedback
+
+[Github Issue List](https://github.com/weexteam/weex-toolkit/issues)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/tools/playground.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/tools/playground.md b/_drafts/v1.0/tools/playground.md
new file mode 100644
index 0000000..dc7bbec
--- /dev/null
+++ b/_drafts/v1.0/tools/playground.md
@@ -0,0 +1,22 @@
+---
+title: Playground
+type: tools
+order: 4
+has_chapter_content: true
+version: 0.10
+---
+
+Weex Playground App
+===================
+
+Weex 的最棒的一个部分是 Native Runtime。你的 `.we` 文件可以使用 weex-toolkit CLI 在浏览器中预览 Web 效果，也可以通过 Weex Playground App 这样一个单独的应用来预览原生效果。不仅如此，Weex playground App 还内置了大量的 Demo 和展示案例，这样你就可以更加容易地体验到 Weex 在 Native 层面的效果了。
+
+Playground App 的下载地址在 [这里](http://alibaba.github.io/weex/download.html)。
+
+截图：
+
+
+
+上图就是 Weex Playground App 的主界面，点击列表中的每一项即可进入某个 Demo 或者展示案例。用 Weex toolkit CLI 生成二维码，用 Weex Playground App 扫描二维码（点击右上角图标即可开始扫描）可以预览你的文件。
+
+请参阅 [起步教程](/get-started.md)。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/tools/transformer.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/tools/transformer.md b/_drafts/v1.0/tools/transformer.md
new file mode 100644
index 0000000..47a7b4c
--- /dev/null
+++ b/_drafts/v1.0/tools/transformer.md
@@ -0,0 +1,38 @@
+---
+title: Transormer (英)
+type: tools
+order: 3
+has_chapter_content: true
+version: 0.10
+---
+
+# gulp-weex
+
+> gulp plugin for weex transformer
+
+## Usage
+
+```javascript
+var gulp = require('gulp')
+var weex = require('gulp-weex')
+
+gulp.task('default', function () {
+ return gulp.src('src/*.html')
+ .pipe(weex({}))
+ .pipe(gulp.dest('./dest'))
+})
+```
+
+## Options
+
+### oldFormat
+
+whether transform to old format.
+
+default: `false`.
+
+### isEntry
+
+whether is an entry module which has `bootstrap(...)`.
+
+default: `true`.
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/web-dev-experience.en.md
----------------------------------------------------------------------
diff --git a/_drafts/web-dev-experience.en.md b/_drafts/web-dev-experience.en.md
new file mode 100644
index 0000000..81d0ff2
--- /dev/null
+++ b/_drafts/web-dev-experience.en.md
@@ -0,0 +1,36 @@
+---
+title: Web Dev Experience
+type: guide
+order: 4.2
+version: 2.1
+---
+
+# Web Dev Experience
+
+## What is Web Dev Experience?
+
+Weex dev experience is very close to web dev experience. It describes the UI structure and content with HTML or HTML-based template, describes the UI style with CSS, and describes user behavior and business logic with JavaScript. And it has completed project mechanism.
+
+## Why We Choose Web Dev Experience?
+
+1. There are a huge number of web developers in the community today. Weex can give more web developers abilities to build high-performance and great-experienced mobile apps.
+2. Web development itself has very high efficiency and flexibility. And Weex is committed to solve the dynamic requirement of mobile apps. They just match each other.
+3. Web standards and web dev experience is built by a lot of outstanding technology companies together. It has very high quality assurance.
+4. Standard itself is a force. Base on standards, respect for standards, close to the standard means that there are more possibilities.
+5. The eco-system and community of web today are very prosperous. There are many mature tools, libraries, systems, best practices to be used.
+
+## How Does Weex Support Web Standard?
+
+We have the following aspects to sort out:
+
+* HTML tags: Weex currently supports basic container (div), text, image, video and other components. And almost all of HTML block-level tags can be simulated through the custom container components. Inline-level tags can be simulated through the custom text components. And Weex also supports some form components such as input / textarea.
+* CSS: Weex supports some commonly used CSS properties, values and units. We will continue to support more based on user feedback and the usage frequency in web.
+* JavaScript: Weex currently offers a simplified version of the DOM APIs for operating the native UI. And Weex will continue to support more W3C Device APIs.
+* About frameworks, Weex officially build Vue 2.0 in. and support its related libs such as vuex, vue-router, etc. At the same time developers can directly use all kinds of third-party JavaScript libs.
+* About engineering, we recommend using npm to pack and manage deps. And we recommend webpack for the JS bundle package. Also we provide weex-devtool, which make developers debug native app just like in Chrome devtools. Weex also is friendly to current mainstream web page publishing system, caching mechanism and other best practices.
+
+**Links**
+
+* [Differences between Weex and web standard](../../references/web-standards.html)
+* [Using Vue.js](./using-vue.html)
+* [Using Devtools](./devtools.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/web-dev-experience.md
----------------------------------------------------------------------
diff --git a/_drafts/web-dev-experience.md b/_drafts/web-dev-experience.md
new file mode 100644
index 0000000..cb7ff24
--- /dev/null
+++ b/_drafts/web-dev-experience.md
@@ -0,0 +1,38 @@
+---
+title: Web 开发体验
+type: wiki
+order: 1.2
+version: 2.1
+---
+
+# Web 开发体验
+
+## 什么是 Web 开发体验
+
+Weex 的开发体验和 web 的开发体验是非常接近的，它通过 HTML 或基于 HTML 模板来描述界面的结构和内容，通过 CSS 的方式描述界面的展现形式，用 JavaScript 来描述用户行为和业务逻辑。同时有完整的工程机制，如创建、开发、调试、部署。
+
+## 为什么选择 Web 开发体验
+
+我们选择基于 Web 开发体验有以下几方面原因：
+
+1. 今天在技术社区有大量的 web 开发者，Weex 可以赋能更多的 web 开发者构建高性能和高体验的移动应用。
+2. Web 开发本身具有非常强的高效率和灵活性，这和 Weex 想解决的移动端动态性问题不谋而合。
+3. Web 标准和开发体验是很多顶尖而优秀的科技公司共同讨论和建设的结果，本身的设计和理念都有极高的品质保障，同时 Weex 也希望可以借此机会努力为标准贡献一点自己的微薄之力。
+4. Web 是一种标准化的技术，标准本身就是一种力量，基于标准、尊重标准、贴近标准都意味着拥有更多的可能性。
+5. Web 今天的生态和社区是非常繁荣的，有很多成熟的工具、库、工程体系、最佳实践可以使用、引入和借鉴。
+
+## Weex 对 Web 标准的支持情况怎么样？
+
+我们从以下几个方面进行介绍和梳理：
+
+* HTML 标签：目前 Weex 支持了基本的容器 (div)、文本 (text)、图片 (image)、视频 (video) 等组件，HTML 中几乎所有的块级标签都可以通过容器组件进行自定义模拟，inline 的标签则可以通过文本组件进行自定义模拟，另外 Weex 还支持了 input/textarea 这样的表单型组件。
+* CSS：Weex 支持了部分常用的 CSS 属性、值类型和单位，并且会根据用户反馈和在 web 中的使用频度陆续支持更多。
+* JavaScript：目前 Weex 提供了一套简化版的 DOM APIs，用来操作原生界面，同时 Weex 在陆续支持更多的 W3C Device APIs。
+* 在框架方面，Weex 官方支持了 Vue 2.0，以及相关的 vuex, vue-router 等，同时开发者可以直接使用各种第三方 JavaScript 工具库。
+* 在工程方面，Weex 推荐 npm 包管理工具，也推荐用 webpack 进行 JS bundle 打包，并提供了 weex-devtool 开发工具，让开发者可以像调试 Chrome 一样调试 Weex 原生应用，同时 Weex 的页面发布系统、客户端缓存机制都尊重目前 Web 的最佳实践。
+
+**相关链接**
+
+* [Weex 和 web 标准的差异](../../references/web-standards.html)
+* [使用 Vue.js](./using-vue.html)
+* [使用 Devtools](./devtools.html)