Remove unused files. (#527)
diff --git a/_drafts/difference-with-web.en.md b/_drafts/difference-with-web.en.md
deleted file mode 100644
index 57dea81..0000000
--- a/_drafts/difference-with-web.en.md
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: Difference with Web
-type: references
-order: 10.1
-version: 2.1
----
-
-# Differences between using Vue in Web and Weex
-
-## Platform Differences
-
-Vue.js was designed for the Web platform at the beginning. Although it can be based on Weex to develop native applications, there are still many differences between web and native. See [Platform Differences Between Weex and Web](../ platform-difference.html) for more details.
-
-Due to those differences, Weex doesn't support those features in Vue.js (mostly are DOM-related):
-
-+ Event bubbling and capturing are not supported. Event modifiers, such as `.prevent`,` .capture`, `.stop`,` .self` are meaningless in the native environment.
-+ The keyboard event modifiers, like `.{KeyCode | keyAlias}` is also meaningless. (see [docs in Vue.js](https://vuejs.org/v2/guide/events.html#Key-Modifiers))
-+ No need to call `vm.$mount` manually, the entry component will mount to the root view of the native container by default.
-+ `v-html` and` v-text` directives are not supported.
-
-## Functional differences
-
-### Vue 2.0 Runtime-only build
-
-Vue 2.0 provides two available builds, the standalone build and the runtime-only build. see the [official document](https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build) for more information.
-
-Weex only required the runtime-only build of Vue 2.0 for better performance and less code size.
-
-The specific differences are:
-
-+ The `template` attribute is not supported when defining a component.
-+ Does not support using `x-templates`.
-+ Does not support using `Vue.compile`.
-
-### Isolate the context of multiple pages
-
-Weex use the "multiple-pages" concept in native, different js bundle will be run in different native views, there context is isolated. Even the `Vue` variable is not the same instance between js bundles. (However, all the js bundle will share the same Weex runtime.)
-
-Based on this feature, the global configurations in `Vue` will only take effect on the current page:
-
-+ `Vue.config`
-+ `Vue.component`
-+ `Vue.directive`
-+ `Vue.filter`
-+ `Vue.mixin`
-+ `Vue.use`
-
-> Note: Those methods are still work, but its effect will be limited to the current page.
-
-## Restrictions in style
-
-CSS is very flexible, has a lot of properties, support a variety of layout modes. This is the advantage of CSS, but also a bottleneck in browser performance optimization.
-
-The style in Weex is parsed by the native renderer, and for the sake of performance and complexity, Weex makes some trade-offs about CSS features to make it better suited to *"best practices"*.
-
-### Single class selector
-
-Weex only supports to use single class name in `<style>`, does not support *type selectors*, *ID selectors*, *attribute selectors*, *adjacent sibling selectors* and the *combinators*.
-
-```CSS
-/* Support single class name selector */
-.one-class {
- font-size: 36px;
-}
-
-/* Does not support to use combinators between selector */
-.parent > .child {
- padding-top: 10px;
-}
-.foo + .bar {
- margin-left: 20px;
-}
-
-/* Does not support attribute selectors. The `v-cloak` directive is not supported */
-[V-cloak] {
- color: #FF6600;
-}
-```
-
-The restriction is only for the style definition, does not affect the use of class names. You can still use multiple class names on a single tag, such as:
-
-```Html
-<template>
- <div class="one two three"><div>
-</template>
-```
-
-### Scoped by default
-
-In Weex, For single file components, the styles written in the `<style>` can only be used in the current component.
-
-In order to maintain consistency with Native, it is recommended that you write the style in the `.vue` file with the` scoped` attribute, that is, `<style scoped>`.
-
-### Supported CSS attributes
-
-Weex supports a subset of CSS, and will continue to expand.
-
-Weex supports *box-model* and *flexbox*, as well as other common styles. See [Weex Common Style](../ common-style.html) and [Supported Web Standards](http://weex.apache.org/references/web-standards.html) for more information.
-
-In addition, you should also pay attention to the following points:
-
-+ No need to write style prefix.
-+ Weex doesn't support `display: none;` and therefore doesn't support the `v-show` directive.
-+ In order to optimize the efficiency of CSS parser, Weex doesn't support shorthand attributes, involving the following attributes:
- + `flex`
- + `border`, `border-(top|bottom|left|right)`
- + `margin`
- + `padding`
- + `font`
- + `background`
-
-## Differences in development
-
-Because of the platform difference, you have to compile your source file in two different ways:
-
-+ For the web, you can compile source files in any official way, such as Webpack + vue-loader or Browserify + vueify. and require the [weex-vue-render](https://www.npmjs.com/package/weex-vue-render), which is a group of Weex build-in components.
-+ For Android and iOS, we've provided [weex-loader](https://github.com/weexteam/weex-loader) to compile the `.vue` files. That is, use Webpack + weex-loader to generate the js bundle that is available for the native.
-
-### Use weex-loader
-
-[weex-loader](https://github.com/weexteam/weex-loader) is a loader for Webpack, see the [official document](http://webpack.github.io/docs/using-loaders.html) to learn how to use it.
-
-One more thing should be reminded is that if the *entry file* of your webpack config is a `.vue` file, you also need to pass an additional ` entry` parameter, usually set to `true`.
-
-```Js
-module.exports = {
- // Add the entry parameter for the .vue file
- entry: './path/to/App.vue?entry=true',
-
- // other configurations ...
-
- module: {
- loaders: [{
-
- // matches the .vue file path that contains the entry parameter
- test: /\.vue(\?^^]+)?$/,
- loaders: ['weex-loader']
- }]
- },
-}
-```
-
-**You don't need to write those additional parameters if you are using `.js` file as entry file.** We recommend using javascript files as the entry file of webpack config.
-
-### Setup native development environments
-
-Since your are using Weex to develop native apps, setup native development environments, both Android and iOS, would be very useful.
-
-See [Integrating Weex to the existing application](../../guide/integrate-to-your-app.html) for more information.
diff --git a/_drafts/difference-with-web.md b/_drafts/difference-with-web.md
deleted file mode 100644
index d075312..0000000
--- a/_drafts/difference-with-web.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: Vue.js 在 Weex 中的差异
-type: guide
-group: 高阶特性
-order: 8.3
-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)了解更多信息。
diff --git a/_drafts/extend-js-framework.md b/_drafts/extend-js-framework.md
deleted file mode 100644
index d7fcf6d..0000000
--- a/_drafts/extend-js-framework.md
+++ /dev/null
@@ -1,168 +0,0 @@
----
-title: Extend JS framework
-type: guide
-group: Extend
-order: 6.4
-version: 2.1
----
-
-# Extend JS framework
-
-This part of the extension of JS framework is still in the discussion, may be adjusted at any time, please pay attention.
-
-Weex wants to be able to respect as many developer development habits as possible.So, in addition to Weex official support Vue 2.0, the developer can also customize and horizontally extension their own or their favorite JS Framework.The steps to customize the JS Framework are as follows:
-
-+ First you have a complete set of JS Framework.
-+ Learn about Weex's JS engine feature support.
-+ Adapting Weex's native DOM APIs.
-+ Adapting Weex's initialization portal and multi-instance management mechanism.
-+ Add your own JS Framework to the framework configuration of the Weex JS runtime. Then pack it.
-+ Build JS bundles based on the JS Framework. You need to add a specific prefix comment so that the Weex JS runtime can recognize it.
-
-## Weex JS engine features support
-
-+ Under iOS, Weex uses the JavaScriptCore that comes with the system, so the ES support depends on the version of the operating system.
-The current conservative judgments, ES5 features on the market mainstream iOS devices are perfectly supported, but some of the features of ES6 + is not supported.
-
-+ Under Android, Weex uses the v8 kernel provided by UC. For performance and stability considerations, we are not using the latest version of the v8 kernel.The same conservative judgment, the ES5 feature can all support, including strict mode `Object.freeze` and so on.
-
-+ The Weex JS engine does not support HTML DOM APIs and HTML5 JS APIs, including `document`, `set`Timeout`, and so on.
-
-+ We added `Promise`'s polyfill, as well as the `console`'s polyfill.
-
-+ In addition, in order to ensure that the JS engine can manage memory as much as possible, we have a generic global object for the `Object.freeze ()` freeze operation, which includes:
-
- - `Object`
- - `Object.prototype`
- - `Array`
- - `Array.prototype`
- - `String.prototype`
- - `Number.prototype`
- - `Boolean.prototype`
- - `Error.prototype`
- - `Date.prototype`
- - `RegExp.prototype`
-
-## Adapt to Weex's initial entry and multi-instance management mechanism
-
-The JS Framework provided by the developer needs to be packaged as a **CommonJS** package, and the package needs to be extension to the following methods:
-
-### Framework initialization
-
-+ `init(config)`
- - `config`
- - `Document`
- - `Element`
- - `Comment`
- - `TaskSender`
- - `CallbackManager`
-
-This method places the Native DOM class and two auxiliary classes provided by Weex in the `config` parameter and allows the framework itself to be initialized.
-
-Tip: At the same time, the author can pass in a different `config` in the framework of the initialization time. This allows for framework testing or environmental simulation.
-
-#### Introduction to parameter format
-
-+ `TaskSender`: wip…
-+ `CallbackManager`: wip…
-
-### Register available native components and modules
-
-+ `registerComponents(components)`
-+ `registerModules(modules)`
-
-These two methods are called immediately after the frame is initialized. This framework will be able to know which components and modules the current client supports.
-
-#### Introduction to parameter format
-
-+ `components: Array`: Describe the array of components, each of which includes:
- + `type: string`: Component name, for example `div`。
- + `methods: string[]`: Optional, a list of method names supported by this component. These methods can follow the native DOM APIs call.
-+ `modules: Object`: Describe the hash table of a series of modules. Key is the module name, the value is an array. The elements of the array describe a method in the module. The information of the method includes:
- + `name: string`: Method name
- + `args: string[]`: Parameter number and type description
-
-**E.g:**
-
-```javascript
-registerComponents([
- { type: 'web', methods: ['goBack', 'goForward', 'refresh']}
-])
-registerModules({
- event: [
- {name: 'openURL', args: ['string']}
- ]
-})
-```
-
-### Multi - instance lifecycle management
-
-+ `createInstance(instanceId, code, config, data, env)`
-+ `refreshInstance(instanceId, data)`
-+ `destroyInstance(instanceId)`
-
-Each Weex page has two stages: created and destroyed. At the same time in the Weex page running process, native can send messages to the Weex page. Different frameworks can follow their own ideas to achieve the message.
-
-#### Introduction to parameter format
-
-+ `instanceId: string`: The unique id of the Weex page is generated by native.
-+ `code: string`:The Wex page's JS bundle's code is passed through native.
-+ `config: Object?`: The configuration information for the Wex page, such as the bundleUrl representing the bundle address, is generated by the native configuration. It has nothing to do with the contents of the JS bundle itself.
-+ `data: Object?`: Native can import an external data when creating a Weex page. The JS framework can also generate different page content for the same JS bundle with different data.
-+ `env: Object?`:The current environment information about the Weex page, the meaning of each field:
- - `info: Object`: Framework information, see the "JS Bundle format requirements" later.
- - `config: Object`:Equivalent to the third parameter of the method `config`
- - `callbacks: CallbackManager`: only `CallbackManager`instance of Weex page.
- - `created: number`:The number of seconds that the Wex page was created.
- - `framework: string`:The name of the framework used by the Wex page. Equivalent to `info.framework`.
-
-### Native communication
-
-+ `receiveTasks(instanceId, tasks)`
-
-Native can use the `refreshInstance` method to send a message to the JS framework layer. But in many cases will use `receiveTasks` to send user events or methods callback to the JS framework.
-
-For example, if the user clicks on a button, native will send a `fireEvent` type of task to the JS framework, and then the JS framework will handle the corresponding event logic. This part of the working mechanism is related to the design of the `addEvent` in the native DOM interface.
-
-Another example is the user using fetch to send network requests. When the request is done at the native end, it will be sent to the JS framework with a callback type of task. Since native can not pass the function in JavaScript, it actually only sends a callbackId to the JS framework. This part of the working mechanism is related to the design of CallbackManager.
-
-#### Auxiliary method
-
-+ `getRoot(instanceId): JSON`
-
-This method returns the full JSON description of the document body node. Developers can view the full native DOM tree as a result. The format of the specific return value is the same as the return method of the toJSON () method in the native DOM interface. This feature is used extensively as a developer tool extension.
-
-## Configure the JS Framework in WeexSDK
-### Prepare your JS Framework code
-
-```javascript
-// your-own-js-framework.js
-export function init (config) { ... }
-export function registerComponents (components) { ... }
-export function registerModules (modules) { ... }
-export function createInstance (id, code, config, data, env) { ... }
-export function destroyInstance (id) { ... }
-export function refreshInstance (id, data) { ... }
-export function recieveTasks (id, tasks) { ... }
-export function getRoot (id) { ... }
-```
-
-### Register a JS Framework
-
-```javascript
-import * as Vue from '...'
-import * as React from '...'
-import * as Angular from '...'
-export default { Vue, React, Angular };
-```
-And then packaged JS runtime, integrated into WeexSDK.
-
-#### JS Bundle format requirements
-
-**Framework info**
-The note(alias framework info) at the beginning of the JS Bundle file is very important. The format is as follows:
-
-```javascript
-// { "framework": "Vue" }
-```
-So that the Weex JS engine will know that the JS bundle needs to use the Vue framework to resolve.Similarly, Weex supports multiple frameworks.It will be based on js bundle notes to select the corresponding framework resolution.
diff --git a/_drafts/extend-to-android.md b/_drafts/extend-to-android.md
deleted file mode 100644
index 336f5df..0000000
--- a/_drafts/extend-to-android.md
+++ /dev/null
@@ -1,175 +0,0 @@
-##Extend to Android
-<span class="weex-version">0.4</span>
-
-### Module extend
-weex sdk support Module extend,
-Weex SDK provides only rendering capabilities, rather than have other capabilities, such as network, picture, and URL redirection. If you want the these features, you need to implement it.
-
-For example: If you want to implement an address jumping function, you can achieve a Module Follow the steps below.
-#### Step to customize a module
-1. Customize module must extend WXModule
-2. @WXModuleAnno annotation must be added, as it is the only the way to recognized by Weex
-3. The access levels of mehtod must be **public**
-4. The module class also can not be an inner class
-5. Customize can not be obfuscated by tools like ProGuard
-6. Module methods will be invoked in UI thread, do not put time consuming operation there
-7. Weex params can be int, double, float, String, Map, List
-
-Refer to the following example:
-
-```java
- public class WXEventModule extends WXModule{
-
- private static final String WEEX_CATEGORY="com.taobao.android.intent.category.WEEX";
-
- @WXModuleAnno
- public void openURL(String url){
- //implement your module logic here
- }
- }
-
-```
-#### Support synchronous/asynchronous callback
-you can add `` @JSMethod (uiThread = false or true ) `` annotation to choose the callback mode of moudle . see the follow example.
-```java
- // as sync-callback mode
- @JSMethod (uiThread = false)
- public void testSyncCall(){
- WXLogUtils.d("WXComponentSyncTest :"+ Thread.currentThread().getName());
- }
-
- // as async-callback mode
- @JSMethod (uiThread = true)
- public void testAsyncCall(){
- WXLogUtils.e("WXComponentASynTest :"+ Thread.currentThread().getName() );
- }
-
-```
-#### Register the moulde
-
-```java
-
- WXSDKEngine.registerModule("event", WXEventModule.class);
-
-```
-
-### Use this module in weex DSL
-Now `event` moudle is avaiable in weex, use the module like this:
-```javascript
-
-var event = weex.requireModule('event');
-event.openURL("http://www.github.com");
-
-```
-
-### Javascript callback
-If the module need implement a callback to javascript, you just add `JSCallback` argument to the method you want expose to javascript:
-```java
-
- @WXModuleAnno
- public void openURL(String url,JSCallback callback){
- //implement your module logic here
- Map<String,Object> resp = new HashMap();
- resp.put("result","ok");
- callback.invoke(resp);
- }
-
-```
-At the javascript side, call the module with javascript function to receive callback data:
-```javascript
-
-event.openURL("http://www.github.com",function(resp){ console.log(resp.result); });
-
-```
-
-### Component extend
-<font color="gray">
-There are label, image, div, scroll, ect. components in weex, you can also customize your own components.
-
-#### Step to customize a component
-
-1. Customize components must extend WXComponent or WXContainer
-2. @WXComponentProp(name=value(value is attr or style of dsl)) for it be recognized by weex SDK.
-3. The access levels of mehtod must be **public**
-4. The component class can not be an inner class
-5. Customize can not be obfuscated by tools like ProGuard
-6. Component methods will be invoked in UI thread, do not put time consuming operation there.
-7. Weex params can be int, double, float, String, Map, List, Array
-
-
-Refer to the following example
-
-```java
-
- public class MyViewComponent extends WXComponent{
- public MyViewComponent(WXSDKInstance instance, WXDomObject dom,
- WXVContainer parent, String instanceId, boolean isLazy)
- {
- public MyViewComponent(WXSDKInstance instance, WXDomObject dom,
- WXVContainer parent, String instanceId, boolean isLazy) {
- super(instance, dom, parent, instanceId, isLazy);
- }
-
- @Override
- protected void initView() {
- mHost = new TextView(mContext);
- }
- @WXComponentProp(name=WXDomPropConstant.WX_ATTR_VALUE)
- public void setMyViewValue(String value) {
- ((TextView)mHost).setText(value);
- }
- }
-
-```
-
-#### Register the Component
-
-
-```java
- WXSDKEngine.registerComponent("MyView", MyViewComponent.class);
-```
-
-### Adapter extend
-
-#### ImagedownloadAdapter
-<font color="gray">
-Weex SDK has no image download capability, you need to implement `IWXImgLoaderAdapter`. Refer to the following examples.
-
-```java
-
-public class ImageAdapter implements IWXImgLoaderAdapter {
-
- private Activity mContext;
-
- public ImageAdapter(Activity activity) {
- mContext = activity;
- }
-
- @Override
- public void setImage(final String url, final ImageView view,
- WXImageQuality quality, WXImageStrategy strategy) {
- mContext.runOnUiThread(new Runnable() {
-
- @Override
- public void run() {
- if (TextUtils.isEmpty(url)) {
- view.setImageBitmap(null);
- return;
- }
- String temp = url;
- if (url.startsWith("//")){
- temp = "http:" + url;
- }
- if (view.getLayoutParams().width<=0 || view.getLayoutParams().height<=0) {
- return;
- }
- Picasso.with(WXEnvironment.getApplication())
- .load(temp)
- .resize(view.getLayoutParams().width,
- view.getLayoutParams().height).into(view);
- }
- });
- }
-}
-
-```
diff --git a/_drafts/get-started.md b/_drafts/get-started.md
deleted file mode 100644
index a958043..0000000
--- a/_drafts/get-started.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: Get Started
-type: guide
-group: Overview
-order: 1.1
-version: 2.1
-has_chapter_content: true
----
-
-# Get Started
-
-Weex is a framework for building Mobile cross-platform high performance UI applications. Developers can leverage their existing knowledge of VueJS (a powerful JavaScript view library), by writing `*.vue` files to build native applications or pages. This page will help you to write a **Weex** application in 2 minutes.
-
-## Introduction to VueJS
-
->[VueJS](https://vuejs.org/) (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
-
-**VueJS is developed by [Evan You](https://twitter.com/youyuxi).**
-
-Weex now fully supports VueJS 2.x officially. Weex put Vue 2.x as its built-in JS Framework, making it powerful for building native apps!.
-
-## Hello world Example
-
-The easiest way to try Weex is to use the [Playground App](../playground.html) to write a [Hello World](http://dotwe.org/vue/4d5a0471ece3daabd4681bc6d703c4c1) example at [dotWe](http://dotwe.org). No installation is required and you do not even have to write native code.
-
-To test Weex online using our Playground App:
-
-- Install the [Playground App](../playground.html) on your phone.
-- Open [the Hello World example](http://dotwe.org/vue/4d5a0471ece3daabd4681bc6d703c4c1) in a new tab, click run, and then use the Playground App to scan the QR code.
-
-Nailed it!
-
-If you took the procedure above, you can see simple HTML semantic tags, CSS styles and Javascript code. This is one of the simplest Weex examples. The demo applications renders a "Hello World" in the page. Please note that this is not a Web page. You are running native!.
-
-
-
-### What happened?
-
-As shown in the following code：
-
-```html
-<template>
- <div>
- <text class="text">{{text}}</text>
- </div>
-</template>
-
-<style>
- .text {
- font-size: 50;
- }
-</style>
-
-<script>
- export default {
- data () {
- return {
- text: 'Hello World.'
- }
- }
- }
-</script>
-```
-
-It's too easy，right? Take a look at the syntax, that is vue.
-
-You can try to modify the Hello World example if you have previous knowledge of building VueJS examples, then generate a new QR code to scan. If you don't have previous knowledge of VueJS, don't worry, this guide will teach you just that. Moreover, you can always learn from the [VueJS Guide](https://vuejs.org/v2/guide).
diff --git a/_drafts/native-dom-api.md b/_drafts/native-dom-api.md
deleted file mode 100644
index 37729a2..0000000
--- a/_drafts/native-dom-api.md
+++ /dev/null
@@ -1,212 +0,0 @@
----
-title: Native DOM APIs
-type: references
-order: 6
-version: 2.1
-has_chapter_content: true
----
-
-# Native DOM APIs
-
-Weex in the JS engine, for each page provides a set of Native DOM APIs. This interface is very close to the HTML DOM APIs. Using this interface we can control native rendering logic via JavaScript. And Weex upper layer of Vue 2.0 is based on this interface to adapt.
-
-In most cases, the JS framework will encapsulate native DOM APIs. That way, the developer does not need to work directly on the Native DOM.
-
-+ `Document` class: full page document.
-+ `Node` class: the base class of nodes.
-+ `Element` class: element node, inherited from Node, single view unit.
-+ `Comment` class: comment node, inherited from Node, no practical meaning, usually used as placeholders.
-
-Each Weex page has a `weex.document` object, which is an instance of the Document class and is the starting point for all the following interface calls.
-
-Let's take a look at their usage in detail:
-
-## `Document` class
-Each `Document` instance will automatically have a `documentElement` property when it is created. This attribute represents the document node. The document node can have a body, which is the main node of the document.
-
-Note: The document node body only accepts `<div>`, `<list>`, or `<scroller>` three types of element nodes.
-
-### Constructor
-`new Document(id: string, url: string?)`
-
-### Member method
-`createElement(tagName: string, props: Object?): Element`
-
-+ Creates an `Element` instance of a specific type `tagName`, which is an element node. Props can contain attr objects and style objects. Such as `createBody ('div', {style: {backgroundColor: '#ffffff'}})`.
-
-`createComment(text: string): Comment`
-
-+ Create an instance of ·`Comment`, which is a comment node and set a text description.
-
-`createBody(tagName: string, props: Object?): Element`
-
-+ Create a document body node and automatically mount it under `documentElement`.
-
-`fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)`
-Triggers a particular type of event. When the event modifies the DOM's properties or styles during the generation process, the fourth argument is used to describe the changes, and the parameter format is the same as the format of the `createElement` method above.
-
-`destroy()`
-
-+ Destroy the current document. Once the document is destroyed, it will no longer work.
-
-### Read-only member variables
-`id: string`
-
-+ Each `Document` instance has a unique id. This is also the only id that each Weex page has.
-
-`URL: string?`
-
-+ If the current Weex page has a JS bundle URL, the URL will be returned here.
-
-`body: Element`
-
-+ The main body of the document, the concept similar to the HTML DOM document.body.
-
-`documentElement: Element`
-
-+ Document node, the concept similar to the HTML DOM document.documentElement.
-+ The relationship between body and documentElement is: documentElement is the parent of the body.
-
-`getRef(id): Node`
-
-+ Get the node based on the node id.
-
-## `Node` Class
-### Constructor
-`new Node()`
-
-### Member method
-`destroy()`
-
-### Read-only member variables or methods
-`ref: string`
-
-+ Each `Node` instance has its own unique ref value in the entire `Document instance.
-
-`nextSibling: Node?`
-
-`previousSibling: Node?`
-
-`parentNode: Node?`
-
-+ The three interfaces are consistent with the definition of HTML DOM.
-
-`children: Node[]`
-
-+ The node has an array of all child nodes.
-
-`pureChildren: Node[]`
-
-The node has an array of all the child elements. The difference between it and `children` is that `pureChildren` contains only the `Element` instance and not the `Comment` instance.
-
-
-## `Element` class, inherited from `Node`
-### Constructor
-`new Element(type: string, props: Object?)`
-
-+ Creates an element node of a particular type `type`, and the `props` parameter can contain an `attr` object or a `style` object.
-
-### DOM tree operation
-`appendChild(node: Node)`
-`insertBefore(node: Node, before: Node?)`
-
-+ The two interfaces are similar to HTML DOM.
-
-`insertAfter(node: Node, after: Node?)`
-
-+ Insert a new node before a child node.
-
-`removeChild(node: Node, preserved: boolean?)`
-
-+ Delete the child node node. Parameters `preserved` whether it is immediately removed from memory or temporarily retained.
-
-`clear()`
-
-+ Clear all child nodes.
-
-### The DOM property itself operates
-
-`setAttr(key: string, value: string, silent: boolean?)`
-
-`setStyle(key: string, value: string, silent: boolean?)`
-
-+ In the above two interfaces, when `silent` is true, the node only updates itself, does not pass the command to the client render layer. This parameter is used to handle user events that have changed the node-related properties at the time of occurrence, and will not send commands repeatedly to the client after the Native DOM has changed.
-
-`addEvent(type: string, handler: Function)`
-
-`removeEvent(type: string)`
-
-`fireEvent(type: string, e: any)`
-
-+ Bind events, unbind events, trigger events.
-
-#### Component method for a specific component type
-
-Special: Different component types can have their own unique methods, such as `<web>` components support `refresh` method. You can see the description of each component. In this case, we will generate a specific component type of class, such as `WebElement`, which inherited from `Element`.
-
-Such as:
-
->`WebElement` inherited from `Element`
->Indicates that a webview is embedded in the Wex page
-
->`Refresh ()`: Refreshes the current webview
-
-
-### Read-only member variables or methods
-
-`ref`, `nextSibling`, `previousSibling`, `parentNode`
-
-+ Inherited from `Node`.
-
-`nodeType: number`
-
-+ The number is always 1.
-
-
-`type: string`
-
-+ Consistent with the `type` in the constructor.
-
-`attr: Object`
-
-+ The key pair of all the characteristics of the current node. It is recommended to use the `setAttr ()` method to modify, rather than directly modify the object here.
-
-`style: Object`
-
-+ The value of all the keys of the current node. It is recommended to modify the `setStyle ()` method, rather than directly modify the object here.
-
-`event: Object`
-
-+ All events of the current node are bound. Each event type corresponds to an event handler method. It is recommended to use the `addEvent () / removeEvent ()` method to modify, rather than directly modify the object here.
-
-`toJSON(): Object`
-
-+ Returns a JSON object that describes the element's node, such as: `{ref: string, type: string, attr: Object, style: Object, event: Array (string), children: Array}`.
-
-
-## `Comment` class, inherited from `Node`
-
-### Constructor
-`new Comment(value: string)`
-
-### Read-only member variables or methods
-
-`ref`, `nextSibling`, `previousSibling`, `parentNode`
-
-+ Inherited from `Node`.
-
-`nodeType: number`
-
-+ The number is always 8.
-
-`type: string`
-
-+ The type is always `'comment'`
-
-`value: string`
-
-+ Consistent with the value in the constructor.
-
-`toJSON(): Object`
-
-+ Returns a JSON object describing the annotation node. For example: `<! - value ->`.
diff --git a/_drafts/sandbox.md b/_drafts/sandbox.md
deleted file mode 100644
index f5cf5dc..0000000
--- a/_drafts/sandbox.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Weex 多实例隔离机制
-
-## 需求
-
-隔离每个页面实例的执行环境，保障实例中的变量无法污染全局。
-
-## 污染点
-
-1. global javascript context
-2. global objects: `Object`, `Array`, `Array.prototype`
-3. (browser) global apis: `setTimeout`, `Promise`, `console`.
-4. weex, document
-5. Vue & Rax
-
-## 实现思路
-
-+ 从客户端或引擎级别将页面的执行环境区分开。
-
-### 额外收获
-
-+ 取消 **“用 js 执行 js”**（`new Function`）之后，更细粒度的代码分割、动态组件或模块都可以实现了。
-
-### 依然存在的风险点
-
-+ console
-+ Promise
-+ timer
-+ 回调函数
-
-+ js service
-+ weex 不是开放问题，用 freeze 可以防御
-+ Vue 不是开发问题，用 freeze 可以防御。如果前端框架从 jsfm 中拆离，可彻底解决问题。
-
-## 增强方案
-
-## 更激进方案
diff --git a/_drafts/timer.cn.md b/_drafts/timer.cn.md
deleted file mode 100644
index c93f937..0000000
--- a/_drafts/timer.cn.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Timer
-type: references
-group: 内置模块
-order: 9.03
-version: 0.10
----
-
-# Timer
-Weex Timer可以用来延时启动一个一次性任务或者重复任务。Timer会尽最大努力提供精确的延时，但是延时可能并不精确，延时时间很可能会超过用户期望的时间。实际上，timer仅仅是为了支持HTML5中的polyfill，*不建议*开发者直接使用timer.
-
-## API
-Timer中延时的单位是毫秒，且延时时间应该为一个非负的**int**值(int值最大为0x7FFFFF).如果延时时间为零，会将该任务马上插入任务队列的尾部。对于其他非法值，timer的行为未定义。
-
-### setTimeout(fn, timeout)
-`setTimeout()`会等待指定的时间，然后执行给出的函数。
-* 可以使用 `clearTimeout()`去阻止`setTimeout()`运行如果此时对应的`setTimeout()`还没有运行的话。
-* 如果需要重复执行任务，使用`setInterval()`.
-
-#### Arguments
-* `fn` (function): 待执行的函数.
-* `timeout` (number): 执行函数前的等待时间，单位为毫秒。
-
-#### Return value
-一个Number对象, 表示这个任务的id。把id传入clearTimeout(fnId)中可以用来取消任务。
-
-### setInterval(fn, interval)
-`setInterval()`每隔指定的时间间隔后，会执行对应的函数。`setInterval()`不会停止，除非`clearInterval()`被调用。`setInterval()`的返回值可以用来作为`setInterval()`的参数。
-
-#### Arguments
-* `fn` (function): 待执行的函数。
-* `interval` (number): 这次执行函数与下一次函数之间的时间间隔，单位为毫秒。
-
-#### Return value
-一个Number对象，代表任务序列的id。可以把这个值传入`clearInterval`中来终止重复任务的执行。
-
-### clearTimeout(fnId)
-`clearTimeout()`可以用来提前终止`setTimeout()`启动的任务。仅当`setTimeout()`对应的任务没有被执行时，`clearTimeout()`才可以用来终止该任务，否则`clearTimeout()`没有任何效果。
-
-#### Arguments
-* `fnId` (number): `setTimeout()`的返回值.
-
-### clearInterval(fnId)
- `clearInterval()`可以用来终止 `setInterval()`启动的任务序列。
-
-#### Arguments
-* `fnId` (number): `setInterval()`的返回值
-
-[Try it](http://dotwe.org/vue/ad564965f1eac5a4bc86946ecff70a0c)
diff --git a/_drafts/timer.md b/_drafts/timer.md
deleted file mode 100644
index da518fd..0000000
--- a/_drafts/timer.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: Timer
-type: references
-group: Build-in Modules
-order: 9.03
-version: 0.10
----
-
-# Timer
-
-Weex encapsulates a series of APIs in order to start/stop a one-time task or a repeated task at a fixed delay. Please note that this module don't provide an accuracy delay. It provides best-effort delivery, but the actual delay may still exceed the delay user wants if the corresponding thread is busy.
-Actually, this module is made for the polyfill of HTML5 timer APIs, developers **should not** use this module directly unless they know exactly what they are doing.
-
-## API
-
-All timeout or interval in this module are measured in milliseconds. Also, timeout and interval should be a non-negative **integer**(the max of integer is 0x7FFFFFFF). The behavior of invalid value for timeout or interval is undefined.
-
-### setTimeout(fn, timeout)
-
-The `setTimeout()` method calls a function after a specified number of milliseconds. Use the `clearTimeout()` method to prevent the function from running. The function is only executed once. If you need to repeat execution, use the `setInterval()` method.
-
-#### Arguments
-
-- `fn` (function): The function that will be executed
-- `timeout` (number): The number of milliseconds to wait before executing the function
-
-#### Return value
-
-A Number, representing the fnId value of the timer that is set. Use this value with the `clearTimeout()` method to cancel the timer.
-
-### setInterval(fn, interval)
-
-The `setInterval()` method calls a function at specified intervals (in milliseconds), and it will continue calling the function until `clearInterval()` is called. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method.
-
-#### Arguments
-
-- `fn` (function): The function that will be executed
-- `interval` (number): The intervals (in milliseconds) on how often to execute the function
-
-#### Return value
-
-A Number, representing the fnId value of the timer that is set. Use this value with the `clearInterval()` method to cancel the timer
-
-### clearTimeout(fnId)
-
-The `clearTimeout()` method clears a timer set with the `setTimeout()` method. The fnId value returned by `setTimeout()` is used as the parameter for the `clearTimeout()` method. If the function has not already been executed, you will be able to stop the execution by calling the `clearTimeout()` method, otherwise, this method has no influence on the task.
-
-#### Arguments
-
-- `fnId` (number): The fnId value of the timer returned by the `setTimeout()` method
-
-### clearInterval(fnId)
-
-The `clearInterval()` method clears a timer set with the `setInterval()` method. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method.
-
-#### Arguments
-
-- `fnId` (number): The fnId of the timer returned by the `setInterval()` method
-
-[Try it](http://dotwe.org/vue/ad564965f1eac5a4bc86946ecff70a0c)
diff --git a/_drafts/using-vue.md b/_drafts/using-vue.md
deleted file mode 100644
index 3da03f6..0000000
--- a/_drafts/using-vue.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Using Vue
-type: guide
-group: Develop
-order: 5.2
-version: 2.1
----
-
-# Using Vue
-
-## Vue in Weex
-
-[Vue.js](https://vuejs.org/) is an excellent progressive JavaScript framework written by [Evan You](https://twitter.com/youyuxi) which is very easy and flexible to use. Developers can write `*.vue` files with friendly `<template>`, `<style>`, `<script>` tags to build componentized web apps.
-
-
-
-In Oct 2016 Vue.js launched 2.0, which includes the virtual-DOM and pre-compiler for HTML templates. This means Vue.js can run in a JS-only environment without HTML / CSS parsers. The virtual-DOM layer also makes Vue 2.x able to render native UIs through JavaScript.
-
-Weex and Vue now support each other officially. Now that Weex includes Vue 2.x as its built-in JS Framework, Vue can be used to develop native mobile apps.
-
-**Links**
-
-* [Weex tutorial](../index.html)
-* [Vue Introduction](https://vuejs.org/v2/guide/)
-* [How Weex works](./index.html)
-
-## New Features of Vue 2.x in Weex
-
-### Stream Rendering
-
-In Weex, developers can use `<foo append="tree|node">` to customize the rendering granularity to balance different UI complexity and business logic in order to get the best first-paint performance. `append=tree` means that the entire node, including all its child nodes, will be one-time rendered to native UI after all of the nodes generated completely. And `append=node` means just render the current node itself first and its child nodes will be futher rendered later.
-
-<!-- dotwe demo -->
-
-### Two-way Data Binding in Form Controls
-
-In Weex, we provide the same `v-model` directive as web dev exprience for both `<input>` and `<textarea>` components. Developers can write `<input v-model="message">` or `<textarea v-model="message">` to bind data `message` and show it on the text box automatically. When user modifies the text box, the value of data `message` will be automatically updated.
-
-<!-- dotwe demo -->
-
-### Isolate Each Page Contexts
-
-As described in [how Weex works](./index.html), all Weex's JS bundles share a JavaScript instance. So how can we make Vue 2.x used in multiple JS bundles completely isolated, and that one page which extends or rewrites Vue does not affect other pages becomes a problem. Through the collaboration between Weex and Vue. The problem has been solved.
-
-<!-- html5 apis -->
-
-### `<transition>`
-
-Weex supports the awesome `<transition>` syntax in Vue 2.x. Developers can easily define the transition of an interface in both states with `<transition>` tag.
-
-## Notice
-
-Web development and native development, after all, there are some differences in functionality and development experience, which are essentially the differences between the native development platform and the Web platform, and Weex is trying to narrow the scope of this difference. See [differences of Vue 2.x between Weex and web](../../references/vue/index.html)
-
-## Using Vue-related Libs
-
-Vue.js also has more cool related libs. For example [Vuex](https://github.com/vuejs/vuex) and [vue-router](https://github.com/vuejs/vue-router). They all work well in Weex. For using Vuex and vue-router, see [Using Vuex and vue-router in Weex](../../references/vue/difference-of-vuex.html)。
-
-> We developed a complete project based on Weex and Vue 2.x which named [weex-hackernews](https://github.com/weepteam/web-ehackernews). It includes WeexSDK with Vue 2.x in iOS, Android and web. Also we use Vuex and vue-router. The whole project uses the same source code for three different platforms.
diff --git a/_drafts/v-0.10/advanced/extend-to-android.md b/_drafts/v-0.10/advanced/extend-to-android.md
deleted file mode 100644
index 97bb49e..0000000
--- a/_drafts/v-0.10/advanced/extend-to-android.md
+++ /dev/null
@@ -1,189 +0,0 @@
----
-title: Extend to Android
-type: advanced
-order: 6
-has_chapter_content: true
-version: 0.10
----
-
-# Extend to Android
-
-### Module extend
-weex sdk support Module extend,
-Weex SDK provides only rendering capabilities, rather than have other capabilities, such as network, picture, and URL redirection. If you want the these features, you need to implement it.
-
-For example: If you want to implement an address jumping function, you can achieve a Module Follow the steps below.
-
-#### Step to customize a module
-
-1. Customize module must extend WXModule
-2. @WXModuleAnno annotation must be added, as it is the only the way to recognized by Weex
-3. The access levels of mehtod must be **public**
-4. The module class also can not be an inner class
-5. Customize can not be obfuscated by tools like ProGuard
-6. Module methods will be invoked in UI thread, do not put time consuming operation there
-7. Weex params can be int, double, float, String, Map, List
-
-Refer to the following example:
-
-```java
-public class WXEventModule extends WXModule{
-
- private static final String WEEX_CATEGORY="com.taobao.android.intent.category.WEEX";
-
- @JSMethod
- public void openURL(String url){
- //implement your module logic here
- }
-}
-
-```
-
-#### Register the moulde
-
-```java
- WXSDKEngine.registerModule("event", WXEventModule.class);
-```
-
-### Use this module in weex DSL
-Now `event` moudle is avaiable in weex, use the module like this:
-
-```javascript
-var event = require('@weex-module/event');
-event.openURL("http://www.github.com");
-```
-
-### Javascript callback
-
-If the module need implement a callback to javascript, you just add `JSCallback` argument to the method you want expose to javascript:
-
-```java
- @JSMethod
- public void openURL(String url,JSCallback callback){
- //implement your module logic here
- Map<String,Object> resp = new HashMap();
- resp.put("result","ok");
- callback.invoke(resp);
- }
-```
-
-At the javascript side, call the module with javascript function to receive callback data:
-
-```javascript
-event.openURL("http://www.github.com",function(resp){ console.log(resp.result); });
-```
-
-### Component extend
-
-There are label, image, div, scroll, ect. components in weex, you can also customize your own components.
-
-#### Step to customize a component
-
-1. Customize components must extend WXComponent or WXContainer
-2. @WXComponentProp(name=value(value is attr or style of dsl)) for it be recognized by weex SDK.
-3. The access levels of mehtod must be **public**
-4. The component class can not be an inner class
-5. Customize can not be obfuscated by tools like ProGuard
-6. Component methods will be invoked in UI thread, do not put time consuming operation there.
-7. Weex params can be int, double, float, String, Map, List, Array
-
-
-Refer to the following example
-
-```java
-public class MyViewComponent extends WXComponent{
- public MyViewComponent(WXSDKInstance instance, WXDomObject dom,
- WXVContainer parent, String instanceId, boolean isLazy)
- {
- public MyViewComponent(WXSDKInstance instance, WXDomObject dom,
- WXVContainer parent, String instanceId, boolean isLazy) {
- super(instance, dom, parent, instanceId, isLazy);
- }
-
- @Override
- protected void initView() {
- mHost = new TextView(mContext);
- }
- @WXComponentProp(name=WXDomPropConstant.WX_ATTR_VALUE)
- public void setMyViewValue(String value) {
- ((TextView)mHost).setText(value);
- }
-}
-```
-
-#### Register the Component
-
-
-```java
-WXSDKEngine.registerComponent("MyView", MyViewComponent.class);
-```
-
-### Adapter extend
-
-#### ImagedownloadAdapter
-
-Weex SDK has no image download capability, you need to implement `IWXImgLoaderAdapter`. Refer to the following examples.
-
-```java
-public class ImageAdapter implements IWXImgLoaderAdapter {
-
- private Activity mContext;
-
- public ImageAdapter(Activity activity) {
- mContext = activity;
- }
-
- @Override
- public void setImage(final String url, final ImageView view,
- WXImageQuality quality, WXImageStrategy strategy) {
- mContext.runOnUiThread(new Runnable() {
-
- @Override
- public void run() {
- if (TextUtils.isEmpty(url)) {
- view.setImageBitmap(null);
- return;
- }
- String temp = url;
- if (url.startsWith("//")){
- temp = "http:" + url;
- }
- if (view.getLayoutParams().width<=0 || view.getLayoutParams().height<=0) {
- return;
- }
- Picasso.with(WXEnvironment.getApplication())
- .load(temp)
- .resize(view.getLayoutParams().width,
- view.getLayoutParams().height).into(view);
- }
- });
- }
-}
-```
-
-#### Component Method
-from WeexSDK `0.9.5`, you can define your component method
-
-for example, define a method in component:
-
-```java
-@JSMethod
-public void focus(){
-//method implementation
-}
-```
-
-after your registration for your own custom component, now you can call it in your js file.
-
-```html
-<template>
- <mycomponent id='mycomponent'></mycomponent>
-</template>
-<script>
- module.exports = {
- created: function() {
- this.$el('mycomponent').focus();
- }
- }
-</script>
-```
diff --git a/_drafts/v-0.10/advanced/extend-to-html5.md b/_drafts/v-0.10/advanced/extend-to-html5.md
deleted file mode 100644
index 6201fc7..0000000
--- a/_drafts/v-0.10/advanced/extend-to-html5.md
+++ /dev/null
@@ -1,258 +0,0 @@
----
-title: Extend to web
-type: advanced
-order: 8
-has_chapter_content: true
-version: 0.10
----
-
-# Extend Weex HTML5
-
-### Intro
-
-Weex is a extendable cross-platform solution for dynamic programming and publishing projects. You can build your own components on web platform or native platform by extending the components system. Also you can extend weex by adding new methods for one module, new moudles or new bundle loaders. Follow the steps bellow you can dive into the journy of creating multiple builtin components, APIs and loaders.
-
-First of all, components, APIs and loaders are extensions to weex, so you can create your extensions without requiring the weex package, that means your extensions can be totally standalone.
-
-Second, you should always implement a extension for all the three platforms (android, ios and web), except that you only use it on one specific platform. After all weex is a cross platform framework and the equality of user expierence in all platforms is very important. Although you can create components separately on one platform by another, or welcome other developers on other platforms to join your work (You can always find coders who want the same feature with you in the commity). Here are docs about how to create native extensions on [ios](./extend-to-ios.html) and [android](./extend-to-android.html).
-
-You should publish your extensions somewhere weex developers can easily find, somewhere popular, independent and easy to search and use, such as, npm. Npm is what we strongly recommended.
-
-The most important thing is, you'd better name your extension appropriately: it should begin with a `weex-` if it is a weex extension, and it should end up with a `-<platform>` as a platform mark. If your package is wrapped up with all the three platforms you can ignore it through. Here is a demonstrating component [`<weex-hello-web>`](https://github.com/MrRaindrop/weex-hello-web) to show how to define your own component.
-
-### Create a new component
-
-Steps:
-
-1. Extend `Weex.Component`, override methods of component class.
-2. Use `Weex.registerComponent` to register your customized component in the `init` method of the installation module.
-3. export the `init` method for the installation (Every weex-html5 extension has to have a `init` method in the export object, which is for another weex project to install.)
-
-Here's a example to create a weex component for web platform (weex-html5):
-
-```javascript
-const attr = {
- // ...
-}
-const style = {
- // ...
-}
-const event = {
- // ...
-}
-// every extension file should have a init method.
-function init (Weex) {
- const Component = Weex.Component
- const extend = Weex.utils.extend
-
- // the component's constructor
- function Hello (data) {
- Component.call(this, data)
- }
-
- // extend the prototype
- Hello.prototype = Object.create(Component.prototype)
- extend(Hello.prototype, proto)
-
- // config the attributes, styles and events.
- extend(Hello.prototype, { attr })
- extend(Hello.prototype, {
- style: extend(Object.create(Component.prototype.style), style)
- })
- extend(Hello.prototype, { event })
-
- Weex.registerComponent('weex-hello', Hello)
-}
-
-// export the init method.
-export default { init }
-```
-
-The code above is extracted from [weex-hello-web/src/index.js](https://github.com/MrRaindrop/weex-hello-web/blob/master/src/index.js#L46-L65).
-
-This demo has overrided the `create` method of the base class `Component`. You can also override other methods to customize your component's behavior. The typical methods of class `Component` you may override are:
-
-* `create`: to create the node of the component, and return it.
-* `createChildren` to create the children's nodes.
-* `insertBefore` to insert a child before another child.
-* `appendChild` to append a child in the children list.
-* `removeChild` to remove a child in the children list.
-
-**Advanced**: Need more code demonstrations about overriding the component's methods ? Just take a look at the [weex repo's code](https://github.com/apache/incubator-weex/tree/dev/html5/). Basically the most of the built-in components are defined this way.
-
-Important! To register your component in the `init` method, use `Weex.registerComponent`. Here's the demo code:
-
-```javascript
-Weex.registerComponent('weex-hello', Hello)
-```
-
-The code above is from [weex-hello-web/src/index.js](https://github.com/MrRaindrop/weex-hello-web/blob/master/src/index.js#L62)
-
-Install the component using `Weex.install`.
-
-```javascript
-// import the original weex-html5.
-import weex from 'weex-html5'
-import hello from 'weex-hello-web'
-// install the component.
-weex.install(hello)
-```
-
-The code above is from [weex_extend_demo/src/main.js](https://github.com/MrRaindrop/weex_extend_demo/blob/master/src/main.js#L1-L5)
-
-use the component in your `.we` file:
-
-```html
-<template>
- <div>
- <weex-hello class="hello" style="txt-color:#fff;bg-color:green"
- value="WEEX" onclick="handleClick">
- </weex-hello>
- </div>
-</template>
-```
-
-The code above is from [weex_extend_demo/demo/index.we](https://github.com/MrRaindrop/weex_extend_demo/blob/master/demo/index.we#L10-L15)
-
-### Add a new API
-
-You can add new API modules, or just add a new API for any existing API modules. For example, you can add a new module `user` with APIs like 'login', 'logout' etc. The developer can invoke the API by using `require('@weex-module/moduleName)[methodName](arg1, arg2, ...)` ([Module APIs](../references/api.html)).
-
-Steps:
-
-1. Implement your API modules.
-2. Use `Weex.registerAPIModules` to register your API modules in the init method of your installation module.
-
-**Here is a example for register a new API module**
-
-First create a file named `user.js` for a new module, then define `login/logout` methods.
-
-```javascript
-const user = {
- // for user to login.
- login (callbackId) {
- login.then(res => {
- this.sender.performCallback(callbackId, res)
- }).catch(err => {
- this.sender.performCallback(callbackId, err)
- })
- },
-
- // for user to logout.
- logout (callbackId) {
- logout.then(res => {
- this.sender.performCallback(callbackId, res)
- }).catch(err => {
- this.sender.performCallback(callbackId, err)
- })
- }
-}
-
-// add meta info to user module.
-const meta = {
- user: [{
- name: 'login',
- args: ['function']
- }, {
- name: 'logout',
- args: ['function']
- }]
-}
-
-export default {
- init (Weex) {
- // Register your new module. The last parameter is your
- // new API module's meta info.
- Weex.registerApiModule('user', user, meta)
- }
-}
-```
-
-After above coding work, you can publish this user helper API to npm now, for example, with the name of `weex-user-helper`.
-
-Install the component using `Weex.install` in your new weex project.
-
-```javascript
-import Weex from 'weex-html5'
-import user from 'weex-user-helper'
-
-Weex.install(user)
-```
-
-Use the user helper API in your dsl code (xxx.we):
-
-```html
-<template>
- <div>
- <div class="btn" onclick="handleClick">
- <text>LOGIN</text>
- </div>
- </div>
-</template>
-
-<script>
- var userHelper = require('@weex-module/user')
- module.exports = {
- methods: {
- handleClick: function () {
- userHelper.login(function () {
- // ... do sth. in callback.
- })
- }
- }
- }
-</script>
-```
-
-### Add a new loader
-
-**Loader is only a type of extension for weex-html5 (web platform), native platform is not needing this.**
-
-Weex's builtin loaders to load a weex bundle are `xhr`, `jsonp` and `source`. The default loader is `xhr`. You can register your own loader by using `weex.registerLoader`. For example, you got a service method named `myServe.getWeexBundle`, which can load a weex bundle file through some magical tunnel:
-
-```javascript
-function loadByMyServe(pageId, callback) {
- myServe.getWeexBundle(pageId).then(function (bundle) {
- callback(bundle)
- }).catch(function(err) {
- callback(err)
- })
-}
-
-// export the init method to enable weex install this loader.
-export default {
- init (Weex) {
- Weex.registerLoader('myserve', loadByMyServe)
- }
-}
-```
-
-install and use your loader in your project's entry file:
-
-```javascript
-import Weex from 'weex-html5'
-
-// or import from './myserve.js', no matter where you can import your loader file.
-import loader from 'myLoader'
-
-Weex.install(loader)
-
-// use your loader in the init function:
-(function () {
- function getUrlParam (key) {
- const reg = new RegExp('[?|&]' + key + '=([^&]+)')
- const match = location.search.match(reg)
- return match && match[1]
- }
- const page = getUrlParam('page') || 'examples/build/index.js'
- Weex.init({
- appId: location.href,
- loader: 'myserve', // use the loader type you defined.
- source: page,
- rootId: 'weex'
- })
-})();
-```
-
-That's the major extension feature weex brought to you. The deep details can be found in the [weex's repo](https://github.com/alibaba/weex) and the weex's community.
-
diff --git a/_drafts/v-0.10/advanced/extend-to-ios.md b/_drafts/v-0.10/advanced/extend-to-ios.md
deleted file mode 100644
index bddb96e..0000000
--- a/_drafts/v-0.10/advanced/extend-to-ios.md
+++ /dev/null
@@ -1,311 +0,0 @@
----
-title: Extend to iOS
-type: advanced
-order: 7
-has_chapter_content: true
-version: 0.10
----
-
-# Extend to iOS
-
-### Module extend
-
-Weex SDK provides only rendering capabilities, rather than have other capabilities, such as network, picture, and URL redirection. If you want these features, you need to implement it.
-
-For example: If you want to implement an address jumping function, you can achieve a Module following the steps below.
-
-#### Step to customize a module
-
-1. Module
- customized must implement WXModuleProtocol
-2. A macro named `WX_EXPORT_METHOD` must be added, as it is the only way to be recognized by Weex. It takes arguments that specifies the method in module called by JavaScript code.
-3. The weexInstance should be synthesized. Each module object is bind to a specific instance.
-4. Module methods will be invoked in UI thread, so do not put time consuming operation there. If you want to execute the whole module methods in other thread, please implement the method `- (NSThread *)targetExecuteThread` in protocol. In the way, tasks distributed to this module will be executed in targetExecuteThread.
-5. Weex params can be String or Map.
-6. Module supports to return results to Javascript in callback. This callback is type of `WXModuleCallback`, the params of which can be String or Map.
-
-```objective-c
-@implementation WXEventModule
-@synthesize weexInstance;
- WX_EXPORT_METHOD(@selector(openURL:callback))
-
-- (void)openURL:(NSString *)url callback:(WXModuleCallback)callback
-{
- NSString *newURL = url;
- if ([url hasPrefix:@"//"]) {
- newURL = [NSString stringWithFormat:@"http:%@", url];
- } else if (![url hasPrefix:@"http"]) {
- newURL = [NSURL URLWithString:url relativeToURL:weexInstance.scriptURL].absoluteString;
- }
-
- UIViewController *controller = [[WXDemoViewController alloc] init];
- ((WXDemoViewController *)controller).url = [NSURL URLWithString:newURL];
-
- [[weexInstance.viewController navigationController] pushViewController:controller animated:YES];
- callback(@{@"result":@"success"});
-}
-
-@end
-```
-
-#### Register the module
-
-You can register the customized module by calling the method `registerModule:withClass` in WXSDKEngine.
-
-```objective-c
-WXSDKEngine.h
-/**
-* @abstract Registers a module for a given name
-* @param name The module name to register
-* @param clazz The module class to register
-**/
-+ (void)registerModule:(NSString *)name withClass:(Class)clazz;
-
-[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
-```
-
-### Handler extend
-
-Weex SDK doesn't have capabilitis, such as image download 、navigator operation，please implement these protocols by yourself.
-
-#### WXImgLoaderProtocol
-<font color="gray">
-Weex SDK has no image download capability, you need to implement `WXImgLoaderProtocol`. Refer to the following examples.
-
-```objective-c
-WXImageLoaderProtocol.h
-@protocol WXImgLoaderProtocol <WXModuleProtocol>
-
-/**
- * @abstract Creates a image download handler with a given URL
- * @param imageUrl The URL of the image to download
- * @param imageFrame The frame of the image you want to set
- * @param options : The options to be used for this download
- * @param completedBlock : A block called once the download is completed.
- image : the image which has been download to local.
- error : the error which has happened in download.
- finished : a Boolean value indicating whether download action has finished.
- */
- -(id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;
- @end
-```
-
-Implement above protocol as follows.
-
-
-```objective-c
-@implementation WXImgLoaderDefaultImpl
-#pragma mark -
-#pragma mark WXImgLoaderProtocol
-
-- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock
-{
- if ([url hasPrefix:@"//"]) {
- url = [@"http:" stringByAppendingString:url];
- }
- return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
- } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
- if (completedBlock) {
- completedBlock(image, error, finished);
- }
- }];
-}
-@end
-```
-
-#### Register the handler
-
-You can register the handler which implements the protocol by calling `registerHandler:withProtocol` in WXSDKEngine.
-
-```objective-c
-WXSDKEngine.h
-/**
-* @abstract Registers a handler for a given handler instance and specific protocol
-* @param handler The handler instance to register
-* @param protocol The protocol to confirm
-*/
-+ (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
-
-[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];
-```
-
-## Custom Native Components for iOS
-
-### Component extend
-
-There are a lot of native components ready to be used in the Weex SDK, but users always have their own use cases. You might have written an awesome native UI widget in your previous work and just want to wrap up it and export to Weex. So we provide a way to enable developers to create their own custom fully-native components.
-
-This guide will use the implementation of existing component `image` to show you how to build a native component. It will also assume that you are familiar with iOS programming.
-
-#### Registration
-
-Defining a custom native component is simple. Just call `[WXSDKEngine registerComponent:withClass:]` with the component's tag name as first argument.
-
-```objective-c
-[WXSDKEngine registerComponent:@"image" withClass:[WXImageComponent class]];
-```
-
-Then you can create a `WXImageComponent` class to represent the implementation of image component.
-
-Now you can use `<image>` wherever you want in the template.
-
-```html
-<image></image>
-```
-
-#### Adding Properties
-
-The next thing we can do is to extend some native properties to make the component more powerful. As an image, let's say we should have a `src` attribute as image's remote source and a `resize` attribute as image's resize mode(contain/cover/stretch).
-
-```objective-c
-@interface WXImageComponent ()
-
-@property (nonatomic, strong) NSString *imageSrc;
-@property (nonatomic, assign) UIViewContentMode resizeMode;
-
-@end
-```
-
-All of the styles, attributes and events will be passed to the component's initialization method, so here you can store the properties which you are interested in.
-
-```objective-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
-```
-
-The properties getted in the attributes are of `id` type, so we have to convert them to the type we want using a conversion function. Basic conversion functions can be found in the `WXConvert` file, or you can just add your own conversion function.
-
-
-#### Hooking Render Life Cycle
-
-A Native Component has a life cycle managed by Weex. Weex creates it, layout it, renders it and destroys it.
-
-Weex offers component life cycle hooks that give you visibility into these key moments and the ability to act when they occur.
-
-method| description
-:----:|------
-initWithRef:type:...| Initializes a new component using the specified properties.
-layoutDidFinish | Called when the component has just laid out.
-loadView | Creates the view that the component manages.
-viewWillLoad | Called before the load of component's view .
-viewDidLoad | Called after the component's view is loaded and set.
-viewWillUnload | Called just before releasing the component's view.
-viewDidUnload | Called when the component's view is released.
-updateStyles:| Called when component's style are updated.
-updateAttributes:| Called when component's attributes are updated.
-addEvent:| Called when adding an event to the component.
-removeEvent:| Called when removing an event frome the component.
-
-
-As in the image component example, if we need to use our own image view, we can override the `loadView` method.
-
-
-```objective-c
-- (UIView *)loadView
-{
- return [[WXImageView alloc] init];
-}
-```
-
-Now Weex will use `WXImageView` to render the `image` component.
-
-As an image component, we will need to fetch the remote image and set it to the image view. This can be done in `viewDidLoad` method when the view is created and loaded. `viewDidLoad` is also the best time to perform additional initialization for your view， such as content mode changing.
-
-
-```objective-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
-}
-```
-
-If image's remote source can be changed, you can also hook the `updateAttributes:` method to perform your attributes changing logic. Component's view always has been loaded while `updateAttributes:` or `updateStyles:` is called.
-
-
-```objective-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;
- }
-}
-```
-
-Maybe there is even more life cycle hooks you might need to consider, such as `layoutDidFinish` while layout computing is finished. If you want to go deeper, check out the `WXComponent.h` file in the source code.
-
-Now you can use `<image>` and its attributes wherever you want in the template.
-
-```html
-<image style="your-custom-style" src="image-remote-source" resize="contain/cover/stretch"></image>
-```
-#### Component Method
-from WeexSDK `0.9.5`, you can define your component method by macro `WX_EXPORT_METHOD`
-for example:
-
-```
-@implementation WXMyComponent
- +WX_EXPORT_METHOD(@selector(focus))
- +- (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]) {
- // handle your attributes
- // handle your styles
- }
-
- return self;
- }
-
-
- - (void)focus
- {
- NSLog(@"you got it");
- }
-@end
-```
-
-after your registration for your own custom component, now you can call it in your js file.
-
-```html
-<template>
- <mycomponent id='mycomponent'></mycomponent>
-</template>
-<script>
- module.exports = {
- created: function() {
- this.$el('mycomponent').focus();
- }
- }
-</script>
-```
-
-
-
-
-
-
-
-
-
diff --git a/_drafts/v-0.10/advanced/how-data-binding-works.md b/_drafts/v-0.10/advanced/how-data-binding-works.md
deleted file mode 100644
index a207997..0000000
--- a/_drafts/v-0.10/advanced/how-data-binding-works.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: How data-binding works
-type: advanced
-order: 2
-has_chapter_content: true
-version: 0.10
----
-
-# How data-binding works
-
-Weex JS Framework is a MVVM framework. It observe data and use `{% raw %}{{bindedKey}}{% endraw %}` syntax to bind in views. When data is changed in anyway, the view will automatically be updated due to data-binding.
-
-For example, The content of a `<text>` component is bound with the key `notes` in data:
-
-```html
-<template>
- <div>
- <text>{{notes}}</text>
- </div>
-<template>
-
-<script>
- module.exports = {
- data: {
- notes: 'Hello'
- }
- }
-</script>
-```
-
-Weex JS Framework first observe the data object to make sure each data change in the future will be observed. And then it will compile the whole `<template>`. When it finds that the content of the `<text>` is bound with `notes`, JS Framework will watch the `data.notes` changes and set a handler which will update the `<text>` content with new `data.notes`. So developer only need to manage the data, the view display could automatically do corresponding changes.
-
-Some special data-binding syntax here:
-
-* `{% raw %}<foo if="{{condition}}">{% endraw %}` will watch the condition value changes. When it changes to `true`, the `<foo>` element will be created and attached, otherwise it will be not created or removed.
-* `{% raw %}<foo repeat="{{list}}">{% endraw %}` will watch the mutations of a list. At the beginning the `<foo>` element will be cloned and attached with each item in list. When some items are added, removed or moved, the `<foo>` element list will be re-generated new content in the right order with minimum alterations.
-* `{% raw %}<foo if="{{condition}}" repeat="{{list}}">{% endraw %}` will process `repeat` first and `if` the second. In another way, it will walk through each item in list, if the item's condition value is true, a `<foo>` element will be cloned and attached with this certain item value.
-
-Compared with virtual DOM diff algorithm, we just "diff" the data and only calculate/update the virtual DOM with minimum alterations for each user interaction or data-change operation. So it's more lightweight and fast especially for small views in mobile devices.
diff --git a/_drafts/v-0.10/advanced/images/how-arch.png b/_drafts/v-0.10/advanced/images/how-arch.png
deleted file mode 100644
index a13df7a..0000000
--- a/_drafts/v-0.10/advanced/images/how-arch.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/advanced/images/how-render.png b/_drafts/v-0.10/advanced/images/how-render.png
deleted file mode 100644
index db9b0f4..0000000
--- a/_drafts/v-0.10/advanced/images/how-render.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/advanced/index.md b/_drafts/v-0.10/advanced/index.md
deleted file mode 100644
index dca072d..0000000
--- a/_drafts/v-0.10/advanced/index.md
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: How it works
-type: advanced
-order: 1
-has_chapter_content: true
-version: 0.10
----
-
-# How it works
-<span class="weex-version">0.4</span>
-
-## Overview
-
-Weex is a extendable cross-platform solution for dynamic programming and publishing projects. In the source code you can write pages or components with `<template>`, `<style>` and `<script>` tags, and then transform them into bundles for deploying. In server-side we can use these JS bundles for client request. When client get a bundle from server, it will be processed by client-side JavaScript engine and manages the native view rendering, the native API invoking and user interactions.
-
-### Whole Workflow
-
-```
-Weex file --------------frontend(source code)
-↓ (transform) --------- frontend(build tool)
-JS bundle ------------- frontend(bundle code)
-↓ (deploy) ------------ server
-JS bundle in server --- server
-↓ (compile) ----------- client(js-engine)
-Virtual DOM tree ------ client(weex-jsframework)
-↓ (render) ------------ client(render-engine)
-Native view ----------- client(render-engine)
-```
-
-According to the workflow above, you need:
-
-* Transformer: A nodejs tool to transform the source code into the bundle code.
-* JS Framework: A JavaScript framework runing in the client which manage Weex instance. The instance which created from a JS bundle builds virtual DOM tree. Also it sends/receives native calls for native view rendering, native APIs and user interactions.
-* Native Engine: There are many different ports for different platforms: iOS/Android/HTML5. They have the same components design, module APIs design and rendering effect. So they can work with the one and the same JS Framework and JS bundles.
-
-## Transformer
-
-The transformer transforms a source code into a bundle code. The whole work could be divided into three parts:
-
-* Transform `<template>` into a JSON-like tree and transform data-binding attribute into a function prop which return the correct data value. For example: `{% raw %}<foo a="{{x}}" b="1" />{% endraw %}` will be transformed into `{type: "foo", attr: {a: function () {return this.x}, b: 1}}`.
-* Transform `<style>` into a JSON tree. For example: `.classname {name: value;}` will be transformed into `{classname: {name: value}}`.
-* Join the two above with `<script>` content. The three parts will be joined together and wrapped into a JavaScript AMD module.
-
-A whole example (`main.we`):
-
-```html
-<template>
- <foo a="{{x}}" b="1" class="bar"></foo>
-</template>
-<style>
- .bar {width: 200; height: 200}
-</style>
-<script>
- module.exports = {
- data: function () {
- return {x: 100}
- }
- }
-</script>
-```
-
-will transformed into:
-
-```
-define('@weex-component/main', function () {
- module.exports = {
- data: function () {
- return {x: 100}
- }
- }
- module.template = {
- type: "foo",
- attr: {
- a: function () {return this.x},
- b: 1,
- classname: ['bar']
- }
- }
- module.style = {
- bar: {width: 200, height: 200}
- }
-}
-bootstrap('@weex-component/main')
-```
-
-Additionally, the transformer could also do more things: combo the bundles, bootstrap with config and external data. For more information, please see the syntax specs.
-
-## NOTICE
-Most of Weex utility output JS Bundle after [Webpack](https://webpack.github.io/) re-bundle. So the eventual format of Weex JSBundle is webpack packed .
-
-## JS Framework
-
-JS Framework will run in native JavaScript engine at the beginning preparation phase. It has `define()` and `bootstrap()` functions for each the bunlde code. Once a JS bundle requested from server, the code will be executed. `define()` will register all modules first, then `bootstrap()` will start compiling main component into virtual DOM and send rendering calls to native.
-
-There are two key methods for the bridge between JS and native:
-
-* `callNative` sends commands from JavaScript to native. So it's called from JavaScript and implemented with native code. All commands are native APIs organized by modules, for example `rendering`, `networking`, `authorizing`, and other client-side features like `toast` etc.
-* `callJS` sends commands from native to JavaScript. So it's called from native and implemented by JS Framework. All commands are user interactions or native callbacks.
-
-## Native RenderEngine
-
-Native RenderEngine will supplies many native components and modules for call.
-
-**Component** is an element in the screen which have a certain view and behavior. It could be configured with some attributes and style properties, and could response user interactions. There are some common components like `<div>`, `<text>`, `<image>` etc.
-
-**Module** is a set of APIs which could be called from JS Framework. Some of them also have to make async callbacks to JS Framework, for example: send HTTP request.
-
-During a Weex instance works, Native RenderEngine receives all kinds of module API calls from JS Framework. These calls will create or update components for view and use client-side features like `toast`. When a user interaction or module API callback happens, It will call `callJS()` from JS Framework. These jobs could walk through the Weex instance lifecycle till the instance is destroyed. As is shown in the architecture figure, H5 RenderEngine is a special RenderEngine with almost the same functions as native RenderEngines.
-
-
-Weex Architecture
-
-### call native from javascript
-
-```
-[JS Framework]
-↓ callNative
-module APIs
- rendering -> components display
- other features
-[Native RenderEngine]
-```
-
-### call javascript from native
-
-```
-[Native RenderEngine]
-module APIs callbacks
-user interactions
-↓ callJS
-[JS Framework]
-```
-
-### Render Flow
-
-
-Weex Render Flow
-
-0. Input is virtual dom.
-0. **Build Tree**. Parse JSON data (virtual dom) to a Render Tree (RT).
-0. **Apply Style**. Attach css style to RT nodes.
-0. **Create View**. Create native views for each RT node.
-0. **Attach Event**. Attach events for each view.
-0. **CSS Layout**. Use [css-layout](https://github.com/facebook/css-layout) to calculate the layout of each view.
-0. **Update Frame**. Update layout parameters of each view.
-0. Output is Native or H5 Views.
-
-In H5 Render Flow, `CSS Layout` and `Update Frame` are implemented by browser engine like webkit.
diff --git a/_drafts/v-0.10/advanced/integrate-to-android.md b/_drafts/v-0.10/advanced/integrate-to-android.md
deleted file mode 100644
index e2b2569..0000000
--- a/_drafts/v-0.10/advanced/integrate-to-android.md
+++ /dev/null
@@ -1,204 +0,0 @@
----
-title: Integrate to Android
-type: advanced
-order: 3
-has_chapter_content: true
-version: 0.10
----
-
-# Integrate to Android
-
-When you need to use the new features or to customize specific features, you can rely on the Source SDK for development。
-
-## Prerequisites
-
-Assuming you have the Android SDK installed, run `android` to open the Android SDK Manager.
-
-Make sure you have the following installed:
-
-1. Android SDK version 23 (compileSdkVersion in [`build.gradle`](https://github.com/apache/incubator-weex/blob/master/android/sdk/build.gradle))
-2. SDK build tools version 23.0.2 (buildToolsVersion in [`build.gradle`](https://github.com/apache/incubator-weex/blob/master/android/sdk/build.gradle))
-3. Android Support Repository >= 17 (for Android Support Library)
-4. Android NDK (download & extraction instructions [here](http://developer.android.com/ndk/downloads/index.html))
-
-Point Gradle to your Android SDK: either have `$ANDROID_SDK` and `$ANDROID_NDK ` defined, or create a local.properties file in the root of your weex checkout with the following contents:
-
-```
-sdk.dir=absolute_path_to_android_sdk
-ndk.dir=absolute_path_to_android_ndk
-```
-
-Example:
-
-```
-sdk.dir=/Users/your_name/android-sdk-macosx
-ndk.dir=/Users/your_name/android-ndk-r10e
-```
-
-
-## Building the source
-
-#### 1. Clone source from github
-
-First, you need to git clone `weex` from github:
-
-```shell
-git clone https://github.com/alibaba/weex.git
-```
-##### 2. Build APK
- *** 1) Android studio build APK ***
-
- ```
- Step 1: run android studio
- Step 2: open the file of ~/weex/android/playground/build.gradle
- Step 3: Run the Project and the Apk will auto install in your android device
- ```
- *** 2) Gradle build APK ***
-
- ```
- Step 1: enter the direction of "/weex/android/playground"
- Step 2: run the build command: ./gradlew clean assemble
- Step 3: obtain the payground APK from the direction of weex/android/playground/app/build/outputs/apk/
- Step 3: then adb install -r weex/android/playground/app/build/outputs/apk/playgroud.apk
- ```
-#### 3. Adding the `:weex_sdk_android` project
-
-
-Add the `:weex_sdk_android` project in `android/settings.gradle`:
-
-```gradle
-include ':weex_sdk_android'
-
-project(':weex_sdk_android').projectDir = new File(
- rootProject.projectDir, '../weex_sdk_android')
-```
-
-Modify your `android/app/build.gradle` to use the `:weex_sdk_android` project instead of the pre-compiled library, e.g. - replace `compile 'com.taobao.android:weex_sdk:0.4.1` with `compile project(':weex_sdk_android')`:
-
-```gradle
-dependencies {
- compile fileTree(dir: 'libs', include: ['*.jar'])
- compile 'com.android.support:appcompat-v7:23.0.1'
-
- compile project(':weex_sdk_android')
-
- ...
-}
-```
-
-#### 3. Making 3rd-party modules use your project
-
-If you use 3rd-party weex modules, you need to override their dependencies so that they don't build the pre-compiled library. Otherwise you'll get an error while compiling - `Error: more than one library with package name 'com.taobao.weex'`.
-
-Modify your `android/app/build.gradle` and replace `compile project(':weex-custom-module')` with:
-
-```gradle
-compile(project(':weex-custom-module')) {
- exclude group: 'com.taobao.weex', module: 'weex_sdk_android'
-}
-```
-
-#### 4、How to load local Your Js bundle in the directory of Android assets
-Besides load a Js Bundle online, you also can load the js bundle from the directory of Android assets.
-
-For Example:
-
- ```
- String yourbundleStr = WXFileUtils.loadFileContent("yourBundle.js", context);
- WXSDKInstance.render(TAG, yourbundleStr, options, null, width, Height, WXRenderStrategy.APPEND_ASYNC);
- ```
-
-
-## Building from Android Studio
-
-From the Welcome screen of Android Studio choose "Import project" and select the `playground` folder of your app.
-
-You should be able to use the _Run_ button to run your app on a device.
-
-## Tip
-1. Since the packet size limit is currently only compiled arm , X86 does not support.
-
-2. Gradle build fails in `ndk-build`. See the section about `local.properties` file above.
-
-#Quick access
-
-## Requirements
-
-* an existing, gradle-based Android app
-
-## Prepare your app
-
-In your app's `build.gradle` file add the WEEX dependency:
-
- compile 'com.taobao.android:weex_sdk:0.4.1'
-
-You can find the latest version of the WEEX library on [jcenter](https://bintray.com/search?query=weex_sdk&forceAgnostic=true). Next, make sure you have the Internet permission in your `AndroidManifest.xml`:
-
- <uses-permission android:name="android.permission.INTERNET" />
-
-
-## Add native code
-
-You need to add some native code in order to start the Weex runtime and get it to render something. To do this, we're going to create an `Application` to init weex, then we we're going to create an `Activity` that creates a WeexContainerView, starts a Weex application inside it and sets it as the main content view.
-
-
-```java
-public class WXApplication extends Application {
- @Override
- public void onCreate() {
- super.onCreate();
-
- WXEnvironment.addCustomOptions("appName","TBSample");
- WXSDKEngine.init(this);
- try {
-
- WXSDKEngine.registerComponent("wtRichText", WTRichText.class);
- ......
-
- WXSDKEngine.registerModule("event", WXEventModule.class);
- } catch (WXException e) {
- e.printStackTrace();
- }
- }
-}
-```
-
-Next,
-
-```java
-// Create or find RenderContainer view.
-// Notice: If you create RenderContainer manually, don't forget add it to view tree.
-RenderContainer renderContainer = (RenderContainer)findViewById(R.id.container);
-
-//crate Weex instance
-WXSDKInstance mInstance = new WXSDKInstance(this);
-//set render container
-mInstance.setRenderContainer(renderContainer);
-//set image Adapter
-mInstance.setImgLoaderAdapter(new ImageAdapter(this));
-//register render listener
-mInstance.registerRenderListener(new IWXRenderListener() {
- @Override
- public void onViewCreated(WXSDKInstance instance, View resultView) {
- // Notice: If you don't setRenderContainer before render, you need add the resultView to view tree here.
-
- }
- @Override
- public void onRenderSuccess(WXSDKInstance instance) {
- }
- @Override
- public void onRefreshSuccess(WXSDKInstance instance) {
- }
- @Override
- public void onException(WXSDKInstance instance, String errCode,String msg) {
- }
-});
-//start render weex view
-mInstance.render(pageName,template, null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
-```
-
-That's it, your activity is ready to run some JavaScript code.
-
-## Reference Example
-
-[`Weex Examples`](https://github.com/apache/incubator-weex/tree/master/examples)
diff --git a/_drafts/v-0.10/advanced/integrate-to-html5.md b/_drafts/v-0.10/advanced/integrate-to-html5.md
deleted file mode 100644
index b71bcd7..0000000
--- a/_drafts/v-0.10/advanced/integrate-to-html5.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Integrate to web
-type: advanced
-order: 5
-has_chapter_content: true
-version: 0.10
----
-
-# Integrate Weex HTML5 to your project
-
-### Intro
-
-Weex is a extendable cross-platform solution for dynamic programming and publishing projects, which is for developers to write code once and run the code everywhere.
-
-The bundle transformed from the source can currently run on android, ios and web platform. Weex HTML5 is a renderer for weex bundle to run on a webview or a modern browser etc.
-
-### Get Weex HTML5
-
-Use npm to install the latest version of Weex HTML5, require it in your code by CommonJS and use it as a npm package.
-
-#### Install from npm
-
-Make sure you get the latest version by `npm install` or `npm update`. For more information of npm, please visit the [npm official site](https://docs.npmjs.com/).
-
-```
-npm install weex-html5
-```
-
-require weex-html5:
-
-```
-const weex = require('weex-html5')
-```
-
-### Initialize and run
-
-You can initialize weex through the API `init`. This method takes a config object as the first argument to confirm the runtime infomation and environment. Following parameters can be set by this config object:
-
-* `appId`: app instance id, can be either a string or a number
-* `source`: the requested url of weex bundle, or the transformed code it self.
-* `loader`: the loader type to load the weex bundle, which value is 'xhr' or 'jsonp' or 'source'.
- * `xhr`: load the source (weex bundle url) by XHR
- * `jsonp`: load the source bundle by JSONP
- * `source`: the source parameter above should be a weex bundle content (transformed bundle).
-* `rootId`: the id of the root element. Default value is 'weex'.
-
-Here is a example to do the initialzation:
-
-```
-function weexInit() {
- function getUrlParam (key) {
- var reg = new RegExp('[?|&]' + key + '=([^&]+)')
- var match = location.search.match(reg)
- return match && match[1]
- }
-
- var loader = getUrlParam('loader') || 'xhr'
- var page = getUrlParam('page')
-
- // jsonp callback name should be specified or be the default
- // value 'weexJsonpCallback' if the 'jsonp' loader is used.
- var JSONP_CALLBACK_NAME = 'weexJsonpCallback'
-
- window.weex.init({
- jsonpCallback: JSONP_CALLBACK_NAME,
- appId: location.href,
- source: page,
- loader: loader,
- rootId: 'weex'
- })
-}
-
-weexInit()
-```
-
-
-
diff --git a/_drafts/v-0.10/advanced/integrate-to-ios.md b/_drafts/v-0.10/advanced/integrate-to-ios.md
deleted file mode 100644
index 69dea6d..0000000
--- a/_drafts/v-0.10/advanced/integrate-to-ios.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: Integrate to iOS
-type: advanced
-order: 4
-has_chapter_content: true
-version: 0.10
----
-
-# import Weex iOS to your project
-
-You will need to build Weex from source if you want to work on a new feature/bug fix, try out the latest features not released yet, or maintain your own fork with patches that cannot be merged to the core.
-
-Assuming you have installed [iOS Develop Environment](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html) and [CocoaPods](https://guides.cocoapods.org/using/getting-started.html).
-
-#### 1. Clone source from github
-
-First, you need to git clone `weex` from github:
-
-```
-git clone https://github.com/alibaba/weex.git
-```
-#### 2. Import WeexSDK to project
-
-Copy the whole folder `/ios/sdk` to your project directory.
-
-Before adding the dependencies, please confirm that the project directory already exists the Podfile. If not, create a new one. Then, edit this file, adding some necessary dependecis for the target.
-
-```
-target 'YourTarget' do
- platform :ios, '7.0'
- pod 'WeexSDK', :path=>'./sdk/'
-end
-```
-You can get your `YourTarget` below
-
-
-
-Run pod install in current directory, for a while, .xcworkspace will be created. At this point, the dependencies have been established.
-
-#### 3. Init Weex Environment
-We are used to doing some initial tasks in appDelegate. Of course, there is no exception. You can do this in `didFinishLaunchingWithOptions` as follows.
-
-```
-//business configuration
-[WXAppConfiguration setAppGroup:@"AliApp"];
-[WXAppConfiguration setAppName:@"WeexDemo"];
-[WXAppConfiguration setAppVersion:@"1.0.0"];
-
-//init sdk enviroment
-[WXSDKEngine initSDKEnviroment];
-
-//register custom module and component，optional
-[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];
-[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
-
-//register the implementation of protocol, optional
-[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
-
-//set the log level
-[WXLog setLogLevel:WXLogLevelVerbose];
-
-```
-
-#### 4. Render Weex Instance
-Weex supports two different modes, the full page rendering and part of page rendering.
-Something you have to do is to render weex view with specific URL, then add it to the parent container, which may be the viewController.
-
-```
-#import <WeexSDK/WXSDKInstance.h>
-
-- (void)viewDidLoad
-{
- [super viewDidLoad];
-
- _instance = [[WXSDKInstance alloc] init];
- _instance.viewController = self;
- _instance.frame = self.view.frame;
-
- __weak typeof(self) weakSelf = self;
- _instance.onCreate = ^(UIView *view) {
- [weakSelf.weexView removeFromSuperview];
- weakSelf.weexView = view;
- [weakSelf.view addSubview:weakSelf.weexView];
- };
-
- _instance.onFailed = ^(NSError *error) {
- //process failure
- };
-
- _instance.renderFinish = ^ (UIView *view) {
- //process renderFinish
- };
- [_instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
-}
-```
-WXSDKInstance is a very imporent class, which provides you with some basic methods and callbacks, such as renderWithURL、onCreate、onFailed and etc. You can understand their usage by reading WXSDKInstance.h.
-
-
-#### 5. Destroy Weex Instance
-
-Please release weex instance in dealloc stage of viewContoller, or it will lead to memory leak.
-
-```
-- (void)dealloc
-{
- [_instance destroyInstance];
-}
-```
-
-#### 6. Build .IPA for Weex
-
-We can also pack all the JS files into the app's resources. This way you can run your app without development server and submit it to the AppStore.
-
-* [Install weex-toolkit](https://github.com/alibaba/weex_toolchain/tree/master/toolkit) and transform your `.we` file to JS by running `weex index.we -o index.js`, `index.we` is the entry file of your app.
-* Move `index.js` to your app's Xcode project and add the file to your target.
-* Replace `[_instance renderWithURL:'httpURL']` with: `[_instance renderWithURL: [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"js"]]`
-
-* Go to Product -> Archive in Xcode and follow the steps to build your .IPA file and submit it to the AppStore.
diff --git a/_drafts/v-0.10/guide/.gitkeep b/_drafts/v-0.10/guide/.gitkeep
deleted file mode 100644
index e69de29..0000000
--- a/_drafts/v-0.10/guide/.gitkeep
+++ /dev/null
diff --git a/_drafts/v-0.10/guide/how-to/customize-a-native-component.md b/_drafts/v-0.10/guide/how-to/customize-a-native-component.md
deleted file mode 100644
index 62c0cf0..0000000
--- a/_drafts/v-0.10/guide/how-to/customize-a-native-component.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Customize a native Component
-type: guide
-order: 3.3
-version: 0.10
----
-
-# How to customize a native Component ?
-
-Weex has wrapped up the most critical platform components, such as `ScrollView`, `ListView`, `Text`, `Imageview` and so on. Certainly these components can not completely meet your need. And thousands of native UI components that always be using in our project may be required to integrate into Weex easily. Fortunately, it's quite convenient to wrap up your own components that should be from any existing components.
-
-##### Step By Step
-
-1. Customized components must inherit from `WXComponent` or `WXContainer`;
-2. @WXComponentProp(name=value(value is attr or style of dsl)) for it be recognized by weex SDK;
-3. The access levels of method must be **public**;
-4. The component class can not be an inner class;
-5. Customized components should not be obfuscated by tools like ProGuard;
-6. Component methods will be invoked on the UI thread, so do not contain time-consuming operations here;
-7. Weex parameter's type can be int, double, float, String, Map, List, self-defined class that implements WXObject interface;
-
-
-#### Refer to the following example:
-
-```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);
- }
-
-}
-```
-#### Component should be registered
-
-```java
-WXSDKEngine.registerComponent("MyView", MyViewComponent.class);
-```
-
-
diff --git a/_drafts/v-0.10/guide/how-to/cuszomize-native-apis.md b/_drafts/v-0.10/guide/how-to/cuszomize-native-apis.md
deleted file mode 100644
index 9594ff0..0000000
--- a/_drafts/v-0.10/guide/how-to/cuszomize-native-apis.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Customize native APIs
-type: guide
-order: 3.4
-version: 0.10
----
-
-# How to customize native APIs ?
-
-Weex SDK provides only rendering capability, rather than having other capabilities, such as network, picture, and URL redirection. If you want the these features, you need to implement them yourselves.
-The example below will describe how to extend weex with native logic or 'bridge' your existed native code.
-
-## A URLHelper Example
-### Create your own `WXModule` in native:
-
-```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);
- }
-}
-
-```
-
-Notice the `@WXModuleAnno`, use this annotation to mark the methods you wanna expose to javascript.
-If your also want to callback to javascript, you should define a `callbackId` parameter to received 'JS callback function id':
-
-```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);
- }
-}
-```
-
-
-### Register your module to engine:
-
-```
-try {
- WXSDKEngine.registerModule("myURL", URLHelperModule.class);//'myURL' is the name you'll use in javascript
- } catch (WXException e) {
- WXLogUtils.e(e.getMessage());
- }
-```
-### Now, you can use eventModule in javascript like this:
-
-```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);
-});
-
-```
-
-
-## Things you need to note:
-1. Customized components must inherit from `WXModule`;
-2. @WXModuleAnno annotation must be added, as it is the only way to be recognized by Weex;
-3. The access levels of method must be **public**;
-4. The module class also can not be an inner class;
-5. Customized components should not be obfuscated by tools like ProGuard;
-6. Module methods will be invoked on the UI thread, so do not put time-consuming operations there;
-7. Weex parameter's type can be int, double, float, String, Map, List, self-defined class that implements WXObject interface;
diff --git a/_drafts/v-0.10/guide/how-to/debug-with-html5.md b/_drafts/v-0.10/guide/how-to/debug-with-html5.md
deleted file mode 100644
index c80fb69..0000000
--- a/_drafts/v-0.10/guide/how-to/debug-with-html5.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: Debug in html5 renderer
-type: guide
-order: 3.5
-version: 0.10
----
-
-# How to debug in html5 renderer ?
-
-Since weex-html5 can run on a modern mobile browser, it's naturally supported to debug weex-html5 code in browsers' dev tools. Use browser's devTools to iterate, debug and profile your weex-html5 app. Take chrome's debug tool as a example:
-
-
-
-## Elements
-
-Use elements' panel to inspect the layout and design of the weex-html5 page, and manipulate the DOM and CSS to do some experiment freely.
-
-## Console
-
-You can use `console.log` to log information on console, but it's highly recommended to use `nativeLog` instead, since nativeLog can run on a native platform based on a browser. The defect of `nativeLog` is that it's not supported to trace it from the console to the source file which the `nativeLog` is called in, therefore in this situation you'd better use `console.log`, and you should make sure this code will not run on native platform (otherwise a exception or a crash will be caused).
-
-## Breakpoints
-
-You can set breakpoints to debug code. Breakpoints are one of the most effective way to debug code. Breakpoints enable you to pause script execution and then investigate the call stack variable values at that particular moment in time.
-
-Manual breakpoints are individual breakpoints that you set on a specific line of code. You can set these via Chrome DevTools GUI, or by inserting the `debugger` keyword in your code.
-
-## Locate your bug
-
-Generally speaking, there are three possible layer the bug could happen on: the renderer (weex-html5), the js-framework (weex-js-framework) and the transformer (gulp-weex).
-
-Here are some suggestions to locate your bug so that you can recognize which layer the bug is on:
-
-* check the console for errors. In debug mode if there is a error happend there will be info about it on the console.
-* in bridge/receiver.js, whether the `callNative` function is called.
-* whether the supposed to be called API method is actually called and executed.
-* whether the `callJS` method for event firing or callback executing is called.
-
-## other
-
-More info about how to debug h5 pages on chrome devTools: [chrome's devTools docs](https://developers.google.com/web/tools/chrome-devtools/?hl=en)
-
-
-
-
-
-
diff --git a/_drafts/v-0.10/guide/how-to/index.md b/_drafts/v-0.10/guide/how-to/index.md
deleted file mode 100644
index 9f9435a..0000000
--- a/_drafts/v-0.10/guide/how-to/index.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Preview in browser
-type: guide
-order: 3
-has_chapter_content: false
-chapter_title: How-tos
-version: 0.10
----
-
-# How to preview weex code in browser ?
-
-## weex-toolkit
-
-We strongly suggest you use weex-toolkit to preview weex code in your browser. This tool is Node.JS based, so you need to install Node at first. Please download and install latest stable version of Node from [https://nodejs.org/en/download/stable/](https://nodejs.org/en/download/stable/). Then you can install weex-toolkit using npm install:
-
-```bash
-$ npm install -g weex-toolkit
-```
-
-Check that the toolkit does work by typing `weex` in the command line. Normally you should see the following help text:
-
-```
-Options:
- --qr display QR code for native runtime,
- -o,--output transform weex we file to JS Bundle, output path (single JS bundle file or dir)
- -s,--server start a http file server, weex .we file will be transforme to JS bundle on the server , specify local root path using the option
- ......
- --help Show help
-```
-
-If all work well, navigate to the path the xxx.we file you want to preview in, and type the command:
-
-```bash
-weex xxx.we
-```
-
-A browser window will be opened automatically to display the page you want to preview:
-
-
-
diff --git a/_drafts/v-0.10/guide/how-to/preview-in-playground-app.md b/_drafts/v-0.10/guide/how-to/preview-in-playground-app.md
deleted file mode 100644
index 5800737..0000000
--- a/_drafts/v-0.10/guide/how-to/preview-in-playground-app.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Preview in native
-type: guide
-order: 3.2
-version: 0.10
----
-
-# How to preview weex code in sample-app ?
-
-### Weex Sample Step By Step
-1. Clone Weex from github [`https://github.com/apache/incubator-weex/`](https://github.com/apache/incubator-weex/)
-2. Use Android Studio open Android Sample 。
-3. run Sample project.
-4. into Sample homePage，you will see this picture
-
-5. Click the icon to the top right of the page to enter the two-dimensional code scanning
-
-6. use[`Weex-Toolkit`](https://github.com/alibaba/weex_toolchain/tree/master/toolkit/ )make .we to a QR code
-7. you will see the page rended by Weex
-
diff --git a/_drafts/v-0.10/guide/how-to/require-3rd-party-libs.md b/_drafts/v-0.10/guide/how-to/require-3rd-party-libs.md
deleted file mode 100644
index 7349520..0000000
--- a/_drafts/v-0.10/guide/how-to/require-3rd-party-libs.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: Require 3rd Party Libs
-type: guide
-order: 3.6
-version: 0.10
----
-
-# How to require 3rd Party Libs ?
-
-In the paragraph Maintain Your Component Code, we learn that JavaScript code can be written in `<script>` tag in one component. But there must be some common functions or modules in your project, such as parsing url params, extending properties from some objects to another object and so on. It's a bad practice to copy and paste them in each component, therefore there's a urgent need of `require`. Weex provides CommonJS `require` syntax for developers.
-
-Let take `extend` for example.
-
-## Require Local Js Modules
-
-A basic implementation of `extend` is as follows, and it's placed in directory path `./common/utils.js`.
-
-```javascript
-function extend(dest, src) {
- for (var key in src) {
- dest[key] = src[key]
- }
-}
-exports.extend = extend
-```
-
-In a `.we` file, `extend` can be used with the help of `require`:
-
-```html
-<script>
- var utils = require('./common/utils')
- var obj1 = {a: 1}
- var obj2 = {b: 2}
- utils.extend(obj1, obj2) // obj1 => {a: 1, b: 2}
-</script>
-```
-
-## Require Installed Node Modules
-
-Besides, [underscore](http://underscorejs.org) is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It implements a more robust version of [extend](http://underscorejs.org/#extend).
-
-We can use underscore's extend instead of the version implemented by ourselves. After installing `underscore` to the `node_modules` directory, we can `require` and use it.
-
-```bash
-$ npm install underscore
-```
-
-```html
-<script>
- var _ = require('underscore')
- var obj1 = {a: 1}
- var obj2 = {b: 2}
- var obj3 = {c: 3}
- var ret = _.extend(obj1, obj2, obj3) // ret => {a: 1, b: 2, c: 3}
-</script>
-```
diff --git a/_drafts/v-0.10/guide/how-to/transform-code-into-js-bundle.md b/_drafts/v-0.10/guide/how-to/transform-code-into-js-bundle.md
deleted file mode 100644
index 842ecd6..0000000
--- a/_drafts/v-0.10/guide/how-to/transform-code-into-js-bundle.md
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: Transform Code into Js Bundle
-type: guide
-order: 3.7
-version: 0.10
----
-
-# Transform Code into Js Bundle
-
-Paragraphs Maintain Your Component Code and [Require 3rd Party Libs](./require-3rd-party-libs.html) show us how to write and organize weex code. However, Weex DSL code must be transformed to `js bundle` so that `js framework` can parse and execute it for iOS, Android and HTML5 portal. For more information, please refer to [How It Works
-](../../advanced/how-it-works.html) and [JS Bundle Format](../../references/specs/js-bundle-format.html).
-
-Now come back to the topic `transform code into js bundle`. There are several ways to achieve the goal.
-
-## weex-toolkit
-
-```bash
-$ npm install -g weex-toolkit
-```
-
-### transform a `we file` to JS Bundle
-
-```bash
-$ weex your_best_weex.we -o .
-```
-
-`your_best_weex.we` will be transform to JS Bundle file `your_best_weex.js` , saved in your current directory
-
-### transform a `we file` to JS Bundle , watch this file ，auto run transformer if change happen.
-
-```bash
-$ weex your_best_weex.we -o . --watch
-```
-
-### transform every we file in a directory
-
-```bash
-$ weex we/file/storage/path -o outputpath
-```
-
-every `we file` in `we/file/storage/path` will be transformed to JS Bundle , saved in `outputpath` path
-
-please access [npmjs.com](https://www.npmjs.com/package/weex-toolkit) for more information about weex-toolkit.
-
-## transformer
-
-```bash
-npm install weex-transformer
-```
-
-### CLI Tool
-
-```bash
- Usage: transformer [options] <file...>
-
- Options:
-
- -h, --help output usage information
- -V, --version output the version number
- -l, --oldFormat [value] whether to transform to old format (default: false)
- -e, --isEntry [value] whether is an entry module which has `bootstrap` (default: true)
- -o, --output [path] the output file dirname
-```
-
-### API
-
-** transform(name, code, path, elements, config) **
-
-```javascript
-var transformer = require('weex-transformer')
-var output = transformer.transform('foo', '/* code here */', '.', {})
-```
-
-params:
-
-- `name`: string, current bundle name
-- `code`: string, source code
-- `path`: string *optional*, useful when find custom component in a certain path
-- `elements`: object *optional*, existed custom component map
-- `config`: object *optional*
- * `oldFormat`: whether to transform to old format (default: false)
- * `isEntry`: whether is an entry module which has `bootstrap` (default: true)
-
-returns:
-
-- an object with keys
- * `result`: string, all custom components `define()` and final `bootstrap()`
- * `logs`: array, corresponding warning & error logs
-
-## gulp weex
-
-```bash
-$ npm install gulp-weex
-```
-
-```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 to transform to old format (default: false)
-- `isEntry`: whether is an entry module which has `bootstrap` (default: true)
diff --git a/_drafts/v-0.10/guide/images/tut-cli-qrcode.png b/_drafts/v-0.10/guide/images/tut-cli-qrcode.png
deleted file mode 100644
index 9068c14..0000000
--- a/_drafts/v-0.10/guide/images/tut-cli-qrcode.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/images/tut-first.png b/_drafts/v-0.10/guide/images/tut-first.png
deleted file mode 100755
index c8505e6..0000000
--- a/_drafts/v-0.10/guide/images/tut-first.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/images/tut-second.png b/_drafts/v-0.10/guide/images/tut-second.png
deleted file mode 100755
index 1259abf..0000000
--- a/_drafts/v-0.10/guide/images/tut-second.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/images/tut1.jpg b/_drafts/v-0.10/guide/images/tut1.jpg
deleted file mode 100644
index 8af0f3f..0000000
--- a/_drafts/v-0.10/guide/images/tut1.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/images/tut2.jpg b/_drafts/v-0.10/guide/images/tut2.jpg
deleted file mode 100644
index c3e8a6e..0000000
--- a/_drafts/v-0.10/guide/images/tut2.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/images/tut3.png b/_drafts/v-0.10/guide/images/tut3.png
deleted file mode 100644
index 5473905..0000000
--- a/_drafts/v-0.10/guide/images/tut3.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/images/tut4.gif b/_drafts/v-0.10/guide/images/tut4.gif
deleted file mode 100644
index eed4395..0000000
--- a/_drafts/v-0.10/guide/images/tut4.gif
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/index.md b/_drafts/v-0.10/guide/index.md
deleted file mode 100644
index bb6941c..0000000
--- a/_drafts/v-0.10/guide/index.md
+++ /dev/null
@@ -1,211 +0,0 @@
----
-title: Tutorial
-type: guide
-order: 1
-version: 0.10
----
-
-# Tutorial
-
-We will make a simple but realistic list, in which the technologies Weex uses will be shown. This form of list also works for a lot of e-commercial apps and mobile sites.
-
-## Getting Started
-
-Let's get started with the list item, which contains one `image` element and one `text` right behind.
-
-```html
-<template>
- <div class="container">
- <div class="cell">
- <image class="thumb" src="http://t.cn/RGE3AJt"></image>
- <text class="title">JavaScript</text>
- </div>
- </div>
-</template>
-
-<style>
- .cell { margin-top: 10; margin-left: 10; flex-direction: row; }
- .thumb { width: 200; height: 200; }
- .title { text-align: center; flex: 1; color: grey; font-size: 50; }
-</style>
-```
-
-You can directly copy and paste the above code into a Weex file named `tech_list.we` (`.we` is our recommended filename extension).
-
-## Preview
-
-Once created, we want to see the running result of the `.we` file. But before that, we must make sure the dependencies are installed.
-
-We should install [Node](https://nodejs.org/en/download/) first, which our Weex CLI program [Weex Toolkit](https://www.npmjs.com/package/weex-toolkit) depends on. Then install `weex-toolkit` by running the command:
-
-```bash
-$ npm install -g weex-toolkit
-```
-
-When installation completed, you can check if Weex CLI is installed properly by running `weex` command in the command line. The following text is expected:
-
-```
-Usage: weex foo/bar/your_next_best_weex_script_file.we [options]
-
-Options:
- --qr display QR code for native runtime,
- -o,--output transform weex we file to JS Bundle, output path (single JS bundle file or dir)
- -s,--server start a http file server, weex .we file will be transforme to JS bundle on the server , specify local root path using the option
- ......
- --help Show help
- -h, --host [default: "127.0.0.1"]
-```
-
-If all work well, navigate to the directory where you saved `tech_list.we`, then type:
-
-```bash
-$ weex tech_list.we
-```
-
-A browser window will be opened automatically to display the running result like below (weex-toolkit version should be greater than 0.1.0, use `weex --version` to check it):
-
-
-
-## Introduce to Weex Syntax
-
-So it's time for introducing the syntax.
-
-Given the content of `tech_list.we`, Weex source code is composed of three parts -- *template*, *style*, and *script*, just like html, css, and javascript for the Web.
-
-Template is the skeleton that gives Weex structure. It is composed of tags which surround content and apply meaning to it. Tags have *attributes*, different attribute means different feature, for example, `class` attribute makes it possible to define the same styles for multiple tags, `onclick` attribute makes the tag respond to click event.
-
-Style describes how Weex tags are to be displayed. We prefer CSS very much. So we try to keep consistent with CSS standard as possible. Weex Style supports a lot of CSS features, like margin, padding, fixed and so on. Better yet, flexbox layout (flex) is well supported in Weex Style.
-
-Script adds *data* & *logic* to Weex tags, helping you easily access local or remote data and update tags. You can also define some methods for your tag to respond to different events. Weex Script organization learns a lot from CommonJS module style.
-
-More information about Weex syntax can be found in our [Syntax chapter](./syntax/index.html).
-
-## Add More Items
-
-We can't call one item a list, so we need to add more items to our tech list. Open `tech_list.we` in your favorite editor and update it's content like below:
-
-```html
-<template>
- <div class="container">
- <div class="cell">
- <image class="thumb" src="http://t.cn/RGE3AJt"></image>
- <text class="title">JavaScript</text>
- </div>
- <div class="cell">
- <image class="thumb" src="http://t.cn/RGE3uo9"></image>
- <text class="title">Java</text>
- </div>
- <div class="cell">
- <image class="thumb" src="http://t.cn/RGE31hq"></image>
- <text class="title">Objective C</text>
- </div>
- </div>
-</template>
-
-<style>
- .cell{ margin-top:10 ; margin-left:10 ; flex-direction: row; }
- .thumb { width: 200; height: 200; }
- .title { text-align: center ; flex: 1; color: grey; font-size: 50; }
-</style>
-```
-
-Now we will try to render our `tech_list.we` with Weex native renderer. Open your terminal and navigate to the directory where you save the `tech_list.we` again, then type:
-
-```bash
-$ weex tech_list.we --qr -h {ip or hostname}
-```
-
-It's ***RECOMMENDED*** to use `-h` option to specify your local ip address or hostname.
-
-A QR code will be displayed in the terminal window like below:
-
-
-
-The QR code can work together with [Weex Playground App](http://alibaba.github.io/weex/download.html). Open it and tap the scan icon at the top-right corner, then scan the QR code displayed in your terminal. If all work well, a beautiful list will be displayed in your phone.
-
-
-
-Here, I must stress that the list is rendered by a native view, instead of Webkit, so your app gets faster loading and less memory overhead than common Webview renderer.
-
-Now open `tech_list.we` again and try to change some text, after changes saved the Weex playground App will immediately display these changes. We call that **Hot-Reload**, which is intended to help you use Weex better.
-
-## Add Built-in Components
-
-Instead of writing basic tags by yourself, Weex provides a lot of built-in components. For example, Slider is common to many apps and mobile websites, so Weex includes a built-in Slider so that you can easily use it in your script. Let's open `tech_list.we` and update it's content like below.
-
-```html
-<template>
- <div style="flex-direction: column;">
- <slider class="slider" interval="{{intervalValue}}" auto-play="{{isAutoPlay}}" >
- <div class="slider-pages" repeat="{{itemList}}" onclick="goWeexSite" >
- <image class="thumb" src="{{pictureUrl}}"></image>
- <text class="title">{{title}}</text>
- </div>
- </slider>
-
- <div class="container" onclick="goWeexSite" >
- <div class="cell">
- <image class="thumb" src="http://t.cn/RGE3AJt"></image>
- <text class="title">JavaScript</text>
- </div>
- <div class="cell">
- <image class="thumb" src="http://t.cn/RGE3uo9"></image>
- <text class="title">Java</text>
- </div>
- <div class="cell">
- <image class="thumb" src="http://t.cn/RGE31hq"></image>
- <text class="title">Objective C</text>
- </div>
- </div>
-</template>
-
-<style>
- .cell { margin-top:10 ; margin-left:10 ; flex-direction: row; }
- .thumb { width: 200; height: 200; }
- .title { text-align: center ; flex: 1; color: grey; font-size: 50; }
- .slider {
- margin: 18;
- width: 714;
- height: 230;
- }
- .slider-pages {
- flex-direction: row;
- width: 714;
- height: 200;
- }
-</style>
-
-<script>
-module.exports = {
- data: {
- intervalValue:"1000",
- isShowIndicators:"true",
- isAutoPlay:"true",
- itemList: [
- {title: 'Java', pictureUrl: 'http://t.cn/RGE3uo9'},
- {title: 'Objective C', pictureUrl: 'http://t.cn/RGE31hq'},
- {title: 'JavaScript', pictureUrl: 'http://t.cn/RGE3AJt'}
- ]
- },
- methods: {
- goWeexSite: function () {
- this.$openURL('http://alibaba.github.io/weex/')
- }
- }
-}
-</script>
-```
-
-Open terminal and run the command again:
-
-```bash
-$ weex tech_list.we
-```
-
-You should see a slider prepend to our list.
-
-
-
-More information about Slider component can be found [here](../references/components/slider.html).
-
-Just as the previous example, the slider can be rendered in native, easily in Weex playground, or in your App. Please refer [the document](./advanced/integrate-to-android.html) for integrating Weex into your App.
diff --git a/_drafts/v-0.10/guide/syntax/comm.md b/_drafts/v-0.10/guide/syntax/comm.md
deleted file mode 100644
index 84e49a1..0000000
--- a/_drafts/v-0.10/guide/syntax/comm.md
+++ /dev/null
@@ -1,228 +0,0 @@
----
-title: Communications
-type: guide
-order: 2.8
-version: 0.10
----
-
-# Communicate Between Components
-
-## For Child-Parent Communication
-
-Children component can use `this.$dispatch([String type], [Object detail])` method passing information to parent component. first argument meaning type of message , second argument is the message object. If any parent of the child component register the same type of listener using `$on([String type], [Function callback])` method , the callback will be execute with one argument , the message object will be `detail` property of the the argument.
-
-eg:
-
-```html
-<we-element name="foo">
- <template>
- <div>
- <image src="{{imageUrl}}" onclick="test"></image>
- <text>{{title}}</text>
- </div>
- </template>
- <script>
- module.exports = {
- data: {
- title: '',
- imageUrl: ''
- },
- methods: {
- test: function () {
- this.$dispatch('notify', {a: 1})
- }
- }
- }
- </script>
-</we-element>
-
-<template>
- <foo title="..." image-url="..."></foo>
-</template>
-
-<script>
- module.exports = {
- created: function () {
- this.$on('notify', function(e) {
- // when <foo> image tag be clicked ,the function will be executing.
- // e.detail is `{a: 1}`
- })
- }
- }
-</script>
-```
-
-## For Parent-Child Communication
-
-Parent component can use `this.$vm([String id])` get vm instance of child component. you can access child component information using the vm instance.
-
-```html
-<we-element name="foo">
- <template>
- <div>
- <image src="{{imageUrl}}"></image>
- <text>{{title}}</text>
- </div>
- </template>
- <script>
- module.exports = {
- data: {
- title: '',
- imageUrl: ''
- },
- methods: {
- setTitle: function (t) {
- this.title = t
- }
- }
- }
- </script>
-</we-element>
-
-<template>
- <div>
- <text onclick="test">click to update foo</text>
- <foo id="fooEl" title="..." image-url="..."></foo>
- </div>
-</template>
-
-<script>
- module.exports = {
- methods: {
- test: function (e) {
- var foo = this.$vm('fooEl')
- foo.setTitle('...')
- foo.imageUrl = '...'
- }
- }
- }
-</script>
-```
-
-## Parent to Children (multi-child) Communication
-
-Parent can using `this.$broadcast([String type], [Object detail])` broadcast message to all of children.
-
-eg:
-
-```html
-<we-element name="bar">
- <template>
- <div>
- <image src="{{imageUrl}}"></image>
- </div>
- </template>
- <script>
- module.exports = {
- data: {
- imageUrl: ''
- },
- created: function() {
- var self = this
- this.$on('changeImage', function(e) {
- self.imageUrl = e.detail.imageUrl
- })
- }
- }
- </script>
-</we-element>
-
-<we-element name="foo">
- <template>
- <div>
- <bar></bar>
- <text>{{title}}</text>
- </div>
- </template>
- <script>
- module.exports = {
- data: {
- title: ''
- },
- created: function() {
- var self = this
- this.$on('changeTitle', function(e) {
- self.title = e.detail.title
- })
- }
- }
- </script>
-</we-element>
-
-<template>
- <div>
- <text onclick="test">click to update foo</text>
- <foo></foo>
- <bar></bar>
- </div>
-</template>
-
-<script>
- module.exports = {
- methods: {
- test: function (e) {
- this.$broadcast('changeTitle', {
- title: '...'
- })
- this.$broadcast('changeImage', {
- imageUrl: '...'
- })
- }
- }
- }
-</script>
-```
-
-## Siblings Communication
-
-siblings components can using common parent as bridge for passing information
-
-eg:
-
-```html
-<we-element name="foo">
- <template>...</template>
- <script>
- module.exports = {
- methods: {
- callbar: function () {
- this.$dispatch('callbar', {a: 1})
- }
- }
- }
- </script>
-</we-element>
-
-<we-element name="bar">
- <template>...</template>
- <script>
- module.exports = {
- created: function() {
- this.$on('callbar', function(e) {
- // e.detail.a
- })
- }
- }
- </script>
-</we-element>
-
-<template>
- <div>
- <foo></foo>
- <bar></bar>
- </div>
-</template>
-
-<script>
- module.exports = {
- created: function () {
- var self = this
- this.$on('callbar', function(e) {
- self.$broadcast('callbar', e.detail)
- })
- }
- }
-</script>
-```
-
-At last, you can learn how to write [config & data](./config-n-data.html) for a Weex page.
diff --git a/_drafts/v-0.10/guide/syntax/composed-component.md b/_drafts/v-0.10/guide/syntax/composed-component.md
deleted file mode 100644
index 547096f..0000000
--- a/_drafts/v-0.10/guide/syntax/composed-component.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: Composed Component
-type: guide
-order: 2.6
-version: 0.10
----
-
-# Composed Component
-
-If some part of weex file is reused often, you could create a composed component represent these part.
-
-You can create a file named `foo.we` to define a composed component, the component name is just `<foo>`.
-
-```html
-<!-- foo.we -->
-<template>
- <container style="flex-direction: row;">
- <image src="{{image}}" style="width:100;height:100;"></image>
- <text>{{title}}</text>
- </container>
-</template>
-<script>
- module.exports = {
- data: {
- title: null,
- image: null
- }
- }
-</script>
-```
-
-The content of `foo.we` also consists of `<template>`, `<style>` and `<script>`.
-
-Once composed component been defined, you can use `<foo>` in a file which is in the same folder with `foo.we`.
-
-```html
-<template>
- <foo title="..." image="..."></foo>
-</template>
-```
-
-## Nesting Components
-
-Composed component supports nesting. For example:
-
-```html
-<!-- somepath/foo.we -->
-<template>
- <container style="flex-direction: row;">
- <image src="{{image}}"></image>
- <text>{{title}}</text>
- </container>
-</template>
-<script>
- module.exports = {
- data: {
- // The key is required if you want this property observed
- // and could be updated from changing parent attribute
- title: null,
- image: null
- }
- }
-</script>
-```
-
-```html
-<!-- somepath/foo-list.we -->
-<template>
- <container>
- <text>{{description}}</text>
- <foo repeat="{{list}}" title="{{text}}" image="{{img}}"></foo>
- </container>
-</template>
-<script>
- module.exports = {
- data: {
- description: '',
- // If no keys written here. There will be no data binding effect
- // from parent attribute "list".
- list: []
- }
- }
-</script>
-```
-
-```html
-<!-- somepath/main.we -->
-<template>
- <foo-list list="{{list}}"></foo-list>
-</template>
-<script>
- module.exports = {
- data: {
- list: [
- {text: '...', img: '...'},
- {text: '...', img: '...'},
- {text: '...', img: '...'},
- ...
- ]
- }
- }
-</script>
-```
-
-The `main.we` uses `<foo-list>` from `foo-list.we`. And `<foo-list>` uses `<foo>` from `foo.we`.
-
-## Notes
-
-- Every composed component have an independent `<style>` work scope.
-- If child component have `id` attribute, you can access the context of the child component by `this.$vm(id)` and find an element by `this.$el(id)`. See more about [find an element](./id.html).
-- Please refer to [communicate between components](./comm.html) for more communication issues.
-- The keys must be existed in `data` options **explicitly** if you want to make the data observation work both through inside data changes and outside attribute changes.
-
-Next is how to [find an element](./id.html).
diff --git a/_drafts/v-0.10/guide/syntax/config-n-data.md b/_drafts/v-0.10/guide/syntax/config-n-data.md
deleted file mode 100644
index 37b8e12..0000000
--- a/_drafts/v-0.10/guide/syntax/config-n-data.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: Page Config & Data
-type: guide
-order: 2.9
-version: 0.10
----
-
-# Page Config & Data
-
-You can write some instance config and data in some additional `<script>` at the **top-level** Weex component.
-
-* the instance config could declare some meta informations like which sdk/client version it supports or "downgrade" to HTML5 renderer. This part would be extended more in the future.
-* the instance data could set an external data which would be processed instead of the default top-level component data.
-
-They all make Weex files more extendable and configurable and works easy with other tools & services like CMS system.
-
-```html
-<!-- definition of sub components -->
-<element name="sub-component-a">...</element>
-<element name="sub-component-b">...</element>
-<element name="sub-component-c">...</element>
-
-<!-- definition of top-level component -->
-<template>...</template>
-<style></style>
-<script>
- module.exports = {
- data: function () {return {x: 1, y: 2}}
- }
-</script>
-
-<!-- instance config and data -->
-<script type="config">
- {
- downgrade: {
- ios: {
- os: '9', // all of 9.x.x
- app: '~5.3.2',
- framework: '^1.3', // all of 1.3.x
- deviceModel: ['AAAA', 'BBBB']
- },
- android: {
- os: '*', // all of version
- app: '^5',
- framework: '',
- deviceModel: ''
- }
- }
- }
-</script>
-<script type="data">
- {y: 200}
-</script>
-```
-
-Notice that these two additional `<script>` are both optinal and have `type="config|data"` attribute and only works when it's the top-level component of a Weex instance.
-
-So that's all about Weex syntax. For more reading, please check out:
-
-* [how-tos](../how-to/index.html) articles and
-* [advanced](../../advanced/index.html) topics.
diff --git a/_drafts/v-0.10/guide/syntax/data-binding.md b/_drafts/v-0.10/guide/syntax/data-binding.md
deleted file mode 100644
index 497735c..0000000
--- a/_drafts/v-0.10/guide/syntax/data-binding.md
+++ /dev/null
@@ -1,248 +0,0 @@
----
-title: Data-Binding
-type: guide
-order: 2.1
-version: 0.10
----
-
-# Data-Binding
-
-In Weex, we use the *mustache* syntax `{% raw %}{{...}}{% endraw %}` to bind data in `<template>` which are defined in `<script>`. Once data and template is bound, the data changes will influence the corresponding template content immediately and automatically.
-
-## Binding data path
-
-```html
-<template>
- <container>
- <text style="font-size: {{size}}">{{title}}</text>
- </container>
-</template>
-
-<script>
- module.exports = {
- data: {
- size: 48,
- title: 'Alibaba Weex Team'
- }
- }
-</script>
-```
-
-The code above will bind the `title` and `size` data field to `template`.
-
-We can also use `.` syntax to bind cascading data structure. Let's look at the following code snippet:
-
-```html
-<template>
- <container>
- <text style="font-size: {{title.size}}">{{title.value}}</text>
- </container>
-</template>
-
-<script>
- module.exports = {
- data: {
- title: {
- size: 48,
- value: 'Alibaba Weex Team'
- }
- }
- }
-</script>
-```
-
-## In-template expression
-
-Inside data bindings, Weex supports simply javascript expressions, e.g.
-
-```html
-<template>
- <container style="flex-direction: row;">
- <text>{{firstName + ' ' + lastName}}</text>
- </container>
-</template>
-
-<script>
- module.exports = {
- data: {
- firstName: 'John',
- lastName: 'Smith'
- }
- }
-</script>
-```
-
-The expression will be evaluated in the data scope of current context.
-
-**NOTE: EACH BINDING CAN ONLY CONTAIN ONE SINGLE EXPRESSION**
-
-## Computed Properties
-<span class="weex-version">0.5</span>
-
-According to simple operations, in-template expressions are very convenient. But if you want to put more logic into the template, you should use a computed property.
-
-e.g.
-
-```html
-<template>
- <container style="flex-direction: row;">
- <text>{{fullName}}</text>
- <text onclick="changeName" style="margin-left:10px;">CHANGE NAME</text>
- </container>
-</template>
-
-<script>
- module.exports = {
- data: {
- firstName: 'John',
- lastName: 'Smith'
- },
- computed: {
- fullName: {
- get: function() {
- return this.firstName + ' ' + this.lastName
- },
-
- set: function(v) {
- var s = v.split(' ')
- this.firstName = s[0]
- this.lastName = s[1]
- }
- }
- },
- methods: {
- changeName: function() {
- this.fullName = 'Terry King'
- }
- }
- }
-</script>
-```
-
-Here we have declared a computed property fullName. The function we provided will be used as the getter function for concating firstName and lastName.
-
-Otherwise when you call `changeName` after click, the setter will be invoked and this.firstName and this.lastName will be updated accordingly.
-
-**NOTE: `data` and `methods` can't have duplicated fields. 'Cause in the execution context -- `this`, we can access both of them.**
-
-## Usage of some special attributes in Data-Binding
-
-### Styles: `style` or `class`
-
-the style of a component can be bind using the `style` attribute:
-
-```html
-<template>
- <text style="font-size: {{size}}; color: {{color}}; ...">...</text>
-</template>
-```
-
-while style can also get bound with `class` attribute, multiple classnames can be split by spaces:
-
-```html
-<template>
- <container>
- <text class="{{size}}"></text>
- <text class="title {{status}}"></text>
- </container>
-</template>
-```
-
-here if `{{size}}` and `{{status}}` have empty value, then only `class="title"` will be rendered.
-
-* [See more about style and class](./style-n-class.html)
-
-### Event Handler: `on...`
-
-The event handler is an attribute which name has a prefix `on...`. The other part of attribute name is event type and the value is event handler name. We don't need to add mustache around the method name or add parentheses to call it.
-
-```html
-<template>
- <text onclick="toggle">Toggle</text>
-</template>
-
-<script>
- module.exports = {
- methods: {
- toggle: function () {
- // todo
- }
- }
- }
-</script>
-```
-
-### `if` & `repeat`
-
-`if` attribute can control the display of a component by a truthy/falsy value.
-
-```html
-<template>
- <container style="flex-direction: column;">
- <text onclick="toggle">Toggle</text>
- <image src="..." if="{{shown}}"></image>
- </container>
-</template>
-
-<script>
- module.exports = {
- data: {
- shown: true
- },
- methods: {
- toggle: function () {
- this.shown = !this.shown
- }
- }
- }
-</script>
-```
-
-We can also use `repeat` attribute to generate a list.
-
-**NOTE: When you want to mutate an array in `data`. Something limitations existing below:**
-
-When you directly set an item with the index (`vm.items[0] = {};`), it won't trigger view update. So we have a prototype methods: `$set(index, item)`.
-
-```javascript
-// same as `example1.items[0] = ...` but triggers view update
-example1.items.$set(0, { childMsg: 'Changed!'})
-```
-
-When you modify the length of the Array (`vm.items.length = 0`), it won't trigger view update too. We recommend you just replace `items` with an empty array instead.
-
-```javascript
-// same as `example2.items.length = 0` but triggers view update
-example2.items = []
-```
-
-* [See more about display logic control](./display-logic.html)
-
-### `static`
-
-`static` attribute can cancel the data binding, and the data changes will not be synchronized to UI.
-
-```html
-<template>
- <div static>
- <text>{{ word }}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- ready: function() {
- this.word = 'Data changes'
- },
- data: {
- word: 'Hello, static'
- }
- }
-</script>
-```
-
-As shown above, after the `static` attribute is added, the rendering result will be `Hello, static`, which is equivalent to rendering a static node. The change of the data `word` in ready function will not be listened, so the text value will not change.
-`static` property is designed to reduce the long list or pure static page memory overhead. Be careful with it, as it will likely break your page logic.
-
-Next, let's have a look at [style and class](./style-n-class.html).
-
diff --git a/_drafts/v-0.10/guide/syntax/display-logic.md b/_drafts/v-0.10/guide/syntax/display-logic.md
deleted file mode 100644
index 842e188..0000000
--- a/_drafts/v-0.10/guide/syntax/display-logic.md
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: Display Logic Control
-type: guide
-order: 2.4
-version: 0.10
----
-
-# Display Logic Control
-
-There are two attributes for display logic control: `if` and `repeat`. We can create Weex page structure and effects more flexible with them.
-
- > **Notes:** The display logic could't apply on the root element within `<template>`, please don't use `if` or `repeat` directive on it.
-
-## `if`
-
-`if` attribute can control the display of a component by a truthy/falsy value. If the value is truthy, then the component will generated, otherwise it will be removed.
-
-```html
-<template>
- <container>
- <text onclick="toggle">Toggle</text>
- <image src="..." if="{{shown}}"></image>
- </container>
-</template>
-
-<script>
- module.exports = {
- data: {
- shown: true
- },
- methods: {
- toggle: function () {
- this.shown = !this.shown
- }
- }
- }
-</script>
-```
-
-## `repeat`
-
-`repeat` statement is just for array rendering. Every item in an array is also a structured data. This means in `repeat`ed component, you can bind their item properties directly.
-
-```html
-<template>
- <container>
- <container repeat="{{list}}" class="{{gender}}">
- <image src="{{avatar}}"></image>
- <text>{{nickname}}</text>
- </container>
- </container>
-</template>
-
-<style>
- .male {...}
- .female {...}
-</style>
-
-<script>
- module.exports = {
- data: {
- list: [
- {gender: 'male', nickname: 'Li Lei', avatar: '...'},
- {gender: 'female', nickname: 'Han Meimei', avatar: '...'},
- ...
- ]
- }
- }
-</script>
-```
-
-The origin data properties which not belongs to the array will also be bound:
-
-```html
-<template>
- <container>
- <container repeat="{{list}}" class="{{gender}}">
- <image src="{{avatar}}"></image>
- <text>{{nickname}} - {{group}}</text>
- </container>
- </container>
-</template>
-
-<style>
- .male {...}
- .female {...}
-</style>
-
-<script>
- module.exports = {
- data: {
- group: '...',
- list: [
- {gender: 'male', nickname: 'Li Lei', avatar: '...'},
- {gender: 'female', nickname: 'Han Meimei', avatar: '...'},
- ...
- ]
- }
- }
-</script>
-```
-
-### An extension of repeat syntax
-
-#### use default `$index` for the index of array.
-
-e.g.
-
-```html
-<div repeat="{{list}}">
- <text>No. {{$index + 1}}</text>
-<div>
-```
-
-#### specify the key and value of array.
-
-e.g.
-
-```html
-<div repeat="{{v in list}}">
- <text>No. {{$index + 1}}, {{v.nickname}}</text>
-</div>
-```
-
-```html
-<div repeat="{{(k, v) in list}}">
- <text>No. {{k + 1}}, {{v.nickname}}</text>
-</div>
-```
-
-#### use `track-by` to specify unique attribute
-
-By default when replacing an array, `repeat` will cause the entire list to be re-rendered. However you can use `track-by` to specify an unique attribute as a hint, so that weex can reuse existing elements as much as possible.
-
-**NOTE: DO NOT USE DATA-BINDING SYNTAX FOR `track-by`**
-
-e.g.
-
-```html
-<template>
- <container>
- <container repeat="{{list}}" track-by="nickname" class="{{gender}}">
- <image src="{{avatar}}"></image>
- <text>{{nickname}} - {{group}}</text>
- </container>
- </container>
-</template>
-```
-
-Later on, when you replace the array including an item of the same nickname, it knows it can reuse the existing scope and DOM elements associated with the same nickname.
-
-## Omitted mustache wrapper
-
-Particularly for the `if` and `repeat` attribute, the [mustache](https://mustache.github.io/) wrapper in values could be omitted: just the same as data-binding syntax.
-
-```html
-<template>
- <container>
- <text if="shown">Hello</text>
- <text if="{{shown}}">Hello</text>
- </container>
-</template>
-
-<script>
- module.exports = {
- data: function () {return {shown: true}}
- }
-</script>
-```
-
-The two `<text>` components are both displayed.
-
-Next is [render logic control](./render-logic.html).
diff --git a/_drafts/v-0.10/guide/syntax/events.md b/_drafts/v-0.10/guide/syntax/events.md
deleted file mode 100644
index c79dd2b..0000000
--- a/_drafts/v-0.10/guide/syntax/events.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Events
-type: guide
-order: 2.3
-version: 0.10
----
-
-# Events
-
-Weex allow `<template>` to bind event type and handler on an Element. The attribute name is the event type with prefix `on...` and the attribute value is handler method name. For instance: `onclick="handler"`. e.g.
-
-```html
-<template>
- <image onclick="handler" ...></image>
-</template>
-
-<script>
- module.exports = {
- methods: {
- handler: function (e) {
- // TODO
- }
- }
- }
-</script>
-```
-
-When user clicks the image , handler function which defined in `<script>` code will be executed.
-
-## Inline Handler
-
-Beside a handler method name, you can also call a handler inline.
-
-e.g.
-```html
-<template>
- <image onclick="handler('arg1', $event)" ...></image>
-</template>
-
-<script>
- module.exports = {
- methods: {
- handler: function (arg1, e) {
- // TODO
- }
- }
- }
-</script>
-```
-
-## Event Object
-
-When an event handler called, it will receive an event object as the first argument. Every event object will contains following properties.
-
-* `type`: event name, eg: `click`
-* `target`: target `Element` of the event
-* `timestamp`: time stamp that event triggered
-
-Next, let's have a look at [display logic control](./display-logic.html).
diff --git a/_drafts/v-0.10/guide/syntax/id.md b/_drafts/v-0.10/guide/syntax/id.md
deleted file mode 100644
index eaa6e04..0000000
--- a/_drafts/v-0.10/guide/syntax/id.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Find an Element
-type: guide
-order: 2.7
-version: 0.10
----
-
-# Find an Element
-
-In Weex, we may set the `id` property for a particular element, just as unique identification of a particular element.
-
-`id` can be used by `this.$el(id)` to find an element with a certain id. Take the API [`scrollToElement()`](../../references/modules/dom.html#scrolltoelementnode-options) For example:
-
-```html
-<template>
- <container>
- <text id="top">Top</text>
- <container style="height: 10000; background-color: #999999;">
- </container>
- <text onclick="back2Top">Back to Top</text>
- </container>
-</template>
-<script>
- var dom = require('@weex-module/dom')
- module.exports = {
- methods: {
- back2Top: function () {
- var top = this.$el('top')
- dom.scrollToElement(top)
- }
- }
- }
-</script>
-```
-
-`id` can also work with `repeat` attribute [See more about display logical control](./display-logic.html), and ensure repetitive elements with different `id`:
-
-```html
-<template>
- <container>
- <image id="{{imgId}}" src="{{imgUrl}}" onclick="getImageId" repeat="{{images}}"></image>
- </container>
-</template>
-<script>
- module.exports = {
- data: {
- images: [
- {imgId: 1, imgUrl: '...'},
- {imgId: 2, imgUrl: '...'},
- {imgId: 3, imgUrl: '...'},
- ...
- ]
- },
- methods: {
- getImageId: function(e) {
- // get e.target.id
- }
- }
- }
-</script>
-```
-
-Additionally, in the [composed components](./composed-component.html), we can get the corresponding sub component through `this.$vm(id)` APIs.
-
-Next is how to [send messages between composed components](./comm.html).
diff --git a/_drafts/v-0.10/guide/syntax/index.md b/_drafts/v-0.10/guide/syntax/index.md
deleted file mode 100644
index 448c40a..0000000
--- a/_drafts/v-0.10/guide/syntax/index.md
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: Syntax
-type: guide
-order: 2
-has_chapter_content: true
-version: 0.10
----
-
-# Syntax
-
-*The syntax of Weex is deeply inspired from [Vue.js](http://vuejs.org/), an elegant JavaScript framework with component system and reactive data binding.*
-
-A simple Weex page sample is just a piece of `<template>` code, a piece of `<style>` code and a piece of `<script>` code. The three parts together describe a whole Weex page.
-
-- `<template>`: *required*. Just uses HTML syntax and describes the structure of a Weex page, which is build upon several tags. Each tag means a type of *component*.
-- `<style>`: *optional*. Describes the presentation details, and the content is based on CSS syntax.
-- `<script>`: *optional*. Describes the data and behavior with JavaScript syntax. It defines data and how these data are processed etc.
-
-```html
-<template>
- <!-- (required) the structure of page -->
-</template>
-
-<style>
- /* (optional) stylesheet */
-</style>
-
-<script>
- /* (optional) the definition of data, methods and life-circle */
-</script>
-```
-
-## `<template>`
-
-We describe page structure in `<template>` tag like the following definition:
-
-```html
-<template>
- <container>
- <image style="width: 200; height: 200;" src="http://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"></image>
- <text>Alibaba Weex Team</text>
- </container>
-</template>
-```
-
-Here `container` tag is the root element of the component. `image` tag describes a picture, while `text` tag means a paragraph of text.
-
-Just similar to HTML, each component could have its own attributes, some components also have children as their sub components.
-
-The root element of template: In a `template` tag, there could be only one root component which has no display logics directive. Here are three types of root component we support now:
-
-- `<container>`: a common native container
-- `<scroller>`: a native scroll view
-- `<list>`: a native cell-reusable list view
-
-Only these type of components are allowed for root element.
-
-* [See all built-in components](../../references/components/index.html).
-
-## `<style>`
-
-You can consider the Weex style syntax is a subset of the CSS syntax, but there is still some differences.
-
-First we could write inline `style` attribute in `<template>` element. Second we could use the `class` attribute to apply stylesheets, which are defined with single-class selectors in `<style>` code. Here is an example:
-
-```html
-<template>
- <container>
- <text style="font-size: 64;">Alibaba</text>
- <text class="large">Weex Team</text>
- </container>
-</template>
-
-<style>
- .large {font-size: 64;}
-</style>
-```
-
-Both the two `text` components above have the same `font-size`, which is `64` pixel.
-
-* [See common styles in Weex](../../references/common-style.html)
-
-
-### Notes!
-weex is basically following [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) naming rule , so please **do not use CamelCase** in your attribute , **long-name** with “-” as delimiter is much better.
-
-## `<script>`
-
-The syntax is JavaScript (ES5) and it describes data and behavior of a Weex page. Here we create three paragraphs:
-
-```html
-<template>
- <container>
- <text>The time is {{datetime}}</text>
- <text>{{title}}</text>
- <text>{{getTitle()}}</text>
- </container>
-</template>
-
-<script>
- module.exports = {
- data: {
- title: 'Alibaba',
- datetime: null
- },
- methods: {
- getTitle: function () {
- return 'Weex Team'
- }
- },
- created: function() {
- this.datetime = new Date().toLocaleString()
- }
- }
-</script>
-```
-
-This piece of `<script>` code will generate some component options and assign it to `module.exports`. The three text components above respectively shows the current datetime, 'Alibaba' and 'Weex Team'. The `data` in the `<script>` code stores component data which could be used for [data-binding](./data-binding.html) in the `<template>`. When data changes, the bound value will be updated automatically. Also it could be read and written by `this.x` in its methods.
-
-* [See component definitions references](../../references/component-defs.html)
-
-Next, let's have a look at [data-binding](./data-binding.html).
diff --git a/_drafts/v-0.10/guide/syntax/render-logic.md b/_drafts/v-0.10/guide/syntax/render-logic.md
deleted file mode 100644
index be967e1..0000000
--- a/_drafts/v-0.10/guide/syntax/render-logic.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Render Logic Control
-type: guide
-order: 2.5
-version: 0.10
----
-
-# Render Logic Control
-
-## `append`
-
-Attribute `append` do not have data-binding. It won't change the final rendering effect. But it determines whether this component should be rendered as a whole tree or a single node with child nodes appended after.
-
-`append` has two key attributes, `tree` and `node`, the usage is:
-
-```html
-<template>
- <container>
- <container id="world" append="tree">
- <text>Hello World!</text>
- </container>
- <container id="weex" append="node">
- <text>Hello Weex!</text>
- </container>
- </container>
-</template>
-```
-
-In the code snippet above, the element with id 'world' will wait for all its children to be rendered then it will be rendered entirely, while the element with id 'weex' will only render itself to the page, then its child elements will be rendered to page one by one.
-
-The rendering result is obvious, The latter statement will render the element a bit faster on the first-paint, but the total time might be longger than `append="tree"` case.
-
-By default, elements are rendered as `node` mode. Once an element is in `tree` rendering mode, its children elements will always be rendered in `tree` mode.
-
-Next we will introduce [composed component](./composed-component.html).
diff --git a/_drafts/v-0.10/guide/syntax/style-n-class.md b/_drafts/v-0.10/guide/syntax/style-n-class.md
deleted file mode 100644
index 4337992..0000000
--- a/_drafts/v-0.10/guide/syntax/style-n-class.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: Style & Class
-type: guide
-order: 2.2
-version: 0.10
----
-
-# Style & Class
-
-## The Basic Syntax
-
-CSS style description can be viewed as a series of key-value pairs,each of which describes a particular style, such as the width and height of a component.
-
-```css
-.box {
- width: 400;
- height: 50;
-}
-```
-
-The format of key-value pairs is `prop-name: prop-value;`. The key name is `prop-name`, the value name is `prop-value`. Usually,the key name and the value name follow Horizontal connection nomenclature, the value may be a number(the default units is px); The key and the value must be separated by `:`, between each key-value pairs must be separated by `;`.
-
-The style description will appear on a weex page in two formats:
-
-* Style attribute of `<template>` label
-* Stylesheets of `<style>` label
-
-### style attribute
-
-The style written in the style label, for example:
-
-```html
-<template>
- <container style="width: 400; height: 50;">
- ...
- </container>
-</template>
-```
-
-It is said that the width and height of `<container>` label is 400 pixels and 50 pixels respectively.
-
-### the `<style>` tag
-
-For example:
-
-```html
-<style>
- .wrapper {width: 600;}
- .title {width: 400; height: 50;}
- .highlight {color: #ff0000;}
-</style>
-```
-
-The stylesheets contain multiple style rules, each style rule has only one class which is contained by its style selector, a pair of curly braces `{...}`, and the styles of the curly braces. For example:
-
-```css
-.title {
- width: 400;
- height: 50;
-}
-```
-
-The above is a rule.
-
-### Class attribute
-
-The selectors of `<style>` label are matched with the class attribute of `<template>` label, we should use spaces to separate the class names. For example:
-
-```html
-<template>
- <container class="wrapper">
- <text class="title">...</text>
- <text class="title highlight">...</text>
- </container>
-</template>
-<style>
- .wrapper {width: 600;}
- .title {width: 400; height: 50;}
- .highlight {color: #ff0000;}
-</style>
-```
-
-It means that the width of the outermost container is 600px, The inside of the two title text is 400 pixels wide 50 pixels high, the second piece of text is red.
-
-### Notes
-
-* In order to simplify the page design and the complete underlying implementation, the width of our default screen is unified to 750 pixels, different screens should be scaled with corresponding ratio.
-* The CSS standard may support a lot of selectors, but now weex only support single-class selector.
-* The CSS standard can support many types of length units, but now weex only support pixel, and the `px` unit could be ignored, you can write number directly. More details can be found in [commmon styles](../../references/common-style.html).
-* The styles of Weex cannot be inherited to children elements, this is different to the CSS standard, such as `color` and `font-size`.
-* The CSS standard contains a lot of styles, but weex only sopport few styles which include layouts such as box model, flexbox, positions. And styles include `font-size`, `color`, etc.
-
-## With Data-binding
-
-Page [data](./data-binding.html) can be bound in `style` and `class` attribute. For example:
-
-```html
-<template>
- <container>
- <text style="font-size: {{fontSize}};">Alibaba</text>
- <text class="large {{textClass}}">Weex Team</text>
- </container>
-</template>
-<style>
- .large {font-size: 32;}
- .highlight {color: #ff0000;}
-</style>
-<script>
- module.exports = {
- data: {
- fontSize: 32,
- textClass: 'highlight'
- }
- }
-</script>
-```
-
-Next, let's have a look at [events](./events.html).
diff --git a/_drafts/v-0.10/references/api.md b/_drafts/v-0.10/references/api.md
deleted file mode 100644
index a62d5b8..0000000
--- a/_drafts/v-0.10/references/api.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Component APIs
-type: references
-order: 1.3
-version: 0.10
----
-
-# APIs
-
-You can access these apis through `this`(Vm) context in script methods.
-
-e.g.
-
-```html
-<script>
-module.exports = {
- methods: {
- somemethod: function() {
- this.$vm('someId');
- }
- }
-}
-</script>
-```
-
-## $(id)
-
-**Deprecated**, please use `$vm` instead.
-
-## $el(id)
-
-Return the element referenced by specific id.
-
-### Arguments
-
-* `id`*(string)*: the unique identifier.
-
-### Returns
-
-* *(Element)*: an Element object referenced.
-
-### Tips
-* id is only guaranteed to be unique within the current (page)components, if you are looking for the parent components or child components, you can make use of the communication mode between components.
-* Further reading: [id](../guide/syntax/id.html), [Communicate Between Components](../guide/syntax/comm.html)
-
-## $vm(id)
-
-Return the vm object referenced by specific id.
-
-### Arguments
-
-* `id`*(string)*: the unique identifier.
-
-### Returns
-
-* `vm`*(Vm)*: a Vm object referenced.
-
-### Tips
-* id is only guaranteed to be unique within the current (page)components, if you are looking for the parent components or child components, you can make use of the communication mode between components.
-* Further reading: [id](../guide/syntax/id.html), [Communicate Between Components](../guide/syntax/comm.html)
-
-## $getConfig()
-
-Get the current global environment variables and configuration information.
-
-### Returns
-
- * `config`*(object)*: the object of config.
- * `bundleUrl`*(string)*: the url of bundle.
- * `debug`*(boolean)*: if is debug mode.
- * `env`*(object)*: a object of envrioment.
- * `weexVersion`*(string)*: a version of weex sdk.
- * `appName`*(string)*: a name of app.
- * `appVersion`*(string)*: a version of app.
- * `platform`*(string)*: the platform, one of `iOS`, `Android` and `Web`.
- * `osVersion`*(string)*: the version of os.
- * `deviceModel`*(string)*: the model of device. **native only**
- * `deviceWidth`*(number)*: the width of device, in pixels.
- * `deviceHeight`*(number)*: the height of device, in pixels.
-
-## $call(module, method, ...args)
-
-**Deprecated**, please use `require('@weex-module/module')[method](...args)` instead. See [modules](./modules/index.html) for more information
-
diff --git a/_drafts/v-0.10/references/bubble.md b/_drafts/v-0.10/references/bubble.md
deleted file mode 100644
index ba59a90..0000000
--- a/_drafts/v-0.10/references/bubble.md
+++ /dev/null
@@ -1,150 +0,0 @@
----
-title: Event Bubble
-type: references
-order: 1.3
-version: 0.10
----
-
-# Event Bubble <span class="api-version">v0.13+</span>
-
-Weex 1.0 implements the W3C standard event bubbling mechanism.
-
-### Usage
-
-```html
-<template>
- <div class="root" onclick="rootClick" bubble="true">
- <div>
- <text style="font-size: 40px;">{{rootText}}</text>
- </div>
- <div class="outer" onclick="parentClick">
- <div>
- <text style="font-size: 40px;">{{parentText}}</text>
- </div>
- <text class="inner" onclick="click">{{innerText}}</text>
- </div>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- innerText: 'click me',
- parentText: '',
- rootText: ''
- },
- methods: {
- click: function(e) {
- this.innerText = 'inner bubble'
- },
- parentClick: function(e) {
- this.parentText = 'parent bubble'
- },
- rootClick: function(e) {
- this.rootText = 'root bubble'
- }
- }
- }
-</script>
-
-<style>
- .inner {
- font-size: 40px;
- text-align: center;
- background-color: #7a9b1b;
- padding: 40px;
- }
-
- .outer {
- font-size: 40px;
- text-align: center;
- background-color: #9b7a1b;
- padding: 120px;
- }
-
- .root {
- font-size: 40px;
- text-align: center;
- background-color: #7a1b9b;
- padding: 80px;
- }
-</style>
-```
-
-[try it](http://dotwe.org/weex/dbfeb926e003986e2eea88c8ccdadb92)
-
-Run the above code, open with the client, click on the middle of the elements, you can see the event spread up, followed by the trigger.
-
-### Notice
-
-One thing should be noticed: **For compatibility with previous versions, Weex does not turn on event bubbling by default. You need to add `bubble = "true"` on the root element's properties to turn on the bubbling mechanism. Otherwise, the event will not be propagated upwards, keeping the same effect as the previous version.**
-
-### stopPropagation
-
-In the event handler function, you can use the `e.stopPropagation()` method to prevent the event from escalating. Note that `e.stopPropagation()` differs from `bubble = "true"`, which affects only the current elements and the propagation of parent elements, without affecting the propagation of child elements; the latter is a switching mechanism that is added for compatibility, Will be a global shutdown or open the bubble mechanism, the two can co-exist, as follows:
-
-```html
-<template>
- <div class="root" onclick="rootClick" bubble="true">
- <div>
- <text style="font-size: 40px;">{{rootText}}</text>
- </div>
- <div class="outer" onclick="parentClick">
- <div>
- <text style="font-size: 40px;">{{parentText}}</text>
- </div>
- <text class="inner" onclick="click">{{innerText}}</text>
- </div>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- innerText: 'click me',
- parentText: '',
- rootText: ''
- },
- methods: {
- click: function(e) {
- this.innerText = 'inner bubble'
- },
- parentClick: function(e) {
- this.parentText = 'parent bubble'
- e.stopPropagation()
- },
- rootClick: function(e) {
- this.rootText = 'root bubble'
- // e.stopPropagation()
- }
- }
- }
-</script>
-
-<style>
- .inner {
- font-size: 40px;
- text-align: center;
- background-color: #7a9b1b;
- padding: 40px;
- }
-
- .outer {
- font-size: 40px;
- text-align: center;
- background-color: #9b7a1b;
- padding: 120px;
- }
-
- .root {
- font-size: 40px;
- text-align: center;
- background-color: #7a1b9b;
- padding: 80px;
- }
-</style>
-```
-
-[try it](http://dotwe.org/weex/0cab45a7c62e8bebedd2ffd83a8e1256)
-
-Run the above code, open with the client, click on the middle of the element, you can see the event up to the parent element is terminated, no longer continue to spread to the root element.
diff --git a/_drafts/v-0.10/references/cheatsheet.md b/_drafts/v-0.10/references/cheatsheet.md
deleted file mode 100644
index 68ac69a..0000000
--- a/_drafts/v-0.10/references/cheatsheet.md
+++ /dev/null
@@ -1,102 +0,0 @@
-# Weex Cheat Sheet
-
-## Native Components
-
-| component | attribtues | styles | events | special parent | children |
-| ---- | ---- | ---- | ---- | ---- | ---- |
-| `<div>` | - | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
-| `<text>` | `value` | **box model**<br>flex<br>`position`<br>`background-color`<br>`opacity`<br>`color`<br>`font-size`<br>`font-style`<br>`font-weight`<br>`text-decoration`<br>`text-align`<br>`text-overflow`<br>`line-height` | `click`<br>`appear`<br>`disappear` | - | text only |
-| `<image>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity`<br>`resize` | `click`<br>`appear`<br>`disappear` | - | (none) |
-| `<scroller>` | `show-scrollbar`<br>`scroll-direction` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
-| `<list>` | `loadmoreoffset` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`loadmore`<br>`refresh`<br>`loading` | - | `<cell>`<br>`<header>`<br>`<refresh>`<br>`<loading>` |
-| `<cell>` | - | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | `<list>` | (any) |
-| `<slider>` | `auto-play` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`change` | - | (any)<br>`<indicator>` |
-| `<indicator>` | - | **box model**<br>**flexbox**<br>`position`<br>`item-color`<br>`item-selected-color`<br>`item-size` | `click`<br>`appear`<br>`disappear` | `<slider>` | (none) |
-| `<wxc-navpage>` | `height`<br>`background-color`<br>`title`<br>`title-color`<br>`left-item-title`<br>`left-item-color`<br>`right-item-title`<br>`right-item-color`<br>`left-item-src`<br>`right-item-src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`naviBar.leftItem.click`<br>`naviBar.rightItem.click` | - | (any) |
-| `<wxc-tabbar>` | `tab-items` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `tabBar.onClick` | - | (none) |
-| `<embed>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (none) |
-| `<web>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`pagestart`<br>`pagefinish`<br>`error` | - | (none) |
-| `<video>` | `src`<br>`play-status`<br>`auto-play` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`start`<br>`pause`<br>`finish`<br>`fail` | - | (none) |
-| `<a>` | `href` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
-| `<input>` | `type`<br>`value`<br>`placeholder`<br>`disabled`<br>`autofocus` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity`<br>`placeholder-color`<br>`color`<br>`font-size`<br>`font-style`<br>`font-weight`<br>`text-align` | `click`<br>`appear`<br>`disappear` | - | (none) |
-| `<switch>` | `checked`<br>`disabled` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `appear`<br>`disappear`<br>`input`<br>`change`<br>`focus`<br>`blur` | - | (none) |
-
-## Native Modules
-
-| module | apis |
-| ---- | ---- |
-| `@weex-module/dom` | `scrollToElement(node, { offset })` |
-| `@weex-module/modal` | `toast({ message, duration })`<br>`alert({ message, okTitle }, callback)`<br>`confirm({ message, okTitle, cancelTitle }, callback(result))`<br>`prompt({ message, okTitle, cancelTitle }, callback(result, data))` |
-| `@weex-module/stream` | `fetch({ method, url, headers, type, body }, callback({ status, ok, statusText, data, headers }), progressCallback({ readyState, status, length, statusText, headers}))` |
-| `@weex-module/webview` | `goBack(ref)`<br>`goForward(ref)`<br>`reload(ref)` |
-| `@weex-module/navigator` | `push({ url, animated }, callback)`<br>`pop({ animated }, callback)` |
-| `@weex-module/animation` | `transition(node, { styles, duration, timingFunction, delay, transform-origin }, callback)` |
-
-## Special Template Syntax
-
-* `<foo x="abc">`
-* `{% raw %}<foo x="{{expr}}">{% endraw %}`
-* `<foo style="name1: value1; name2: value2">`
-* `{% raw %}<foo style="name1: value1; name2: {{expr}}; name3: ...">{% endraw %}`
-* `<foo class="a b c">`
-* `{% raw %}<foo class="a {{expr}} c">{% endraw %}`
-* `<foo onclick="methodName">`
-* `<foo id="abc">`
-* `<foo if="expr">`
-* `<foo repeat="item in list">`
-* `<foo repeat="(key,item) in list">`
-* `<component type="foo">`
-* `{% raw %}<component type="{{expr}}">{% endraw %}`
-
-## ViewModel APIs
-
-* `this.$vm(el)`
-* `this.$el(el)`
-* `this.$getConfig()`
-* `this.$emit(type, data)`
-* `this.$dispatch(type, data)`
-* `this.$broadcast(type, data)`
-
-## ViewModel Options
-
-* `data`
-* `methods`
-* `computed`
-* `init`, `created`, `ready`
-* `events`
-
-example:
-
-```javascript
-module.exports = {
-
- data: function () {
- return {
- x: 1,
- y: 2
- }
- }
-
- methods: {
- foo: function () {
- console.log('foo')
- }
- },
-
- computed: {
- z: function () {
- return this.x + this.y
- }
- },
-
- events: {
- custom: function (e) {
- console.log(e)
- }
- },
-
- init: function () {},
- created: function () {},
- ready: function () {}
-}
-```
diff --git a/_drafts/v-0.10/references/color-names.md b/_drafts/v-0.10/references/color-names.md
deleted file mode 100644
index a61112b..0000000
--- a/_drafts/v-0.10/references/color-names.md
+++ /dev/null
@@ -1,182 +0,0 @@
----
-title: List of the names of colors
-type: references
-order: 1.7
-version: 0.10
----
-
-# List of the names of colors
-
-### Basic color keywords:
-
-| Color Name | Hex rgb |
-| ---------- | ------- |
-| black | #000000 |
-| silver | #C0C0C0 |
-| gray | #808080 |
-| white | #FFFFFF |
-| maroon | #800000 |
-| red | #FF0000 |
-| purple | #800080 |
-| fuchsia | #FF00FF |
-| green | #008000 |
-| lime | #00FF00 |
-| olive | #808000 |
-| yellow | #FFFF00 |
-| navy | #000080 |
-| blue | #0000FF |
-| teal | #008080 |
-| aqua | #00FFFF |
-
-### Extended color keywords:
-
-| Color Name | Hex rgb |
-| ---------- | ------- |
-| aliceblue | #F0F8FF |
-| antiquewhite | #FAEBD7 |
-| aqua | #00FFFF |
-| aquamarine | #7FFFD4 |
-| azure | #F0FFFF |
-| beige | #F5F5DC |
-| bisque | #FFE4C4 |
-| black | #000000 |
-| blanchedalmond | #FFEBCD |
-| blue | #0000FF |
-| blueviolet | #8A2BE2 |
-| brown | #A52A2A |
-| burlywood | #DEB887 |
-| cadetblue | #5F9EA0 |
-| chartreuse | #7FFF00 |
-| chocolate | #D2691E |
-| coral | #FF7F50 |
-| cornflowerblue | #6495ED |
-| cornsilk | #FFF8DC |
-| crimson | #DC143C |
-| cyan | #00FFFF |
-| darkblue | #00008B |
-| darkcyan | #008B8B |
-| darkgoldenrod | #B8860B |
-| darkgray | #A9A9A9 |
-| darkgreen | #006400 |
-| darkgrey | #A9A9A9 |
-| darkkhaki | #BDB76B |
-| darkmagenta | #8B008B |
-| darkolivegreen | #556B2F |
-| darkorange | #FF8C00 |
-| darkorchid | #9932CC |
-| darkred | #8B0000 |
-| darksalmon | #E9967A |
-| darkseagreen | #8FBC8F |
-| darkslateblue | #483D8B |
-| darkslategray | #2F4F4F |
-| darkslategrey | #2F4F4F |
-| darkturquoise | #00CED1 |
-| darkviolet | #9400D3 |
-| deeppink | #FF1493 |
-| deepskyblue | #00BFFF |
-| dimgray | #696969 |
-| dimgrey | #696969 |
-| dodgerblue | #1E90FF |
-| firebrick | #B22222 |
-| floralwhite | #FFFAF0 |
-| forestgreen | #228B22 |
-| fuchsia | #FF00FF |
-| gainsboro | #DCDCDC |
-| ghostwhite | #F8F8FF |
-| gold | #FFD700 |
-| goldenrod | #DAA520 |
-| gray | #808080 |
-| green | #008000 |
-| greenyellow | #ADFF2F |
-| grey | #808080 |
-| honeydew | #F0FFF0 |
-| hotpink | #FF69B4 |
-| indianred | #CD5C5C |
-| indigo | #4B0082 |
-| ivory | #FFFFF0 |
-| khaki | #F0E68C |
-| lavender | #E6E6FA |
-| lavenderblush | #FFF0F5 |
-| lawngreen | #7CFC00 |
-| lemonchiffon | #FFFACD |
-| lightblue | #ADD8E6 |
-| lightcoral | #F08080 |
-| lightcyan | #E0FFFF |
-| lightgoldenrodyellow | #FAFAD2 |
-| lightgray | #D3D3D3 |
-| lightgreen | #90EE90 |
-| lightgrey | #D3D3D3 |
-| lightpink | #FFB6C1 |
-| lightsalmon | #FFA07A |
-| lightseagreen | #20B2AA |
-| lightskyblue | #87CEFA |
-| lightslategray | #778899 |
-| lightslategrey | #778899 |
-| lightsteelblue | #B0C4DE |
-| lightyellow | #FFFFE0 |
-| lime | #00FF00 |
-| limegreen | #32CD32 |
-| linen | #FAF0E6 |
-| magenta | #FF00FF |
-| maroon | #800000 |
-| mediumaquamarine | #66CDAA |
-| mediumblue | #0000CD |
-| mediumorchid | #BA55D3 |
-| mediumpurple | #9370DB |
-| mediumseagreen | #3CB371 |
-| mediumslateblue | #7B68EE |
-| mediumspringgreen | #00FA9A |
-| mediumturquoise | #48D1CC |
-| mediumvioletred | #C71585 |
-| midnightblue | #191970 |
-| mintcream | #F5FFFA |
-| mistyrose | #FFE4E1 |
-| moccasin | #FFE4B5 |
-| navajowhite | #FFDEAD |
-| navy | #000080 |
-| oldlace | #FDF5E6 |
-| olive | #808000 |
-| olivedrab | #6B8E23 |
-| orange | #FFA500 |
-| orangered | #FF4500 |
-| orchid | #DA70D6 |
-| palegoldenrod | #EEE8AA |
-| palegreen | #98FB98 |
-| paleturquoise | #AFEEEE |
-| palevioletred | #DB7093 |
-| papayawhip | #FFEFD5 |
-| peachpuff | #FFDAB9 |
-| peru | #CD853F |
-| pink | #FFC0CB |
-| plum | #DDA0DD |
-| powderblue | #B0E0E6 |
-| purple | #800080 |
-| red | #FF0000 |
-| rosybrown | #BC8F8F |
-| royalblue | #4169E1 |
-| saddlebrown | #8B4513 |
-| salmon | #FA8072 |
-| sandybrown | #F4A460 |
-| seagreen | #2E8B57 |
-| seashell | #FFF5EE |
-| sienna | #A0522D |
-| silver | #C0C0C0 |
-| skyblue | #87CEEB |
-| slateblue | #6A5ACD |
-| slategray | #708090 |
-| slategrey | #708090 |
-| snow | #FFFAFA |
-| springgreen | #00FF7F |
-| steelblue | #4682B4 |
-| tan | #D2B48C |
-| teal | #008080 |
-| thistle | #D8BFD8 |
-| tomato | #FF6347 |
-| turquoise | #40E0D0 |
-| violet | #EE82EE |
-| wheat | #F5DEB3 |
-| white | #FFFFFF |
-| whitesmoke | #F5F5F5 |
-| yellow | #FFFF00 |
-| yellowgreen | #9ACD32 |
-
diff --git a/_drafts/v-0.10/references/common-attrs.md b/_drafts/v-0.10/references/common-attrs.md
deleted file mode 100644
index 2ed0310..0000000
--- a/_drafts/v-0.10/references/common-attrs.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Common Attribute
-type: references
-order: 1.5
-version: 0.10
----
-
-# Common Attribute
-
-Attributes provide additional information about weex tags. All weex tags can have attributes, attributes are always specified in the start tag and usually come in name/value pairs like: name="value". Mustache can be used inside a value.
-All of weex tags have the following attributes：
-
-## id
-
-Specifies a unique id for an element in `<template>` scope. With `id` attribute you can easily refer a weex tag.
-
-```html
-<div id="logo"></div>
-<div id="item-{{index}}"></div>
-```
-
-## style
-
-Specifies an inline style for an element.
-
-```html
-<div style="width: 200; height: 200"></div>
-<div style="padding: {{x}}; margin: 0"></div>
-```
-
-## class
-
-Specifies one or more classnames for an element (refers to a class in a style sheet).
-
-```html
-<div class="button"></div>
-<div class="button {{btnStatus}}"></div>
-```
-
-## repeat
-
-We can use the `repeat` attribute to render a list of items based on an array. The `repeat` attribute has a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an alias for the array element being iterated on.
-
-```html
-<div repeat={{list}}></div>
-<div repeat={{item in list}}></div>
-```
-
-## if
-
-Provide a boolean value to decide whether or not to display current tag.
-
-```html
-<div if="true"></div>
-<div if="{{opened}}"></div>
-<div if="{{direction === 'row'}}"></div>
-```
-
-## append
-
-By providing the value of tree or node, it determines the progress of rendering.
-
-```html
-<div append="tree/node"></div>
-```
-
-## Event Handing (on...)
-
-Register event handlers on weex tag.
-
-```html
-<div onclick="openDetail"></div>
-<div onappear="{{loadMore}}"></div>
-```
-
-## Notes!
-
-Weex is basically following [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) naming rule, so please **do not use CamelCase** in your attribute, **kebab-case** with "-" as delimiter is much better.
diff --git a/_drafts/v-0.10/references/common-event.md b/_drafts/v-0.10/references/common-event.md
deleted file mode 100644
index c8e0836..0000000
--- a/_drafts/v-0.10/references/common-event.md
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: Common Events
-type: references
-order: 1.9
-version: 0.10
----
-
-# Common Events
-
-Weex provide the ability to let events trigger action, like starting a JavaScript when a user click on a component. Bellow are the common event attributes that can be added to weex components to define event actions.
-
-## Click event
-
-The onclick attribute fires on a click gesture on the element.
-**Notes: ** The `input` and `switch` component does not currently support the `click` event, please use `change` or `input` event instead.
-
-### event object
-
-- `type` : `click`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-
-**Example:**
-
-```html
-<template>
- <text style="font-size: 60px" onclick="{{update}}">I am {{name}}</text>
-</template>
-
-<script>
- module.exports = {
- data: {
- name: 'Tom'
- },
- methods: {
- update: function () {
- this.name = this.name === 'Tom' ? 'Jerry' : 'Tom'
- }
- }
- }
-</script>
-```
-
-
-## Longpress event
-
-If a `longpress` event is bound to a component, the event will be triggered when user long press on it.
-**Notes: ** The `input` and `switch` component does not currently support the `click` event, please use `change` or `input` event instead.
-
-### event object
-
-- `type` : `longpress`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-
-**Example:**
-
-```html
-<template>
- <div style="width: 400px; height: 200px; background-color: {{bg}};
- justify-content: center; align-items: center;" onlongpress="{{update}}">
- <text style="font-size: 60px">Press me</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- bg: '#FF0000'
- },
- methods: {
- update: function () {
- this.bg = this.bg === '#FF0000' ? '#00FF00' : '#FF0000'
- }
- }
- }
-</script>
-```
-
-## Appear event
-
-If a appear event is bound to a component inside a scrollable container, the event will be triggered when the component comes to be visible.
-
-### event object
-
-- `type` : `appear`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-- `direction` : The direction in which the scroller is scrolling. Could be `up` or `down`.
-
-[example](http://dotwe.org/3fa162a65fbf0c7e2655fbc1bebbfc38)
-
-## Disappear event
-
-If a `disappear` event is bound to a component inside a scrollable container, the event will be triggered when the component scrolls out of viewport and disappears from your sight.
-
-### event object
-
-- `type` : `disappear`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-- `direction` : The direction in which the scroller is scrolling. Could be `up` or `down`.
-
-[example](http://dotwe.org/3fa162a65fbf0c7e2655fbc1bebbfc38)
-
-## Page event
-
-Weex provides you with simple management of page status, such as `viewappear` and `viewdisappear`.
-The `viewappear` event will be triggered when page is about to show or before any animations are configured for showing. For example, when calling `push` method in `navigator` module, this event will be trigged in new page.
-The `viewdisappear` event will be triggeded when page is about to dismiss.
-Different from `appear` and `disappear` of component, these two events focus on the status of whole page, so **they must be bound to the root component**.
-In addititon, these events also can be bound to body component which is not root actually such as `wxc-navpage`.
-
-### event object
-
-- `type` : `viewappear` or `viewdisappear`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-
-[example](http://dotwe.org/3fa162a65fbf0c7e2655fbc1bebbfc38)
diff --git a/_drafts/v-0.10/references/common-style.md b/_drafts/v-0.10/references/common-style.md
deleted file mode 100644
index 8ae8224..0000000
--- a/_drafts/v-0.10/references/common-style.md
+++ /dev/null
@@ -1,208 +0,0 @@
----
-title: Common Style
-type: references
-order: 1.6
-version: 0.10
----
-
-# Common Style
-
-All of weex tags share some common style rules
-
-## Box Model
-
-
-
-Weex box model based on the CSS box model, all of weex elements can be considered as boxes. The term "box model" is used when talking about design and layout. The box model is essentially a box that wraps around every HTML element. It consists of margins, borders, paddings, and the actual content.
-
-you can use the definition below in weex box model.
-
-- `width`: `length` type, default value `0`
-- `height`: `length` type, default value `0`
-- `padding`: `length` type, default value `0`, (space around content, between element content and the element border)
- - `padding-left`: `length` type, default value `0`
- - `padding-right`: `length` type, default value `0`
- - `padding-top`: `length` type, default value `0`
- - `padding-bottom`: `length` type, default value `0`
-- `margin`: `length` type, default value `0`, (space around elements, outside the border)
- - `margin-left`: `length` type, default value `0`
- - `margin-right`: `length` type, default value `0`
- - `margin-top`: `length` type, default value `0`
- - `margin-bottom`: `length` type, default value `0`
-- `border`
- - `border-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-left-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-top-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-right-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-bottom-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-width`: `length` type, non-negative, default value `0`
- **DO NOT** use `border-width:1`. There is a default viewport `<viewport width="750">`, if the actual width of a device is 720px, then `border-width:1` will be `border-width:0.96`. As weex **do not** support sub-pixel, this border would not be rendered.
- - `border-left-width`: `length` type, non-negative, default value `0`
- - `border-top-width`: `length` type, non-negative, default value `0`
- - `border-right-width`: `length` type, non-negative, default value `0`
- - `border-bottom-width`: `length` type, non-negative, default value `0`
- - `border-color`: `color` type, default value `#000000`
- - `border-left-color`: `color` type, default value `#000000`
- - `border-top-color`: `color` type, default value `#000000`
- - `border-right-color`: `color` type, default value `#000000`
- - `border-bottom-color`: `color` type, default value `#000000`
- - `border-radius`: `length` type, default value `0`, (rounded borders to elements , default value is 0 meaning right angle )
-
- Although the the default overflow style is `overflow:hidden` in android, a view will not be clipped by its parents' `border-radius`. This only happens on Android, it works fine on iOS.
- - `border-bottom-left-radius`: `length` type, non-negative, default value `0`
- - `border-bottom-right-radius`: `length` type, non-negative, default value `0`
- - `border-top-left-radius`: `length` type, non-negative, default value `0`
- - `border-top-right-radius`: `length` type, non-negative, default value `0`
-
-Notes: The rule of border-radius for a specific corner such as `border-top-left-radius` is not currently supported for component `<image>` and `<text>`.
-
-Weex box model uses `border-box` as the default value of `box-sizing`, meaning the width and height properties includes content, padding and border, but not the margin.
-
-example:
-
-```html
-<template>
- <div>
- <image src="..." style="width: 400; height: 200; margin-left: 20;"></image>
- </div>
-</template>
-```
-
-## Flexbox
-
-Weex box style model based on the CSS flexbox, ensures that elements behave predictably and the page layout can accommodates to different screen sizes and different display devices.
-
-Flexbox consists of flex containers and flex items. If a weex element can containing other elements, it is a flex container.
-
-Notice that the old version of flexbox specification has differences with the new ones, such as whether or not to support wrapping. This is described at w3c's working drafts, and you should notice the differences among them. Also notice that the old version is only supported below the 4.4 version of android.
-
-### Flex container
-
-Flexbox is the default and only style model in Weex, so you don't have to add `display: flex;` in a container.
-
-- `flex-direction`: values `row` | `column`, default value `column`
-
-The flex-direction property specifies the direction of the flexible items inside the flex container. Default value is `column` (top-to-bottom).
-
-- `justify-content`: values `flex-start` | `flex-end` | `center` | `space-between`, default value `flex-start`
-
-The justify-content property horizontally aligns the flexible container's items when the items do not use all available space on the main-axis. Default value is `flex-start` meaning the flex items are positioned at the beginning of the container. `flex-end` means the items are positioned at the end of the container. `center` means the items are positioned at the center of the container. `space-between` means the items are positioned with space between the lines.
-
-
-
-- `align-items`: values `stretch` | `flex-start` | `center` | `flex-end`, default value `stretch`
-
-The align-items property vertically aligns the flexible container's items when the items do not use all available space on the cross-axis. Default value is `stretch` meaning the items are stretched to fit the container. `flex-start` means the items are positioned at the top of the container; `flex-end` means the items are positioned at the bottom of the container; `center` means items are positioned at the center of the container (vertically).
-
-
-
-### Flex item
-
-- `flex`: `number` type, default value `0`
-
-the flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container. If all of the flex items set `flex: 1`, they will have equal width or height on direction of flex container's `flex-direction`. If there are two flex items, with one setting `flex: 1`, and the other setting `flex: 2`, the first one will take 1/3 container space, and the second one will take 2/3 container space. If all of flex items don't set `flex`, they will be aligned depending on the container's `justify-content` property.
-
-
-## Examples
-
-a list of images with equal scales align at the vertical axis:
-
-```html
-<template>
- <div style="width: 300; height: 100;">
- <image src="..." style="flex: 1;"></image>
- <image src="..." style="flex: 1;"></image>
- <image src="..." style="flex: 1;"></image>
- </div>
-</template>
-```
-
-a image with fixed width aligns with a stretched text:
-
-```html
-<template>
- <div style="width: 300; height: 100;">
- <image src="..." style="width: 100; height: 100;"></image>
- <text style="flex: 1;">...</text>
- </div>
-</template>
-```
-
-mixed direction alignment:
-
-```html
-<template>
- <div style="width: 100;">
- <image src="..." style="width: 100; height: 100;"></image>
- <div style="flex-direction: row;">
- <text style="flex: 2; font-size: 32;">title</text>
- <text style="flex: 1; font-size: 16;">$100</text>
- </div>
- </div>
-</template>
-```
-
-one text align left , the other float right:
-
-
-
-```html
-<template>
-<div style="flex-direction: row; justify-content: space-between;">
- <text>WEEX</text>
- <text>2016-05-08</text>
-</div>
-</template>
-```
-
-## Position
-
-we can use properties below to control placement of weex tag
-
-- `position`: values `relative` | `absolute` | `fixed` | `sticky`, default value `relative`
-
-`relative` means the item is positioned relative to its normal position. `absolute` means the item is positioned relative to its container. `fixed` keeps the elements position fixed when the page is scrolling. `sticky` keeps elements positioned inside the viewport as "stuck" at the top or "relative" at its original place depending on whether does it about to scroll out of the view.
-
-- `top`: `number` type, default value `0`, upward offset value
-- `bottom`: `number` type, default value `0`, downward offset value
-- `left`: `number` type, default value `0`, leftward offset value
-- `right`: `number` type, default value `0`, rightward offset value
-
-### Examples
-
-```html
-<template>
- <div style="flex-direction: column;">
- <div style="height: 3000;">
- <image src="..." style="top: 50; left: 50; ..."></image>
- </div>
- <div style="height: 3000;">
- <image src="..." style="position: sticky; ..."></image>
- </div>
- <div style="height: 3000;">
- <image src="..." style="position: absolute; top: 50; left: 50; ..."></image>
- </div>
- </div>
-</template>
-```
-
-## Other Common Style
-
-- `opacity`
-- `background-color`
-
-## Type of Style Value
-
-- `length` type
-- `number` type
-- `color` type (*[The list of color keywords.](./color-names.html)*)
-- enumerated type
-
-## Simple Step
-
-These up-to-down steps may help you to plan the whole style of weex pages.
-
-1. overall style: divide the whole page to different parts
-2. flex alignment: align boxes in every part of page
-3. position box: place box, set offset
-4. element specific style: set styles for certain element if needed
diff --git a/_drafts/v-0.10/references/component-defs.md b/_drafts/v-0.10/references/component-defs.md
deleted file mode 100644
index baa6584..0000000
--- a/_drafts/v-0.10/references/component-defs.md
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: Component Definition
-type: references
-order: 1.2
-version: 0.10
----
-
-# Component Definition
-
-A component definition is a set of options to describe a component. It's always assigned to `module.exports` in `<script>`.
-
-```javascript
-module.exports = {
- // a set of options here
-}
-```
-
-## Data & Methods options
-
-```javascript
-module.exports = {
- data: function () {
- return {x: 1, y: 2}
- },
- methods: {
- doThis: function () {...},
- doThat: function () {...}
- },
- ...
-}
-```
-
-The `data` option is a function that return a observable data object for this ViewModel.
-The `methods` option is a map which contains all ViewModel methods.
-
-Each `data` or `methods` property will be proxied to the ViewModel instance. So you can read and write data with `this.x`, also you can call methods with `this.doThis(...)`.
-
-A whole example:
-
-```html
-<template>
- <div style="width: {{w}}; height: {{h}}; background-color: red;" onclick="update"></div>
-</template>
-<script>
- module.exports = {
- data: function () {
- return {w: 750, h: 200}
- },
- methods: {
- update: function (e) {
- this.h += 200
- }
- }
- }
-</script>
-```
-
-## Events options
-
-```javascript
-module.exports = {
- data: ...,
- methods: {
- foo: function () {
- ...
- this.$emit('customtype1', data)
- }
- },
- events: {
- customtype1: function (e) {
- console.log(e.type, e.detail)
- }
- },
- ...
-}
-```
-
-The `events` options could allow you to add custom event listeners when ViewModel created. Then it will listen these type of events and handle them by the function-type value.
-
-The first argument is a event object which contains event data in `e.detail`.
-
-## Lifecycle options
-
-```javascript
-module.exports = {
- data: ...,
- methods: ...,
- init: function () {
- console.log('ViewModel constructor begins')
- },
- created: function () {
- console.log('Data observation finished')
- },
- ready: function () {
- console.log('Virtual DOM finished')
- },
- ...
-}
-```
-
-Weex ViewModel now supports these lifecycle hook functions which could be write as component options:
-
-* `init`: fired at the beginning of a ViewModel constructor call.
-* `created`: fired when ViewModel observes default data but not compile the template.
-* `ready`: fired when ViewModel observes default data and compiles the template to generate virtual DOM finally.
-
-**Note: If you want to use the function in `methods`, `events` or lifecycle options as a parameter, please make sure the context is correct as expect. For example:**
-
-```javascript
-module.exports = {
- data: function () {
- return {x: 1, y: 2}
- },
- ready: function () {
- // `undefined`
- // because the context changed
- this.foo(this.bar)
- // `1`
- // because the context bound correct
- this.foo(this.bar.bind(this))
- },
- methods: {
- foo: function (fn) {
- return fn()
- },
- bar: function () {
- return this.x
- }
- }
-}
-```
diff --git a/_drafts/v-0.10/references/components/a.md b/_drafts/v-0.10/references/components/a.md
deleted file mode 100644
index e1677bf..0000000
--- a/_drafts/v-0.10/references/components/a.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: <a>
-type: references
-order: 2.1
-version: 0.10
----
-
-# <a>
-
-`a` defines a hyperlink to a page in the web. Its purpose and syntax is very similar to [<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) in HTML5.
-
-## Child Components
-
-This type of component supports all kinds of weex component as it's child components except for its own kind.
-
-## Attributes
-
-* href: href attributes defines the URL of the hyperlink.
-
-## Styles:
-
-### common styles
-
-Check out the [common styles](../common-style.html)
-
-## Events
-
-### common events
-
-Check out the [common events](../common-event.html)
-
-### Notes
-
-We can't guarantee the order of execution between onclick function and href. we recommend that do not use the click event in `a`.
-
-## Examples
-
-```html
-<template>
- <div>
- <a href="http://h5.m.taobao.com">
- <text>Click me to see how 'A' element opens a new world.</text>
- </a>
- </div>
-</template>
-```
-
-[Try it](http://dotwe.org/d99f6eb55aa501c836a195ec824cada0)
-
-Use [Weex Playground](https://alibaba.github.io/weex/download.html) App to Scan the QR image and view the example for 'a'.
diff --git a/_drafts/v-0.10/references/components/cell.md b/_drafts/v-0.10/references/components/cell.md
deleted file mode 100644
index 34d1703..0000000
--- a/_drafts/v-0.10/references/components/cell.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: <cell>
-type: references
-order: 2.6
-version: 0.10
----
-
-# <cell>
-
-### Summary
-
-This component must be used as a subcomponent of a [`list`](./list.html) component, which is for the performance optimizing during scrolling.
-
-### Child Components
-
-This type of component supports all kinds of weex component as its child components.
-
-### Attributes
-
-There is no specific attribute for this component other than the [common attributes](../common-attrs.html).
-
-**Notes:** you can't give `<cell>` a `flex` value. Width of `<cell>` is equal to the width of its parent component `<list>`, and you don't need to specify its height.
-
-### Styles
-
-**common styles**: check out the [common styles](../common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `click` event. Check out [common events](../common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../common-event.html)
-
-### Example
-
-please refer to [List](./list.html)
diff --git a/_drafts/v-0.10/references/components/div.md b/_drafts/v-0.10/references/components/div.md
deleted file mode 100644
index 1e75523..0000000
--- a/_drafts/v-0.10/references/components/div.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: <div>
-type: references
-order: 2.2
-version: 0.10
----
-
-# <div>
-
-### Summary
-
-The most fundamental component which is a contianer to wrap any other components. It supports all the common styles, attributes and layout of flexbox.
-
-alias: `<container>` (deprecated)
-
-### Child Components
-
-This type of component supports all kinds of weex component as its child components including its own kind.
-
-### Attributes
-
-There is no specific attribute for this component other than the [common attributes](../common-attrs.html).
-
-### Styles
-
-**common styles**: check out the [common styles](../common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `click` event. Check out [common events](../common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../common-event.html)
-
-### Examples
-
-```html
-<div>
- <image src="..."></image>
- <text>...</text>
-</div>
-```
-
diff --git a/_drafts/v-0.10/references/components/image.md b/_drafts/v-0.10/references/components/image.md
deleted file mode 100644
index 3eae206..0000000
--- a/_drafts/v-0.10/references/components/image.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: <image>
-type: references
-order: 2.3
-version: 0.10
----
-
-# <image>
-
-### Summary
-
-`image` tag is used to render a specified picture, and it shouldn't contain any child component. You can use `img` as alias.
-
-**Notes:** the styles of `width` and `height` should be specified, otherwise it won't work.
-
-alias: `<img>`
-
-### Child Components
-
-This component supports no child components.
-
-### Attributes
-
-- `src`: <string> image source url
-- `resize`: <span class="api-version">v0.5+</span> <string> the 'ScaleType' of the component. The default value is ``stretch``, if this attribute is not specified. Possible values are ``cover``, ``contain``, each of which has the same meaning with w3c standard.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-### Styles
-
-- `width`: <length> the width of the component. This style should be specified.
-- `height`: <length> the height of the component. This style should be specifed.
-
-**common styles**: check out the [common styles](../common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `click` event. Check out [common events](../common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../common-event.html)
-
-### Examples
-
-```html
-<div>
- <image src="..." ></image>
- <text>...</text>
-</div>
-```
diff --git a/_drafts/v-0.10/references/components/index.md b/_drafts/v-0.10/references/components/index.md
deleted file mode 100644
index 66e211c..0000000
--- a/_drafts/v-0.10/references/components/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Build-in Components
-type: references
-order: 2
-version: 0.10
----
-
-# Build-in Components
-
-- [<a>](./a.html)
-- [<indicator>](./indicator.html)
-- [<switch>](./switch.html)
-- [<text>](./text.html)
-- [<textarea>](./textarea.html)
-- [<video>](./video.html)
-- [<web>](./web.html)
-- [<div>](./div.html)
-- [<image>](./image.html)
-- [<input>](./input.html)
-- [<list>](./list.html)
-- [<cell>](./cell.html)
-- [<refresh> & <loading>](./refresh.html)
-- [<scroller>](./scroller.html)
-- [<slider>](./slider.html)
\ No newline at end of file
diff --git a/_drafts/v-0.10/references/components/indicator.md b/_drafts/v-0.10/references/components/indicator.md
deleted file mode 100644
index b06dc95..0000000
--- a/_drafts/v-0.10/references/components/indicator.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: <indicator>
-type: references
-order: 2.10
-version: 0.10
----
-
-# <indicator>
-
-### Summary
-
-This component must be used as a subcomponent of a [`slider`](./slider.html) component.
-
-### Child Components
-
-This component supports no child components.
-
-### Attributes
-
-There is no specific attribute for this component other than the [common attributes](../common-attrs.html).
-
-### Styles
-
-- `item-color`: <colors> This style attribute sets the normal item color using either a named color or a color specified in the hexadecimal #RRGGBB format.
-- `item-selectedColor`: <colors> This style attribute sets the selected item color using either a named color or a color specified in the hexadecimal #RRGGBB format.
-- `item-size`: <length> The size of the indicator elements, which is an float attribute.
-
-**common styles**: check out the [common styles](../common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-
-**Note:** There are some specific details about the style `width` and `height` on this component: the position of indicator will not only depend on the `top`, `left`, `bottom` and `right`, but also depend on the value of `width` and `height`. Imagine there is a virtual container outside the indicator, and it inherit the `width` and `height` of the indicator. The `top`, `left`, `right` and `bottom` will always take effect on this container, not the indicator points themselves, and the indicator points will be positioned in the center of it. And also you should know the default `width` and `height` is the parent slider's `width` and `height`.
-
-**Note:** `background-color` is not recommended to apply on this component, and you should use `item-color` and `item-selectedColor` instead.
-
-### Events
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `click` event. Check out [common events](../common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../common-event.html)
-
-### Example
-
-```html
-<template>
- <div>
- <slider class="slider">
- <div class="slider-pages" repeat="{{itemList}}">
- <image class="img" src="{{pictureUrl}}"></image>
- <text class="title">{{title}}</text>
- </div>
-
- <indicator class="indicator"></indicator>
- </slider>
- </div>
-</template>
-
-<style>
- .img {width: 150; height: 150;}
- .title {flex: 1; color: #ff0000; font-size: 48; font-weight: bold; background-color: #eeeeee;}
- .slider {
- flex-direction: row;
- margin: 18;
- width: 714;
- height: 230;
- }
- .slider-pages {
- flex-direction: row;
- width: 714;
- height: 200;
- }
- .indicator {
- width:714;
- height:200;
- position:absolute;
- top:1;
- left:1;
- item-color: red;
- item-selectedColor: blue;
- item-size: 20;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- itemList: [
- {itemId: '520421163634', title: 'item1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
- {itemId: '522076777462', title: 'item2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
- {itemId: '522076777462', title: 'iten3', pictureUrl: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
- ]
- }
- }
-</script>
-```
diff --git a/_drafts/v-0.10/references/components/input.md b/_drafts/v-0.10/references/components/input.md
deleted file mode 100644
index feaac53..0000000
--- a/_drafts/v-0.10/references/components/input.md
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: <input>
-type: references
-order: 2.4
-version: 0.10
----
-
-# input
-
-The weex builtin component `input` is used to create input controls to receive the user's input characters. How a `input` component works varies considerably depending on the value of its `type` attribute, such as `text`, `password`, `url`, `email`, `tel` etc.
-
-**Notes:** does not support the common-event `click`. Please listen to the `input` or `change` event instead.
-
-## Child Components
-
-This component supports no child components.
-
-## Attributes
-
-* `type`: the type of controls to display. The default value is `text`, if this attribute is not specified. Possible values are `text`, `password`, `tel`, `email`, `url` etc. each of which has the same meaning with W3C standard.
-
-* `value`: the value(text) of the control.
-
-* `placeholder`: a hint to the user of which can be entered to the control. The placeholder text must have no carriage returns or line-feeds.
-
-* `disabled`: a boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls.
-
-* `autofocus`: a boolean attribute lets you specify that a form control should have input focus when the page loads.
-
-* `maxlength`: <span class="api-version">v0.7+</span> a number value to specify maxlength of input.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-
-* placeholder-color: the color of placeholder. Default value is '#999999'.
-
-* text styles: checkout [text styles](../text-style.html)
-
- * support 'color' style.
- * support 'font-size' style.
- * support 'font-style' style.
- * support 'font-weight' style.
- * support 'text-align' style.
-
-### common styles
-check out [common styles for components](../common-style.html)
-
-* support flexbox related styles.
-* support box model related styles.
-* support 'position' related styles.
-* support 'opacity', 'background-color' etc.
-
-## Events
-
-* input: the value of an input character changes.
-* change: the change event is fired when a change to the component's value is commited by the user. It always come after a 'blur' event.
-* focus: a component has received focus.
-* blur: a component has lost focus.
-
-### common events
-check out [common events](../common-event.html)
-
-* support 'appear' / 'disappear' event.
-
-### Notes
-does not support the common-event 'click'. Please listen to the 'input' or 'change' event instead.
-
-### Parameters of events' object
-
-* for 'input' and 'change' events:'value': the value of the component who dispatched this event.'timestamp': the time stamp of the event.
-* for 'focus' and 'blur' events:'timestamp': the time stamp of the event.
-
-## Example
-
-```html
-<template>
- <div>
- <input
- type="text"
- placeholder="Input Something"
- class="input"
- autofocus="true"
- value=""
- onchange="onchange"
- oninput="oninput"
- />
- <text>oninput: {{txtInput}}</text>
- <text>onchange: {{txtChange}}</text>
- </div>
-</template>
-
-<style>
- .input {
- font-size: 60;
- height: 80;
- width: 400;
- }
-</style>
-
-<script>
- require('weex-components');
- module.exports = {
- data: {
- txtInput: '',
- txtChange: ''
- },
- methods: {
- onchange: function(event) {
- this.txtChange = event.value;
- console.log('onchange', event.value);
- },
- oninput: function(event) {
- this.txtInput = event.value;
- console.log('oninput', event.value);
- }
- }
- };
-</script>
-```
-
-[Try it](http://dotwe.org/e1b18eb89facb4e2a5467ee4bebd9be6)
-
-Use [Weex Playground](https://alibaba.github.io/weex/download.html) App to Scan the QR image and view the example for 'input'.
diff --git a/_drafts/v-0.10/references/components/list.md b/_drafts/v-0.10/references/components/list.md
deleted file mode 100644
index 3b4745e..0000000
--- a/_drafts/v-0.10/references/components/list.md
+++ /dev/null
@@ -1,292 +0,0 @@
----
-title: <list>
-type: references
-order: 2.5
-version: 0.10
----
-
-# List
-
-<span class="weex-version">v0.6.1+</span>
-
-The List component, which inherits from Scroller component, is a core component, and it provides the most popular features for using a list of items.
-
-It can provide excellent experience and performance while still maintaining smooth scroll and low memory usage.
-
-**example**
-
-```html
-<template>
- <list>
- <cell onappear="onappear($event, $index)" ondisappear="ondisappear($event, $index)" class="row" repeat="{{staffs}}" index="{{$index}}">
- <div class="item">
- <text>{{name}}</text>
- </div>
- </cell>
- </list>
-</template>
-
-<style>
- .row {
- width: 750;
- }
- .item {
- justify-content: center;
- border-bottom-width: 2;
- border-bottom-color: #c0c0c0;
- height: 100;
- padding:20;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- staffs:[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}]
- },
- methods:{
- onappear: function (e, index) {
- console.log('+++++', index)
- console.log(this.staffs[index].name + ' is appearing...');
- },
- ondisappear:function (e, index) {
- console.log('+++++', index)
- }
- }
- }
-</script>
-
-```
-
-[try it](http://dotwe.org/15d58cfbca9b6a72c89c9a13ad1f6155)
-
-### Child Components
-
-Notes: The list now supports the following child components: cell, header, refresh, loading and fixed-position components. Other kinds of components will not be guaranteed to be displayed correctly.
-
-* cell 0.6.1 defines the attributes and behavior of the cells that appear in list.
-* header 0.6.1 sticks to the top when it reaches the top of the screen.
-* refresh 0.6.1 used inside list to add pull-down-to-refresh functionality.
-* loading 0.6.1 used inside list to add pull-up-to-load-more functionality.
-
-
-### Attributes
-
-* show-scrollbar: true/false whether show the scroll bar or not, default value is true
-* scroll-direction: <string> define scroll direction of component, horizontal or vertical
-* loadmoreoffset : <number> default value is 0. The loadmore event will be triggered when the list is loadmoreoffset left to reach the bottom of the list view. e.g. a list has total content length of 1000, and the loadmoreoffset is set to 400, the loadmore event will be triggered when 600 has beed scrolled and there is less than 400 left.
-* loadmoreretry : <number> default value 0，whether to reset loadmore related UI when loadmore failed, will be deprecated in further release.
-
-Please checkout [Scroller Component Attributes](./scroller.html) to have a look at the inherited attributes from direct parent.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-### Styles
-
-common styles: check out [common styles for components](../common-style.html)
-
-* support flexbox related styles
-* support box model related styles
-* support position related styles
-* support opacity, background-color etc.
-
-### Events
-
-onloadmore 0.5 used with loadmoreoffset attribute. if the view has less than loadmoreoffset to scroll down, the onloadmore event will be triggered.
-
-common events: check out the [common events](../common-event.html)
-
-* support onclick event. Check out [common events](../common-event.html)
-* support onappear / ondisappear event. Check out [common events](../common-event.html)
-
-
-### API
-
-All cells or cell's subcomponents in list support the scrollToElement API in [dom module](../modules/dom.html)
-
-#### Difference between loading child component and onloadmore event
-
-loading is a child component that can response to the onloading event, and this event can only be triggered when the scroller/list has been scrolled down to the bottom.
-onloadmore is an event that will be triggered when the rest of the scroller/list is less than loadmoreoffset long.
-
-
-* [scroller example](http://dotwe.org/85fd3988eefa24f058b7da7966e56203)
-* [list example](http://dotwe.org/62f895249014dde26cc0725c8005e42c)
-
-### Restrictions
-
-Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions.
-For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal.
-
-### Example
-
-```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>
-```
-
-[Try it](http://dotwe.org/ed524ade679b0fa96e980600c53ea5ce)
\ No newline at end of file
diff --git a/_drafts/v-0.10/references/components/refresh-loading.md b/_drafts/v-0.10/references/components/refresh-loading.md
deleted file mode 100644
index 8b1d610..0000000
--- a/_drafts/v-0.10/references/components/refresh-loading.md
+++ /dev/null
@@ -1,297 +0,0 @@
----
-title: <refresh> & <loading>
-type: references
-order: 2.7
-version: 0.10
----
-
-# refresh & loading
-
-<span class="weex-version">v0.6.1+</span>
-
-## Loading Components
-
-To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
-
-
-**example**
-
-```html
-`<template>
- <list>
- <header>
- <div class="center">
- <text style="text-align:center">I am the header</text>
- </div>
- </header>
- <loading onloading="onloading" display="{{loadingDisplay}}" style="width:750;flex-direction: row;justify-content: center;">
- <loading-indicator style="height:160;width:160;color:#3192e1"></loading-indicator>
- </loading>
- <cell onappear="onappear($event, $index)" ondisappear="ondisappear($event, $index)" class="row" repeat="{{staffs}}" index="{{$index}}">
- <div class="item">
- <text>{{name}}</text>
- </div>
- </cell>
- </list>
-</template>
-
-<style>
- .row {
- width: 750;
- }
- .item {
- justify-content: center;
- border-bottom-width: 2;
- border-bottom-color: #c0c0c0;
- height: 100;
- padding:20;
- }
- .center {
- border-bottom-width: 2;
- border-bottom-color: #cccccc;
- height: 100;
- padding:20;
- background-color:#FFFFFF;
- justify-content: center;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- staffs:[],
- loadingDisplay: 'show',
- loadingText: 'pull up to load more',
- refreshText: 'pull down to refresh'
- },
- created:function() {
- this.refreshDisplay='show'
- this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}];
- },
- methods:{
- onappear: function (e, index) {
- // console.log('+++++', index);
- // console.log(this.staffs[index].name + ' is appearing...');
- },
- ondisappear:function (e, index) {
- // console.log('+++++', index);
- },
- onloading:function(e){
- console.log('onloading...');
- this.staffs.push({name:'onloading'})
- }
- }
- }
-</script>
-
-```
-
-[try it](http://weex.alibaba-inc.com/raw/html5/a34523fee395aa68018d65f0fb622310.js)
-
-### Child Components
-
-Any other components, like the text and img components, can be put inside the refresh component. And there is a special component named loading-indicator used only inside the refresh or the loading components.
-
-* loading-indicator is a child component implemented with default animation effect for the refresh component.
-[example](http://weex.alibaba-inc.com/playground/a34523fee395aa68018d65f0fb622310)
-
-### Attributes
-
-* display has value of show or hide.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-
-### Styles
-common styles: check out [common styles for components](../common-style.html)
-
-### Events
-
-* onloading triggered when loading
-
-
-#### Restrictions
-* refresh/loading does not support remove action, Weex 0.9 will fix it.
-* refresh/loading despite setting with display='hide', the refresh/loading view will still appear when scrolling due to known issues. it can be fixed with a another display='hide' when the refresh/loading should be hidden.
-* refresh/loading can only be hidden or displayed with an attribute display with value of show or hide. And there should be a statement of display='hide' when display='show' shows up in an event function, or your scroller may not response to user inputs.
-
-## Refresh Components
-
-To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
-
-```html
-<template>
- <scroller onloadmore="onloadmore" loadmoreoffset="1000">
- <refresh onrefresh="onrefresh" display="{{refreshDisplay}}">
- <text id="refreshText">{{refreshText}}</text>
- </refresh>
- <div repeat="{{v in items}}">
- <text style="font-size: 40; color: #000000">{{v.item}}</text>
- </div>
- <loading onloading="onloading" display="{{loadingDisplay}}">
- <text id="loadingText">{{loadingText}}</text>
- </loading>
- </scroller>
-</template>
-<script>
- module.exports = {
- data: {
- refreshDisplay: 'show',
- loadingDisplay: 'show',
- loadingText: 'pull up to load more',
- refreshText: 'pull down to refresh',
- items: []
- },
- created: function () {
- for (var i = 0; i < 30; i++) {
- this.items.push({'item': 'test data' + i});
- }
- },
- methods: {
- onrefresh: function () {
- var vm = this;
- vm.refreshDisplay = 'show'
- if (vm.items.length > 50) {
- vm.refreshText = "no more data!"
- vm.refreshDisplay = 'hide'
- return;
- }
- var len = vm.items.length;
- for (var i = len; i < (len + 20); i++) {
- vm.items.unshift({'item': 'test data ' + i});
- }
- vm.refreshDisplay = 'hide'
- },
- onloading: function () {
- var vm = this;
- vm.loadingDisplay = 'show'
- if (vm.items.length > 30) {
- vm.loadingText = "no more data!"
- vm.loadingDisplay = 'hide'
- return;
- }
-
- var len = vm.items.length;
- for (var i = len; i < (len + 20); i++) {
- vm.items.push({'item': 'test data ' + i});
- }
- vm.loadingDisplay = 'hide'
- },
- onloadmore:function(){
- console.log("into--[onloadmore]")
- }
- }
- }
-</script>
-```
-
-[try it](http://dotwe.org/242add915e41d307f2fa6f423278425a)
-
-### Child Components
-
-Any other components, like the text and img components, can be put inside the refresh component. And there is a special component named loading-indicator used only inside the refresh or the loading components.
-
-* loading-indicator is a child component implemented with default animation effect for the refresh component.
-[example](http://dotwe.org/e65a2cb0abfcdbbabda6778064837a92)
-
-### Attributes
-* display has value of show or hide, default value is show.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-
-### Styles
-common styles: check out [common styles for components](../common-style.html)
-
-### Events
-* onrefresh triggered when the scroller has been pulled down
-* onpullingdown available on Android. triggered when the scroller has been pulled down. you can get dy, headerHeight, maxHeight from onpullingdowns event object. [example](http://dotwe.org/10ee6bd59ebe173f0f578a4eb8bac6f1)
-
-**example**
-
-```html
-<template>
- <list>
- <header>
- <div class="center">
- <text style="text-align:center">I am the header</text>
- </div>
- </header>
- <refresh onpullingdown='onpullingdown' onrefresh="onrefresh" display="{{refreshDisplay}}" style="width:750;flex-direction: row;justify-content: center;">
- <loading-indicator style="height:160;width:160;color:#3192e1"></loading-indicator>
- </refresh>
- <cell onappear="onappear" ondisappear="ondisappear" class="row" repeat="{{staffs}}" index="{{$index}}">
- <div class="item">
- <text>{{name}}</text>
- </div>
- </cell>
- </list>
-</template>
-
-<style>
- .row {
- width: 750;
- }
- .item {
- justify-content: center;
- border-bottom-width: 2;
- border-bottom-color: #c0c0c0;
- height: 100;
- padding:20;
- }
- .center {
- border-bottom-width: 2;
- border-bottom-color: #cccccc;
- height: 100;
- padding:20;
- background-color:#FFFFFF;
- justify-content: center;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- staffs:[],
- refreshDisplay: 'show',
- loadingDisplay: 'show',
- loadingText: 'pull up to load more',
- refreshText: 'pull down to refresh'
- },
- created:function() {
- this.refreshDisplay='show'
- this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}];
- },
- methods:{
- onappear: function (e) {
- var index = e.target.attr.index
- // console.log(this.staffs[index].name + ' is appearing...');
- },
- ondisappear:function (e) {
- },
- onrefresh:function(e){
- this.refreshDisplay='show';
- // this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'}];
- this.refreshDisplay='hide'
- // console.log(this.refreshDisplay);
- },
- onpullingdown:function(e){
- console.log('onpullingdown triggered.');
- console.log('dy:'+e.dy);
- console.log('headerHeight:'+e.headerHeight);
- console.log('maxHeight:'+e.maxHeight);
- }
- }
- }
-</script>
-
-```
-
-[try it ](http://dotwe.org/10ee6bd59ebe173f0f578a4eb8bac6f1)
-
-
-### Restrictions
-
-* refresh/loading does not support remove action, may support in Weex 0.9.
-* refresh/loading despite setting with display='hide', the refresh/loading view will still appear when scrolling due to known issues. it can be fixed with a another display='hide' when the refresh/loading should be hidden.
-* refresh/loading can only be hidden or displayed with an attribute display with value of show or hide. And there should be a statement of display='hide' when display='show' shows up in an event function, or your scroller may not response to user inputs.
diff --git a/_drafts/v-0.10/references/components/scroller.md b/_drafts/v-0.10/references/components/scroller.md
deleted file mode 100644
index 3197ab8..0000000
--- a/_drafts/v-0.10/references/components/scroller.md
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: <scroller>
-type: references
-order: 2.8
-version: 0.10
----
-
-# <scroller>
-<span class="weex-version">v0.6.1+</span>
-
-A scroller is a component in vertical direction which can have multiple child components in one column. If total height of its child components exceed the height of the scroller, the whole child components will be scrollable.
-
-Notes: A <scroller> can be used as a root element or a embed element. The scroll direction of this component is column, and it can't be changed.
-
-
-**example**
-
-```html
-<template>
- <scroller onloadmore="onloadmore" loadmoreoffset="100">
- <div repeat="{{v in items}}">
- <text style="font-size: 40; color: #000000">{{v.item}}</text>
- </div>
- </scroller>
-</template>
-<script>
- module.exports = {
- data: {
- items: [],
- triggered:false
- },
- created: function () {
- for (var i = 0; i < 50; i++) {
- this.items.push({'item': 'test data' + i});
- }
- },
- methods: {
- onloadmore:function(){
- if(!this.triggered){
- for (var i = 100; i >= 50; i--) {
- this.items.push({'item':'onloadmore triggered' + i});
- }
- }
- this.triggered=true;
- }
- }
- }
-</script>
-```
-
-[try it](http://dotwe.org/acf155122b9457211165680b01fae1c2)
-
-## Child Components
-
-Scroller supports all kinds of components, such as div, text, etc.
-And there are two special components that can only be used inside scroller component.
-
-* refresh 0.6.1 used inside list to add pull-down-to-refresh functionality.
-* loading 0.6.1 used inside list to add pull-up-to-load-more functionality.
-
-
-## Attributes
-
-* show-scrollbar: true/false whether show the scroll bar or not, default value is true
-* scroll-direction: <string> define scroll direction of component, horizontal or vertical
-* loadmoreoffset : <number> default value is 0. The loadmore event will be triggered when the list is loadmoreoffset left to reach the bottom of the list view. e.g. a list has total content length of 1000, and the loadmoreoffset is set to 400, the loadmore event will be triggered when 600 has beed scrolled and there is less than 400 left.
-* loadmoreretry : <number> default value 0，whether to reset loadmore related UI when loadmore failed, will be deprecated in further release.
-
-**example**
-
-```html
-<template>
- <scroller onloadmore="onloadmore" loadmoreoffset="100">
- <div repeat="{{v in items}}">
- <text style="font-size: 40; color: #000000">{{v.item}}</text>
- </div>
- </scroller>
-</template>
-<script>
-module.exports = {
- data: {
- items: [],
- triggered:false
- },
- created: function () {
- for (var i = 0; i < 50; i++) {
- this.items.push({'item': 'test data' + i});
- }
- },
- methods: {
- onloadmore:function(){
- if(!this.triggered){
- for (var i = 100; i >= 50; i--) {
- this.items.push({'item':'onloadmore triggered' + i});
- }
- }
- this.triggered=true;
- }
- }
-}
-</script>
-```
-
-[try it](http://dotwe.org/acf155122b9457211165680b01fae1c2)
-
-
-Please checkout [Scroller Component Attributes]() to have a look at the inherited attributes from direct parent.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-
-common styles: check out [common styles for components](../common-style.html)
-
-* support flexbox related styles
-* support box model related styles
-* support position related styles
-* support opacity, background-color etc.
-
-
-## Events
-
-onloadmore used with loadmoreoffset attribute. if the view has less than loadmoreoffset to scroll down, the onloadmore event will be triggered.
-
-common events: check out the [common events](../common-event.html)
-
-* support onclick event. Check out [common events](../common-event.html)
-* support onappear / ondisappear event. Check out [common events](../common-event.html)
-
-
-
-## Restrictions
-
-Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions.
-For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal.
-
diff --git a/_drafts/v-0.10/references/components/slider.md b/_drafts/v-0.10/references/components/slider.md
deleted file mode 100644
index b1a537f..0000000
--- a/_drafts/v-0.10/references/components/slider.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: <slider>
-type: references
-order: 2.9
-version: 0.10
----
-
-# <slider>
-
-## Summary
-
-A slide's player to show slides (mostly as pictures) one page by another. The default interval between two slides is 3 seconds.
-
-## Child Components
-
-It supports all kinds of weex components as its slides, especially the `indicator` component which can be used only as a child component of `slider`.
-
-## Attributes
-
-- `auto-play`: <boolean> `true` | `false`. This value determines whether the slides plays automatically after the page rendering finished. The default value is `false`.
-- `interval`: <number> millisecond. This value determines time interval for each page displayed in slider.
-- `index`: <number> . This value determines the index of current shown slide. The default value is `0`.
-
-Other attributes please check out the [common attributes](../references/common-attrs.html).
-
-## Styles
-
-**common styles**: check out [common styles for components](../references/common-style.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-## Events
-
-- `change`: triggerd when the slide's index is changed. The event object contains the attribute of `index`, which is the index number of the currently shown slide.
-
-**common events**: check out the [common events](../references/common-event.html)
-
-- support `click` event. Check out [common events](../references/common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../references/common-event.html)
-
-### Example
-
-```html
-<template>
- <div>
- <slider class="slider" interval="3000" auto-play="true">
- <div class="slider-pages" repeat="item in itemList">
- <image class="img" src="{{item.pictureUrl}}"></image>
- <text class="title">{{item.title}}</text>
- </div>
- <indicator class="indicator"></indicator>
- </slider>
- </div>
-</template>
-
-<style>
- .img {
- width: 714;
- height: 150;
- }
- .title {
- position: absolute;
- top: 20;
- left: 20;
- color: #ff0000;
- font-size: 48;
- font-weight: bold;
- background-color: #eeeeee;
- }
- .slider {
- flex-direction: row;
- margin: 18;
- width: 714;
- height: 230;
- }
- .slider-pages {
- flex-direction: row;
- width: 714;
- height: 200;
- }
- .indicator {
- width:714;
- height:200;
- position:absolute;
- top:1;
- left:1;
- item-color: red;
- item-selectedColor: blue;
- item-size: 20;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- itemList: [
- {itemId: '520421163634', title: 'item1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
- {itemId: '522076777462', title: 'item2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
- {itemId: '522076777462', title: 'iten3', pictureUrl: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
- ]
- }
- }
-</script>
-```
diff --git a/_drafts/v-0.10/references/components/switch.md b/_drafts/v-0.10/references/components/switch.md
deleted file mode 100644
index 441da7b..0000000
--- a/_drafts/v-0.10/references/components/switch.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: <switch>
-type: references
-order: 2.11
-version: 0.10
----
-
-# <switch>
-
-<span class="weex-version">v0.6.1+</span>
-
-The weex builtin component switch is used to create and manage an IOS styled On/Off buttons, for example, the Airplane mode button in the Settings app is a switch button.
-
-**example**
-
-```html
-<template>
- <div>
- <text>muted:</text>
- <switch checked="true" onclick='onclick' onchange='onchange' ondisappear='ondisappear' onappear='onappear'></switch>
-</div>
-</template>
-
-<script>
- module.exports ={
- methods:{
- onclick:function(e){
- console.log('onclick:' + e.timestamp);
- },
- onchange:function(e){
- console.log('onchage, value:' + e.value);
- },
- ondisappear:function(e){
- console.log('ondisappear, value:' + e.value);
- },
- onappear:function(e){
- console.log('onappear, value:' + e.value);
- },
- }
- }
-</script>
-```
-
-[try it](http://dotwe.org/7306d24f4f677b6d9935dbd00e3aa981)
-
-## Child Components
-
-There are no child components for the switch component.
-
-## Attributes
-
-* checked <boolean> true|false, default value is false, indicating whether the button is on or not.
-* disabled <boolean> true|false, default value is false, indicating whether the button is enable or not.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-Notes: There are several style properties that you mustn't use on this component. And here are all the invalid properties:
-
-* width
-* height
-* min-width
-* min-height
-* margin and margin-xxs
-* padding and padding-xxs
-* border and border-xxs
-
-Notes: Specially the width and height related properties is not configurable and the size of this component is fixed to 100x60 (for the design width 750px).
-
-common styles: check out [common styles for components](../common-style.html)
-
-## Events
-
-* onappear / ondisappear event. check out [common events](../common-event.html)
-* onclick: check out [common events](../common-event.html)
-* onchange: check out [common events](../common-event.html)
-
-## Parameters of events' object for onchange event:
-
-* value: the value of the component who dispatched this event, which is the boolean value true or false.
-* timestamp: the time stamp of the event.
diff --git a/_drafts/v-0.10/references/components/text.md b/_drafts/v-0.10/references/components/text.md
deleted file mode 100644
index 308fd4a..0000000
--- a/_drafts/v-0.10/references/components/text.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: <text>
-type: references
-order: 2.12
-version: 0.10
----
-
-# <text>
-
-The weex builtin component 'text' is used to render text with specified style rule. <text> tag can contain text value only. You can use variable interpolation in the text content with the mark `{% raw %}{{}}{% endraw %}`.
-
-## Child Components
-
-This component supports no child components.
-
-## Attributes
-
-* value(string): text value of this component. This is equal to the content of 'text'.
-
-### example
-
-```
-var textComponent = this.$el("textid");
-this.text = textComponent.attr.value;
-```
-
-## Styles
-
-* lines: specify the text lines. Default value is `0` for unlimited.
-* text styles: check out [text styles](../text-style.html)
-
- * support 'color' style.
- * support 'font-size' style. iOS: default vlaue `32`. Android: platform specify. HTML5: default value `32`.
- * support 'font-style' style.
- * support 'font-weight' style.
- * support 'text-align' style.
- * support 'text-decoration' style.
- * support 'text-overflow' style.
- * support 'line-height'(available from v0.6.1) style. line-height in iOS is different from h5 and Android, text value will be placed at bottom of line box.
- * not support 'flex-direction, 'justify-content', 'align-items' which is active for child nodes, and text has no child nodes.
-
-### common styles
-check out [common styles for components](../common-style.html)
-
-* support flexbox related styles.
-* support box model related styles.
-* support 'position' related styles.
-* support 'opacity', 'background-color' etc.
-
-## Events
-
-### common events
-check out [common events](../common-event.html)
-
-* support 'click' event.
-* support 'appear' / 'disappear' event.
-
-## Example
-
-```html
-<template>
- <div>
- <text>this is text content</text>
- <text value="this is text value"></text>
- <text style="text">{{price1}}</text>
- <text id="textid" onclick={{showtext}}>this is gettext content</text>
- <text value="{{text}}"></text>
- </div>
-</template>
-
-<style>
- .text {
- font-size: 24;
- text-decoration: underline;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- price1: '99.99',
- price2: '88.88',
- text:''
- },
- methods: {
- showtext: function(event) {
- var textComponent = this.$el("textid");
- this.text = textComponent.attr.value;
- }
- }
- };
-</script>
-```
-[Try it](http://dotwe.org/48f4d7c50245145c72c33161e2bb4325)
diff --git a/_drafts/v-0.10/references/components/textarea.md b/_drafts/v-0.10/references/components/textarea.md
deleted file mode 100644
index 2645385..0000000
--- a/_drafts/v-0.10/references/components/textarea.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: <textarea>
-type: references
-order: 2.13
-version: 0.10
----
-
-# <textarea>
-<span class="weex-version">v0.8+</span>
-
-
-### Summary
-
-The weex builtin component `textarea` is used to create interactive controls to accept data from users. It can be a multi-line [input](./input.html).
-
-**Notes:** `<textarea>` support all event which `<input>` had.
-
-### Child Components
-
-This component supports no child components.
-
-### attributes
-
-- `value`: <string> the value of the control.
-- `placeholder`: <string> a hint to the user of which can be entered to the control. The placeholder text must have no carriage returns or line-feeds.
-- `disabled`: <boolean> a boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls.
-- `autofocus`: <boolean> a boolean attribute lets you specify that a form control should have input focus when the page loads.
-- `rows:`<number> a number which can specify the height of textarea, default is `2`.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-### Styles
-
-**text styles**: checkout [text styles](../text-style.html)
-
-- support `color` style.
-- support `font-size` style.
-- support `font-style` style.
-- support `font-weight` style.
-- support `text-align` style.
-
-
-**common styles**: check out [common styles for components](../common-style.html)
-
-- support flexbox related styles.
-- support box model related styles.
-- support ``position`` related styles.
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-- `input`: the value of an element changes.
-- `change`: the change event is fired when a change to the component's value is commited by the user. It always come after a ``blur`` event.
-- `focus`: a component has received focus.
-- `blur`: a component has lost focus.
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `appear` / `disappear` event. Check out [common events](../common-event.html).
-
-**Notes:** `<textarea>` does not support the common-event `click`. Please listen to the `input` or `change` event instead.
-
-### Parameters of events' object
-
-- for ``input`` and ``change`` events:
- - `value`: the value of the component who dispatched this event.
- - `timestamp`: the time stamp of the event.
-- for ``focus`` and ``blur`` events:
- - `timestamp`: the time stamp of the event.
-
-### Example
-
-```html
-<div>
- <textarea
- autofocus="true"
- placeholder="..."
- value="I am a multiple input">
- </textarea>
-</div>
-```
diff --git a/_drafts/v-0.10/references/components/video.md b/_drafts/v-0.10/references/components/video.md
deleted file mode 100644
index fa4384e..0000000
--- a/_drafts/v-0.10/references/components/video.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: <video>
-type: references
-order: 2.14
-version: 0.10
----
-
-# <video>
-<span class="weex-version">v0.6.1+</span>
-
-The video component can be used to embed video content in a weex page.
-
-**example**
-
-```html
-<template>
- <div>
- <text>Big Eater!</text>
- <video onstart='onstart' onpause='onpause' onfinish='onfinish' onfail='onfail'
- auto-play="false" play-status="pause" src="{{src}}" style="width:750;height:500;"></video>
-</div>
-
- </div>
-</template>
-
-<script>
- module.exports ={
- data: {
- src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
- },
- methods:{
- onstart:function(e){
- console.log('onstart');
- console.log(e);
- },
- onpause:function(e){
- console.log('onpause');
- },
- onfinish:function(e){
- console.log('onfinish');
- },
- onfail:function(e){
- console.log('onfail');
- },
- }
- }
-</script>
-```
-
-[try it](http://dotwe.org/97938570cddf76c792a1a5f9542253b1)
-
-## Child Components
-* text is the only valid type of child component.
-
-## Attributes
-
-* src: <string> The URL of the video to embed.
-* play-status: <boolean> play | pause. Use it to control video's play/pause status. Default value is pause.
-* auto-play: <boolean> true | false. Use it to control whether it is playing when the page initialization finished. Defalut value is false.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-common styles: check out [common styles for components](../common-style.html)
-
-* support flexbox related styles
-* support box model related styles
-* support position related styles
-* support opacity, background-color etc.
-
-## Events
-* onstart: triggered when playback state is Playing.
-* onpause: triggered when playback state is Paused.
-* onfinish: triggered when playback state is Finished.
-* onfail: triggered when playback state is Failed.
diff --git a/_drafts/v-0.10/references/components/web.md b/_drafts/v-0.10/references/components/web.md
deleted file mode 100644
index 89d47c7..0000000
--- a/_drafts/v-0.10/references/components/web.md
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: <web>
-type: references
-order: 2.15
-version: 0.10
----
-
-# <web>
-<span class="weex-version">v0.5+</span>
-
-Use web component to display any web content in the weex page. The `src`attribute is used to specify a special source. You also can use `webview` module to control some web operation such as goBack,goForward and reload. see [webview module](https://alibaba.github.io/weex/doc/modules/webview.html).For example,You can use web component and webview module to assemble a browser.
-
-## Child Components
-
-This component supports no child components.
-
-## Attributes
-
-**src**(string): this attribute specifies the page source to load.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-
-**width**(float): the width of the component, default value is 0. This style must be specified.
-
-**height**(float): the height of the component, default value is 0. This style must be specifed.
-
-
-### common styles
-
-check out the [common styles](../common-attrs.html).
-
-support flexbox related styles
-support box model related styles
-support `position` related styles
-
-## Events
-
-**pagestart**: sent after the web component starts loading a page.
-**pagefinish**: sent after the web component finishes loading a page.
-**error**: sent if the web component failed to load a page.
-
-### common events
-
-support `appear` / `disappear` event.
-
-Check out [common events](../common-event.html)
-
-### Notes
-not support `click` event.
-
-## Example
-
-We use a simple Browser Demo to show how to use web component and webview module. Check out [webview module](../modules/webview.html).
-
-
-```html
-<template>
- <div class="browserStyle">
- <div style="flex-direction: row">
- <input id="urlInput" type="url" autofocus="false" placeholder="..." class="textStyle" value="{{input_text}}" oninput="input">
- </input>
- </div>
- <div style="flex-direction: row">
- <wxc-button value="LoadURL" class="buttonSytle" size="small" onclick="loadURL"></wxc-button>
- <wxc-button value="Backward" class="buttonSytle" size="small" onclick="backforward"></wxc-button>
- <wxc-button value="Forward" class="buttonSytle" size="small" onclick="forward"></wxc-button>
- </div>
- <div>
- <web id="webview" src="{{src}}" class="webStyle"></web>
- </div>
- </div>
-</template>
-
-<style>
-
- .browserStyle
- {
- width:600;
- height: 825;
- background-color:#778899 ;
- }
-
- .textStyle
- {
- width:600;
- height: 50;
- background-color: #D3D3D3;
- }
-
- .buttonSytle
- {
- width:180;
- height: 50;
- font-size: 12;
- background-color: #D3D3D3;
- margin:10;
- padding-left: 5;
- padding-right: 5;
- }
-
- .webStyle
- {
- width:600;
- height: 700;
- background-color: #8B0000;
- }
-
-</style>
-
-<script>
-
- var web_module = require('@weex-module/webview');
-
- module.exports = {
- data: {
- src : "https://h5.m.taobao.com",
- input_text:"https://www.tmall.com"
- },
-
- methods: {
-
- loadURL: function (e) {
- var web_element = this.$el('webview');
- var input = this.$el("urlInput");
- this.src = this.input_text;
- web_module.reload(web_element);
- },
-
- backforward: function (e) {
- var web_element = this.$el('webview');
- web_module.goBack(web_element);
- this.input_text = web_element.attr.src;
- },
-
- forward: function (e) {
- var web_element = this.$el('webview');
- web_module.goForward(web_element);
- this.input_text = web_element.attr.src;
- },
- input:function (e) {
- var input = this.$el("urlInput");
- this.input_text = input.attr.value;
- }
-
- }
- }
-</script>
-```
-
-[Try it](http://dotwe.org/103d472645206cc1564f49717585abb4)
diff --git a/_drafts/v-0.10/references/components/wxc-navpage.md b/_drafts/v-0.10/references/components/wxc-navpage.md
deleted file mode 100644
index 0ae7eba..0000000
--- a/_drafts/v-0.10/references/components/wxc-navpage.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: <wxc-navpage>
-type: references
-order: 2.16
-version: 0.10
----
-
-# <wxc-navpage>
-
-### Summary
-
-The "wxc-navpage" tag implements a specialized component that contains a navbar at the top of the window and an embed content page. You can customize the navbar as you like. In addition, you can use `navigator` module to control the page jump, see [navigator module](../modules/navigator.html).
-
-### Child Components
-
-This type of component supports all kinds of weex component as its child components.
-
-### Attributes
-
-- `height`: <length> The height of the navbar. Default value is 88.
-- `background-color`: <color>The backgroudColor of the navbar. Default value is `white`.
-- `title`: <string> The title of the navbar.
-- `title-color`: <color>The color of the navbar title. Default value is `black`.
-- `left-item-title`: <string> The title of the leftItem.
-- `left-item-color`: <color> The color of the leftItem title. Default value is `black`.
-- `right-item-title`: <string> The title of the rightItem.
-- `right-item-color`: <color> The color of the rightItem title. Default value is `black`.
-- `left-item-src`: <string> The imageURL of the leftItem you want to set.
-- `right-item-src`: <string> The imageURL of the rightItem you want to set.
-
-Other attributes please check out the [common attributes](../references/common-attrs.html).
-
-### Styles
-
-**common styles**: check out the [common styles](../references/common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-- `naviBar.leftItem.click`: triggered when the leftItem of navbar is clicked. You need to register the observer in ready or create block.
-- `naviBar.rightItem.click`: triggered when the rightItem of navbar is clicked. You need to register the observer in ready or create block.
-
-**common events**: check out the [common events](../references/common-event.html)
-
-- support `click` event. Check out [common events](../references/common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../references/common-event.html)
-
-### Example
-
-```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>
-```
diff --git a/_drafts/v-0.10/references/components/wxc-tabbar.md b/_drafts/v-0.10/references/components/wxc-tabbar.md
deleted file mode 100644
index 944b06d..0000000
--- a/_drafts/v-0.10/references/components/wxc-tabbar.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: <wxc-tabbar>
-type: references
-order: 2.17
-version: 0.10
----
-
-# <wxc-tabbar>
-
-The `wxc-tabbar` is a custom component, which belongs to the `weex-components` node package, implements a specialized component that corresponds to the radio-style selection. It displays tabs at the bottom of the window for switching between different tab pages.
-
-Usage: You can use this component by a `require` statement, `require('weex-components');`, in the script tag. e.g.
-
-```html
-<template>
- <div style="flex-direction: column;">
- <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar>
- </div>
-</template>
-
-<script>
- require('weex-components');
- // Other javascript statements.
-</script>
-```
-
-Before requiring `weex-components'`, you need to specify `weex-components` dependency in your project's package.json file. e.g.
-
-```json
-"dependencies": {
- "weex-components": "^0.2.0"
-}
-```
-
-## Child Components
-
-`wxc-tabbar` has no child components.
-
-
-## Attributes
-
-* `selected-index` : <number> default value is 0
-* `selected-color`: <color> The color of the title when it is selected. Default is red color.
-* `unselected-color`: <color> The color of the title when it is unselected. Default is black color.
-* `tab-items` This attribute accepts an array of `tabitem` objects, each of which corresponds to the tab pages. And the order of the items equals to the order of the tab pages onscreen. You can configure the appearance of tabbar by setting the tabitem object's properties. Each tabitem properties are listed as below:
- * `index`: <integer> This attribute is required, and it specifies the order of the item.
- * `title`: <string> The item’s title. and it is optional. The tile will not be displayed if empty or not provided.
- * `titleColor`: <color>The item’s titleColor. Default is black color.
- * `image`: <string>The icon displayed when the tabitem is unselected. The image will not be displayed if empty or not provided.
- * `selectedImage` : <string>The icon displayed when the tabitem is selected. The icon will not be displayed if empty or not provided.
- * `src` : <string> The weex page for the tab page.
- * `visibility`: <string>visible | hidden. This attribute specifies display status of the tab page. Default value is visible.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-common styles: check out [common styles](../common-style.html) for components
-
-* support flexbox related styles
-* support box model related styles
-* support position related styles
-* support opacity, background-color etc.
-
-## Events
-* `tabBar.onClick`: triggered when the tabitem is selected. You need to register the observer in ready or create block.
-e.g.
-
-
-```html
-<template>
- <div style="flex-direction: column;">
- <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar>
- </div>
-</template>
-
-<script>
- require('weex-components');
- module.exports = {
- data: {
- },
- methods: {
- ready: function (e) {
- var vm = this;
- vm.$on('tabBar.onClick',function(e){
- var index = e.detail.index;
- });
- },
- }
- }
-</script>
-```
-
-## Example
-You should checkout the playground's `tabbar` example.
diff --git a/_drafts/v-0.10/references/gesture.md b/_drafts/v-0.10/references/gesture.md
deleted file mode 100644
index fc41fd4..0000000
--- a/_drafts/v-0.10/references/gesture.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: Gesture
-type: references
-order: 1.4
-version: 0.10
----
-
-# Gesture
-
-> Experiment Feature
-
-Weex encapsulates native touch events to provide a gesture system. Using gesture is similar to use event in Weex. Just set `on` attributes on a node to listen to gesture.
-
-## Type
-For now, there are four types of gestures:
-
-* **Touch**. Touch gesture is fired when a touch point is placed, moved or removed from the touch surface. Touch gesture is accuracy as it will report every trivial event. As a result, listening to touch gesture may be slow, a great deal of events needs to be processed even a small move happened. There are three types of Touch gesture:
- * `touchstart` will be fired when a touch point is placed on the touch surface.
- * `touchmove` will be fired when a touch point is moved along the touch surface.
- * `touchend` will be fired when a touch point is removed from the touch surface.
-* **Pan**. Pan gesture also report motion of touch point on the touch surface, which is similar to touch gesture. But Pan gesture is sampled and faster than the touch event. As consequence, it is less accuracy than touch gesture. There are also three types of Pan gesture, and the meaning of these types is very close to types of Touch.
- * `panstart`
- * `panmove`
- * `panend`
-* **Swipe**. Swipe is fired when user swipe a touch point on the screen. A serial of motion will only trigger one Swipe gesture.
-* **LongPress**. Swipe is fired when a touch point is held for 500 ms or more.
-
-The Touch gesture and Pan is very close to each other, with following features hold:
-
-* **Touch**. Not sampled, accuracy, but slow.
-* **Pan**. Sampled, fast, less accuracy.
-
-Users may choose their gesture according to their situation.
-
-## Properties
-The following properties can be used in gesture callback:
-
-* `direction`. Only exists for **Swipe** gesture. Indicate the direcion of the swipe, choose from `up`, `left`, `bottom`, `right`.
-* `changedTouches`. An array of motion for every touch pointer that has contribute to the current gesture.
-
-### changedTouches
-
-`changedTouches` is an array, with the following properties in its children:
-
-* `identifier`. A unique identifier for a touch pointer.
-* `pageX`. The X coordinate of the touch pointer relative to the left edge of the document.
-* `pageY`. The Y coordinate of the touch pointer relative to the top of the document.
-* `screenX`. The X coordinate of the touch point relative to the left edge of the screen.
-* `screenY`. The Y coordinate of the touch point relative to the top edge of the screen.
-
-## Constrain
-Currently, Weex Android do not support listening to gesture on `scroller`, `list` and `webview`, as it would lead a large amount of event conflicting.
-
-## How to use
-
-Example:
-
-```html
-<template>
- <div ontouchstart="handleTouchstart"></div>
-</template>
-
-<script>
-module.exports = {
- methods: {
- handleTouchstart: function(eventProperties) {
- // handling with the Event Properties
- }
- }
-}
-</script>
-```
-
-With the code above, a `touchstart` event will be fired when a touch point is placed on the touch surface.
diff --git a/_drafts/v-0.10/references/images/css-boxmodel.png b/_drafts/v-0.10/references/images/css-boxmodel.png
deleted file mode 100644
index a2063e2..0000000
--- a/_drafts/v-0.10/references/images/css-boxmodel.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/references/images/css-flexbox-align.jpg b/_drafts/v-0.10/references/images/css-flexbox-align.jpg
deleted file mode 100644
index 8a7f731..0000000
--- a/_drafts/v-0.10/references/images/css-flexbox-align.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/references/images/css-flexbox-justify.svg b/_drafts/v-0.10/references/images/css-flexbox-justify.svg
deleted file mode 100644
index 33e742b..0000000
--- a/_drafts/v-0.10/references/images/css-flexbox-justify.svg
+++ /dev/null
@@ -1,59 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width='504' height='270' viewBox="0 0 504 270">
- <defs>
- <pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
- <rect x='0' y='0' width='10' height='10' fill='#eee' />
- <rect x='10' y='10' width='10' height='10' fill='#eee' />
- <rect x='0' y='10' width='10' height='10' fill='#ccc' />
- <rect x='10' y='0' width='10' height='10' fill='#ccc' />
- </pattern>
- </defs>
- <style>
- text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
- rect { stroke-width: 2px; stroke: #888; }
- g > rect:nth-child(1) { fill: #888 }
- g > rect:nth-child(2) { fill: #fcc; }
- g > rect:nth-child(3) { fill: #cfc; }
- g > rect:nth-child(4) { fill: #ccf; }
- g > rect:nth-child(5) { fill: transparent; }
- </style>
- <g transform="translate(2,2)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='0' y='0' width='100' height='50' />
- <rect x='100' y='0' width='80' height='50' />
- <rect x='180' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>flex-start</text>
- </g>
- <g transform="translate(2,56)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='120' y='0' width='100' height='50' />
- <rect x='220' y='0' width='80' height='50' />
- <rect x='300' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>flex-end</text>
- </g>
- <g transform="translate(2,110)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='60' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='240' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>center</text>
- </g>
- <g transform="translate(2,164)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='0' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='300' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>space-between</text>
- </g>
- <g transform="translate(2,218)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='20' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='280' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>space-around</text>
- </g>
-</svg>
\ No newline at end of file
diff --git a/_drafts/v-0.10/references/images/css-flexbox-sample.png b/_drafts/v-0.10/references/images/css-flexbox-sample.png
deleted file mode 100644
index 0f1236d..0000000
--- a/_drafts/v-0.10/references/images/css-flexbox-sample.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/references/images/nav.png b/_drafts/v-0.10/references/images/nav.png
deleted file mode 100644
index 7081ca7..0000000
--- a/_drafts/v-0.10/references/images/nav.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/references/index.md b/_drafts/v-0.10/references/index.md
deleted file mode 100644
index d59d654..0000000
--- a/_drafts/v-0.10/references/index.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Bootstrap
-type: references
-order: 1
-has_chapter_content: false
-chapter_title: Common Options
-version: 0.10
----
-
-# Bootstrap
-
-Besides its default meaning, `<script>` tag supports two more configuration with its `type` property *in the top level component of a page*.
-
-* `type="data"`: For initial data configuration, the data defined here will overwrite the data definition in the `<script>`.
-* `type="config"`: For configuration definition.
-
-```html
-<script type="data">
- /* (optional) the definition of initial data */
-</script>
-
-<script type="config">
- /* (optional) the definition of configuration */
-</script>
-```
-
-## Initial data definition
-
-Sometimes, it is hard to maintain huge data structure in the default `<script>` tag. So Weex allows us to have a `<script type="data">` tag to define initial data. The data defined in here will totally replace the data defined in the default `<script>` tag.
-
-here is an example:
-
-```html
-<script type="data">
-{
- title: 'Alibaba',
- date: new Date().toLocaleString()
-}
-</script>
-```
-
-## script configuration
-
-Weex also allows us to do some configuration with a `<script type="config">`, So far, we only support the `downgrade` configs.
-
-- `downgrade.osVersion`
-- `downgrade.appVersion`
-- `downgrade.weexVersion`
-- `downgrade.deviceModel`
diff --git a/_drafts/v-0.10/references/modules/animation.md b/_drafts/v-0.10/references/modules/animation.md
deleted file mode 100644
index 4b46564..0000000
--- a/_drafts/v-0.10/references/modules/animation.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: animation
-type: references
-order: 3.1
-version: 0.10
----
-
-# animation
-
-Smooth and meaningful animation is very effective for enhancing the user experience of mobile application, you can use the `animation` module to perform animation on components. A animation can perform a series of simple transformations (position, size, rotation, background color, and opacity) on the component. So, if you have a `image` component, you can move, rotate, grow, or shrink it.
-
-## API
-### transition(node, options, callback)
-
-[example](http://dotwe.org/5be74019d5e510fa95c5dedec24f7ce5)
-
-#### Arguments
-##### node
-
-**type:** node
-
-**position:** An element that will be animated, normally you can get this by calling `this.$el(id)`.
-
-##### options
-
-**type:** object
-
-**position:** Transition options.
-- `duration` (number): Specifies the number of milliseconds of animation execution, the default value is `0`, means that no animation will occur.
-- `delay` (number): Specifies the amount of milliseconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. The default value is `0`.
-- `timingFunction` (string): Used to describe how the intermediate values of the styles being affected by a transition effect are calculated, default value is `linear`, the allowed attributes are listed in the following table:
-
-|name|description|example|
-|:--|:--|:--|
-|`linear`|Specifies a transition effect with the same speed from start to end|[example](http://dotwe.org/d71491ded2bede32df3e8b44b53d5e4f)|
-|`ease-in`|Specifies a transition effect with a slow start|[example](http://dotwe.org/23b104f833039f263957481f2e2c40c9)|
-|`ease-out`|Specifies a transition effect with a slow end|[example](http://dotwe.org/04dab95e073a2c3a808e6b01fc20e996)|
-|`ease-in-out`|Specifies a transition effect with a slow start and end|[example](http://dotwe.org/fc37ec17d215e786ce336a00457489e3)|
-|`cubic-bezier(x1, y1, x2, y2)`|Define your own values in the cubic-bezier function. Possible values are parameter values from 0 to 1. More information about cubic-bezier please visit [cubic-bezier](http://cubic-bezier.com/) and [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve).|[example](http://dotwe.org/95d8f15d0014c31d3a1d15728313f2a5)|
-
-- `styles` (object): Specify the names and values of styles to which a transition effect should be applied. The allowed attributes are listed in the following table:
-
-| name | description | value type | default value |example|
-| :--- | :--- | :--- | :--- |:---|
-|width|The width applied to the component after the animation finished.|length|none|[example](http://dotwe.org/b599d273f996cfdcbeca7bd5c828ca90)|
-|height|The height applied to the component after the animation finished.|length|none|[example](http://dotwe.org/d0b1ccadf386ba00960d0c8340c682e5)|
-|backgroundColor|The background color applied to the component after the animation finished.|string|none|[example](http://dotwe.org/f4616ee18f6042b63a8fdcd2816b1712)|
-|opacity|The opacity applied to the component after the animation finished.|number between 0 to 1|`1`|[example](http://dotwe.org/f94394173301db83ae6e66d1330a0d0b)|
-|transformOrigin|The povit of transition. The possible values for `x-aris` are `left`/`center`/`right`/length or percent, and possible values of `y-axis` are `top`/`center`/`bottom`/ length or percent|`x-axis y-axis`|`center center`|[example](http://dotwe.org/de43f5a47de230dd531797458bf7fd3c)|
-|transform|Transform function to be applied to the element. The properties in the following table are supported|object|none|[example](http://dotwe.org/cfc0388441f5a53a73335885006c13e7)|
-
-properties of `transform`:
-
-| name | description | value type | default value |example|
-| :--- | :--- | :--- | :--- |:---|
-|translate/translateX/translateY|Specifies the location of which the element will be translated.|pixel or percent|none|[example](http://dotwe.org/6638e66e296723bbef3e59c83b2b5003)|
-|rotate|Specifies the angle of which the element will be rotated, the unit is degree.|number|none|[example](http://dotwe.org/ba9e9920594d9388744b2bd0d1b7695d)|
-|scale/scaleX/scaleY|Stretch or shrink the element.|number|none|[example](http://dotwe.org/14b42dde6583ab222bd2b7ed08f241c8)|
-
-#### callback
-**type:** function
-
-**position:** Callback which is called after the completion of transition.
\ No newline at end of file
diff --git a/_drafts/v-0.10/references/modules/clipboard.md b/_drafts/v-0.10/references/modules/clipboard.md
deleted file mode 100644
index d0f45e7..0000000
--- a/_drafts/v-0.10/references/modules/clipboard.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: clipboard
-type: references
-order: 3.2
-version: 0.10
----
-
-# clipboard
-<span class="weex-version">v0.8+ (developing)</span>
-
-clipboard allows you to `getString()` or `setString()` from the system clipboard.
-
-Not long ago, We're still suffering from such a situation that we got a verification code sent by SMS, and we had no way to get the code from the SMS text but to typed it by our hands. How frustrated it is! But now you can enable your app to get the code from the system clipboard by calling `clipboard.getString()` .
-
-## Caution
-
-* only support text.
-* only works on Android and iOS. NOT works for html5, for web security reason.
-
-## API
-
-### getString(callback)
-
-reads from clipboard.
-
-##### Arguments
-
-`callback(function)`: the callback function after executing this action. `data` is the return value.
-
-Example
-
-```js
-var clipboard = require('@weex-module/clipboard');
-clipboard.getString(function(ret) {
- // callback. 'ret' is an object that contains 'result' and 'data'.
- // use 'ret.data' to fetch the value.
- console.log("read from clipboard is " + ret.data);
-});
-
-```
-### setString(text)
-
-sets the text to clipboard, having the same effect as copying manually.
-
-##### Arguments
-
-`text(string)`: the text copied to clipboard.
-Example
-
-```js
-var clipboard = require('@weex-module/clipboard');
-clipboard.setString("SomeStringHere");
-```
diff --git a/_drafts/v-0.10/references/modules/dom.md b/_drafts/v-0.10/references/modules/dom.md
deleted file mode 100644
index 948abf0..0000000
--- a/_drafts/v-0.10/references/modules/dom.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: dom
-type: references
-order: 3.3
-version: 0.10
----
-
-# dom
-
-## Summary
-
-A series of dom apis that sending virtual-dom's messages to the native renderer to update the dom tree. The only API for developers to use in a `.we` file is `scrollToElement` <del>which you can use by calling the `$scrollTo` method</del>. Other APIs mentioned on this page should only be used through the native renderer in the `callNative` process.
-
-## API
-
-### scrollToElement(node, options)
-
-Scroll the page to the specified node. This API should only be used on the element in the `scroller` or `list` component.
-
-<del>This API can be used by calling the VM's method `$scrollTo` **(deprecated)**.</del> You can use `require('@weex-module/dom').scrollToElement` to call this API in your `.we` file.
-
-#### Arguments
-
-* `node`*(Node)*: an element that scrolled into the view.
-* `options`*(object)*: some options.
- * `offset`*(number)*: An offset to the visible position, default is `0`.
-
-#### Example
-
-```javascript
-var dom = require('@weex-module/dom');
-dom.scrollToElement(this.$el('someId'), {offset: 10});
-```
-
-### createBody(element)
-
-Create the body for the whole dom tree. Element type should only be the ones that can be used as roots (`div`, `scroller` and `list`).
-
-#### Arguments
-
-* `element`*(object)*: a object that specified the body node info like ref, type, children, etc.
-
-### addElement(parentNode, element, index)
-
-Add a element into the dom tree.
-
-#### Arguments
-
-* `parentNode`*(Node)*: specify the element's parent node.
-* `element`*(object)*: a object that specified the config info for the node to be added.
-* `index`*(number)*: insert the element to the specified position.
-
-### removeElement(node)
-
-Remove a node in the dom tree.
-
-#### Arguments
-
-* `node`*(Node)*: the node to be removed.
-
-### moveElement(node, parentNode, index)
-
-Move a exsited node into another parent (or the same parent) before the specified position.
-
-#### Arguments
-
-* `node`*(Node)*: the node to be moved.
-* `parentNode`*(Node)*: the parent node to move into.
-* `index`*(number)*:: according to the specified position index, will the node be inserted into.
-
-### addEvent(node, type)
-
-Inform the renderer that there are listeners for a specified event type.
-
-#### Arguments
-
-* `node`*(Node)*: the node to be listened on.
-* `type`*(string)*: which type of events the node should be listened for.
-
-### removeEvent(node, type)
-
-Remove event listeners on the specified node for the specified event type.
-
-#### Arguments
-
-* `node`*(Node)*: on which node should the listeners to be removed
-* `type`*(string)*: specify the event type.
-
-### updateAttrs(node, attr)
-
-Update attrbutes of the specified node.
-
-#### Arguments
-
-* `node`*(Node)*: the node to be updated.
-* `attr`*(object)*: the attributes object with the attribute items to be updated.
-
-### updateStyle(node, style)
-
-Update styles of the specified node.
-
-#### Arguments
-
-* `node`*(Node)*: the node to be updated.
-* `style`*(object)*: the style object with the style rules to be updated.
-
-### createFinish()
-
-Notify native renders that the series of messages for updating the native dom tree have reached a end.
-
-### refreshFinish()
-
-Notify native renders that the series of messages for refreshing a native dom tree have reached a end.
-
diff --git a/_drafts/v-0.10/references/modules/globalevent.md b/_drafts/v-0.10/references/modules/globalevent.md
deleted file mode 100644
index 0db8c48..0000000
--- a/_drafts/v-0.10/references/modules/globalevent.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: globalEvent
-type: references
-order: 3.10
-version: 0.10
----
-
-# globalEvent
-<span class="weex-version">v0.8+ (developing)</span>
-
-## Summary
-
-`globalEvent` are used to listen for persistent events, such as changes in positioning information, gyroscopes, and so on. A global event is a secondary API that requires additional APIs to work with.
-
-You can register events via `addEventListener`, which can be removed by `removeEventListener` when you do not need to listen for `globalEvent`.
-
-*AUCTION*
-- Only instance level is not application level .
-
-## How to make your Module support global events
-API development is complete, when the event needs to be sent, the need through the following methods:
-
-```javascript
-/**
- *
- * @param eventName eventName
- * @param params event params
- */
-instance.fireGlobalEventCallback(eventName,params);
-```
-
-How to dispatch a global event in a weex-html5 component or module ? Just dispatch the event on the document element:
-
-```javascript
-var evt = new Event('some-type')
-evt.data = { foo: 'bar' }
-document.dispatchEvent(evt)
-```
-
-### Example
-
-#### Android
-
-```java
-Map<String,Object> params=new HashMap<>();
-params.put("key","value");
-mWXSDKInstance.fireGlobalEventCallback("geolocation",params);
-```
-#### iOS
-
-```Objective-C
-[weexInstance fireGlobalEvent:@"geolocation" params:@{@"key":@"value"}];
-```
-
-## API
-
-### addEventListener(String eventName, String callback)
-
-register global event.
-
-#### Arguments
-
-* `eventName`*(string)*: The name of the event you want to listen to.
-* `callback`*(function)*: the callback function after executing this action.
-
-#### Example
-
-```javascript
-var globalEvent = require('@weex-module/globalEvent');
-globalEvent.addEventListener("geolocation", function (e) {
- console.log("get geolocation")
- });
-```
-
-### removeEventListener(String eventName)
-
-remove global event
-
-#### Arguments
-
-* `eventName`*(string)*: You no longer need to listen for event names.
-
-#### Example
-
-```javascript
-var globalEvent = require('@weex-module/globalEvent');
-globalEvent.removeEventListener("geolocation");
-```
-
diff --git a/_drafts/v-0.10/references/modules/index.md b/_drafts/v-0.10/references/modules/index.md
deleted file mode 100644
index 2a094ca..0000000
--- a/_drafts/v-0.10/references/modules/index.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Built-in Modules
-type: references
-order: 3
-has_chapter_content: true
-version: 0.10
----
-
-# Built-in Modules
-
-## How to use
-
-You can use a simply way like `require('@weex-module/name')` to access the apis of module. e.g.
-
-```html
-<script>
-var dom = require('@weex-module/dom')
-
-module.exports = {
- data: {},
- created: function () {
- dom.scrollToElement(this.$el('someIdForElement'), {
- offset: 0
- })
- }
-}
-</script>
-```
\ No newline at end of file
diff --git a/_drafts/v-0.10/references/modules/modal.md b/_drafts/v-0.10/references/modules/modal.md
deleted file mode 100644
index 2ebad15..0000000
--- a/_drafts/v-0.10/references/modules/modal.md
+++ /dev/null
@@ -1,192 +0,0 @@
----
-title: modal
-type: references
-order: 3.4
-version: 0.10
----
-
-# modal
-
-Weex provides a series of message boxes: `toast`, `alert`, `confirm` and `prompt`.
-
-## API
-### toast(options)
-
-A toast provides simple feedback about an operation in a small popup. For example, navigating away from an email before you send it triggers a "Draft saved" toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout.
-
-#### Arguments
-- `options` (object): toast options.
- - `message` (string): the text message that the toast shows.
- - `duration` (number): the duration(seconds) that the toast shows.
-
-**Example:**
-
-```html
-<template>
- <div style="height: 200px; width: 400px; background-color: #00bfff;
- justify-content: center; align-items: center" onclick="{{perform}}">
- <text style="font-size: 60px; color: #ffffff">Toast</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- methods: {
- perform: function () {
- var modal = require('@weex-module/modal');
- modal.toast({
- 'message': 'I am a toast',
- 'duration': 3
- });
- }
- }
- }
-</script>
-```
-### alert(options, callback)
-
-An alert box is often used if you want to make sure information comes through to the user.
-When an alert box pops up, the user will have to click "OK" to proceed.
-
-#### Arguments
-
-- `options` (object): alert box options.
- - `message` (string): the text message that the alert shows.
- - `okTitle` (string): the text of positive button, default is 'OK'.
- - `callback` (function): callback when complete.
- This method has a callback function whose arguments will be:
-- `result` (string): the title text of the confirm button that clicked by user.
-
-**Example:**
-
-```html
-<template>
- <div>
- <div style="height: 200px; width: 400px; background-color: #00bfff;
- justify-content: center; align-items: center" onclick="{{perform}}">
- <text style="font-size: 60px; color: #ffffff">Alert</text>
- </div>
- <text>{{params}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- params: ''
- },
- methods: {
- perform: function () {
- var modal = require('@weex-module/modal');
- var self = this;
- modal.alert({
- 'message': 'I am alert message',
- 'okTitle' : 'YES'
- }, function (result) {
- self.params = String(result)
- });
- }
- }
- }
-</script>
-```
-
-### confirm(options, callback)
-A confirm box is often used if you want the user to verify or accept something.
-
-When a confirm box pops up, the user will have to click either confirm or cancel button to proceed.
-
-#### Arguments
-- `options` (object): confirm box options.
- - `message` (string): the message that the confirm shows.
- - `okTitle` (string): the title of confirm button, default is 'OK'.
- - `cancelTitle` (string): the title of cancel button, default is 'Cancel'.
-- `callback` (function): callback when complete.
-
-This method has a callback function whose arguments will be:
-- `result`(string): the title text of the button that clicked by user.
-**Example:**
-
-```html
-<template>
- <div>
- <div style="height: 200px; width: 400px; background-color: #00bfff;
- justify-content: center; align-items: center" onclick="{{perform}}">
- <text style="font-size: 60px; color: #ffffff">Confirm</text>
- </div>
- <text>{{params}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- params: ''
- },
- methods: {
- perform: function () {
- var modal = require('@weex-module/modal');
- var self = this;
- modal.confirm({
- 'message': 'I have read and accept the terms.',
- 'okTitle' : 'YES',
- 'cancelTitle' : 'NO'
- }, function (e) {
- self.params = String(e)
- });
- }
- }
- }
-</script>
-```
-
-### prompt(options, callback)
-
-A prompt box is often used if you want the user to input a value before entering a page.
-When a prompt box pops up, the user will have to click either confirm or cancel button to proceed after entering an input value.
-
-#### Arguments
-- `options` (object): some options.
- - `message` (string): the message that the prompt shows.
- - `okTitle` (string): the title text of confirm button, default is 'OK'.
- - `cancelTitle` (string): the title text of cancel button, default is 'Cancel'.
-- `callback` (function): callback when complete.
- This method has a callback function whose arguments will be:
-- `ret` (object): the argument will be a object, which has attributes `result` and `data`, like `{ result: 'OK', data: 'hello world' }`
- - `result` (string): the title of the button that clicked by user.
- - `data` (string): the value of the text that entered by user.
-
-**Example:**
-
-```html
-<template>
- <div>
- <div style="height: 200px; width: 400px; background-color: #00bfff;
- justify-content: center; align-items: center" onclick="{{perform}}">
- <text style="font-size: 60px; color: #ffffff">Prompt</text>
- </div>
- <text>{{params}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- params: ''
- },
- methods: {
- perform: function () {
- var modal = require('@weex-module/modal');
- var self = this;
- modal.prompt({
- 'message': 'I am a prompt',
- 'okTitle' : 'YES',
- 'cancelTitle' : 'NO'
- }, function (e) {
- self.params = JSON.stringify(e)
- });
- }
- }
- }
-</script>
-```
\ No newline at end of file
diff --git a/_drafts/v-0.10/references/modules/navigator.md b/_drafts/v-0.10/references/modules/navigator.md
deleted file mode 100644
index fe4442c..0000000
--- a/_drafts/v-0.10/references/modules/navigator.md
+++ /dev/null
@@ -1,198 +0,0 @@
----
-title: navigator
-type: references
-order: 3.5
-version: 0.10
----
-
-# Navigator
-<span class="weex-version">v0.6.1+</span>
-
-As it's known to all that, we can navigate back and forth in the web browser using the navigation bar.
-And The navigator module mimics the same behaviors in the iOS/Android application. Without such an ability, We will have to stay in the same page forever, so it is very important. Besides the navigation, the module can let us to specify whether to apply animation or not during the transition.
-
-**example**
-
-```html
-<template>
- <div class="div">
- <text class="text" onclick="onItemClick">click me! {{message}}</text>
- </div>
-</template>
-
-<script>
- module.exports ={
- data:{
- message:""
- },
- methods:{
- onItemClick:function(e){
-
- var navigator = require('@weex-module/navigator');
- var params = {'url':'http://weex.alibaba-inc.com/raw/html5/3d2996653c1d129603f9c935b895e998.js','animated':true};
- navigator.push(params, function(e) {
- console.log('i am the callback.')
- });
- }
- }
- }
-</script>
-<style>
- .div {
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- width: 750;
- height: 90;
- padding-left:30;
- padding-right:30;
-
- border-bottom-width: 1;
- border-style: solid;
- border-color: #dddddd;
- }
- .text{
- width: 750;
- height: 90;
- }
-</style>
-```
-
-[try it](http://dotwe.org/004a5e3f26290cf5b9ce03806a574633)
-
-## API
-### push(options, callback)
-
-push a weex page onto the navigator stack, you can specify whether apply animation when pushing. And you can also specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* options(object): some options.
- * url(stirng): The URL of the weex page to push.
- * animated(string): true, if the weex page is push through animation, otherwise, false. Default value is true.
-
-* callback(object): the callback function to be called after executing this action.
-
-```javascript
-var params = {
- 'url': 'navigator-demo.js',
- 'animated' : 'true',
-}
-var navigator = require('@weex-module/navigator');
-navigator.push(params, function(e) {
- //callback
-});
-```
-
-### pop(options, callback)
-pop a weex page onto the navigator stack, you can specify whether apply animation when popping. And you can also specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* options(object): some options.
- * animated(string): true if the weex page is pop through animation; otherwise, false. Default value is true.
-* callback(object): the callback function after executing this action.
-
-**example**
-
-```javascript
-var params = {
- 'animated' : 'true',
-}
-var navigator = require('@weex-module/navigator');
-navigator.pop(params, function(e) {
- //callback
-});
-```
-
-### close(options, callback)
-close a weex page, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* options(object): some options.
- * animated(string): true, should animation be applied when closing. Default value is true.
-* callback(object): the callback function after executing this action.
-
-### setNavBarBackgroundColor(params, callback)
-set color for the navigation bar's background color, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* params(object): some parameters.
- * backgroundColor(string): it's a required param, no default value provided.
-* callback(object): the callback function after executing this action.
-
-
-### setNavBarLeftItem(params,callback)
-set left item for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* params(object): parameters can not be empty, titleColor depends on title. And If title and icon are provided, only the title and its titleColor will be used. That's to say, icon will only be used when title is not present.
- * title(string): the title for the bar button.
- * titleColor (string): the title color.
- * icon (string): the icon for the bar button, should be an an downloadable image.
-* callback(object): the callback function after executing this action.
-
-### clearNavBarLeftItem(callback)
-clear left item for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* callback(object): the callback function after executing this action.
-
-### setNavBarRightItem(params,callback)
-set the right item for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* params(object): parameters can not be empty, titleColor depends on title. And If title and icon are provided, only the title and its titleColor will be used. That's to say, icon will be used when title is not present.
- * title(string): the title for the bar button.
- * titleColor (string): the title color.
- * icon (string): the icon for the bar button, should be an an downloadable image.
-* callback(object): the callback function after executing this action.
-
-### clearNavBarRightItem(params, callback)
-clear the right item for the navigation bar, you can specify a callback function to be executed after the operation is over.
-**parameters**
-
-* params(object): optional.
-* callback(object): the callback function after executing this action.
-
-
-### setNavBarMoreItem(params,callback)
-set the more item for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-Actually, the function does nothing.
-* params(object): optional.
-* callback(object): the callback function after executing this action.
-
-### clearNavBarMoreItem(params, callback)
-clear the more item for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-Actually, the function does nothing.
-* params(object): optional.
-* callback(object): the callback function after executing this action.
-
-### setNavBarTitle(params,callback)
-set the title for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* params(object): parameters can not be empty.
- * title(string): the title for the bar button.
-* callback(object): the callback function after executing this action.
-
-
-### clearNavBarTitle(params,callback)
-clear the title for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* params(object): optional.
-* callback(object): the callback function after executing this action.
diff --git a/_drafts/v-0.10/references/modules/storage.md b/_drafts/v-0.10/references/modules/storage.md
deleted file mode 100644
index 9c62109..0000000
--- a/_drafts/v-0.10/references/modules/storage.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: storage
-type: references
-order: 3.6
-version: 0.10
----
-
-# storage
-<span class="weex-version">v0.7+</span>
-
-## Summary
-
-`storage` is a series of apis, allowing you to for example add, modify or delete stored data items.
-
-## API
-
-### setItem(key, value, callback)
-
-When passed a key name and value, will add that key to the storage,
-or update that key's value if it already exists.
-
-#### Arguments
-
-* `key`*(string)*: the name of the key you want to store. "" or null is not allowed.
-* `value`*(string)*: the name of the value you want to store."" or null is not allowed.
-* `callback`*(object)*: the callback function after executing this action.
-
-##### Example
-
-```javascript
-var storage = require('@weex-module/storage');
-storage.setItem('bar', 'bar-value', function(e) {
- // callback.'e' is an object that contains 'result' and 'data'. e.result indicate whether `setItem` is succeed.
- // e.data will return 'undefined' if success or 'invalid_param' if your key/value is ""/null.
-});
-```
-
-### getItem(key, callback)
-
-When passed a key name, will return that key's value.
-
-#### Arguments
-
-* `key`*(string)*: the name of the key you want to retrieve the value of."" or null is not allowed.
-* `callback`*(object)*: the callback function after executing this action.
-
-##### Example
-
-```javascript
-var storage = require('@weex-module/storage');
-storage.getItem('foo', function(e) {
- //callback.'e' is an object that contains 'result' and 'data'.
- // use 'e.data' to fetch the value of the key,if not found,'undefined' will return.
-});
-```
-
-### removeItem(key, callback)
-
-When passed a key name, will remove that key from the storage.
-
-#### Arguments
-
-* `key`*(string)*: the name of the key you want to remove."" or null is not allowed.
-* `callback`*(object)*: the callback function after executing this action.
-
-##### Example
-
-```javascript
-var storage = require('@weex-module/storage');
-storage.removeItem('foo', function(e) {
- // callback. 'e' is an object that contains 'result' and 'data'.
- // e.result will return 'success' or 'failed' according to the executing result.
- // e.data will always return 'undefined' in this function if success.
-});
-```
-
-### length(callback)
-
-Returns an integer representing the number of data items stored in the Storage object.
-
-#### Arguments
-
-* `callback`*(object)*: the callback function after executing this action.
-
-##### Example
-
-```javascript
-var storage = require('@weex-module/storage');
-storage.length(function(e) {
- // callback. 'e' is an object that contains 'result' and 'data'.
- //e.data will return that number.
-});
-```
-
-### getAllKeys(callback)
-
-Returns an array that contains all keys stored in Storage object.
-
-#### Arguments
-
-* `callback`*(object)*: the callback function after executing this action.
-
-##### Example
-
-```javascript
-var storage = require('@weex-module/storage');
-storage.getAllKeys(function(e) {
- // callback. 'e' is an object that contains 'result' and 'data'.
- //e.data will return that array of keys.
-});
-```
diff --git a/_drafts/v-0.10/references/modules/stream.md b/_drafts/v-0.10/references/modules/stream.md
deleted file mode 100644
index 522e3b0..0000000
--- a/_drafts/v-0.10/references/modules/stream.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: stream
-type: references
-order: 3.7
-version: 0.10
----
-
-# stream
-
-A series of stream api. It provides a network request.
-
-## API
-
-### fetch(options, callback,progressCallback)
-
-Start a network request, use two callbacks to receive server's response data.
-
-**Arguments**
-
-* options(object): the request options, key value style dictionary.
-
- * method(string): the HTTP method `GET` or `POST`.
-
- * url(string): the request url.
-
- * headers(string): the HTTP request headers.
-
- * type(string): request type, 'json','text' or 'jsonp'(same as 'json' in native implementation)
-
- * body(string): the HTTP body.
-
-* callback(function): A callback function whose argument is the response object of the request. Callback function will receive a `response` object.
-
- * status(number): response status code.
-
- * ok(boolean): true if status code is bewteen 200～299.
-
- * statusText(string): status text
-
- * data(string): response data. It's a object if request option is `json`/`jsonp`, or *(string)* in other type value.
-
- * headers(object): response headers
-
-* progressCallback(function): A progress callback. This callback will be invoked before request finished.
-
- * readyState(number): Current request state.'1':request connection opened;'2':response headers received.;'3':response data is loading;
-
- * status(number): response status code.
-
- * length(number): bytes of data have received. You can read full length of response from 'headers'.
-
- * statusText(string): status text.
-
- * headers(object): response headers.
-
-### Example
-
-```html
-<template>
- <div>
- <text onclick="startStream">click here to start stream</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- methods: {
- startStream: function () {
- var stream_module = require('@weex-module/stream');
- stream_module.fetch({
- method: 'GET',
- url: "http://httpbin.org/get",
- type:'json'
- }, function(response) {
- //finished response
- console.log("all received:",response);
- },function(response){
- //progress response
- console.log("current bytes received:",response.length);
- });
- }
- }
- }
-</script>
-```
-[Try it](http://dotwe.org/6e4ede64fdfe070b9696cc4cc3bdd086)
diff --git a/_drafts/v-0.10/references/modules/timer.md b/_drafts/v-0.10/references/modules/timer.md
deleted file mode 100644
index c82109d..0000000
--- a/_drafts/v-0.10/references/modules/timer.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: Timer
-type: references
-order: 3.8
-version: 0.10
----
-
-# Timer
-
-Weex encapsulates a series of APIs in order to start/stop a one-time task or a repeated task at a fixed delay. Please note that this module don't provide an accuracy delay. It provides best-effort delivery, but the actual delay may still exceed the delay user wants if the corresponding thread is busy.
-Actually, this module is made for the polyfill of HTML5 timer APIs, developers **should not** use this module directly unless they know exactly what they are doing.
-
-## API
-
-All timeout or interval in this module are measured in milliseconds.
-Also, timeout and interval should be a non-negative integer(the max of integer is 0x7FFFFFFF). If timeout or interval is negative, then it will be reset to zero, e.g. the task will be put in the task queue immediately.
-
-### setTimeout(fn, timeout)
-
-The `setTimeout()` method calls a function after a specified number of milliseconds. Use the `clearTimeout()` method to prevent the function from running. The function is only executed once. If you need to repeat execution, use the `setInterval()` method.
-
-#### Arguments
-
-- `fn` (function): The function that will be executed
-- `timeout` (number): The number of milliseconds to wait before executing the function
-
-#### Return value
-
-A Number, representing the fnId value of the timer that is set. Use this value with the `clearTimeout()` method to cancel the timer.
-
-### setInterval(fn, interval)
-
-The `setInterval()` method calls a function at specified intervals (in milliseconds), and it will continue calling the function until `clearInterval()` is called. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method.
-
-#### Arguments
-
-- `fn` (function): The function that will be executed
-- `interval` (number): The intervals (in milliseconds) on how often to execute the function
-
-#### Return value
-
-A Number, representing the fnId value of the timer that is set. Use this value with the `clearInterval()` method to cancel the timer
-
-### clearTimeout(fnId)
-
-The `clearTimeout()` method clears a timer set with the `setTimeout()` method. The fnId value returned by `setTimeout()` is used as the parameter for the `clearTimeout()` method. If the function has not already been executed, you will be able to stop the execution by calling the `clearTimeout()` method, otherwise, this method has no influence on the task.
-
-#### Arguments
-
-- `fnId` (number): The fnId value of the timer returned by the `setTimeout()` method
-
-### clearInterval(fnId)
-
-The `clearInterval()` method clears a timer set with the `setInterval()` method. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method.
-
-#### Arguments
-
-- `fnId` (number): The fnId of the timer returned by the `setInterval()` method
-
-[Try it](http://dotwe.org/996578e8f29b88d7d4fa01ab031fbbda)
diff --git a/_drafts/v-0.10/references/modules/webview.md b/_drafts/v-0.10/references/modules/webview.md
deleted file mode 100644
index 88c6f17..0000000
--- a/_drafts/v-0.10/references/modules/webview.md
+++ /dev/null
@@ -1,160 +0,0 @@
----
-title: webview
-type: references
-order: 3.9
-version: 0.10
----
-
-# webview
-
-A series of web operation api like `goBack`, `goForward`, and `reload`. 'webview' module used with the web component.
-
-## API
-
-### goBack(webElement)
-
-Loads the previous location in the history stack.
-
-**Arguments**
-
-* webElement(web): the element of the web component.
-
-#### Example
-
-```
-var webview = require('@weex-module/webview');
-var webElement = this.$el('webview');
-webview.goBack(webElement);
-```
-
-### goForward(webElement)
-
-Loads the next location in the history stack.
-
-**Arguments**
-
-* webElement(web): the element of the web component.
-
-#### Example
-
-```
-var webview = require('@weex-module/webview');
-var webElement = this.$el('webview');
-webview.goForward(webElement);
-```
-
-### reload(webElement)
-
-Reloads the current web page.
-
-**Arguments**
-
-* webElement(web): the element of the web component.
-
-#### Example
-
-```
-var webview = require('@weex-module/webview');
-var webElement = this.$el('webview');
-webview.reload(webElement.ref);
-```
-
-## Example
-
-```html
-<template>
- <div class="browserStyle">
- <div style="flex-direction: row">
- <input id="urlInput" type="url" autofocus="false" placeholder="..." class="textStyle" value="{{input_text}}" oninput="input">
- </input>
- </div>
- <div style="flex-direction: row">
- <wxc-button value="LoadURL" class="buttonSytle" size="small" onclick="loadURL"></wxc-button>
- <wxc-button value="Backward" class="buttonSytle" size="small" onclick="backforward"></wxc-button>
- <wxc-button value="Forward" class="buttonSytle" size="small" onclick="forward"></wxc-button>
- </div>
- <div>
- <web id="webview" src="{{src}}" class="webStyle"></web>
- </div>
- </div>
-</template>
-
-<style>
-
- .browserStyle
- {
- width:600;
- height: 825;
- background-color:#778899 ;
- }
-
- .textStyle
- {
- width:600;
- height: 50;
- background-color: #D3D3D3;
- }
-
- .buttonSytle
- {
- width:180;
- height: 50;
- font-size: 12;
- background-color: #D3D3D3;
- margin:10;
- padding-left: 5;
- padding-right: 5;
- }
-
- .webStyle
- {
- width:600;
- height: 700;
- background-color: #8B0000;
- }
-
-</style>
-
-<script>
-
- var web_module = require('@weex-module/webview');
-
- module.exports = {
- data: {
- src : "https://h5.m.taobao.com",
- input_text:"https://www.tmall.com"
- },
-
- methods: {
-
- loadURL: function (e) {
- var web_element = this.$el('webview');
- var input = this.$el("urlInput");
- this.src = this.input_text;
- web_module.reload(web_element);
- },
-
- backforward: function (e) {
- var web_element = this.$el('webview');
- web_module.goBack(web_element);
- this.input_text = web_element.attr.src;
- },
-
- forward: function (e) {
- var web_element = this.$el('webview');
- web_module.goForward(web_element);
- this.input_text = web_element.attr.src;
- },
- input:function (e) {
- var input = this.$el("urlInput");
- this.input_text = input.attr.value;
- }
-
- }
- }
-</script>
-```
-
-[Try it](http://dotwe.org/103d472645206cc1564f49717585abb4)
-
-
diff --git a/_drafts/v-0.10/references/special-element.md b/_drafts/v-0.10/references/special-element.md
deleted file mode 100644
index 4a4d57e..0000000
--- a/_drafts/v-0.10/references/special-element.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: Special Element
-type: references
-order: 1.10
-version: 0.10
----
-
-# Special Element
-
-## Content
-
-The element serves as content distribution outlet in a composed component template. The element itself will be replaced.
-
-alias: 'slot'.
-
-## Example
-
-As shown in the example, 'content' replaced by 'text'.
-
-```html
-<we-element name="item">
- <template>
- <div>
- <content></content>
- </div>
- </template>
-</we-element>
-
-<template>
- <div>
- <item>
- <text>Content Text</text>
- </item>
- </div>
-</template>
-```
diff --git a/_drafts/v-0.10/references/specs/index.md b/_drafts/v-0.10/references/specs/index.md
deleted file mode 100644
index d303a16..0000000
--- a/_drafts/v-0.10/references/specs/index.md
+++ /dev/null
@@ -1,309 +0,0 @@
----
-title: JS Bundle format
-type: references
-order: 4
-has_chapter_content: false
-chapter_title: Low-level Specs
-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
diff --git a/_drafts/v-0.10/references/specs/js-bundle-format.md b/_drafts/v-0.10/references/specs/js-bundle-format.md
deleted file mode 100644
index 0b103d9..0000000
--- a/_drafts/v-0.10/references/specs/js-bundle-format.md
+++ /dev/null
@@ -1,307 +0,0 @@
----
-title: JS Bundle format
-type: references
-order: 4.1
-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
diff --git a/_drafts/v-0.10/references/specs/js-framework-apis.md b/_drafts/v-0.10/references/specs/js-framework-apis.md
deleted file mode 100644
index e1412c6..0000000
--- a/_drafts/v-0.10/references/specs/js-framework-apis.md
+++ /dev/null
@@ -1,191 +0,0 @@
----
-title: JS Framework APIs
-type: references
-order: 4.2
-version: 0.10
----
-
-# JS Framework APIs
-<span class="weex-version">0.4</span>
-
-## 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.
diff --git a/_drafts/v-0.10/references/specs/virtual-dom-apis.md b/_drafts/v-0.10/references/specs/virtual-dom-apis.md
deleted file mode 100644
index 566de1a..0000000
--- a/_drafts/v-0.10/references/specs/virtual-dom-apis.md
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: Virtual DOM APIs
-type: references
-order: 4.3
-version: 0.10
----
-
-# Virtual DOM APIs
-<span class="weex-version">0.4</span>
-
-## `Document`
-
-Each instance has a corresponding document with the instance id. A document has many nodes which compose a node tree.
-
-### Constructor
-
-##### `new Document(id: string, url: string?)`
-
-### Members
-
-##### `createElement(tagName: string, props: Object?): Element`
-
-Create a certain type `Element`. And the `props` may contain `attr` object and `style` object. e.g. `createBody('div', {style: {backgroundColor: '#ffffff'}})`
-
-##### `createComment(text: string): Comment`
-
-Create a `Comment` with a certain comment text.
-
-##### `open()`
-
-Set a flag which means init rendering start, so each dom update will be called immediately
-
-##### `close()`
-
-Set a flag which means init rendering finished, so the dom updates later will be batched in each task.
-
-##### `fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)`
-
-Fire an certain type of event on a certain element with an event object. When the event leads to some dom changes, the fourth parameter will describe the change just like `props` parameter in `createElement` method.
-
-#### Read-only & Getters
-
-##### `id: string`
-
-##### `URL: string?`
-
-##### `body: Element`
-
-body element
-
-##### `documentElement: Element`
-
-document element
-
-##### `getRef(ref: string): Node?`
-
-Get node by `ref` from the internal node map
-
-**Note**: the `documentElement` will be generated automatically when a document created, and the `body` should to be created manually and appended to `documentElement` to work. The `type` of a `body` must be one of `div`, `list` or `scroller`.
-
-## `Node`
-
-### Constructor
-
-##### `new Node()`
-
-### Members
-
-##### `destroy()`
-
-#### Read-only & Getters
-
-##### `ref: string`
-
-##### `nextSibling: Node?`
-
-##### `previousSibling: Node?`
-
-##### `parentNode: Node?`
-
-## `Element` extends `Node`
-
-### Constructor
-
-##### `new Element(type: string, props: Object?, ownerDocument: Document)`
-
-Create an element and the `props` may contain `attr` object and `style` object.
-
-### Members
-
-#### DOM Tree
-
-##### `appendChild(node: Node)`
-
-##### `insertBefore(node: Node, before: Node?)`
-
-##### `insertAfter(node: Node, after: Node?)`
-
-##### `removeChild(node: Node, preserved: boolean?)`
-
-Removes a child. The parameter `preserved` means whether destroy the removed node immediately or preserve it.
-
-##### `clear()`
-
-#### DOM props
-
-##### `setAttr(key: string, value: string, silent: boolean?)`
-
-If `silent` is true, it won't cause native calls. Used for handling event with virtual-DOM changes.
-
-##### `setStyle(key: string, value: string, silent: boolean?)`
-
-The `silent` parameter is just same as `setAttr` method.
-
-##### `setClassStyle(classStyle: Object)`
-
-The specificity of class style is lower than normal style. In another way the normal style will override the same name value in class style.
-
-##### `addEvent(type: string, handler: Function)`
-
-##### `removeEvent(type: string)`
-
-##### `fireEvent(type: string, e: any)`
-
-#### Read-only & Getters
-
-##### `toJSON(): Object`
-
-Format of `{ref: string, type: string, attr: Object, style: Object, event: Array(string), children: Array}`
-
-## `Comment` extends `Node`
-
-`Comment` won't be passed to the rendering engine. So it's very useful as a assistant placeholder sometimes.
-
-### Constructor
-
-##### `new Comment(value: string)`
-
-### Members
-
-#### Read-only & Getters
-
-##### `type: string`
-
-Returns `'comment'`
-
-##### `value: string`
diff --git a/_drafts/v-0.10/references/text-style.md b/_drafts/v-0.10/references/text-style.md
deleted file mode 100644
index 6b9ee4f..0000000
--- a/_drafts/v-0.10/references/text-style.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Text Style
-type: references
-version: 0.10
-order: 1.8
----
-
-# Text Style
-<span class="weex-version">0.5</span>
-
-Text alike components share some common style rules. The text alike components currently includes [`text`](./components/text.html) and [`input`](./components/input.html).
-
-## Properties
-
-- `color`: <colors> this property set the foreground color of an component's text content.
-- `font-size`: <length> this property specifies the size of the font.
-- `font-style`: <enum> `normal` | `italic`. This property lets you select italic or normal faces within a font-family. Default value is `normal`.
-- `font-weight`: <enum> `normal` | `bold`. This property specifies the boldness of the font. Default value is `normal`.
-- `text-decoration`: <enum> `none` | `underline` | `line-through`. This property is used to set the text formatting to underline or line-through. The default value is `none`.
-- `text-align`: <enum> `left` | `center` | `right`. This property describes how inline content like text is aligned in its parent component. The default value is `left`.
-- `font-family`:<string> this property set the font-family of the text. This property **doesn't guarantee** the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices.
-- `text-overflow`:<string> `clip` | `ellipsis`. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis.
-
-The property `color` support multiple fomats of values, contains rgb, rgba, #fff, #ffffff, named-color.
-
-Example:
-
-```css
-.my-class { color: red; }
-.my-class { color: #f00; }
-.my-class { color: #ff0000; }
-.my-class { color: rgb(255, 0, 0); }
-.my-class { color: rgba(255, 0, 0, 0.5); }
-```
-
-## Type of Style Value
-
-- length: number followed by length unit `px`, `px` can be omitted.
-- colors: support multiple formats of values, including rgb (`rgb(255, 0, 0)`), rgba (`rgba(255, 0, 0, 0.5)`), hexadecimal (`#ff0000`), short hexadecimal (`#f00`), named color (`red`).
-- enumerated values: a limited number of string values.
-
-**Note:** [The list of color keywords.](./color-names.html)
-
diff --git a/_drafts/v-0.10/tools/devtools-android.md b/_drafts/v-0.10/tools/devtools-android.md
deleted file mode 100644
index 9ce8991..0000000
--- a/_drafts/v-0.10/tools/devtools-android.md
+++ /dev/null
@@ -1,123 +0,0 @@
----
-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.
diff --git a/_drafts/v-0.10/tools/devtools-ios.md b/_drafts/v-0.10/tools/devtools-ios.md
deleted file mode 100644
index 602f63d..0000000
--- a/_drafts/v-0.10/tools/devtools-ios.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: Devtools for IOS
-type: tools
-order: 2.2
-version: 0.10
----
-
-# Devtools for IOS
-
-Remote debug for your native iOS app using Chrome Developer Tools
-
-## weex-devtool launch：
-
-0. install and run weex-devtool
-
- $:npm install -g weex-devtool
-
- $:weex-devtool
-
- it will launch chrome browser, showing wss ip address in chrome address bar.
-
-
-## playground install WXDevtool
-
-1. Install dependencies.
-
- $:pod install
-
-### Usage
-
-1. AppDelegate.m header file
-
- #import "WXDevTool.h"
-
-2. Initialize inspector when the APP launched
-
- **Note: The inspector API must be called before weex is initialized**
-
- + (void)setDebug:(BOOL)isDebug;
-
- isDebug default is NO, now you open inspect model. opposite is YES, if you set isDebug to YES, then open debug model and inspect model.
-
- + (void)launchDevToolDebugWithUrl:(NSString *)url;
- wssip was the wss address showing in the chrome address bar.
-
- * open debug model and inspector model
-
- eg：- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
- {
- [WXDevTool setDebug:YES];
- [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"];
- }
-
- * open inspect model, remove the @selector(setDebug:) or add [WXDevTool setDebug:NO]
-
- eg：- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
- {
- [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"];
- }
-
-
-3. Build and running APP, this time chrome will display your device with App name, select inspector to open the inspector tab.
-4. Log print support for different levels of print.
-
- eg: #import "WXDevTool.h"
- PDLogE()/PDLogW()
-
-### WXDevtool Dependencies
-
-Your app must be linked against the following frameworks/dylibs
-
-* libicucore.dylib
-* CFNetwork.framework
-* CoreData.framework
-* Security.framework
-* Foundation.framework
diff --git a/_drafts/v-0.10/tools/devtools.md b/_drafts/v-0.10/tools/devtools.md
deleted file mode 100644
index f883055..0000000
--- a/_drafts/v-0.10/tools/devtools.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Devtools
-type: tools
-order: 2
-has_chapter_content: true
-version: 0.10
----
-
-# Devtools
-
-Weex devtools is a custom devtools for weex that implements [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol), it is designed to help you quickly inspect your app and debug your JS bundle source in a chrome web page, both Android and IOS platform are supported.
-
-## Install
-
-```
- $ npm install -g weex-toolkit
-```
-#### usage
-```
-weex debug [options] [we_file|bundles_dir]
-
- Options:
-
- -h, --help output usage information
- -V, --verbose display logs of debugger server
- -v, --version display version
- -p, --port [port] set debugger server port
- -e, --entry [entry] set the entry bundlejs path when you specific the bundle server root path
- -m, --mode [mode] set build mode [transformer|loader]
- -w, --watch watch we file changes auto build them and refresh debugger page![default enabled]
-```
-
-#### start debugger
-```
-$weex debug
-```
-this command will start debug server and launch a chrome opening `DeviceList` page.
-this page will display a qrcode ,you can use `Playground App` scan it for starting debug.
-
-#### start debugger with a we file
-```
-$weex debug your_weex.we
-```
-this command will compile `your_weex.we` to `your_weex.js` and start the debug server as upon command.
-`your_weex.js` will deploy on the server and displayed in `DeviceList` page as another qrcode contain the url of your_weex.js
-
-
-#### start debugger with a directory of we files
-```
-$weex debug your/we/path -e index.we
-```
-this command will build every file in your/we/path and deploy them on the bundle server. your directory will mapping to http://localhost:port/weex/
-use -e to set the entry of these bundles. and the url of "index.we" will display on device list page as another qrcode.
-
-## Features
-
-### Connect devices
-
-
-### Inspector
- Inspector can be used to show your `Element` \ `Network` \ `Console log` \ `ScreenCast` \ `BoxModel` \ `Native View` and so on.
-
-
-
-#### Element
-##### native view element
-
-
-##### weex dom element
-
-
-#### Network
-
-##### show the total time and latency
-
-
-##### show the header and response
-
-
-#### Console
-
-
-#### Resource
-
-
-### Debugger
-
- Debugger can be used to debug your bundle js source, you can set `Breakpoint` \ watch `CallStack`.
-
-
-
-#### Breakpoint and CallStack
-
-
-
-## Integrate devtools
-
-* Android
- * See the doc [Weex devtools (Android)](/tools/devtools-android.html), it will lead you to config and use it step by step.
-* IOS
- * See the doc [Weex devtools (IOS)](/tools/devtools-ios.html), it will lead you to config and use it step by step.
-
diff --git a/_drafts/v-0.10/tools/index.md b/_drafts/v-0.10/tools/index.md
deleted file mode 100644
index 731c2f9..0000000
--- a/_drafts/v-0.10/tools/index.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: CLI
-type: tools
-order: 1
-has_chapter_content: true
-version: 0.10
----
-
-# Weex-Toolkit
-
-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 then `2.15.1`, please run below cmd 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 transforme 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
-
-#### crate a `we file`(weex source file) using standard template
-```
-$weex create hello-world-weex
-```
-a file named 'hello-world-weex.we' we be created in current directory
-
-
-#### transform a `we file` to JS Bundle
-```
-$weex your_best_weex.we -o .
-```
-`your_best_weex.we` will be transform to JS Bundle file `your_best_weex.js` , saved in your current directory
-
-#### transform a `we file` to JS Bundle , watch this file ，auto run transformer if change happen.
-```
-$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` we be transform to JS Bundle , 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 transforme to JS Bundle when access through the server
-
-## Issue & Feedback
-
-[Github Issue List](https://github.com/weexteam/weex-toolkit/issues)
-
diff --git a/_drafts/v-0.10/tools/playground.md b/_drafts/v-0.10/tools/playground.md
deleted file mode 100644
index f315054..0000000
--- a/_drafts/v-0.10/tools/playground.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Playground
-type: tools
-order: 4
-has_chapter_content: true
-version: 0.10
----
-
-# Weex Playground App
-
-One of best parts of Weex is Native Runtime . After preview your `we file` render in H5 using weex-toolkit CLI , you can try Native Runtime in a standalone App , this is Weex Playground App . More then that ,Weex playground App preset a lot of Demo & ShowCase ,so you will get to experience performance of Weex native runtime easily.
-
-Android and IOS version of Playground App can be downloaded [here](http://alibaba.github.io/weex/download.html).
-
-## Screenshot
-
-
-
-
-This is main interface of Weex Playground App , you can click the item to see the corresponding demo . click top right corner Icon will active QR scaner that work with Weex [toolkit CLI](../tools/index.html)
-
-please refer to [Weex Tutorial](../guide/index.html)
-
-
diff --git a/_drafts/v-0.10/tools/transformer.md b/_drafts/v-0.10/tools/transformer.md
deleted file mode 100644
index 7df3b60..0000000
--- a/_drafts/v-0.10/tools/transformer.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: Transformer
-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
diff --git a/_drafts/v1.0/advanced/create-a-weex-project.md b/_drafts/v1.0/advanced/create-a-weex-project.md
deleted file mode 100644
index 780341b..0000000
--- a/_drafts/v1.0/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` 目录。
diff --git a/_drafts/v1.0/advanced/customize-a-native-component.md b/_drafts/v1.0/advanced/customize-a-native-component.md
deleted file mode 100644
index 404f25c..0000000
--- a/_drafts/v1.0/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>
-```
diff --git a/_drafts/v1.0/advanced/cuszomize-native-apis.md b/_drafts/v1.0/advanced/cuszomize-native-apis.md
deleted file mode 100644
index 55e5e4c..0000000
--- a/_drafts/v1.0/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` 接口的类。
diff --git a/_drafts/v1.0/advanced/extend-to-android.md b/_drafts/v1.0/advanced/extend-to-android.md
deleted file mode 100644
index f816ebd..0000000
--- a/_drafts/v1.0/advanced/extend-to-android.md
+++ /dev/null
@@ -1,170 +0,0 @@
----
-title: Android 扩展
-type: advanced
-order: 9
-has_chapter_content: true
-version: 0.10
----
-
-# Android 扩展
-
-Weex 提供了扩展机制，可以根据自己的业务进行定制自己的功能。
-主要分为两类扩展：
-
-- Module 扩展 非 UI 的特定功能。例如 sendHttp、openURL 等。
-- Component 扩展 实现特别功能的 Native 控件。例如：RichTextview，RefreshListview 等。
-- Adapter 扩展 Weex 对一些基础功能实现了统一的接口，可实现这些接口来定制自己的业务。例如：图片下载等。
-
-## Module 扩展
-
-1. Module 扩展必须继承 WXModule 类。
-2. 扩展方法必须加上 @WXModuleAnno 注解。Weex 会根据注解来判断当前方法是否要运行在 UI 线程，和当前方法是否是扩展方法。
-3. Weex是根据反射来进行调用 Module 扩展方法，所以Module中的扩展方法必须是 public 类型。
-4. 同样因为是通过反射调用，Module 不能被混淆。请在混淆文件中添加代码：`-keep public class * extends com.taobao.weex.common.WXModule{*;}`
-5. Module 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
-6. 完成 Module 后一定要在初始化时注册 `WXSDKEngine.registerModule("myModule", MyModule.class);` 否则会报类似错误：`ReportException :undefined:9: TypeError: Object #<Object> has no method 'printLog'`
-
-示例如下：
-
-```java
-public class MyModule extends WXModule {
-
- @WXModuleAnno(runOnUIThread = true)
- public void printLog(String msg) {
- Toast.makeText(mWXSDKInstance.getContext(),msg,Toast.LENGTH_SHORT).show();
- }
-}
-```
-
-JS 调用如下：
-
-```html
-<template>
- <div>
- <text onclick="click">点击我测试</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- methods: {
- click: function() {
- require('@weex-module/myModule').printLog("我是一个测试!");
- }
- }
- }
-</script>
-```
-
-## Component 扩展
-
-1. Component 扩展类必须集成 WXComponent.
-2. Component 对应的设置属性的方法必须添加注解 @WXComponentProp(name=value(value is attr or style of dsl))
-3. Weex sdk 通过反射调用对应的方法，所以 Component 对应的属性方法必须是 public，并且不能被混淆。请在混淆文件中添加代码 `-keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}`
-4. Component 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
-5. 完成 Component 后一定要在初始化时注册 `WXSDKEngine.registerComponent("richtext",RichText.class);`
-
-示例如下:
-
-```java
-public class RichText extends WXComponent {
-
- public RichText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, boolean isLazy) {
- super(instance, dom, parent, isLazy);
- }
-
- @Override
- protected void initView() {
- mHost=new TextView(mContext);
- ((TextView)mHost).setMovementMethod(LinkMovementMethod.getInstance());
- }
-
- @WXComponentProp(name = "tel")
- public void setTelLink(String tel){
- SpannableString spannable=new SpannableString(tel);
- spannable.setSpan(new URLSpan("tel:"+tel),0,tel.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
- ((TextView)mHost).setText(spannable);
- }
-}
-```
-
-JS 调用如下：
-
-```html
-<template>
- <div>
- <richText tel="12305" style="width:200;height:100">12305</text>
- </div>
-</template>
-```
-## Adapter扩展
-
-图片下载：
-
-需要时集成接口 IWXImgLoaderAdapter，实现 setImage 方法。
-
-示例如下：
-
-```java
-public class ImageAdapter implements IWXImgLoaderAdapter {
-
- public ImageAdapter() {
- }
-
- @Override
- public void setImage(final String url, final ImageView view,
- WXImageQuality quality, WXImageStrategy strategy) {
-
- WXSDKManager.getInstance().postOnUiThread(new Runnable() {
-
- @Override
- public void run() {
- if(view==null||view.getLayoutParams()==null){
- return;
- }
- if (TextUtils.isEmpty(url)) {
- view.setImageBitmap(null);
- return;
- }
- String temp = url;
- if (url.startsWith("//")) {
- temp = "http:" + url;
- }
- if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
- return;
- }
- Picasso.with(WXEnvironment.getApplication())
- .load(temp)
- .into(view);
- }
- },0);
- }
-}
-```
-#### 组件方法支持
-从WeexSDK 0.9.5开始，你可以定义组件方法
-
-- 在组件中如下声明一个组件方法
-
- ```java
- @JSMethod
- public void focus(){
- //method implementation
- }
- ```
-- 注册组之后，你可以在weex 文件中调用
-
- ```html
- <template>
- <mycomponent id='mycomponent'></mycomponent>
- </template>
- <script>
- module.exports = {
- created: function() {
- this.$el('mycomponent').focus();
- }
- }
- </script>
- ```
-
-注:工程要添加依赖 `compile 'com.squareup.picasso:picasso:2.5.2'`
diff --git a/_drafts/v1.0/advanced/extend-to-html5.md b/_drafts/v1.0/advanced/extend-to-html5.md
deleted file mode 100644
index ff99629..0000000
--- a/_drafts/v1.0/advanced/extend-to-html5.md
+++ /dev/null
@@ -1,253 +0,0 @@
----
-title: weex-html5 扩展
-type: advanced
-order: 11
-has_chapter_content: true
-version: 0.10
----
-
-# 扩展 weex-html5
-
-### 简介
-
-Weex 是一个高可扩展性的跨平台动态化开发方案，你可以在现有组件基础上定制自己需要的三端组件。你可以为 Weex API 模块添加新的方法，或者创建新的 API 模块和新的加载器。按照以下几个步骤扩展你的组件，API 或者加载器。
-
-首先要明确的是，组件和 API 模块是基于 Weex 的扩展，但是独立于 Weex，组件的定义本身是不需要依赖于 Weex 的，这样有助于组件的分散化管理，去除中心化依赖。
-
-其次，当你扩展一个组件，你需要同时扩展三端的组件（android, ios 和 web 端），毕竟 Weex 是一个重视三端一致体验的跨平台移动框架。你可以一个端一个端的扩展，也可以召唤其他端上的开发者来共同完成你在其他端上的组件（你总是可以在社区找到对某个功能有共同需求的开发者）。这里有一些在 [android 端](./extend-to-android.md)和 [ios 端](./extend-to-ios.md)做扩展的文档可以参考。
-
-你应该将你的扩展发布到 Weex 开发者可以方便找到和使用的渠道，比如 `npm`。我们推荐你将你开发的组件发布到 `npm` 供其他 Weex 开发者使用。
-
-最重要的是，你的组件的命名需要遵守 Weex 组件命名规范：以 `weex-` 开头作为组件的前缀，并且以 `-<platform>` 做为结尾后缀，除非你发布的包是三端的实现都包含在内的。这里有个 [`<weex-hello-web`>](https://github.com/MrRaindrop/weex-hello-web) 的例子作为参考，这里注册了一个简单的自定义的组件。
-
-### 创建新组件
-
-步骤:
-1. 在你的组件实现中必须继承 `Weex.Component` 这个类, 并选择性的重写其中的一些方法。
-2. 你的组件的 exports 需要暴露一个 `init` 方法，并在其中使用 `Weex.registerComponent` 注册你的组件。
-
-**这里用一个例子展示如何扩展一个新的组件**
-
-看这个组件扩展的代码( web 端上的组件)：
-
-``` javascript
-const attr = {
- // ...
-}
-const style = {
- // ...
-}
-const event = {
- // ...
-}
-// 每个扩展组件都需要实现一个init方法，Weex会通过这方法进行安装和注册.
-function init (Weex) {
- const Component = Weex.Component
- const extend = Weex.utils.extend
-
- // 组件的构造函数
- function Hello (data) {
- Component.call(this, data)
- }
-
- // prototype继承
- Hello.prototype = Object.create(Component.prototype)
- extend(Hello.prototype, proto)
-
- // 配置属性、样式以及事件
- extend(Hello.prototype, { attr })
- extend(Hello.prototype, {
- style: extend(Object.create(Component.prototype.style), style)
- })
- extend(Hello.prototype, { event })
-
- Weex.registerComponent('weex-hello', Hello)
-}
-
-// 暴露init方法接口.
-export default { init }
-```
-
-上述代码摘引自 [weex-hello-web/src/index.js](https://github.com/MrRaindrop/weex-hello-web/blob/master/src/index.js#L46-L65)
-
-这个demo重写了基类 `Component`中的`create`方法。你也可以选择重写`Component`中的一些其他方法来定制组件的行为。典型的方法包括：
-- `create`: 创建组件的节点，在方法体中return这个节点.
-- `createChildren` 创建子节点.
-- `insertBefore` 在某个子节点之前插入一个新的子节点.
-- `appendChild` 在子节点列表的最后加上一个节点.
-- `removeChild` 移除一个子节点.
-
-**进阶**：更多关于组件定制和扩展的细节和代码展示，可以参考 [weex 主仓库的代码](https://github.com/apache/incubator-weex/tree/dev/html5)，这里的组件基本上都是通过上述方式进行定义的。
-
-重要的一点，注册组件的关键方法是 `Weex.registerComponent`，如示例里的 `weex-hello` 组件的注册：
-
-``` javascript
-Weex.registerComponent('weex-hello', Hello)
-```
-
-上述代码引自 [weex-hello-web/src/index.js](https://github.com/MrRaindrop/weex-hello-web/blob/master/src/index.js#L62)
-
-在某个需要使用该组件的weex项目中使用 `Weex.install` 方法安装该组件：
-
-``` javascript
-// import the original weex-html5.
-import weex from 'weex-html5'
-import hello from 'weex-hello-web'
-// install the component.
-weex.install(hello)
-```
-
-上述代码引自 [weex_extend_demo/src/main.js](https://github.com/MrRaindrop/weex_extend_demo/blob/master/src/main.js#L1-L5)
-
-在你的 `.we` 文件中直接使用这个组件：
-
-``` html
-<template>
- <div>
- <weex-hello class="hello" style="txt-color:#fff;bg-color:green"
- value="WEEX" onclick="handleClick">
- </weex-hello>
- </div>
-</template>
-```
-
-上述代码引自[weex_extend_demo/demo/index.we](https://github.com/MrRaindrop/weex_extend_demo/blob/master/demo/index.we#L10-L15)
-### 扩展API
-
-你可以扩展新的 API 模块，或者为某个已有的模块添加新的 API. 比如，你可以添加一个 API 模块叫做 `user`，在里面添加一些用户登录登出处理的 API，比如 `login`, `logout` 等等。你可以通过 `require('@weex-module/moduleName)[methodName](arg1, arg2, ...)` ([Module APIs](../references/api.md)) 的方式调用你的 API.
-
-步骤:
-1. 实现你的 API module.
-2. 在你的 API 安装模块里暴露一个 `init` 方法，并在这个方法里面使用 `Weex.registerAPIModules` 注册你的 API module.
-
-**这里用一个例子展示如何扩展一个新的 API 模块**
-
-创建一个文件 `user.js`，在其中定义登录登出 `login/logout` 方法.
-
-``` javascript
-const user = {
- // 定义用户登录方法.
- login (callbackId) {
- login.then(res => {
- this.sender.performCallback(callbackId, res)
- }).catch(err => {
- this.sender.performCallback(callbackId, err)
- })
- },
-
- // 定义用户登出方法.
- logout (callbackId) {
- logout.then(res => {
- this.sender.performCallback(callbackId, res)
- }).catch(err => {
- this.sender.performCallback(callbackId, err)
- })
- }
-}
-
-// 定义user模块的元 (meta) 信息.
-const meta = {
- user: [{
- name: 'login',
- args: ['function']
- }, {
- name: 'logout',
- args: ['function']
- }]
-}
-
-export default {
- init (Weex) {
- // 注册这个模块，最后一个参数是模块的元信息.
- Weex.registerApiModule('user', user, meta)
- }
-}
-```
-
-这个简单的 user helper 模块就实现好了，可以发布到 npm 上，我们可以给这个模块取个名字，比如说 `weex-user-helper`。
-
-在你的新的 Weex 项目里安装这个模块:
-
-``` javascript
-import Weex from 'weex-html5'
-import user from 'weex-user-helper'
-
-Weex.install(user)
-```
-
-安装了这个模块，你就可以在 DSL 代码里引用这个模块干点事情了:
-
-``` html
-<template>
- <div>
- <div class="btn" onclick="handleClick">
- <text>LOGIN</text>
- </div>
- </div>
-</template>
-
-<script>
- var userHelper = require('@weex-module/user')
- module.exports = {
- methods: {
- handleClick: function () {
- userHelper.login(function () {
- // ... do sth. in callback.
- })
- }
- }
- }
-</script>
-```
-
-### 定制加载器loader
-
-**Loader仅用于weex-html5 (web端)加载dsl打包出来的bundle代码，native平台有其他的加载机制**
-
-已有的加载器包括 `xhr`, `jsonp` 和 `source`. 你可以使用 `weex.registerLoader` 注册一个新的加载器。例如，你有一个获取 Weex bundle 的服务 `myServe.getWeexBundle` , 通过这个服务可以加载 weex bundle，为此你可以定义一个加载器：
-
-``` javascript
-function loadByMyServe(pageId, callback) {
- myServe.getWeexBundle(pageId).then(function (bundle) {
- callback(bundle)
- }).catch(function(err) {
- callback(err)
- })
-}
-
-// 暴露init方法用于Weex安装此加载器.
-export default {
- init (Weex) {
- Weex.registerLoader('myserve', loadByMyServe)
- }
-}
-```
-
-在你的 weex-html5 项目的启动文件里安装并使用这个加载器：
-
-``` javascript
-import Weex from 'weex-html5'
-
-// 或者import from './myserve.js'，不管是import一个npm模块还是import一个文件.
-import loader from 'myLoader'
-
-Weex.install(loader)
-
-// 在init方法里使用这个加载器加载bundle文件.
-(function () {
- function getUrlParam (key) {
- const reg = new RegExp('[?|&]' + key + '=([^&]+)')
- const match = location.search.match(reg)
- return match && match[1]
- }
- const page = getUrlParam('page') || 'examples/build/index.js'
- Weex.init({
- appId: location.href,
- loader: 'myserve', // 使用刚才定义的loader类型
- source: page,
- rootId: 'weex'
- })
-})();
-```
-
-以上是 Weex 带来的扩展性里比较主要的一部分，更多实现细节可以在 [weex 项目代码库](https://github.com/alibaba/weex)以及 weex 的开源社区里找到。
diff --git a/_drafts/v1.0/advanced/extend-to-ios.md b/_drafts/v1.0/advanced/extend-to-ios.md
deleted file mode 100644
index b163d62..0000000
--- a/_drafts/v1.0/advanced/extend-to-ios.md
+++ /dev/null
@@ -1,279 +0,0 @@
----
-title: iOS 扩展
-type: advanced
-order: 10
-has_chapter_content: true
-version: 0.10
----
-
-## iOS 扩展
-
-### Module 扩展
-
-[swift](https://github.com/weexteam/article/issues/55) 扩展 module
-
-Weex SDK 只提供渲染，而不是其他的能力，如果你需要 像网络，图片，URL跳转这些特性，需要自己动手实现他们
-例如，如果你想实现一个url地址跳转函数，你可以按照如下步骤实现一个 Module
-1. **自定义module的步骤**
- 1. 自定义的module类 必须实现 `WXModuleProtocol`
- 2. 必须添加宏`WX_EXPORT_METHOD`, 它可以被weex识别，它的参数是 JavaScript调用 module指定方法的参数
- 3. 添加`@synthesized weexInstance`，每个moudle对象被绑定到一个指定的实例上
- 4. Module 方法会在UI线程中被调用，所以不要做太多耗时的任务在这里，如果要在其他线程执行整个module 方法，需要实现`WXModuleProtocol`中`- (NSThread *)targetExecuteThread`的方法，这样，分发到这个module的任务会在指定的线程中运行
- 5. Weex 的参数可以是 String 或者Map
- 6. Module 支持返回值给 JavaScript中的回调，回调的类型是`WXModuleCallback`,回调的参数可以是String或者Map
-
- ```object-c
- @implementation WXEventModule
- @synthesize weexInstance;
- WX_EXPORT_METHOD(@selector(openURL:callback))
- - (void)openURL:(NSString *)url callback:(WXModuleCallback)callback
- {
- NSString *newURL = url;
- if ([url hasPrefix:@"//"]) {
- newURL = [NSString stringWithFormat:@"http:%@", url];
- } else if (![url hasPrefix:@"http"]) {
- newURL = [NSURL URLWithString:url relativeToURL:weexInstance.scriptURL].absoluteString;
- }
-
- UIViewController *controller = [[WXDemoViewController alloc] init];
- ((WXDemoViewController *)controller).url = [NSURL URLWithString:newURL];
-
- [[weexInstance.viewController navigationController] pushViewController:controller animated:YES];
- callback(@{@"result":@"success"});
- }
-
- @end
- ```
-2. **Register the module**
- 通过调用 WXSDKEngine 中的 `registerModule:withClass`方法来注册自己的module
-
- ```object-c
- WXSDKEngine.h
- /**
- * @abstract Registers a module for a given name
- * @param name The module name to register
- * @param clazz The module class to register
- **/
- + (void)registerModule:(NSString *)name withClass:(Class)clazz;
- [WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
- ```
-3. **使用自己的module**
- 这里的 require 里面的event 就是在 上一步调用`registerModule:` 注册module 时候的name
-
- ```javascript
- var eventModule = require('@weex-module/event');
- eventModule.openURL('url',function(ret) {
- nativeLog(ret);
- });
- ```
-
- Weex SDK没有 图片下载，navigation 操作的能力，请大家自己实现这些 protocol
-
-### handler 扩展
- **WXImgLoaderProtocol**
-
- weexSDK 没有提供图片下载的能力，需要实现 WXImgLoaderProtocol,参考下面的例子
-
- ```object-c
- WXImageLoaderProtocol.h
- @protocol WXImgLoaderProtocol <WXModuleProtocol>
- /**
- * @abstract Creates a image download handler with a given URL
- * @param imageUrl The URL of the image to download
- * @param imageFrame The frame of the image you want to set
- * @param options : The options to be used for this download
- * @param completedBlock : A block called once the download is completed.
- image : the image which has been download to local.
- error : the error which has happened in download.
- finished : a Boolean value indicating whether download action has finished.
- */
- -(id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;
- @end
- ```
-
- 实现上述协议
-
- ```object-c
- @implementation WXImgLoaderDefaultImpl
- #pragma mark -
- #pragma mark WXImgLoaderProtocol
-
- - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock
- {
- if ([url hasPrefix:@"//"]) {
- url = [@"http:" stringByAppendingString:url];
- }
- return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
- } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
- if (completedBlock) {
- completedBlock(image, error, finished);
- }
- }];
- }
- @end
- ```
-
-5. **handler注册**
-
- 你可以通过WXSDKEngine 中的 `registerHandler:withProtocol`注册handler
-
- ```object-c
- WXSDKEngine.h
- /**
- * @abstract Registers a handler for a given handler instance and specific protocol
- * @param handler The handler instance to register
- * @param protocol The protocol to confirm
- */
- + (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
-
- [WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)]
- ```
-
-#### Component 扩展
- 虽然WeexSDK中有提供内置的一些Component，但这有可能并不能满足你的需求。在之前你可能已经写了一些很酷炫native的组件，想包装一下，导入到Weex中，因此我们提供了让开发者实现自己的native Component
- 下面将以WeexSDK 中已经存在的 Component：`image`为例子，介绍一下如何构建一个native Component.
- 假设你已经了解IOS开发
- 1. 注册 Component
- 注册一个component比较简单，调用 `WXSDKEngine` 中的 `registerComponent:withClass:`方法，传入组件的标签名称，还有对应的class
- 然后你可以创建一个 `WXImageComponent` 表示`image`组件的实现 在.we 文件中，只需要写
- <image></image>
- 2. 添加属性
- 现在我们要做一些让image component更加强大的事情。既然作为一个图片的component，那它应该要有源，给他加上一个 `src`的属性，同时给它加上一个`resize`的属性（可以配置的有`contain/cover/stretch`）
-
- ```
- @interface WXImageComponent ()
-
- @property (nonatomic, strong) NSString *imageSrc;
- @property (nonatomic, assign) UIViewContentMode resizeMode;
-
- @end
- ```
- component中所有的style，attribute，events都会被传递到 Component的初始化方法中，所以，你可以在初始化方法中存储你感兴趣的一些属性值
-
- ```
- @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`类，或者你可以添加自己的转换函数
-
- 1. 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`这个方法.
-
- ```
- - (UIView *)loadView
- {
- return [[WXImageView alloc] init];
- }
- ```
-
- 现在我们使用 `WXImageView` 渲染 `image` component。
- 1. 作为一个image component，我们需要拿到服务器图片，而且把它设置进image view 里. 这个操作可以在 `viewDidLoad` 方法中做，这个方法是在view已经被创建而且加载了时候weex SDK会调用到，而且`viewDidLoad`这个方法是你做额外初始化工作比如改变content mode(也就是设置resize) 的最好时间.
-
- ```
- - (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
- }
- ```
-
- 1. 如果可以改变image的src,也可以hook `updateAttributes:`方法来做属性更新操作，当`updateAttributes:`或者 `updateStyles:`被调用的时候， component的view 已经加载完成
-
- ```
- - (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的属性
-
- ```
- <image style="your-custom-style" src="image-remote-source" resize="contain/cover/stretch"></image>
- ```
-##### component 方法
-WeexSDK 0.9.5 之后支持了在js中直接调用component的方法，这里提供一个例子，
-
-- 自定义一个WXMyCompoenent 的组件
-
- ```
- @implementation WXMyComponent
- WX_EXPORT_METHOD(@selector(focus)) // 暴露该方法给js
- - (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]) {
- // handle your attributes
- // handle your styles
- }
-
- return self;
- }
-
- - (void)focus
- {
- NSLog(@"you got it");
- }
- @end
- ```
-
-- 注册组件 `[WXSDKEngine registerComponent:@"mycomponent" withClass:[WXMyComponent class]] `
-- 在weex 文件中调用
-
- ```html
- <template>
- <mycomponent id='mycomponent'></mycomponent>
- </template>
- <script>
- module.exports = {
- created: function() {
- this.$el('mycomponent').focus();
- }
- }
- </script>
- ```
-
-
-
-
\ No newline at end of file
diff --git a/_drafts/v1.0/advanced/how-data-binding-works.md b/_drafts/v1.0/advanced/how-data-binding-works.md
deleted file mode 100644
index a905422..0000000
--- a/_drafts/v1.0/advanced/how-data-binding-works.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: 数据绑定原理
-type: advanced
-order: 2
-has_chapter_content: true
-version: 0.10
----
-
-# 数据绑定实现原理
-
-Weex 的 JS Framework 是一个 MVVM，即 Model-View-ViewModel 框架。他会自动监听数据的变化，并通过 `{% raw %}{{字段名}}{% endraw %}` 的语法把数据和视图中所展示的内容自动绑定起来。当数据被改写的时候，视图会自动根据数据的变化而发生相应的变化。
-
-比如下面这个例子，`<text>` 的内容被绑定在了 `notes` 数据字段上：
-
-```html
-<template>
- <div>
- <text>{{notes}}</text>
- </div>
-<template>
-
-<script>
- module.exports = {
- data: {
- notes: 'Hello'
- }
- }
-</script>
-```
-
-Weex 的 JS Framework 会首先对 `data` 里的数据进行监听，这样未来的数据变化都能够被监听到。然后我们会编译整个 `<template>` 标签里的内容。当我们找到 `<text>` 标签里的 `{% raw %}{{notes}}{% endraw %}` 时，JS Framework 会跟踪 `data.notes` 的变化并在其发生变化时触发一个句柄，将 `<text>` 的内容设置为 `data.notes` 最新的值。这样的话开发者就不必手动关心数据和视图之间的数据同步问题了。
-
-在这个基础上我们还设计了一些特殊的语法：
-
-- `<foo if="...">` 代表一个条件监听，当其值为 `true` 时，`<foo>` 元素将会被创建和载入，反之则不会被创建或被移除掉。
-- `<foo repeat="...">` 代表一个列表监听，第一次加载的时候 `<foo>` 元素会被按照数组里的数据逐条 clone 并赋值。而当有列表项增加、移动或移除时，视图层也会自动触发相应的改变，并且智能优化至最小变更策略
-- `<foo if="..." repeat="...">` 两个特殊语法共用时，将会优先展开 `repeat` 然后逐条判断 `if`。
-
-相比于一些 virtual-DOM 的 diff 计算机制，我们会直接对数据进行 diff，而且只会 diff 由于用户操作或数据操作发生改变的那部分数据和视图，这是一种更小范围的计算方式。尤其在追求轻量快速的移动端界面上，这种更新机制更加显得具有优势。
diff --git a/_drafts/v1.0/advanced/images/how-arch.png b/_drafts/v1.0/advanced/images/how-arch.png
deleted file mode 100644
index a13df7a..0000000
--- a/_drafts/v1.0/advanced/images/how-arch.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/advanced/images/how-render.png b/_drafts/v1.0/advanced/images/how-render.png
deleted file mode 100644
index db9b0f4..0000000
--- a/_drafts/v1.0/advanced/images/how-render.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/advanced/index.md b/_drafts/v1.0/advanced/index.md
deleted file mode 100644
index 8fea01e..0000000
--- a/_drafts/v1.0/advanced/index.md
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Weex 工作原理
-type: advanced
-order: 1
-has_chapter_content: true
-version: 0.10
----
-
-# Weex 工作原理概述
-
-## 总览
-
-Weex是跨平台，可扩展的动态化技术. 你能通过在Weex源码中写`<template>`, `<style>` 和 `<script>`标签，然后把这些标签转换为JS Bundle用于部署, 在服务端以这些JS Bundle响应请求. 当客户端接收到JS Bundle时，它能用被客户端中的JS引擎用于管理Native渲染;API调用和用户交互.
-
-### 工作流
-
-```
-Weex we 文件 --------------前端(we源码)
-↓ (转换) ------------------前端(构建过程)
-JS Bundle -----------------前端(JS Bundle代码)
-↓ (部署) ------------------服务器
-在服务器上的JS bundle ----服务器
-↓ (编译) ------------------ 客户端(JS引擎)
-虚拟 DOM 树 --------------- 客户端(Weex JS Framework)
-↓ (渲染) ------------------ 客户端(渲染引擎)
-Native视图 --------------- 客户端(渲染引擎)
-```
-
-在上面的工作流中，我们提到:
-
-- Transformer（转换器): 一个Node JS工具， 转换Weex源码为JS Bundle
-- Weex JS Framework(JS框架): 运行于客户端的的JS框架，管理着Weex实例的运行。Weex实例由JS Bundle创建并构建起虚拟DOM树. 另外，它发送/接受 Native 渲染层产生的系统调用，从而间接的响应用户交互。
-- Native引擎: 在不同的端上，有着不同的实现: iOS/Android/HTML5. 他们有着共同的组件设计, 模块API 和渲染效果. 所以他们能配合同样的 JS Framework 和 JS Bundle工作。
-
-## 转换器
-
-转换器转换Weex源码为JS Bundle. 整体工作可以分为三个部分:
-
-- 转换 `<template>` 为类JSON的树状数据结构, 转换数据绑定为返回数据的函数原型.例如. For example: `<foo a="{% raw %}{{x}}{% endraw %}" b="1" />` 将转换为 `{type: "foo", attr: {a: function () {return this.x}, b: 1}}`.
-- 转换 `<style>` 为类JSON的树状数据结构. 例如: `.classname {name: value;}` 将转换为 `{classname: {name: value}}`.
-- 把上面两部分的内容和 `<script>` 中的内容结合. 上面的三个部分将结合成一个JavaScript AMD 模块.
-
-一个完整的例子:
-
-```html
-<template>
- <foo a="{{x}}" b="1" class="bar"></foo>
-</template>
-<style>
- .bar {width: 200; height: 200}
-</style>
-<script>
- module.exports = {
- data: function () {
- return {x: 100}
- }
- }
-</script>
-```
-
-将转换为:
-
-```javascript
-define('@weex-component/main', function () {
- module.exports = {
- data: function () {
- return {x: 100}
- }
- }
- module.template = {
- type: "foo",
- attr: {
- a: function () {return this.x},
- b: 1,
- classname: ['bar']
- }
- }
- module.style = {
- bar: {width: 200, height: 200}
- }
-})
-bootstrap('@weex-component/main')
-```
-
-除此之外,转换器还会做一些额外的事情: 合并Bundle ,添加引导函数，配置外部数据等等，更详细的，请参阅[Synatax](../references/specs/js-bundle-format.html)章节.
-
-## 注意
-
-当前大部分Weex工具最终输出的JS Bundle格式都经过了[Webpack](https://webpack.github.io/)的二次处理，所以你实际使用工具输出的JS Bundle会和上面的有所区别.
-## JS Framework
-
-JS Framework 在初始化阶段被原生 JavaScript 引擎运行. 它提供被每个JS Bundle调用的 `define()` 和 `bootstrap()` 函数. 一旦JS Bundle从服务器下载后，这些函数就会执行. `define()` 函数以注册模块;`bootstrap()`会编译主要的模块为虚拟DOM，并发送渲染指令给Native .
-
-JS 和 Native 的沟通主要通过两个关键方法进行:
-
-- `callNative` 是一个由native代码实现的函数, 它被JS代码调用并向native发送指令,例如 `rendering`, `networking`, `authorizing`和其他客户端侧的 `toast` 等API.
-- `callJS` 是一个由JS实现的函数, 它用于Native向JS发送指令. 目前这些指令由用户交互和Native的回调函数组成.
-## Native 渲染引擎
-
-Native 渲染引擎提供客户端组件和模块.
-
-**Component(组件)** 在屏幕内可见，有特定行为. 能被配置不同的属性和样式,能响应用户交互. 常见的组件有: `<div>`, `<text>`, `<image>`.
-
-**Module(模块)** 是一组能被JS Framework调用的API. 其中的一些能以异步的方式调用JS Framework, 例如: 发送HTTP请求.
-
-在Weex实例运行期间,Native渲染引擎将接收各种各样不同模块的API调用。这些调用创建或更新组件外观，运行如`toast`的Native API.当用户交互或模块回调时，`callJS()`会由JS Framework调用. 这样的循环往复将从Weex实例初始化到销毁一直持续. 如下面的架构图所示, HTML5渲染引擎提供和Native渲染引擎几乎一致的功能。
-
-
-
-Weex架构图
-
-### 从Javascript中调用Native
-
-```
-[JS Framework]
-↓ callNative
-模块 APIs
- 渲染 -> 模块显示
- 其他功能
-[Native 渲染引擎]
-```
-### 从Native中调用Javascript
-
-```
-[Native 渲染引擎]
-模块 APIs 回调
-用户交互
-↓ callJS
-[JS Framework]
-```
-### 渲染流程
-
-
-
-Weex 渲染流程
-
-1. 虚拟DOM.
-2. **构造树结构**. 分析虚拟DOM JSON数据以构造渲染树(RT).
-3. **添加样式**. 为渲染树的各个节点添加样式.
-4. **创建视图**. 为渲染树各个节点创建Native视图.
-5. **绑定事件**. 为Native视图绑定事件.
-6. **CSS布局**. 使用 [css-layout](https://github.com/facebook/css-layout) 来计算各个视图的布局.
-7. **更新视窗(Frame)**. 采用上一步的计算结果来更新视窗中各个视图的最终布局位置.
-8. 最终页面呈现.
-
-在Weex HTML5环境下 `CSS 布局` and `更新视窗` 由浏览器引擎(例如webkit)实现.
diff --git a/_drafts/v1.0/advanced/integrate-devtools-to-android.md b/_drafts/v1.0/advanced/integrate-devtools-to-android.md
deleted file mode 100644
index 5bffd05..0000000
--- a/_drafts/v1.0/advanced/integrate-devtools-to-android.md
+++ /dev/null
@@ -1,272 +0,0 @@
----
-title: 集成 Devtools 到 Android
-type: advanced
-order: 12
-has_chapter_content: true
-version: 0.10
----
-
-# 集成 Devtools 到 Android
-
-Weex Devtools 能够方便调试 Weex 页面，但此功能离不开 Native 的支持。如何让你的 App 也集成 Devtools，在本章将会详细说明 Android 端如何接入 Weex Devtools。
-
-## Android 应用接入
-
-### 添加依赖
-
-可以通过 Gradle 或者 Maven 添加对 devtools aar 的依赖，也可以直接对源码依赖。强烈建议使用最新版本，因为 Weex SDK 和 devtools 都在快速的迭代开发中，新版本会有更多惊喜，同时也修复老版本中一些问题。最新的 release 版本可在[这里](https://github.com/weexteam/weex_devtools_android/releases)查看。所有的 release 版本都会发布到 [jcenter repo](https://bintray.com/alibabaweex/maven/weex_inspector)。
-
-- *Gradle 依赖*
-
- ```gradle
- dependencies {
- compile 'com.taobao.android:weex_inspector:0.8.0.0'
- }
- ```
-
-- *Maven依赖*
-
- ```xml
- <dependency>
- <groupId>com.taobao.android</groupId>
- <artifactId>weex_inspector</artifactId>
- <version>0.8.0.0</version>
- <type>pom</type>
- </dependency>
- ```
-
-- *源码依赖*
-
- 需要复制 [inspector](https://github.com/weexteam/weex_devtools_android/tree/master/inspector) 目录到你的 App 的同级目录，然后在工程的 `settings.gradle` 文件下添加 `include ":inspector"`，此过程可以参考 playground 源码的工程配置及其配置，然后在 App 的 `build.gralde` 中添加依赖。
-
- ```gradle
- dependencies {
- compile project(':inspector')
- }
- ```
-
- 另外 weex_inspector 中有一部分包是以 provided 的方式引入，接入方需要自行解决依赖和版本冲突。
-
- - **provided方式引用的包**
-
- ```gradle
- dependencies {
- provided 'com.google.code.findbugs:jsr305:2.0.1'
- provided 'com.android.support:appcompat-v7:23.1.1'
- provided 'com.taobao.android:weex_sdk:0.8.0'
- provided 'com.alibaba:fastjson:1.1.45+'
- ...
- }
- ```
-
- - **反射引用的包(0.8.0.0以上版本)**
-
- ```gradle
- dependencies {
- compile 'com.squareup.okhttp:okhttp:2.3.0'
- compile 'com.squareup.okhttp:okhttp-ws:2.3.0'
- ...
- }
- ```
-
- 或者
-
- ```gradle
- dependencies {
- compile 'com.squareup.okhttp:okhttp:3.4.1'
- compile 'com.squareup.okhttp:okhttp-ws:3.4.1'
- ...
- }
- ```
-
-#### 版本兼容
-
-| weex sdk | weex inspector | Debugger 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 | - |
-
-
-### 添加 Debug 模式开关
-
-控制调试模式的打开和关闭的关键点可以概括为三条规则。
-
-**规则一：通过 `sRemoteDebugMode` 和 `sRemoteDebugProxyUrl` 和来设置开关和 Debugger Server 地址。**
-
-Weex SDK 的 `WXEnvironment` 类里有一对静态变量标记了 Weex 当前的调试模式是否开启分别是：
-
-```java
-public static boolean sRemoteDebugMode; // 是否开启 debug 模式，默认关闭
-public static String sRemoteDebugProxyUrl; // DebugServer的websocket地址
-```
-
-无论在 App 中无论以何种方式设置 Debug 模式，都必须在恰当的时机调用类似如下的方法来设置 `WXEnvironment.sRemoteDebugMode` 和 `WXEnvironment.sRemoteDebugProxyUrl`。
-
-```java
-private void initDebugEnvironment(boolean enable, String host) {
- WXEnvironment.sRemoteDebugMode = enable;
- WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native";
-}
-```
-
-**规则二：修改 `sRemoteDebugMode` 后一定要调用``WXSDKEngine.reload()`。**
-
-一般來說，在修改了 `WXEnvironment.sRemoteDebugMode` 以后调用了 `WXSDKEngine.reload()` 方法才能够使 Debug模式生效。`WXSDKEngine.reload()` 用来重置 Weex 的运行环境上下文，在切换调试模式时需要调用此方法来创建新的 Weex 运行时和 DebugBridge 并将所有的 JS 调用桥接到调试服务器执行。在 reload 过程中会调用 launchInspector，这就是 SDK 控制 Debug 模式最核心一个方法，其传入参数即为 `sRemoteDebugMode`，若为 `true` 则该方法中尝试以反射的方式获取 DebugBridge 用来在远端执行 JS，否则在本地运行。
-
-```java
-private void launchInspector(boolean remoteDebug) {
- if (WXEnvironment.isApkDebugable()) {
- try {
- if (mWxDebugProxy != null) {
- mWxDebugProxy.stop();
- }
- HackedClass<Object> debugProxyClass = WXHack.into("com.taobao.weex.devtools.debug.DebugServerProxy");
- mWxDebugProxy = (IWXDebugProxy) debugProxyClass.constructor(Context.class, WXBridgeManager.class)
- .getInstance(WXEnvironment.getApplication(), WXBridgeManager.this);
- if (mWxDebugProxy != null) {
- mWxDebugProxy.start();
- if (remoteDebug) {
- mWXBridge = mWxDebugProxy.getWXBridge();
- } else {
- if (mWXBridge != null && !(mWXBridge instanceof WXBridge)) {
- mWXBridge = null;
- }
- }
- }
- } catch (HackAssertionException e) {
- WXLogUtils.e("launchInspector HackAssertionException ", e);
- }
- }
-}
-```
-
-只要遵循上面的原理，开启 Debug 模式的方式和时机可由接入方灵活实现。从 launchInspector 可以看到，SDK 对 devtools 的 aar 包并无强依赖,我们的 App 只需要在 Debug 包中打包该 aar 即可，这样多少可以缓解包大小问题和安全问题。
-
-**例外：** _若修改 `WXEnvironment.sRemoteDebugMode` 的时机在 `WXBridgeManager` 初始化和 restart 和之前则 `WXSDKEngine.reload()` 可忽略._
-
-**规则三：通过响应 `ACTION_DEBUG_INSTANCE_REFRESH` 广播及时刷新。**
-
-广播 `ACTION_DEBUG_INSTANCE_REFRESH` 在调试模式切换和 Chrome 调试页面刷新时发出，主要用来通知当前的 Weex容器以 Debug 模式重新加载当前页。在 playground 中的处理过程如下：
-
-```java
-public class RefreshBroadcastReceiver extends BroadcastReceiver {
- @Override
- public void onReceive(Context context, Intent intent) {
- if (IWXDebugProxy.ACTION_DEBUG_INSTANCE_REFRESH.equals(intent.getAction())) {
- if (mUri != null) {
- if (TextUtils.equals(mUri.getScheme(), "http") || TextUtils.equals(mUri.getScheme(), "https")) {
- loadWXfromService(mUri.toString());
- } else {
- loadWXfromLocal(true);
- }
- }
- }
- }
-}
-```
-
-如果接入方的容器未对该广播做处理，那么将不支持刷新和调试过程中编辑代码时的 watch 功能。
-
-## 接入示例
-
-最简单方式就是复用 Playground 的相关代码，比如扫码和刷新等模块，但是扫码不是必须的，它只是与 App 通信的一种形式，二维码里的包含DebugServer IP 及 bundle 地址等信息，用于建立 App 和 Debugger Server 之间的连接及动态加载 bundle。在 Playground 中给出了两种开启 debug 模式的范例。
-
-* 范例1：通过在 `XXXApplication` 中设置开关打开调试模式
-
-```java
-public class MyApplication extends Application {
- public void onCreate() {
- super.onCreate();
- initDebugEnvironment(true, "xxx.xxx.xxx.xxx"/*"DEBUG_SERVER_HOST"*/);
- }
-}
-```
-
-这种方式最直接，在代码中直接 hardcode 了开启调试模式，如果在 SDK 初始化之前调用甚至连 `WXSDKEngine.reload()` 都不需要调用，接入方如果需要更灵活的策略可以将 `initDebugEnvironment(boolean enable, String host)` 和 `WXSDKEngine.reload()` 组合在一起在合适的位置和时机调用即可。
-
-* 范例2：通过扫码打开调试模式
-
-Playground 中较多的使用扫码的方式传递信息，不仅用这种方式控制 Debug 模式的开关,而且还通过它来传入 bundle 的 url 直接调试。应当说在开发中这种方式是比较高效的，省去了修改 SDK 代码重复编译和安装 App 的麻烦，缺点就是调试工具这种方式接入需要 App 具有扫码和处理特定规则二维码的能力。除了 Playground 中的方式，接入方亦可根据业务场景对 Debugger 和接入方式进行二次开发。
-
-Playground 集成的具体代码可参考如下两个文件：
-
-* 开关控制，主要参考对二维码的处理部分，详见 [`WXApplication.java`](https://github.com/weexteam/weex_devtools_android/blob/master/playground/app/src/main/java/com/alibaba/weex/WXApplication.java)
-
-* 刷新控制 ，主要参考是对容器 `ACTION_DEBUG_INSTANCE_REFRESH`的处理，详见 [`WXPageActivity.java`](https://github.com/weexteam/weex_devtools_android/blob/master/playground/app/src/main/java/com/alibaba/weex/WXPageActivity.java)
-
-## 牛刀小试
-
-### 前置工作
-
-如果未安装 Debugger Server，在命令行执行 `npm install -g weex-toolkit` 既可以安装调试服务器，运行命令 `weex debug` 就会启动 DebugServer 并打开一个调试页面（详情请查看 [本地开发](/develop-on-your-local-machine.md)）。页面下方会展示一个二维码，这个二维码用于向 App 传递 Server 端的地址建立连接。
-
-
-
-### 开始调试
-
-如果你的 App 客户端完成了以上步骤那么恭喜你已经接入完毕，可以愉快的调试 Weex bundle 了，调试体验和网页调试一致！建议新手首先用官方的 Playground 体验一下调试流程。只需要启动 App 扫描 Chrome 调试页面下方的第一个二维码即可建立与 Debugger Server 的通信，Chorome 的调试页面将会列出连接成功的设备信息。
-
-
-
-#### 主要步骤如下
-
-1. 如果你要加载服务器上 bundle，第一步就是要让你的 bundle sever 跑起来. 在 Playground 中特别简单，只需要你到 Weex 源码目录下，运行 `./start` 即可。
-2. 命令行运行 `weex debug` 启动 Debugger Server，Chrome 将会打开一个网页，在网页下方有一个二维码和简单的介绍。
-3. 启动 App 并确认打开调试模式。你将在上一步中打开的网页中看到一个设备列表，每个设备项都有两个按钮，分别是 `Debugger` 和 `Inspector`。
-4. 点击 `Inspector` Chrome 将创建 Inspector 网页；点击 `Debugger` Chrome 将创建 Debugger 网页；二者是相互独立的功能，不相互依赖。
-
----
-
-## 背景知识
-
-### Devtools 组件介绍
-Devtools 扩展了 [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol)，在客户端和调试服务器之间的采用 [JSON-RPC](https://en.wikipedia.org/wiki/JSON-RPC) 作为通信机制，本质上调试过程是两个进程间协同，相互交换控制权及运行结果的过程。更多细节还请阅读 [Weex Devtools Debugger 的技术选型实录](http://www.atatech.org/articles/59284)这篇文章。
-
-* **客户端**
-
- Devtools 客户端作为 aar 被集成 App 中，它通过 webscoket 连接到调试服务器，此处并未做安全检查。出于安全机制及包大小考虑，强烈建议接入方只在 debug 版本中打包此 aar。
-
-* **服务器**
-
- Devtools 服务器端是信息交换的中枢，既连接客户端，又连接 Chrome，大多数情况下扮演一个消息转发服务器和 Runtime Manager 的角色。
-
-* **Web端**
-
- Chrome 的 V8 引擎扮演着 Bundle javascript runtime 的角色。开启 debug 模式后，所有的 bundle js 代码都在该引擎上运行。另一方面我们也复用了 Chrome 前端的调试界面，例如设置断点，查看调用栈等，调试页关闭则 runtime 将会被清理。
-
-调试的大致过程请参考如下时序图。
-
-
-
-## FAQ
-
-在各业务接入过程中，陆续发现一些问题，对高频次的问题解答如下，开发中以 weex debug -V 的方式启动 Debugger Server 可以看到 server 端的 log 信息，对照上文中的时序图对于定位问题还是非常有帮助，建议调试中默认开启 server 端 log。
-
-1. **扫码 App 在 DebugServerProxy 中抛出 class not found**
-
- 已知的原因如下：
-
- * weex_inspector 以 provided 方式引用的包是否引入成功，如 fastjson 等。
- * weex_inspector 以 compile 方式引用的包是否引入成功，某些 app 重新引入 `com.squareup.okhttp:okhttp:2.3.0` 和 `com.squareup.okhttp:okhttp-ws:2.3.0` 则不再报错。
- * 混淆规则影响反射。
-
-2. **playground 扫码调试 crash**
-
- 已知的原因如下：
-
- * 系统为 android 6+，崩溃信息提示进程需要 `android.permission.READ_PHONE_STATE` 权限，代码中未做权限检查，在 0.0.2.7 版本以后已修复，不再需要此权限。
-
-3. **扫码后设备列表页并没有出现我的设备信息**
-
- 已知的原因如下：
-
- * Debugger Server 和手机在不同网段，被防火墙隔离。
- * 手机连接了 PC 端的代理，当前尚不支持。
- * 多进程连接服务器端的同一端口，比如在 Application 的 `onCreate` 中初始化 sdk，若多个进程连接服务器端的同一端口则报错，在 0.0.2.3 版本以后已支持多进程无此问题。
-
-4. **调试过程中频繁刷新连接失败，Server 端提示重新启动 App，非必现**
-
- 已知的原因如下：
-
- * 多线程操作网络连接引起，在频繁的即断即连时容易触发。在 0.0.7.1 版本已修复。
diff --git a/_drafts/v1.0/advanced/integrate-devtools-to-ios.md b/_drafts/v1.0/advanced/integrate-devtools-to-ios.md
deleted file mode 100644
index 18e0050..0000000
--- a/_drafts/v1.0/advanced/integrate-devtools-to-ios.md
+++ /dev/null
@@ -1,230 +0,0 @@
----
-title: 集成 Devtools 到 iOS
-type: advanced
-order: 13
-has_chapter_content: true
-version: 0.10
----
-
-# 集成 Devtools 到 iOS
-
-Weex Devtools 能够方便调试 Weex 页面，但此功能离不开 Native 的支持。如何让你的 App 也集成 Devtools，在本章将会详细说明 iOS 端如何接入 Weex Devtools。
-
-## iOS 应用接入
-
-### 添加依赖
-
-#### 方法一：cocoapods 依赖
-
-在工程目录的 podfile 添加如下代码
-
-```
-source https://github.com/CocoaPods/Specs.git，
-pod 'WXDevtool', '0.7.0', :configurations => ['Debug']，
-```
-
-目前有如下几个版本：
-
-0.7.0, 0.6.1, 0.1.1, 0.1.0 [master repo]
-
----
-
-可以通过更新本地 podspec repo，pod search 来查询最新版本，在 podfile 文件添加依赖。
-
-
-*** 推荐在DEBUG模式下依赖。 ***
-
-#### 方法二：github 源码依赖
-
-
-1. [拉取](https://github.com/weexteam/weex-devtool-iOS)最新的WXDevtool代码。
-
-2. 按照如下图示：直接拖动source目录源文件到目标工程中
-
- 
-
-3. 按照红框中配置勾选
-
- 
-
-
- 在相对较大的互联网App研发中, framework 静态库被广泛应用，所以推荐使用方法一接入。
-
-### 集成功能
-
-如果按照方法一接入：podfile 的方式，添加头文件包含：
-
-```
-#import <TBWXDevtool/WXDevtool.h>
-```
-
-如果按照方法二接入：源码依赖的方式，添加头文件包含：
-
-```
-#import "WXDevtool.h"
-```
-
-查看 WXDevtool 头文件如下：
-
-```object-c
-#import <Foundation/Foundation.h>
-
-@interface WXDevTool : NSObject
-/**
-* set debug status
-* @param isDebug : YES:open debug model and inspect model;
-* default is NO,if isDebug is NO, open inspect only;
-* */
-+ (void)setDebug:(BOOL)isDebug;
-
-
-/**
-* get debug status
-* */
-+ (BOOL)isDebug;
-
-
-/**
-* launch weex debug
-* @param url : ws://ip:port/debugProxy/native, ip and port is your devtool server address
-* eg:@"ws://30.30.29.242:8088/debugProxy/native"
-* */
-+ (void)launchDevToolDebugWithUrl:(NSString *)url;
-
-@end
-```
-
-`setDebug`：参数为 `YES` 时，直接开启 debug 模式，反之关闭，使用场景如下所述
-
-在你自己的程序中添加如下代码：
-
-```object-c
-[WXDevTool launchDevToolDebugWithUrl:@"ws://30.30.31.7:8088/debugProxy/native"];
-```
-
-其中的 ws 地址正是 Weex debug 控制台中出现的地址，直接 copy 到 `launchDevToolDebugWithUrl` 接口中。
-
-如果程序一启动就开启 Weex 调试，**需要在 WeexSDK 引擎初始化之前**添加代码：
-
-```object-c
-[WXDevTool setDebug:YES];
-[WXDevTool launchDevToolDebugWithUrl:@"ws://30.30.31.7:8088/debugProxy/native"];
-```
-
-#### 附加页面刷新功能
-
-- 为什么需要页面刷新功能？
-
- 如下图所示，当点击 debug 按钮时，js 的运行环境会从手机端（JavaScriptCore）切换到 Chrome（V8），这时需要重新初始化 Weex 环境，重新渲染页面。页面渲染是需要接入方在自己的页面添加。
-
- 
-
-- 什么场景下需要添加页面刷新功能?
-
- - 点击 debug 按钮调试
- - 切换 RemoteDebug 开关
- - 刷新 Chrome 页面（command+R）
-
-- 如何添加刷新
-
- 在 Weex 页面初始化或 `viewDidLoad` 方法时添加注册通知，举例如下：
-
- ```object-c
- [[NSNotificationCenter defaultCenter] addObserver:self selector:notificationRefreshInstance: name:@"RefreshInstance" object:nil];
- ```
-
- 最后**千万记得**在 `dealloc` 方法中取消通知，如下所示
-
- ```
- - (void)dealloc
- {
- [[NSNotificationCenter defaultCenter] removeObserver:self];
- }
- ```
-
- 页面刷新实现，先销毁当前 instance，然后重新创建 instance，举例如下:
-
- ```
- - (void)render
- {
- CGFloat width = self.view.frame.size.width;
- [_instance destroyInstance];
- _instance = [[WXSDKInstance alloc] init];
- _instance.viewController = self;
- _instance.frame = CGRectMake(self.view.frame.size.width-width, 0, width, _weexHeight);
-
- __weak typeof(self) weakSelf = self;
- _instance.onCreate = ^(UIView *view) {
- [weakSelf.weexView removeFromSuperview];
- weakSelf.weexView = view;
- [weakSelf.view addSubview:weakSelf.weexView];
- UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, weakSelf.weexView);
- };
- _instance.onFailed = ^(NSError *error) {
-
- };
-
- _instance.renderFinish = ^(UIView *view) {
- [weakSelf updateInstanceState:WeexInstanceAppear];
- };
-
- _instance.updateFinish = ^(UIView *view) {
- };
- if (!self.url) {
- return;
- }
- NSURL *URL = [self testURL: [self.url absoluteString]];
- NSString *randomURL = [NSString stringWithFormat:@"%@?random=%d",URL.absoluteString,arc4random()];
- [_instance renderWithURL:[NSURL URLWithString:randomURL] options:@{@"bundleUrl":URL.absoluteString} data:nil];
- }
- ```
-
-具体实现可参考 [playground](https://github.com/weexteam/weex-devtool-iOS/blob/master/Devtools/playground/WeexDemo/WXDemoViewController.m) `WXDemoViewController.m` 文件
-
-*说明：目前版本需要注册的通知名称为固定的 “RefreshInstance”，下个版本会添加用户自定义 name 。*
-
-## 使用
-
-如果未安装 Debugger Server，在命令行执行 `npm install -g weex-toolkit` 既可以安装调试服务器，运行命令 `weex debug` 就会启动 DebugServer 并打开一个调试页面（详情请查看 [本地开发](../guide/develop-on-your-local-machine.html)）。页面下方会展示一个二维码，这个二维码用于向 App 传递 Server 端的地址建立连接。
-
-
-1. 日志级别控制
-
- 
- 日志级别可以控制native端关于weex的日志。
-
- 日记级别描述如下：
-
- ```
- Off = 0,
- Error = Error
- Warning = Error | Warning,
- Info = Warning | Info,
- Log = Log | Info,
- Debug = Log | Debug,
- All = NSUIntegerMax
- ```
-
- 解释：off 关闭日志，Warning 包含 Error、Warning，Info 包含 Warning、Info，Log 包含 Info、Log，Debug 包含 Log、Debug，All 包含所有。
-
-2. Vdom/Native tree选择
-
- 
-
- *图一*
-
- 
-
- *图二*
-
- 点击图一所示native选项会打开图二，方便查看native tree以及view property
-
- 
-
- *图三*
-
- 
-
- *图四*
-
- 点击图三所示 vdom 选项会打开图四，方便查看 vdom tree 以及 component property。
diff --git a/_drafts/v1.0/advanced/integrate-to-android.md b/_drafts/v1.0/advanced/integrate-to-android.md
deleted file mode 100644
index b5bbf8c..0000000
--- a/_drafts/v1.0/advanced/integrate-to-android.md
+++ /dev/null
@@ -1,201 +0,0 @@
----
-title: 集成到 Android
-type: advanced
-order: 4
-has_chapter_content: true
-version: 0.10
----
-
-# WEEX SDK 集成到 Android 工程
-
-注：以下文档都是假设您已经具备一定的Android开发经验。
-### Android 集成有两种方式
-
-1. 源码依赖：能够快速使用WEEX最新功能，可以根据自己项目的特性进行相关改进。
-2. SDK依赖：WEEX 会在jcenter 定期发布稳定版本。[jcenter](https://bintray.com/alibabaweex/maven/weex_sdk/view)
- 注:国内可能需要翻墙
-
-## 前期准备
-
-- 已经安装了[JDK](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) version>=1.7 并配置了环境变量
-- 已经安装[Android SDK](https://developer.android.com/studio/index.html) 并配置环境变量。
-- Android SDK version 23 (compileSdkVersion in [`build.gradle`](https://github.com/apache/incubator-weex/blob/master/android/sdk/build.gradle))
-- SDK build tools version 23.0.1 (buildToolsVersion in [`build.gradle`](https://github.com/apache/incubator-weex/blob/master/android/sdk/build.gradle))
-- Android Support Repository >= 17 (for Android Support Library)
-
-## 快速接入
-
-如果你是尝鲜或者对稳定性要求比较高可以使用依赖SDK的方式。
-步骤如下：
-1. 创建Android工程，没有什么要特别说明的，按照你的习惯来。
-2. 修改build.gradle 加入如下基础依赖
-
- ```gradle
- compile 'com.android.support:recyclerview-v7:23.1.1'
- compile 'com.android.support:support-v4:23.1.1'
- compile 'com.android.support:appcompat-v7:23.1.1'
- compile 'com.alibaba:fastjson:1.1.46.android'
- compile 'com.taobao.android:weex_sdk:0.5.1@aar'
- ```
-
- 注:版本可以高不可以低。
-### 代码实现
-
-注:附录中有完整代码地址
-- 实现图片下载接口，初始化时设置。
-
-```java
-package com.weex.sample;
-
-import android.widget.ImageView;
-
-import com.taobao.weex.adapter.IWXImgLoaderAdapter;
-import com.taobao.weex.common.WXImageStrategy;
-import com.taobao.weex.dom.WXImageQuality;
-
-/**
- * Created by lixinke on 16/6/1.
- */
-public class ImageAdapter implements IWXImgLoaderAdapter {
-
-
- @Override
- public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
- //实现你自己的图片下载，否则图片无法显示。
- }
-}
-```
-- 初始化
-
-```java
-package com.weex.sample;
-
-import android.app.Application;
-
-import com.taobao.weex.InitConfig;
-import com.taobao.weex.WXSDKEngine;
-
-/**
- * 注意要在Manifest中设置android:name=".WXApplication"
- * 要实现ImageAdapter 否则图片不能下载
- * gradle 中一定要添加一些依赖，否则初始化会失败。
- * compile 'com.android.support:recyclerview-v7:23.1.1'
- * compile 'com.android.support:support-v4:23.1.1'
- * compile 'com.android.support:appcompat-v7:23.1.1'
- * compile 'com.alibaba:fastjson:1.1.45'
- */
-public class WXApplication extends Application {
-
- @Override
- public void onCreate() {
- super.onCreate();
- InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
- WXSDKEngine.initialize(this,config);
- }
-}
-
-```
-- 开始渲染
-
-```java
-package com.weex.sample;
-
-import android.os.Bundle;
-import android.support.v7.app.AppCompatActivity;
-import android.view.View;
-
-import com.taobao.weex.IWXRenderListener;
-import com.taobao.weex.WXSDKInstance;
-import com.taobao.weex.common.WXRenderStrategy;
-import com.taobao.weex.utils.WXFileUtils;
-
-public class MainActivity extends AppCompatActivity implements IWXRenderListener {
-
- WXSDKInstance mWXSDKInstance;
-
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
-
- mWXSDKInstance = new WXSDKInstance(this);
- mWXSDKInstance.registerRenderListener(this);
- /**
- * WXSample 可以替换成自定义的字符串，针对埋点有效。
- * template 是.we transform 后的 js文件。
- * option 可以为空，或者通过option传入 js需要的参数。例如bundle js的地址等。
- * jsonInitData 可以为空。
- * width 为-1 默认全屏，可以自己定制。
- * height =-1 默认全屏，可以自己定制。
- */
- mWXSDKInstance.render("WXSample", WXFileUtils.loadFileContent("hello.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
- }
-
- @Override
- public void onViewCreated(WXSDKInstance instance, View view) {
- setContentView(view);
- }
-
- @Override
- public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
-
- }
-
- @Override
- public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
-
- }
-
- @Override
- public void onException(WXSDKInstance instance, String errCode, String msg) {
-
- }
-
-
- @Override
- protected void onResume() {
- super.onResume();
- if(mWXSDKInstance!=null){
- mWXSDKInstance.onActivityResume();
- }
- }
-
- @Override
- protected void onPause() {
- super.onPause();
- if(mWXSDKInstance!=null){
- mWXSDKInstance.onActivityPause();
- }
- }
-
- @Override
- protected void onStop() {
- super.onStop();
- if(mWXSDKInstance!=null){
- mWXSDKInstance.onActivityStop();
- }
- }
-
- @Override
- protected void onDestroy() {
- super.onDestroy();
- if(mWXSDKInstance!=null){
- mWXSDKInstance.onActivityDestroy();
- }
- }
-}
-```
-
-## 源码依赖(IDE Android Studio)
-
-1. 下载源码 `git clone https://github.com/alibaba/weex`
-2. 创建 Android 工程。
-3. 通过以下路径引入 SDK Module
- File->New-Import Module-> 选择 WEEX SDK Module(weex/android/sdk) -> Finish
-4. app 的 build.gradle 中添加如下依赖:`compile project(':weex_sdk')`
-5. 其他设置请参考上面快速接入
-
-### 附录
-
-WXSample地址
-`https://github.com/xkli/WXSample.git`
diff --git a/_drafts/v1.0/advanced/integrate-to-html5.md b/_drafts/v1.0/advanced/integrate-to-html5.md
deleted file mode 100644
index 30ee3fd..0000000
--- a/_drafts/v1.0/advanced/integrate-to-html5.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: 集成到 web
-type: advanced
-order: 6
-has_chapter_content: true
-version: 0.10
----
-
-## 项目中引入 html5 版 Weex
-
-### 简介
-
-Weex 是一个跨平台可扩展的动态化移动框架，能够真正帮助开发者实现'一次开发，到处运行'。由 Weex 提供的相关工具进行打包好的 bundle 文件可以运行在 android, ios 以及 web（这里我们也称之为html5）平台的渲染器上。Weex HTML5 是一个专用于在移动端 webview 以及各种现代浏览器上渲染 weex 文件的渲染器。
-### 获取 Weex HTML5
-
-使用 npm 安装最新版本的 Weex HTML5，并在你的项目中 require 进来。
-#### 从 npm 安装
-
-请确保通过 `npm install` 或者 `npm update` 获取 Weex HTML5 的最新版本 npm 包。更多关于 npm 的信息情查阅 [npm 官方网站](https://docs.npmjs.com/)。
-
-```bash
-npm install weex-html5
-```
-
-通过 require 引入 weex-html5:
-
-```bash
-var weex = require('weex-html5')
-```
-
-**注意:** 介于 Weex 目前仍处于开源内测阶段，还没有完全开放源代码，因此 `weex-jsframework` 可能还没有在 npm 上发布。当前版本的 `weex-html5` 包含了 `weex-jsframework`，你只需要 require `weex-html5` 即可暂时在 web 平台上运行 weex 代码。建议关注 Weex 的后续版本发布并做必要的引用方式调整。
-### 初始化 Weex
-
-你可以通过 Weex 暴露的 API `init` 来初始化一个 Weex 实例。这个方法需要传递一些配置信息已确定一些环境变量等信息，这些配置信息介绍如下：
-- `appId`: Weex 实例的 id，可以是任意字符串或者数字，并注意不要重复.
-- `source`: 请求的 Weex bundle 文件地址，或者 Weex bundle 文件代码本身，取决于下面的 loader 配置.
-- `loader`: 加载器类型，用于加载 weex bundle，值可以是 'xhr', 'jsonp' 或者 'source'.
- - `xhr`: 通过 XMLHttpRequest 加载 source(即 weex bundle 的 url 地址).
- - `jsonp`: 通过 JSONP 加载 weex bundle.
- - `source`: 直接接受 weex bundle 的代码作为参数.
-- `rootId`: root 容器的 id，默认容器 id 是 'weex'.
-
-以下是一个 Weex 初始化的示例:
-
-``` javascript
-function weexInit() {
- function getUrlParam (key) {
- var reg = new RegExp('[?|&]' + key + '=([^&]+)')
- var match = location.search.match(reg)
- return match && match[1]
- }
-
- var loader = getUrlParam('loader') || 'xhr'
- var page = getUrlParam('page')
-
- // 需要指定一个jsonp回调函数名称，如果没有则用默认值'weexJsonpCallback'
- var JSONP_CALLBACK_NAME = 'weexJsonpCallback'
-
- window.weex.init({
- jsonpCallback: JSONP_CALLBACK_NAME,
- appId: location.href,
- source: page,
- loader: loader,
- rootId: 'weex'
- })
-}
-
-weexInit()
-```
diff --git a/_drafts/v1.0/advanced/integrate-to-ios.md b/_drafts/v1.0/advanced/integrate-to-ios.md
deleted file mode 100644
index 54a5ca7..0000000
--- a/_drafts/v1.0/advanced/integrate-to-ios.md
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: 集成到 iOS
-type: advanced
-order: 5
-has_chapter_content: true
-version: 0.10
----
-
-# Weex SDK 集成到 iOS
-
-### cocoaPods 引入 Weex iOS SDK到工程
-
-可以通过源码编译出 Weex SDK，可以在新的 feature 或者 bugfix 分支，尝试最新的 feature
-#### cocoaPods集成
-
- 假设你已经完成了安装[iOS 开发环境](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html) 和 [CocoaPods](https://guides.cocoapods.org/using/getting-started.html)
-
-1. 从 github 上 clone 一份代码
-
- ```
- git clone https://github.com/alibaba/weex.git
- ```
-
-2. 把 WeexSDK 导入到你已有的项目，如果没有，可以[参考](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html)新建项目
- 拷贝 `ios/sdk` 下面目录到你的项目目录，在添加依赖之前，确保项目目录有 `Podfile`，如果没有，创建一个，用文本编辑器打开，添加如下依赖
-
- 如果使用正式版本如 0.6.1 的，就不需要做 拷贝 `ios/sdk` 这个操作，直接引用 cocoaPods 的 master repo 上就可以，这个需要在 Podfile 最前面添加
-
- ```
- source 'https://github.com/CocoaPods/Specs.git'
- ```
-
- ```object-c
- target 'YourTarget' do
- platform :ios, '7.0'
- pod 'WeexSDK', :path=>'./sdk/' # pod 'WeexSDK', '0.6.1'
- end
- ```
-
- 在命令行（terminal）中，切换到当前目录，运行 `pod install`, 过一会，项目的 .workspace 结尾的文件就被创建出来，到这步，依赖已经添加完了
-
-3. 初始化 Weex 环境
- 在 AppDelegate.m 文件中做初始化操作，一般会在 `didFinishLaunchingWithOptions` 方法中如下添加
-
- ```object-c
- //business configuration
- [WXAppConfiguration setAppGroup:@"AliApp"];
- [WXAppConfiguration setAppName:@"WeexDemo"];
- [WXAppConfiguration setAppVersion:@"1.0.0"];
-
- //init sdk enviroment
- [WXSDKEngine initSDKEnviroment];
-
- //register custom module and component，optional
- [WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];
- [WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
-
- //register the implementation of protocol, optional
- [WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
-
- //set the log level
- [WXLog setLogLevel: WXLogLevelAll];
- ```
-
-4. 渲染 weex Instance
- Weex 支持整体页面渲染和部分渲染两种模式，你需要做的事情是用指定的 URL 渲染 weex 的 view，然后添加到它的父容器上，父容器一般都是 viewController
-
- ```object-c
- #import <WeexSDK/WXSDKInstance.h>
- - (void)viewDidLoad
- {
- [super viewDidLoad];
-
- _instance = [[WXSDKInstance alloc] init];
- _instance.viewController = self;
- _instance.frame = self.view.frame;
-
- __weak typeof(self) weakSelf = self;
- _instance.onCreate = ^(UIView *view) {
- [weakSelf.weexView removeFromSuperview];
- [weakSelf.view addSubview:weakSelf.weexView];
- };
-
- _instance.onFailed = ^(NSError *error) {
- //process failure
- };
-
- _instance.renderFinish = ^ (UIView *view) {
- //process renderFinish
- };
- [_instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
- }
- ```
-
- WXSDKInstance 是很重要的一个类，提供了基础的方法和一些回调，如`renderWithURL`,`onCreate`,`onFailed`等，可以参见 `WXSDKInstance.h`的 声明
-
-5. 销毁 Weex Instance
-
- 在 viewController 的 dealloc 阶段 销毁掉 weex instance， 释放内存，避免造成内存泄露
-
- ```object-c
- - (void)dealloc
- {
- [_instance destroyInstance];
- }
- ```
-
-### 导入 Weex SDK framework到工程
-
- 参考[此处](https://open.taobao.com/doc2/detail?spm=a219a.7629140.0.0.tFddsV&&docType=1&articleId=104829)直接导入weexSDK
diff --git a/_drafts/v1.0/blog/index.md b/_drafts/v1.0/blog/index.md
deleted file mode 100644
index ef7b31d..0000000
--- a/_drafts/v1.0/blog/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
-type: blog
-index: true
-layout: blog
----
\ No newline at end of file
diff --git a/_drafts/v1.0/guide/develop-on-your-local-machine.md b/_drafts/v1.0/guide/develop-on-your-local-machine.md
deleted file mode 100644
index 276a9f9..0000000
--- a/_drafts/v1.0/guide/develop-on-your-local-machine.md
+++ /dev/null
@@ -1,175 +0,0 @@
----
-title: 如何在本地开发 Weex 页面
-type: guide
-order: 2
-has_chapter_content: true
-version: 0.10
----
-
-# 如何在本地开发 Weex 页面
-
-使用 [dotWe](http://dotwe.org) 对 Weex 尝鲜是一个不错的选择，但如果你想更专业的开发 Weex， [dotWe](http://dotwe.org) 就不怎么够用了。本章会教你如何搭建本地开发环境进行 Weex 开发。
-
-## 第一步：安装依赖
-
-首先，你需要 Node.js 和 weex-toolkit。
-
-安装 Node.js 方式多种多样，最简单的方式是在 [Node.js 官网](https://nodejs.org/en/) 下载可执行程序直接安装即可。
-
-对于 Mac，可以使用 [Homebrew](http://brew.sh/) 进行安装：
-
-```bash
-brew install node
-```
-
-> 更多安装方式可参考 [Node.js 官方信息](https://nodejs.org/en/download/)
-
-安装完成后，可以使用以下命令检测是否安装成功：
-
-```bash
-$ node -v
-v6.3.1
-$ npm -v
-3.10.3
-```
-
-通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit。
-
-> npm 是一个 JavaScript 包管理工具，它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区，同样，Weex 也将很多工具发布到社区方便开发者使用。
-
-```bash
-$ npm install -g weex-toolkit
-```
-
-国内开发者可以考虑使用淘宝的 npm 镜像 —— [cnpm](https://npm.taobao.org/) 安装 weex-toolkit
-
-```bash
-$ npm install -g cnpm
-$ cnpm install -g weex-toolkit
-```
-
-*提示：*
-
-如果提示权限错误（*permission error*），使用 `sudo` 关键字进行安装
-
-```bash
-$ sudo cnpm install -g weex-toolkit
-```
-
-安装结束后你可以直接使用 `weex` 命令验证是否安装成功，它会显示 `weex` 命令行工具各参数：
-
-
-
-## 第2步：创建文件
-
-现在可以开始编写代码了。首先，我们创建一个 `.we` 文件（Weex 程序的文件后缀（扩展名）是 `.we`）。
-
-打开空白的 `hello.we` 文件，输入三个标签，内容为：
-
-```html
-<template>
-</template>
-
-<style>
-</style>
-
-<script>
-</script>
-```
-
-我们在 [Get started](./index.md) 里已经介绍过 Weex 基本的代码结构：`<template>`、`<style>`、`<script>` 分别对应于 Web 中的 HTML，CSS（`<style>` 标签），JavaScript（`<script>` 标签）。
-
-其实，上面的代码就是最简单的 Weex 程序。但是 `.we` 文件是不能直接运行的，这时候需要使用刚才安装好的 weex-toolkit。weex-toolkit 会编译 `.we` 文件，并且创建静态服务器。
-
-这里，使用 `weex hello.we` 命令编译该程序。
-
-```bash
-$ weex hello.we
-```
-
-这时，命令行会做几件事：
-
-- 编译 `.we` 文件；
-- 启动热加载服务；
-- 启动静态服务器；
-- 拉起浏览器，访问 `http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=hello.js&loader=xhr`
-
-这时候，已经可以在浏览器预览 Weex 页面了。不过此时页面是空白的，因为 `.we` 文件中没有任何实质的内容。
-
-## 第3步：添加内容
-
-修改 `weex.we` 文件，向 `<template>` 标签中添加内容。具体代码如下：
-
-```html
-<template>
- <div>
- <text>Hello world</text>
- </div>
-</template>
-
-<style></style>
-
-<script></script>
-```
-
-保存代码后，浏览器会自动刷新页面，这时会看到浏览器显示了 “Hello world”。
-
-## 第4步：添加样式
-
-现在，对已有的文本内容进行样式修饰。这里将文本颜色设置为红色，字体大小为 50 像素。具体代码如下：
-
-```html
-<template>
- <div>
- <text class="text" style="color: #FF0000;">Hello world</text>
- </div>
-</template>
-
-<style>
- .text{
- font-size: 50;
- }
-</style>
-
-<script></script>
-```
-
-这时候，浏览器已经重新载入了页面。其实，是weex-toolkit开启了热加载。可以看到红色的 “Hello world”。
-
-**注意：**
-Weex 支持通过 `style` 标签来设定样式，也支持内联样式风格。 对于数值，无需添加任何单位（包括 px、em、rem 等），这是建议的写法。如需了解有哪些通用的样式，可以参考 [通用样式](../references/common-style.md)。
-
-## 第5步：预览
-
-已经在浏览器中看到了刚才的代码效果，为了验证三端是否一致，我们还需 [Playground App](https://alibaba.github.io/weex/download.html) 验证。
-
-这里，我们需要为 `weex hello.we` 增加 `--qr` 参数，表示生成二维码。
-
-```bash
-$ weex hello.we --qr
-```
-
-然后，使用 [Playground](https://alibaba.github.io/weex/download.html) 扫码即可。
-
-
-
-## 第6步：调试
-
-weex-toolkit 已经集成了 Debugger，只需要使用如下命令即可开启 Debugger 开关调试 `hello.we`：
-
-```bash
-$ weex debug hello.we
-```
-
-我们输入以上命令开启，会自动打开浏览器，页面上有两个二维码，第一个是 Debugger Server，第二个是 `.we` 文件的地址。我们在 Playground 中先扫第一个，此时浏览器会进入一个新的页面，请你选择你需要的调试模式：
-
-- Debugger：将会打开 js debugger 页面，您可以通过 debugger 页面调试 js（诸如打断点 查看js log 和查看调用堆栈等信息）；
-- Inspector：将会打开 inspector 页面，您可以通过这个页面查看 Weex 页面的 element 属性结构，包含高亮元素，展示样式表，以及显示 native 的 log。同时可以打开一个远程的手机镜像，便于查看界面。另外调试方块中的 ElementMode 可以用来选择 element 树显示原始的 native 组件树还是显示面向前端同学的 DSL （HTML）组件树。
-
-选择一种模式后会新开窗口进入调试页面，这时我们再扫第二个二维码即可进入我们想要调试的页面进行调试了。
-
-## 接下来做什么？
-
-到目前为止，你已经可以在 [dotWe](http://dotwe.org) 或者本地开发 Weex 页面。接下来你可以去学习 Weex [语法](./syntax/main.md) 和 [开发手册](../references/main.md) 了解 Weex 更多特性。这些语法和特性，你完全可以用 [Playground](https://alibaba.github.io/weex/download.html) 运行起来。
-
-如果你已经熟悉 Weex 开发，你应该考虑如何让你的 App 也支持 Weex 页面，或者，怎样用 Weex 开发一个全新的 App 呢？带着这些问题，你可以阅读 [开发进阶](./how-to/main.md)。
diff --git a/_drafts/v1.0/guide/how-to/debug-with-html5.md b/_drafts/v1.0/guide/how-to/debug-with-html5.md
deleted file mode 100644
index c4ba245..0000000
--- a/_drafts/v1.0/guide/how-to/debug-with-html5.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: 在浏览器中调试
-type: guide
-order: 4.2
-version: 0.10
----
-
-# 如何在浏览器中调试？
-
-由于 weex-html5 可以在现代移动浏览器上运行，因此自然支持在浏览器的开发工具中调试 weex-html5 代码。下面将介绍如何使用浏览器的 devTools 调试和分析 weex-html5 程序。以chrome的调试工具为例：
-
-
-
-## Elements
-
-使用 Elements 面板来检查 weex-html5 页面的布局和设计，并操纵 DOM 和 CSS 来自由地做一些开发实验。
-
-## Console
-
-您可以使用 `console.log` 在控制台上记录信息。
-
-## 断点
-
-您可以设置断点来调试代码，断点是调试代码的最有效的方法之一。断点使您能够暂停脚本执行，然后查看该时刻的调用堆栈变量值。
-
-手动断点是您在特定代码行上设置的各个断点。您可以通过 Chrome DevTools GUI 或在代码中插入 debugger 关键字来设置这些断点。
-
-## 找出 bug 的精确位置
-
-一般来说，有三个可能发生错误的地方：渲染器（weex-html5），js 框架（weex-js框架）和变压器（gulp-weex）。
-
-这里有一些方便以找出错误建议，以便你可以快速识别哪个是哪个地方的错误：
-
-* 请检查控制台是否有错误。在调试模式如果有一个错误出现，将会在 console 中打印有关于它的信息。
-* 在 bridge/receiver.js，查看是否调用了 `callNative` 函数。
-* 是否被认为是 API 的方法被执行。
-* 是否调用用于事件触发或执行回调的 `callJS` 方法。
-
-## 其他
-
-更多关于如何调试 H5 页面的信息请查看 [chrome's devTools docs](https://developers.google.com/web/tools/chrome-devtools/?hl=en)
-
-
-
-
-
-
diff --git a/_drafts/v1.0/guide/how-to/index.md b/_drafts/v1.0/guide/how-to/index.md
deleted file mode 100644
index c20ecb0..0000000
--- a/_drafts/v1.0/guide/how-to/index.md
+++ /dev/null
@@ -1,185 +0,0 @@
----
-title: 使用 Devtools 调试 Weex 页面
-type: guide
-order: 4
-has_chapter_content: false
-chapter_title: 最佳实践
-version: 0.10
----
-
-# 如何使用 Devtools 调试 Weex 页面
-
-Weex Devtools 是为 Weex 开发者服务的一款调试工具，能够审查 Weex app 运行时属性，可对 `.we` 代码及 JavaScript 代码断点调试，支持 iOS 和 Android 两个平台。
-
-Weex Devtools 基于 Chrome devtools 实现了 [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol)，能够使用 Chrome devtools 调试 Weex 项目，其主要功能分为两大部分—— Debugger 和 Inspector。
-
-## Devtools 主要功能一览
-
-### 连接设备
-devtools 可以动态检测客户端的连接绑定请求，同时连接／调试多个 device（或者模拟器）是很容易的事情，连接到 Devtools 的客户端显示在 “Device List” 界面。如下图所示。
-
-
-
-点击对应设备的 Debugger 按钮即开始调试流程，并弹出JS断点调试的页面；随后点击 Inspector 按钮可弹出调试 DOM 的页面。
-
-### Debugger
-
-这个是用来调试 Weex 的 JSBundle 代码的页面，“Sources” tab 能够显示所有 JS 源码，包括 Weex JSFramework 和 JSBundle 代码。可以设置断点、查看调用栈，与 Chrome 浏览器调试类似。“Console” 控制台显示前端的 Log 信息，并能根据级别（info/warn/error等）和关键字过滤。
-
-
-
-### 断点调试
-
-
-
-### Inspector
-
-Inspector 功能丰富，能够用来查看 `Element` \ `Network` \ `Console log` \ `Screencast` \ `BoxModel` \ `Native View` 等。
-
-
-
-### Device Screencast & View Inspect
-
-如下图所示，通过 Inspector 页面的两个开关，点击右侧 Icon 可以打开设备投屏，然后点击左侧 Icon 再在投屏上点选元素则可以自动在 DOM tree 中定位并审查该元素。
-
-
-
-### Elements
-
-这里展示的是在 Android／iOS 上的 native DOM 树，及其 style 属性和 layout 图。鼠标在 DOM 树移动时，在 device（或模拟器）上对应节点会高亮显示，有助于 native 开发者定位和发现节点。
-
-**注意：**
-screencast 只是对屏幕图像拷贝，在远程调试时能看到远程设备界面，数据网络下 screencast 也将有较大流量花销，如果设备就在手头儿则建议关掉。
-
-Elements 审查有两种模式分别是：native 和 vdom。其中，native 模式下展示的是 Weex 所映射的 native view 的结构，它更接近实现本质；vdom 模式则对应 `.we` 文件中定义的 dom 结构，主要用来审查 `.we` 文件编译为 JSBundle 之后对应的 dom tree 的逻辑构成。
-
-#### native view element
-
-
-
-#### weex dom element
-
-
-
-### Network
-
-这里展示的是 JSBundle 资源加载网络访问的性能。所以如果 JSBundle 资源在设备本地，Network 是没有数据的。
-
-#### 查看网络请求的总耗时和延时
-
-
-
-#### 查看网络请求的header和response
-
-
-
-### 控制台
-
-这里显示的是 Android／iOS 上的 native log，并不是 JS log（JS log 显示在 Debugger 页面）。同样 native log 也有对应级别--warn/error 等和关键字过滤，native 开发查询很方便。
-
-
-
-### 资源（Android Only）
-
-远端访问的资源文件会显示在这里，这里不是查看源码的最佳方式。在 Debugger 页面，“Sources” 里已经有源码并可以断点调试。如果你的应用里有 SQLITE 数据库文件，在这里无需 root 便可以查看和更新，对于 mock 数据来说比较便利。
-
-
-
-### 远程控制 (Android Only)
-
-Android 版本支持在 screencast 上进行远程控制，能够通过鼠标模拟在手机的输入事件，方便手机不在本地的用户进行远程调试。
-
-## 如何安装和启动devtools
-
-无论是跑在 iOS 或者 Android 端，[weex-devtool](https://github.com/weexteam/weex-devtool) 都是必需的，用来启动服务器和 Chrome 页面。
-
-### 安装
-
-如果你已经在前面的教程中安装过 weex-toolkit，就无需再次安装了。
-
-```bash
-$ 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调试初体验之playground
-
-如果你是一名 Weex 调试的新手，那么推荐你先下载 [Playground](http://alibaba.github.io/weex/download.html) 体验一下 Devtools 调试 JSBundle 的基础流程.
-
-- 前提:
- - 安装 `weex-toolkit`，内含调试命令 `weex debug`
- - android／iOS 设备与 PC 在同一局域网，若位于不同网段请确保防火墙可访问性
-
-- Inspector 功能演示
-
-<embed src="//cloud.video.taobao.com/play/u/1955166971/p/2/e/1/t/1/45803002.swf" quality="high" width="100%" height="500px" align="middle" allowScriptAccess="never" allowFullScreen="true" type="application/x-shockwave-flash"></embed>
-
-- Debugger功能演示
-
-<embed src="//cloud.video.taobao.com/play/u/1955166971/p/2/e/1/t/1/45803641.swf" quality="high" width="100%" height="500px" align="middle" allowScriptAccess="never" allowFullScreen="true" type="application/x-shockwave-flash"></embed>
-
-- 调试步骤:
- - **启动 debug server**
-
- 执行命令 `weex debug` 将启动 debug server。如果启动成功将会在 Chrome 打开一个 welcome 页面，在网页下方有一个二维码。
-
- - **启动 Playground 并扫码**
-
- 点击启首页左上角的扫码按钮扫码上一步中网页下方的二维码。此时 welcome 页面将会出现你的设备信息。Playground 进入 loading 页面，等待你的下一步操作。
-
- - **点击网页上的 Debugger 按钮**
-
- app 结束 loading 进入 debugging 状态。同时 Chrome 将会打开 Debugger 页面。按照页面提示打开该页的 JavaScript 控制台并进入 source tab。
-
- - **设置断点刷新当前页**
-
- 点击 Playground 首页 list 中的任意项将打开一个 Weex 页面，此时在 Sources 里会出现相应的 JSBundle 文件，设置断点并刷新 Playground 即可调试。
-
- - **点击网页上的 Inspector 按钮**
-
- Chrome 会打开 inspector页面，可以查看Element， Console， Network状态。
-
-### Weex调试初体验之应用
-
-如果是接入 Weex 的应用想调试自己的 Weex 代码，有以下几个方式：
-
-1. 借助 Playground 扫码调试
- - 先确定 Playground 已经是可调试状态
- - 使用命令行工具打开调试功能 `weex debug`，用 Playground 扫浏览器打开的页面中的二维码
- - 用 Playground 扫描 JSBundle 二维码
- - 手机上即显示 Weex 页面的结果。相应在 “Debugger” 和 “Inspector” 页面调试。
-
-2. 为应用接入 Devtools 接口
-
- - [Android sdk接入指南](https://github.com/weexteam/weex_devtools_android/blob/master/README-zh.html)
- - [iOS sdk接入指南](https://github.com/weexteam/weex-devtool-iOS/blob/master/README-zh.html)
-
-有任何问题或者建议，请提交[这里](https://github.com/weexteam/weex-devtool/issues)，会很快得到解答。
-
-## 更详细的视频讲解
-
-- 第一集 devtools简介
-http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45796387.swf
-- 第二集 inspector功能演示
-http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45803002.swf
-- 第三集 debugger功能演示
-http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45803641.swf
-- 第四集 native 与 weex 联调
-http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45804472.swf
-- 第五集 第三方App接入指南
-http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45805276.swf
\ No newline at end of file
diff --git a/_drafts/v1.0/guide/how-to/require-3rd-party-libs.md b/_drafts/v1.0/guide/how-to/require-3rd-party-libs.md
deleted file mode 100644
index 7d3748e..0000000
--- a/_drafts/v1.0/guide/how-to/require-3rd-party-libs.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: 如何引入第三方库
-type: guide
-order: 4.3
-version: 0.10
----
-
-# 如何引入第三方库
-<span class="weex-version">0.4</span>
-
-在 [Get started](../index.html) 中，我们学习了知道可以在 `<script>` 标签中编写 JavaScript 代码。但是在项目中常用的功能或模块，例如解析url参数，将属性从一些对象扩展到另一个对象等等，在每个组件中复制和粘贴这些代码是一个糟糕的做法，因此迫切需要通过 `require` 的方式对可复用的代码进行管理。Weex 为开发人员提供了 CommonJS 风格的 require 语法。
-
-我们以 `extend` 作为例子。
-
-## 引入本地 JS Modules
-
-下面是 `extend` 最简单的实现，并将其放在 `./common/utils.js` 路径中。
-
-```javascript
-function extend(dest, src) {
- for (var key in src) {
- dest[key] = src[key]
- }
-}
-exports.extend = extend
-```
-
-在 `.we` 文件中，`extend` 可以与`require`一起使用：
-
-```html
-<script>
- var utils = require('./common/utils')
- var obj1 = {a: 1}
- var obj2 = {b: 2}
- utils.extend(obj1, obj2) // obj1 => {a: 1, b: 2}
-</script>
-```
-
-## 引入已经安装的 Node.js Modules
-
-[underscore](http://underscorejs.org) 是一个 JavaScript 库，它提供了一整套函数式编程的实用功能，而不扩展任何 JavaScript 内置对象。它提供了一个更具稳健性的 [`extend`](http://underscorejs.org/#extend)。
-
-我们可以使用 underscore 的 `extend`，而不是我们自己实现的版本。首先，在项目中安装 underscore，然后我们便可以将 underscore `reuqire` 进来并使用它。
-
-```bash
-npm install underscore
-```
-
-```html
-<script>
- var _ = require('underscore')
- var obj1 = {a: 1}
- var obj2 = {b: 2}
- var obj3 = {c: 3}
- var ret = _.extend(obj1, obj2, obj3) // ret => {a: 1, b: 2, c: 3}
-</script>
-```
diff --git a/_drafts/v1.0/guide/how-to/transform-code-into-js-bundle.md b/_drafts/v1.0/guide/how-to/transform-code-into-js-bundle.md
deleted file mode 100644
index 69667ae..0000000
--- a/_drafts/v1.0/guide/how-to/transform-code-into-js-bundle.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: 将 `.we` 源代码转换成 JS Bundle
-type: guide
-order: 4.4
-version: 0.10
----
-
-# 将 `.we` 源代码转换成 JS Bundle
-<span class="weex-version">0.4</span>
-
-在前面的章节中你已经了解到如何编写及组织 Weex 代码，如果你还有疑问，可参考 [语法](../syntax/main.html) 及 [手册](../../references/main.html)。 但是，Weex 语法的代码必须转换为 JSBundle，以便 Weex JSFramework 可以在 iOS，Android 和浏览器端解析和执行。了解更多信息，可参考 [Weex 工作原理](../../advanced/how-it-works.html) 和 [JS Bundle 格式](../../references/specs/js-bundle-format.html)
-
-现在，回到将 `.we` 源代码转换成 JS Bundle 的主题。有几种方法来实现这一目标。
-
-## 使用 weex-toolkit
-
-如果你已经有了 node.js 开发环境，可以直接使用以下命令。关于 node.js 及其他依赖安装可参考[安装依赖](../develop-on-your-local-machine.html#第一步：安装依赖)
-```bash
-$npm install -g weex-toolkit
-```
-
-### 将 `.we` 文件转换为 JS Bundle
-
-```bash
-$ weex your_best_weex.we -o .
-```
-
-`your_best_weex.we` 将会被转换为 `your_best_weex.js` 并保存在当前目录。
-
-### 将 `.we` 文件转换为 JS Bundle 并开启 watch 功能，实时自动转换
-
-```bash
-
-$ weex your_best_weex.we -o . --watch
-```
-
-### 将所有 `.we` 文件转换到一个目录中
-
-```bash
-$ weex we/file/storage/path -o outputpath
-```
-
- `we/file/storage/path` 目录下的每个 `.we` 文件都会被转换为 JS Bundle 并保存到 `outputpath` 目录。
-
-请访问 [npmjs.com](https://www.npmjs.com/package/weex-toolkit) 了解更多关于 `weex-toolkit`。
-
-## transformer
-
-```bash
-npm install weex-transformer
-```
-
-### CLI Tool
-
-```
- Usage: transformer [options] <file...>
-
- Options:
-
- -h, --help output usage information
- -V, --version output the version number
- -l, --oldFormat [value] whether to transform to old format (default: false)
- -e, --isEntry [value] whether is an entry module which has `bootstrap` (default: true)
- -o, --output [path] the output file dirname
-```
-
-### API
-
-** transform(name, code, path, elements, config) **
-
-```javascript
-var transformer = require('weex-transformer')
-var output = transformer.transform('foo', '/* code here */', '.', {})
-```
-
-参数：
-
-- `name {string}`：当前 bundle 文件名
-- `code {string}`：源码
-- `path {string}`： *可选*，当在某个路径中查找自定义组件时很有用
-- `elements {Object}`：*可选*，存在的自定义组件映射
-- `config {Object}`：*可选*
-
- * `oldFormat {boolean}`：是否转换为旧格式 （默认：`false`）
- * `isEntry {boolean}`：是否是具有 `bootstrap` 的入口模块 （默认：`true`）
-
-返回值:
-- 一个对象：
- - `result {string}`：所有自定义组件的 `define()` 方法和最终的 `bootstrap()`
- - `logs {Array}`：相应的警告和错误日志
-
-## gulp weex
-
-```bash
-npm install gulp-weex
-```
-
-```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'))
-})
-```
-
-参数:
-
-- `oldFormat {boolean}`：是否转换为旧格式 （默认：`false`）
-- `isEntry {boolean}`：是否是具有 `bootstrap` 的入口模块 （默认：`true`）
diff --git a/_drafts/v1.0/guide/index.md b/_drafts/v1.0/guide/index.md
deleted file mode 100644
index 73d1a98..0000000
--- a/_drafts/v1.0/guide/index.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: 上手教程
-type: guide
-order: 1
-has_chapter_content: true
-version: 0.10
----
-
-# 起步教程
-
-Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。
-
-尝试 Weex 最简单的方法是使用 [Playground App](https://alibaba.github.io/weex/download.html) 和在 [dotWe](http://dotwe.org) 编写一个 [Hello World](http://dotwe.org/656345423a7ef46f4b897ff471fd2ab5) 例子。你不需要考虑安装开发环境或编写 native 代码，只需要做下面两件事：
-
-- 为你的手机安装 [Playground App](https://alibaba.github.io/weex/download.html)，当然，Weex 是跨平台的框架，你依然可以使用浏览器进行预览，只是这样你就无法感受到 native 优秀的体验了。
-- 在新标签页中打开 [Hello World](http://dotwe.org/656345423a7ef46f4b897ff471fd2ab5) 例子，点击预览，然后用 Playground 扫码即可。
-
-在这个例子中，我们看到了熟悉的 HTML 语义化标签、CSS 样式和 Javascript 代码。这是一个最简单的 Weex 示例，它在页面中渲染了一个 "Hello World"。
-
-
-
-## 发生了什么？
-
-就如示例代码所示：
-
-```html
-<template>
- <div>
- <text class="text">{{text}}</text>
- </div>
-</template>
-
-<style>
- .text {
- font-size: 50;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- text: 'Hello World.'
- }
- }
-</script>
-```
-
-我们暂时不去关心 Weex 的技术细节，仅看大致的代码结构。Weex 代码由三部分构成：`template`、`style`、`script`，这三个概念之于 Weex 就如 HTML，CSS，JavaScript 之于 Web。
-
-模板部分赋予 Weex 以骨架，由标签以及标签包围的内容构成，标签中能添加 `attribute（特性）`，不同的 `attribute` 有不同的含义，例如 class 特性让同样的样式可以作用于多组 Weex 标签， onclick 特性让标签能对用户点击事件作出回应。
-
-样式部分描述 Weex 标签如何显示。和你一样，我们喜欢 CSS，所以 Weex 中的样式尽量和 CSS 标准一致。Weex 支持很多 CSS 中的特性： margin, padding, fixed...... 更好的是， flexbox 布局模型在 Weex 中获得了很好的支持。
-
-脚本部分为 Weex 标签添加数据与逻辑，在这里你能方便的访问本地或远程的数据并动态更新。你还能定义方法并让这些方法响应不同的事件。Weex 脚本的组织方式基本遵循于 CommonJS module 规范。
-
-是不是觉得这些语法有些眼熟？没错，Weex 语法参考了 [Vue](https://github.com/vuejs/vue)，如果你熟悉 Vue，你会很快适应 Weex 语法（最新的 Weex framework 将会基于 [Vue 2.0](https://github.com/vuejs/vue) 开发，完全兼容 Vue，可参见我们的 [Roadmap](https://github.com/weexteam/weex-vue-framework/issues/9)），更好的是，我们拥抱规范，尽可能的按照 W3C 标准进行实现，因此，你大可不必担心 Weex 三端差异。
-
-你可以试着修改 [Hello World](http://dotwe.org/656345423a7ef46f4b897ff471fd2ab5) 的代码，再次点击预览即可生成新的二维码进行扫描。
-
-Weex 不止是个 Demo，在接下来的章节中，你还会看到更多 Weex 开发 native 应用并将其集成到你的 App 中的精彩教程。不要忘了随时在 [dotWe](http://dotwe.org) 中编写代码验证并通过 [Playground App](https://alibaba.github.io/weex/download.html) 预览。
diff --git a/_drafts/v1.0/guide/syntax/comm.md b/_drafts/v1.0/guide/syntax/comm.md
deleted file mode 100644
index 7923ef7..0000000
--- a/_drafts/v1.0/guide/syntax/comm.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: 组件通信
-type: guide
-order: 3.8
-version: 0.10
----
-
-# 组件间通信
-
-## 自定义事件
-
-Weex 支持自定义事件，这里有两个相关的设计：1，监听自定义事件；2，创建自定义事件。
-
-## 监听自定义事件
-
-每个 Weex 的 ViewModel 都支持 `this.$on(type, handler)` 和 `this.$off(type[, handler])` 的 API。`type` 是监听的自定义事件类型，`handler` 是事件处理函数。
-
-当 `handler` 被触发时，会有一个事件对象 `event` 作为第一个参数被传入，事件对象的数据格式基于[事件机制](./events.html)中提到的事件描述对象。
-
-## 创建自定义事件
-
-每个 Weex 的 ViewModel 都支持 `this.$emit(type, detail)` 的 API，可以在当前 ViewModel 中产生一个自定义事件。`type` 是自定义事件的类型，`detail` 则是一个对该事件细节补充描述的 JSON 对象，会以 `event.detail` 的形式出现在处理此事件的函数中。
-
-## 从子组件向父组件通信
-
-首先父组件要监听特定类型的自定义事件，而子组件可以使用 `this._parent` 找到父组件，然后再调用 `this._parent.$emit(type, detail)` 方法，即可实现自下而上的通信。例如：
-
-```html
-<element name="foo">
- <template>
- <div>
- <image src="{{imageUrl}}" class="thumb" onclick="test"></image>
- <text>{{title}}</text>
- </div>
- </template>
- <style>
- .thumb { width: 200; height: 200; }
- </style>
- <script>
- module.exports = {
- data: {
- title: '',
- imageUrl: ''
- },
- methods: {
- test: function () {
- // Emit notify to parent
- this._parent.$emit('notify', {a: 1})
- }
- }
- }
- </script>
-</element>
-
-<template>
- <div>
- <foo title="Hello" image-url="https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"></foo>
- <text if="eventType">event: {{eventType}} - {{eventDetail}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- eventType: '',
- eventDetail: {}
- },
- created: function () {
- this.$on('notify', function(event) {
- // When a notify comes, this handler will be run.
- // `event.detail` will be `{a: 1}`
- this.eventType = event.type
- this.eventDetail = JSON.stringify(event.detail)
- })
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/51e553ef43e5c744d05da1bb811903bf)
-
-## 从父组件向子组件通信
-
-同理，首先子组件要监听特定类型的自定义事件，而父组件可以使用 `this.$vm(id)` 找到父组件，然后再调用 `this.$vm(id).$emit(type, detail)` 方法，即可实现自上而下的通信。例如：
-
-```html
-<element name="foo">
- <template>
- <div>
- <image if="imageUrl" src="{{imageUrl}}" class="thumb"></image>
- <text>Foo</text>
- </div>
- </template>
- <style>
- .thumb { width: 200; height: 200; }
- </style>
- <script>
- module.exports = {
- data: {
- imageUrl: ''
- },
- created: function() {
- this.$on('changeImage', function (e) {
- this.imageUrl = e.detail
- }.bind(this))
- }
- }
- </script>
-</element>
-
-<template>
- <div>
- <foo id="sub"></foo>
- <text onclick="test">click to update foo</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- methods: {
- test: function (e) {
- this.$vm('sub').$emit(
- 'changeImage',
- 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png'
- )
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/ea616d180620648e66554d42f57db82b)
-
-下一节：[页面整体配置](./config-n-data.html)
diff --git a/_drafts/v1.0/guide/syntax/composed-component.md b/_drafts/v1.0/guide/syntax/composed-component.md
deleted file mode 100644
index 061eaf4..0000000
--- a/_drafts/v1.0/guide/syntax/composed-component.md
+++ /dev/null
@@ -1,158 +0,0 @@
----
-title: 组件封装
-type: guide
-order: 3.6
-version: 0.10
----
-
-# 组件封装
-
-经常我们会发现 Weex 的 `<template>` 中有很多可复用的部分，这时候我们可以将其封装成上层的自定义组件并重用。例如我们可以直接创建一个名为 `foo.we` 的文件，`<foo>` 就是自定义组件的组件名称：
-
-```html
-<!-- foo.we -->
-<template>
- <div style="flex-direction: row;">
- <image src="{{image}}"></image>
- <text>{{title}}</text>
- </div>
-</template>
-<script>
- var env = 'foo'
- module.exports = {
- data: {
- title: null,
- image: null
- }
- }
-</script>
-```
-
-`foo.we` 的也包含 `<template>`，`<style>` 和 `<script>`，定义好了后，直接用 `<foo>` 标签即可将其引入到其它组件的 `<template>` 中，并且在 `<foo>` 标签上设置其 `data` 同名的特性会将这个值赋给 `<foo>` 的上下文：
-
-_注意事项：由于 HTML 语法中特性名是不区分大小写的，所以您无法直接用驼峰命名，我们提供了 hyphenated 语法，在解析之后这些名称会自动转换为驼峰命名 (比如在 `<template>` 的组件特性里用 `aaa-bbb-ccc` 表示其 `data` 或上下文里的 `aaaBbbCcc`)。_
-
-```html
-<!-- bar.we -->
-<template>
- <foo title="..." image="..."></foo>
-</template>
-<script>
- var env = 'bar'
-</script>
-```
-
-_注意事项：这里 `bar.we` 和 `foo.we` 必须在同目录下才能自动建立依赖关系。_
-
-_注意事项：`foo.we` 文件的 `<script>` 具有相对独立的作用域，不会和 `bar.we` 中的 `<script>` 产生干扰。同时 `<foo>` 对象具有相对独立的子组件上下文，即 `this`，也包括其定义的完全不同的数据和方法。_
-
-## 组件嵌套
-
-自定义组件也支持嵌套，如下：
-
-```html
-<!-- somepath/foo.we -->
-<template>
- <div style="flex-direction: row;">
- <image src="{{image}}"></image>
- <text>{{title}}</text>
- </div>
-</template>
-<script>
- module.exports = {
- data: {
- // These keys must be declared explicitly here
- // or data-binding will not work from its parent.
- title: null,
- image: null
- }
- }
-</script>
-```
-
-```html
-<!-- samepath/foo.list.we -->
-<template>
- <div>
- <text>{{description}}</text>
- <foo repeat="item in list" title="{{item.text}}" image="{{item.img}}"></foo>
- </div>
-</template>
-<script>
- module.exports = {
- data: {
- description: '',
- // This key must be declared explicitly here
- // or data-binding will not work from its parent.
- list: []
- }
- }
-</script>
-```
-
-```html
-<!-- samepath/main.we -->
-<template>
- <foo-list list="{{list}}"></foo-list>
-</template>
-<script>
- module.exports = {
- data: {
- list: [
- {text: '...', img: '...'},
- {text: '...', img: '...'},
- {text: '...', img: '...'},
- ...
- ]
- }
- }
-</script>
-```
-
-这里的 `main.we` 嵌套了 `<foo-list>`，`<foo-list>` 嵌套了 `<foo>`，同时组件可以正常的配合数据绑定、`repeat` 特性等使用。
-
-## 更多子组件的定义和书写方式
-
-除了在主文件同目录下创建和被封装组件同名的 `we` 文件之外，Weex 还支持另外几种子组件的书写方式：
-
-* 在 `<script>` 中通过 `require` 其它目录的 `we` 文件定义同名组件
-* 在主文件下新增 `<element name="xxx">` 标签，`name` 特性的值为新创建的组件名，其 `<element>` 内部的内容是定义该组件的代码
-
-比如：
-
-```html
-<!-- path-a/main.we -->
-<element name="foo">
- <text>Foo</text>
-</element>
-
-<template>
- <div>
- <foo></foo>
- <bar></bar>
- </div>
-</template>
-
-<script>
- require('path-b/bar.we')
-</script>
-```
-
-```html
-<!-- path-b/bar.we -->
-<template>
- <text>Bar</text>
-</template>
-```
-
-这样的话，`path-a/main.we` 最终展示的结果是“Foo”和“Bar”两段文本。
-
-## 注意事项
-
-- 组件各自的 `<style>` 是相互独立的，不会担心不同组件中相同的 class name 相互干扰。
-- 如果自定义组件在父组件中有 `id` 特性，则可以在父组件上下文中通过 `this.$vm(id)` 接口来访问该自定义组件的上下文，也可以通过 `this.$el(id)` 来找到其背后真实的原生组件。更多详见[获取子组件信息](./id.html)
-- 自定义组件之间通信的问题可以参考[组件间通信](./comm.html)
-- 不论通过父组件把数据传递进来还是在当前组件内部对数据发起修改，只有在组件的 `data` 选项中明确写明的字段才会被正常的监听。
-- 任何组件目前均不支持自闭合标签的写法，请勿使用。
-
-下一节：[获取子组件信息](./id.html)
diff --git a/_drafts/v1.0/guide/syntax/config-n-data.md b/_drafts/v1.0/guide/syntax/config-n-data.md
deleted file mode 100644
index cad39ab..0000000
--- a/_drafts/v1.0/guide/syntax/config-n-data.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: 页面配置和页面数据
-type: guide
-order: 3.9
-version: 0.10
----
-
-# 页面配置和页面数据
-
-在 Weex 中，你可以通过一些特殊的 `<script>` 进行页面整体配置。
-
-_注意事项：这些配置会代表页面整体，所以写在自定义子组件中是无效的，只有写在顶级 ViewModel 的 `<sctipt>` 中才会生效。_
-
-先举个例子：
-
-```html
-<!-- definition of sub components -->
-<element name="sub-component-a">...</element>
-<element name="sub-component-b">...</element>
-<element name="sub-component-c">...</element>
-
-<!-- definition of top-level component -->
-<template>...</template>
-<style></style>
-<script>
- module.exports = {
- data: { x: 1, y: 2 }
- }
-</script>
-
-<!-- config and data -->
-<script type="config">
- downgrade: {
- ios: {
- os: '9', // all of 9.x.x
- app: '~5.3.2',
- framework: '^1.3', // all of 1.3.x
- deviceModel: ['AAAA', 'BBBB']
- },
- android: {
- os: '*', // all of version
- app: '^5',
- framework: '',
- deviceModel: ''
- }
- }
-</script>
-<script type="data">
- { y: 200 }
-</script>
-```
-
-## `<script type="config">`
-
-开发者可以在顶级 ViewModel 中加入这样一段 `<script>`，以 JSON 格式描述页面整体的配置信息。
-
-目前支持的配置信息只有 `downgrade`：用来从平台、应用等维度描述页面的降级规则。这样设计对于产品迭代最大的帮助是可以在高版本中使用 Weex，而在低版本中使用之前已有的渲染方式，这部分控制降级的细节需要 native 接入的时候进行相应的识别和具体操作。
-
-未来这里会有更多的配置项出现在这里。
-
-## `<script type="data">`
-
-开发者可以在顶级 ViewModel 中加入这样一段 `<script>`，以 JSON 格式额外配置顶级 ViewModel 的数据，它会覆盖顶级 ViewModel 数据中相应的字段。比如上述例子中，最终的顶级 ViewModel 中的数据为 `{ x: 1, y: 200 }`。
-
-## 总结
-
-至此，Weex 基本的语法已经全部介绍过了。相信您对 Weex 的使用方式和开发方式有了更多的了解。
-
-接下来我们推荐您阅读：
-
-* [最佳实践](../how-to/index.html)
-* [Weex 手册](../../references/index.html)
diff --git a/_drafts/v1.0/guide/syntax/data-binding.md b/_drafts/v1.0/guide/syntax/data-binding.md
deleted file mode 100644
index bbefdd1..0000000
--- a/_drafts/v1.0/guide/syntax/data-binding.md
+++ /dev/null
@@ -1,332 +0,0 @@
----
-title: 数据绑定
-type: guide
-order: 3.1
-version: 0.10
----
-
-# 数据绑定
-
-Weex使用 _mustache_ 的语法 (`{% raw %}{{...}}{% endraw %}`) 来对 `<template>` 中的模板和 `<script>` 里的数据进行绑定. 一旦数据额模板绑定了, 数据上的修改会实时的在模板内容中生效。
-
-## 数据绑定路径
-
-```html
-<template>
- <div>
- <text style="font-size: {{size}}">{{title}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- size: 48,
- title: 'Alibaba Weex Team'
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/6d18c0e696d33705083e34ef387ac529)
-
-上面的代码会把 `title` 和 `size` 的数值绑定到模板内容上。
-
-我们也可以通过 `.` 符号来绑定数据结构中的字段。看一下下面的代码片段：
-
-```html
-<template>
- <div>
- <text style="font-size: {{title.size}}">{{title.value}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- title: {
- size: 48,
- value: 'Alibaba Weex Team'
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/e291bbe2d5c34fe04db92bc827697a4b)
-
-## 数据绑定表达式
-
-进行数据绑定时，Weex 支持一些简单的 JavaScript 表达式，例如：
-
-```html
-<template>
- <div style="flex-direction: row;">
- <text>{{firstName + ' ' + lastName}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- firstName: 'John',
- lastName: 'Smith'
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/aeef6c2ca9bd9b7c5d039ed84572e1ee)
-
-这些表达式会在当前的上下文中进行运算。
-
-## 计算属性 <sup>v0.5+</sup>
-
-数据绑定表达式已经非常方便了，但如果希望在模板里实现更复杂的逻辑判断，你也可以使用计算属性。例如：
-
-```html
-<template>
- <div style="flex-direction: row;">
- <text>{{fullName}}</text>
- <text onclick="changeName" style="margin-left: 10;">CHANGE NAME</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- firstName: 'John',
- lastName: 'Smith'
- },
- computed: {
- fullName: function() {
- return this.firstName + ' ' + this.lastName
- }
- },
- methods: {
- changeName: function() {
- this.firstName = 'Terry'
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/276e7c42a2d480d669868476e62b326e)
-
-同样能够达到相同的效果。这里我们引入了一个叫做 `fullName` 的计算属性，由 `firstName` 和 `lastName` 计算而成，在数据绑定的时候，如果 `firstName` 或 `lastName` 发生改变，`fullName` 都会自动重新计算并触发改变。
-
-另外计算属性还支持另外一种写法，就是同时定义一个计算属性的 getter 和 setter，这样的话当下面例子中的 `fullName` 被赋值时，`data` 里的 `firstName` 和 `lastName` 会被自动改变：
-
-```html
-<template>
- <div style="flex-direction: row;">
- <text>{{fullName}}</text>
- <text onclick="changeName" style="margin-left: 10;">CHANGE NAME</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- firstName: 'John',
- lastName: 'Smith'
- },
- computed: {
- fullName: {
- get: function() {
- return this.firstName + ' ' + this.lastName
- },
-
- set: function(v) {
- var s = v.split(' ')
- this.firstName = s[0]
- this.lastName = s[1]
- }
- }
- },
- methods: {
- changeName: function() {
- this.fullName = 'Terry King'
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/9f33809592391c566c886029c509c167)
-
-**注意事项：`data`、`methods`、`computed` 中的字段是不能相互重复的，因为它们都会通过组件实例的 `this` 访问到。**
-
-## 数据绑定在 `<template>` 中的特殊用法
-
-### 样式: `style` 或 `class`
-
-组件的样式能够通过 `style` 特性进行绑定：
-
-```html
-<template>
- <div>
- <text style="font-size: {{size}}; color: {{color}};">Hello World</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- size: 32,
- color: '#ff0000'
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/f53674fa7910d266e0a2d8a5c285d2b1)
-
-样式也能够通过 `class` 特性实现样式绑定，多个 class 名通过空格分隔：
-
-```html
-<template>
- <div>
- <text class="{{size}}">Hello</text>
- <text class="title {{status}}">World</text>
- </div>
-</template>
-
-<style>
- .large { font-size: 64; }
- .small { font-size: 32; }
- .title { font-weight: bold; }
- .success { color: #00ff00; }
- .error { color: #ff0000; }
-</style>
-
-<script>
- module.exports = {
- data: {
- size: 'large',
- status: 'success'
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/4260897c1526a685672dca95af271493)
-
-在上面的代码中如果 `{% raw %}{{size}}{% endraw %}` 和 `{% raw %}{{status}}{% endraw %}` 是空值, 就只有 `class="title"` 会被解析。
-
-延伸阅读：[style 和 class](./style-n-class.html)
-
-### 事件绑定：`on...`
-
-以 `on...` 开头的就是用于绑定事件的特性，特性名中 `on` 之后的部分就是事件的类型，特性的值就是处理该事件的函数名。_函数名外不需要添加 mustache 语法中的大括号_。例如：
-
-```html
-<template>
- <div>
- <text onclick="toggle">Toggle: {{result}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- result: true
- },
- methods: {
- toggle: function () {
- this.result = !this.result
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/2f9f910a60ffc1ed54c797390d6615e1)
-
-除此之外 Weex 还支持更多的事件处理方式。
-
-延伸阅读：[事件处理](./events.html)
-
-### 展示逻辑控制 `if` & `repeat`
-
-`if` 特性能够通过特性值的真假来控制组建是否显示，_且 mustache 大括号可以省略_。例如：
-
-```html
-<template>
- <div style="flex-direction: column;">
- <text onclick="toggle">Toggle</text>
- <image if="{{shown}}" src="{{imageUrl}}" class="logo"></image>
- </div>
-</template>
-
-<style>
- .logo { width: 512; height: 512; }
-</style>
-
-<script>
- module.exports = {
- data: {
- shown: true,
- imageUrl: 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png'
- },
- methods: {
- toggle: function () {
- this.shown = !this.shown
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/3ec9347e4810f503b641849d214d8c15)
-
-`repeat` 特性可以根据一组数组数据重复生成相同或相似的顺序排列的界面。例如：
-
-```html
-<template>
- <div>
- <text repeat="(k,v) in list">{{k}} - {{v}}</text>
- </div>
-</template>
-<script>
- module.exports = {
- data: {
- list: ['a', 'b', 'c']
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/db40d2341fdbf16d3d806f502189843d)
-
-延伸阅读：[展示逻辑控制](./display-logic.html)
-
-### 静态模板优化 `static` <sup>v0.9.2+</sup>
-
-`static` 特性可以一次性把数据设置到模板相应的位置上，但是今后不会随着数据的变化而更新。这样可以减少无谓的数据绑定，有效控制和优化长列表、纯静态页面在运行时的开销。不过你也要小心使用不要导致原本需要更新的视图没有触发更新。
-
-```html
-<template>
- <div static>
- <text>{{ word }}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- ready: function() {
- this.word = 'Data changes' // UI won't be updated
- },
- data: {
- word: 'Hello static'
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/dbadfd66463a2c03e3e06d391b0ad8ec)
-
-如上所示，添加 `static` 关键字，渲染结果会是“Hello static”字样，相当于渲染一个静态的节点，`ready` 函数中对数据 `word` 的改变不会更新到视图。
-
-下一篇：[style 和 class](./style-n-class.html)
diff --git a/_drafts/v1.0/guide/syntax/display-logic.md b/_drafts/v1.0/guide/syntax/display-logic.md
deleted file mode 100644
index 9498de2..0000000
--- a/_drafts/v1.0/guide/syntax/display-logic.md
+++ /dev/null
@@ -1,252 +0,0 @@
----
-title: 展示逻辑控制
-type: guide
-order: 3.4
-version: 0.10
----
-
-# 展示逻辑控制
-
-Weex 支持通过两种特殊的特性 `if` 和 `repeat` 确定组件的显示逻辑，这会使得整个界面的展示逻辑控制更加简单灵活。
-
-## `if`
-
-通过设置 `if` 特性值，你可以控制当前组件是否显示。如果值为真，则当前组件会被渲染出来，如果值为假则会被移除。例如：
-
-```html
-<template>
- <div>
- <text onclick="toggle">Toggle Image</text>
- <image if="shown" src="{{imageUrl}}" style="width: 512; height: 512;"></image>
- </div>
-</template>
-
-<script>
-module.exports = {
- data: {
- imageUrl: 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png',
- shown: true
- },
- methods: {
- toggle: function () {
- this.shown = !this.shown
- }
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/e0999a51fa404f48bbae177f1569cd0e)
-
-_注意事项：`if="condition"` 和 `if="{% raw %}{{condition}}{% endraw %}"` 都是可以的，两者等价使用。_
-
-_注意事项：`if` 不能用在 `<template>` 的根组件上，否则将无法被 Weex 正常的识别和处理。_
-
-### `if` 不会阻断子元素的数据更新
-
-下面这个例子在数据更新后 `item` 或 `item.image` 不存在的情况下会报错：
-
-```html
-<template>
- <div if="{{(item && item.image)}}" style="width: 200; height: 200;">
- <image style="width: 100; height: 100;" src="{{item.image.url}}"></image>
- </div>
-</template>
-```
-
-原因在于 Weex 本身的机制是数据更新在 DOM 更新之前，因此 `if` 数据更新之后，不支持阻断其子元素的数据更新，即 `if` 数据更新为 `false` 之后，内部的子元素仍然会触发自身的数据更新，找不到对应字段，导致报错，可参考这个 [issue](https://github.com/alibaba/weex/issues/1758)。
-
-因此，有两种解决方案：
-
-- 为 `img` 组件的 `src` 也增加容错方案：
-
- ```html
- <div if="{{(item && item.image)}}" style="width: 200; height: 200;">
- <image style="width: 100; height: 100;" src="{{item && item.image && item.image.url}}"></image>
- </div>
- ```
-
-- 如果是在 `repeat` 的列表中，还可以使用 `track-by`强制不复用子元素解决。
-
-## `repeat`
-
-`repeat` 特性用于重复渲染一组相同的组件。它绑定的数据类型必须为数组，数组里的每一项数据可以体现在不同的组件特性、样式、事件绑定等。例如：
-
-``` html
-<template>
- <div>
- <div repeat="person in list" class="{{person.gender}}">
- <text>{{person.nickname}}</text>
- </div>
- </div>
-</template>
-
-<style>
- .male { background-color: #9999ff; }
- .female { background-color: #ff9999; }
-</style>
-
-<script>
-module.exports = {
- data: {
- list: [
- { gender: 'male', nickname: 'Li Lei' },
- { gender: 'female', nickname: 'Han Meimei' },
- { gender: 'male', nickname: 'Jim Green' }
- ]
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/8c87aac2820531090181c32fca41e913)
-
-此外，`repeat` 特性还支持绑定数组中数据项目的索引值。例如：
-
-``` html
-<template>
- <div>
- <div repeat="(index, person) in list" class="{{person.gender}}">
- <text>{{index}} - {{person.nickname}}</text>
- </div>
- </div>
-</template>
-
-<style>
- .male { background-color: #9999ff; }
- .female { background-color: #ff9999; }
-</style>
-
-<script>
-module.exports = {
- data: {
- list: [
- { gender: 'male', nickname: 'Li Lei' },
- { gender: 'female', nickname: 'Han Meimei' },
- { gender: 'male', nickname: 'Jim Green' }
- ]
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/65d348256ab5c54aa996d3ee6b4ea115)
-
-每一个昵称之前都有对应数组项目的索引值。
-
-_注意事项：同样的 `repeat="..."` 和 `repeat="{% raw %}{{...}}{% endraw %}"` 都是可以的，两者等价使用。_
-
-_注意事项：`if` 不能用在 `<template>` 的根组件上，否则将无法被 Weex 正常的识别和处理。_
-
-**注意事项: 当你修改 `repeat` 中的数组时，在写法上会受到一定的限制，具体如下：**
-
-**直接通过“角标”修改数组的某个项目 (如 `this.items[0] = ...`) 是不会触发视图自动更新的。我们在数组的原型上提供了一个额外的方法：`this.items.$set(index, item)` 来完成相同的事情。**
-
-```javascript
-// 和 `this.items[0] = ...` 作用相同，但会自动触发视图更新
-this.items.$set(0, { childMsg: 'Changed!'})
-```
-
-**直接通过修改 `length` 来改变数组长度 (如 `this.items.length = 0`) 也是不会触发视图自动更新的。我们推荐您直接赋值一个新的空数组把旧的替换掉。**
-
-```javascript
-// 和 `this.items.length = 0` 作用相同，但会自动触发视图更新
-this.items = []
-```
-
-### `repeat` 特性中的 `$index` 形参
-
-在 `repeat` 特性值中，如果没有指定索引值的形参，则可以通过绑定形参 `$index` 来展示数组项目的索引值。例如：
-
-``` html
-<template>
- <div>
- <div repeat="person in list" class="{{person.gender}}">
- <text>{{$index}} - {{person.nickname}}</text>
- </div>
- </div>
-</template>
-
-<style>
- .male { background-color: #9999ff; }
- .female { background-color: #ff9999; }
-</style>
-
-<script>
-module.exports = {
- data: {
- list: [
- { gender: 'male', nickname: 'Li Lei' },
- { gender: 'female', nickname: 'Han Meimei' },
- { gender: 'male', nickname: 'Jim Green' }
- ]
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/65d348256ab5c54aa996d3ee6b4ea115)
-
-渲染效果和上一个例子应该是相同的。
-
-### 在 `repeat` 中使用 `track-by` 特性追踪变化
-
-通常情况下，当更新 `repeat` 中绑定的数组时，所有数组项目关联的组件都会被重新渲染。如果其中部分索引值对应的数据未发生变更，那么最好是让这些组件在渲染层保持原样，仅更新数据有变化的节点。Weex 提供了 `track-by` 特性来辅助判断哪些数组项目发生了改变。
-
-首先 `track-by` 特性的值必须是在每一条数组项目中都有且值没有重复的一个字段名，用来区分和追踪每一条数据项增删与否或次序变化与否的关键依据。每当数组发生变化之后，新老数组数据会根据 `track-by` 特性值所代表的字段重新匹配，然后再决定渲染层应该新建或删除一个组件？还是移动一个组件？还是讲组件保持原来的位置。默认的 `track-by` 的值就是数组的索引值。例如：
-
-``` html
-<template>
- <div>
- <div repeat="person in list" class="{{person.gender}}">
- <text>{{$index}} - {{person.id}} - {{person.nickname}}</text>
- </div>
- <text>----</text>
- <div repeat="person in list" class="{{person.gender}}" track-by="id">
- <text>{{$index}} - {{person.id}} - {{person.nickname}}</text>
- </div>
- <text>----</text>
- <!-- something wrong here: duplicated track-by value -->
- <div repeat="person in list" class="{{person.gender}}" track-by="nickname">
- <text>{{$index}} - {{person.id}} - {{person.nickname}}</text>
- </div>
- </div>
-</template>
-
-<style>
- .male { background-color: #9999ff; }
- .female { background-color: #ff9999; }
-</style>
-
-<script>
-module.exports = {
- data: {
- list: [
- { id: 11, gender: 'male', nickname: 'Li Lei' },
- { id: 22, gender: 'female', nickname: 'Han Meimei' },
- { id: 33, gender: 'male', nickname: 'Jim Green' }
- ]
- },
- ready: function () {
- this.list.unshift({ id: 44, gender: 'female', nickname: 'Han Meimei' })
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/c124bfc21e6d92271356acbea232089b)
-
-这种情况下，第一个列表的更新策略是：
-
-1. 把第一个 `<text>` 赋值为 `Han Meimei`
-2. 第二个赋值为 `Li Lei`
-3. 第三个赋值为 `Han Meimei`
-4. 最后新建一个 `<text>` 并赋值为 `Jin Green`
-
-第二个列表的更新策略是：
-
-1. 在最前面新建一个 `<text>` 并赋值为 `Han Meimei`
-
-第三个列表的更新会遇到问题，因为有两个数组项目的 `nickname` 值都是 `Han Meimei` 所以造成意料之外的渲染结果 (只渲染了三个数组项目)。
-
-下一节：[渲染过程控制](./render-logic.html)
diff --git a/_drafts/v1.0/guide/syntax/events.md b/_drafts/v1.0/guide/syntax/events.md
deleted file mode 100644
index 4898219..0000000
--- a/_drafts/v1.0/guide/syntax/events.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: 事件处理
-type: guide
-order: 3.3
-version: 0.10
----
-
-# 事件处理
-
-Weex 允许对 `<template>` 中的元素绑定事件处理函数。
-
-## 基本语法
-
-以 `on...` 开头的就是用于绑定事件的特性，特性名中 `on` 之后的部分就是事件的类型，特性的值就是处理该事件的函数名。_函数名外不需要添加 mustache 语法中的大括号_。例如：
-
-```html
-<template>
- <div>
- <text onclick="toggle">Toggle: {{result}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- result: true
- },
- methods: {
- toggle: function () {
- this.result = !this.result
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/2f9f910a60ffc1ed54c797390d6615e1)
-
-## 内联事件处理参数
-
-同时我们也支持在事件绑定的特性值中内联写明被传入的参数。例如：
-
-```html
-<template>
- <div>
- <text onclick="update(1, 2)">Result: {{result}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- result: '<empty>'
- },
- methods: {
- update: function (x, y) {
- this.result = x + y
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/777056d8985e73567464e2d66cbe73fc)
-
-## 特殊的内联事件处理参数
-
-额外的，在这种内联的事件绑定写法中，你可以使用一个特殊的参数 `$event`，代表事件描述对象，即默认事件处理函数的第一个参数。所以 `<template>` 中的 `onclick="foo"` 和 `onclick="foo($event)"` 是等价的，`$event` 的用法可以更多参考下面的例子
-
-```html
-<template>
- <div>
- <text onclick="update($event, 1, 2)">Result: {{result}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- result: '<empty>'
- },
- methods: {
- update: function (e, x, y) {
- this.result = e.type + (x + y)
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/5e1e7c22f036725e44c3ff492f173400)
-
-## 事件描述对象
-
-每当一次事件被触发的时候，都会产生一个事件描述对象，该对象会默认作为第一个参数传递给事件处理函数，或以 `$event` 形参的方式出现在内联事件处理函数中。
-
-每个事件描述对象至少包含以下几个特性：
-
-- `type` (`string`): 事件名称, 如: `click`
-- `target` (`Element`): 目标元素
-- `timestamp` (`number`): 事件触发时的时间戳数字
-
-下一节：[展示逻辑控制](./display-logic.html)
diff --git a/_drafts/v1.0/guide/syntax/id.md b/_drafts/v1.0/guide/syntax/id.md
deleted file mode 100644
index 0a204ad..0000000
--- a/_drafts/v1.0/guide/syntax/id.md
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: 找节点
-type: guide
-order: 3.7
-version: 0.10
----
-
-# 找节点
-
-在 Weex 中，您可以通过在特定的子组件上设置 `id` 特性，以此在该 `<template>` 内唯一标识这个组件。
-
-## 获取子组件
-
-您可以在父组件上下文中使用 `this.$el(id)` 来找到该组件，以运用 `scrollToElement()` 为例：
-
-```html
-<template>
- <div>
- <text id="goto-top">Top</text>
- <div style="height: 10000; background-color: #999999;"></div>
- <text onclick="back2Top">Back to Top</text>
- </div>
-</template>
-<script>
- var dom = require('@weex-module/dom')
- module.exports = {
- methods: {
- back2Top: function () {
- var el = this.$el('goto-top')
- dom.scrollToElement(el, { offset: 10 })
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/ed07068ef6f038d6c39af6c971ad08a0)
-
-### `id` 和 `repeat` 特性配合使用
-
-`id` 也可以和 `repeat` 语法配合使用，关于 `repeat` 更多详见 [展示逻辑控制](./display-logic.html)，但是要确保循环的节点需要用不同的 `id`，比如：
-
-```html
-<template>
- <div>
- <image
- repeat="image in images"
- id="img-{{image.id}}"
- src="{{image.url}}"
- onclick="getImageId"></image>
- </div>
-</template>
-<script>
-module.exports = {
- data: {
- images: [
- {id: 1, url: '...'},
- {id: 2, url: '...'},
- {id: 3, url: '...'},
- ...
- ]
- },
- methods: {
- getImageId: function(e) {
- // get e.target.id
- }
- }
-}
-</script>
-```
-
-### 获取自定义子组件的上下文
-
-另外，我们还可以通过 `this.$vm(id)` 方法可以访问自定义子组件的上下文：
-
-```html
-<element name="foo">
- <template>
- <div style="flex-direction: row;">
- <text>{{title}}</text>
- </div>
- </template>
- <script>
- module.exports = {
- data: {
- title: null
- },
- methods: {
- setTitle: function (text) {
- this.title = text
- }
- }
- }
- </script>
-</element>
-
-<template>
- <div>
- <foo id="sub" title="Hello"></foo>
- <text onclick="update">Click Me to Update</text>
- </div>
-</template>
-<script>
- module.exports = {
- methods: {
- update: function (e) {
- this.$vm('sub').setTitle('Updated')
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/1d332e6c238462e841743035c6bc697e)
-
-实际上，如上述的例子，我们找到子组件上下文之后，直接在这个上下文中调用子组件方法或修改子组件的数据并不是我们认为最好的方式，我们更倾向于通过一套确定的组件间通信机制来完成这一工作。
-
-### 获取父级组件或其上下文
-
-除了可以自上而下寻找组件或其上下文，Weex 也支持自下而上做相同的事情。当前上下文中的 `this._parent` 可以获取其父级上下文。除了父级上下文，对于父级组件本身，相关处理也可以基于先获取父级上下文，然后在父级组件内部完成更多更细致的处理。更多内容可以深入了解组件间通信的部分。
-
-_注意事项：在未来的版本中 `this._parent` 将改为 `this.$parent`。_
-
-下一篇： [组件间通信](./comm.html)
diff --git a/_drafts/v1.0/guide/syntax/index.md b/_drafts/v1.0/guide/syntax/index.md
deleted file mode 100644
index df0c33a..0000000
--- a/_drafts/v1.0/guide/syntax/index.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: 语法介绍
-type: guide
-order: 3
-has_chapter_content: true
-version: 0.10
----
-
-# 语法综述
-
-Weex 代码由 `<template>`、`<style>`、`<script>` 三个部分构成。
-
-- `<template>`：_必须的_，使用 HTML 语法描述页面结构，内容由多个标签组成，不同的标签代表不同的组件。
-- `<style>`：_可选的_，使用 CSS 语法描述页面的具体展现形式。
-- `<script>`：_可选的_，使用 JavaScript 描述页面中的数据和页面的行为，Weex 中的数据定义也在 `<script>` 中进行。
-
-```html
-<template>
- <!-- (required) the structure of page -->
-</template>
-
-<style>
- /* (optional) stylesheet */
-</style>
-
-<script>
- /* (optional) the definition of data, methods and life-circle */
-</script>
-```
-
-这是一个典型的 M-V-VM 架构：通过 ViewModel 把 Model 和 View 建立更直接有效的关系，ViewModel 的实现以 `<script>` 的内容为主。
-
-## `<template>` 模板
-
-`<template>` 中的标签组织类似如下代码：
-
-``` html
-<template>
- <div>
- <image style="width: 200; height: 200;" src="https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"></image>
- <text>Alibaba Weex Team</text>
- </div>
-</template>
-```
-
-[体验一下](http://dotwe.org/5256e6e610ded330369f2e8010f7f0e6)
-
-`<div>` 标签是一个根节点，里面包含描述图片的 `<image>` 标签和描述文字的 `<text>` 标签。
-
-和 HTML 类似，不同标签代表的组件有各自的特性 (attribute)，部分组件可以拥有自己的子组件。
-
-延伸阅读：[内置组件列表](../../references/components/index.html)
-
-根节点：每个 Weex 页面最顶层的节点，我们称为根节点。下面是目前我们支持的三种根节点：
-
-- `<div>`：普通根节点，有确定的尺寸，不可滚动。
-- `<scroller>`：可滚动根节点，适用于需要全页滚动的场景。
-- `<list>`：列表根节点，适用于其中包含重复的子元素的列表场景。
-
-目前 Weex 仅支持以上三种根节点。
-
-_注意事项：`<template>` 只支持一个根节点，多个根节点将无法被 Weex 正常的识别和处理。_
-
-## `<style>` 样式
-
-我们可以把 Weex 中的样式语法理解为 CSS 的一个子集，两者有一些细微的区别
-
-第一种写法是，你能在标签上，直接通过内联 `style` 特性编写样式. 第二种写法，通过标签中的 `class` 特性与 `<style>` 标签中定义的样式建立对应关系，让 `<style>` 标签中定义的样式作用于特定标签之上。以下是例子：
-
-```html
-<template>
- <div>
- <text style="font-size: 64;">Alibaba</text>
- <text class="large">Weex Team</text>
- </div>
-</template>
-
-<style>
- .large {font-size: 64;}
-</style>
-```
-
-[体验一下](http://dotwe.org/d8af9186bf045df74e7a538d91798db4)
-
-上面的两个 `<text>` 组件都被设置了同样的字体大小，但分别用了两种不同的方式。
-
-延伸阅读：[Weex 通用样式](../references/common-style.html)
-
-**注意**：Weex 遵循 [HTML 特性](https://en.wikipedia.org/wiki/HTML_attribute) 命名规范，所以特性命名时**请不要使用陀峰格式 (CamelCase)**，采用以“-”分割的 **long-name** 形式。
-
-## `<script>` 脚本
-
-`<script>` 描述页面中的数据和页面的行为，代码遵循 JavaScript (ES5) 语法 (目前 iOS 端和浏览器端取决于内置 JavaScript 引擎对 ES 版本的支持情况，安卓端能够完整支持 ES5，但不原生支持 ES6，需要用类似 [babel](http://babeljs.io) 的工具对源代码进行转换)。下面是一个例子：
-
-``` html
-<template>
- <div>
- <text>The time is {{datetime}}</text>
- <text>{{title}}</text>
- <text>{{getTitle()}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- title: 'Alibaba',
- datetime: null
- },
- methods: {
- getTitle: function () {
- return 'Weex Team'
- }
- },
- created: function() {
- this.datetime = new Date().toLocaleString()
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/8095bed0d9db4299fb39975d4b35b13f)
-
-上面 `<script>` 标签中定义了被赋值给 `module.exports` 的对象，这个对象其实就是一个 ViewModel 选项，让三个 `<text>` 标签显示当前时间、“Alibaba”字样和“Weex Team”字样。
-
-选项中的 `data` 用于存储数据，这些数据可以通过[数据绑定](./data-binding.html)机制和 `<template>` 标签中的内容绑定起来。当这些数据变更时，被绑定的模板内容也会自动更新。这些数据在 `<script>` 中的各个方法中可以通过类似 `this.x` 的方式进行读写操作。
-
-而选项中的 `methods` 里则列出了当前上下文可执行的各种函数，比如 `getTitle()`。
-
-选项中最后的 `created` 是生命周期函数，会在数据初始化之后、界面被绑定数据并渲染之前执行。类似的生命周期函数还有 `init`、`ready` 等，在这个例子中，`datetime` 会在界面渲染之前被更新为当前的时间。
-
-延伸阅读：[ViewModel 选项](../../references/component-defs.html)
-
-接下来，我们来详细介绍[数据绑定](./data-binding.html)的相关知识。
diff --git a/_drafts/v1.0/guide/syntax/render-logic.md b/_drafts/v1.0/guide/syntax/render-logic.md
deleted file mode 100644
index f516733..0000000
--- a/_drafts/v1.0/guide/syntax/render-logic.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: 渲染过程控制
-type: guide
-order: 3.5
-version: 0.10
----
-
-# 渲染过程控制
-
-## `append`
-
-`append` 特性定义了当前组件的子组件：
-
-1. 以一整棵树的方式一次性添加到视图中 (`append="tree"`)，还是
-2. 每个子组件都产生一次单独的添加到视图的指令 (`append="node"`)
-
-``` html
-<template>
- <div>
- <div>
- <text>Hello</text>
- <text>Weex</text>
- </div>
- <div append="node">
- <text>Hello</text>
- <text>Weex</text>
- </div>
- <div append="tree">
- <text>Hello</text>
- <text>Weex</text>
- </div>
- </div>
-</template>
-```
-
-[体验一下](http://dotwe.org/417c75415efce66d8e22bf5942b380ee)
-
-在上面的代码中，第一组和第二组 `<div>` 的渲染过程相同，即先添加空的父级 `<div>`，然后插入第一个 `<text>` Hello，然后插入第二个 `<text>` Weex；第三组 `<div>` 则是连带两个 `<text>` 子组件一齐传给渲染层进行渲染的。
-
-渲染结果显而易见，前两组渲染方式会使首次绘制的响应速度比后者快些，但是总渲染时间可能比第三组 `append="tree"` 更长。开发者可以根据实际界面的情况自行选择合理的渲染过程。
-
-默认情况下，除了 `<cell>` 组件的默认渲染过程是 `tree` 模式，其它组件都默认按照 `node` 模式进行渲染。
-
-下一节：[自定义组件](./composed-component.html)
diff --git a/_drafts/v1.0/guide/syntax/style-n-class.md b/_drafts/v1.0/guide/syntax/style-n-class.md
deleted file mode 100644
index afe2de1..0000000
--- a/_drafts/v1.0/guide/syntax/style-n-class.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: CSS 样式和类
-type: guide
-order: 3.2
-version: 0.10
----
-
-# CSS 样式和类
-
-## 基础语法
-
-CSS 样式可以理解为一系列的键值对，其中的每一对描述了一个特定的样式，例如组件的宽或者高。
-
-```css
-.div {
- width: 400;
- height: 50;
-}
-```
-
-键值对的形式是 `prop-name: prop-value;`。键名是 `prop-name`，键值是 `prop-value`。 一般情况下，键名按照连接符的方式进行命名，键和值之间由冒号 `:` 进行分隔，每对键值之间由分号 `;` 进行分隔。
-
-在 Weex 页面上样式有两种形式：
-
-- `<template>` 中的 `style` 特性
-- `<style>` 样式表
-
-### `<template>` 中的 `style` 特性
-
-在 `style` 特性中编写样式，例如：
-
-```html
-<template>
- <div style="width: 400; height: 50;">
- ...
- </div>
-</template>
-```
-
-这段代码的意思是 `<div>` 组件的宽和高分别为 400 像素和 50 像素。
-
-### `<style>` 样式表
-
-例如:
-
-```html
-<style>
- .wrapper { width: 600; }
- .title { width: 400; height: 50; }
- .highlight { color: #ff0000; }
-</style>
-```
-
-样式表包含了多个样式规则，每条规则有一个对应的类，以及由 `{...}` 包括的若干条样式。例如：
-
-```css
-.title { width: 400; height: 50; }
-```
-
-### `class` 特性
-
-`<template>` 标签中的 `class` 特性值用来匹配 `<style>` 样式表中的一个或多个 class 名，多个 class name 之间由空格分隔。例如：
-
-```html
-<template>
- <div class="wrapper">
- <text class="title">...</text>
- <text class="title highlight">...</text>
- </div>
-</template>
-<style>
- .wrapper { width: 600; }
- .title { width: 400; height: 50; }
- .highlight { color: #ff0000; }
-</style>
-```
-
-[体验一下](http://dotwe.org/8487e2a33cd051c9adfa887d0bafbb44)
-
-这段代码的含义是 `<div>` 组件的宽度是 600 像素，两个 `<text>` 组件的尺寸为 400x50，其中第二个文本组件是红色字。
-
-**注意事项**
-
-- 为了简化页面设计和实现，屏幕的宽度统一为 750 像素，不同设备屏幕都会按照比例转化为这一尺寸进行长度计算。
-- 标准 CSS 支持很多样式选择器，但 Weex 目前只支持单个 class name 的选择器。
-- 标准 CSS 支持很多的长度单位，但 Weex 目前只支持像素，并且 `px` 单位可以忽略不写，直接使用对应的数值。更多详情请查看[通用样式](../references/common-style.html)。
-- 子元素的样式不会继承自父元素，这一点与标准 CSS 不同，比如 `color` 和 `font-size` 等样式作用在 `<text>` 上层的 `<div>` 上是无效的。
-- 标准 CSS 包含了非常多的样式属性，但 Weex 只支持了其中的一部分，比如盒模型、flexbox、position 等布局属性，以及 `font-size`、`color` 等其它样式。
-
-## 与数据绑定结合
-
-请查阅[数据绑定](./data-binding.html)中有关 `style` 和 `class` 特性的相关部分。这里简单举个例子：
-
-```html
-<template>
- <div>
- <text style="font-size: {{fontSize}};">Alibaba</text>
- <text class="large {{textClass}}">Weex Team</text>
- </div>
-</template>
-<style>
- .large {font-size: 32;}
- .highlight {color: #ff0000;}
-</style>
-<script>
- module.exports = {
- data: {
- fontSize: 32,
- textClass: 'highlight'
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/440d3318dc7b83e3bb0a110f3b3236ca)
-
-下一篇：[事件处理](./events.html)
diff --git a/_drafts/v1.0/index.md b/_drafts/v1.0/index.md
deleted file mode 100644
index 9e59b8c..0000000
--- a/_drafts/v1.0/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
-layout: index
-type: index
-subtitle: 快速、简洁且高效
-version: 0.10
----
\ No newline at end of file
diff --git a/_drafts/v1.0/migration/difference.md b/_drafts/v1.0/migration/difference.md
deleted file mode 100644
index b11c6c2..0000000
--- a/_drafts/v1.0/migration/difference.md
+++ /dev/null
@@ -1,249 +0,0 @@
----
-title: Weex 和 Vue 2.x 的语法差异
-type: references
-order: 12.2
-version: 2.1
----
-
-# Weex 和 Vue 2.x 的语法差异
-
-## Overview
-
-
-| | Weex | Vue |
-| ---- | ---- | --- |
-| 生命周期 | `ready: function() {}` | `mounted: function() {}` |
-| 条件指令 | `if="{% raw %}{{!foo}}{% endraw %}"` | `v-if="!foo"` |
-| 循环指令 | `repeat="{% raw %}{{item in list}}{% endraw %}"` | `v-for="item in list"` |
-| 样式类名 | `class="btn btn-{% raw %}{{type}}{% endraw %}"` | `:class="['btn', 'btn-' + type]"` |
-| 内联样式 | `style="color:{% raw %}{{textColor}}{% endraw %}"` | `:style="{ color: textColor }"` |
-| 事件绑定 | `onclick="handler"` | `@click="handler"` |
-| 原生事件 | `onclick="xxx"` | `@click.native="xxx"` |
-| 数据绑定 | `src="{% raw %}{{rightItemSrc}}{% endraw %}"` | `:src="rightItemSrc"` |
-| 内容/槽 | `<content></content>` | `<slot></slot>` |
-| 数据初始化 | `data: { value: 'x' }` | `data: function() { return { value: 'x' } }` |
-| 标签 ID | `id="xxx"` | `ref="xxx"` |
-| 获取节点 | `this.$el('xxx')` | `this.$refs.xxx` |
-
-
-## Reference
-
-See the source code of `weex-vue-migration` for more details:
-
-+ [template-rewriter](https://github.com/songsiqi/weex-vue-migration/blob/master/src/template-rewriter/rewriter.js)
-+ [script-rewriter](https://github.com/songsiqi/weex-vue-migration/blob/master/src/script-rewriter/rewriter.js)
-
-## LifeCycle Hooks 生命周期钩子
-| weex | vue | Description |
-| --------- | ------------- | ------------------------- |
-| init | beforeCreate | 组件实例刚刚被创建，组件属性如data计算之前 |
-| created | created | 组件实例创建完成，属性已绑定，但DOM还未生成 |
-| | beforeMount | 模板编译/挂载之前 |
-| ready | mounted | 模板编译/挂载之后 |
-| | beforeUpdate | 组件更新之前 |
-| | updated | 组件更新之后 |
-| | activated | for`keep-alive`, 组件被激活时调用 |
-| | deactivated | for`keep-alive`, 组件被移除时调用 |
-| | beforeDestroy | 组件被销毁前调用 |
-| destroyed | destroyed | 组件被销毁后调用 |
-
-# Data Binding 数据绑定
-
-在weex中，使用{% raw %}{{…}}{% endraw %}在`<template>`中绑定在`<script>`里定义的数据；在vue中，需要在要绑定的属性前加 `:` 。如以下示例。
-
-* 类名
-
- - weex
-
- ```html
- <div class="btn btn-{{type}}"></div>
- ```
-
- - vue
-
- ```html
- <div :class="['btn', 'btn-' + type]"></div>
- ```
-
-* 样式绑定
-
- * weex
-
- ```html
- <div style="color:{{textColor}}"></div>
- ```
-
- * vue
-
- ```html
- <div :style="{color: textColor}"></div>
- ```
-
-# if指令
-
-* weex
-
- ```html
- <image src="..." if="{{shown}}"></image>
- ```
-
- or
-
- ```html
- <image src="..." if="shown"></image>
- ```
-
-* vue
-
- ```html
- <image src="..." v-if="shown"></image>
- ```
-
-# 循环指令
-
-* weex: repeat
- - `$index`为索引
-
- ```html
- <div repeat="{{list}}">
- <text>No. {{$index + 1}}</text>
- <div>
- ```
-
- or
-
- ```html
- <div repeat="{{v in list}}">
- <text>No. {{$index + 1}}, {{v.nickname}}</text>
- </div>
- ```
-
- - 对象参数的顺序
-
- ```html
- <div repeat="{{(key, value) in list}}">
- <text>No. {{key + 1}}, {{value.nickname}}</text>
- </div>
- ```
-
- - `track-by`
-
- ```html
- <div repeat="{{item in items}}" track-by="item.id" class="{{gender}}"></div>
- ```
-
-* vue: v-for
-
- - 移除`$index`索引
-
- - 对象参数的改变：改为(value, key), 与通用的对象迭代器保持一致
-
- ```html
- <div repeat="{{(value, key) in list}}">
- <text>No. {{key + 1}}, {{value.nickname}}</text>
- </div>
- ```
-
- - `track-by` 替换为`v-bind`
-
- ```html
- <div v-for="item in items" v-bind:key="item.id">
- ```
-
-# 初始化数据
-
-* weex
-
- ```javascript
- data: { value: 'x' }
- ```
-
-* vue
-
- ```javascript
- props: { value: { default: 'x' } }
- ```
-
- 动态数据
-
- ```javascript
- data: function () { return { value: 'x' } }
- ```
-
-
-# 围绕DOM的实例方法
-
-* 获取节点
-
- - weex: `this.$el('xxx')`
-
- ```html
- <template>
- <container>
- <text id="top">Top</text>
- </container>
- </template>
- <script>
- module.exports = {
- methods: {
- toTop: function () {
- var top = this.$el('top')
- }
- }
- }
- </script>
- ```
-
- - vue
-
- ```javascript
- this.$refs.xxx
- ```
-
-
-
-# 事件
-* 事件绑定
- - weex
-
- ```html
- <div onclick="handler"></div>
- ```
-
- - vue
-
- ```html
- <div @click="handler"></div>
- ```
-
-* 事件触发
- - weex: dispatch和broadcast
-
- ```javascript
- this.$dispatch()
- ```
-
- ```javascript
- this.$broadcast()
- ```
-
- - vue: emit
-
- ```javascript
- this.$emit()
- ```
-
- > 注：Weex 的 `$dispatch` 与组件无关，在任意组件中都可以通过 `$on` 捕获到，Vue 的`$emit` 用于触发组件(标签)的自定义事件。
-
-* 原生事件
- - weex
-
- ```javascript
- onclick="xxx"
- ```
-
- - vue
-
- ```javascript
- @click.native="xxx"
- ```
diff --git a/_drafts/v1.0/migration/index.md b/_drafts/v1.0/migration/index.md
deleted file mode 100644
index 1238936..0000000
--- a/_drafts/v1.0/migration/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: 迁移
-type: references
-order: 12
-version: 2.1
----
-
-# 迁移
-
-- [如何将原有 Weex 项目改造成 Vue 版本](./migration-from-weex.html)
-- [Weex 和 Vue 2.x 的语法差异](./difference.html)
\ No newline at end of file
diff --git a/_drafts/v1.0/migration/migration-from-weex.md b/_drafts/v1.0/migration/migration-from-weex.md
deleted file mode 100644
index 34c3c6d..0000000
--- a/_drafts/v1.0/migration/migration-from-weex.md
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: 如何将原有 Weex 项目改造成 Vue 版本
-type: references
-order: 12.1
-version: 2.1
----
-
-# 如何将原有 Weex 项目改造成 Vue 版本
-
-Weex 本身有一套语法规则，和 Vue 本身很相似，现在 Weex 与 Vue 有了官方合作，支持将 Vue 2.x 作为内置的前端框架，我们也推荐大家使用 Vue 2.x 的语法开发原生应用。对于现存旧版的 `.we` 文件，建议大家将其改造成 Vue 版本。
-
-## 要解决的问题
-
-> 将内核切换成 Vue 之后，原先基于 Weex 语法开发的项目将如何过渡到 Vue ？
-
-首先需要明确一点：Weex 原有的前端框架也会继续存在于 WeexSDK 中，依然支持 `.we` 文件格式的写法。
-
-此外，由于 `.we` 和 `.vue` 文件的格式本身就比较接近，所以迁移成本比较小，建议大家将现有 `.we` 格式的文件都转换成 `.vue` 格式。我们也推出了相应的工具和方法辅助迁移，在内部也有大量的成功实践，下边将重点介绍一下将 `.we` 文件转成 `.vue` 文件的方法。
-
-## 第一步，借助工具实现语法转换
-
-首先介绍一个工具： **[weex-vue-migration](https://github.com/songsiqi/weex-vue-migration)** ，它可以自动将 `.we` 文件转为 `.vue` 文件，绝大多数的模板语法都能自动转换，语法差异如下：
-
-| | Weex | Vue |
-| ---- | ---- | --- |
-| 生命周期 | `ready: function() {}` | `mounted: function() {}` |
-| 条件指令 | `if="{% raw %}{{!foo}}{% endraw %}"` | `v-if="!foo"` |
-| 循环指令 | `repeat="{% raw %}{{item in list}}{% endraw %}"` | `v-for="item in list"` |
-| 样式类名 | `class="btn btn-{% raw %}{{type}}{% endraw %}"` | `:class="['btn', 'btn-' + type]"` |
-| 内联样式 | `style="color:{% raw %}{{textColor}}{% endraw %}"` | `:style="{ color: textColor }"` |
-| 事件绑定 | `onclick="handler"` | `@click="handler"` |
-| 原生事件 | `onclick="xxx"` | `@click.native="xxx"` |
-| 数据绑定 | `src="{% raw %}{{rightItemSrc}}{% endraw %}"` | `:src="rightItemSrc"` |
-| 内容/槽 | `<content></content>` | `<slot></slot>` |
-| 数据初始化 | `data: { value: 'x' }` | `data: function() { return { value: 'x' } }` |
-| 标签 ID | `id="xxx"` | `ref="xxx"` |
-| 获取节点 | `this.$el('xxx')` | `this.$refs.xxx` |
-
-想要了解更多语法差异的细节，可以参考这篇文章：[《Weex 和 Vue 2.x 的语法差异》](./difference.html) 。
-
-### 使用方法
-
-首先安装工具：
-
-```bash
-npm install weex-vue-migration -g
-```
-
-转换文件：
-
-```bash
-weex-vue-migrate demo.we
-```
-
-转换成功后，将会在当前目录下生成 `demo.vue` 文件，控制台将会有如下输出：
-
-```
-[Success]: Migrate demo.we => demo.vue in 33ms
-Migration finished in 0.035s
-```
-
-除了逐个转换 `.we` 文件以外，`weex-vue-migration` 还支持批量转换整个目录，参考其[说明文档](https://github.com/songsiqi/weex-vue-migration/blob/master/README.md)可以了解更详细的使用方法。
-
-### 注意事项
-
-转换工具将不再支持 Weex 中废弃的语法，如果代码中有如下写法，建议先手动修改再做转换。
-
-0. 忽略 `require('@weex-components')` 语句，可以通过 npm 包的方式引入外部组件。
-0. 无法转换 `repeat="list"` 写法，仅支持 `repeat="item in list"` 格式。
-0. 不支持转换 `<script type="config"></script>`，目前 Vue 中不支持原有的降级配置。
-
-## 第二步，手动调整代码细节
-
-模板和样式的转换都可以借助工具轻易转换过来，`<script>` 中基本的语法也可以转换；但是由于 javascript 的写法比较灵活，仅仅使用工具做转换，并不一定能完美过渡。工具只能处理语法但是理解不了代码中的逻辑，在 Weex 和 Vue 的框架特性存在一些差异，有些差异还是需要手动修改才可以生效。
-
-> 提示：在代码中使用的“黑科技”越多，项目就越难以转换。
-
-### 样式单位
-
-在 `.we` 文件写样式时，开发者通常都不写长度单位，默认会被视为 `px`。在新的 Vue 版本的 Web 渲染器中，`<style>` 中的样式将会直接转化成 CSS class，如果不写单位、浏览器将无法正确识别，会导致在 Web 端无法正常渲染。Native 环境中不受影响。
-
-尽管不影响 Native 页面的渲染，也建议给样式长度加上单位 `px`。
-
-### 旧框架中的内置属性
-
-+ `vm._app`
- + `vm._app.differ`
- + `vm._app.doc`
- + `vm._app.updateActions()`
-
-### 事件派发机制
-
-+ `$dispatch` 、`$broadcast` 、`$call` 方法已经废弃。
-+ `$emit` 行为不一致。
-
-可以使用 Vuex 管理数据状态。
-
-### 直接操作 Virtual-DOM
-
-Weex 和 Vue 中的 Virtual-DOM 格式并不相同，如果你使用了 `this.$el('id')` 获取了某个组件的 element 之后，又修改了其中的某些属性或者调用了某些方法，这些操作在 Vue 中很难找到直接的对应写法。
-
-从另一个角度讲，我们也非常不建议在 Weex 或 Vue 项目中直接操作 Virtual-DOM，这些写法都应该修改。
-
-## 调整开发环境和工具
-
-在文件转换完成后，还需要重新调整一下开发环境。
-
-### 文件的编译
-
-`weex-loader` 同时支持编译 `.we` 和 `.vue` 文件，如果你使用的是 `webpack` 来配置编译环境，将不需要做任何改变就能直接编译 `.vue` 文件。
-
-需要注意的是，Vue 本身就是一个独立的前端框架，使用 Vue 编写的项目在 Web 上完全可以不依赖 Weex 容器运行。在这种情况下，需要配置基于 `vue-loader` 的编译脚本生成适用于 Web 平台 js 文件；然后引入 Vue 格式的 Weex 组件库就可以在 Web 中。
-
-### 辅助工具
-
-Weex 提供了 [weex-toolkit](https://github.com/weexteam/weex-toolkit) 的脚手架工具来辅助开发和调试、[weex-pack](https://github.com/weexteam/weex-pack) 实现打包原生应用；同样在 Vue 中也有 [vue-cli](https://github.com/vuejs/vue-cli) 脚手架工具。Weex 和 Vue 的工具互相做了适配，建议在创建项目和开发 Vue 项目的时候使用 `vue-cli` ，在调试时使用 `weex-toolkit`，在打包原生应用时使用 `weex-pack` 。
diff --git a/_drafts/v1.0/references/api.md b/_drafts/v1.0/references/api.md
deleted file mode 100644
index e3e5e4b..0000000
--- a/_drafts/v1.0/references/api.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: ViewModel APIs
-type: references
-order: 1.3
-version: 0.10
----
-
-# 接口
-
-你可以在组件的方法中通过 `this` （Vm）上下文访问这些 API。
-
-例子：
-
-```html
-<script>
-module.exports = {
- methods: {
- somemethod: function() {
- this.$vm('someId');
- }
- }
-}
-</script>
-```
-
-## $(id)
-
-**不建议使用**，请使用 `$vm` 代替。
-## $el(id)
-
-返回对应 id 的元素对象的引用。
-### Arguments
-- `id` _(string)_: 唯一标识符。
-### Returns
-- _(Element)_: 一个元素对象的引用。
-### Tips
-- id 只能保证是当前（页面）组件中是唯一的，如果你需要寻找父组件或子组件，你可以利用组件间的通信模式实现。
-- 延伸阅读： [id](../guide/syntax/id.md)，[Communicate Between Components](../guide/syntax/comm.md)
-## $vm(id)
-
-返回对应 id 的 vm 对象引用。
-### Arguments
-- `id` _(String)_: 唯一标识符。
-### Returns
-- `vm` _(Vm)_: 一个 Vm 对象引用。
-### Tips
-- id 只能保证是当前（页面）组件中是唯一的，如果你需要寻找父组件或子组件，你可以利用组件间的通信模式实现。
-- 延伸阅读： [id](../guide/syntax/id.md)，[Communicate Between Components](../guide/syntax/comm.md)
-## $getConfig()
-
-获取当前全局环境变量和配置信息。
-### Returns
-- `config` _(object)_: 配置对象；
-- `bundleUrl` _(string)_: bundle 的 url；
-- `debug` _(boolean)_: 是否是调试模式；
-- `env` _(object)_: 环境对象；
- - `weexVersion` _(string)_: Weex sdk 版本；
- - `appName` _(string)_: 应用名字；
- - `appVersion` _(string)_: 应用版本；
- - `platform` _(string)_: 平台信息，是 `iOS`、`Android` 还是 `Web`；
- - `osVersion` _(string)_: 系统版本；
- - `deviceModel` _(string)_: 设备型号 **（仅原生应用）**；
- - `deviceWidth` _(number)_: 设备宽度，默认为 `750`；
- - `deviceHeight` _(number)_: 设备高度。
-## $call(module, method, ...args)
-
-**不建议使用**，请使用 `require('@weex-module/module')[method](...args)` 代替。查看更多信息：[modules](./modules/main)。
diff --git a/_drafts/v1.0/references/bubble.md b/_drafts/v1.0/references/bubble.md
deleted file mode 100644
index 74b7e98..0000000
--- a/_drafts/v1.0/references/bubble.md
+++ /dev/null
@@ -1,150 +0,0 @@
----
-title: 事件冒泡
-type: references
-order: 1.3
-version: 0.10
----
-
-# 事件冒泡 <span class="api-version">v0.13+</span>
-
-Weex 1.0 实现了 W3C 标准的事件冒泡机制。
-
-### 使用
-
-```html
-<template>
- <div class="root" onclick="rootClick" bubble="true">
- <div>
- <text style="font-size: 40px;">{{rootText}}</text>
- </div>
- <div class="outer" onclick="parentClick">
- <div>
- <text style="font-size: 40px;">{{parentText}}</text>
- </div>
- <text class="inner" onclick="click">{{innerText}}</text>
- </div>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- innerText: 'click me',
- parentText: '',
- rootText: ''
- },
- methods: {
- click: function(e) {
- this.innerText = 'inner bubble'
- },
- parentClick: function(e) {
- this.parentText = 'parent bubble'
- },
- rootClick: function(e) {
- this.rootText = 'root bubble'
- }
- }
- }
-</script>
-
-<style>
- .inner {
- font-size: 40px;
- text-align: center;
- background-color: #7a9b1b;
- padding: 40px;
- }
-
- .outer {
- font-size: 40px;
- text-align: center;
- background-color: #9b7a1b;
- padding: 120px;
- }
-
- .root {
- font-size: 40px;
- text-align: center;
- background-color: #7a1b9b;
- padding: 80px;
- }
-</style>
-```
-
-[try it](http://dotwe.org/weex/dbfeb926e003986e2eea88c8ccdadb92)
-
-运行以上代码，用客户端打开，点击中间的元素，可以看到事件向上传播，依次触发。
-
-### 注意
-
-需要注意的是: ** 为了兼容之前的版本，Weex 默认不会开启事件冒泡机制。需要在根元素的属性上，添加 `bubble="true"` 来开启冒泡机制。否则，将不会向上传播事件，保持与之前版本的效果相同。 **
-
-### stopPropagation
-
-在事件处理函数中，可以使用 `e.stopPropagation()` 方法，来阻止本次事件向上的传递过程。注意，`e.stopPropagation()` 与 `bubble="true"` 不同，前者只会影响当前元素以及父元素的传播，不会影响子元素的传播；后者是为了版本兼容而增加的开关机制，会全局关闭或者开启冒泡机制，两者可以共同存在使用，如下：
-
-```html
-<template>
- <div class="root" onclick="rootClick" bubble="true">
- <div>
- <text style="font-size: 40px;">{{rootText}}</text>
- </div>
- <div class="outer" onclick="parentClick">
- <div>
- <text style="font-size: 40px;">{{parentText}}</text>
- </div>
- <text class="inner" onclick="click">{{innerText}}</text>
- </div>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- innerText: 'click me',
- parentText: '',
- rootText: ''
- },
- methods: {
- click: function(e) {
- this.innerText = 'inner bubble'
- },
- parentClick: function(e) {
- this.parentText = 'parent bubble'
- e.stopPropagation()
- },
- rootClick: function(e) {
- this.rootText = 'root bubble'
- // e.stopPropagation()
- }
- }
- }
-</script>
-
-<style>
- .inner {
- font-size: 40px;
- text-align: center;
- background-color: #7a9b1b;
- padding: 40px;
- }
-
- .outer {
- font-size: 40px;
- text-align: center;
- background-color: #9b7a1b;
- padding: 120px;
- }
-
- .root {
- font-size: 40px;
- text-align: center;
- background-color: #7a1b9b;
- padding: 80px;
- }
-</style>
-```
-
-[try it](http://dotwe.org/weex/0cab45a7c62e8bebedd2ffd83a8e1256)
-
-运行以上代码，用客户端打开，点击中间的元素，可以看到事件向上传播到父元素被终止，不再继续往根元素传播。
diff --git a/_drafts/v1.0/references/cheatsheet.md b/_drafts/v1.0/references/cheatsheet.md
deleted file mode 100644
index 777abf6..0000000
--- a/_drafts/v1.0/references/cheatsheet.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: Weex 快查手册
-type: references
-order: 6
-version: 0.10
----
-
-# Weex 备忘录
-
-## Native 组件
-<style>
-code {
- word-break: break-all;
-}
-</style>
-
-| 组件 | 特性 | 样式 | 事件 | 特殊父组件 | 子组件 |
-| ---- | ---- | ---- | ---- | ---- | ---- |
-| `<div>` | - | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
-| `<text>` | `value` | **box model**<br>flex<br>`position`<br>`background-color`<br>`opacity`<br>`color`<br>`font-size`<br>`font-style`<br>`font-weight`<br>`text-decoration`<br>`text-align`<br>`text-overflow`<br>`line-height` | `click`<br>`appear`<br>`disappear` | - | text only |
-| `<image>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity`<br>`resize` | `click`<br>`appear`<br>`disappear` | - | (none) |
-| `<scroller>` | `show-scrollbar`<br>`scroll-direction` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
-| `<list>` | `loadmoreoffset` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`loadmore`<br>`refresh`<br>`loading` | - | `<cell>`<br>`<header>`<br>`<refresh>`<br>`<loading>` |
-| `<cell>` | - | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | `<list>` | (any) |
-| `<slider>` | `auto-play` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`change` | - | (any)<br>`<indicator>` |
-| `<indicator>` | - | **box model**<br>**flexbox**<br>`position`<br>`item-color`<br>`item-selected-color`<br>`item-size` | `click`<br>`appear`<br>`disappear` | `<slider>` | (none) |
-| `<wxc-navpage>` | `height`<br>`background-color`<br>`title`<br>`title-color`<br>`left-item-title`<br>`left-item-color`<br>`right-item-title`<br>`right-item-color`<br>`left-item-src`<br>`right-item-src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`naviBar.leftItem.click`<br>`naviBar.rightItem.click` | - | (any) |
-| `<wxc-tabbar>` | `tab-items` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `tabBar.onClick` | - | (none) |
-| `<embed>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (none) |
-| `<web>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`pagestart`<br>`pagefinish`<br>`error` | - | (none) |
-| `<video>` | `src`<br>`play-status`<br>`auto-play` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`start`<br>`pause`<br>`finish`<br>`fail` | - | (none) |
-| `<a>` | `href` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
-| `<input>` | `type`<br>`value`<br>`placeholder`<br>`disabled`<br>`autofocus` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity`<br>`placeholder-color`<br>`color`<br>`font-size`<br>`font-style`<br>`font-weight`<br>`text-align` | `click`<br>`appear`<br>`disappear` | - | (none) |
-| `<switch>` | `checked` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `appear`<br>`disappear`<br>`input`<br>`change`<br>`focus`<br>`blur` | - | (none) |
-
-## Native Modules
-
-| module | apis |
-| ---- | ---- |
-| `@weex-module/dom` | `scrollToElement(node, { offset })` |
-| `@weex-module/modal` | `toast({ message, duration })`<br>`alert({ message, okTitle }, callback)`<br>`confirm({ message, okTitle, cancelTitle }, callback(result))`<br>`prompt({ message, okTitle, cancelTitle }, callback(result, data))` |
-| `@weex-module/stream` | `fetch({ method, url, headers, type, body }, callback({ status, ok, statusText, data, headers }), progressCallback({ readyState, status, length, statusText, headers}))` |
-| `@weex-module/webview` | `goBack(ref)`<br>`goForward(ref)`<br>`reload(ref)` |
-| `@weex-module/navigator` | `push({ url, animated }, callback)`<br>`pop({ animated }, callback)` |
-| `@weex-module/animation` | `transition(node, { styles, duration, timingFunction, delay, transform-origin }, callback)` |
-
-## 特殊的模版语法
-
-* `<foo x="abc">`
-* `{% raw %}<foo x="{{expr}}">{% endraw %}`
-* `<foo style="name1: value1; name2: value2">`
-* `{% raw %}<foo style="name1: value1; name2: {{expr}}; name3: ...">{% endraw %}`
-* `<foo class="a b c">`
-* `{% raw %}<foo class="a {{expr}} c">{% endraw %}`
-* `<foo onclick="methodName">`
-* `<foo id="abc">`
-* `<foo if="expr">`
-* `<foo repeat="item in list">`
-* `<foo repeat="(key,item) in list">`
-* `<component type="foo">`
-* `{% raw %}<component type="{{expr}}">{% endraw %}`
-
-## ViewModel APIs
-
-* `this.$vm(el)`
-* `this.$el(el)`
-* `this.$getConfig()`
-* `this.$emit(type, data)`
-* `this.$dispatch(type, data)`
-* `this.$broadcast(type, data)`
-
-## ViewModel Options
-
-* `data`
-* `methods`
-* `computed`
-* `init`, `created`, `ready`
-* `events`
-
-**示例：**
-
-```javascript
-module.exports = {
-
- data: function () {
- return {
- x: 1,
- y: 2
- }
- }
-
- methods: {
- foo: function () {
- console.log('foo')
- }
- },
-
- computed: {
- z: function () {
- return this.x + this.y
- }
- },
-
- events: {
- custom: function (e) {
- console.log(e)
- }
- },
-
- init: function () {},
- created: function () {},
- ready: function () {}
-}
-```
diff --git a/_drafts/v1.0/references/color-names.md b/_drafts/v1.0/references/color-names.md
deleted file mode 100644
index 1b8a968..0000000
--- a/_drafts/v1.0/references/color-names.md
+++ /dev/null
@@ -1,180 +0,0 @@
----
-title: 颜色名称列表
-type: references
-order: 1.8
-version: 0.10
----
-
-# Weex 支持的所有颜色名称
-
-### 基础颜色关键词:
-
-| 颜色名 | 十六进制RGB值 |
-| --- | --- |
-| black(黑) | #000000 |
-| silver(银) | #C0C0C0 |
-| gray(灰) | #808080 |
-| white(白) | #FFFFFF |
-| maroon(褐紫红) | #800000 |
-| red(红) | #FF0000 |
-| purple(紫) | #800080 |
-| fuchsia(晚樱) | #FF00FF |
-| green(绿) | #008000 |
-| lime(石灰) | #00FF00 |
-| olive(橄榄) | #808000 |
-| yellow(黄) | #FFFF00 |
-| navy(海军蓝) | #000080 |
-| blue(蓝) | #0000FF |
-| teal(水鸭) | #008080 |
-| aqua(水蓝) | #00FFFF |
-### 扩展颜色关键词:
-
-| 颜色名 | 十六进制RGB值 |
-| --- | --- |
-| aliceblue | #F0F8FF |
-| antiquewhite | #FAEBD7 |
-| aqua | #00FFFF |
-| aquamarine | #7FFFD4 |
-| azure | #F0FFFF |
-| beige | #F5F5DC |
-| bisque | #FFE4C4 |
-| black | #000000 |
-| blanchedalmond | #FFEBCD |
-| blue | #0000FF |
-| blueviolet | #8A2BE2 |
-| brown | #A52A2A |
-| burlywood | #DEB887 |
-| cadetblue | #5F9EA0 |
-| chartreuse | #7FFF00 |
-| chocolate | #D2691E |
-| coral | #FF7F50 |
-| cornflowerblue | #6495ED |
-| cornsilk | #FFF8DC |
-| crimson | #DC143C |
-| cyan | #00FFFF |
-| darkblue | #00008B |
-| darkcyan | #008B8B |
-| darkgoldenrod | #B8860B |
-| darkgray | #A9A9A9 |
-| darkgreen | #006400 |
-| darkgrey | #A9A9A9 |
-| darkkhaki | #BDB76B |
-| darkmagenta | #8B008B |
-| darkolivegreen | #556B2F |
-| darkorange | #FF8C00 |
-| darkorchid | #9932CC |
-| darkred | #8B0000 |
-| darksalmon | #E9967A |
-| darkseagreen | #8FBC8F |
-| darkslateblue | #483D8B |
-| darkslategray | #2F4F4F |
-| darkslategrey | #2F4F4F |
-| darkturquoise | #00CED1 |
-| darkviolet | #9400D3 |
-| deeppink | #FF1493 |
-| deepskyblue | #00BFFF |
-| dimgray | #696969 |
-| dimgrey | #696969 |
-| dodgerblue | #1E90FF |
-| firebrick | #B22222 |
-| floralwhite | #FFFAF0 |
-| forestgreen | #228B22 |
-| fuchsia | #FF00FF |
-| gainsboro | #DCDCDC |
-| ghostwhite | #F8F8FF |
-| gold | #FFD700 |
-| goldenrod | #DAA520 |
-| gray | #808080 |
-| green | #008000 |
-| greenyellow | #ADFF2F |
-| grey | #808080 |
-| honeydew | #F0FFF0 |
-| hotpink | #FF69B4 |
-| indianred | #CD5C5C |
-| indigo | #4B0082 |
-| ivory | #FFFFF0 |
-| khaki | #F0E68C |
-| lavender | #E6E6FA |
-| lavenderblush | #FFF0F5 |
-| lawngreen | #7CFC00 |
-| lemonchiffon | #FFFACD |
-| lightblue | #ADD8E6 |
-| lightcoral | #F08080 |
-| lightcyan | #E0FFFF |
-| lightgoldenrodyellow | #FAFAD2 |
-| lightgray | #D3D3D3 |
-| lightgreen | #90EE90 |
-| lightgrey | #D3D3D3 |
-| lightpink | #FFB6C1 |
-| lightsalmon | #FFA07A |
-| lightseagreen | #20B2AA |
-| lightskyblue | #87CEFA |
-| lightslategray | #778899 |
-| lightslategrey | #778899 |
-| lightsteelblue | #B0C4DE |
-| lightyellow | #FFFFE0 |
-| lime | #00FF00 |
-| limegreen | #32CD32 |
-| linen | #FAF0E6 |
-| magenta | #FF00FF |
-| maroon | #800000 |
-| mediumaquamarine | #66CDAA |
-| mediumblue | #0000CD |
-| mediumorchid | #BA55D3 |
-| mediumpurple | #9370DB |
-| mediumseagreen | #3CB371 |
-| mediumslateblue | #7B68EE |
-| mediumspringgreen | #00FA9A |
-| mediumturquoise | #48D1CC |
-| mediumvioletred | #C71585 |
-| midnightblue | #191970 |
-| mintcream | #F5FFFA |
-| mistyrose | #FFE4E1 |
-| moccasin | #FFE4B5 |
-| navajowhite | #FFDEAD |
-| navy | #000080 |
-| oldlace | #FDF5E6 |
-| olive | #808000 |
-| olivedrab | #6B8E23 |
-| orange | #FFA500 |
-| orangered | #FF4500 |
-| orchid | #DA70D6 |
-| palegoldenrod | #EEE8AA |
-| palegreen | #98FB98 |
-| paleturquoise | #AFEEEE |
-| palevioletred | #DB7093 |
-| papayawhip | #FFEFD5 |
-| peachpuff | #FFDAB9 |
-| peru | #CD853F |
-| pink | #FFC0CB |
-| plum | #DDA0DD |
-| powderblue | #B0E0E6 |
-| purple | #800080 |
-| red | #FF0000 |
-| rosybrown | #BC8F8F |
-| royalblue | #4169E1 |
-| saddlebrown | #8B4513 |
-| salmon | #FA8072 |
-| sandybrown | #F4A460 |
-| seagreen | #2E8B57 |
-| seashell | #FFF5EE |
-| sienna | #A0522D |
-| silver | #C0C0C0 |
-| skyblue | #87CEEB |
-| slateblue | #6A5ACD |
-| slategray | #708090 |
-| slategrey | #708090 |
-| snow | #FFFAFA |
-| springgreen | #00FF7F |
-| steelblue | #4682B4 |
-| tan | #D2B48C |
-| teal | #008080 |
-| thistle | #D8BFD8 |
-| tomato | #FF6347 |
-| turquoise | #40E0D0 |
-| violet | #EE82EE |
-| wheat | #F5DEB3 |
-| white | #FFFFFF |
-| whitesmoke | #F5F5F5 |
-| yellow | #FFFF00 |
-| yellowgreen | #9ACD32 |
diff --git a/_drafts/v1.0/references/common-attrs.md b/_drafts/v1.0/references/common-attrs.md
deleted file mode 100644
index 8ac1c0f..0000000
--- a/_drafts/v1.0/references/common-attrs.md
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: 通用特性
-type: references
-order: 1.5
-version: 0.10
----
-
-# 通用特性
-
-特性（attribute）与 HTML 中元素特性类似，提供了与 Weex 元素有关的其他附加信息。所有的元素都可以拥有特性, 特性总是在 Weex 元素的起始标签中定义，并总是以键值对的形式出现，例如：`name="value"`。可以使用 [Mustache](https://mustache.github.io/) 对特性值进行数据绑定。
-
-**Notes!**
-
-Weex 遵循 [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) 命名规范, 所以请 **不要在特性中使用驼峰风格（CamelCase）** , 使用`-`连接符的**羊肉串风格（kebab-case）** 才是更好的命名方式。
-
-所有 Weex 元素都拥有以下特性：
-
-## id
-
-为 `<template>` 内定义的元素指定一个唯一的 id，通过 `this.$el(id)` 可以容易地获取一个 Weex 元素的引用。更多信息可参考 [Instance APIs](./api.html)
-
-```html
-<template>
- <div id="wrapper">
- <list class="list">
- <cell class="row" repeat="item in rows" id="item-{{$index}}">
- <text class="item-title">row {{item.id}}</text>
- </cell>
- </list>
- </div>
-</template>
-<style></style>
-
-<script>
-module.exports = {
- data: {
- rows:[
- {id: 1},
- {id: 2},
- {id: 3},
- {id: 4},
- {id: 5}
- ]
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/b5032fa96e3e657711916148b1978ad3)
-
-## style
-
-为元素定义行内样式。
-
-```html
-<div style="width: 200px; height: 200px; color: #ff0000;"></div>
-<div style="padding: {{x}}; margin: 0"></div>
-```
-
-## class
-
-为元素定义一个或多个类名（引用样式表中的类）。
-
-```html
-<div class="button"></div>
-<div class="button {{btnStatus}}"></div>
-```
-
-## repeat
-
-我们可以通过 `repeat` 特性根据一个数组进行渲染，迭代地生成当前标签的内容。`repeat` 特性有着 `item in items` 形式的特殊语法，其中，`items` 是数组数据，`item` 是数组元素迭代的别名。
-
-```html
-<template>
- <div>
- <list class="list">
- <cell class="row" repeat="item in rows" id="item-{{$index}}">
- <text class="item-title">row {{item.id}}</text>
- </cell>
- </list>
- </div>
-</template>
-
-<style></style>
-
-<script>
-module.exports = {
- data: {
- rows:[
- {id: 1},
- {id: 2},
- {id: 3},
- {id: 4},
- {id: 5}
- ]
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/b5032fa96e3e657711916148b1978ad3)
-
-## if
-
-提供一个布尔值来决定是否显示当前标签。当值为 `true` 时，元素显示，为 `false` 时元素隐藏。
-
-```html
-<div if="true"></div>
-<div if="{{opened}}"></div>
-<div if="{{direction === 'row'}}"></div>
-```
-
-## append
-
-append 特性用于控制渲染次序。它的可选值为 `tree` 或 `node`，默认为 `tree`，不支持数据绑定。不同的值会执行不同的渲染过程：
-
-- `append="tree"` 是一次性渲染整个节点树，渲染更高效，但是如果页面太大容易造成较长时间的白屏。
-- `append="node"` 所有节点逐个渲染，整体渲染速度略慢，但是用户体验好一些。
-
-通过 `node` 和 `tree` 可以精细化地控制页面展示的逻辑和颗粒度，一般比较好的实践为首屏以内按 `tree` 解析，首屏以外按 `node` 解析。
-
-```html
-<div append="tree"></div>
-<div append="node"></div>
-```
-
-## 事件处理 (on...)
-
-在 Weex 标签上注册事件处理器。以 `on` 加 事件名为 `key`，事件处理函数为 `value`。
-
-```html
-<template>
- <div class="btn" onClick="alertMsg"><text>Click me</text></div>
-</template>
-
-<style>
-.btn {
- justify-content: center;
- align-items: center;
- width: 200;
- height: 100;
- background-color: #ff0000;
- border-radius: 5;
- color: #ffffff;
-}
-</style>
-
-<script>
-var modal = require('@weex-module/modal')
-
-module.exports = {
- data: {},
- methods: {
- alertMsg: function (e) {
- modal.alert({
- message: 'click',
- okTitle: 'alert'
- }, function() {
- })
- }
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/97de59d24d7667aa91187d59123d24a6)
diff --git a/_drafts/v1.0/references/common-event.md b/_drafts/v1.0/references/common-event.md
deleted file mode 100644
index 2554fe1..0000000
--- a/_drafts/v1.0/references/common-event.md
+++ /dev/null
@@ -1,492 +0,0 @@
----
-title: 通用事件
-type: references
-order: 1.10
-version: 0.10
----
-
-# 通用事件
-
-Weex 提供了通过事件触发动作的能力，例如在用户点击组件时执行 JavaScript。下面列出了可被添加到 Weex 组件上以定义事件动作的属性：
-
-## `click`
-
-当组件上发生点击手势时被触发。
-
-**注意：**
-
-`<input>` 和 `<switch>` 组件目前不支持 `click` 事件，请使用 `change` 或 `input` 事件来代替。
-
-### 事件对象
-
-- `type`: `click`
-- `target`: 触发点击事件的目标组件
-- `timestamp`: 触发点击事件时的时间戳
-
-### 示例
-
-点击按钮，将弹出弹框，再点击弹框 `×`，关闭弹框。
-
-```html
-<template>
- <div>
- <div>
- <text class="btn" onclick="openDialog">Show Dialog</text>
- </div>
-
- <div id="dialog" class="dialog" if="{{isShowDialog}}">
- <div class="dialog-backdrop"></div>
- <div class="dialog-content">
- <div class="dialog-header">
- <text class="dialog-title">{{dialogTitle}}</text>
- <text class="close" onclick="closeDialog">×</text>
- </div>
- <div class="dialog-body">
- <text>{{dialogBody}}</text>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<style>
-.dialog-backdrop {
- opacity: .5;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: #000000;
-}
-.dialog {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- justify-content: center;
- align-items: center;
-}
-.dialog-content {
- width: 450;
- background-color: #ffffff;
-}
-.dialog-header {
- padding: 20;
- border-bottom-width: 1;
- border-bottom-style: solid;
- border-bottom-color: #efefef;
-}
-.dialog-body {
- padding: 20;
-}
-.close {
- font-size: 50;
- position: absolute;
- right: 10;
- top: 10;
-}
-.btn {
- text-align: center;
- color: #ffffff;
- padding: 12;
- background-color: #3071a9;
- border-color: #285e8e;
- border-radius: 4;
-}
-</style>
-
-<script>
- module.exports = {
- data: {
- isShowDialog: false,
- dialogTitle: 'HELLO',
- dialogBody: 'Weex is best!'
- },
- methods: {
- openDialog: function (e) {
- this.isShowDialog = true
- },
- closeDialog: function (e) {
- this.isShowDialog = false
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/6c1dd48b419e614f92581930f42fd366)
-
-## `longpress`
-
-如果一个组件被绑定了 `longpress` 事件，那么当用户长按这个组件时，该事件将会被触发。
-
-**注意：**
-
-`<input>` 和 `<switch>` 组件目前不支持 `click` 事件，请使用 `change` 或 `input` 事件来代替。
-
-### 事件对象
-- `type` : `longpress`
-- `target` : 触发长按事件的目标组件
-- `timestamp` : 长按事件触发时的时间戳
-
-### 示例
-
-长按按钮，变换背景色。
-
-```html
-<template>
- <div style="width: 400; height: 200; background-color: {{bg}};
- justify-content: center; align-items: center;" onlongpress="{{update}}">
- <text style="font-size: 60">Press me</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- bg: '#FF0000'
- },
- methods: {
- update: function () {
- this.bg = this.bg === '#FF0000' ? '#00FF00' : '#FF0000'
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/14a646ea3d7d5e1de5baaca9061a48b3)
-
-## Appear 事件
-
-如果一个位于某个可滚动区域内的组件被绑定了 `appear` 事件，那么当这个组件的状态变为在屏幕上可见时，该事件将被触发。
-
-### 事件对象
-
-- `type` : `appear`
-- `target` : 触发 Appear 事件的组件对象
-- `timestamp` : 事件被触发时的时间戳
-- `direction` : 触发事件时屏幕的滚动方向，`up` 或 `down`
-
-### 示例
-
-当滚到最下方时，最后一个 `item` 出现，将会弹出弹框。
-
-```html
-<template>
- <scroller onviewappear="{{viewappear}}" onviewdisappear="{{viewdisappear}}">
- <div class="item">
- <text>scroll 1</text>
- </div>
- <div class="item">
- <text>scroll 2</text>
- </div>
- <div class="item">
- <text>scroll 3</text>
- </div>
- <div class="item">
- <text>scroll 4</text>
- </div>
- <div class="item">
- <text>scroll 5</text>
- </div>
- <div class="item">
- <text>scroll 6</text>
- </div>
- <div class="item">
- <text>scroll 7</text>
- </div>
- <div class="item">
- <text>scroll 8</text>
- </div>
- <div class="item">
- <text>scroll 9</text>
- </div>
- <div class="item">
- <text>scroll 10</text>
- </div>
- <div class="item" onappear="alertMsg" >
- <text>I will alert a message when I appeared.</text>
- </div>
- </scroller>
-</template>
-
-<style>
- .list {
- height: 850;
- }
-
- .count {
- font-size: 48;
- margin: 10;
- }
-
- .indicator {
- height: 40;
- width: 40;
- color: #45b5f0;
- }
-
- .row {
- width: 750;
- }
-
- .item {
- justify-content: center;
- border-bottom-width: 2;
- border-bottom-color: #c0c0c0;
- height: 200;
- padding: 20;
- }
-</style>
-
-<script>
- var modal = require('@weex-module/modal')
- module.exports = {
- data: {},
- methods: {
- alertMsg: function (e) {
- modal.alert({
- message: 'I am appeared.',
- okTitle: 'Appear'
- }, function() {
- })
- },
- viewappear: function () {
- nativeLog('>>>>>', 'viewappear')
- },
- viewdisappear: function () {
- nativeLog('>>>>>', 'viewdisappear')
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/4d5335f086dfc9964caed5b1fe4b1aa7)
-
-## Disappear 事件
-
-如果一个位于某个可滚动区域内的组件被绑定了 `disappear` 事件，那么当这个组件被滑出屏幕变为不可见状态时，该事件将被触发。
-
-### 事件对象
-
-- `type` : `disappear`
-- `target` : 触发 Disappear 事件的组件对象
-- `timestamp` : 事件被触发时的时间戳
-- `direction` : 触发事件时屏幕的滚动方向，`up` 或 `down`
-
-### 示例
-
-当向下滚动到第一个 `item` 消失后，将会弹出弹框。
-
-```html
-<template>
- <scroller onviewappear="{{viewappear}}" onviewdisappear="{{viewdisappear}}">
- <div class="item" ondisappear="alertMsg" >
- <text>I will alert a message when I disappeared.</text>
- </div>
- <div class="item">
- <text>scroll 1</text>
- </div>
- <div class="item">
- <text>scroll 2</text>
- </div>
- <div class="item">
- <text>scroll 3</text>
- </div>
- <div class="item">
- <text>scroll 4</text>
- </div>
- <div class="item">
- <text>scroll 5</text>
- </div>
- <div class="item">
- <text>scroll 6</text>
- </div>
- <div class="item">
- <text>scroll 7</text>
- </div>
- <div class="item">
- <text>scroll 8</text>
- </div>
- <div class="item">
- <text>scroll 9</text>
- </div>
- <div class="item">
- <text>scroll 10</text>
- </div>
- </scroller>
-</template>
-
-<style>
- .list {
- height: 850;
- }
-
- .count {
- font-size: 48;
- margin: 10;
- }
-
- .indicator {
- height: 40;
- width: 40;
- color: #45b5f0;
- }
-
- .row {
- width: 750;
- }
-
- .item {
- justify-content: center;
- border-bottom-width: 2;
- border-bottom-color: #c0c0c0;
- height: 200;
- padding: 20;
- }
-</style>
-
-<script>
- var modal = require('@weex-module/modal')
- module.exports = {
- data: {},
- methods: {
- alertMsg: function (e) {
- modal.alert({
- message: 'I am disappeared.',
- okTitle: 'Disappear'
- }, function() {
- })
- },
- viewappear: function () {
- nativeLog('>>>>>', 'viewappear')
- },
- viewdisappear: function () {
- nativeLog('>>>>>', 'viewdisappear')
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/eefa176009207a429bbaf475f6ee92d1)
-
-## Page 事件
-
-*注意：仅支持 iOS 和 Android，H5 暂不支持。*
-
-Weex 通过 `viewappear` 和 `viewdisappear` 事件提供了简单的页面状态管理能力。
-
-`viewappear` 事件会在页面就要显示或配置的任何页面动画被执行前触发，例如，当调用 `navigator` 模块的 `push` 方法时，该事件将会在打开新页面时被触发。`viewdisappear` 事件会在页面就要关闭时被触发。
-
-与组件的 `appear` 和 `disappear` 事件不同的是，`viewappear` 和 `viewdisappear` 事件关注的是整个页面的状态，所以**它们必须绑定到页面的根元素上**。
-
-特殊情况下，这两个事件也能被绑定到非根元素的body组件上，例如`wxc-navpage`组件。
-
-### 事件对象
-
-- `type` : `viewappear` 或 `viewdisappear`
-- `target` : 触发事件的组件对象
-- `timestamp` : 事件被触发时的时间戳
-
-### 示例
-
-进出页面时，都会弹框提示。
-
-```html
-<template>
- <scroller onviewappear="{{alertViewappearMsg}}" onviewdisappear="{{alertViewdisappearMsg}}">
- <div class="item">
- <text>scroll 1</text>
- </div>
- <div class="item">
- <text>scroll 2</text>
- </div>
- <div class="item">
- <text>scroll 3</text>
- </div>
- <div class="item">
- <text>scroll 4</text>
- </div>
- <div class="item">
- <text>scroll 5</text>
- </div>
- <div class="item">
- <text>scroll 6</text>
- </div>
- <div class="item">
- <text>scroll 7</text>
- </div>
- <div class="item">
- <text>scroll 8</text>
- </div>
- <div class="item">
- <text>scroll 9</text>
- </div>
- <div class="item">
- <text>scroll 10</text>
- </div>
- <div class="item" onappear="alertMsg" >
- <text>scroll 11</text>
- </div>
- </scroller>
-</template>
-
-<style>
- .list {
- height: 850;
- }
-
- .count {
- font-size: 48;
- margin: 10;
- }
-
- .indicator {
- height: 40;
- width: 40;
- color: #45b5f0;
- }
-
- .row {
- width: 750;
- }
-
- .item {
- justify-content: center;
- border-bottom-width: 2;
- border-bottom-color: #c0c0c0;
- height: 200;
- padding: 20;
- }
-</style>
-
-<script>
- var modal = require('@weex-module/modal')
- module.exports = {
- data: {},
- methods: {
- alertViewappearMsg: function () {
- modal.alert({
- message: 'viewappear.',
- okTitle: 'viewappear'
- }, function() {
- })
- },
- alertViewdisappearMsg: function () {
- modal.alert({
- message: 'viewdisappear.',
- okTitle: 'viewdisappear'
- }, function() {
- })
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/450205a8f8612381422220ce88a562ff)
diff --git a/_drafts/v1.0/references/common-style.md b/_drafts/v1.0/references/common-style.md
deleted file mode 100644
index 8a585f2..0000000
--- a/_drafts/v1.0/references/common-style.md
+++ /dev/null
@@ -1,322 +0,0 @@
----
-title: 通用样式
-type: references
-order: 1.6
-version: 0.10
----
-
-# 通用样式
-
-所有 Weex 组件都支持以下通用样式规则。
-
-## 盒模型
-
-
-
-Weex 盒模型基于 [CSS 盒模型](https://www.w3.org/TR/css3-box/)，每个 Weex 元素都可视作一个盒子。我们一般在讨论设计或布局时，会提到「盒模型」这个概念。
-
-盒模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界 margin edge, 边框边界 border edge, 内边距边界 padding edge 与内容边界 content edge。这四层边界，形成一层层的盒子包裹起来，这就是盒模型大体上的含义。
-
-**注意：**
-Weex 对于长度值目前只支持*像素*值，单位可省略，不支持相对单位（`em`、`rem`）。
-
-- `width {length}`：，默认值 0
-- `height {length}`：，默认值 0
-- `padding {length}`：内边距，内容和边框之间的距离。默认值 0
-
- 可有如下写法：
-
- - `padding-left {length}`：，默认值 0
- - `padding-right {length}`：，默认值 0
- - `padding-top {length}`：，默认值 0
- - `padding-bottom {length}`：，默认值 0
-- `margin`：
-
- 外边距，元素和元素之间的空白距离。值类型为 length，默认值 0
-
- 可有如下写法：
-
- - `margin-left {length}`：，默认值 0
- - `margin-right {length}`：，默认值 0
- - `margin-top {length}`：，默认值 0
- - `margin-bottom {length}`：，默认值 0
-- border：
-
- 设定边框，`border` 目前不支持类似这样 `border: 1 solid #ff0000;` 的组合写法。
-
- 可有如下写法：
-
- - `border-style`：
-
- 设定边框样式，值类型为 string，可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
-
- 可有如下写法：
-
- - `border-left-style {string}`：可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
- - `border-top-style {string}`：可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
- - `border-right-style {string}`：可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
- - `border-bottom-style {string}`：可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
-
- - `border-width {length}`：
-
- 设定边框宽度，非负值, 默认值 0
-
- 可有如下写法：
-
- - `border-left-width {length}`：，非负值, 默认值 0
- - `border-top-width {length}`：，非负值, 默认值 0
- - `border-right-width {length}`：，非负值, 默认值 0
- - `border-bottom-width {length}`：，非负值, 默认值 0
-
- - `border-color {color}`：
-
- 设定边框颜色，默认值 `#000000`
-
- 可有如下写法：
-
- - `border-left-color {color}`：，默认值 `#000000`
- - `border-top-color {color}`：，默认值 `#000000`
- - `border-right-color {color}`：，默认值 `#000000`
- - `border-bottom-color {color}`：，默认值 `#000000`
- - `border-radius {length}`：
-
- 设定圆角，默认值 0
-
- 可有如下写法：
-
- - `border-bottom-left-radius {length}`：，非负值, 默认值 0
- - `border-bottom-right-radius {length}`：，非负值, 默认值 0
- - `border-top-left-radius {length}`：，非负值, 默认值 0
- - `border-top-right-radius {length}`：，非负值, 默认值 0
-
-
-注意：目前在 `<image>` 和 `<text>` 组件上尚无法只定义一个或几个角的 `border-radius`。比如你无法在这两个组件上使用 `border-top-left-radius`。
-
-Weex 盒模型的 `box-sizing` 默认为 `border-box`，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。
-
-### 示例：
-
-```html
-<template>
- <div>
- <image style="width: 400; height: 200; margin-left: 20;" src="https://g.alicdn.com/mtb/lab-zikuan/0.0.18/weex/weex_logo_blue@3x.png"></image>
- </div>
-</template>
-```
-
-## Flexbox
-
-Weex 布局模型基于 CSS [`Flexbox`](http://www.w3.org/TR/css3-flexbox/)，以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。
-
-Flexbox 包含 flex 容器和 flex 成员项。如果一个 Weex 元素可以容纳其他元素，那么它就成为 flex 容器。需要注意的是，flexbox 的老版规范相较新版有些出入，比如是否能支持 wrapping。这些都描述在 W3C 的工作草案中了，你需要注意下新老版本之间的不同。另外，老版本只在安卓 4.4 版以下得到支持。
-
-### Flex 容器
-
-在 Weex 中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 `display: flex;` 属性。
-
-- `flex-direction`：
-
- 定义了 flex 容器中 flex 成员项的排列方向。可选值为 `row` | `column`，默认值为 `column`
-
- - `column`：从上到下排列。
- - `row`：从左到右排列。
-
-- `justify-content`：
-
- 定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。可选值为 `flex-start` | `flex-end` | `center` | `space-between`，默认值为 `flex-start`。
-
- - `flex-start`：是默认值，所有的 flex 成员项都排列在容器的前部；
- - `flex-end`：则意味着成员项排列在容器的后部；
- - `center`：即中间对齐，成员项排列在容器中间、两边留白；
- - `space-between`：表示两端对齐，空白均匀地填充到 flex 成员项之间。
-
- 
-
-- `align-items`：
-
- 定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。可选值为 `stretch` | `flex-start` | `center` | `flex-end`，默认值为 `stretch`。
-
- - `stretch` 是默认值，即拉伸高度至 flex 容器的大小；
- - `flex-start` 则是上对齐，所有的成员项排列在容器顶部；
- - `flex-end` 是下对齐，所有的成员项排列在容器底部；
- - `center` 是中间对齐，所有成员项都垂直地居中显示。
-
- 
-
-### Flex 成员项
-
-flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 `flex: 1`，它们将平均分配剩余空间. 如果一个成员项设置的值为 `flex: 2`，其它的成员项设置的值为 `flex: 1`，那么这个成员项所占用的剩余空间是其它成员项的2倍。
-
-- `flex {number}`：值为 number 类型。
-
-### 示例
-
-一个简单的网格布局。
-
-
-
-```html
-<template>
- <div>
- <div repeat="(i, v) in list" class="row">
- <div repeat="(k, text) in v" class="item">
- <div>
- <text>{{text}}</text>
- </div>
- </div>
- </div>
- </div>
-</template>
-<style>
- .item{
- flex:1;
- justify-content: center;
- align-items:center;
- border-width:1;
- }
- .row{
- flex-direction: row;
- height:80;
- }
-</style>
-<script>
- module.exports = {
- data: function () {
- return {
- list:[
- ['A', 'B', 'C'],
- ['D', 'E', 'F'],
- ['G', 'H', 'I']
- ]
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/ee6a898fcac2242308c24fe5882c52ac)
-
-一个在相对于屏幕水平居中，全屏居中的 `<div>`。
-
-```html
-<template>
- <div class="wrapper">
- <div class="box">
- </div>
- </div>
-</template>
-
-<style>
- .wrapper {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: #cccccc;
- justify-content: center;
- align-items: center;
- }
- .box {
- width: 200;
- height: 200;
- background-color: #fc0000;
- }
-</style>
-```
-
-[体验一下](http://dotwe.org/a76cd89b37c72d308ed576131830e877)
-
-## 定位
-
-Weex 支持 `position` 定位，用法与 CSS position 类似。为元素设置 `position` 后，可通过 `top`、`right`、`bottom`、`left` 四个属性设置元素坐标。
-
-- `position {string}`：
-
- 设置定位类型。可选值为 `relative` | `absolute` | `fixed` | `sticky`，默认值为 `relative`。
-
- - `relative` 是默认值，指的是相对定位；
- - `absolute` 是绝对定位，以元素的容器作为参考系；
- - `fixed` 保证元素在页面窗口中的对应位置显示；
- - `sticky` 指的是仅当元素滚动到页面之外时，元素会固定在页面窗口的顶部。
-- `top {number}`：距离上方的偏移量，默认为 0。
-- `bottom {number}`：距离下方的偏移量，默认为 0。
-- `left {number}`：距离左方的偏移量，默认为 0。
-- `right {number}`：距离右方的偏移量，默认为 0。
-
-**注意：**
-
-1. Weex 目前不支持 `z-index` 设置元素层级关系，但靠后的元素层级更高，因此，对于层级高的元素，可将其排列在后面。
-2. 如果定位元素超过容器边界，在 Android 下，超出部分将**不可见**，原因在于 Android 端元素 `overflow` 默认值为 `hidden`，但目前 Android 暂不支持设置 `overflow: visible`。
-
-### 示例
-
-
-
-```html
-<template>
- <div class="wrapper">
- <div class="box box1">
- </div>
- <div class="box box2">
- </div>
- <div class="box box3">
- </div>
- </div>
-</template>
-
-<style>
- .wrapper {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: #cccccc;
- }
- .box {
- width: 400;
- height: 400;
- position: absolute;
- }
- .box1 {
- top: 0;
- left: 0;
- background-color: #ff0000;
- }
- .box2 {
- top: 150;
- left: 150;
- background-color: #0055dd;
- }
- .box3 {
- top: 300;
- left: 300;
- background-color: #00ff49;
- }
-</style>
-```
-
-[体验一下](http://dotwe.org/b04339de27cfabf0710e045c0079e56a)
-
-## 其他基本样式
-
-- `opacity {number}`：取值范围为 [0, 1] 区间。默认值是 1，即完全不透明；0 是完全透明；0.5 是 50% 的透明度。
-- `background-color {color}`：设定元素的背景色，可选值为色值，支持RGB（ `rgb(255, 0, 0)` ）；RGBA（ `rgba(255, 0, 0, 0.5)` ）；十六进制（ `#ff0000` ）；精简写法的十六进制（ `#f00` ）；色值关键字（`red`），默认值是 `transparent` 。
-
-**注意：** [色值的关键字列表](./color-names.md)。
-
-## 上手样式
-
-如果对于样式写法需要更多上手参考，可参考
-
-- [如何做出高性能长列表]()
-- [如何布局]()
-- 以及每个组件的文档中，都有常见的例子可供参考。
-
-你可以按照以下步骤来规划 Weex 页面的样式。
-
-1. 全局样式规划：将整个页面分割成合适的模块。
-2. flex 布局：排列和对齐页面模块。
-3. 定位盒子：定位并设置偏移量。
-4. 细节样式处理：增加特定的具体样式。
diff --git a/_drafts/v1.0/references/component-defs.md b/_drafts/v1.0/references/component-defs.md
deleted file mode 100644
index 11e4282..0000000
--- a/_drafts/v1.0/references/component-defs.md
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: ViewModel 选项
-type: references
-order: 1.2
-version: 0.10
----
-
-# 组件定义
-
-定义组件是通过一组选项来描述一个组件。这组选项总是被赋值给 `<script>` 标签中的 `module.exports` 。
-
-``` javascript
-module.exports = {
- // a set of options here
-}
-```
-## 数据和方法
-
-``` javascript
-module.exports = {
- data: function () {
- return {x: 1, y: 2}
- },
- methods: {
- doThis: function () {...},
- doThat: function () {...}
- },
- ...
-}
-```
-
-`data` 选项是一个函数，它返回这个视图模型可监听的数据对象。而 `methods` 是一个映射，其中包含所有视图模型的方法。
-
-每个 `data` 或 `method` 属性将被代理到视图模型实例中。所以，你能通过 `this.x` 读写数据，或者通过 `this.doThis()` 调用方法。
-
-一个完整的例子：
-
-```html
-<template>
- <div style="width: {{w}}; height: {{h}}; background-color: red;" onclick="update"></div>
-</template>
-<script>
- module.exports = {
- data: function () {
- return {w: 750, h: 200}
- },
- methods: {
- update: function (e) {
- this.h += 200
- }
- }
- }
-</script>
-```
-## 事件
-
-``` javascript
-module.exports = {
- data: ...,
- methods: {
- foo: function () {
- ...
- this.$emit('customtype1', data)
- }
- },
- events: {
- customtype1: function (e) {
- console.log(e.type, e.detail)
- }
- },
- ...
-}
-```
-
-`events` 选项允许你在视图模型被创建时注册自定义事件。然后，它会监听这些类型的事件，并通过函数类型的值处理它们。
-
-Weex 会把一个事件对象作为第一个参数传递给其绑定的事件，这个事件对象在 `e.detail` 中包含事件数据。
-## 生命周期
-
-``` javascript
-module.exports = {
- data: ...,
- methods: ...,
- init: function () {
- console.log('ViewModel constructor begins')
- },
- created: function () {
- console.log('Data observation finished')
- },
- ready: function () {
- console.log('Virtual DOM finished')
- },
- ...
-}
-```
-
-Weex 视图模型现在支持生命周期内的钩子函数，这些钩子函数能被写为组件选项：
-- `init`: 在视图模型的构造函数开始调用时激活；
-- `created`: 当视图模型监听默认数据，但还未编译模板时激活；
-- `ready`: 当视图模型监听默认数据并且编译模板生成虚拟DOM后被激活。
-
-**注意：当 `methods`、`events` 或生命周期方法作为参数传递给别的函数时，务必确认函数执行时的上下文符合您的预期，例如：**
-
-``` javascript
-module.exports = {
- data: function () {
- return {x: 1, y: 2}
- },
- ready: function () {
- // `undefined`
- // 因为上下文发生了变化
- this.foo(this.bar)
- // `1`
- // 正确绑定上下文之后可以得到预期的值
- this.foo(this.bar.bind(this))
- },
- methods: {
- foo: function (fn) {
- return fn()
- },
- bar: function () {
- return this.x
- }
- }
-}
-```
diff --git a/_drafts/v1.0/references/components/a.md b/_drafts/v1.0/references/components/a.md
deleted file mode 100644
index 75bd831..0000000
--- a/_drafts/v1.0/references/components/a.md
+++ /dev/null
@@ -1,273 +0,0 @@
----
-title: <a>
-type: references
-order: 2.1
-version: 0.10
----
-
-# <a>
-
-`<a>` 组件定义了指向某个页面的一个超链接. 此组件的作用和用法与HTML5中的 [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) 非常类似，区别在于 Weex 的 `<a>` 组件**不能**直接在里面添加文本（字符串），如果要展示文本，应该添加 `<text>` 组件。
-
-一个简单例子：
-
-```HTML
-<template>
- <div class="wrapper">
- <a href="http://dotwe.org/raw/dist/a468998152ee680413588c38bd61c29e.js">
- <text>click</text>
- </a>
- </div>
-</template>
-
-<style>
-.wrapper {
- text-align: center;
-}
-</style>
-```
-
-[体验一下](http://dotwe.org/f63c78213ef26c25357ffa851537fff3)
-
-## 子组件
-
-此组件支持除了自己外的所有 Weex 组件作为子组件。
-
-## 特性
-
-- `href {string}`：定义了超链接的 URL。
-
-## 样式
-
-`<a>` 支持所有通用样式。
-
-- 盒模型
-- `flexbox` 布局
-- `position`
-- `opacity`
-- `background-color`
-
-查看 [组件通用样式](../common-style.html)。
-
-## 事件
-
-`<a>` 支持所有通用事件。
-
-- `click`
- **注意：**我们不能保证 `click` 事件和 `href` 跳转的执行顺序。建议不要使用 `click` 事件来处理 `href` 跳转前的逻辑处理。
-- `longpress`
-- `appear`
-- `disappear`
-
-查看 [通用事件](../common-event.html)。
-
-## 约束
-
-1. **不能**直接在 `<a>` 中添加文本。
- 错误示例，“click” 无法被正常渲染。
-
- ```HTML
- <template>
- <div class="wrapper">
- <a href="http://dotwe.org/raw/dist/a468998152ee680413588c38bd61c29e.js">
- click
- </a>
- </div>
- </template>
-
- <style>
- .wrapper {
- text-align: center;
- }
- </style>
- ```
-
-[体验一下](http://dotwe.org/0a22d65138691a208e3fb1f8f6392b38)
-
-2. 请不要为 `<a>` 添加 `click` 事件。我们不能确保 `click` 事件和 `href` 跳转的执行顺序。
-
-## 示例
-
-```html
-<template>
- <div>
- <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 class="lines">
- <text class="item">Repo name: </text><a href="{{item.repo_url}}"><text class="link">{{item.full_name}}</text></a>
- </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>
-.header {
- padding: 25;
- background-color: #efefef;
- border-bottom-color: #eeeeee;
- border-bottom-width: 2;
- border-bottom-style: solid;
-}
-.title {
- text-align: center;
-}
-.text {
- text-align: center;
-}
-.list {
- background-color: #ffffff;
-}
-.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;
-}
-.lines {
- flex-direction: row;
-}
-.link {
- color: #008cff;
- text-decoration: underline;
-}
-</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',
- PAGE_URL = 'http://dotwe.org/raw/dist/f1fa0895d0fa0fd80896e02a589443dd.js'
-
-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) {
- try {
- var results = res.data.items || []
-
- if (Array.isArray(results)) {
- for(var i = 0; i < results.length; i++) {
- var repo_url = results[i].html_url
- if (repo_url) {
- results[i].repo_url = self.processUrl(repo_url)
- }
- self.items.push(results[i])
- }
- }
- } 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'
- },
- processUrl: function (url) {
- var platform = this.$getConfig().env.platform.toLowerCase()
-
-
- if (url) {
- // iOS do not need encode
- if (platform === 'ios') {
- return PAGE_URL + '?weburl=' + url
- } else if (platform === 'web') {
- return url
- } else {
- var encodeUrl = encodeURIComponent(url)
- return PAGE_URL + '?weburl=' + encodeUrl
- }
- }
- }
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/3e8369efb20a169077b5331b45927ed8)。
diff --git a/_drafts/v1.0/references/components/cell.md b/_drafts/v1.0/references/components/cell.md
deleted file mode 100644
index e977037..0000000
--- a/_drafts/v1.0/references/components/cell.md
+++ /dev/null
@@ -1,191 +0,0 @@
----
-title: <cell>
-type: references
-order: 2.5
-version: 0.10
----
-
-# <cell>
-
-用于定义列表中的子列表项，类似于 HTML 中的 `ul` 之于 `li`。Weex 会对 `<cell>` 进行高效的内存回收以达到更好的性能，该组件必须作为[`<list>`](./list.html) 组件的子组件, 这是为了优化滚动时的性能。
-
-## 子组件
-
-支持所有 Weex 的组件作为它的子组件。
-
-## 样式
-
-**注意：**
-
-你不能给 `<cell>` 设定`flex`值。 `<cell>`的宽度等于父组件 `<list>` 的宽度，并且 `<cell>` 高度自适应。
-
-- 通用样式：支持所有通用样式
-
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-- 通用事件
-
- 支持所有通用事件：
-
- - `click`
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](../common-event.html)
-
-## 示例
-
-
-
-```html
-<template>
- <div>
- <list class="list">
- <header class="header">
- <text class="title">Search Results</text>
- </header>
- <refresh style="width: 750; padding: 30;" onrefresh="refreshData">
- <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>
-.header {
- padding: 25;
- background-color: #efefef;
- border-bottom-color: #eeeeee;
- border-bottom-width: 2;
- border-bottom-style: solid;
-}
-.title {
- text-align: center;
-}
-.text {
- text-align: center;
-}
-.list {
- background-color: #ffffff;
-}
-.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: {
- page: 1,
- loadingDisplay: 'show',
- 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) {
- try {
- var results = res.data.items || []
-
- if (Array.isArray(results)) {
- for(var i = 0; i < results.length; i++) {
- self.items.push(results[i])
- }
- }
- } catch(e) {}
- },function(res){
-
- })
- },
- loadingData: function (e) {
- var url = SEARCH_URL + '&page=' + this.page
- var self = this
-
- 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'
-
- modal.toast({
- 'message': 'Refreshing...',
- 'duration': 1
- })
-
- this.items = []
- this.page = 1
- this.renderData(url)
- }
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/280fa3dc8e793ea8712451ecdf84fb7b)
\ No newline at end of file
diff --git a/_drafts/v1.0/references/components/div.md b/_drafts/v1.0/references/components/div.md
deleted file mode 100644
index 893f7a1..0000000
--- a/_drafts/v1.0/references/components/div.md
+++ /dev/null
@@ -1,245 +0,0 @@
----
-title: <div>
-type: references
-order: 2.2
-version: 0.10
----
-
-# <div>
-
-`<div>` 组件是用于包装其它组件的最基本容器。支持所有的通用样式、特性、`flexbox` 布局。其类似于 HTML 的 `<div>` 容器，但**不能**直接在里面添加文本（字符串），如果要展示文本，应该使用 `<text>` 组件。历史版本中，`<div>` 别名是 `<container>`，目前**已经弃用**。
-
-**注意：**
-
-`<div>` 嵌套层级不可过深，否则容易引起性能问题，建议控制在 **10** 层以内。
-
-一个简单例子：
-
-```html
-<template>
- <div>
- <text class="text">Hello World!</text>
- </div>
-</template>
-
-<style>
-.text {
- font-size: 70;
- color: #ff0000
-}
-</style>
-
-<script></script>
-```
-
-[体验一下](http://dotwe.org/a468998152ee680413588c38bd61c29e)
-
-
-
-## 子组件
-
-`<div>` 基本容器组件，因此支持包括 `<div>` 在内的任何组件作为自己的子组件。因此，在写一个组件时，推荐外层使用 `<div>` 作为根容器。
-
-## 样式
-
-`<div>` 支持所有通用样式：
-
-- 盒模型
-- `flexbox` 布局
-- `position`
-- `opacity`
-- `background-color`
-
-查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-`<div>` 支持所有通用事件：
-
-- `click`
-- `longpress`
-- `appear`
-- `disappear`
-
-查看 [通用事件](../common-event.html)
-
-## 约束
-
-1. **不能**直接在 `<div>` 中添加文本。
-
- 错误示例，“Hello World!” 无法被正常渲染。
-
- ```html
- <template>
- <div>Hello World!</div>
- </template>
-
- <style>
- .text {
- font-size: 70;
- color: #ff0000
- }
- </style>
-
- <script></script>
- ```
-
- [体验一下](http://dotwe.org/3ef3ba3f0f162b27e24c525250c46a04)
-
-2. `<div>` 不可滚动，即使显式设置高度也一样。
-
- [错误示例](http://dotwe.org/a2cc491c5b9e6f6eb06795e45e725efd)
-
-## 示例
-
-
-
-```html
-<style>
-.item {
- padding: 20;
- height: 220;
- border-bottom-width: 1;
- border-bottom-style: solid;
- border-bottom-color: #efefef;
-}
-.item-content {
- flex-direction: row;
- width: 710;
- background-color: #ffffff;
-}
-.item-imgbox {
- height: 180;
- width: 180;
- margin-right: 20;
-}
-.item-img {
- width: 180;
- height: 180;
-}
-.item-info {
- height: 180;
- width: 510;
- justify-content: center;
- position: relative;
-}
-.item-info-detail {
- position: relative;
- color: #A2A2A2;
-}
-.desc {
- lines: 4;
- text-overflow: ellipsis;
- font-size: 26;
- line-height: 30;
- color: #A2A2A2;
-}
-.title {
- lines: 1;
- text-overflow: ellipsis;
- font-size: 32;
- color: #2D2D2D;
- line-height: 40;
-}
-.detail-info {
- margin-top: 15;
-}
-.up {
- width: 70;
- height: 70;
- position: fixed;
- right: 20;
- bottom: 20;
-}
-.img {
- width: 70;
- height: 70;
-}
-</style>
-
-<template>
- <div>
- <scroller>
- <div class="item" repeat="item in items" id="item-{{$index}}">
- <div class="item-content">
- <div class="item-imgbox">
- <img class="item-img" src="{{item.img}}" alt="" />
- </div>
- <div class="item-info">
- <div class="item-info-detail">
- <text class="title">{{item.title}}</text>
- <div class="detail-info">
- <text class="desc">{{item.desc}}</text>
- </div>
- </div>
- </div>
- </div>
- </div>
- </scroller>
- <div class="up" onclick="goToTop">
- <img class="img" src="https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png"></img>
- </div>
- </div>
-</template>
-
-<script>
- var dom = require('@weex-module/dom') || {}
-
- module.exports = {
- data: {
- items: [{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- }]
- },
- created: function () {
- },
- methods: {
- goToTop: function (e) {
- dom.scrollToElement(this.$el('item-0'), {
- offset: 0
- })
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/799f54b32f5227f9c34cfbb5e6946ba7)
diff --git a/_drafts/v1.0/references/components/image.md b/_drafts/v1.0/references/components/image.md
deleted file mode 100644
index 5a18280..0000000
--- a/_drafts/v1.0/references/components/image.md
+++ /dev/null
@@ -1,161 +0,0 @@
----
-title: <image>
-type: references
-order: 2.3
-version: 0.10
----
-
-# <image>
-
-`<image>` 组件用于渲染图片，并且它不能包含任何子组件。可以用 `<img>` 作简写。
-
-需要注意的是，需要明确指定 `width` 和 `height`，否则图片无法显示。
-
-简单例子：
-
-```html
-<template>
- <div>
- <img style="width: 560;height: 560;" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></img>
- </div>
-</template>
-```
-
-[体验一下](http://dotwe.org/23b6cf951e6059d2cf7b9a74a9915ace)
-
-## 子组件
-
-`<image>` 组件不支持任何子组件，因此不要尝试在 `<image>` 组件中添加任何组件。如果需要实现 `background-image` 的效果，可以使用 `<image>` 组件和 `position` 定位来现实，如下面代码。
-
-```html
-<template>
- <div>
- <img style="width:750; height:750;" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></img>
- <div class="title">
- <text style="font-size:50; color: #ff0000">你好，image</text>
- </div>
- </div>
-</template>
-<style>
- .title{
- position:absolute;
- top:50;
- left:10;
- }
-</style>
-```
-
-[体验一下](http://dotwe.org/08dd49aaca8bf289c5fc08f808b9c08c)
-
-## 特性
-
-`<image>` 组件，包含 `src` 和 `resize` 两个重要特性。
-
-- `src {string}`：定义图片链接，目前图片暂不支持本地图片。
-- `resize {string}`：可以控制图片的拉伸状态，值行为和 W3C 标准一致。
-
- 可选值为：
-
- - `stretch`：默认值，指定图片按照容器拉伸，有可能使图片产生形变。
- - `cover`：指定图片可以被调整到容器，以使图片完全覆盖背景区域，图片有可能被剪裁。
- - `contain`：指定可以不用考虑容器的大小，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
-
- 例子：
-
- 
-
- [体验一下](http://dotwe.org/049213ab3364a86637e211c0329cdc50)
-
-## 样式
-
-- 通用样式：支持所有通用样式
-
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-- `load` <sup class="wx-v">v0.8+</sup>：当图片加载完成时触发。目前在 Android、iOS 上支持，H5 暂不支持。
-
-- 通用事件
-
- 支持所有通用事件：
-
- - `click`
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](../common-event.html)
-
-## 约束
-
-1. 需要指定宽高；
-2. 不支持子组件。
-
-## 示例
-
-我们这里展示了一篇文章，文章标题有一副背景图。
-
-
-
-这个效果实现起来非常容易，我们只需要将标题文案通过 `position: absolute` 进行定位即可。唯一需要注意的一点是，Weex 目前不支持 `z-index`，因此必须把上层元素放在后。
-
-```html
-<style>
- .page-head {
- width:750;
- height:200;
- }
- .title-bg {
- width:750;
- height:200;
- }
- .title-box {
- width: 750;
- height: 200;
- justify-content: center;
- align-items: center;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
- .title {
- color: #ffffff;
- font-size: 32;
- font-weight: bold;
- }
- .article {
- padding: 20;
- }
- .paragraph{
- margin-bottom: 15;
- }
-</style>
-
-<template>
- <scroller class="wrapper" >
- <div class="page-head" >
- <image class="title-bg" resize="cover" src="https://img.alicdn.com/tps/TB1dX5NOFXXXXc6XFXXXXXXXXXX-750-202.png"></image>
- <div class="title-box">
- <text class="title">Alan Mathison Turing</text>
- </div>
- </image>
- <div class="article">
- <text class="paragraph">Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.</text>
- <text class="paragraph">During the Second World War, Turing worked for the Government Code and Cypher School (GC&CS) at Bletchley Park, Britain's codebreaking centre. For a time he led Hut 8, the section responsible for German naval cryptanalysis. He devised a number of techniques for speeding the breaking of German ciphers, including improvements to the pre-war Polish bombe method, an electromechanical machine that could find settings for the Enigma machine. Turing played a pivotal role in cracking intercepted coded messages that enabled the Allies to defeat the Nazis in many crucial engagements, including the Battle of the Atlantic; it has been estimated that this work shortened the war in Europe by more than two years and saved over fourteen million lives.</text>
- <text class="paragraph">After the war, he worked at the National Physical Laboratory, where he designed the ACE, among the first designs for a stored-program computer. In 1948 Turing joined Max Newman's Computing Machine Laboratory at the Victoria University of Manchester, where he helped develop the Manchester computers and became interested in mathematical biology. He wrote a paper on the chemical basis of morphogenesis, and predicted oscillating chemical reactions such as the Belousov–Zhabotinsky reaction, first observed in the 1960s.</text>
- <text class="paragraph">Turing was prosecuted in 1952 for homosexual acts, when by the Labouchere Amendment, "gross indecency" was still criminal in the UK. He accepted chemical castration treatment, with DES, as an alternative to prison. Turing died in 1954, 16 days before his 42nd birthday, from cyanide poisoning. An inquest determined his death as suicide, but it has been noted that the known evidence is also consistent with accidental poisoning. In 2009, following an Internet campaign, British Prime Minister Gordon Brown made an official public apology on behalf of the British government for "the appalling way he was treated." Queen Elizabeth II granted him a posthumous pardon in 2013.</text>
- </div>
- </scroller>
-</template>
-```
-
-[体验一下](http://dotwe.org/bccf884672f0a76f884298b3754d2079)
\ No newline at end of file
diff --git a/_drafts/v1.0/references/components/index.md b/_drafts/v1.0/references/components/index.md
deleted file mode 100644
index 78ef46b..0000000
--- a/_drafts/v1.0/references/components/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: 内建组件
-type: references
-order: 2
-version: 0.10
----
-
-# 内建组件
-
-- [<a>](./a.html)
-- [<indicator>](./indicator.html)
-- [<switch>](./switch.html)
-- [<text>](./text.html)
-- [<textarea>](./textarea.html)
-- [<video>](./video.html)
-- [<web>](./web.html)
-- [<div>](./div.html)
-- [<image>](./image.html)
-- [<input>](./input.html)
-- [<list>](./list.html)
-- [<cell>](./cell.html)
-- [<refresh> & <loading>](./refresh.html)
-- [<scroller>](./scroller.html)
-- [<slider>](./slider.html)
\ No newline at end of file
diff --git a/_drafts/v1.0/references/components/indicator.md b/_drafts/v1.0/references/components/indicator.md
deleted file mode 100644
index b2aa19d..0000000
--- a/_drafts/v1.0/references/components/indicator.md
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: <indicator>
-type: references
-order: 2.10
-version: 0.10
----
-
-# <indicator>
-
-`<indicator>` 组件用于显示轮播图指示器效果，必须充当 [`<slider>`](./slider.html) 组件的子组件使用。
-
-## 子组件
-
-`<indicator>` 组件没有任何子组件。
-
-## 样式
-
-`<indicator>` 组件有一些私有样式，如下：
-
-- `item-color {color}`：设置项的颜色，可以是颜色的名称，例如 `red`；也可以是 16 进制的颜色，例如 `#RRGGBB`。
-
-- `item-selected-color {color}`：被选中时的颜色，可以是颜色的名称，`red`；也可以是 16 进制的颜色，例如 `#RRGGBB`。
-
-- `item-size {number}`：元素的个数。
-
-- 通用样式
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](../common-style.html)
-
-**注意 1：**
-
-这里需要注意一点，`<indicator>` 的 `position` 不仅依赖 `top`、`left`、`bottom` 和 `right` 样式，同时会参考 `width`和 `height` 样式。`<indicator>` 默认的宽高继承于 `<slider>`，如果 `<slider>` 未设置宽高，需要显式的给 `<indicator>` 设置宽高值。
-
-**注意 2：**
-
-`background-color` 不推荐使用，建议使用 `item-color` 和 `item-selected-color` 代替。
-
-
-## 事件
-
-支持所有通用事件。
-
-- `click`
-- `longpress`
-- `appear`
-- `disappear`
-
-查看 [通用事件](../common-event.html)
-
-## 约束
-
-1. 不支持子组件。
-
-## 示例
-
-```html
-<template>
- <div>
- <slider class="slider">
- <div class="slider-pages" repeat="item in itemList">
- <image class="img" src="{{item.pictureUrl}}"></image>
- <text class="title">{{item.title}}</text>
- </div>
- <indicator class="indicator"></indicator>
- </slider>
- </div>
-</template>
-
-<style>
- .img {
- width: 714;
- height: 150;
- }
- .title {
- position: absolute;
- top: 20;
- left: 20;
- color: #ff0000;
- font-size: 48;
- font-weight: bold;
- background-color: #eeeeee;
- }
- .slider {
- flex-direction: row;
- margin: 18;
- width: 714;
- height: 230;
- }
- .slider-pages {
- flex-direction: row;
- width: 714;
- height: 200;
- }
- .indicator {
- width:714;
- height:200;
- position:absolute;
- top:1;
- left:1;
- item-color: red;
- item-selectedColor: blue;
- item-size: 20;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- itemList: [
- {itemId: '520421163634', title: 'item1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
- {itemId: '522076777462', title: 'item2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
- {itemId: '522076777462', title: 'iten3', pictureUrl: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
- ]
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/baea3d54c503c6d3d4e4a8f275b9d47f)
\ No newline at end of file
diff --git a/_drafts/v1.0/references/components/input.md b/_drafts/v1.0/references/components/input.md
deleted file mode 100644
index 9a7b8ff..0000000
--- a/_drafts/v1.0/references/components/input.md
+++ /dev/null
@@ -1,309 +0,0 @@
----
-title: <input>
-type: references
-order: 2.4
-version: 0.10
----
-
-# <input>
-
-Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组件。 `<input>` 组件的工作方式因 `type` 属性的值而异，比如 `<text>`， `password`，`url`，`email`，`tel` 等。
-
-**注意：**
-
-此组件不支持 `click` 事件。请监听 `<input>` 或 `change` 来代替 `click` 事件。
-
-## 子组件
-
-不支持子组件。
-
-## 特性
-
-- `type {string}`：控件的类型，默认值是 `<text>`。`type` 值可以是 `text`，`password`，`url`，`email`，`tel` 。每个 `type` 值都符合 W3C 标准。
-- `value {string}`：组件的接收到的输入字符。
-- `placeholder {string}`：提示用户可以输入什么。 提示文本不能有回车或换行。
-- `disabled {boolean}`：布尔类型的数据，表示是否支持输入。通常 `click` 事件在 `disabled` 控件上是失效的。
-- `autofocus {boolean}`：布尔类型的数据，表示是否在页面加载时控件自动获得输入焦点。
-- `maxlength {nubmer}`：<sup class="wx-v">v0.7</sup>一个数值类型的值，表示输入的最大长度。
-
-## 样式
-
-- `placeholder-color {color}`：placeholder 字符颜色。默认值是 `#999999`。
-- text styles
- - 支持 `color`
- - 支持 `font-size`
- - 支持 `font-style`
- - 支持 `font-weight`
- - 支持 `text-align`
-
- 查看 [文本样式](../text-style.html)
-
-- 通用样式：支持所有通用样式
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-- `input`: 输入字符的值更改。
-
- 事件中 event 对象属性：
-
- - `value`: 触发事件的组件；
- - `timestamp`: 事件发生时的时间戳,仅支持Android。
-
-- `change`: 当用户输入完成时触发。通常在 `blur` 事件之后。
-
- 事件中 event 对象属性：
-
- - `value`: 触发事件的组件；
-
- - `timestamp`: 事件发生时的时间戳,仅支持Android。
-
-- `focus`: 组件获得输入焦点。
-
- 事件中 event 对象属性：
-
- - `timestamp`: 事件发生时的时间戳,仅支持Android。
-
-- `blur`: 组件失去输入焦点。
-
- 事件中 event 对象属性：
-
- - `timestamp`: 事件发生时的时间戳,仅支持Android。
-
-- 通用事件
-
- **注意：**
- 不支持 `click` 事件。 请监听 `input` 或 `change` 事件代替。
-
- 支持以下通用事件：
-
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](../common-event.html)
-
-# 约束
-
-目前不支持 `this.$el(id).value = ''` 这种方式改写 input value。只支持在 `<input>` 组件的 `input`、`change` 事件中改写。
-
-## 示例
-
-```html
-<template>
- <div>
- <div>
- <text style="font-size: 40px">oninput: {{txtInput}}</text>
- <text style="font-size: 40px">onchange: {{txtChange}}</text>
- <text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
- </div>
- <scroller>
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text>
- </div>
- <input type="text" placeholder="Input Text" class="input" :autofocus=true value="" @change="onchange" @input="oninput" @focus="onfocus" @blur="onblur"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = password</text>
- </div>
- <input type="password" placeholder="Input Password" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = url</text>
- </div>
- <input type="url" placeholder="Input URL" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = email</text>
- </div>
- <input type="email" placeholder="Input Email" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = tel</text>
- </div>
- <input type="tel" placeholder="Input Tel" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = time</text>
- </div>
- <input type="time" placeholder="Input Time" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = date</text>
- </div>
- <input type="date" placeholder="Input Date" class="input" @change="onchange" @input="oninput" max="2017-12-12" min="2015-01-01"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = default</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="default" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = go</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="go" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = next</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="next" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = search</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="search" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = send</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="send" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = done</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="done" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">function focus() & blur()</text>
- </div>
- <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
- <text class="button" value="Focus" type="primary" @click="focus"></text>
- <text class="button" value="Blur" type="primary" @click="blur"></text>
- </div>
-
- <input type="text" placeholder="Input1" class="input" value="" ref="input1"/>
- </div>
-
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input selection</text>
- </div>
- <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
- <text class="button" value="setRange" type="primary" @click="setRange"></text>
- </div>
- <input type="text" ref="inputselection" placeholder="please input" value="123456789" class="input" @change="onchange" @return = "onreturn" @input="oninput"/>
- </div>
-
-
-
- </scroller>
- </div>
-</template>
-
-<style scoped>
- .input {
- font-size: 60px;
- height: 80px;
- width: 750px;
- }
- .button {
- font-size: 36;
- width: 200;
- color: #41B883;
- text-align: center;
- padding-top: 10;
- padding-bottom: 10;
- border-width: 2;
- border-style: solid;
- margin-right: 20;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
-</style>
-
-<script>
- const modal = weex.requireModule('modal')
- module.exports = {
- data: function () {
- return {
- txtInput: '',
- txtChange: '',
- txtReturnType: '',
- txtSelection:'',
- autofocus: false
- };
- },
- methods: {
- ready: function () {
- var self = this;
- setTimeout(function () {
- self.autofocus = true;
- }, 1000);
- },
- onchange: function (event) {
- this.txtChange = event.value;
- console.log('onchange', event.value);
- },
- onreturn: function (event) {
- this.txtReturnType = event.returnKeyType;
- console.log('onreturn', event.type);
- },
- oninput: function (event) {
- this.txtInput = event.value;
- console.log('oninput', event.value);
- },
- focus: function () {
- this.$refs['input1'].focus();
- },
- blur: function () {
- this.$refs['input1'].blur();
- },
- setRange: function() {
- console.log(this.$refs["inputselection"]);
- this.$refs["inputselection"].setSelectionRange(2, 6);
- },
- onfocus () {
- console.log('onfocus:');
- modal.toast({
- message: 'onfocus',
- duration: 0.8
- })
- },
- onblur () {
- console.log('onblur:');
- modal.toast({
- message: 'input blur',
- duration: 0.8
- })
- }
- }
- };
-</script>
-```
-
-[体验一下](http://dotwe.org/vue/dd83d941d2364f2849e45dc3c5d91ab4)
diff --git a/_drafts/v1.0/references/components/list.md b/_drafts/v1.0/references/components/list.md
deleted file mode 100644
index 842201f..0000000
--- a/_drafts/v1.0/references/components/list.md
+++ /dev/null
@@ -1,375 +0,0 @@
----
-title: <list>
-type: references
-order: 2.4
-version: 0.10
----
-
-# <list>
-
-`<list>` 组件是提供垂直列表功能的核心组件，拥有平滑的滚动和高效的内存管理，非常适合用于长列表的展示。最简单的使用方法是在 `<list>` 标签内使用一组由简单数组 `repeat` 生成的 `<cell>` 标签填充。
-
-一个最简例子：
-
-```html
-<template>
- <list class="list">
- <cell class="row" repeat="item in rows" index="{{$index}}">
- <text class="item-title">row {{item.id}}</text>
- </cell>
- </list>
-</template>
-
-<style></style>
-
-<script>
-module.exports = {
- data: {
- rows:[
- {id: 1},
- {id: 2},
- {id: 3},
- {id: 4},
- {id: 5}
- ]
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/bcaf48a63b49750b828d2d23762d4a15)
-
-
-
-## 子组件
-
-`<list>` 组件支持更多高级功能，由以下子组件提供：
-
-- `<cell>`
-
- 用于定义列表中的子列表项，类似于 HTML 中的 `ul` 之于 `li`。Weex 会对 `<cell>` 进行高效的内存回收以达到更好的性能。
-
- 使用文档请查看 [`<cell>`](./cell.html)。
-
-- `header` <sup class="wx-v">0.6.1+</sup>
-
- 当 `<header>` 到达屏幕顶部时，吸附在屏幕顶部。
-
-- `<refresh>`
-
- 用于给列表添加下拉刷新的功能。
-
- 使用文档请查看 [`<refresh>`](./refresh.html)
-
-- `<loading>`
-
- `<loading>` 用法与特性和 `<refresh>` 类似，用于给列表添加上拉加载更多的功能。
-
- 使用文档请查看 [`<loading>`](./loading.html)
-
-**注意：**
-
-`<list>` 的子组件只能包括以上四种组件或是 `fix` 定位的组件，其他形式的组件将不能被正确的渲染。
-
-一个错误的示范，此例子无法在客户端正常渲染，因为 `<list>` 子组件是 `<div>`：
-
-```html
-<template>
- <list class="list">
- <div class="row" repeat="item in rows" index="{{$index}}">
- <text class="item-title">row {{item.id}}</text>
- </div>
- </list>
-</template>
-
-<style></style>
-
-<script>
-module.exports = {
- data: {
- rows:[
- {id: 1},
- {id: 2},
- {id: 3},
- {id: 4},
- {id: 5}
- ]
- }
-}
-</script>
-```
-
-## 特性
-
-- `loadmoreoffset {number}`：默认值为 0，触发 `loadmore` 事件所需要的垂直偏移距离（设备屏幕底部与 `<list>` 底部之间的距离）。当 `<list>` 的滚动条滚动到足够接近 `<list>` 底部时将会触发 `loadmore` 这个事件。
-
- 
-
-## 样式
-
-- 通用样式：支持所有通用样式
-
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-- `loadmore` <sup class="wx-v">0.5+</sup>：如果列表滚动到底部将会立即触发这个事件，你可以在这个事件的处理函数中加载下一页的列表项。
-
- [体验一下](http://dotwe.org/bc445ede8746a31360e3607d210304c5)
-
-- 通用事件
-
- 支持所有通用事件：
-
- - `click`
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](../common-event.html)
-
-## 扩展
-
-### scrollToElement(node, options)
-
-滚动到列表某个指定项是常见需求，`<list>` 拓展了该功能支持滚动到指定 `<cell>`。通过 `dom` module 访问，更多信息可参考 [dom module](../modules/dom.html) 。
-
-#### 参数
-
-- `node {node}`：指定目标节点。
-- `options {Object}`：
- - `offset {number}`：一个到其可见位置的偏移距离，默认是 0
-
-#### 示例
-
-```html
-<template>
- <list class="list">
- <cell>
- <div onclick="go" style="width: 750;height: 50; position: fixed; left: 0; right: 0; bottom: 0; background-color: #eeeeee;">
- <text style="text-align: center;">
- Go to 50th line.
- </text>
- </div>
- </cell>
- <cell class="row" repeat="item in rows" id="item-{{$index}}">
- <text class="item-title">row {{item.id}}</text>
- </cell>
- </list>
-</template>
-
-<script>
-var dom = require('@weex-module/dom')
-
-module.exports = {
- data: {
- rows: []
- },
- created: function () {
- for (var i = 0; i < 100; i++) {
- this.rows.push({
- id: i
- })
- }
- },
- methods: {
- go: function () {
- var el = this.$el('item-49')
-
- dom.scrollToElement(el, {
- offset: 0
- })
- }
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/65d91cb47d0e348c5750d2248d59b6bd)
-
-## 约束
-
-1. **不允许**相同方向的 `<list>` 或者 `<scroller>` 互相嵌套，换句话说就是嵌套的 `<list>`/`<scroller>` 必须是不同的方向。
-
- 举个例子，**不允许**一个垂直方向的 `<list>` 嵌套的一个垂直方向的 `<scroller>` 中，但是一个垂直方向的 `<list>` 是可以嵌套的一个水平方向的 list 或者 `<scroller>` 中的。
-
-2. `<list>` 为根节点时无需设置高度，但是内嵌 `<list>` 高度**必须可计算**，你可以使用 `flex` 或 `postion` 将 `<list>` 设为一个响应式高度（例如全屏显示）, 也可以显式设置 `<list>` 组件的 `height` 样式。
-
-## 示例
-
-```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
diff --git a/_drafts/v1.0/references/components/loading.md b/_drafts/v1.0/references/components/loading.md
deleted file mode 100644
index f6d68fa..0000000
--- a/_drafts/v1.0/references/components/loading.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: <loading>
-type: references
-order: 2.6
-version: 0.10
----
-
-# <loading>
-
-<span class="weex-version">v0.6.1+</span>
-
-`<loading>` 为 `<scroller>` 和 `<list>` 提供上拉加载功能。用法与特性与 `<refresh>` 类似， 是 `<scroller>` 和 `<list>` 的子组件，且只能在被 `<scroller>` 和 `<list>` 包含时才能被正确的渲染。
-
-## 子组件
-
-- [`<text>`](./text.html)
-- [`<image>`](./image.html)
-- `<loading-indicator>`: `<refresh>` 和 `<loading>` 组件的子组件，拥有默认的动画效果的实现。
-
-## 特性
-
-- `display {string}`：可选值为 `show` 或者 `hide`，仅隐藏 `<indicator>`，`<loading>` 其他子组件依然可见，`loading` 事件仍会被触发。
-
-## 样式
-
-支持所有通用样式。
-
-- 盒模型
-- `flexbox` 布局
-- `position`
-- `opacity`
-- `background-color`
-
-查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-- `loading`：加载时被触发。
-
-## 约束
-
-- `<loading>` 不支持 `remove`，v0.9 版本会修复。
-- `display` 值为 `show` 或 `hide`。仅隐藏 `<indicator>`，`<loading>` 其他子组件依然可见，`loading` 事件仍会被触发。
-
- 如果需要 `<loading>` hide 时隐藏文案并不再触发事件，有两种解决方法：
-
- 1. 修改提示文案，并在 `loading` 事件中添加判断逻辑；
- 2. v0.9+ 可通过 `remove` 解决。
-
-- 只能通过 `display` 特性进行展示和隐藏，且必须成对出现，即设置 `display="show"`,必须有对应的 `display="hide"`。
-
-## 示例
-
-```html
-<template>
- <list>
- <header>
- <div class="center">
- <text style="text-align:center">I am the header</text>
- </div>
- </header>
- <loading onloading="onloading" display="{{loadingDisplay}}" style="width:750;flex-direction: row;justify-content: center;">
- <loading-indicator style="height:160;width:160;color:#3192e1"></loading-indicator>
- </loading>
- <cell class="row" repeat="i in staffs" index="{{$index}}">
- <div class="item">
- <text>{{i.name}}</text>
- </div>
- </cell>
- </list>
-</template>
-
-<style>
- .row {
- width: 750;
- }
- .item {
- justify-content: center;
- border-bottom-width: 2;
- border-bottom-color: #c0c0c0;
- height: 100;
- padding:20;
- }
- .center {
- border-bottom-width: 2;
- border-bottom-color: #cccccc;
- height: 100;
- padding:20;
- background-color:#FFFFFF;
- justify-content: center;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- staffs:[],
- loadingDisplay: 'show',
- loadingText: 'pull up to load more',
- refreshText: 'pull down to refresh'
- },
- created:function() {
- this.refreshDisplay='show'
- this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}];
- },
- methods:{
- onloading:function(e){
- console.log('onloading...');
- this.staffs.push({name:'onloading'})
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/6adf7add849f3c9fcdbc776a6c471f02)
-
-更多示例可查看 [`<list>`](./list.html)
diff --git a/_drafts/v1.0/references/components/refresh.md b/_drafts/v1.0/references/components/refresh.md
deleted file mode 100644
index 868dad7..0000000
--- a/_drafts/v1.0/references/components/refresh.md
+++ /dev/null
@@ -1,204 +0,0 @@
----
-title: <refresh>
-type: references
-order: 2.7
-version: 0.10
----
-
-# <refresh>
-
-<span class="weex-version">v0.6.1+</span>
-
-`<refresh>` 为 `<scroller>` 和 `<list>` 提供下拉加载功能。用法与特性与 `<loading>` 类似，`<scroller>` 和 `<list>` 的子组件，且只能在被 `<scroller>` 和 `<list>` 包含时才能被正确的渲染。
-
-一个简单例子：
-
-```html
-<template>
- <list>
- <header>
- <div class="center">
- <text style="text-align:center">I am the header</text>
- </div>
- </header>
- <refresh onpullingdown='onpullingdown' onrefresh="onrefresh" display="{{refreshDisplay}}" style="width:750;flex-direction: row;justify-content: center;">
- <loading-indicator style="height:160;width:160;color:#3192e1"></loading-indicator>
- </refresh>
- <cell class="row" repeat="i in staffs" index="{{$index}}">
- <div class="item">
- <text>{{i.name}}</text>
- </div>
- </cell>
- </list>
-</template>
-
-<style>
- .row {
- width: 750;
- }
- .item {
- justify-content: center;
- border-bottom-width: 2;
- border-bottom-color: #c0c0c0;
- height: 100;
- padding:20;
- }
- .center {
- border-bottom-width: 2;
- border-bottom-color: #cccccc;
- height: 100;
- padding:20;
- background-color:#FFFFFF;
- justify-content: center;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- staffs:[],
- refreshDisplay: 'show',
- loadingDisplay: 'show',
- loadingText: 'pull up to load more',
- refreshText: 'pull down to refresh'
- },
- created:function() {
- this.refreshDisplay='show'
- this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}];
- },
- methods:{
- onrefresh:function(e){
- this.refreshDisplay='show';
- this.staffs=[{name:'anna'},{name:'baos'},{name:'connon'},{name:'inns'}];
- this.refreshDisplay='hide'
- },
- onpullingdown:function(e){
- console.log('onpullingdown triggered.');
- console.log('dy:'+e.dy);
- console.log('headerHeight:'+e.headerHeight);
- console.log('maxHeight:'+e.maxHeight);
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/64cb982f67186c76f9f27fe3000a2fe8)
-
-## 子组件
-
-- [`<text>`](./text.html)
-- [`<image>`](./image.html)
-- `<loading-indicator>`: `<refresh>` 和 `<loading>` 组件的子组件，拥有默认的动画效果的实现。
-
-## 特性
-
-- `display {string}`：可选值为 `show` 或者 `hide`，仅隐藏 `<indicator>`，`<loading>` 其他子组件依然可见，`<loading>` 事件仍会被触发。
-
-## 样式
-
-支持所有通用样式。
-
-- 盒模型
-- `flexbox` 布局
-- `position`
-- `opacity`
-- `background-color`
-
-查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-- `refresh`： 当 `<scroller>`/`<list>` 被下拉时触发。
-- `pullingdown`：仅在 Android 支持。当 `<scroller>`/`<list>` 被下拉时触发，可以从事件的参数对象中获取 dy，headerHeight，maxHeight
-
-## 约束
-
-- `<refresh>` 不支持 `remove`，v0.9 版本会修复。
-- `display` 值为 `show` 或 `hide`。仅隐藏 `<indicator>`，`<refresh>` 其他子组件依然可见，`refresh` 事件仍会被触发。
-
- 如果需要 `<refresh>` hide 时隐藏文案并不再触发事件，有两种解决方法：
-
- 1. 修改提示文案，并在 `refresh` 事件中添加判断逻辑；
- 2. v0.9+ 可通过 `remove` 解决。
-
-- 只能通过 `display` 特性进行展示和隐藏，且必须成对出现，即设置 `display="show"`,必须有对应的 `display="hide"`。
-
-## 示例
-
-```html
-<template>
- <scroller onloadmore="onloadmore" loadmoreoffset="1000">
- <refresh onrefresh="onrefresh" display="{{refreshDisplay}}">
- <text id="refreshText">{{refreshText}}</text>
- </refresh>
- <div repeat="v in items">
- <text style="font-size: 40; color: #000000">{{v.item}}</text>
- </div>
- <loading onloading="onloading" display="{{loadingDisplay}}">
- <text id="loadingText">{{loadingText}}</text>
- </loading>
- </scroller>
-</template>
-
-<script>
- module.exports = {
- data: {
- refreshDisplay: 'show',
- loadingDisplay: 'show',
- loadingText: 'pull up to load more',
- refreshText: 'pull down to refresh',
- items: []
- },
- created: function () {
- for (var i = 0; i < 30; i++) {
- this.items.push({
- 'item': 'test data' + i
- });
- }
- },
- methods: {
- onrefresh: function () {
- var vm = this;
- vm.refreshDisplay = 'show'
- if (vm.items.length > 50) {
- vm.refreshText = "no more data!"
- vm.refreshDisplay = 'hide'
- return;
- }
- var len = vm.items.length;
- for (var i = len; i < (len + 20); i++) {
- vm.items.unshift({
- 'item': 'test data ' + i
- });
- }
- vm.refreshDisplay = 'hide'
- },
- onloading: function () {
- var vm = this;
- vm.loadingDisplay = 'show'
- if (vm.items.length > 30) {
- vm.loadingText = "no more data!"
- vm.loadingDisplay = 'hide'
- return;
- }
-
- var len = vm.items.length;
- for (var i = len; i < (len + 20); i++) {
- vm.items.push({
- 'item': 'test data ' + i
- });
- }
- vm.loadingDisplay = 'hide'
- },
- onloadmore: function () {
- console.log("into--[onloadmore]")
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/80c027d6bfb337195c25cc0ba9317ea5)
-
-更多示例可查看 [`<list>`](./list.html)
diff --git a/_drafts/v1.0/references/components/scroller.md b/_drafts/v1.0/references/components/scroller.md
deleted file mode 100644
index 0fac77c..0000000
--- a/_drafts/v1.0/references/components/scroller.md
+++ /dev/null
@@ -1,324 +0,0 @@
----
-title: <scroller>
-type: references
-order: 2.8
-version: 0.10
----
-
-# <scroller>
-
-<span class="weex-version">v0.6.1+</span>
-
-`<scroller>` 是一个竖直的，可以容纳多个排成一列的子组件的滚动器。如果子组件的总高度高于其本身，那么所有的子组件都可滚动。
-
-**注意：** `<scroller>` 可以当作根元素或者嵌套元素使用。此组件的滚动方向是垂直方向的形式。
-
-一个简单例子：
-
-```html
-<template>
- <scroller onloadmore="onloadmore" loadmoreoffset="100">
- <div repeat="v in items">
- <text style="font-size: 40; color: #000000">{{v.item}}</text>
- </div>
- </scroller>
-</template>
-<script>
- module.exports = {
- data: {
- items: [],
- triggered: false
- },
- created: function () {
- for (var i = 0; i < 50; i++) {
- this.items.push({
- 'item': 'test data' + i
- });
- }
- },
- methods: {
- onloadmore: function () {
- if (!this.triggered) {
- for (var i = 100; i >= 50; i--) {
- this.items.push({
- 'item': 'onloadmore triggered' + i
- });
- }
- }
- this.triggered = true;
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/6910f0b87aeabe3f2a0d62c0d658dbd2)
-
-## 子组件
-
-支持任意类型的 Weex 组件作为其子组件。 其中，还支持以下两个特殊组件作为子组件：
-
-- `<refresh>`
-
- 用于给列表添加下拉刷新的功能。
-
- 使用文档请查看 [`<refresh>`](./refresh.html)
-
-- `<loading>`
-
- `<loading>` 用法与特性和 `<refresh>` 类似，用于给列表添加上拉加载更多的功能。
-
- 使用文档请查看 [`<loading>`](./loading.html)
-
-## 特性
-
-- `show-scrollbar {boolean}`：可选值为 `true`/ `false`，默认值为 `true`。控制是否出现滚动条。
-- `scroll-direction {string}`：可选为 `horizontal` 或者 `vertical`，默认值为 `vertical` 。定义滚动的方向。
-- `loadmoreoffset {number}`：默认值为 0，触发 `loadmore` 事件所需要的垂直偏移距离（设备屏幕底部与页面底部之间的距离）。当页面的滚动条滚动到足够接近页面底部时将会触发 `loadmore` 这个事件。
-
- 
-
-- `loadmoreretry {number}`：默认值为 0，当 `loadmore` 失败时是否重置 `loadmore` 相关的 UI，值不一样就会重置。
-
-## 样式
-
-- 通用样式：支持所有通用样式
-
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-- `loadmore` <sup class="wx-v">v0.5+</sup>：如果滚动到底部将会立即触发这个事件，你可以在这个事件的处理函数中加载下一页的列表项。
-- 通用事件
-
- 支持所有通用事件：
-
- - `click`
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](../common-event.html)
-
-## 扩展
-
-### scrollToElement(node, options)
-
-滚动到列表某个指定项是常见需求，`<list>` 拓展了该功能支持滚动到指定 `<cell>`。通过 `dom` module 访问，更多信息可参考 [dom module](../modules/dom.html) 。
-
-#### 参数
-
-- `node {node}`：指定目标节点。
-- `options {Object}`：
- - `offset {number}`：一个到其可见位置的偏移距离，默认是0
-
-#### 示例
-
-```html
-<template>
- <scroller>
- <div class="row" repeat="item in rows" id="item-{{$index}}">
- <text class="item-title">row {{item.id}}</text>
- </div>
- <div onclick="go" style="width: 750;height: 50; position: fixed; left: 0; right: 0; bottom: 0; background-color: #eeeeee;">
- <text style="text-align: center;">
- Go to 50th line.
- </text>
- </div>
- </scroller>
-</template>
-
-<script>
-var dom = require('@weex-module/dom')
-
-module.exports = {
- data: {
- rows: []
- },
- created: function () {
- for (var i = 0; i < 100; i++) {
- this.rows.push({
- id: i
- })
- }
- },
- methods: {
- go: function () {
- var el = this.$el('item-49')
-
- dom.scrollToElement(el, {
- offset: 0
- })
- }
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/483e5c878c52c0891e6e35e478f19854)
-
-## 约束
-
-**不允许**相同方向的 `<list>` 或者 `<scroller>` 互相嵌套，换句话说就是嵌套的 `<list>`/`<scroller>` 必须是不同的方向。
-
-举个例子，**不允许**一个垂直方向的 `<list>` 嵌套的一个垂直方向的 `<scroller>` 中，但是一个垂直方向的 `<list>` 是可以嵌套的一个水平方向的 `<list>` 或者 `<scroller>` 中的。
-
-## 示例
-
-
-
-```html
-<style>
-.item {
- padding: 20;
- height: 220;
- border-bottom-width: 1;
- border-bottom-style: solid;
- border-bottom-color: #efefef;
-}
-.item-content {
- flex-direction: row;
- width: 710;
- background-color: #ffffff;
-}
-.item-imgbox {
- height: 180;
- width: 180;
- margin-right: 20;
-}
-.item-img {
- width: 180;
- height: 180;
-}
-.item-info {
- height: 180;
- width: 510;
- justify-content: center;
- position: relative;
-}
-.item-info-detail {
- position: relative;
- color: #A2A2A2;
-}
-.desc {
- lines: 4;
- text-overflow: ellipsis;
- font-size: 26;
- line-height: 30;
- color: #A2A2A2;
-}
-.title {
- lines: 1;
- text-overflow: ellipsis;
- font-size: 32;
- color: #2D2D2D;
- line-height: 40;
-}
-.detail-info {
- margin-top: 15;
-}
-.up {
- width: 70;
- height: 70;
- position: fixed;
- right: 20;
- bottom: 20;
-}
-.img {
- width: 70;
- height: 70;
-}
-</style>
-
-<template>
- <div>
- <scroller>
- <div class="item" repeat="item in items" id="item-{{$index}}">
- <div class="item-content">
- <div class="item-imgbox">
- <img class="item-img" src="{{item.img}}" alt="" />
- </div>
- <div class="item-info">
- <div class="item-info-detail">
- <text class="title">{{item.title}}</text>
- <div class="detail-info">
- <text class="desc">{{item.desc}}</text>
- </div>
- </div>
- </div>
- </div>
- </div>
- </scroller>
- <div class="up" onclick="goToTop">
- <img class="img" src="https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png"></img>
- </div>
- </div>
-</template>
-
-<script>
- var dom = require('@weex-module/dom') || {}
-
- module.exports = {
- data: {
- items: [{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- },{
- img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
- title: 'Who is Alan Mathison Turing?',
- desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
- }]
- },
- created: function () {
- },
- methods: {
- goToTop: function (e) {
- dom.scrollToElement(this.$el('item-0'), {
- offset: 0
- })
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/799f54b32f5227f9c34cfbb5e6946ba7)
\ No newline at end of file
diff --git a/_drafts/v1.0/references/components/slider.md b/_drafts/v1.0/references/components/slider.md
deleted file mode 100644
index b12a8aa..0000000
--- a/_drafts/v1.0/references/components/slider.md
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: <slider>
-type: references
-order: 2.9
-version: 0.10
----
-
-# <slider>
-
-`<slider>` 组件用于在一个页面中展示多个图片，在前端，这种效果被称为 `轮播图`。
-
-## 子组件
-
-支持任意类型的 Weex 组件作为其子组件。 其中，还支持以下组件作为子组件展示特殊效果：
-
- - `<indicator>`：用于显示轮播图指示器效果，必须充当 [`<slider>`](./slider.html) 组件的子组件使用。
-
-## 特性
-
-- `auto-play {boolean}`：可选值为 `true`/`false`，默认的是 `false`。
-
- 该值决定是否自动播放轮播。重置 `loadmore` 相关的 UI，值不一样就会重置。
-
-- `interval {number}`：值为毫秒数，此值设定 slider 切换时间间隔。当 `auto-play` 值为 `true` 时生效。
-
-## 样式
-
-- 通用样式：支持所有通用样式
-
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-- `change`: 当轮播索引改变时，触发该事件。
-
- 事件中 event 对象属性：
- - `index`：展示的图片索引
-
-- 通用事件
-
- 支持所有通用事件：
-
- - `click`
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](../common-event.html)
-
-## 示例
-
-```html
-<template>
- <div>
- <slider class="slider" interval="3000" auto-play="true">
- <div class="slider-pages" repeat="item in itemList">
- <image class="img" src="{{item.pictureUrl}}"></image>
- <text class="title">{{item.title}}</text>
- </div>
- <indicator class="indicator"></indicator>
- </slider>
- </div>
-</template>
-
-<style>
- .img {
- width: 714;
- height: 150;
- }
- .title {
- position: absolute;
- top: 20;
- left: 20;
- color: #ff0000;
- font-size: 48;
- font-weight: bold;
- background-color: #eeeeee;
- }
- .slider {
- flex-direction: row;
- margin: 18;
- width: 714;
- height: 230;
- }
- .slider-pages {
- flex-direction: row;
- width: 714;
- height: 200;
- }
- .indicator {
- width:714;
- height:200;
- position:absolute;
- top:1;
- left:1;
- item-color: red;
- item-selectedColor: blue;
- item-size: 20;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- itemList: [
- {itemId: '520421163634', title: 'item1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
- {itemId: '522076777462', title: 'item2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
- {itemId: '522076777462', title: 'iten3', pictureUrl: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
- ]
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/37784d97811f4c91594a9ad6f118c0f7)
diff --git a/_drafts/v1.0/references/components/switch.md b/_drafts/v1.0/references/components/switch.md
deleted file mode 100644
index 8a3d614..0000000
--- a/_drafts/v1.0/references/components/switch.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: <switch>
-type: references
-order: 2.11
-version: 0.10
----
-
-# <switch>
-
-<span class="weex-version">v0.6.1+</span>
-
-`<switch>` 是 Weex 的内置组件，用来创建与 iOS 一致样式的按钮。例如，在 iPhone 中的设置应用中的飞行模式按钮就是一个 switch 按钮。
-
-## 子组件
-
-`<switch>` 组件**不支持**任何子组件。
-
-## 特性
-
-- `checked {boolean}`：默认值为 `false`，表明按钮是否开启 is on or not.
-- `disabled {boolean}`：默认值为 `false`，表明是否激活按钮
-
-## 样式
-
-值得注意的是，在这个组件上，有些样式组件属性**不能使用**，它们是：
-
-- `width`
-- `height`
-- `min-width`
-- `min-height`
-- `margin`
-- `padding`
-- `border`
-
-**注意：**
-
-由于设计宽度为 750px，宽度和高度相关的属性不能配置，组件的尺寸限定在 100x60。
-
-- 通用样式
-
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-- `change`：改变开关状态时触发该事件。
-
- 事件中 event 对象属性：
-
- - `value`: 组件布尔值真或假。
- - `timestamp`: 事件的时间戳。
-
-- 通用事件
-
- 支持所有通用事件：
-
- - `click`
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](../common-event.html)
-
-## 示例
-
-```html
-<template>
- <div>
- <text>muted:</text>
- <switch checked="true" onclick='onclick' onchange='onchange' ondisappear='ondisappear' onappear='onappear'></switch>
- </div>
-</template>
-
-<script>
- module.exports ={
- methods:{
- onclick:function(e){
- console.log('onclick:' + e.timestamp);
- },
- onchange:function(e){
- console.log('onchage, value:' + e.value);
- },
- ondisappear:function(e){
- console.log('ondisappear, value:' + e.value);
- },
- onappear:function(e){
- console.log('onappear, value:' + e.value);
- },
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/5f8b9d9c0e429e61f4a004dc8ee637e1)
\ No newline at end of file
diff --git a/_drafts/v1.0/references/components/text.md b/_drafts/v1.0/references/components/text.md
deleted file mode 100644
index edd6a05..0000000
--- a/_drafts/v1.0/references/components/text.md
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: <text>
-type: references
-order: 2.12
-version: 0.10
----
-
-# <text>
-
-`<text>` 是 Weex 内置的组件，用来将文本按照指定的样式渲染出来。`<text>` 只能包含文本值，你可以使用 `{% raw %}{{}}{% endraw %}` 标记插入变量值作为文本内容。
-
-## 子组件
-
-此组件不支持子组件。
-
-## 特性
-
-- `value {string}`: 组件的值，与 `<text>` 标签中的文本内容相同。
-
-## 样式
-
-- `lines {number}`: 指定文本行数。默认值是 `0` 代表不限制行数。
-- text styles: 查看 [文本样式](../text-style.html)
-
- - 支持 `color` 样式.
- - 支持 `font-size` 样式. iOS默认值：`32`，Android：不同设备不同，H5 默认值：`32`.
- - 支持 `font-style` 样式.
- - 支持 `font-weight` 样式.
- - 支持 `text-align` 样式.
- - 支持 `text-decoration` 样式.
- - 支持 `text-overflow` 样式.
- - 支持 `line-height`样式<sup class="wx-v">0.6.1+</sup> 。`line-height` 在 iOS 中与 H5 和 Android 中不同， 文本值将放置在框的底部。
- - 不支持 `flex-direction`, `justify-content`, `align-items` 这些为子节点设置的属性，并且`<text>`没有子节点。
-
-- 通用样式：支持所有通用样式
-
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-- 通用事件
- 支持所有通用事件：
-
- - `click`
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](../common-event.html)
-
-## 约束
-
-1. `<text>` 里直接写文本头尾空白会被过滤，如果需要保留头尾空白，暂时只能通过数据绑定写头尾空格。
-
-```html
-<template>
- <div>
- <text> 测试1，直接放置头尾用空白的文本 </text>
- <text>{{msg}}</text>
- </div>
-</template>
-<script>
-module.exports = {
- data: {
- msg: ' 测试2，使用数据绑定 '
- }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/473d451e48ba322b606c4ba2577fd96a)
-
-## 示例
-
-```html
-<template>
- <div>
- <text>this is text content</text>
- <text value="this is text value"></text>
- <text id="textid" onclick={{showtext}}>this is gettext content</text>
- <text value="{{text}}"></text>
- <text style="lines: 3;">Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.</text>
-</div>
-</template>
-
-<style>
- .text {
- font-size: 24;
- text-decoration: underline;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- price1: '99.99',
- price2: '88.88',
- text:''
- },
- methods: {
- showtext: function(event) {
- var textComponent = this.$el("textid");
- this.text = textComponent.attr.value;
- }
- }
- };
-</script>
-```
-
-[体验一下](http://dotwe.org/b2796940d6b9766000778c61446fcd26)
diff --git a/_drafts/v1.0/references/components/textarea.md b/_drafts/v1.0/references/components/textarea.md
deleted file mode 100644
index 9470173..0000000
--- a/_drafts/v1.0/references/components/textarea.md
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: <textarea>
-type: references
-order: 2.13
-version: 0.10
----
-
-# <textarea>
-
-<span class="weex-version">v0.8+</span>
-
-`textarea` 是 Weex 内置的一个组件，用于用户交互，接受用户输入数据。 可以认为是允许多行的 `<input>`
-
-**Notes:** `<textarea>`支持 `<input>` 支持的所有的事件。
-
-## 子组件
-
-`textarea` 组件不支持子组件。
-
-## 特性
-
-- `value {string}`：组件的接收到的输入字符。
-- `placeholder {string}`：提示用户可以输入什么。 提示文本不能有回车或换行。
-- `disabled {boolean}`：表示是否支持输入。通常 `click` 事件在 `disabled` 控件上是失效的。
-- `autofocus {boolean}`：表示是否在页面加载时控件自动获得输入焦点。
-- `rows {number}`：接收 number 类型的数据，指定组件的高度，默认值是 2
-
-## 样式
-
-- text styles
- - 支持 `color`
- - 支持 `font-size`
- - 支持 `font-style`
- - 支持 `font-weight`
- - 支持 `text-align`
-
- 查看 [文本样式](../text-style.html)
-
-- 通用样式：支持所有通用样式
-
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-- `input`: 输入字符的值更改。
-
- 事件中 event 对象属性：
-
- - `value`: 触发事件的组件；
- - `timestamp`: 事件发生时的时间戳。
-
-- `change`: 当用户输入完成时触发。通常在 `blur` 事件之后。
-
- 事件中 event 对象属性：
-
- - `value`: 触发事件的组件；
-
- - `timestamp`: 事件发生时的时间戳。
-
-- `focus`: 组件获得输入焦点。
-
- 事件中 event 对象属性：
-
- - `timestamp`: 事件发生时的时间戳。
-
-- `blur`: 组件失去输入焦点。
-
- 事件中 event 对象属性：
-
- - `timestamp`: 事件发生时的时间戳。
-
-- 通用事件
-
- **注意：**
- 不支持 `click` 事件。 请监听 `input` 或 `change` 事件代替。
-
- 支持以下通用事件：
-
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](../common-event.html)
-
-## 示例
-
-```html
-<template>
- <div>
- <textarea
- class="textarea"
- autofocus="true"
- placeholder="..."
- value="我是一个多行版本的input组件">
- </textarea>
- </div>
-</template>
-<style>
- .textarea {
- margin: 20;
- border-width: 2;
- border-style: solid;
- border-color: #efefef;
- border-radius: 5;
- }
-</style>
-```
-
-[体验一下](http://dotwe.org/31d67beda847cd5b5cf7b78ff21895ba)
diff --git a/_drafts/v1.0/references/components/video.md b/_drafts/v1.0/references/components/video.md
deleted file mode 100644
index ac17c8b..0000000
--- a/_drafts/v1.0/references/components/video.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: <video>
-type: references
-order: 2.14
-version: 0.10
----
-
-# <video>
-
-<span class="weex-version">v0.6.1+</span>
-
-`<video>` 组件可以让我们在 Weex 页面中嵌入视频内容。
-
-## 子组件
-
-- `<text>` 是唯一合法的子组件。
-
-### 特性
-
-- `src {string}`：内嵌的视频指向的URL
-- `play-status {string}`：可选值为 `play` | `pause`，用来控制视频的播放状态，`play` 或者 `pause`，默认值是 `pause`。
-- `auto-play {boolean}`：可选值为 `true` | `false`，当页面加载初始化完成后，用来控制视频是否立即播放，默认值是 `false`。
-
-## 样式
-
-- 通用样式：支持所有通用样式
-
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-- `start`：当 playback 的状态是 Playing 时触发
-- `pause`：当 playback 的状态是 Paused 时触发
-- `finish`：当 playback 的状态是 Finished 时触发
-- `fail`：当 playback 状态是 Failed 时触发
-
-## 示例
-
-```html
-<template>
- <div>
- <text>Big Eater!</text>
- <video class="video" onstart="onstart" onpause="onpause" onfinish="onfinish" onfail="onfail"
- auto-play="false" play-status="pause" src="{{src}}" style="width:750;height:500;"></video>
- <text>state: {{msg}}</text>
- </div>
-</template>
-
-<style>
-</style>
-
-<script>
- module.exports ={
- data: {
- msg: '',
- src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
- },
- methods:{
- onstart:function(e){
- this.msg = 'onstart'
- },
- onpause:function(e){
- this.msg = 'onpause'
- },
- onfinish:function(e){
- this.msg = 'onfinish'
- },
- onfail:function(e){
- this.msg = 'onfinish'
- },
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/d83a00bbd180bd5dc4e7f9381d39b4dd)
diff --git a/_drafts/v1.0/references/components/web.md b/_drafts/v1.0/references/components/web.md
deleted file mode 100644
index 073fb4b..0000000
--- a/_drafts/v1.0/references/components/web.md
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: <web>
-type: references
-order: 2.15
-version: 0.10
----
-
-# <web>
-
-<span class="weex-version">v0.5+</span>
-
-使用 `<web>` 组件在 Weex 页面中嵌入一张网页内容。`src` 属性用来指定资源地址。你也可以使用 `webview module` 来控制 `web` 的行为，比如前进、后退和重载。可以在这里查看 [`webview` module](../modules/webview.html)。
-
-## 子组件
-
-不支持子组件。
-
-## 特性
-
-- `src {string}`：此特性指定嵌入的 web 页面 url。
-
-## 样式
-
-- 通用样式：不支持部分盒模型样式，支持列表如下：
-
- - `width`
-
- 组件的宽度，默认值是0。这个样式定义必须指定数值。
-
- - `height`
-
- 组件的高度，默认值是0。这个样式定义必须指定数值。
-
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](../common-style.html)
-
-## 事件
-
-- `pagestart`: `<web>` 组件开始加载时发送此事件消息。
-- `pagefinish`: `<web>` 组件完成加载时发送此事件消息。
-- `error`: 如果 `<web>` 组件加载出现错误，会发送此事件消息。
-
-- 通用事件
-
- 支持以下通用事件：
- - `appear`
- - `disappear`
-
- 查看 [通用事件](../common-event.html)
-
-**注意：**
-
-不支持 `click` 事件。
-
-## 示例
-
-我们用一个简易浏览器示例，来展示如何使用 `<web>` 组件和 `webview` module。 查看 [webview module](../modules/webview.html)。
-
-```html
-<template>
- <div class="browserStyle">
- <div style="flex-direction: row">
- <input id="urlInput" type="url" autofocus="false" placeholder="input url" onchange="change" oninput="input" class="textStyle" value="https://www.baidu.com">
- </input>
- </div>
- <div style="flex-direction: row">
- <text class="buttonSytle" onclick="loadURL">LoadURL</text>
- <text class="buttonSytle" onclick="backforward">Backward</text>
- <text class="buttonSytle" onclick="forward">Forward</text>
- </div>
- <div>
- <web id="webview" src="{{src}}" class="webStyle"></web>
- </div>
- </div>
-</template>
-
-<style>
- .browserStyle {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color:#778899 ;
- }
-
- .textStyle {
- width: 750;
- height: 50;
- background-color: #D3D3D3;
- font-size: 30;
- }
-
- .buttonSytle {
- width:200;
- height: 50;
- background-color: #D3D3D3;
- margin:10;
- padding-left: 5;
- padding-right: 5;
- font-size: 30;
- }
-
- .webStyle {
- width: 750;
- height: 800;
- background-color: #8B0000;
- }
-</style>
-
-<script>
- var web_module = require('@weex-module/webview')
-
- module.exports = {
- data: {
- src : "https://h5.m.taobao.com",
- },
-
- methods: {
- loadURL: function (e) {
- var input = this.$el("urlInput");
- this.src = input.attr.value;
- },
-
- backforward: function (e) {
- var web_element = this.$el('webview');
- web_module.goBack(web_element);
- },
-
- forward: function (e) {
- var web_element = this.$el('webview');
- web_module.goForward(web_element);
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/84741a6befeb0f1e5ce11b47ecf1123f)
diff --git a/_drafts/v1.0/references/gesture.md b/_drafts/v1.0/references/gesture.md
deleted file mode 100644
index 4377af9..0000000
--- a/_drafts/v1.0/references/gesture.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: 手势
-type: references
-order: 1.4
-version: 0.10
----
-
-# 手势
-
-*注：该功能属于实验性功能*
-
-Weex 封装了原生的触摸事件以提供手势系统。使用手势类似于在 Weex 中使用事件，只需在节点上设置 `on` 特性来监听手势即可。
-
-## 手势类型
-
-目前，仅支持以下四种手势类型：
-
-- **Touch**：当触摸到一个点，移动或从触摸面移开时触发 `touch` 手势。触摸手势很精准，它会返回所有详细的事件信息。所以，监听 `touch` 手势可能很慢，即使只移动一丁点也需要处理大量事件。有三种类型的 `touch` 手势：
-
- - `touchstart` 将在触摸到触摸面上时触发。
- - `touchmove` 将在触摸点在触摸面移动时被触发。
- - `touchend` 将在从触摸面离开时被触发。
-
-- **Pan**：`pan` 手势也会返回触摸点在触摸面的移动信息，有点类似于 `touch` 手势。但是 `pan` 手势只会采样收集部分事件信息因此比 `touch` 事件要快得多，当然精准性差于 `touch`。`pan` 也有三中类型的手势，这些手势的意义与 `touch` 完全一样：
-
- - `panstart`
- - `panmove`
- - `panend`
-
-- **Swipe**：`swipe` 将会在用户在屏幕上滑动时触发，一次连续的滑动只会触发一次 `swiper` 手势。
-- **LongPress**：`LongPress` 将会在触摸点连续保持 500 ms以上时触发。
-
-`touch` 和 `pan` 非常接近，它们的特点可以总结成这样：
-
-- **Touch**：完整信息，精准、很慢
-- **Pan**：抽样信息，很快，不够精准
-
-开发者可以根据自己的情况选择合适的手势。
-
-## 属性
-
-以下属性可以在手势的回调中使用：
-
-- `direction`：仅在 `swipe` 手势中存在，返回滑动方向，返回值可能为 `up`, `left`, `bottom`, `right`。
-- `changedTouches`：一个数组，包含了当前手势的触摸点的运动轨迹
-
-### changedTouches
-
-`changedTouches` 是一个数组，其子元素中包含以下属性：
-
-- `identifier`：触摸点的唯一标识符。
-- `pageX`：触摸点相对于文档左侧边缘的 X 轴坐标。
-- `pageY`：触摸点相对于文档顶部边缘的 Y 轴坐标。
-- `screenX`：触摸点相对于屏幕左侧边缘的 X 轴坐标。
-- `screenY`：触摸点相对于屏幕顶部边缘的 Y 轴坐标。
-
-## 约束
-
-目前，由于会触发大量事件冲突，Weex Android 还不支持在滚动类型的元素上监听手势，例如 `scroller`, `list` 和 `webview` 这三个组件。
-
-## 示例
-
-```html
-<template>
- <div ontouchstart="handleTouchstart"></div>
-</template>
-
-<script>
-module.exports = {
- methods: {
- handleTouchstart: function(eventProperties) {
- // handling with the Event Properties
- }
- }
-}
-</script>
-```
-
-如上面代码所示，一个 `touchstart` 事件会在触摸点与触摸面接触的时候触发。
diff --git a/_drafts/v1.0/references/images/Artboard.jpg b/_drafts/v1.0/references/images/Artboard.jpg
deleted file mode 100644
index 2f6bb95..0000000
--- a/_drafts/v1.0/references/images/Artboard.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/coding_weex_1.jpg b/_drafts/v1.0/references/images/coding_weex_1.jpg
deleted file mode 100644
index 8080578..0000000
--- a/_drafts/v1.0/references/images/coding_weex_1.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/css-boxmodel.png b/_drafts/v1.0/references/images/css-boxmodel.png
deleted file mode 100644
index a2063e2..0000000
--- a/_drafts/v1.0/references/images/css-boxmodel.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/css-flexbox-align.jpg b/_drafts/v1.0/references/images/css-flexbox-align.jpg
deleted file mode 100644
index 8a7f731..0000000
--- a/_drafts/v1.0/references/images/css-flexbox-align.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/css-flexbox-justify.svg b/_drafts/v1.0/references/images/css-flexbox-justify.svg
deleted file mode 100644
index 33e742b..0000000
--- a/_drafts/v1.0/references/images/css-flexbox-justify.svg
+++ /dev/null
@@ -1,59 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width='504' height='270' viewBox="0 0 504 270">
- <defs>
- <pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
- <rect x='0' y='0' width='10' height='10' fill='#eee' />
- <rect x='10' y='10' width='10' height='10' fill='#eee' />
- <rect x='0' y='10' width='10' height='10' fill='#ccc' />
- <rect x='10' y='0' width='10' height='10' fill='#ccc' />
- </pattern>
- </defs>
- <style>
- text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
- rect { stroke-width: 2px; stroke: #888; }
- g > rect:nth-child(1) { fill: #888 }
- g > rect:nth-child(2) { fill: #fcc; }
- g > rect:nth-child(3) { fill: #cfc; }
- g > rect:nth-child(4) { fill: #ccf; }
- g > rect:nth-child(5) { fill: transparent; }
- </style>
- <g transform="translate(2,2)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='0' y='0' width='100' height='50' />
- <rect x='100' y='0' width='80' height='50' />
- <rect x='180' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>flex-start</text>
- </g>
- <g transform="translate(2,56)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='120' y='0' width='100' height='50' />
- <rect x='220' y='0' width='80' height='50' />
- <rect x='300' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>flex-end</text>
- </g>
- <g transform="translate(2,110)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='60' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='240' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>center</text>
- </g>
- <g transform="translate(2,164)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='0' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='300' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>space-between</text>
- </g>
- <g transform="translate(2,218)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='20' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='280' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>space-around</text>
- </g>
-</svg>
\ No newline at end of file
diff --git a/_drafts/v1.0/references/images/div_1.jpg b/_drafts/v1.0/references/images/div_1.jpg
deleted file mode 100644
index 3c89773..0000000
--- a/_drafts/v1.0/references/images/div_1.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/div_2.jpg b/_drafts/v1.0/references/images/div_2.jpg
deleted file mode 100644
index 67395bb..0000000
--- a/_drafts/v1.0/references/images/div_2.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/div_3.jpg b/_drafts/v1.0/references/images/div_3.jpg
deleted file mode 100644
index b10f69e..0000000
--- a/_drafts/v1.0/references/images/div_3.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/div_4.jpg b/_drafts/v1.0/references/images/div_4.jpg
deleted file mode 100644
index acc2518..0000000
--- a/_drafts/v1.0/references/images/div_4.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/image_1.jpg b/_drafts/v1.0/references/images/image_1.jpg
deleted file mode 100644
index b87de15..0000000
--- a/_drafts/v1.0/references/images/image_1.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/image_2.jpg b/_drafts/v1.0/references/images/image_2.jpg
deleted file mode 100644
index 598a242..0000000
--- a/_drafts/v1.0/references/images/image_2.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/list_2.jpg b/_drafts/v1.0/references/images/list_2.jpg
deleted file mode 100644
index 8c2cc55..0000000
--- a/_drafts/v1.0/references/images/list_2.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/list_3.jpg b/_drafts/v1.0/references/images/list_3.jpg
deleted file mode 100644
index f2968c7..0000000
--- a/_drafts/v1.0/references/images/list_3.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/list_4.jpg b/_drafts/v1.0/references/images/list_4.jpg
deleted file mode 100644
index 0123171..0000000
--- a/_drafts/v1.0/references/images/list_4.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/nav.jpg b/_drafts/v1.0/references/images/nav.jpg
deleted file mode 100644
index 8c6ed03..0000000
--- a/_drafts/v1.0/references/images/nav.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/scroller_1.jpg b/_drafts/v1.0/references/images/scroller_1.jpg
deleted file mode 100644
index 3e995cb..0000000
--- a/_drafts/v1.0/references/images/scroller_1.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/style_1.jpg b/_drafts/v1.0/references/images/style_1.jpg
deleted file mode 100644
index 2482710..0000000
--- a/_drafts/v1.0/references/images/style_1.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/images/style_2.jpg b/_drafts/v1.0/references/images/style_2.jpg
deleted file mode 100644
index 6b6f2e1..0000000
--- a/_drafts/v1.0/references/images/style_2.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/references/index.md b/_drafts/v1.0/references/index.md
deleted file mode 100644
index 644c16f..0000000
--- a/_drafts/v1.0/references/index.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Bootstrap
-type: references
-order: 1
-has_chapter_content: false
-chapter_title: 通用选项
-version: 0.10
----
-
-# Bootstrap
-
-除了其默认的意义，`<script>`标签支持在页面的顶级组件中通过 `type` 属性定义两种配置。
-- `type="data"`: 配置初始化数据，这里定义的数据会覆盖定义在`<script>`中的数据；
-- `type="config"`: 定义配置项。
-
-``` html
-<script type="data">
- /* (可选) 定义初始化数据 */
-</script>
-
-<script type="config">
- /* (可选) 定义配置项 */
-</script>
-
-```
-## 定义初始化数据
-
-有时，很难在默认的`<script>`标签中维护巨大的数据结构。所以 Weex 允许我们通过 `<script type="data">` 标签定义初始化数据。在这里定义的数据将完全取代默认的 `<script>` 标签中定义的数据。
-
-例如：
-
-```html
-<script type="data">
- module.exports = {
- title: 'Alibaba',
- date: new Date().toLocaleString()
- }
-</script>
-```
-## 配置项
-
-Weex 也允许我们通过 `<script type="config">` 定义一些配置项，目前，仅只支持配置 `downgrade`。
-- `downgrade.osVersion`
-- `downgrade.appVersion`
-- `downgrade.weexVersion`
-- `downgrade.deviceModel`
diff --git a/_drafts/v1.0/references/modules/animation.md b/_drafts/v1.0/references/modules/animation.md
deleted file mode 100644
index 821bfac..0000000
--- a/_drafts/v1.0/references/modules/animation.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: animation
-type: references
-order: 4.1
-version: 0.10
----
-
-# `animation` 动画
-
-流畅且有意义的动画是一个十分有效的提升移动应用用户体验的手段，`animation` 模块被用于在组件上执行动画。动画可以对组件执行一系列简单的变换 (位置、大小、旋转角度、背景颜色和不透明度)。举个例子，如果有一个 `<image>` 组件，通过动画你可以对其进行移动、旋转、拉伸或收缩等动作。
-
-## 示例
-
-```html
-<template>
- <div>
- <div id="test" class="test" onclick="run"></div>
- </div>
-</template>
-<style>
- .test { background-color: #6666ff; width: 200; height: 200; }
-</style>
-<script>
- var animation = require('@weex-module/animation')
- module.exports = {
- methods: {
- run: function () {
- var testEl = this.$el('test')
- animation.transition(testEl, {
- styles: {
- backgroundColor: '#FF0000',
- transform: 'translate(100px, 100px)'
- },
- duration: 0, //ms
- timingFunction: 'ease',
- 'transform-origin': 'center center',
- delay: 0 //ms
- }, function () {
- console.log('animation finished.')
- })
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/2ae04d3a7017a2ec748cf40905fcd98c)
-
-## API
-
-### `transition(el, options, callback)`
-
-[example](http://dotwe.org/a034a49b5863da099843eb9a0eea9f93)
-
-#### 参数
-
-* `el {Element}`：将要执行动画的元素，通常可以通过调用 [`this.$el(id)`](../api.html) 来获取元素的引用。
-* `options {Object}`：描述动画过程的对象。
- * `options.duration {number}`：指定动画的持续时间 (单位是毫秒)，默认值是 `0`，表示没有动画效果。
- * `options.delay {number}`：指定请求动画操作到执行动画之间的时间间隔 (单位是毫秒)，默认值是 `0`，表示没有延迟，在请求后立即执行动画。
- * `options.timingFunction {string}`：描述动画执行的速度曲线，用于使动画变化更为平滑。默认值是 `linear`，表示动画从开始到结束都拥有同样的速度。下表列出了所有合法的属性：
-
-| 属性名 | 描述 | 示例 |
-| ---- | ---- | ---- |
-| `linear` | 动画从头到尾的速度是相同的 | [example](http://dotwe.org/70e0c243ffde30abd8fd353f8c6d1d9a) |
-| `ease-in` | 动画速度由慢到快 | [example](http://dotwe.org/23b104f833039f263957481f2e2c40c9) |
-| `ease-out` | 动画速度由快到慢 | [example](http://dotwe.org/04dab95e073a2c3a808e6b01fc20e996) |
-| `ease-in-out` | 动画先加速到达中间点后减速到达终点 | [example](http://dotwe.org/fc37ec17d215e786ce336a00457489e3) |
-| `cubic-bezier(x1, y1, x2, y2)` | 在三次贝塞尔函数中定义变化过程，函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 [cubic-bezier](http://cubic-bezier.com/) 和 [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve). | [example](http://weex.alibaba-inc.com/playground/95d8f15d0014c31d3a1d15728313f2a5) |
-
-* `options.styles {Object}`：设置不同样式过渡效果的键值对，下表列出了所有合法的参数：
-
-| 参数名 | 描述 | 值类型 | 默认值 | 示例 |
-| ---- | ---- | ---- | ---- |---- |
-| width | 动画执行后应用到组件上的宽度值 | length | 无 | [example](http://dotwe.org/b599d273f996cfdcbeca7bd5c828ca90) |
-| height | 动画执行后应用到组件上的高度值 | length | 无 | [example](http://dotwe.org/d0b1ccadf386ba00960d0c8340c682e5) |
-| backgroundColor | 动画执行后应用到组件上的背景颜色 | string | none | [example](http://dotwe.org/f4616ee18f6042b63a8fdcd2816b1712) |
-| opacity | 动画执行后应用到组件上的不透明度值 | 介于 0 到 1 间的数值 | `1` | [example](http://dotwe.org/f94394173301db83ae6e66d1330a0d0b) |
-| transformOrigin | 定义变化过程的中心点. 参数 `x-aris` 可能的值为 `left`、`center`、`right`、长度值或百分比值, 参数 `y-axis` 可能的值为 `top`、`center`、`bottom`、长度值或百分比值 | `x-axis y-axis` | `center center` | [example](http://dotwe.org/de43f5a47de230dd531797458bf7fd3c) |
-| transform | 定义应用在元素上的变换类型，支持下表列出的属性 | object | 无 | [example](http://dotwe.org/6766dab0589f7831d4bb6030f4226996) |
-
-`transform`属性的合法值:
-
-| 名称 | 描述 | 值类型 | 默认值 | 示例 |
-| ---- | ---- | ---- | ---- | ---- |
-| `translate`/`translateX`/`translateY` | 指定元素将已被移动到的新位置 | 像素值或百分比 | 无 | [example](http://dotwe.org/6638e66e296723bbef3e59c83b2b5003) |
-| `rotate` | 指定元素将被旋转的角度，单位是度 | number | 无 | [example](http://dotwe.org/ba9e9920594d9388744b2bd0d1b7695d) |
-| `scale`/`scaleX`/`scaleY` | 按比例放大或缩小元素 | number | 无 | [example](http://dotwe.org/14b42dde6583ab222bd2b7ed08f241c8) |
-
-* `callback {Function}`：动画执行完毕之后的回调
diff --git a/_drafts/v1.0/references/modules/clipboard.md b/_drafts/v1.0/references/modules/clipboard.md
deleted file mode 100644
index f4525f2..0000000
--- a/_drafts/v1.0/references/modules/clipboard.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: clipboard
-type: references
-order: 4.2
-version: 0.10
----
-
-# `clipboard` 剪切板
-<span class="weex-version">v0.8+</span>
-
-我们可以通过 `clipboard` 模块的 `getString()`、`setString()` 接口从系统的粘贴板获取内容或者设置内容。
-
-以前当我们收到一条短信验证码信息时，除了人肉拷贝，我们无法获取拷贝短信的内容。这是非常苦恼的。但是现在我们可以通过简单的调用 `clipboard.getString()` 接口来获取短信内容了。
-
-## 示例
-
-```html
-<template>
- <div>
- <div class="div">
- <text class="text" onclick="onItemClick">hello {{message}}</text>
- </div>
- <div class="div">
- <text class="text" onclick="setContent">click me to set: {{tobecopied}}</text>
- </div>
- </div>
-</template>
-
-<script>
- var clipboard = require('@weex-module/clipboard');
- module.exports ={
- data:{
- tobecopied:'yay!',
- message:"nothing."
- },
- methods:{
- setContent:function(e){
- clipboard.setString(this.tobecopied);
- },
- onItemClick:function(e){
- this.message='clicked! ';
- clipboard.getString(function(ret) {
- this.message = 'text from clipboard:'+ ret;
- }.bind(this));
- }
- }
- }
-</script>
-
-<style>
- .div {
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- width: 750;
- height: 90;
- padding-left:30;
- padding-right:30;
-
- border-bottom-width: 1;
- border-style: solid;
- border-color: #dddddd;
- }
- .text {
- width: 750;
- height: 90;
- }
-</style>
-```
-
-[体验一下](http://dotwe.org/b6a9d613462d85dce56f81085b094dfa)
-
-**注意**
-
-* 仅支持文本拷贝
-* 出于安全考虑和平台限制，只支持 Android 和 iOS，不支持 html5。
-
-## API
-
-### `getString(callback)`
-
-从系统粘贴板读取内容。
-
-#### 参数
-
-* `callback {function (ret)}`：执行完读取操作后的回调函数。`ret {Object}` 为 `callback` 函数的参数，有两个属性：
- - `ret.data`：获取到的文本内容；
- - `ret.result`：返回状态，可能为 `success` 或 `fail`。
-
-#### 示例
-
-```javascript
-var clipboard = require('@weex-module/clipboard');
-clipboard.getString(function(ret) {
- console.log("text from clipboard： " + ret.data);
-});
-```
-
-### `setString(text)`
-
-将一段文本复制到剪切板，相当于手动复制文本。
-
-#### 参数
-
-* `text {string}`：要复制到剪切板的字符串。
-
-#### 示例
-
-```javascript
-var clipboard = require('@weex-module/clipboard');
-clipboard.setString("SomeStringHere");
-```
diff --git a/_drafts/v1.0/references/modules/dom.md b/_drafts/v1.0/references/modules/dom.md
deleted file mode 100644
index 270ec2b..0000000
--- a/_drafts/v1.0/references/modules/dom.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: dom
-type: references
-order: 4.3
-version: 0.10
----
-
-# dom
-
-包含如下可以更新 dom 树的 dom API。
-
-这部分API是通过把 virtual-dom 的消息发送到 native 渲染器来做到的。
-
-开发者在日常开发中，唯一可在 `.we` 文件中使用的是 `scrollToElement`。
-~~你也可以调用 `$scrollTo` 方法来使用它~~
-
-这个页面提及的其他的 API，只在 `callNative` 进程中的 native 渲染器用。
-（关于 `callNative` 进程的进一步介绍，可以在 [How it works](../../advanced/how-it-works.html)中的 JS Framework 部分看到 ）
-
-## API
-### scrollToElement(node, options)
-
-让页面滚动到那个对应的节点，这个API只能在 `<scroller>` 和 `<list>` 组件中用。
-
-~~这个API也能通过调用VM的方法 `$scrollTo` 来使用（已弃用）~~
-
-要在你的 `.we` 文件中使用这个 API，可以使用 `require('@weex-module/dom').scrollToElement`。
-
-#### 参数
-- `node {Node}`：你要滚动到的那个节点
-- `options {Object}`：如下选项
- - `offset {number}`：一个到其可见位置的偏移距离，默认是 `0`
-
-#### 示例
-
-```html
-<template>
- <scroller>
- <div class="row" repeat="item in rows" id="item-{{$index}}">
- <text class="item-title">row {{item.id}}</text>
- </div>
- <div onclick="go" style="width: 750;height: 50; position: fixed; left: 0; right: 0; bottom: 0; background-color: #eeeeee;">
- <text style="text-align: center;">
- Go to 50th line.
- </text>
- </div>
- </scroller>
-</template>
-
-<script>
-var dom = require('@weex-module/dom')
-
-module.exports = {
- data: {
- rows: []
- },
- created: function () {
- for (var i = 0; i < 100; i++) {
- this.rows.push({
- id: i
- })
- }
- },
- methods: {
- go: function () {
- var el = this.$el('item-49')
-
- dom.scrollToElement(el, {
- offset: 0
- })
- }
- }
-}
-</script>
-```
-
-## 其他
-
-dom 还有一些底层接口用于创建 Weex 实例时调用，比如 `createBody`、`updateAttrs` 等，但并未开放供外部使用。
diff --git a/_drafts/v1.0/references/modules/globalevent.md b/_drafts/v1.0/references/modules/globalevent.md
deleted file mode 100644
index 9a04dc0..0000000
--- a/_drafts/v1.0/references/modules/globalevent.md
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: globalEvent
-type: references
-order: 4.9
-version: 0.10
----
-
-# 全局事件
-<span class="weex-version">0.8 (开发中)</span>
-
-`globalEvent` 用于监听持久性事件，例如定位信息，陀螺仪等的变化。全局事件是需要额外 APIs 处理的次要 API。你能通过 `addEventListener` 注册事件监听，当你不再需要的时候，也可以通过 `removeEventListener` 取消事件监听。
-
-*提醒*
-
-- 这是一个实例级别的事件，而非应用级别。
-
-## 如何让你的模块支持全局事件
-
-API 开发完成后，当需要发送事件时，需要通过以下方法：
-
-```javascript
-/**
- *
- * @param eventName eventName
- * @param params event params
- */
-instance.fireGlobalEventCallback(eventName,params);
-```
-
-如何在 weex-html5 组件或模块中分发全局事件？只需在文档元素上分派事件：
-
-```javascript
-var evt = new Event('some-type')
-evt.data = { foo: 'bar' }
-document.dispatchEvent(evt)
-```
-
-**示例**
-
-### Android
-
-```java
-Map<String,Object> params=new HashMap<>();
-params.put("key","value");
-mWXSDKInstance.fireGlobalEventCallback("geolocation",params);
-```
-
-### iOS
-
-```object-c
-[weexInstance fireGlobalEvent:@"geolocation" params:@{@"key":@"value"}];
-```
-
-## API
-
-### `addEventListener(String eventName, String callback)`
-
-注册全局事件。
-
-#### 参数
-
-- `eventName {string}`：需要监听的事件名称。
-- `callback {Function}`：触发事件后的回调函数。
-
-#### 示例
-
-```javascript
-var globalEvent = require('@weex-module/globalEvent');
-globalEvent.addEventListener("geolocation", function (e) {
- console.log("get geolocation")
-});
-```
-
-### `removeEventListener(String eventName)`
-
-取消事件监听。
-
-#### 参数
-
-- `eventName {string}`：需要取消的事件名称。
-
-#### 示例
-
-```javascript
-var globalEvent = require('@weex-module/globalEvent');
-globalEvent.removeEventListener("geolocation");
-```
diff --git a/_drafts/v1.0/references/modules/index.md b/_drafts/v1.0/references/modules/index.md
deleted file mode 100644
index c76e401..0000000
--- a/_drafts/v1.0/references/modules/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: 内建模块
-type: references
-order: 4
-has_chapter_content: true
-version: 0.10
----
-
-# 内建模块
-
-## 如何使用
-
-你可以简单的通过类似 `require('@weex-module/name')` 这样的语法获取一个模块的 API，比如：
-
-```javascript
-var dom = require('@weex-module/dom')
-dom.scrollToElement(this.$el('someIdForElement'), {
- offset: 0
-})
-```
diff --git a/_drafts/v1.0/references/modules/modal.md b/_drafts/v1.0/references/modules/modal.md
deleted file mode 100644
index 3e652a8..0000000
--- a/_drafts/v1.0/references/modules/modal.md
+++ /dev/null
@@ -1,196 +0,0 @@
----
-title: modal
-type: references
-order: 4.4
-version: 0.10
----
-
-# `modal` 模态
-
-`modal` 模块提供了以下展示消息框的 API：`toast`、`alert`、`confirm` 和 `prompt`。
-
-## API
-
-### `toast(options)`
-
-`toast()` 会在一个小浮层里展示关于某个操作的简单反馈。例如，在邮件发送前离开邮编编辑界面，可以触发一个“草稿已保存”的 toast，告知用户以后可以继续编辑。toast 会在显示一段时间之后自动消失。
-
-#### 参数
-
-- `options {Object}`：相关选项
- - `message {string}`：展示的内容
- - `duration {number}`：展示的持续时间（以秒为单位）
-
-#### 示例
-
-```html
-<template>
- <div style="height: 200px; width: 400px; background-color: #00bfff;
- justify-content: center; align-items: center" onclick="{{perform}}">
- <text style="font-size: 60px; color: #ffffff">Toast</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- methods: {
- perform: function () {
- var modal = require('@weex-module/modal');
- modal.toast({
- 'message': 'I am a toast',
- 'duration': 3
- });
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/a1b8699c49d1cbb3d0de66c1c5175387)
-
-### `alert(options, callback)`
-
-警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。
-
-#### 参数
-
-- `options {Object}`：alert选项
- - `message {string}`：警告框内显示的文字信息
- - `okTitle {string}`：确定按钮上显示的文字信息，默认是“OK”
- - `callback {Function}`：用户操作完成后的回调
-
-#### 示例
-
-```html
-<template>
- <div>
- <div style="height: 200px; width: 400px; background-color: #00bfff;
- justify-content: center; align-items: center" onclick="{{perform}}">
- <text style="font-size: 60px; color: #ffffff">Alert</text>
- </div>
- <text>{{params}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- params: ''
- },
- methods: {
- perform: function () {
- var modal = require('@weex-module/modal');
- var self = this;
- modal.alert({
- 'message': 'I am alert message',
- 'okTitle': 'YES'
- }, function (result) {
- self.params = String(result)
- });
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/18e2a4bdff4d2f7db865c11eadfcd13e)
-
-### `confirm(options, callback)`
-
-确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
-
-#### 参数
-
-- `options {object}`：confirm 选项
- - `message {string}`：确认框内显示的文字信息
- - `okTitle {string}`：确认按钮上显示的文字信息，默认是 `OK`
- - `cancelTitle {string}`：取消按钮上显示的文字信息，默认是 `Cancel`
-- `callback {function (result)}`：用户操作完成后的回调，回调函数的参数 `result` 是确定按钮上的文字信息字符串
-
-#### 示例
-
-```html
-<template>
- <div>
- <div style="height: 200px; width: 400px; background-color: #00bfff;
- justify-content: center; align-items: center" onclick="{{perform}}">
- <text style="font-size: 60px; color: #ffffff">Confirm</text>
- </div>
- <text>{{params}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- params: ''
- },
- methods: {
- perform: function () {
- var modal = require('@weex-module/modal');
- var self = this;
- modal.confirm({
- 'message': 'I have read and accept the terms.',
- 'okTitle': 'YES',
- 'cancelTitle': 'NO'
- }, function (e) {
- self.params = String(e)
- });
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/3534b9d5eac99045015d97b20af22c27)
-
-### `prompt(options, callback)`
-
-提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操作。
-
-#### 参数
-
-- `options {object}`：prompt 选项
- - `message {string}`：提示框内要显示的文字信息
- - `okTitle {string}`：确认按钮上显示的文字信息，默认是 `OK`
- - `cancelTitle {string}`：取消按钮上显示的文字信息，默认是 `Cancel`
-- `callback {function (ret)}`：用户操作完成后的回调，回调函数的参数 `ret` 格式形如 `{ result: 'OK', data: 'hello world' }`，如下
- - `result {string}`：用户按下的按钮上的文字信息
- - `data {string}`：用户输入的文字信息
-
-### 示例
-
-```html
-<template>
- <div>
- <div style="height: 200px; width: 400px; background-color: #00bfff;
- justify-content: center; align-items: center" onclick="{{perform}}">
- <text style="font-size: 60px; color: #ffffff">Prompt</text>
- </div>
- <text>{{params}}</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- params: ''
- },
- methods: {
- perform: function () {
- var modal = require('@weex-module/modal');
- var self = this;
- modal.prompt({
- 'message': 'I am a prompt',
- 'okTitle': 'YES',
- 'cancelTitle': 'NO'
- }, function (e) {
- self.params = JSON.stringify(e)
- });
- }
- }
- }
-</script>
-```
-
-[体验一下](http://dotwe.org/9f089100f5808dbc55ef4872a2c0c77b)
diff --git a/_drafts/v1.0/references/modules/navigator.md b/_drafts/v1.0/references/modules/navigator.md
deleted file mode 100644
index fdd4e76..0000000
--- a/_drafts/v1.0/references/modules/navigator.md
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: navigator
-type: references
-order: 4.5
-version: 0.10
----
-
-# `navigator` 导航控制
-<span class="weex-version">v0.6.1+</span>
-
-众所周知，在浏览器里，我们可以通过前进或者回退按钮来切换页面，iOS/Android 的 `navigator` 模块就是用来实现类似的效果的。除了前进、回退功能，该模块还允许我们指定在切换页面的时候是否应用动画效果。
-
-## 示例
-
-```html
-<template>
- <div class="div">
- <text class="text" onclick="onItemClick">click me! {{message}}</text>
- </div>
-</template>
-
-<script>
- var navigator = require('@weex-module/navigator')
- var nextUrl = 'http://dotwe.org/raw/dist/6cd1703a45d7b2752cf05303069ce881.js'
- module.exports ={
- data:{
- message:''
- },
- methods:{
- onItemClick:function(e){
- var params = {'url':nextUrl,'animated':'true'}
- navigator.push(params, function(e) {
- console.log('i am the callback.')
- });
- }
- }
- }
-</script>
-<style>
- .div {
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- width: 750;
- height: 90;
- padding-left:30;
- padding-right:30;
-
- border-bottom-width: 1;
- border-style: solid;
- border-color: #dddddd;
- }
- .text{
- width: 750;
- height: 90;
- }
-</style>
-```
-
-[体验一下](http://dotwe.org/dba03a1660e6242778fd19d3d8f5944b)
-
-## API
-
-### `push(options, callback)`
-
-把一个weex页面URL压入导航堆栈中，可指定在页面跳转时是否需要动画，以及操作完成后需要执行的回调函数
-
-#### 参数
-
-* `options {Object}`：选项参数
- * `url {stirng}`：要压入的 Weex 页面的 URL
- * `animated {string}`：`"true"` 示意为页面压入时需要动画效果，`"false"` 则不需要，默认值为 `"true"`
-* `callback {Function}`：执行完该操作后的回调函数
-
-#### 示例
-
-```javascript
-var navigator = require('@weex-module/navigator')
-var params = {
- url: 'navigator-demo.js',
- animated: 'true'
-}
-navigator.push(params, function () {
- // callback
-})
-```
-
-### `pop(options, callback)`
-
-把一个 Weex 页面 URL 弹出导航堆栈中，可指定在页面弹出时是否需要动画，以及操作完成后需要执行的回调函数。
-
-#### 参数
-
-* `options {object}`：选项参数对象
- * `animated {string}`：`"true"` 示意为弹出页面时需要动画效果，`"false"` 则不需要，默认值为 `"true"`
-* `callback {function}`：执行完该操作后的回调函数
-
-#### 示例
-
-```javascript
-var navigator = require('@weex-module/navigator')
-var params = {
- animated: 'true'
-}
-navigator.pop(params, function () {
- // callback
-})
-```
-
-*注意事项：`animated` 二级参数目前仅支持字符串的 `"true"` 和 `"false"`，传入布尔值类型会导致程序崩溃，未来版本会修复这个问题*
diff --git a/_drafts/v1.0/references/modules/storage.md b/_drafts/v1.0/references/modules/storage.md
deleted file mode 100644
index c18b9ae..0000000
--- a/_drafts/v1.0/references/modules/storage.md
+++ /dev/null
@@ -1,224 +0,0 @@
----
-title: storage
-type: references
-order: 4.6
-version: 0.10
----
-
-# `storage` 本地存储
-<span class="weex-version">v0.7+</span>
-
-**备注**：0.7及以上版本可用
-
-`storage` 是一个在前端比较常用的模块，可以对本地数据进行存储、修改、删除，并且该数据是永久保存的，除非手动清除或者代码清除。但是，`storage` 模块有一个限制就是浏览器端（H5）只能存储小于5M的数据，因为在 H5/Web 端的实现是采用 `HTML5 LocalStorage API`。而 Android 和 iOS 这块是没什么限制的。
- storage 常用在一些被用户经常查询，但是又不频繁更新的数据，比如搜索历史、用户的订单列表等。搜索历史一般情况都是作为本地数据存储的，因此使用 storage 比较合适。而用户订单列表是需要本地存储和服务端器检索配合的场景。当一个用户下单后，会经常查阅个人的订单列表。但是，订单的列表数据不是频繁更新的，往往只有在收到货品时，才更新“已签收”，其余平时的状态是“已发货”。因此，可以使用 storage 存储订单列表，可以减少服务器的压力，例如减少 SQL 查询或者缓存的压力。当用户查看订单详情的时候，再更新数据状态。
-
-这里，我们简单模拟“搜索”记录的场景。在搜索的时候写入，然后读取出来展示成列表。
-
-```html
-<template>
- <div style="background-color:#F6F6F6;">
- <div class="search_view">
- <input class="search" placeholder="Please input" onchange="change"/>
- <text class="btn" onclick="search">Search</text>
- </div>
- <text class="item">History</text>
- <list>
- <cell repeat="(i, v) in items">
- <text class="item">{{v}}</text>
- </cell>
- </list>
- </div>
-</template>
-
-<style>
- .search_view{
- height:70;
- margin-top:20;
- margin-left:10;
- margin-right:10;
- flex-direction:row;
- }
- .search{
- height:70;
- border-width:1;
- border-color:#dddddd;
- padding-left:10;
- font-size:28;
- flex:1;
- }
- .btn{
- width:80;
- text-align:center;
- justify-content:center;
- font-size:28;
- background-color:#1A89EA;
- color:#ffffff;
- }
- .item{
- text-align:center;
- font-size:25;
- height:50;
- margin-top:10;
- color:#5E5E5E;
- border-bottom-width:1;
- border-bottom-color:#dddddd;
- justify-content:center;
- }
-</style>
-
-<script>
- var storage = require('@weex-module/storage');
- module.exports = {
- data: {
- items: [],
- keywords:''
- },
- created: function(){
- var that = this;
- storage.getAllKeys(function(e) {
- if(e.result == 'success' && e.data.length){
- e.data.forEach(function(item){
- if(item.indexOf('search_') > -1){
- that.items.push(item.split('search_')[1]);
- }
- });
- }
- });
- },
- methods:{
- search: function(){
- var that = this;
- if(!this.keywords) return;
- storage.setItem('search_' + this.keywords, this.keywords, function(e) {
- that.items.push(that.keywords);
- });
- },
- change: function(e){
- if(!e.value) return;
- this.keywords = e.value;
- }
- }
- };
-</script>
-```
-
-[体验一下](http://dotwe.org/b0f9a8f5df916c91bfb39e54e03a9ba8)
-
-这里，逐一解释下上面的代码。`input` 组件监听了 `change` 事件，可以保存用户输入的搜索关键字。如果用户点击了搜索按钮，则将关键字存储到 storage。这里，使用了 `search_` 作为 storage key 的前缀。因此，我们在页面加载时，在 `created` 生命周期中可以先使用 `storage.getAllKeys` 获取所有的 `key`。如果 `key` 包含了 `search_ `，则说明是搜索记录。因此，将该记录压入数组 items 中，于是界面就会展示出搜索记录的列表。
-
-## API
-
-`storage` 提供了一系列的 API 供我们调用。我们只需要引入该模块，然后调用对应的 API 即可。
-
-### `setItem(key, value, callback)`
-
-该方法可以通过键值对的形式将数据存储到本地。同时可以通过该方法，更新已有的数据。
-
-#### 参数
-
-* `key {string}`：要存储的键，不允许是 `""` 或 `null`
-* `value {string}`：要存储的值，不允许是 `""` 或 `null`
-* `callback {function (e)}`：执行操作成功后的回调
- * `e.result`：表示设置是否成功，如果成功返回 `"success"`
- * `e.data`：`undefined` 表示设置成功，`invalid_param` 表示 key/value 为 `""` 或者 `null`
-
-#### 示例
-
-```javascript
-var storage = require('@weex-module/storage')
-storage.setItem('bar', 'bar-value', function (e) {
- e.result
- e.data
-})
-```
-
-这里，对返回值做一个简单的介绍：
-
-`e` 包含两个属性：`e.result` 和 `e.data`。如果 `e.result` 返回值是 “success”，则说明成功。`e.data` 返回 `undefined` 表示设置成功，返回 `invalid_param` 表示` key/value` 为 "" 或者 null。因此，你可以判断两个返回判断是否插入成功。
-
-### `getItem(key, callback)`
-
-传入键名返回对应的键值
-
-#### 参数
-
-* `key {string}`：要获取的值的名称，不允许是 `""` 或 `null`
-* `callback {function (e)}`：执行操作成功后的回调
- * `e.result`：表示设置是否成功，如果成功返回 `"success"`
- * `e.data`：获取对应的键值字符串，如果没有找到则返回 `undefined`
-
-#### 示例
-
-```javascript
-var storage = require('@weex-module/storage')
-storage.getItem('foo', function (e) {
- e.data
-});
-```
-
-### `removeItem(key, callback)`
-
-传入一个键名将会删除本地存储中对应的键值
-
-#### 参数
-
-* `key {string}`：要删除的值的名称，不允许是 `""` 或 `null`
-* `callback {function (e)}`：执行操作成功后的回调.
- * `e.result`：表示删除是否成功，如果成功返回 `"success"`
- * `e.data`：`undefined` 表示删除成功
-
-#### 示例
-
-```javascript
-var storage = require('@weex-module/storage')
-storage.removeItem('foo', function (e) {
- e.result
- e.data
-})
-```
-
-### `length(callback)`
-
-返回本地存储的数据中所有存储项数量的整数
-
-#### 参数
-
-* `callback {function (e)}`：执行操作成功后的回调
- * `e.result`：表示设置是否成功，如果成功返回 `"success"`
- * `e.data`：当前已存储项的数量
-
-#### 示例
-
-````javascript
-var storage = require('@weex-module/storage')
-storage.length(function (e) {
- e.result
- e.data
-})
-````
-
-### `getAllKeys(callback)`
-
-返回一个包含全部已存储项键名的数组
-
-#### 参数
-
-* `callback {function (e)}`：执行操作成功后的回调。
- * `e.result`：表示设置是否成功，如果成功返回 `"success"`
- * `e.data`：所有键名组成的数组
-
-#### 示例
-
-````javascript
-var storage = require('@weex-module/storage')
-storage.getAllKeys(function (e) {
- e.result
- e.data
-})
-````
-
-## 其它参考
-
-* [W3school: html5 localStorage](http://www.w3school.com.cn/html5/html_5_webstorage.asp)
-* [storage 模块完整的 Demo](https://github.com/apache/incubator-weex/blob/dev/examples/module/storage-demo.we)
diff --git a/_drafts/v1.0/references/modules/stream.md b/_drafts/v1.0/references/modules/stream.md
deleted file mode 100644
index 6c1b893..0000000
--- a/_drafts/v1.0/references/modules/stream.md
+++ /dev/null
@@ -1,220 +0,0 @@
----
-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
diff --git a/_drafts/v1.0/references/modules/webview.md b/_drafts/v1.0/references/modules/webview.md
deleted file mode 100644
index b6f3cbe..0000000
--- a/_drafts/v1.0/references/modules/webview.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-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 将不再需要*
diff --git a/_drafts/v1.0/references/replace.md b/_drafts/v1.0/references/replace.md
deleted file mode 100644
index 5ace251..0000000
--- a/_drafts/v1.0/references/replace.md
+++ /dev/null
@@ -1,57 +0,0 @@
-# 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.
diff --git a/_drafts/v1.0/references/special-element.md b/_drafts/v1.0/references/special-element.md
deleted file mode 100644
index e01a2c7..0000000
--- a/_drafts/v1.0/references/special-element.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-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)
diff --git a/_drafts/v1.0/references/specs/index.md b/_drafts/v1.0/references/specs/index.md
deleted file mode 100644
index 164e61b..0000000
--- a/_drafts/v1.0/references/specs/index.md
+++ /dev/null
@@ -1,309 +0,0 @@
----
-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
diff --git a/_drafts/v1.0/references/specs/js-framework-apis.md b/_drafts/v1.0/references/specs/js-framework-apis.md
deleted file mode 100644
index d24dd3b..0000000
--- a/_drafts/v1.0/references/specs/js-framework-apis.md
+++ /dev/null
@@ -1,190 +0,0 @@
----
-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.
diff --git a/_drafts/v1.0/references/specs/virtual-dom-apis.md b/_drafts/v1.0/references/specs/virtual-dom-apis.md
deleted file mode 100644
index 9291497..0000000
--- a/_drafts/v1.0/references/specs/virtual-dom-apis.md
+++ /dev/null
@@ -1,148 +0,0 @@
----
-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`
diff --git a/_drafts/v1.0/references/text-style.md b/_drafts/v1.0/references/text-style.md
deleted file mode 100644
index 85f67c8..0000000
--- a/_drafts/v1.0/references/text-style.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-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)。
diff --git a/_drafts/v1.0/references/units.md b/_drafts/v1.0/references/units.md
deleted file mode 100644
index 2ff3482..0000000
--- a/_drafts/v1.0/references/units.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-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 暂不支持。
diff --git a/_drafts/v1.0/references/wxc/index.md b/_drafts/v1.0/references/wxc/index.md
deleted file mode 100644
index 5969ce2..0000000
--- a/_drafts/v1.0/references/wxc/index.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-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
diff --git a/_drafts/v1.0/references/wxc/wxc-navpage.md b/_drafts/v1.0/references/wxc/wxc-navpage.md
deleted file mode 100644
index 6b15175..0000000
--- a/_drafts/v1.0/references/wxc/wxc-navpage.md
+++ /dev/null
@@ -1,192 +0,0 @@
----
-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>
-```
diff --git a/_drafts/v1.0/references/wxc/wxc-tabbar.md b/_drafts/v1.0/references/wxc/wxc-tabbar.md
deleted file mode 100644
index 492c1cd..0000000
--- a/_drafts/v1.0/references/wxc/wxc-tabbar.md
+++ /dev/null
@@ -1,176 +0,0 @@
----
-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>
-```
diff --git a/_drafts/v1.0/tools/devtools-android.md b/_drafts/v1.0/tools/devtools-android.md
deleted file mode 100644
index 9ce8991..0000000
--- a/_drafts/v1.0/tools/devtools-android.md
+++ /dev/null
@@ -1,123 +0,0 @@
----
-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.
diff --git a/_drafts/v1.0/tools/devtools-ios.md b/_drafts/v1.0/tools/devtools-ios.md
deleted file mode 100644
index 801b80d..0000000
--- a/_drafts/v1.0/tools/devtools-ios.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-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
diff --git a/_drafts/v1.0/tools/devtools.md b/_drafts/v1.0/tools/devtools.md
deleted file mode 100644
index ab7ddb3..0000000
--- a/_drafts/v1.0/tools/devtools.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-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), 其中有详细说明。
diff --git a/_drafts/v1.0/tools/index.md b/_drafts/v1.0/tools/index.md
deleted file mode 100644
index 06c424a..0000000
--- a/_drafts/v1.0/tools/index.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-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)
diff --git a/_drafts/v1.0/tools/playground.md b/_drafts/v1.0/tools/playground.md
deleted file mode 100644
index dc7bbec..0000000
--- a/_drafts/v1.0/tools/playground.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-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)。
diff --git a/_drafts/v1.0/tools/transformer.md b/_drafts/v1.0/tools/transformer.md
deleted file mode 100644
index 47a7b4c..0000000
--- a/_drafts/v1.0/tools/transformer.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-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
diff --git a/_drafts/web-dev-experience.en.md b/_drafts/web-dev-experience.en.md
deleted file mode 100644
index 81d0ff2..0000000
--- a/_drafts/web-dev-experience.en.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-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)
diff --git a/_drafts/web-dev-experience.md b/_drafts/web-dev-experience.md
deleted file mode 100644
index cb7ff24..0000000
--- a/_drafts/web-dev-experience.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-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)
diff --git a/_drafts/web-standards.en.md b/_drafts/web-standards.en.md
deleted file mode 100644
index 906ff76..0000000
--- a/_drafts/web-standards.en.md
+++ /dev/null
@@ -1,584 +0,0 @@
----
-title: Web standards
-type: references
-order: 8
-version: 2.1
-has_chapter_content: true
----
-
-# Web standards
-
-## 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
diff --git a/_drafts/web-standards.md b/_drafts/web-standards.md
deleted file mode 100644
index 3125796..0000000
--- a/_drafts/web-standards.md
+++ /dev/null
@@ -1,585 +0,0 @@
----
-title: Web 标准
-type: references
-group: API
-order: 2.7
-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) |
diff --git a/_drafts/weex-dom-api.md b/_drafts/weex-dom-api.md
deleted file mode 100644
index f18efa0..0000000
--- a/_drafts/weex-dom-api.md
+++ /dev/null
@@ -1,224 +0,0 @@
----
-title: Native DOM APIs
-type: references
-group: API
-order: 2.8
-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 -->`。
diff --git a/_drafts/write-once.en.md b/_drafts/write-once.en.md
deleted file mode 100644
index 673b302..0000000
--- a/_drafts/write-once.en.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Write once, Run Everywhere
-type: guide
-order: 4.4
-version: 2.1
----
-
-# Write Once, Run Everywhere
-
-Weex is a "Write Once, Run Everywhere" solution.
-
-* First, Weex is based on web dev experience, which includes syntax and project management.
-* Second, all components & modules in Weex are discussed by iOS, Android, web developers together to ensure it's common enough to satisfy every platforms.
-* You only need write the same Weex code for each platforms.
-
-We think about it in these aspects below:
-
-1. Today for almost all mobile apps, one app solves the same problem in different platforms. Weex hope to supply a lightweight way to describe your business logic which works well in all platforms you need.
-2. For the differences of all mobile platforms, we are willing to fill the gap in 3 points:
- 1. Design the same APIs for all platforms to ensure different platforms have the same business logic description.
- 2. Implement the APIs with different style or behaviors to ensure the implementation and user experience matches different platforms.
- 3. Platforms obviously differ among each other. We also have some environment variables to help developers in certain situations.
-3. We trust (web) standard is the best for all features in all platforms.
diff --git a/_drafts/write-once.md b/_drafts/write-once.md
deleted file mode 100644
index 6c0c62d..0000000
--- a/_drafts/write-once.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: 一次撰写，多端运行
-type: wiki
-order: 1.4
-version: 2.1
----
-
-# 一次撰写，多端运行
-
-Weex 提供了多端一致的技术方案。
-
-* 首先 web 开发体验在各端当中是相同的。包括语法设计和工程链路。
-* 其次，Weex 的组件、模块设计都是 iOS、Android、Web 的开发者共同讨论出来的，有一定的通用性和普遍性。
-* Weex 开发同一份代码，可以在不同的端上分别执行，避免了多端的重复研发成本。
-
-我们这样设计基于以下几点设想：
-
-1. 今天绝大多数的移动应用，虽然要同时出现在不同的移动操作系统平台上，但是要解决的问题和用户的需求是相同或非常接近的。Weex 希望提供的是一个快速直接统一描述业务的通用方式，为业务和产品需求直接服务。
-2. 针对各大操作系统平台差异的现状，我们倾向于通过以下两方面来解决这一问题
- 1. 把不同端的样式和行为设计并描述成为相同的 API，这样上层的业务逻辑是同一份，但是在不同端上可以做到不一样的展现效果。
- 2. 通过横向扩展的方式在不同的端上扩展不一样的功能、特性或表现形式。
- 3. 各端不一致的业务描述也是难免的，我们通过提供更多更丰富的环境变量来帮助开发者在同一套代码里高效适配不同的设备场景。
-3. 我们相信标准和规范的力量
-
-部分功能特性由于 native 特性的关系，会略有不同，我们会在相应的组件、模块、API 文档中做相应的描述和提示。
diff --git a/scaffolds/draft.md b/scaffolds/draft.md
deleted file mode 100644
index 498e95b..0000000
--- a/scaffolds/draft.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: {{ title }}
-tags:
----
diff --git a/scaffolds/page.md b/scaffolds/page.md
deleted file mode 100644
index f01ba3c..0000000
--- a/scaffolds/page.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: {{ title }}
-date: {{ date }}
----
diff --git a/scaffolds/post.md b/scaffolds/post.md
deleted file mode 100644
index 1f9b9a4..0000000
--- a/scaffolds/post.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: {{ title }}
-date: {{ date }}
-tags:
----
diff --git a/source/_data/users.yml b/source/_data/users.yml
deleted file mode 100644
index 8701863..0000000
--- a/source/_data/users.yml
+++ /dev/null
@@ -1,215 +0,0 @@
-taobao:
- name: '手机淘宝'
- icon: 'https://img.alicdn.com/tfs/TB1jH9bX3mTBuNjy1XbXXaMrVXa-270-271.png'
- iOS: 'https://itunes.apple.com/cn/app/id387682726?mt=8'
- android: 'https://play.google.com/store/apps/details?id=com.taobao.taobao&hl=zh_CN'
-tmall:
- name: '手机天猫'
- icon: 'https://img.alicdn.com/tfs/TB16oCjX4GYBuNjy0FnXXX5lpXa-300-300.png'
- iOS: 'https://itunes.apple.com/cn/app/id518966501?mt=8'
- android: 'https://play.google.com/store/apps/details?id=com.tmall.wireless&hl=zh_CN'
-youku:
- name: '优酷'
- icon: 'https://img.alicdn.com/tfs/TB1CjajX1uSBuNjy1XcXXcYjFXa-740-737.png'
- iOS: 'https://itunes.apple.com/us/app/%E4%BC%98%E9%85%B7%E8%A7%86%E9%A2%91/id336141475'
- android: 'https://play.google.com/store/apps/details?id=com.youku.phone'
-zhaopin:
- name: '智联'
- icon: 'https://raw.githubusercontent.com/zhilianzhaopin/zhilianzhaopin.github.io/master/img/icon1024.png'
- iOS: 'https://itunes.apple.com/us/app/%E6%99%BA%E8%81%94%E6%8B%9B%E8%81%98%E7%BD%91-%E6%89%BE%E5%B7%A5%E4%BD%9C%E6%B1%82%E8%81%8C%E4%BA%BA%E6%89%8D%E6%8B%9B%E8%81%98%E8%BD%AF%E4%BB%B6/id488033535?l=zh&ls=1&mt=8'
- android: 'https://m.zhaopin.com/DownLoad/downapp.html'
-xianyu:
- name: '闲鱼'
- icon: 'https://img.alicdn.com/tfs/TB13I8cnC_I8KJjy0FoXXaFnVXa-150-150.jpg'
- iOS: 'https://itunes.apple.com/cn/app/id510909506?mt=8'
- android: 'https://play.google.com/store/apps/details?id=com.taobao.idlefish'
-fliggy:
- name: '飞猪'
- icon: 'https://img.alicdn.com/tfs/TB194hfnsrI8KJjy0FhXXbfnpXa-200-200.png'
- iOS: 'https://itunes.apple.com/cn/app/id453691481?mt=8'
- android: 'https://play.google.com/store/apps/details?id=com.taobao.trip&hl=zh_CN'
-uc:
- name: 'UC浏览器'
- icon: 'https://img.alicdn.com/tfs/TB17epRnv6H8KJjy0FjXXaXepXa-200-200.png'
- iOS: 'https://itunes.apple.com/cn/app/id586871187'
- android: 'https://play.google.com/store/apps/details?id=com.UCMobile.intl'
-cainiao:
- name: '菜鸟裹裹'
- icon: 'https://img.alicdn.com/tfs/TB1JMw3XMmTBuNjy1XbXXaMrVXa-512-512.jpg'
- iOS: 'https://itunes.apple.com/us/app/%E8%8F%9C%E9%B8%9F%E8%A3%B9%E8%A3%B9-%E6%98%A5%E8%8A%82%E4%B8%8D%E6%89%93%E7%83%8A-%E5%BF%AB%E9%80%92%E9%9A%8F%E6%97%B6%E6%9F%A5%E5%AF%84%E5%8F%96/id951610982'
- android: 'https://www.guoguo-app.com/mobileApp.htm'
-cainiaobgx:
- name: '裹裹包裹侠'
- icon: 'https://img.alicdn.com/tfs/TB1dvEjdrGYBuNjy0FoXXciBFXa-1024-1024.png'
- iOS: 'https://itunes.apple.com/cn/app/id1097678299?mt=8'
- android: 'http://www.wandoujia.com/apps/com.cainiao.cs'
-qianniu:
- name: '千牛'
- icon: 'https://img.alicdn.com/tfs/TB19dd_nv6H8KJjSspmXXb2WXXa-200-200.png'
- iOS: 'https://itunes.apple.com/cn/app/id590217303?mt=8'
- android: 'https://play.google.com/store/apps/details?id=com.taobao.qianniu'
-aliyun:
- name: '阿里云'
- icon: 'https://gw.alicdn.com/tfs/TB1DSqRX_tYBeNjy1XdXXXXyVXa-1024-1024.png'
- iOS: 'https://itunes.apple.com/cn/app/%E9%98%BF%E9%87%8C%E4%BA%91/id981011420'
- android: 'https://promotion.aliyun.com/ntms/mobile.html'
-alibaba:
- name: '阿里巴巴'
- icon: 'https://img.alicdn.com/tfs/TB1WJc9XKuSBuNjy1XcXXcYjFXa-80-80.jpg'
- iOS: 'https://itunes.apple.com/us/app/alibaba-com-b2b-trade-app/id503451073'
- android: 'https://play.google.com/store/apps/details?id=com.alibaba.intl.android.apps.poseidon'
-taopiaopiao:
- name: '淘票票专业版'
- icon: 'https://gw.alicdn.com/tfs/TB1qB1RX_tYBeNjy1XdXXXXyVXa-512-512.png'
- iOS: 'https://itunes.apple.com/cn/app/id1211116737?mt=8'
- android: 'https://piaofang.taopiaopiao.com/pro/download/pc/index.html'
-hema:
- name: '盒马'
- icon: 'https://gw.alicdn.com/tfs/TB1dq38XQyWBuNjy0FpXXassXXa-144-144.png'
- iOS: 'https://itunes.apple.com/us/app/%E7%9B%92%E9%A9%AC/id1063183999'
- android: 'https://www.freshhema.com/'
-eleme:
- name: '饿了么'
- icon: 'https://img.alicdn.com/tfs/TB12BM5XFOWBuNjy0FiXXXFxVXa-225-225.jpg'
- iOS: 'https://itunes.apple.com/cn/app/%E9%A5%BF%E4%BA%86%E4%B9%88-%E5%A4%96%E5%8D%96%E8%AE%A2%E9%A4%90-%E7%BE%8E%E9%A3%9F30%E5%88%86%E9%92%9F%E5%88%B0%E5%AE%B6/id507161324'
- android: 'https://play.google.com/store/apps/details?id=me.ele'
-lazada:
- name: 'Lazada'
- icon: 'https://gw.alicdn.com/tfs/TB15Zg.XGmWBuNjy1XaXXXCbXXa-225-225.png'
- iOS: 'https://itunes.apple.com/us/app/lazada-1-online-shopping/id785385147'
- android: 'https://play.google.com/store/apps/details?id=com.lazada.android'
-paytmmall:
- name: 'Paytm Mall'
- icon: 'https://img.alicdn.com/tfs/TB1poU.XL5TBuNjSspmXXaDRVXa-225-225.png'
- iOS: 'https://itunes.apple.com/au/app/paytm-mall-online-shopping/id1157845438'
- android: 'https://play.google.com/store/apps/details?id=com.paytmmall'
-qierdianjing:
- name: '企鹅电竞'
- icon: 'https://img.alicdn.com/tfs/TB1jbs5XFOWBuNjy0FiXXXFxVXa-114-114.png'
- iOS: 'https://itunes.apple.com/cn/app/qi-e-dian-jing/id1111160472'
- android: 'https://egame.qq.com/download'
-kaola:
- name: '网易考拉海购'
- icon: 'https://haitao.nos.netease.com/5c5f27c5-71f1-4f73-978d-e1f244bb4128.jpg'
- iOS: 'https://app.kaola.com/'
- android: 'https://app.kaola.com/'
-fenqile:
- name: '分期乐'
- icon: 'http://cimg1.fenqile.com/ibanner2/M00/00/8E/jqgHAFpgQnWAV3iwAABPXZNzjzM459.png'
- iOS: 'http://itunes.apple.com/app/id906611031'
- android: 'http://mall.m.fenqile.com/app/download/fenqile/app/official/fenqile.apk'
-weidian:
- name: '微店买家版'
- icon: 'https://si.geilicdn.com/hz_img_02480000016107fb8e120a02685e_216_216_unadjust.png'
- iOS: 'https://h5.weidian.com/m/weidian-buyer/down-buyer/index.html'
- android: 'https://h5.weidian.com/m/weidian-buyer/down-buyer/index.html'
-daren:
- name: '达人店'
- icon: 'http://cdn1.showjoy.com/images/c5/c5847462b5d942bab077fe932219f4df.png'
- iOS: 'https://itunes.apple.com/cn/app/id1123389168?mt=8'
- android: 'http://sj.qq.com/myapp/detail.htm?apkName=com.showjoy.shop'
-dianwoda:
- name: '点我达骑手'
- icon: 'http://prodwbbucket.oss-cn-hangzhou.aliyuncs.com/weex/rider/icon/dwdriderandroid.png'
- iOS: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.dwd.rider'
- android: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.dwd.rider'
-geektime:
- name: '极客时间'
- icon: 'http://res001.geekbang.org/static/time/logo/logo-for-weex.png'
- iOS: 'https://itunes.apple.com/cn/app/id1280245865'
- android: 'http://a.app.qq.com/o/simple.jsp?pkgname=org.geekbang.geekTime'
-kyur:
- name: '开语'
- icon: 'https://img.alicdn.com/tfs/TB1V.z1X_tYBeNjy1XdXXXXyVXa-1024-1024.png'
- iOS: 'https://itunes.apple.com/cn/app/%E5%BC%80%E8%AF%AD-%E6%99%BA%E8%83%BD%E8%AF%AD%E9%9F%B3%E5%8A%A9%E6%89%8B/id1281878843'
- android: ''
-youzan:
- name: '有赞零售'
- icon: 'https://img.yzcdn.cn/public_files/2018/02/13/2e34b39ef45295e47919d34dc84b4cb5.png'
- iOS: 'https://itunes.apple.com/cn/app/%E6%9C%89%E8%B5%9E%E9%9B%B6%E5%94%AE/id1248696859?mt=8'
- android: 'https://a.app.qq.com/o/simple.jsp?pkgname=com.youzan.retail'
-qiang100:
- name: '百强排行'
- icon: 'https://www.qiang100.com/public/images/appicon-v2/512-512.png'
- iOS: 'https://itunes.apple.com/cn/app/id1206796488?mt=8'
- android: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.qiang100.app'
-sinazc:
- name: '新浪众测'
- icon: 'http://n.sinaimg.cn/tech/zcapp/zhongce_3x.png'
- iOS: 'https://itunes.apple.com/cn/app/id1309407290?mt=8'
- android: 'http://zhongce.sina.cn/about/app?vt=4'
-heimao:
- name: '黑猫投诉'
- icon: 'http://n.sinaimg.cn/tech/hmapp/icon_512.png'
- iOS: 'https://itunes.apple.com/cn/app/id1429402895?mt=8'
- android: 'http://tousu.sina.cn/about_app/index?vt=4'
-bandou:
- name: '班豆'
- icon: 'https://app.bandou.cn/download/app/bandou.png'
- iOS: 'https://app.bandou.cn/download/app_download.html'
- android: 'https://app.bandou.cn/download/app_download.html'
-cschool:
- name: '超级云校'
- icon: 'https://app.cschool.cc/download/imgs/512.png'
- iOS: 'https://app.cschool.cc/download/download.html'
- android: 'https://app.cschool.cc/download/download.html'
-flya:
- name: '飞呀'
- icon: 'https://is3-ssl.mzstatic.com/image/thumb/Purple128/v4/2a/0f/69/2a0f69df-c1a4-0358-559c-1c9b52e417ae/AppIcon-1x_U007emarketing-sRGB-85-220-4.png/230x0w.jpg'
- iOS: 'https://itunes.apple.com/cn/app/id1301943383?mt=8'
- android: 'http://app.hicloud.com/app/C100145677'
-lieyou:
- name: '猎游'
- icon: 'https://res28-lieyou.weplay.cn/aipai_platform/vue/lieyou/common/assets/img/logo512.png'
- iOS: 'https://itunes.apple.com/cn/app/id1331853626?mt=8'
- android: 'http://www.lieyou.com/'
-igola:
- name: 'iGola骑鹅旅行'
- icon: 'https://is1-ssl.mzstatic.com/image/thumb/Purple128/v4/fe/c9/05/fec90578-f81f-cb8f-2010-5c94b0966fd5/AppIcon-1x_U007emarketing-85-220-4.png/460x0w.jpg'
- iOS: 'https://itunes.apple.com/cn/app/igola%E9%AA%91%E9%B9%85%E6%97%85%E8%A1%8C-%E7%89%B9%E4%BB%B7%E6%9C%BA%E7%A5%A8%E9%85%92%E5%BA%97%E6%AF%94%E4%BB%B7%E5%B9%B3%E5%8F%B0/id1048837629?mt=8'
- android: 'http://android.myapp.com/myapp/detail.htm?apkName=com.igola.travel'
-yimutian:
- name: '一亩田'
- icon: 'http://img.yimutian.com/misc/5aeaeefb5c265556f201b35a01f771e2.png'
- iOS: 'https://itunes.apple.com/cn/app/fei-li/id882549448?mt=8'
- android: 'http://www.ymt.com'
-dentalink:
- name: '牙医管家'
- icon: 'http://jfximage.oss-cn-qingdao.aliyuncs.com/app_icon.png'
- iOS: 'https://itunes.apple.com/cn/app/ya-yi-guan-jia/id904824378?l=zh&ls=1&mt=8'
- android: 'http://soft.dental360.cn/soft/app'
-renrendai:
- name: '人人贷借款'
- icon: 'https://loan.renrendai.com/static/public/asset/images/logo-raduis.png'
- iOS: 'https://itunes.apple.com/cn/app/id1149186410?mt=8'
- android: 'https://loan.renrendai.com/'
-hbfintech:
- name: '乐和金融'
- icon: 'https://is5-ssl.mzstatic.com/image/thumb/Purple118/v4/d3/f3/d7/d3f3d7de-b8e0-ee59-9ae5-570862d44afb/AppIcon-1x_U007emarketing-85-220-1.png/690x0w.jpg'
- iOS: 'https://itunes.apple.com/cn/app/%E4%B9%90%E5%92%8C%E9%87%91%E8%9E%8D/id1269462821'
- android: 'https://www.hbfintech.com'
-kaishiba:
- name: '开始吧'
- icon: 'http://images.kaishiba.com/pc_download_logo.png'
- iOS: 'https://itunes.apple.com/cn/app/%E5%BC%80%E5%A7%8B%E5%90%A72017/id1142943932?mt=8'
- android: 'https://www.kaishiba.com/special/sys/down'
-dakacard:
- name: '达卡'
- icon: 'http://cdn1.showjoy.com/images/16/167ed4b6ba7d4d56a7e29cf7df3b839d.png'
- iOS: 'https://itunes.apple.com/cn/app/id1406461453?mt=8'
- android: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.showjoy.card'
-youzan_kdt:
- name: '有赞微商城'
- icon: 'https://img.yzcdn.cn/public_files/2018/09/20/da60472b1c0bdc0b1ee1fc4f0380fa41.png'
- iOS: 'https://itunes.apple.com/cn/app/%E6%9C%89%E8%B5%9E%E5%BE%AE%E5%95%86%E5%9F%8E-%E6%89%8B%E6%9C%BA%E5%BF%AB%E9%80%9F%E5%BC%80%E5%BE%AE%E5%BA%97/id880579403?mt=8'
- android: 'https://a.app.qq.com/o/simple.jsp?pkgname=com.qima.kdt'
-diibee:
- name: 'diibee'
- icon: 'http://diibee-images.oss-cn-shanghai.aliyuncs.com/www/icon/1024.png'
- iOS: 'https://itunes.apple.com/CN/app/id1367106723?mt=8'
- android: 'http://app.mi.com/details?id=com.retechcorp.diibee&ref=search'
-huinong:
- name: '惠农网'
- icon: 'http://image.cnhnb.com/image/jpeg/head/2018/12/19/517545b3826f4cbbaee926e4ce8e16f3.jpeg'
- iOS: 'https://itunes.apple.com/cn/app/shou-ji-hui-nong-wang/id1024434395?mt=8'
- android: 'http://www.cnhnb.com/app/download/'
diff --git a/source/_posts/arkit.md b/source/_posts/arkit.md
deleted file mode 100644
index 5da0e92..0000000
--- a/source/_posts/arkit.md
+++ /dev/null
@@ -1,112 +0,0 @@
-title: Weex ❤️ iOS 11 系列之二：ARKit初探
-type: blog
-date: 2017-06-27 14:32:10
-
----
-
-## ARKit
-苹果在wwdc 2017公布了第一款具有AR功能的操作系统iOS11，并提供了AR的SDK，ARKit，同时宣称苹果是世界上最大的AR平台，Weex也积极拥抱AR，让Weex用户也可以方便开发AR功能
-
-AR体验就是创建和追踪用户所在的现实世界和可建立模型的空间的对应关系的能力，让用户感觉产生虚拟内容在现实世界的错觉，这就是所谓的增强现实。ARKit通过识别图像场景中的显著特征，追踪这些特征的差异位置，最后与传感器数据比较，得到设备位置和运动状态的高精度模型
-
-## 原理
-ARkit 在ARSCNView，ARSession,ARFrame的基础上实现
-
-### ARSCNView和ARSession
-
-ARKit提供了两种增强现实的视图，他们分别是ARSCNView(3D)和ARSKView(2D),这两种视图都采用ARCamera作为视图背景的，而ARSCNView等视图和相机没有直接关系，他们是通过ARSession这个桥梁和camera交互的，运行一个session，需要指定会话追踪配置的对象：ARSessionConfiguration，ARSessionConfiguration负责追踪相机在3D世界中的位置和平面探测
-
-### ARWorldTrackingSessionConfiguration与ARFrame
-
-ARWorldTrackingSessionConfiguration通过一系列的复杂计算和调用传感器来跟踪设备的方向和位置，当ARWorldTrackingSessionConfiguration计算出位置，会交给ARSession管理,ARSession就会维护一个相机的位置ARFame，用户可以通过这个frame将4x4矩阵世界坐标转换为3D系统相机坐标
-
-## weex-ar
-ARKit在wwdc上带来的震撼效果，我通过weex插件的方式将ARKit能力透传到Weex，让用户在weex上也第一时间体验到Native的AR效果
-所有的demo以及源码我已经开源，同步到[github](https://github.com/kfeagle/weex-ar)，用户在自己工程依赖即可使用
-
-### 在现实世界渲染一个3D的虚拟物体
-```
-this.$refs['scene'].addNode({
- name:'color',
- width:0.1,
- height:0.1,
- length:0.1,
- chamferRadius:0,
- vector:{
- x:0.1,
- y:0.1,
- z:-0.5
- },
- contents:{
- type:'color',
- name:'red'
- }
- });
-```
-Weex在compnonent中增加addNode方法，用户可以设置好节点的参数，然后就会构建一个虚拟物体
-- 效果
- - 
-
-### 交互支持
-当native触发了点击事件，会向jsfm发送点击位置信息
-
-```
--(void)tapped:(UITapGestureRecognizer *)recognizer
-{
- SCNView *sceneView = (SCNView *)recognizer.view ;
- CGPoint touchLocation = [recognizer locationInView:sceneView];
- [self fireEvent:@"tap" params:@{@"touchLocation":@{@"x":@(touchLocation.x),@"y":@(touchLocation.y)}}];
-}
-```
-当VUE接收到相关信息，会处理位置信息，然后更新节点
-```
-tap:function (event) {
- this.index = this.index+1;
- if(this.index>3){
- this.index = 0;
- }
- var color = 'red';
- if(this.index == 1){
- color = 'blue';
- }
- if(this.index == 2){
- color = 'green';
- }
- if(this.index == 3){
- color = 'yellow';
- }
- this.$refs['scene'].updateNode({
- name:'color',
- x:event.touchLocation.x,
- y:event.touchLocation.y,
- color:color
- })
- }
-```
-- 效果
- - 
-
-### 碰撞游戏
-设置节点的mask，通过arkit的代理就可以检测碰撞了
-```
-node.physicsBody.categoryBitMask= [self getMask:[WXConvert NSInteger:[options objectForKey:@"categoryBitMask"]]];
- node.physicsBody.contactTestBitMask= [self getMask:[WXConvert NSInteger:[options objectForKey:@"contactTestBitMask"]]];
-```
-当碰撞发生时候，会通过physicsWorld:(SCNPhysicsWorld *)world didBeginContact:(SCNPhysicsContact *)contact代理获取到节点的信息，weex将相关信息发送到jsfm
-vue获取先关节点可以删除节点，增减节点，从而完成碰撞的处理
-```
-contact:function (event) {
- if(event.nodes.nodeA.mask == 0 || event.nodes.nodeB.mask == 0 ){
-
- this.isAdd = false;
- this.$refs['scene'].removeNode(event.nodes.nodeA.name);
- this.$refs['scene'].removeNode(event.nodes.nodeB.name);
-
- }
-
- }
-```
-
-- 效果
-
- - 
\ No newline at end of file
diff --git a/source/_posts/coreml.md b/source/_posts/coreml.md
deleted file mode 100644
index c628fb3..0000000
--- a/source/_posts/coreml.md
+++ /dev/null
@@ -1,79 +0,0 @@
-title: Weex ❤️ iOS 11 系列之一：Core ML 初探
-type: blog
-date: 2017-06-21 15:46:44
-
----
-
-## 背景
-
-WWDC 2017 有一个非常明确的信号：**端上机器学习将会是未来苹果的一个重要发力点，同时开发者的使用门槛在不断降低**。
-
-Core ML 是今年 WWDC 上苹果发布的机器学习框架。它允许开发者在自己开发的 app 上使用机器学习，同时不需要收集用户数据。 有了 Core ML，你可以将自己训练得到的模型，借助苹果提供的转换工具，转化成 Core ML 类型的模型文件，你可以非常轻松地直接实现模型和 app 数据的互通。
-
-WWDC 上展示了一张简单的架构图：
-
-
-
-最底层的 Accelerate 和 MPS，其实是苹果去年推出的接口，前者可以直接调用 CPU，后者则直接调用 GPU。 Core ML 会自行决定到底使用 CPU 还是 GPU 来进行运算，可以最大程度地利用硬件资源来处理模型数据。
-
-而 Core ML 往上一层则是应用层。Vision 主要负责图像相关的人工智能处理，如人脸识别、面部追踪、文字识别等等；NLP 则提供语义分析相关 API。这部分内容在以前版本的 SDK 中也存在，这次被集成到了新框架当中。好处在于，开发者拥有了更大的自由度。在以前，开发者的 app 调用这些高级接口，对底层的实现细节的掌控力度非常小。现在，你可以通过自定义底层所使用的机器学习模型，从而实现更个性化的需求。
-
-## Weex-ML
-
-Weex 交互视觉能力小结中提到，**Weex 最大的特别之处在于其 native 的能力， 我们要最大化利用 native 的特性， 而不是去模仿它**。
-
-作为本次 iOS 11 的一个重要 native 能力，我也第一时间尝试将 Core ML 透传到了 Weex 上。所有代码和 Demo 都已开源到 [Github](https://github.com/cxfeng1/Weex-ML)，后续也会将机器学习相关的Weex 模块统一放到 Weex Market 上。
-
-得益于 Core ML API 的简洁，在 Weex 上使用 Core ML 相关能力变得非常简单:
-
-```javascript
-let imageRecognition = weex.requireModule('imageRecognition')
-imageRecognition.predictWithImage(this.$refs.image.ref, (results)=>{
- this.results = results.slice(0,5);
-})
-```
-
-通过调用透传的 module `imageRecognition` , 并传入 image 组件的 ref 作为参数，就可以实现图片识别的功能，最后提取出识别结果中 confidence 最高的 5 个结果。
-
-## Demo
-
-### imageRecognition
-
-
-
-使用 [Inceptionv3](https://github.com/fchollet/keras/blob/0bb4e0fad5b4bb3743c8a7d03c260b62a35e7045/keras/applications/inception_v3.py) 作为模型，能够高效识别， 该模型已经在 [keras](https://github.com/fchollet/keras) 中被训练好并通过苹果提供的工具转换成 **mlmodel** 文件， 只需拖拽的方式就可以集成到 iOS 开发环境中， 上述 demo 输出了对一张图片分类最大可能的5个预测结果， 对于 Weex 来说，几行代码就能搞定。
-
-
-
-### digitDetect
-
-
-
-上述 demo 首先使用 [weex-gcanvas](http://market.dotwe.org/ext/list.htm#6) 插件做了一个简单的绘制板，然后使用 MNIST model 完成了对手写数字的识别。
-
-### faceDetect
-
-
-
-这个 demo 没有加载任何 model，使用了 iOS 11 内置的 Vision Framework，顾名思义，Vision 可以让开发者运行计算机视觉相关的任务，它相当于 Core ML 的 High-Level Solution， 它可以做很多事情:
-
-- 脸部识别，会返回一个矩形数组来表示每一个脸部
-- 脸部更精细识别，比如眼睛和鼻子的具体位置、头部的形状等，上述 demo 就是拿到这些信息以后使用 gcanvas 绘制出了面部精细轮廓
-- 图片中的矩形探测
-- 图片中的文字探测
-- 二维码/条形码探测
-- 视频中跟踪移动的物体
-
-## 总结
-
-这次 Core ML 的推出，同时得益于苹果对软硬件的全面掌控，使得从系统级到第三方开发者，都具备了在端上就可以进行机器学习模型处理的能力。所有代码和 Demo 都已上传到 [Github](https://github.com/cxfeng1/Weex-ML)，欢迎贡献和交流。
-
-当然在实际研究过程中，也发现了 Core ML 的一些限制：
-
-- 无法在端上进行模型的训练，所有模型必须提前训练好再转换成 Core ML 的格式
-- 无法动态下载和更新模型，对于需要经常重新训练的模型不太友好
-- 目前看只支持监督学习的模型，不支持非监督学习。
-
-Weex 未来在提供更多功能透传的同时，也会继续探索更深层次的结合。
-
-最后，本文是 Weex 和 iOS 11 结合系列的第一篇文章，后续将会有更多有意思的iOS 11 feature (如 ARKit、 drag & drop 等) 和大家一起探讨。
\ No newline at end of file
diff --git a/source/bug-report-guidelines.md b/source/bug-report-guidelines.md
deleted file mode 100644
index 67cc683..0000000
--- a/source/bug-report-guidelines.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: Bug Report Guidelines
-type: community
-has_chapter_content: false
-version: 2.1
----
-
-# Bug Report Guidelines
-
-This document describes how to write a good Weex bug report. Good bug reports help developers to classify the priority and severity of a bug properly, which helps the bug get fixed as soon as possible. The more specific information you provide, the better your bug gets understood.
-
-## Bug Report General Principles
-
-- Avoid duplicates: Search before you file a new one!
-- Always test the latest available version before submitting a bug.
-- One bug per report.
-- State useful facts, not opinions or complaints.
-
-## How to Write a Good Bug Report
-
-A good bug report should include the following information:
-
-### Title
-
-The goal of title is to make the report searchable and uniquely identifiable.
-
-A bad example: `List Crash`
-
-A good Example: `List Crashes when deleting a header`
-
-### Environment
-
-**Weex Version**: Please identify the version of WeexSDK or Weex Playground or weex-toolkit you were using when the bug occurred
-
-**Device environment**: Please identify the device model, platform and OS version. e.g. , iPhone 6, iOS 10.3.
-
-### Overview/Description
-
-The overview or description of a bug report is to explain the bug in detail, including:
-
-- Justifications of why this is a bug
-- [dotwe](http://dotwe.org/vue/) demo that can reproduce the bug
-- Screenshots for visual bugs
-- Stack traces for crash bugs
-- Console logs or error messages which are relevant in the bug
-
-### Steps to Reproduce
-
-The aim to provide the reproducible steps is to enable developers to reproduce the bug in their own environment. Here's an example:
-
-*Step 1: Load the demo using Weex Playground*
-
-*Step 2: Scroll to the bottom of the list*
-
-*Step 3: Click the red button to delete a header*
-
-### Test Results
-
-The test results, including *Expected Result* and *Actual Result*, will tell developers what's wrong. *Expected Result* describes what should happen, and *Actual Result* describes what actually happens.
-
-## Reference
-
-This document is a modified version of [1].
-
- [1] http://testthewebforward.org/docs/bugs.html
-
diff --git a/source/cn/blog.md b/source/cn/blog.md
deleted file mode 100644
index ef7b31d..0000000
--- a/source/cn/blog.md
+++ /dev/null
@@ -1,4 +0,0 @@
-type: blog
-index: true
-layout: blog
----
\ No newline at end of file
diff --git a/source/cn/bug-report-guidelines.md b/source/cn/bug-report-guidelines.md
deleted file mode 100644
index 6aac3f5..0000000
--- a/source/cn/bug-report-guidelines.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Bug 报告指南
-type: community
-has_chapter_content: false
-version: 2.1
-
----
-
-# Bug 报告指南
-
-该文档描述了如何编写一个好的 Weex bug 报告。好的 bug 报告帮助开发者决定一个 bug 的优先级和严重性，并且增加了 bug 被快速修复的可能性，你能提供的具体信息越多越好。
-
-## Bug 报告原则
-
-- 避免重复:在报 bug 前先搜索!
-- 总是测试最新的可用版本。
-- 每个报告只报一个 bug。
-- 陈述有用的事实，而不是意见或抱怨。
-
-## 如何编写一个好的 Bug 报告
-
-一个好的 bug 报告应该包括以下信息:
-
-### 标题
-
-标题的目标是使 bug 能够被搜索并且唯一可识别。
-
-一个坏的例子:`List Crash`
-
-一个很好的例子:`List Crashes when deleting a header`
-
-### 环境
-
-**Weex 版本**: 请告知你在 bug 发生时使用的 WeexSDK 、Weex Playground 或 weex-toolkit 的版本
-
-**设备环境**: 请告知你 bug 所发生的机型、平台和 OS 版本，例如：iPhone 6,iOS 10.3。
-
-### 概述/描述
-
-bug 报告的概述或描述是向开发者详细解释 bug，包括：
-
-- 为什么这是一个 bug
-- 可以重现 bug 的 [dotwe](http://dotwe.org/vue/) 链接
-- 在视觉上可感知的 bug， 可以提供截屏
-- 对于 crash bug， 可以提供详细的堆栈
-
-### 复现步骤
-
-复现步骤的目标是帮助开发者在他自己的系统上重现 bug ，例如：
-
-步骤1：使用 Weex playgroud 扫码打开上面提供的 dotwe 链接
-
-步骤2：滚动到列表底部
-
-步骤3：点击红色按钮删除头部组件
-
-### 测试结果
-
-测试结果，包括预期结果和实际结果，预期结果描述了应该发生的事情，实际结果描述了实际发生的事情，从而表明这是个 bug 。
\ No newline at end of file
diff --git a/source/cn/contributing.md b/source/cn/contributing.md
deleted file mode 100644
index 1e88b52..0000000
--- a/source/cn/contributing.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 如何参与贡献
-type: community
-has_chapter_content: false
-version: 2.1
----
-
-# 如何参与贡献
-
-Apache Weex 是一个活跃的开源项目，我们一直致力于简化贡献 Weex 生态的流程。开源社区的贡献方式包括但不限于可以报 bug，回答开源社区、邮件组中的问题, 参与讨论新 feature 的方案，纠正或者更改文档， 同时我们也很欢迎直接贡献代码来完善和丰富 Weex。
-
-## 报 Bug
-
-直接通过[快速上手](../guide/index.html)教程开始使用 Weex，如果在使用过程中遇到任何问题和不符合预期的现象，都可以通过写一个 bug 报告来反馈。
-
-##### 查找已知问题
-目前我们使用 [JIRA](https://issues.apache.org/jira/projects/WEEX) 来跟踪所有的 issue 和 feature，只要对已知问题有修复或者有新 feature 计划的时候，都会更新对应的 issue 或者 feature 状态。 在填写 issue 或者 feature 时候，可以翻阅下是否已经有对应的 issue 或者 feature 已经在跟踪中。
-
-##### 报告新 issue
-
-打开 [JIRA Issue](https://issues.apache.org/jira/projects/WEEX) ，点击最上方红色的 "Create" 按钮（如果还没有注册 JIRA 账号则需要[先注册一下](https://issues.apache.org/jira/secure/Signup!default.jspa)）， [Bug 报告指南](../bug-report-guidelines.html) 文档提供了一些关于 Bug 报告中最有用的信息的细节提示。你的 Bug 报告写得越好，我们就能越快地重现和修复它！
-
-## 贡献代码
- Weex 是一个开源的 Apache 社区项目，不管是核心团队或者外部开源社区的贡献者提交的 pull request 都需要通过同样的社区 code review 流程。 贡献代码可以通过修复已知的 bug 或者 开发新 feature，建议在贡献代码之前创建 JIRA issue(如果是修复 JIRA 中已经记录的 issue，可以直接使用该JIRA issue 的 ID)，我们写了一份关于[研发流程的文档](../development-process.html)，在开始之前可以先阅读一下。
-
-## 提问或者回答问题
-
-对于使用上的问题，建议你在 [stackoverflow.com](http://stackoverflow.com/) 平台上提问， 记得用 **weex** 标签标记它们。
-
-你也可以查看所有的 [Weex相关问题](http://stackoverflow.com/questions/tagged/weex)，如果可以的话，尽可能帮助回答一些问题，这些问题常常是新手需要了解的基本概念和常见问题， 这也将帮助你更好地熟悉和使用 Weex 。
-
-## 参与邮件组讨论
-
-在 Weex 社区，大多数讨论都发生在邮件列表上。
-
-dev 邮件组 "dev@weex.incubator.apache.org" 是 Weex 开发人员交流和讨论新功能、新发布、开发流程的地方。
-
-贡献者和开发者都应该订阅这个邮件组，以便了解到 Weex 项目所发生的事情以及表达自己的观点。 [(订阅)](mailto:dev-subscribe@weex.incubator.apache.org?subject=%28send%20this%20email%20to%20subscribe%29) [(退订)](mailto:dev-unsubscribe@weex.incubator.apache.org?subject=%28send%20this%20email%20to%20unsubscribe%29) [(档案)](http://mail-archives.apache.org/mod_mbox/incubator-weex-dev/)
-
-## 帮助提升文档质量
-
-质量好的文档对开发者是极大的帮助。如果有一个功能强大的 API 但不易于使用，它就会变得毫无用处。所以， 我们欢迎任何贡献以帮助 Weex 的文档变得精确和易于阅读。
-
-想要对文档进行更改，可以在 [weex-site 仓库](https://github.com/apache/incubator-weex-site)编辑对应的 Markdown 文件并创建一个 [Pull Request](https://help.github.com/articles/using-pull-requests/).
-
-## 如何成为 Committer
-
-Apache committer 是社区的核心成员，他们可以访问项目的仓库，也可以自己修改代码、文档和网站，也可以接受其他开发者的贡献。
-
-我们正在招募 committer，我们所寻找的是积极参与到社区贡献同时对 Weex 有持续兴趣的同学。如果你有兴趣成为一名 Weex committer，可以联系现有的 committer 或者直接联系 dev 邮件组，欢迎你的加入！
-
-
-## License
-
- 默认你对 Weex 的贡献是基于 Apache License 2.0。
\ No newline at end of file
diff --git a/source/cn/development-process.md b/source/cn/development-process.md
deleted file mode 100644
index 27b4e2f..0000000
--- a/source/cn/development-process.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: 开发流程
-type: community
-has_chapter_content: false
-version: 2.1
----
-
-# 开发流程
-
-本文档描述了如何对 Weex 源代码进行更改和提交，以下是建议的步骤：
-
-## 1. 选择或创建一个 JIRA issue单
-
-目前 Weex 使用 [JIRA Issue](https://issues.apache.org/jira/projects/WEEX) 来跟踪所有类型的代码更改，而不仅仅是 bug 修复，我们使用 Github Pull Request 来管理代码 review 和合并特定的代码更改。也就是说，JIRA用于描述什么是需要修复或更改的，Pull Request 用于描述这些修复和变更如何实现。
-
-在创建新问题之前一定要先搜索问题，避免重复。如果你的更改可能需要和其他开发者进行讨论，你可以在 [weex-dev](mailto:dev@weex.incubator.apache.org) 邮件列表中创建一个讨论。
-
-**每个 PR 都应该对应于 JIRA 中的一个 issue。**
-
-## 2. 编写代码
-
-1. [Fork](https://help.github.com/articles/fork-a-repo/) 在 https://github.com/apache/incubator-weex 上的 Github 仓库
-
-2. Clone 你 fork 出来的仓库，创建一个新的分支用于提交变更
-
-3. 编写需要开发的特性或 bug 修复代码，确保你的更改符合[代码风格指南](../development-process.html#code-style-guidelines)。
-
-4. 复制并粘贴下面的注释到你的新文件顶部:
-
- ```javascript
- /*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
- ```
-
-5. 修改或添加该变更相关de的文档和测试。
-
-6. 提交符合 [commit 指南](../development-process.html#commit-guidelines) 的 commit 到你的分支。
-
-## 3. 创建一个 Pull Request
-
-[创建一个 pull request](https://help.github.com/articles/using-pull-requests/) 并提交到 `apache/incubator-weex` 的 `master` 分支，确保它符合这些准则:
-
-1. 一个 Pull Request 只解决一个问题
-2. PR标题应该是 `[WEEX-xxxx][模块]标题`，其中 `xxxx` 是相关的 JIRA 问题号，模块是 PR 的类别（android、iOS、jsfm、web、component、doc、website、test、other），标题可以是 JIRA 的标题，也可以是描述 PR 本身的更具体的标题。
-3. 如果该 PR 相关的工作还在进行中，还没有准备好被合并，但需要被推到 Github 上以方便查看，可以在模块后添加 `[WIP]` 标示。
-
-## 代码风格指南
-
-### Objective-C
-
-- 用 tab 缩进而不是空格
-
-
-- `*` 操作符靠近变量名（如 Type *variable）
-- 方法定义：大括号需要另起一行
-- 其他大括号：开括号紧跟在代码后面，不另起一行，闭括号单独占一行
-- 使用 `#pragma marks` 标记将方法分类
-- 遵循 [GitHub Objective-C Style Guide](https://github.com/github/objective-c-style-guide) 中其他的代码风格指南
-
-### Java & Android
-
-- 使用 [Google Java Style](https://google.github.io/styleguide/javaguide.html) 作为基本的 Java 代码风格指南
-- 其他 android 相关代码需遵循 [AOSP Code Style](https://source.android.com/source/code-style.html)
-
-## Commit 指南
-
-使用下面的形式来写 commit 描述:
-
-```markdown
-Summary of change, same as PR title: `[WEEX-xxxx][COMPONENT] Summary`
-
-Longer description of change addressing as appropriate: why the change
-is made,context if it is part of many changes, description of previous
-behavior andnewly introduced differences, etc.
-
-Long lines should be wrapped to 80 columns for easier log message
-viewing interminals.
-
-Bug: 123456
-```
-
-一个简短的主题紧跟一个空行再接着写 commit 的详细描述，Bug 这里使用的是来自 JIRA 的问题号。
-
-在[这里](https://chris.beams.io/posts/git-commit/)可以找到一些关于如何编写 commit message 的好方法。
\ No newline at end of file
diff --git a/source/cn/download.ejs b/source/cn/download.ejs
deleted file mode 100644
index ef2c86f..0000000
--- a/source/cn/download.ejs
+++ /dev/null
@@ -1,3 +0,0 @@
-layout: download
-type: download
----
\ No newline at end of file
diff --git a/source/cn/examples.ejs b/source/cn/examples.ejs
deleted file mode 100644
index e64c436..0000000
--- a/source/cn/examples.ejs
+++ /dev/null
@@ -1,3 +0,0 @@
-layout: examples
-type: examples
----
diff --git a/source/cn/guide/.gitkeep b/source/cn/guide/.gitkeep
deleted file mode 100644
index e69de29..0000000
--- a/source/cn/guide/.gitkeep
+++ /dev/null
diff --git a/source/cn/guide/advanced/app-architecture.md b/source/cn/guide/advanced/app-architecture.md
deleted file mode 100644
index 2ce678c..0000000
--- a/source/cn/guide/advanced/app-architecture.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: 构建完整移动应用
-type: guide
-group: 高阶特性
-order: 8.5
-version: 2.1
----
-
-<!-- toc -->
-
-## 今天的移动应用
-
-这里谈一谈 Weex 对移动应用的理解。
-
-### 移动应用需要支撑并行研发
-
-如今移动应用的开发需要并行研发的能力，当一个移动应用发展到一定规模的时候，能否支撑大规模的并行研发就成为了一件非常关键而又重要的事情。否则很容易变成工程瓶颈。
-
-### 移动应用需要动态性
-
-如今移动应用不论从研发节奏、部署的灵活性和时效性、包大小、还是从研发到发布再到反馈的迭代周期上，都和移动互联网的发展速度极不相符。移动应用需要更简单轻量的研发模型，需要摆脱版本部署和分发的笨重过程。
-
-### 移动应用需要开放互联
-
-如今移动应用的内容和信息都是相互孤立的，应用之间的交流变得非常复杂和困难，也缺乏一定的标准和规范化的容器来承载。
-
-## 整体结构设计
-
-我们认为一个具有高并行研发能力、动态化和标准化规范化的移动应用应该由以下几个方面构成：
-
-```
-|------|------|------|------| |-----|
-| page | page | page | page | | api |
-|------|------|------|------| | api |
-| page | page | page | page | | api |
-|------|------|------|------| | api |
-| page | page | page | page | | api |
-|---------------------------| | api |
-| router | | api |
-|---------------------------| |-----|
-```
-
-* 页面：首先移动应用应该可以被拆解成若干个页面，每个页面相对解耦独立，同时每个页面都有一个 URL 进行唯一标识。
-* 路由：这些页面将会通过路由机制有机的串联起来，页面之间的关系是通过路由来进行调度的。常见的移动应用路由包括导航栏、tab 切换等。
-* 设备能力：以各种 API 或服务的方式提供出来，供页面自由使用。
-
-这样的话，在构建一个完整的移动应用之前，先确定你的应用有多少页面，每个页面分别是什么 URL，页面之间的关联和跳转逻辑是怎样的，然后梳理整个移动应用需要的所有 API 和服务。
-
-然后通过 Weex 创建不同的页面，并分别进行开发、调试和发布。
-
-**相关链接**
-
-* [页面结构](./page-architecture.html)
-
-如果你已经有一个做好的移动应用，只想用 Weex 开发其中的一部分页面甚至仅仅其中的一两个页面，这对 Weex 来说完全不是问题。Weex 只是一个 SDK，对整体的移动应用架构不会产生任何侵入性。并且完全可以和纯 native 界面或 hybrid 页面共存。
-
-如果需要 WeexSDK 额外的组件、模块或其它功能，可以通过 Weex 的扩展机制进行扩展。这部分工作需要 native 的研发知识，但是随着 Weex 组件和模块的丰富以及业务迭代的深入，这部分成本会呈下降和收敛的趋势。
-
-**相关链接**
-
-* [如何扩展 iOS](../extend-ios.html)
-* [如何扩展 Android](../extend-android.html)
-* [如何扩展 HTML5](../extend-web-render.html)
-* [如何扩展前端框架](../extend-js-framework.html)
diff --git a/source/cn/guide/advanced/downgrade.md b/source/cn/guide/advanced/downgrade.md
deleted file mode 100644
index afbbb34..0000000
--- a/source/cn/guide/advanced/downgrade.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: 降级方案
-type: guide
-group: 高阶特性
-order: 8.2
-version: 2.1
----
-
-<!-- toc -->
-
-Weex 2.0 降级方案改成模块的形式支持，具体请参考[downgrade](https://www.npmjs.com/package/@weex-project/downgrade)
-
diff --git a/source/cn/guide/advanced/page-architecture.md b/source/cn/guide/advanced/page-architecture.md
deleted file mode 100644
index ad94ef0..0000000
--- a/source/cn/guide/advanced/page-architecture.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: Weex 页面结构
-type: guide
-group: 高阶特性
-order: 8.6
-version: 2.2
----
-
-<!-- toc -->
-
-对于一个 Weex 页面来说，在移动设备上它就是一个相对独立解耦的移动应用界面，它不仅包括了界面展示，也包含了应用逻辑、设备能力、生命周期管理等部分。
-
-## 界面
-
-### DOM 模型
-
-Weex 页面通过类似 HTML DOM 的方式管理界面。首先，Weex 会在 JavaScript 执行环境中将界面模板解析为 Virtual DOM 树表示，每个 DOM 节点都代表了一个相对独立的 native 视图的单元；再将该 Virtual DOM 映射到移动设备上，生成用于表示移动设备界面的 Native DOM 树，最后再使用移动控件将之渲染为真正的界面。
-
-关于 Virtual DOM 和 Native DOM，可以通过`weex debugger`中的`Element Mode`选项查看。
-
-### 组件
-
-Weex 支持文字、图片、视频等内容型组件，也支持 div、list、scroller 等容器型组件，还包括 slider、input、textarea、switch 等多种特殊的组件。Weex 的界面就是由这些组件以 DOM 树的方式构建出来的。
-
-组件分为**内置组件**和**扩展组件**两类，内置组件随Weex SDK提供，提供构建界面的基础能力；如果觉得不够用或者满足不了特定使用需要，Weex也支持开发者自己创建扩展组件，并通过Weex提供的注册接口将组件集成到应用中使用。
-
-**相关链接**
-
-* [Weex 组件列表](../../references/components/index.html)
-
-### 布局系统
-
-Weex 页面中的组件会按照一定的布局规范来进行排布，我们这里提供了 CSS 中的盒模型、flexbox 和 绝对/相对/固定/吸附布局这三大块布局模型。
-
-* 盒模型：通过宽、高、边框、内外边距、边框等 CSS 属性描述一个组件本身的尺寸。
-* flexbox：通过 CSS 3 Flexbox 布局规范定义和描述组件之间的空间分布情况。
-* position：支持 CSS position 属性中的 `absolute`, `relative`, `fixed`, `sticky` 位置类型，其中 `relative` 是默认值。
-
-## 功能
-
-Weex 提供了非常丰富的系统功能 API，包括弹出存储、网络、导航、弹对话框和 toast 等，开发者可以在 Weex 页面通过获取一个 native module 的方式引入并调用这些客户端功能 API。
-
-开发者也可以通过Weex提供的 Module 扩展能力，注册自定义的 API 使用。
-
-**相关链接**
-
-* [Weex 模块列表](../../references/modules/index.html)
-
-## 生命周期
-
-每个 Weex 页面都有其自身的生命周期，页面从开始被创建到最后被销毁，会经历到整个过程。这是通过对 Weex 页面的创建和销毁，在路由中通过 SDK 自行定义并实现的。
-
-由于 Weex 内置 Vue，对于 Vue 实例的生命周期回调 Weex 提供原生支持，具体可参照 Vue 生命周期相关文档。
diff --git a/source/cn/guide/advanced/path.md b/source/cn/guide/advanced/path.md
deleted file mode 100644
index 1c50cf7..0000000
--- a/source/cn/guide/advanced/path.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: 资源路径
-type: guide
-group: 高阶特性
-order: 8.1
-version: 2.1
-has_chapter_content: true
----
-
-<!-- toc -->
-
-<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 将相对于 bundle url 解析。
-
-这意味着， 一个以 `/` 开头的路径将是相对于 JS Bundle 文件的根文件夹。`.` 则是当前文件夹，`..` 是父文件夹。 `//` 则被解析为与 JS Bundle 相同的 scheme。
-
-## URI Adapter
-
-以上所有是默认实现，开发者可以通过提供一个 `URI Adapter` 来扩展或覆盖默认实现。与其他 Adapter 相同，应在 Weex SDK 初始化之前设置自定义 Adapter。
diff --git a/source/cn/guide/advanced/use-vuex-and-vue-router.md b/source/cn/guide/advanced/use-vuex-and-vue-router.md
deleted file mode 100644
index f76a0b0..0000000
--- a/source/cn/guide/advanced/use-vuex-and-vue-router.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: 使用 Vuex 和 vue-router
-type: guide
-group: 高阶特性
-order: 8.4
-version: 2.1
----
-
-<!-- toc -->
-
-Vue.js 也有较多周边技术产品，如 [Vuex](https://github.com/vuejs/vuex) 和 [vue-router](https://github.com/vuejs/vue-router) 等，这些库也可以在 Weex 中很好的工作。
-
-> **注意**： Weex 使用原生的 navigator 来管理页面实例，多个实例之间的状态是隔离的。也就是说，Vuex 和 vue-router 只能作用于当前一个页面，无法在多个页面间共享状态。
-
-## 使用 Vuex
-
-
-
-Vuex 是一个专为 Vue.js 应用程序开发的状态管理工具库，可以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
-
-由于在 Vuex 本身就是平台无关的，有较强的移植能力，完全可以在 Weex 中正常地使用 Vuex。 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>
-```
diff --git a/source/cn/guide/extend-android.md b/source/cn/guide/extend-android.md
deleted file mode 100644
index ec4d8bb..0000000
--- a/source/cn/guide/extend-android.md
+++ /dev/null
@@ -1,268 +0,0 @@
----
-title: 扩展 Android 的功能
-type: guide
-group: 扩展
-order: 6.2
-version: 2.1
----
-
-<!-- toc -->
-
-Weex 提供了扩展机制，可以根据自己的业务进行定制自己的功能。
-主要分为两类扩展：
-
-- Module 扩展 非 UI 的特定功能。例如 sendHttp、openURL 等。
-- Component 扩展 实现特别功能的 Native 控件。例如：RichTextview，RefreshListview 等。
-- Adapter 扩展 Weex 对一些基础功能实现了统一的接口，可实现这些接口来定制自己的业务。例如：图片下载等。
-
-
-## Module 扩展
-
-1. Module 扩展必须继承 WXModule 类。
-2. 扩展方法必须加上`@JSMethod (uiThread = false or true)` 注解。Weex 会根据注解来判断当前方法是否要运行在 UI 线程，和当前方法是否是扩展方法。
-3. Weex是根据反射来进行调用 Module 扩展方法，所以Module中的扩展方法必须是 public 类型。
-4. 同样因为是通过反射调用，Module 不能被混淆。请在混淆文件中添加代码：`-keep public class * extends com.taobao.weex.common.WXModule{*;}`
-5. Module 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
-6. 完成 Module 后一定要在初始化时注册 `WXSDKEngine.registerModule("myModule", MyModule.class);` 否则会报类似错误：`ReportException :undefined:9: TypeError: Object #<Object> has no method 'printLog'`
-
-示例如下：
-
-```java
-public class MyModule extends WXModule {
-
- //run ui thread
- @JSMethod (uiThread = true)
- public void printLog(String msg) {
- Toast.makeText(mWXSDKInstance.getContext(),msg,Toast.LENGTH_SHORT).show();
- }
-
- //run JS thread
- @JSMethod (uiThread = false)
- public void fireEventSyncCall(){
- //implement your module logic here
- }
-}
-```
-Register the module
-
-```java
-WXSDKEngine.registerModule("MyModule", MyModule.class);
-```
-JS 调用如下：
-
-```html
-<template>
- <div>
- <text onclick="click">testMyModule</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- methods: {
- click: function() {
- weex.requireModule('MyModule').printLog("I am a weex Module");
- }
- }
- }
-</script>
-```
-## Component 扩展（version > 0.19.0）
-### 1. 变更说明
-WXDomObject 和 Layout 引擎被下沉到 WeexCore 中使用 C++ 实现，移除 Java 代码中的 WXDomObject。此次变更涉及 WXComponent 和 WXDomObject 的适配。
-
-#### （1）setMeasureFunction 迁移
-WXDomObject 中的 setMeasureFunction() 方法迁移至 WXComponent 中：
-```java
-protected void setMeasureFunction(final ContentBoxMeasurement contentBoxMeasurement);
-```
-详见：com.taobao.weex.layout.ContentBoxMeasurement.java
-
-ContentBoxMeasurement 示例请参考：WXText.java / setMeasureFunction()
-注意：ContentBoxMeasurement 只支持叶子节点。
-
-#### （2）WXComponent 接口变更
-##### getDomObject [移除]
-由于 WXDomObject 下沉至 WeexCore 中，所以 getDomObject() 方法已被删除。
-
-##### 构造方法 [参数变更]
-WXComponent 的构造方法删除了类型为 WXDomObject 的参数，新增了类型为 BasicComponentData 的参数，其余参数保持不变：
-```java
-public WXComponent(WXSDKInstance instance, WXVContainer parent, int type, BasicComponentData basicComponentData);
-
-public WXComponent(WXSDKInstance instance, WXVContainer parent, BasicComponentData basicComponentData);
-
-```
-
-#### （3）WXDomObject 接口变更
-你无法在Java代码中访问和继承 WXDomObject，（ ImmutableDomObject 接口也已被删除）
-
-WXDomObject 的部分方法被迁移至 WXComponent中，如需使用，如下：
-
-##### WXDomObject.getType() -> WXComponent.getComponentType() [迁移]
-WXDomObject 中 的 getType() 方法用于获取组件类型（如：list、div、text、img...），迁移到 WXComponent 后，更名为：
-```java
-public String getComponentType();
-```
-
-##### 获取 Layout 结果的相关方法 [迁移]
-获取 Layout 结果的6个方法从 WXDomObject 迁移至 WXComponent：
-```java
-public float getCSSLayoutTop();
-public float getCSSLayoutBottom();
-public float getCSSLayoutLeft();
-public float getCSSLayoutRight();
-public float getLayoutWidth();
-public float getLayoutHeight();
-```
-
-移除两个废弃接口：
-```java
-public float getLayoutY();
-public float getLayoutX();
-```
-## Component 扩展（version< 0.19.0）
-
-1. Component 扩展类必须继承 WXComponent.
-2. Component 对应的设置属性的方法必须添加注解 @WXComponentProp(name=value(value is attr or style of dsl))
-3. Weex sdk 通过反射调用对应的方法，所以 Component 对应的属性方法必须是 public，并且不能被混淆。请在混淆文件中添加代码 `-keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}`
-4. Component 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
-5. 完成 Component 后一定要在初始化时注册 `WXSDKEngine.registerComponent("richText", RichText.class);`
-
-示例如下:
-
-```java
-public class RichText extends WXComponent<TextView> {
-
- public RichText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent) {
- super(instance, dom, parent);
- }
-
- @Override
- protected TextView initComponentHostView(@NonNull Context context) {
- TextView textView = new TextView(context);
- textView.setTextSize(20);
- textView.setTextColor(Color.BLACK);
- return textView;
- }
-
- @WXComponentProp(name = "tel")
- public void setTel(String telNumber) {
- getHostView().setText("tel: " + telNumber);
- }
-}
-```
-注册你的组件：
-
-```java
-WXSDKEngine.registerComponent("richText", RichText.class);
-```
-
-JS 调用如下：
-
-```html
-<template>
- <div>
- <richText tel="12305" style="width:200;height:100">12305</richText>
- </div>
-</template>
-```
-#### 组件方法支持
-从WeexSDK 0.9.5开始，你可以定义组件方法
-
-- 在组件中如下声明一个组件方法
-
- ```java
- @JSMethod
- public void focus(){
- //method implementation
- }
- ```
-
-- 注册组之后，你可以在weex 文件中调用
-
- ```html
- <template>
- <mycomponent ref='mycomponent'></mycomponent>
- </template>
- <script>
- module.exports = {
- created: function() {
- this.$refs.mycomponent.focus();
- }
- }
- </script>
- ```
-
-注:工程要添加依赖 `compile 'com.squareup.picasso:picasso:2.5.2'`
-
-## Adapter扩展
-
-### 图片库Adapter
-
-需要时集成接口 IWXImgLoaderAdapter，实现 setImage 方法。
-
-示例如下：
-
-```java
-public class ImageAdapter implements IWXImgLoaderAdapter {
-
- public ImageAdapter() {
- }
-
- @Override
- public void setImage(final String url, final ImageView view,
- WXImageQuality quality, WXImageStrategy strategy) {
-
- WXSDKManager.getInstance().postOnUiThread(new Runnable() {
-
- @Override
- public void run() {
- if(view==null||view.getLayoutParams()==null){
- return;
- }
- if (TextUtils.isEmpty(url)) {
- view.setImageBitmap(null);
- return;
- }
- String temp = url;
- if (url.startsWith("//")) {
- temp = "http:" + url;
- }
- if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
- return;
- }
- Picasso.with(WXEnvironment.getApplication())
- .load(temp)
- .into(view);
- }
- },0);
- }
-}
-```
-#### SDK混淆规则
-若要在APP中使用混淆，请在相应的配置文件中添加如下规则：
-
-```java
--keep class com.taobao.weex.WXDebugTool{*;}
--keep class com.taobao.weex.devtools.common.LogUtil{*;}
--keepclassmembers class ** {
- @com.taobao.weex.ui.component.WXComponentProp public *;
-}
--keep class com.taobao.weex.bridge.**{*;}
--keep class com.taobao.weex.dom.**{*;}
--keep class com.taobao.weex.adapter.**{*;}
--keep class com.taobao.weex.common.**{*;}
--keep class * implements com.taobao.weex.IWXObject{*;}
--keep class com.taobao.weex.ui.**{*;}
--keep class com.taobao.weex.ui.component.**{*;}
--keep class com.taobao.weex.utils.**{
- public <fields>;
- public <methods>;
- }
--keep class com.taobao.weex.view.**{*;}
--keep class com.taobao.weex.module.**{*;}
--keep public class * extends com.taobao.weex.common.WXModule{*;}
--keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}
--keep class * implements com.taobao.weex.ui.IExternalComponentGetter{*;}
-```
diff --git a/source/cn/guide/extend-ios.md b/source/cn/guide/extend-ios.md
deleted file mode 100644
index b92e2b8..0000000
--- a/source/cn/guide/extend-ios.md
+++ /dev/null
@@ -1,351 +0,0 @@
----
-title: 扩展 iOS 的功能
-type: guide
-group: 扩展
-order: 6.3
-version: 2.1
----
-
-<!-- toc -->
-
-> **注意**：**Weex 所有暴露给 JS 的内置 module 或 component API 都是安全和可控的，它们不会去访问系统的私有 API ，也不会去做任何 runtime 上的 hack 更不会去改变应用原有的功能定位。**
->
-> **如果需要扩展自定义的 module 或者 component ，一定注意不要将 OC 的 runtime 暴露给 JS ， 不要将一些诸如 `dlopen()`， `dlsym()`， `respondsToSelector:`，`performSelector:`，`method_exchangeImplementations()` 的动态和不可控的方法暴露给JS，也不要将系统的私有API暴露给JS**
-
-Weex SDK 只提供渲染，提供了一些默认的组件和能力，如果你需要一些特性但 Weex 并未提供，可以通过扩展自定义的一些插件来实现，通过 WeexSDK 加载。这些插件包括 [component](../wiki/component-introduction.html), [module](../wiki/module-introduction.html) 和 [handler](../wiki/handler-introduction.html)。
-> 本文都以 Objective-C 为例子书写，如果需要 swift 请参考 [使用 swift 扩展 Weex](./extend-module-using-swift.html)
-
-## 自定义 module
-
-自定义 module, 需要让自己的 class 遵循 `WXModuleProtocol` 这个protocol, 通过 `WX_EXPORT_METHOD` 这个宏暴露出需要透出到 `JavaScript` 调用的方法，注册 module，就可以完成一个简单 module 的自定义。
-
-- module 自定义初阶
-
- 下面完成一个 `module`, 该 `module` 暴露一个打印输入参数的方法
-
- 1. 新建一个 基类为 NSObject 的 class `WXCustomEventModule`，让该类遵循 `WXModuleProtocol` 的协议
- 
-
- 2. 添加打印的方法，通过 `WX_EXPORT_METHOD` 暴露该方法
- 
-
- 3. 在初始化完成 Weex SDK 之后注册该 module
- 
-
- 到此，我们已经完成了一个简单的 module 方法的封装，javaScript 端的使用如下:
-
- ```javaScript
- weex.requireModule("event").showParams("hello Weex")
- ```
-
-- module 高阶用法
- 1. `weexInstance`
- 在一个 Weex 页面中，默认 WXSDKInstance 的 Object 持有 多个 module 的 Object, 而 module 的 object 是没有对 WXSDKInstance 做持有的， 在自定义的module 中添加 `@synthesize weexInstance`, module Object 可以对 持有它本身的 WXSDKInstance Object 做一个 弱引用， 通过 weexInstance 可以拿到调用该 module 的页面的一些信息。
- 2. `targetExecuteThread`
- Module 方法默认会在UI线程中被调用，建议不要在这做太多耗时的任务，如果要在其他线程执行整个module 方法，需要实现`WXModuleProtocol`中`- (NSThread *)`的方法，这样，分发到这个module的任务会在指定的线程中运行
-
- 3. `WXModuleKeepAliveCallback`
- Module 支持返回值给 JavaScript中的回调，回调的类型是`WXModuleKeepAliveCallback`,回调的参数可以是String或者Map, 该 block 第一个参数为回调给 JavaScript 的数据，第二参数是一个 BOOL 值，表示该回调执行完成之后是否要被清除，JavaScript 每次调用都会产生一个回调，但是对于单独一次调用，是否要在完成该调用之后清除掉回调函数 id 就由这个选项控制，如非特殊场景，建议传 NO。
- 4. `WX_EXPORT_METHOD_SYNC`
- > WeexSDK 0.10 版本后才支持，暴露的同步方法只能在 JS 线程执行，请不要做太多同步的工作导致JS执行阻塞。
-
- 使用 `WX_EXPORT_METHOD` 暴露到前端的方法都是异步方法(获得结果需要通过回调函数获得), 如果期望获得同步调用结果，可以使用`WX_EXPORT_METHOD_SYNC` 暴露module 方法。
-
-## Component 扩展
-
-可能 WeexSDK 内置提供的组件并不能满足你的开发需求，比如需要期望使用地图这样一个复杂的组件，可以通过自定义一个组件，注册到 WeexSDK engine 中，可以很方便的使用起来。
-
-### component 基础生命周期
-
-- 新建一个基类为 `WXComponent` 的 class
- 如果此时我们什么都不做，将改组件注册进 WeexSDK engine，它的功能就跟内置的 `div` 组件功能是一致的。
-
-- 覆盖 `WXComponent` 中的生命周期方法
-
- - `loadView`
- 一个 component 默认对应于一个 view，如果未覆盖 `loadView` 提供自定义 `view`，会使用 `WXComponent` 基类中的 `WXView`，`WXView` 是继承自 UIView 的一个派生 view。
- 要实现地图功能，我们需要对应的地图 view，比如系统的 `MKMapView`。
-
- ```
- - (UIView *)loadView {
- return [MKMapView new];
- }
- ```
- - `viewDidLoad`
- 对组件 view 需要做一些配置，比如设置 delegate，可以在 `viewDidLoad` 生命周期做，如果当前 view 没有添加 subview 的话，不要设置 view 的 frame，WeexSDK 会根据 style 设置。
-
- ```
- - (void)viewDidLoad {
- ((MKMapView*)self.view).delegate = self;
- }
- ```
-- 注册 component
-
- ```
- [WXSDKEngine registerComponent:@"map" withClass:[WXMapComponent class]];
- ```
- 在前端页面直接可以使用 `map` 标签，如下所示
-
-```html
- <template>
- <div>
- <map style="width:200px;height:200px"></map>
- </div>
- </template>
-```
-
-- 支持自定义事件
-
- 给 map 组件支持 `mapLoaded` 事件
-
- ```html
- <template>
- <div>
- <map style="width:200px;height:200px" @mapLoaded="onMapLoaded"></map>
- </div>
- </template>
-
- <script>
- export default {
- methods: {
- onMapLoaded:function(e) {
- console.log("map loaded"+JSON.stringify(e))
- }
- }
- }
- </script>
- ```
- 给当前组件添加 `BOOL` 成员 mapLoaded，记录当前事件是否被添加，当地图加载完成时候，我们可以根据这个判断是否应该发送事件。
-
- - 覆盖组件生命周期方法添加和移除事件
-
- 覆盖 `addEvent` 和 `removeEvent` 方法
-
- ```Objective-C
- - (void)addEvent:(NSString *)eventName {
- if ([eventName isEqualToString:@"mapLoaded"]) {
- _mapLoaded = YES;
- }
- }
-
- - (void)removeEvent:(NSString *)eventName
- {
- if ([eventName isEqualToString:@"mapLoaded"]) {
- _mapLoaded = NO;
- }
- }
- ```
- - 在适宜的时间发事件通知
-
- 在 MKMapView 加载完成的 delegate 方法中，发事件通知自定义事件
- > 不要忘记设置 MKMapView 的 delegate.
-
- ```object-c
- - (void)mapViewDidFinishLoadingMap:(MKMapView *)mapView {
- if (_mapLoaded) {
- [self fireEvent:@"mapLoaded" params:@{@"customKey":@"customValue"} domChanges:nil]
- }
- }
- ```
-
-
-
-- 支持自定义属性
-
- 添加自定义属性 `showTraffic`
-
- ```html
- <template>
- <div>
- <map style="width:200px;height:200px" showTraffic="true"></map>
- </div>
- </template>
- ```
- - 覆盖组件初始化方法 `initWithRef...`
-
- 当前component 添加 `BOOL` 成员 showsTraffic，接受保存用户输入值，添加到当前组件上的所有属性都会在初始化方法中 `attributes` 中传过来，此处我们处理我们感兴趣的属性即可。
-
- ```object-c
- - (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]) {
-
- if (attributes[@"showsTraffic"]) {
- _showsTraffic = [WXConvert BOOL: attributes[@"showsTraffic"]];
- }
- }
- return self;
- }
- ```
-
- - 在 `viewDidLoad` 中设置该属性
-
- ```object-c
- - (void)viewDidLoad {
- ((MKMapView*)self.view).showsTraffic = _showsTraffic;
- }
- ```
-
- - 支持属性更新
-
- ```object-c
- - (void)updateAttributes:(NSDictionary *)attributes
- {
- if (attributes[@"showsTraffic"]) {
- _showsTraffic = [WXConvert BOOL: attributes[@"showsTraffic"]];
- ((MKMapView*)self.view).showsTraffic = _showsTraffic;
- }
- }
-
- ```
-
-### 更多 component 生命周期
-
-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移除的时候调用. |
-
-或许你需要考虑更多的生命周期方法去 Hook，当布局完成时候，像 `layoutDidFinish`，如果你想了解更多，可以参考一下`WXComponent.h` 声明的方法。
-
-### component 方法
-
-WeexSDK 0.9.5 之后支持了在 js 中直接调用 component 的方法，自定义完组件后，下面的例子可以指引你完成 component 方法。
-
-- 自定义一个 WXMyCompoenent 的组件
-
- ```object-c
- @implementation WXMyComponent
- WX_EXPORT_METHOD(@selector(focus)) // 暴露该方法给js
- - (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]) {
- // handle your attributes
- // handle your styles
- }
-
- return self;
- }
-
- - (void)focus
- {
- NSLog(@"you got it");
- }
- @end
- ```
-
-- 注册组件 `[WXSDKEngine registerComponent:@"mycomponent" withClass:[WXMyComponent class]]`
-
-- 在 weex 文件中调用
-
- ```html
- <template>
- <mycomponent ref='mycomponent'></mycomponent>
- </template>
- <script>
- module.exports = {
- created:function() {
- this.$refs.mycomponent.focus();
- }
- }
- </script>
- ```
-
-### 获取组件的 CSS 样式信息
-
-- 在 0.19 版本之前，Weex 使用 Yoga 排版引擎，可以通过访问 WXComponent 的 cssNode 属性获取。例如：
- ```
- self.cssNode->style.flex = 1.0;
- float height = self.cssNode->style.dimensions[CSS_HEIGHT]);
- ```
-
-- 从 0.19 版本开始，Weex 使用自已的排版引擎，是 C++ 代码。获取 CSS 属性可以从 WXComponent 的 styles 字典（NSDictionary）里获取，也可以访问 WXComponent 的 flexCssNode 属性，其类型为 C++ 类 WeexCore::WXCoreLayoutNode。注意，需要源文件为 .mm 类型。
-
-- 从 0.20 版本开始，iOS 接入 WeexCore，排版引擎也沉入 WeexCore层，并且 CSS 相关属性不再上传给 WXComponent 对象，WXComponent 对象的 styles 字典里只有非 CSS 样式。我们的目的是上层 UI 组件只需要关心排版引擎生成的最终坐标即可，不需要关心前端标记的 CSS 属性。如果仍然需要获取 CSS 样式，可以在 .mm 文件中直接访问 flexCssNode，或通过 WXComponent+Layout.h 文件中提供的扩展方法。
-
- ```
- /* 通过 key 获取 CSS 样式，可以在 ObjC 文件中调用。这个方法在 Component 线程调用是最安全的，
- 比如通过WXPerformBlockOnComponentThread调用。不过 WXComponent 的 init 方法总是在 Component 线程执行的，
- 所以在 init 方法里完成 CSS 样式获取，可以直接调用。
-
- 当前支持的 Key 如下：
- width, height, min-width, min-height, max-width, max-height,
- margin-(left/right/top/bottom)
- padding-(left/right/top/bottom)
- border-(left/right/top/bottom)-width
- left, right, top, bottom
- flex-grow
- */
-- (float)getCssStyleValueForKey:(NSString *)key;
-
-// 其它方法，功能如其名，也需要在 Component 线程调用
-- (WXCoreFlexDirection)getCssStyleFlexDirection;
-- (WXCoreFlexWrap)getCssStyleFlexWrap;
-- (WXCoreJustifyContent)getCssStyleJustifyContent;
-- (WXCoreAlignItems)getCssStyleAlignItems;
-- (WXCoreAlignSelf)getCssStyleAlignSelf;
-- (WXCorePositionType)getCssStylePositionType;
-- (NSString*)convertLayoutValueToStyleValue:(NSString*)valueName;
- ```
-
-## 自定义 handler
-
- weexSDK 目前没有提供图片下载的能力，在`WXImgLoaderProtocol` 定义了一些获取图片的接口，image 组件正是通过 `WXImgLoaderProtocol` 获得并展示图片，开发者可以实现该 protocol 中的接口方法，这样 `image` 标签才能正常展示图片。
-
- 开发者也可以定义自己的 `protocol` 和对应的实现来使用 `handler` 机制
-
-- 新建基类为 NSObject 的 class 实现 `WXImgLoaderProtocol` 协议， 实现 `WXImgLoaderProtocol` 的方法
-> 下面加载图片的逻辑需要依赖 SDWebImage，你也可以不依赖 SDWebimage 使用自己的方式加载对应 URL 图片。
-
- ```object-c
- @implementation WXImgLoaderDefaultImpl
- - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock
- {
- if ([url hasPrefix:@"//"]) {
- url = [@"http:" stringByAppendingString:url];
- }
- return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
- } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
- if (completedBlock) {
- completedBlock(image, error, finished);
- }
- }];
- }
- @end
- ```
-
-- 注册 handler
-
- 你可以通过WXSDKEngine 中的 `registerHandler:withProtocol` 注册handler
-
- ```object-c
- WXSDKEngine.h
- /**
- * @abstract Registers a handler for a given handler instance and specific protocol
- * @param handler The handler instance to register
- * @param protocol The protocol to confirm
- */
- + (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
-
- [WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)]
-
- ```
-- 使用 handler
-
- handler 可以在 native 的 module 或者 component 实现中使用
-
- ```object-c
- id<WXImgLoaderProtocol> imageLoader = [WXSDKEngine handlerForProtocol:@protocol(WXImgLoaderProtocol)];
- [iamgeLoader downloadImageWithURL:imageURl imageFrame:frame userInfo:customParam completed:^(UIImage *image, NSError *error, BOOL finished){
- }];
- ```
diff --git a/source/cn/guide/extend-js-framework.md b/source/cn/guide/extend-js-framework.md
deleted file mode 100644
index 1780517..0000000
--- a/source/cn/guide/extend-js-framework.md
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: 扩展前端框架
-type: guide
-group: 扩展
-order: 6.5
-version: 2.1
----
-
-<!-- toc -->
-
-*这部分扩展能力还在讨论尝试中，可能随时会有调整，请留意。*
-
-Weex 希望能够尊重尽可能多的开发者的使用习惯，所以除了 Weex 官方支持的 Vue 2.0 之外，开发者还可以定制并横向扩展自己的或自己喜欢的 JS Framework。完整一套 JS Framework 的定制和扩展需要以下几个步骤：
-
-1. 首先你要有一套完整的 JS Framework。
-2. 了解 Weex 的 JS 引擎的特性支持情况。
-3. 适配 Weex 的 native DOM APIs。
-4. 适配 Weex 的初始化入口和多实例管理机制。
-5. 在 Weex JS runtime 的 framework 配置中加入自己的 JS Framework 然后打包。
-6. 基于该 JS Framework 撰写 JS bundle，并加入特定的前缀注释，以便 Weex JS runtime 能够正确识别。
-
-## Weex JS 引擎的特性支持情况
-
-* 在 iOS 下，Weex 使用的是系统自带的 JavaScriptCore，所以 ES 支持情况取决于操作系统的版本。目前保守判断，ES5 的特性市面上主流的 iOS 设备都是可以完美支持的，但是 ES6+ 的特性存在一定的碎片化。
-* 在 Android 下，Weex 使用的是 UC 提供的 v8 内核，出于体积、性能和稳定性的考虑，我们使用的并不是最新版本的 v8 内核，同样的保守判断，ES5 特性能够全部支持，包括严格模式、`Object.freeze` 等。
-* Weex JS 引擎不支持 HTML DOM APIs 和 HTML5 JS APIs，这包括 `document`, `setTimeout` 等。
-* 在此基础上，我们加入了 `Promise` 的 polyfill，以及 `console` 的 polyfill。
-* 额外的，为了尽可能的确保 JS 引擎的长效内存管理，我们对一个通用的全局对象进行了 `Object.freeze()` 冻结操作，这包括：
- * `Object`
- * `Object.prototype`
- * `Array`
- * `Array.prototype`
- * `String.prototype`
- * `Number.prototype`
- * `Boolean.prototype`
- * `Error.prototype`
- * `Date.prototype`
- * `RegExp.prototype`
-
-## 适配 Weex 的初始化入口和多实例管理机制
-
-开发者提供的 JS Framework 最终需要包装成一个 CommonJS 包，并且这个包需要对外暴露以下方法：
-
-### 框架初始化
-
-* `init(config)`
- * `config`
- * `Document`
- * `Element`
- * `Comment`
- * `TaskSender`
- * `CallbackManager`
-
-该方法会把 Weex 提供的 Native DOM 类和两个辅助类放到 `config` 参数中，并允许框架本身完成初始化。
-
-*小提示：同时，框架作者也能够通过在框架初始化时传入不同的 `config` 来进行框架的测试或环境模拟。*
-
-#### 参数格式介绍
-
-* `TaskSender`: wip...
-* `CallbackManager`: wip...
-
-### 注册可用的 native 组件和模块
-
-* `registerComponents(components)`
-* `registerModules(modules)`
-
-这两个方法会在框架初始化之后立刻调用，这样框架就能够知道当前的客户端支持哪些组件和模块，在一些特殊逻辑或必要的情况下，有机会为框架本身提供参考信息。
-
-#### 参数格式介绍
-
-* `components: Array`: 描述组件的数组，每一项包括：
- * `type: string`: 组件名称，比如 `div`。
- * `methods: string[]`: 可选项，该组件支持的方法名称列表，这些方法可以遵循 Weex 的 native DOM APIs 的组件方法调用方式。
-* `modules: Object`: 描述一系列模块的散列表，每一项的 key 是模块名，每一项的值是一个数组，数组里的每一项描述了一个该模块中的一个方法，该方法的信息包括：
- * `name: string`: 方法名
- * `args: string[]`: 参数个数和类型描述
-
-例如：
-
-```js
-registerComponents([
- { type: 'web', methods: ['goBack', 'goForward', 'refresh']}
-])
-
-registerModules({
- event: [
- {name: 'openURL', args: ['string']}
- ]
-})
-```
-
-### 多实例生命周期管理
-
-* `createInstance(instanceId, code, config, data, env)`
-* `refreshInstance(instanceId, data)`
-* `destroyInstance(instanceId)`
-
-每个 Weex 页面都有被创建、被销毁两个必经阶段，同时在 Weex 页面运行过程中，native 有机会主动向 Weex 页面发送消息，不同的框架可以根据自己框架的设计对这样的消息有自己的理解和设计实现。
-
-#### 参数格式介绍
-
-* `instanceId: string`: 该 Weex 页面的唯一 id，由 native 产生。
-* `code: string`: 该 Weex 页面的 JS bundle 的代码，通过 native 传入。
-* `config: Object?`: 该 Weex 页面的配置信息，比如代表该 bundle 地址的 `bundleUrl`，由 native 配置产生，和 JS bundle 本身的内容无关。
-* `data: Object?`: Native 有机会在创建一个 Weex 页面的时候，传入一份外部数据，JS 框架也有机会接此机会为相同的 JS bundle 配合不同的 `data` 生成不同的页面内容。
-* `env: Object?`: 当前 Weex 页面的相关环境信息，各字段的含义：
- * `info: Object`: 框架 info 信息，详见之后的 “JS Bundle 格式要求”。
- * `config: Object`: 等同该方法的第三个参数 `config`。
- * `callbacks: CallbackManager`: 该 Weex 页面唯一的 `CallbackManager` 实例。
- * `created: number`: 该 Weex 页面的创建时间毫秒数。
- * `framework: string`: 该 Weex 页面基于的框架名，等同于 `info.framework`。
-
-### Native 通信
-
-* `receiveTasks(instanceId, tasks)`
-
-Native 除了通过 `refreshInstance` 方法向 JS 框架层发送消息之外，更多的会通过 `receiveTasks` 发送用户事件或方法回调给 JS 框架。
-
-比如用户点击了一个按钮，native 就会发送一个 `fireEvent` 类型的任务给 JS 框架，然后 JS 框架再处理相应的事件逻辑。这部分工作机制和 native DOM 接口中的 `addEvent` 的设计有关。
-
-再比如用户发起了一个 `fetch` 网络请求，当请求在 native 端完成时，会以一个 `callback` 类型的任务发给 JS 框架。由于 native 无法传递 JavaScript 中的 function，所以实际上知会发送一个 `callbackId` 给 JS 框架。这部分工作机制和之前出现过的 `CallbackManager` 的设计有关。
-
-### 辅助方法
-
-* `getRoot(instanceId): JSON`
-
-该方法可以返回文档主体结点的完整 JSON 描述，开发者可以以此查看到完整的 native DOM 树，具体返回值的格式和 native DOM 接口中的 `toJSON()` 方法返回值格式一致。此功能多用作开发者工具扩展。
-
-## 在 WeexSDK 中配置 JS Framework
-
-### 准备好你的 JS Framework 代码
-
-```javascript
-// your-own-js-framework.js
-
-export function init (config) { ... }
-
-export function registerComponents (components) { ... }
-export function registerModules (modules) { ... }
-
-export function createInstance (id, code, config, data, env) { ... }
-export function destroyInstance (id) { ... }
-export function refreshInstance (id, data) { ... }
-
-export function recieveTasks (id, tasks) { ... }
-export function getRoot (id) { ... }
-```
-
-### 注册一个 JS Framework
-
-```javascript
-import * as Vue from '...'
-import * as React from '...'
-import * as Angular from '...'
-
-export default { Vue, React, Angular };
-```
-
-然后打包 JS runtime，集成到 WeexSDK 中。
-
-### JS Bundle 格式要求
-
-**框架 info**
-
-你需要保障基于该 JS Framework 的 JS Bundle 在文件开头带有如下格式的注释，我们称其为框架 info：
-
-```javascript
-// { "framework": "Vue" }
-...
-```
-
-这样 Weex JS 引擎就会识别出这个 JS bundle 需要用 Vue 框架来解析。并分发给 Vue 框架处理。同理，Weex 支持同时多种框架在一个移动应用中共存并各自解析基于不同框架的 JS bundle。
diff --git a/source/cn/guide/extend-module-using-swift.md b/source/cn/guide/extend-module-using-swift.md
deleted file mode 100644
index 95fee06..0000000
--- a/source/cn/guide/extend-module-using-swift.md
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: 使用 swift 扩展 iOS 的功能
-type: guide
-group: 扩展
-order: 6.4
-version: 2.1
----
-
-## Swift In Weex
-
-[Swift和Objective-C](https://developer.apple.com/library/ios/documentation/Swift/Conceptual/BuildingCocoaApps/MixandMatch.html#//apple_ref/doc/uid/TP40014216-CH10-ID122) 混编
-
-参考完整 [例子](https://github.com/acton393/WeexSwiftSample.git)
-
-### 使用 Swift 进行 module 扩展
-
-因为 module 暴露 method 是通过`Objective-C`宏来做的，调用的时候是通过反射，所以Swift扩展 module 通过`extension` `Objective-C`的类。
-- 新建 `WXSwiftTestModule.h/m` 和 `WXSwiftTestModule.swift`文件， 在新建Swift文件的时候会提示
- 
- 选择 `Create Bridging Header`, 因为我们要在 Swift 中访问 `Objective-C` 的一些类，正是通过这个 header暴露 OC 的类给 Swift,header 格式为 `yourTarget-Bridging-Header.h`，我这里创建完header文件名称为：`WeexDemo-Bridging-Header.h`
-- `WXSwiftTestModule.h/m`中实现
- - WXSwiftTestModule.h 中
-
- ```
- #import <Foundation/Foundation.h>
- #import <WeexSDK/WeexSDK.h>
-
- @interface WXSwiftTestModule : NSObject <WXModuleProtocol>
-
- @end
-
- ```
- - WXSwiftTestModule.m 中
-
- WeexDemo-Swift.h 这个文件需要编译一下才可以搜索到，具体的路径
-
- ```
- weex/ios/playground/DerivedData/WeexDemo/Build/Intermediates/WeexDemo.build/Debug-iphonesimulator/WeexDemo.build/DerivedSources/WeexDemo-Swift.h
- ```
-
- 路径具体需要根据自己工程而定
-
- ```
- #import "WXSwiftTestModule.h"
- #import "WeexDemo-Swift.h" // Swift类和方法 被 `Objective-C` 识别需要导入
-
- @implementation WXSwiftTestModule
- #pragma clang diagnostic push //关闭unknow selector的warrning
- #pragma clang diagnostic ignored "-Wundeclared-selector"
-
- WX_EXPORT_METHOD(@selector(printSome:callback:)) //Swift 中定义的方法，XCode 转换成的最终的方法名称，在`WeexDemo-Swift.h`里面查看
-
- #pragma clang diagnostic pop
-
- @end
-
- ```
-- Swift 中实现
- 扩展 OC 的类 `WXSwiftTestModule`,增加了一个方法，这个方法就是我们要暴露出来，在 js 中可以调到的
- - WXSwiftTestModule.swift
-
- ```
- import Foundation
- public extension WXSwiftTestModule {
- public func printSome(someThing:String, callback:WXModuleCallback) {
- print(someThing)
- callback(someThing)
- }
- }
- ```
-
- `WXSwiftTestModule` 和`WXModuleCallback` 因为是 OC 的，需要在 `WeexDemo-Bridging-Header` 中暴露
- - WeexDemo-Bridging-Header.h中
-
- ```
- //
- // Use this file to import your target's public headers that you would like to expose to Swift.
- //
- #import "WXSwiftTestModule.h"
- #import "WeexSDK.h"
- ```
-
- 至此这个使用 Swift 开发的简单的 module 已经完成
-
- ### module 使用
- - 注册 module
-
- ```
- [WXSDKEngine registerModule:@"swifter" withClass:[WXSwiftTestModule class]];
-
- ```
- - 前端脚本中用法
-
- ```
- <template>
- <text>Swift Module</text>
- </template>
-
- <script>
- module.exports = {
- ready: function() {
- var swifter = weex.require('swifter');
- swifter.printSome("https://www.taobao.com",function(param){
- nativeLog(param);
- });
- }
-
- };
- </script>
- ```
diff --git a/source/cn/guide/extend-web-render.md b/source/cn/guide/extend-web-render.md
deleted file mode 100644
index c6f1384..0000000
--- a/source/cn/guide/extend-web-render.md
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: 扩展 HTML5 的功能
-type: guide
-group: 扩展
-order: 6.1
-version: 2.1
----
-
-<!-- toc -->
-
-Vue.js 本身就是一个独立的前端框架，在浏览器中完全能够不基于 Weex 容器渲染。因此，针对 Weex 平台扩展 Vue.js 的 Web 端组件，和直接使用 Vue.js 开发一个 Web 组件是一样的。具体的组件编写方法可以参考其官方文档：[组件](https://cn.vuejs.org/v2/guide/components.html) ，另外建议使用 `.vue` 格式的文件编写组件，使用方法参考：[单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html)。
-
-# 扩展 Web 端 renderer 的内置组件
-
-Weex 本身提供了很多内置组件和模块，也具备横向扩展的能力，允许开发者自行扩展和定制。需要注意的是，Weex 是一个跨平台的解决方案，扩展其内置组件或模块，需要在三端（Android、iOS、Web）中都有相应的实现。
-
-Weex 将内核切换成 Vue 2.x 之后，在 Web 端扩展 Vue 组件将变得更加容易。
-
-目前我们提供了 [weex-vue-render](https://github.com/weexteam/weex-vue-render) 作为 Vue 2.x Web 端的渲染器。首先引入该库到你的项目里，然后你就可以使用 `weex.registerComponent` 来进行内置组件扩展了，也可以使用 `Vue.component`，两者基本上是一致的。
-
-## 扩展内置组件示例
-
-以扩展 `<sidebar>` 为例，首先应该编写组件自身的逻辑：
-
-```html
-<!-- sidebar.vue -->
-<template>
- <div class="sidebar">
- <slot></slot>
- </div>
-</template>
-
-<style scoped>
- .sidebar {
- /* ... */
- }
-</style>
-
-<script>
- export default {
- props: [],
- data () {
- return {}
- }
- }
-</script>
-```
-
-然后在使用之前，全局注册 `<sidebar>` 组件：
-
-```js
-import Vue from 'vue'
-import weex from 'weex-vue-render'
-import Sidebar from './path/to/sidebar.vue'
-weex.init(Vue)
-// 全局注册 sidebar 组件
-weex.registerComponent('sidebar', Sidebar)
-// 或者使用 Vue.component
-Vue.component('sidebar', Sidebar)
-```
-
-在扩展 Weex 组件时，如果只使用了 Weex 提供的内置组件，并且使用的都是 Weex 支持的样式，那么就和普通的自定义组件无异，不需要 Native 端再有相应的实现。
-
-如果你定制组件时不得不用到目前 Weex 不支持的标签和样式，在这种情况下才是真正的“扩展”了 Weex 的组件，你还需要在 Android 和 iOS 中有相应的实现，不然会导致渲染异常。
-
-# 扩展 Web 模块
-
-除了通用组件以外，Weex 还有提供了通用的模块，可以方便的调用原生 API。通常来说，注册 Weex 模块要求三端都得有相应的实现，否则会影响其正常的使用。
-
-## 注册模块
-
-如果你引入了 `weex-vue-render` 这个库，那么在全局能获取到 `weex` 这个变量，其中提供了 `registerModule` 方法可以注册模块。
-
-## API 格式
-
-+ `registerModule`
- 1. `name`: {String} 必选，模块名称。
- 2. `define`: {Object} 必选，模块的定义。
- 3. `meta`: {Object} 可选，如果你需要将非 iterable 的属性或方法注册到模块对象里，你才需要用到这个参数，将 `{ registerType: 'assignment' }` 作为 meta 参数传入即可。
-
-## 注册模块示例
-
-下边的代码注册了一个名为 `guide` 的模块：
-
-```js
-weex.registerModule('guide', {
- greeting () {
- console.log('Hello, nice to meet you. I am your guide.')
- },
- farewell () {
- console.log('Goodbye, I am always at your service.')
- }
-})
-```
-
-## 使用模块
-
-在 `weex` 上提供了 `require` 方法用于获取已注册的模块，直接传递模块名即可：
-
-```js
-// 获取模块
-const guide = weex.requireModule('guide')
-
-// 可以直接调用模块中的方法
-guide.greeting()
-guide.farewell()
-```
-
-上述模块使用方法在 Native 环境中依然有效，只不过模块中的方法是由 Native 提供的。
diff --git a/source/cn/guide/front-end-frameworks.md b/source/cn/guide/front-end-frameworks.md
deleted file mode 100644
index 49bbb3c..0000000
--- a/source/cn/guide/front-end-frameworks.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: 前端框架
-type: guide
-group: Overview
-order: 1.3
-version: 2.1
----
-
-<!-- toc -->
-
-## Weex 中的前端框架
-
-
-
-前端技术看起来很繁荣，测试、打包、调试等工具都比较丰富，开发效率比原生开发要高很多。在大型项目中使用前端框架也是一个管理应用好方法，这样更方便于长期维护。
-
-然而，**Weex并不是一个前端框架**。实际上，前端框架仅仅是 Weex 的语法层或称之为 DSL (Domain-specific Language)，它们与原生渲染引擎是分离的。换句话说，Weex 并不依赖于特定的前端框架，随着前端技术的发展，Weex 也可以集成更多广泛使用的前端框架。
-
-目前 Weex 主要支持 [Vue.js](https://vuejs.org/) 和 [Rax](https://alibaba.github.io/rax/) 作为其内置的前端框架。这些框架已经集成到了 Weex SDK，你不需要在额外引入。
-
-> **学习一些 Vue 和 Rax 的基础知识，对使用 Weex 非常有帮助。**
-
-## Vue.js
-
-Weex 从 [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0)（发布于 2017/02/17）这个版本开始，就集成了 v2 版本的 Vue.js。Vue.js 是一套用于构建用户界面的渐进式框架，详情请参阅其[官方网站](https://vuejs.org/)。
-
-关于在 Weex 中使用 Vue 的技巧请参阅：[《使用 Vue》](./use-vue.html)。
-
-## Rax
-
-Rax 是一个兼容 React 接口的前端框架，请参考 [Rax 的官方网站](https://alibaba.github.io/rax/) 来获得更多信息。
diff --git a/source/cn/guide/images/flow.png b/source/cn/guide/images/flow.png
deleted file mode 100644
index c5a1b61..0000000
--- a/source/cn/guide/images/flow.png
+++ /dev/null
Binary files differ
diff --git a/source/cn/guide/images/tut-cli-qrcode.png b/source/cn/guide/images/tut-cli-qrcode.png
deleted file mode 100644
index 9068c14..0000000
--- a/source/cn/guide/images/tut-cli-qrcode.png
+++ /dev/null
Binary files differ
diff --git a/source/cn/guide/images/tut-first.png b/source/cn/guide/images/tut-first.png
deleted file mode 100755
index c8505e6..0000000
--- a/source/cn/guide/images/tut-first.png
+++ /dev/null
Binary files differ
diff --git a/source/cn/guide/images/tut-second.png b/source/cn/guide/images/tut-second.png
deleted file mode 100755
index 1259abf..0000000
--- a/source/cn/guide/images/tut-second.png
+++ /dev/null
Binary files differ
diff --git a/source/cn/guide/images/tut1.jpg b/source/cn/guide/images/tut1.jpg
deleted file mode 100644
index 8af0f3f..0000000
--- a/source/cn/guide/images/tut1.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/guide/images/tut2.jpg b/source/cn/guide/images/tut2.jpg
deleted file mode 100644
index c3e8a6e..0000000
--- a/source/cn/guide/images/tut2.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/guide/images/tut3.png b/source/cn/guide/images/tut3.png
deleted file mode 100644
index 5473905..0000000
--- a/source/cn/guide/images/tut3.png
+++ /dev/null
Binary files differ
diff --git a/source/cn/guide/images/tut4.gif b/source/cn/guide/images/tut4.gif
deleted file mode 100644
index eed4395..0000000
--- a/source/cn/guide/images/tut4.gif
+++ /dev/null
Binary files differ
diff --git a/source/cn/guide/index.md b/source/cn/guide/index.md
deleted file mode 100644
index 28c987b..0000000
--- a/source/cn/guide/index.md
+++ /dev/null
@@ -1,178 +0,0 @@
----
-title: 快速上手
-type: guide
-group: Overview
-order: 1.1
-version: 2.1
----
-
-<!-- toc -->
-
-## 什么是 Weex ？
-
-> **Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架。**
-
-Weex 致力于使开发者能基于当代先进的 Web 开发技术，使用同一套代码来构建 Android、iOS 和 Web 应用。具体来讲，在集成了 WeexSDK 之后，你可以使用 JavaScript 和现代流行的前端框架来开发移动应用。
-
-Weex 的结构是解耦的，渲染引擎与语法层是分开的，也不依赖任何特定的前端框架，目前主要支持 [Vue.js](https://vuejs.org/) 和 [Rax](https://alibaba.github.io/rax/) 这两个前端框架。
-
-Weex 的另一个主要目标是跟进当代先进的 Web 开发和原生开发的技术，使生产力和性能共存。在开发 Weex 页面就像开发普通网页一样；在渲染 Weex 页面时和渲染原生页面一样。
-
-## Overview
-
-如果你只是想尝试 Weex，你并不需要安装任何东西。 Weex有一个[在线编写代码的平台](http://dotwe.org/vue/)，你可以在上面写单个页面的例子，而不需要任何配置。在平台上源代码应该用 Vue.js 的[单文件组件](https://vuejs.org/v2/guide/single-file-components.html) 语法来编写，在 Web 平台的渲染结果将显示在一个模拟的手机壳中。
-
-这里有一个使用 Weex 和 Vue.js 开发的[最简单的例子](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380)：
-
-
-
-这个例子在屏幕正中间渲染了一个单词 “Yo”。 如果你想在移动设备上预览渲染结果，你只需要安装[Weex playground app](/cn/tools/playground.html) 或将 Weex SDK 集成到您自己的应用程序中，然后使用扫描网页右侧的二维码。
-
-在源代码的 `<template>` 中，`<div>` 你应该很熟悉了，它在 Weex 平台上也是一个通用容器。但是 `<text>` 组件是由 Weex 特有的，它是一个块级的文本容器，可以用来渲染文字。
-
-> 文本只能放在 `<text>` 标签里，否则将被忽略。
-
-在 `<style>` 标签内，你可以写 CSS 来描述一个组件的样式，需要注意的是，这些样式在 Weex 里只能作用于当前组件。（强制 [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html)）。
-
-### 原生组件
-
-在上面的例子中，`<div>` 和 `<text>` 在移动端上渲染出来的都是原生组件，而不是 `HTMLElement`。
-
-
-
-Weex 在 iOS 和 Android 上都实现了一个渲染引擎，并提供了一套基础的[内置组件](../references/components/)。基于这些组件，你可以用 js 封装更多的上层组件。
-
-尽管 Weex 中的组件看起来很像 HTML 标签，但你无法使用所有 HTML 标签，只能使用内置组件和自定义组件。
-
-在框架内部，Weex 使用的是原生系统提供的 Widget 来渲染的。尽管 Weex 强调每个跨平台的一致性，但我们仍然接受平台本身的行为和 UI 差异。 例如 [<switch> switch 组件](http://dotwe.org/vue/d96943452b6708422197c47920903823) 在 Android 和 iOS 上看起来是不同的（在 Web 端的外观模拟了 iOS）。
-
-
-
-除了内置组件以外，Weex 也支持你扩展更多原生组件，但是你需要在每个平台上实现它们，并保持其行为一致。最实用的方法是将现有的本地组件集成到 Weex 平台中。
-
-### 原生模块
-
-对于那些不依赖于 UI 的功能，Weex 推荐将它们包装到**模块**中，然后使用 `weex.requireModule('xxx')` 来引入。 这是使用 javascript 调用原生功能的一种方法，如网络，存储，剪贴板和页面导航等功能。这里有一个[使用 `stream` 模块获取 Vue.js 的 star 数](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b) 的例子。
-
-同样，Weex 也提供了一套基础的[内置模块](../references/modules/)，也支持将已有的原生模块集成到 Weex 中。
-
-关于如何扩展 Weex 的原生组件和原生模块，可以参考下列文档：
-
-+ [扩展 Web 渲染器](./extend-web-render.html)
-+ [扩展 Android](./extend-android.html)
-+ [扩展 iOS](./extend-ios.html)
-
-### 一次编写，处处运行
-
-Weex 可以只编写一份代码，开发出三端都可用的页面。
-
-在多个端中使用相同的源代码可以显著提高开发效率，并简化测试，构建和发布流程。在此基础上，Weex 可以将前端的打包、测试流程与手机端监控、发布系统结合起来，提高开发效率。
-
-尽管 Weex 多端都是用的同一份代码，但是仍然支持针对特定的平台开发功能。Weex 提供了 `weex.config.env` 和 `WXEnvironment`（它们是相同的）来获得当前的运行时环境。你可以用 `WXEnvironment.platform` 来确定代码运行在哪个平台上。除了平台以外，`WXEnvironment` 还包含其他环境信息，如 *osVersion* 和 *deviceModel*，参考 *[Weex variable](../references/weex-variable.html)* 了解更多详细信息。
-
-## 支持多个前端框架
-
-前端框架对 Weex 而言只是一个语法层，它们和原生渲染器是解耦的。Weex 并没有强绑定与某个特定的前端框架，而是可以把渲染原生 UI 的能力赋予某些前端框架。
-
-目前 Weex 将 [Vue.js](https://vuejs.org/) 和 [Rax](https://alibaba.github.io/rax/) 作为其内置的前端框架。你可以阅读 *[前端框架](./front-end-frameworks.html)* 这篇文档了解更多信息。
-
-
-
-+ **Vue.js** 是一套用于构建用户界面的渐进式框架。
-+ **Rax** 兼容 React 接口的前端框架。
-
-> Vue.js 和 Rax 都已经集成进了 Weex SDK，你不需要再额外引入。
-
-然而 Weex 也不是只支持 Vue 和 Rax，你也可以把自己喜欢的前端框架集成到 Weex 中。有一个文档*[扩展前端框架](/cn/guide/extend-js-framework.html)*描述了如何实现，但是这个过程仍然非常复杂和棘手，你需要了解关于 js-native 之间通信和原生渲染引擎的许多底层细节。
-
-## 创建一个 App
-
-> 以下步骤假设您已经了解了 Node.js 和 npm 的基本知识。如果对它们不熟悉，可以访问 [https://docs.npmjs.com/](https://docs.npmjs.com/) 来了解更多关于 npm 的用法。
-
-Weex 提供了一个命令行工具 [weex-toolkit](/cn/tools/toolkit.html) 来帮助开发者使用 Weex。它可以用来快速创建一个空项目、初始化 iOS 和 Android 开发环境、调试、安装插件等操作。
-
-目前 `weex-toolkit` 只支持创建 Vue.js 的项目。创建 Rax 的项目可以使用 `rax-cli`，参考 [Rax 的官方网站](https://alibaba.github.io/rax/) 了解其用法。
-
-### 初始化
-
-请确保你已经安装了 [Node.js](https://nodejs.org/)，然后全局安装 `weex-toolkit`。
-
-```bash
-npm install weex-toolkit -g
-```
-
-这条命令会向你命令行环境中注册一个 `weex` 命令。你可以用 `weex create` 命令来创建一个空的模板项目：
-
-```bash
-weex create awesome-app
-```
-
-命令执行完以后，在当前目录的 `awesome-app` 文件夹里就有了一个空的 **Weex + Vue.js** 项目。
-
-### 开发
-
-下一步就是进入刚刚创建的文件夹，并且安装依赖，然后执行 `npm start`：
-
-```bash
-cd awesome-app
-npm install
-npm start
-```
-
-然后工具会启动一个本地的 web 服务，监听 `8081` 端口。你可以打开 `http://localhost:8081` 查看页面在 Web 下的渲染效果。 源代码在 `src/` 目录中，你可以像一个普通的 Vue.js 项目一样来开发.
-
-
-
-除此之外，你还可以打开 `http://localhost:8081/preview.html` 开启一个预览页面，它会把 web 端的页面放在一个 iframe 中渲染，而且在右侧生成一个二维码。用 [Weex playground app](/cn/tools/playground.html) 扫描这个二维码可以看到页面在手机上渲染的真实效果。
-
-### 编译和运行
-
-默认情况下 `weex create` 命令并不初始化 iOS 和 Android 项目，你可以通过执行 `weex platform add` 来添加特定平台的项目。
-
-```bash
-weex platform add ios
-weex platform add android
-```
-
-由于网络环境的不同，安装过程可能需要一些时间，请耐心等待。如果安装失败，请确保自己的网络环境畅通。
-
-为了能在本地机器上打开 Android 和 iOS 项目，你应该配置好客户端的开发环境。对于 iOS，你应该安装并且配置好 [Xcode](https://developer.apple.com/xcode/)。对于 Android，你应该安装并且配置好 [Android Studio](https://developer.android.com/studio/index.html)。当开发环境准备就绪后，运行下面的命令，可以在模拟器或真实设备上启动应用：
-
-```bash
-weex run ios
-weex run android
-weex run web
-```
-
-### 调试
-
-`weex-toolkit` 还提供了强大的调试功能，只需要执行：
-
-```bash
-weex debug
-```
-
-这条命令会启动一个调试服务，并且在 Chrome （目前只支持基于 V8 引擎的桌面浏览器） 中打开调试页面。详细用法请参考 [weex-toolkit 的文档](../tools/toolkit.html)。
-
-## 下一步
-
-当你看到这里的时候，我相信你已经了解了 Weex的基本知识。下一步是深入了解 Weex 的其他特性，并且亲自尝试。
-
-如果你想现在就用 Weex：
-
-+ [将 Weex 集成到已有应用](./integrate-to-your-app.html)
-+ [配置开发环境](./set-up-env.html)
-+ [手册](../references/)
-
-如果你想了解 Weex 背后的原理：
-
-+ [Weex 是如何工作的](../wiki/index.html)
-+ [设计理念](../wiki/design-principles.html)
-+ [和 Web 平台的差异](../wiki/platform-difference.html)
-
-如果你想让 Weex 变得更好：
-
-+ [Weex 的开发流程](../development-process.html)
-+ [如何参与贡献](../contributing.html)
-
-此外，Weex 是一个跨栈的技术，开发人员也是多样化的，学习一些前端开发、Vue.js、iOS 和 Android 的基本知识，会对你开发 Weex 有很大的帮助。
diff --git a/source/cn/guide/integrate-devtool-to-android.md b/source/cn/guide/integrate-devtool-to-android.md
deleted file mode 100644
index e81bf77..0000000
--- a/source/cn/guide/integrate-devtool-to-android.md
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: 集成 Devtools 到 Android
-type: guide
-group: 开发
-order: 5.4
-version: 2.2
----
-
-<!-- toc -->
-
-Weex Devtools 能够方便调试 Weex 页面，但此功能离不开 Native 的支持。如何让你的 App 也集成 Devtools，在本章将会详细说明 Android 端如何接入 Weex Devtools。
-
-#### 版本兼容
-
-| weex sdk | weex inspector | Debugger Server |
-|----------|----------------|-----------------|
-| 0.13+ | 0.12+ | 0.2.39+ |
-| 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 | - |
-| 0.16.0+ | 0.12.1 | - |
-| 0.17.0+ | 0.13.2 | - |
-| 0.18.0+ | 0.13.4-multicontext | - |
-| 0.19.0+ | 0.18.68 | - |
-
-## Android接入指南
-
-#### 一、添加依赖
-可以通过Gradle 或者 Maven添加对devtools aar的依赖, 也可以直接对源码依赖.
-
- * *Gradle依赖*.
- ```
- dependencies {
- compile 'com.taobao.android:weex_inspector:0.18.10'
- }
- ```
-
- 或者
- * *Maven依赖*.
- ```
- <dependency>
- <groupId>com.taobao.android</groupId>
- <artifactId>weex_inspector</artifactId>
- <version>0.18.10</version>
- <type>pom</type>
- </dependency>
- ```
-
- 或者
- * *源码依赖*.
-
- 需要复制[inspector](https://github.com/weexteam/weex_devtools_android/tree/master/inspector)目录到你的app的同级目录, 然后在工程的 `settings.gradle` 文件下添加 `include ":inspector"`, 此过程可以参考playground源码的工程配置及其配置, 然后在app的`build.gralde`中添加依赖.
- ```
- dependencies {
- compile project(':inspector')
- }
-```
-
- * **需要引入okhttp**
- ```
- dependencies {
- compile 'com.squareup.okhttp:okhttp:2.3.0'
- compile 'com.squareup.okhttp:okhttp-ws:2.3.0'
- ...
- }
- ```
-
-#### 二、调试开关（扫码开启调试/手动开启调试）
-
-最简单方式就是复用Playground的相关代码,比如扫码和刷新等模块, 但是扫码不是必须的, 它只是与app通信的一种形式, 二维码里的包含DebugServer IP及bundle地址等信息,用于建立App和Debug Server之间的连接及动态加载bundle. 在Playground中给出了两种开启debug模式的范例.
-
-* 范例1: 通过在XXXApplication中设置开关打开调试模式 <br>
-```
-public class MyApplication extends Application {
- public void onCreate() {
- super.onCreate();
- initDebugEnvironment(true, "xxx.xxx.xxx.xxx"/*"DEBUG_SERVER_HOST"*/);
- //WXSDKEngine.reload();
- }
-}
-
-private void initDebugEnvironment(boolean enable, String host) {
- WXEnvironment.sRemoteDebugMode = enable;
- WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native";
-}
-```
-这种方式最直接, 在代码中直接hardcode了开启调试模式, 如果在SDK初始化之前调用甚至连`WXSDKEngine.reload()`都不需要调用, 接入方如果需要更灵活的策略可以将`initDebugEnvironment(boolean enable, String host)`和`WXSDKEngine.reload()`组合在一起在合适的位置和时机调用即可.（如果不是初始化之前调用，n那么每次调用initDebugEnvironment后必须调用WXSDKEngine.reload()刷新Weex引擎）
-
-* 范例2:通过扫码打开调试模式 <br>
-Playground中较多的使用扫描weex debugger生成的调试二维码的方式传递信息, 不仅用这种方式控制Debug模式的开关,而且还通过它来传入bundle的url直接调试. 应当说在开发中这种方式是比较高效的, 省去了修改sdk代码重复编译和安装App的麻烦.
-
-拦截方式：
-````
-if (WXEnvironment.isApkDebugable()) {
- String devToolUrl = uri.getQueryParameter("_wx_devtool");
- if (!TextUtils.isEmpty(devToolUrl)) {
- WXEnvironment.sRemoteDebugProxyUrl = devToolUrl;
- WXEnvironment.sDebugServerConnectable = true;
- WXSDKEngine.reload(XXXXX.getApplication(), false);
- }
-}
-````
-
-* 可选：调试刷新协议 <br>
-广播 ACTION_DEBUG_INSTANCE_REFRESH 在调试模式切换和 Chrome 调试页面刷新时发出，主要用来通知当前的 Weex容器以 Debug 模式重新加载当前页。在 playground 中的处理过程如下：
-```
- public class RefreshBroadcastReceiver extends BroadcastReceiver {
- @Override
- public void onReceive(Context context, Intent intent) {
- if (IWXDebugProxy.ACTION_DEBUG_INSTANCE_REFRESH.equals(intent.getAction())) {
- //Do something
- }
- }
- }
-```
-
-## 科普
-
-#### Devtools组件介绍
-Devtools扩展了[Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol), 在客户端和调试服务器之间的采用[JSON-RPC](https://en.wikipedia.org/wiki/JSON-RPC)作为通信机制, 本质上调试过程是两个进程间协同, 相互交换控制权及运行结果的过程. 更多细节还请阅读[Weex Devtools Debugger的技术选型实录](http://www.atatech.org/articles/59284)这篇文章.
-
-* **客户端**
-Devtools 客户端作为aar被集成App中, 它通过webscoket连接到调试服务器,此处并未做安全检查. 出于安全机制及包大小考虑, 强烈建议接入方只在debug版本中打包此aar.
-
-* **服务器**
-Devtools 服务器端是信息交换的中枢, 既连接客户端, 又连接Chrome, 大多数情况下扮演一个消息转发服务器和Runtime Manager的角色.
-
-* **Web端**
-Chrome的V8引擎扮演着bundle javascript runtime的角色. 开启debug模式后, 所有的bundle js 代码都在该引擎上运行. 另一方面我们也复用了Chrome前端的调试界面, 例如设置断点, 查看调用栈等, 调试页关闭则runtime将会被清理.
-
-调试的大致过程请参考如下时序图.
-
diff --git a/source/cn/guide/integrate-devtool-to-ios.md b/source/cn/guide/integrate-devtool-to-ios.md
deleted file mode 100644
index 052d790..0000000
--- a/source/cn/guide/integrate-devtool-to-ios.md
+++ /dev/null
@@ -1,184 +0,0 @@
----
-title: 集成 Devtools 到 iOS
-type: guide
-group: 开发
-order: 5.5
-version: 2.1
----
-
-<!-- toc -->
-
-
-# 概要
-
-Weex Devtools 能够方便调试 Weex 页面，但此功能离不开 Native 的支持。如何让你的 App 也集成 Devtools，在本章将会详细说明 iOS 端如何接入 Weex Devtools。
-
-- iOS 应用接入DevTool
-- 和Debug Server 配合使用
-
-
-# iOS 应用接入DevTool
-
-
-## 添加依赖
-
-建议在DEBUG模式下依赖
-
-
-### 方法1: cocoapods 依赖
-
-在工程目录的 podfile 添加如下代码
-
-```
-source https://github.com/CocoaPods/Specs.git，
-pod 'WXDevtool', '0.15.3', :configurations => ['Debug']，
-```
-
-
-可以通过更新本地 podspec repo，pod search 来查询最新版本，在 podfile 文件添加依赖。
-
-
-
-### 方法二：github 源码依赖
-
-
-1. `git clone git@github.com:weexteam/weex-devtool-iOS.git`
-
-2. 如下图示：拖动source目录源文件到目标工程中
-
- 
-
-3. 按照红框中配置勾选
-
- 
-
-
- 在相对较大的互联网 App 研发中, framework 静态库被广泛应用，所以推荐使用方法一接入。
-
-### 集成功能
-
-参考`PlayGround`中的实现
-
-
-```
-//方法1 pod依赖方式
-#import <TBWXDevtool/WXDevtool.h>
-
-//方法2 源码依赖方式
-#import "WXDevtool.h"
-
-```
-
-查看 WXDevtool 头文件如下：
-
-```object-c
-@interface WXDevTool : NSObject
-
-+ (void)setDebug:(BOOL)isDebug;
-
-+ (BOOL)isDebug;
-
-+ (void)launchDevToolDebugWithUrl:(NSString *)url;
-
-@end
-```
-
-`setDebug`：参数为 `YES` 时，直接开启调试模式，反之关闭，使用场景如下所述
-
-#### 扫码调试
-
-如果你的应用中存在扫码功能或即将集成扫码功能，推荐使用该方式进行集成，Demo 地址见: [Playground App](https://github.com/weexteam/weex-devtool-iOS/blob/master/playground/WeexDemo/Scanner/WXScannerVC.m)
-
-核心代码为获取扫码链接中的`_wx_devtool`参数，并将调试工具与调试服务器链接：
-
-```object-c
-[WXDevTool launchDevToolDebugWithUrl:@"ws://{ip}:{port}/debugProxy/native/{channelid}"];
-```
-
-#### 直接链接
-
-如果你需要直接让你的应用链接上Weex调试工具，你需要通过如下方式进行集成：
-
-1. 命令行运行`weex debug --port 8888 --channelid 1` 去指定端口号及调试进程ID.
-2. 添加如下代码到你的应用中，注意替换对应的`{ip}`,`{port}`,`{channelid}`为你本地的值。
-
-```object-c
-[WXDevTool setDebug:NO];
-[WXDevTool launchDevToolDebugWithUrl:@"ws://{ip}:{port}/debugProxy/native/{channelid}"];
-```
-如果程序一启动就开启 Weex 调试，**需要在 WeexSDK 引擎初始化之前**添加代码，同时需要将Debug开关设置为`NO`，进入调试界面后再打开`JS Debug`开关（服务链接时对于纯weex项目会丢失首屏Weex页面的消息导致白屏）。
-
-### 附加页面刷新功能
-
-- 为什么需要页面刷新功能？
-
- 如下图所示，当点击 debugger 按钮时，js 的运行环境会从手机端（JavaScriptCore）切换到 Chrome（V8），这时需要重新初始化 Weex 环境，重新渲染页面。页面渲染是需要接入方在自己的页面添加。
-
- 
-
-- 什么场景下需要添加页面刷新功能?
-
- - 切换 JSDebug 开关时刷新页面
- - 刷新 Chrome 页面（command+R）
-
-- 如何添加刷新
- - 具体实现可参考 [Playground App](https://github.com/weexteam/weex-devtool-iOS/blob/master/playground/WeexDemo/WXDemoViewController.m) `WXDemoViewController.m` 例子
-
- 在 Weex 页面初始化或 `viewDidLoad` 方法时添加注册通知，举例如下：
-
- ```object-c
- [[NSNotificationCenter defaultCenter] addObserver:self selector:notificationRefreshInstance: name:@"RefreshInstance" object:nil];
- ```
-
- 最后**千万记得**在 `dealloc` 方法中取消通知，如下所示
-
- ```
- - (void)dealloc
- {
- [[NSNotificationCenter defaultCenter] removeObserver:self];
- }
- ```
-
- 页面刷新实现，先销毁当前 instance，然后重新创建 instance，举例如下:
-
- ```
- - (void)render
- {
- CGFloat width = self.view.frame.size.width;
- [_instance destroyInstance];
- _instance = [[WXSDKInstance alloc] init];
- _instance.viewController = self;
- _instance.frame = CGRectMake(self.view.frame.size.width-width, 0, width, _weexHeight);
-
- __weak typeof(self) weakSelf = self;
- _instance.onCreate = ^(UIView *view) {
- [weakSelf.weexView removeFromSuperview];
- weakSelf.weexView = view;
- [weakSelf.view addSubview:weakSelf.weexView];
- UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, weakSelf.weexView);
- };
- _instance.onFailed = ^(NSError *error) {
-
- };
- _instance.renderFinish = ^(UIView *view) {
- [weakSelf updateInstanceState:WeexInstanceAppear];
- };
-
- _instance.updateFinish = ^(UIView *view) {
- };
- if (!self.url) {
- return;
- }
- NSURL *URL = [self testURL: [self.url absoluteString]];
- NSString *randomURL = [NSString stringWithFormat:@"%@?random=%d",URL.absoluteString,arc4random()];
- [_instance renderWithURL:[NSURL URLWithString:randomURL] options:@{@"bundleUrl":URL.absoluteString} data:nil];
- }
- ```
-
-
-
-*说明：目前版本需要注册的通知名称为固定的 “RefreshInstance”，下个版本会添加用户自定义 name 。*
-
-# 功能使用
-
-文档见 [Weex Debugger 使用文档](../tools/toolkit.html#debug)。
diff --git a/source/cn/guide/integrate-to-your-app.md b/source/cn/guide/integrate-to-your-app.md
deleted file mode 100644
index ec06665..0000000
--- a/source/cn/guide/integrate-to-your-app.md
+++ /dev/null
@@ -1,345 +0,0 @@
----
-title: 集成 Weex 到已有应用
-type: guide
-group: Overview
-order: 1.2
-version: 2.1
-has_chapter_content: true
----
-
-<!-- toc -->
-
-## 集成到 Android
-
-注：以下文档都是假设您已经具备一定的Android开发经验。
-
-### Android 集成有两种方式
-
-1. 源码依赖：能够快速使用WEEX最新功能，可以根据自己项目的特性进行相关改进。
-2. SDK依赖：WEEX 会在jcenter 定期发布稳定版本。[jcenter](https://bintray.com/alibabaweex/maven/weex_sdk/view)
- 注:国内可能需要翻墙
-
-### 前期准备
-
-- 已经安装了[JDK](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) version>=1.7 并配置了环境变量
-- 已经安装[Android SDK](https://developer.android.com/studio/index.html) 并配置环境变量。
-- Android SDK version 23 (compileSdkVersion in [`build.gradle`](https://github.com/apache/incubator-weex/blob/master/android/sdk/build.gradle))
-- SDK build tools version 23.0.1 (buildToolsVersion in [`build.gradle`](https://github.com/apache/incubator-weex/blob/master/android/sdk/build.gradle))
-- Android Support Repository >= 17 (for Android Support Library)
-
-### 快速接入
-
-如果你是尝鲜或者对稳定性要求比较高可以使用依赖SDK的方式。
-步骤如下：
-1. 创建Android工程，没有什么要特别说明的，按照你的习惯来。
-2. 修改build.gradle 加入如下基础依赖
-
- ```gradle
- compile 'com.android.support:recyclerview-v7:23.1.1'
- compile 'com.android.support:support-v4:23.1.1'
- compile 'com.android.support:appcompat-v7:23.1.1'
- compile 'com.alibaba:fastjson:1.1.46.android'
- compile 'com.taobao.android:weex_sdk:0.5.1@aar'
- ```
-
- 注:版本可以高不可以低。
-
-#### 代码实现
-
-注:附录中有完整代码地址
-- 实现图片下载接口，初始化时设置。
-
-```java
-package com.weex.sample;
-
-import android.widget.ImageView;
-
-import com.taobao.weex.adapter.IWXImgLoaderAdapter;
-import com.taobao.weex.common.WXImageStrategy;
-import com.taobao.weex.dom.WXImageQuality;
-
-/**
- * Created by lixinke on 16/6/1.
- */
-public class ImageAdapter implements IWXImgLoaderAdapter {
-
-
- @Override
- public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
- //实现你自己的图片下载，否则图片无法显示。
- }
-}
-```
-- 初始化
-
-```java
-package com.weex.sample;
-
-import android.app.Application;
-
-import com.taobao.weex.InitConfig;
-import com.taobao.weex.WXSDKEngine;
-
-/**
- * 注意要在Manifest中设置android:name=".WXApplication"
- * 要实现ImageAdapter 否则图片不能下载
- * gradle 中一定要添加一些依赖，否则初始化会失败。
- * compile 'com.android.support:recyclerview-v7:23.1.1'
- * compile 'com.android.support:support-v4:23.1.1'
- * compile 'com.android.support:appcompat-v7:23.1.1'
- * compile 'com.alibaba:fastjson:1.1.45'
- */
-public class WXApplication extends Application {
-
- @Override
- public void onCreate() {
- super.onCreate();
- InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
- WXSDKEngine.initialize(this,config);
- }
-}
-
-```
-- 开始渲染
-
-```java
-package com.weex.sample;
-
-import android.os.Bundle;
-import android.support.v7.app.AppCompatActivity;
-import android.view.View;
-
-import com.taobao.weex.IWXRenderListener;
-import com.taobao.weex.WXSDKInstance;
-import com.taobao.weex.common.WXRenderStrategy;
-import com.taobao.weex.utils.WXFileUtils;
-
-public class MainActivity extends AppCompatActivity implements IWXRenderListener {
-
- WXSDKInstance mWXSDKInstance;
-
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
-
- mWXSDKInstance = new WXSDKInstance(this);
- mWXSDKInstance.registerRenderListener(this);
- /**
- * WXSample 可以替换成自定义的字符串，针对埋点有效。
- * template 是.we transform 后的 js文件。
- * option 可以为空，或者通过option传入 js需要的参数。例如bundle js的地址等。
- * jsonInitData 可以为空。
- * width 为-1 默认全屏，可以自己定制。
- * height =-1 默认全屏，可以自己定制。
- */
- mWXSDKInstance.render("WXSample", WXFileUtils.loadFileContent("hello.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
- }
-
- @Override
- public void onViewCreated(WXSDKInstance instance, View view) {
- setContentView(view);
- }
-
- @Override
- public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
-
- }
-
- @Override
- public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
-
- }
-
- @Override
- public void onException(WXSDKInstance instance, String errCode, String msg) {
-
- }
-
-
- @Override
- protected void onResume() {
- super.onResume();
- if(mWXSDKInstance!=null){
- mWXSDKInstance.onActivityResume();
- }
- }
-
- @Override
- protected void onPause() {
- super.onPause();
- if(mWXSDKInstance!=null){
- mWXSDKInstance.onActivityPause();
- }
- }
-
- @Override
- protected void onStop() {
- super.onStop();
- if(mWXSDKInstance!=null){
- mWXSDKInstance.onActivityStop();
- }
- }
-
- @Override
- protected void onDestroy() {
- super.onDestroy();
- if(mWXSDKInstance!=null){
- mWXSDKInstance.onActivityDestroy();
- }
- }
-}
-```
-
-### 源码依赖(IDE Android Studio)
-
-1. 下载源码 `git clone https://github.com/apache/incubator-weex.git`
-2. 创建 Android 工程。
-3. 通过以下路径引入 SDK Module
- File->New-Import Module-> 选择 WEEX SDK Module(weex/android/sdk) -> Finish
-4. app 的 build.gradle 中添加如下依赖:`compile project(':weex_sdk')`
-5. 其他设置请参考上面快速接入
-
-#### 附录
-
-Native WXSample地址
-`https://github.com/apache/incubator-weex/tree/master/android/playground/app`
-`https://github.com/apache/incubator-weex/tree/master/ios/playground`
-
-Vue Examples 地址：
-[`http://weex-project.io/examples.html`](http://weex-project.io/examples.html)
-
-## 集成到 iOS
-
-### 通过 [CocoaPods](https://cocoapods.org/) 或者 [Carthage](https://github.com/Carthage/Carthage) 集成 Weex iOS SDK到你的项目
-
-首先假设你已经完成了安装 [iOS 开发环境](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html) 和 [CocoaPods](https://guides.cocoapods.org/using/getting-started.html)(或者[Carthage](https://github.com/Carthage/Carthage#installing-carthage))
-
-#### 第一步：添加依赖
-
-导入 Weex iOS SDK 到你已有的项目, 如果没有，可以[参考](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html)新建项目。
-在继续下面内容之前，确保你已有的项目目录有名称为 `Podfile` 文件，如果没有，创建一个，用文本编辑器打开(如果使用 Carthage ，请确保已有项目目录下存在 [`Cartfile`](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile))。选择其中一个集成方法就可以。
-
-- 添加依赖
-
- - 使用[CocoaPods](https://cocoapods.org/)
- WeexSDK 在 cocoaPods 上最新版本 可以在[这](https://cocoapods.org/pods/WeexSDK)获取
-
- 在 `Podfile` 文件中添加如下内容
-
- ```
- source 'git@github.com:CocoaPods/Specs.git'
- target 'YourTarget' do
- platform :ios, '7.0'
- pod 'WeexSDK', '0.17.0' ## 建议使用WeexSDK新版本
- end
- ```
- 打开命令行，切换到你已有项目 `Podfile` 这个文件存在的目录，执行 `pod install`，没有出现任何错误表示已经完成环境配置。
-
- - 使用 [Carthage](https://github.com/Carthage/Carthage)
-
- 可以在[这](https://github.com/apache/incubator-weex/tags)查询到当前最新的版本。
- 在 [`Cartfile`](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile) 中添加如下内容
- `github "apache/incubator-weex"`
- 在包含 `Cartfile` 文件目录的终端中执行 `carthage update`。
- [添加 framework 到你的工程](https://github.com/Carthage/Carthage#adding-frameworks-to-an-application)
-
-#### 第二步：初始化 Weex 环境
-
-在 `AppDelegate.m` 文件中做初始化操作，一般会在 `didFinishLaunchingWithOptions` 方法中如下添加。
-
-```
-//business configuration
-[WXAppConfiguration setAppGroup:@"AliApp"];
-[WXAppConfiguration setAppName:@"WeexDemo"];
-[WXAppConfiguration setAppVersion:@"1.0.0"];
-
-//init sdk environment
-[WXSDKEngine initSDKEnvironment];
-
-//register custom module and component，optional
-[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];
-[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
-
-//register the implementation of protocol, optional
-[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
-
-//set the log level
-[WXLog setLogLevel: WXLogLevelAll];
-```
-
-#### 第三步：渲染 weex Instance
-
-Weex 支持整体页面渲染和部分渲染两种模式，你需要做的事情是用指定的 URL 渲染 Weex 的 view，然后添加到它的父容器上，父容器一般都是 viewController。
-
-```objective-c
-#import <WeexSDK/WXSDKInstance.h>
-- (void)viewDidLoad
-{
- [super viewDidLoad];
-
- _instance = [[WXSDKInstance alloc] init];
- _instance.viewController = self;
- _instance.frame = self.view.frame;
-
- __weak typeof(self) weakSelf = self;
- _instance.onCreate = ^(UIView *view) {
- [weakSelf.weexView removeFromSuperview];
- weakSelf.weexView = view;
- [weakSelf.view addSubview:weakSelf.weexView];
- };
-
- _instance.onFailed = ^(NSError *error) {
- //process failure
- };
-
- _instance.renderFinish = ^ (UIView *view) {
- //process renderFinish
- };
- NSURL *url = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"js"];
- [_instance renderWithURL:url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
-}
-```
-
-WXSDKInstance 是很重要的一个类，提供了基础的方法和一些回调，如 `renderWithURL`, `onCreate`, `onFailed` 等，可以参见 `WXSDKInstance.h` 的声明。
-
-#### 第四步：销毁 Weex Instance
-
- 在 viewController 的 dealloc 阶段 销毁掉 Weex instance，释放内存，避免造成内存泄露。
-
- ```
- - (void)dealloc
- {
- [_instance destroyInstance];
- }
- ```
-
-### 导入 Weex SDK framework 到工程
-
- 可以通过源码编译出 Weex SDK，可以在新的 feature 或者 bugfix 分支，尝试最新的 feature。
- - 使用 git clone [Weex](https://github.com/apache/incubator-weex.git)
- SSH
- ```
- git clone git@github.com:apache/incubator-weex.git
- ```
- 或者 https
- ```
- git clone https://github.com/apache/incubator-weex.git
- ```
-
-- 打开 WeexSDK.xcodeproj in `weex/ios/sdk`
- 切换到如下图所示 target
- 
-
-- 编译当前target，可以直接用快捷键 `⌘ + b`
-
-- 最后找到产物在 `weex/ios/sdk/Products` 目录
- 
-
-- 导入 framework 到自己工程
- - 需要添加如下图系统依赖
- 
- - 添加 `-ObjC` 到工程设置中
- 
- - 添加 `js-framework` 到自己的 main bundle, `js-framework` 的位置在 WeexSDK.framework 中，文件名称为 `native-bundle-main.js`
- 
diff --git a/source/cn/guide/set-up-env.md b/source/cn/guide/set-up-env.md
deleted file mode 100644
index 5ca8731..0000000
--- a/source/cn/guide/set-up-env.md
+++ /dev/null
@@ -1,133 +0,0 @@
----
-title: 搭建开发环境
-type: guide
-group: 开发
-order: 5.1
-version: 2.1
-has_chapter_content: true
----
-
-<!-- toc -->
-
-使用 [dotWe](http://dotwe.org/vue) 对 Weex 尝鲜是一个不错的选择，但如果你想更专业的开发 Weex， dotWe 就不怎么够用了。本节会教你如何搭建本地开发环境进行 Weex 开发。
-
-## 第一步：安装依赖
-
-Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。首先，你需要 Node.js 和 [Weex CLi](https://github.com/weexteam/weex-toolkit)。
-
-安装 Node.js 方式多种多样，最简单的方式是在 [Node.js 官网](https://nodejs.org/en/) 下载可执行程序直接安装即可。
-
-对于 Mac，可以使用 [Homebrew](http://brew.sh/) 进行安装：
-
-```bash
-brew install node
-```
-
-> 更多安装方式可参考 [Node.js 官方信息](https://nodejs.org/en/download/)
-
-安装完成后，可以使用以下命令检测是否安装成功：
-
-```bash
-$ node -v
-v6.11.3
-$ npm -v
-3.10.10
-```
-
-通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit。
-
-> npm 是一个 JavaScript 包管理工具，它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区，同样，Weex 也将很多工具发布到社区方便开发者使用。
-
-**注意: ** 在`weex-toolkit`1.0.8版本后添加了npm5规范的`npm-shrinkwrap.json`用于锁定包依赖，故npm版本<5的用户需要通过`npm i npm@latest -g`更新一下npm的版本，使用前请确认版本是否正确。
-
-```bash
-$ npm install -g weex-toolkit
-$ weex -v //查看当前weex版本
-```
-
-weex-toolkit也支持直接升级子依赖，如：
-```
-weex update weex-devtool@latest //@后标注版本后，latest表示最新
-```
-
-国内开发者可以考虑使用淘宝的 npm 镜像 —— [cnpm](https://npm.taobao.org/) 安装 weex-toolkit
-
-
-```bash
-$ npm install -g cnpm --registry=https://registry.npm.taobao.org
-$ cnpm install -g weex-toolkit
-```
-
-*提示：*
-
-如果提示权限错误（*permission error*），使用 `sudo` 关键字进行安装
-
-```bash
-$ sudo cnpm install -g weex-toolkit
-```
-
-安装结束后你可以直接使用 `weex` 命令验证是否安装成功，它会显示 `weex` 命令行工具各参数：
-
-
-
-## 第二步：初始化
-
-然后初始化 Weex 项目：
-
-```bash
-$ weex create awesome-project
-```
-
-执行完命令后，在 `awesome-project` 目录中就创建了一个使用 Weex 和 Vue 的模板项目。
-
-## 第三步：开发
-
-之后我们进入项目所在路径，weex-toolkit 已经为我们生成了标准项目结构。
-
-在 `package.json` 中，已经配置好了几个常用的 npm script，分别是：
-
-- `build`: 源码打包，生成 JS Bundle
-- `dev`: webpack watch 模式，方便开发
-- `serve`: 开启HotReload服务器，代码改动的将会实时同步到网页中
-
-我们先通过 `npm install` 安装项目依赖。之后运行根目录下的 `npm run dev & npm run serve` 开启 watch 模式和静态服务器。
-
-然后我们打开浏览器，进入 `http://localhost:8080/index.html` 即可看到 weex h5 页面。
-
-初始化时已经为我们创建了基本的示例，我们可以在 `src/index.vue` 中查看。
-
-代码如下所示：
-
-```html
-<template>
- <div class="wrapper" @click="update">
- <image :src="logoUrl" class="logo"></image>
- <text class="title">Hello {{target}}</text>
- <text class="desc">Now, let's use vue to build your weex app.</text>
- </div>
-</template>
-
-<style>
- .wrapper { align-items: center; margin-top: 120px; }
- .title { padding-top:40px; padding-bottom: 40px; font-size: 48px; }
- .logo { width: 360px; height: 156px; }
- .desc { padding-top: 20px; color:#888; font-size: 24px;}
-</style>
-
-<script>
- export default {
- data: {
- logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
- target: 'World'
- },
- methods: {
- update: function (e) {
- this.target = 'Weex'
- console.log('target:', this.target)
- }
- }
- }
-</script>
-```
-
-关于 Weex 语法部分，你可以直接参考 [Vue Guide](https://vuejs.org/v2/guide/)，这里不再重复介绍。如果您想了解有关技术详情的更多信息，请继续阅读下一节。并且不要忘记在 [dotWe](http://dotwe.org/vue) 写代码并随时预览。
diff --git a/source/cn/guide/use-vue.md b/source/cn/guide/use-vue.md
deleted file mode 100644
index 93da9f5..0000000
--- a/source/cn/guide/use-vue.md
+++ /dev/null
@@ -1,265 +0,0 @@
----
-title: 在 Weex 中使用 Vue.js
-type: guide
-group: Overview
-order: 1.6
-version: 2.1
----
-
-<!-- toc -->
-
-自2016年2月17日发布 WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) 后， Weex 集成了 v2 版本的 Vue。Vue（读音 /vjuː/，类似于 view 的读音）是一套构建用户界面的渐进式框架。详情请参阅其[官方网站](https://cn.vuejs.org/)。
-
-> 如果没有特别指示，文章中的 "Vue.js" 或者 "Vue" 都指的是 v2 版本的 Vue。
-
-## 只含有运行时的构建版本
-
-如果你熟悉 Vue.js，你应该知道 Vue.js 有两种构建版本: [**运行时 + 编译器** 与 **只包含运行时**](https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6)。它们之间的区别在于编译器是否需要能够在运行时编译`template`选项。由于运行时构建版本比完整版本的构建版本轻约30%，为了更好的性能和更少的代码尺寸，Weex用的是只包含运行时的方式构建Vue。
-
-具体来说，差异如下：
-
-+ 定义组件时不支持[`template`](https://cn.vuejs.org/v2/api/#template)选项。
-+ 不支持使用[`x-templates`](https://cn.vuejs.org/v2/guide/components.html#X-Templates)。
-+ 不支持使用[`Vue.compile`](https://cn.vuejs.org/v2/api/#Vue-compile)。
-
-## 平台的差异
-
-Vue.js最初是为Web平台设计的。虽然可以基于Weex开发原生应用程序，但是仍然存在许多[Weex 与 Web 平台的差异](../wiki/platform-difference.html)。
-
-与 Web 平台的主要差异是: 上下文、DOM、样式和事件。
-
-### 上下文
-Weex 主要用于编写多页的应用程序，每一页相当于原生开发中的 *View* 或者 *Activity*，并且它有着自己的上下文。尤其`Vue`实例在每个页面都是不同的，甚至 Vue 的"全局"配置（`Vue.config.xxx`）也只会影响 Weex 上的单个页面。
-
-在此基础上，一些 Vue 的 SPA （单页面应用）技术，如 [Vuex](https://vuex.vuejs.org/zh-cn/) 和 [vue-router](https://router.vuejs.org/zh-cn/) 也将单页内生效。更通俗地说，“页面”概念在 SPA 技术中是虚拟的，但在 Weex 上却是真实的。
-
-无论如何，Vuex 和 vue-router 都是独立的库，它们都有自己的概念和使用场景，你仍然可以在 Weex 里[使用 Vuex 和 vue-router](./advanced/use-vuex-and-vue-router.html)。
-
-### DOM
-
-因为在 Android 和 iOS 上没有 DOM（Document Object Model），如果你要手动操作和生成 DOM 元素的话可能会遇到一些兼容性问题。在你使用现代前端框架的情况下，操作数据与组件而不是生成的元素是一个比较好的做法。
-
-一些与 DOM 相关的特性，比如 `v-html`，`vm.$el`，`template` 选项，在不同的平台上可能无法获得相同的反应。
-
-准确来说，[`vm.$el`](https://cn.vuejs.org/v2/api/#vm-el)属性类型在web环境下是`HTMLElement`，但是在移动端并没有这个类型。实际上，它是一个由 *Weex 文档对象模型* 定义的特殊数据结构。
-
-### 样式
-
-样式表和 CSS 规则是由 Weex js 框架和原生渲染引擎管理的。要实现完整的 CSS 对象模型（CSSOM：CSS Object Model）并支持所有的 CSS 规则是非常困难的，而且没有这个必要。
-
-出现性能考虑，**Weex 目前只支持单个类选择器，并且只支持 CSS 规则的子集**。详情请参阅 *[通用样式](../wiki/common-styles.html)* 与 *[文本样式](../wiki/text-styles.html)*。
-
-在 Weex 里， 每一个 Vue 组件的样式都是 *[scoped](https://vue-loader.vuejs.org/zh-cn/features/scoped-css.html)*。
-
-### 事件
-
-目前在 Weex 里不支持事件冒泡和捕获，因此 Weex 原生组件不支持[事件修饰符](https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6)，例如`.prevent`，` .capture`，`.stop`，` .self` 。
-
-此外，[按键修饰符](https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6)以及[系统修饰键](https://cn.vuejs.org/v2/guide/events.html#%E7%B3%BB%E7%BB%9F%E4%BF%AE%E9%A5%B0%E9%94%AE) 例如 `.enter`，`.tab`，`.ctrl`，`.shift` 在移动端基本没有意义，在 Weex 中也不支持。
-
-## Web 渲染器
-
-如果你想在网络上呈现你的页面，你需要 [weex-vue-render](https://github.com/weexteam/weex-vue-render) 来实现它。
-
-`weex-vue-render`是 Vue DSL 的 Web 渲染器， 它在 Web 上实现了 Weex 的内置组件和内置模块。详情请参阅[这里](https://github.com/weexteam/weex-vue-render)。
-
-## 单文件组件
-
-Vue 中的[单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html)（即`*.vue`文件）是一种特殊的文件格式，扩展名为`.vue`。这个模板会在构建时便于到`render`函数里。
-
-此外，所有的编辑器里都支持一个好的[语法高亮插件](https://github.com/vuejs/awesome-vue#source-code-editing)。
-
-> 在 Weex 中使用单个文件组件语法是一种很好的做法。
-
-### 编译目标
-
-因为平台的差异以及为了提高网络性能，`*.vue`文件需要用两种不同的方式来编译：
-
-+ 对于 Web 平台来说，你可以用任何正式的方式来编译源文件，例如 使用 **[Webpack](https://webpack.js.org/) + [vue-loader](https://vue-loader.vuejs.org/en/)** 或者 **Browserify + vueify** 来编译`*.vue`文件。
-+ 对于安卓与 iOS 平台来说， 你需要使用 [weex-loader](https://github.com/weexteam/weex-loader) 来编译`*.vue`文件。
-
-不同的平台使用不同的`bundles`，可以充分利用平台原有的特性，减少构建时的兼容性代码。但是源代码仍然是一样的，唯一的区别是编译它的方法。
-
-### 使用weex-loader
-
-[weex-loader](https://github.com/weexteam/weex-loader) 是一个 webpack 的 [loader](https://webpack.js.org/concepts/loaders/#using-loaders)，它能把`*.vue`文件转化为简单的javascript 模块用于安卓以及 iOS 平台。所有的特性和配置都是跟 [vue-loader](https://vue-loader.vuejs.org/en/) 一样的。
-
-需要注意的是，如果您的Webpack配置的*entry*选项是一个`*.vue`文件的话，你仍需要传递一个额外的`entry`参数。
-
-```js
-const webpackConfig = {
- // Add the entry parameter for the .vue file
- entry: './path/to/App.vue?entry=true'
-
- /* ... */
-
- use: {
- loaders: [{
- // matches the .vue file path which contains the entry parameter
- test: /\.vue(\?^^]+)?$/,
- loaders: ['weex-loader']
- }]
- }
-}
-```
-
-**如果你现在用的是`.js`文件做入口文件，你不需要写那些额外的参数。**推荐 webpack 配置的入口文件使用 javascript 文件。
-
-```js
-{
- entry: './path/to/entry.js'
-}
-```
-
-## 支持的功能
-
-### 全局配置
-
-> Vue “全局”配置只会影响 Weex 上的单一页面，配置不会在不同的 Weex 页面之间共享。
-
-| Vue 全局配置 | 是否支持 | 说明 |
-| -------------- | --------- | ----- |
-| [Vue.config.silent](https://cn.vuejs.org/v2/api/#silent) | <b class="tag-yes">支持</b> | - |
-| [Vue.config.optionMergeStrategies](https://cn.vuejs.org/v2/api/#optionMergeStrategies) | <b class="tag-yes">支持</b> | - |
-| [Vue.config.devtools](https://cn.vuejs.org/v2/api/#devtools) | <b class="tag-no">不支持</b> | 只在 Web 环境下支持 |
-| [Vue.config.errorHandler](https://cn.vuejs.org/v2/api/#errorHandler) | <b class="tag-yes">支持</b> | - |
-| [Vue.config.warnHandler](https://cn.vuejs.org/v2/api/#warnHandler) | <b class="tag-yes">支持</b> | - |
-| [Vue.config.ignoredElements](https://cn.vuejs.org/v2/api/#ignoredElements) | <b class="tag-yes">支持</b> | 不推荐 |
-| [Vue.config.keyCodes](https://cn.vuejs.org/v2/api/#keyCodes) | <b class="tag-no">不支持</b> | 在移动端无用 |
-| [Vue.config.performance](https://cn.vuejs.org/v2/api/#performance) | <b class="tag-no">不支持</b> | 与 *devtools* 一样 |
-| [Vue.config.productionTip](https://cn.vuejs.org/v2/api/#productionTip) | <b class="tag-yes">支持</b> | - |
-
-### 全局 API
-
-| Vue 全局 API | 是否支持 | 说明 |
-| -------------- | --------- | ----- |
-| [Vue.extend](https://cn.vuejs.org/v2/api/#Vue-extend) | <b class="tag-yes">支持</b> | - |
-| [Vue.nextTick](https://cn.vuejs.org/v2/api/#Vue-nextTick) | <b class="tag-yes">支持</b> | - |
-| [Vue.set](https://cn.vuejs.org/v2/api/#Vue-set) | <b class="tag-yes">支持</b> | - |
-| [Vue.delete](https://cn.vuejs.org/v2/api/#Vue-delete) | <b class="tag-yes">支持</b> | - |
-| [Vue.directive](https://cn.vuejs.org/v2/api/#Vue-directive) | <b class="tag-yes">支持</b> | - |
-| [Vue.filter](https://cn.vuejs.org/v2/api/#Vue-filter) | <b class="tag-yes">支持</b> | - |
-| [Vue.component](https://cn.vuejs.org/v2/api/#Vue-component) | <b class="tag-yes">支持</b> | - |
-| [Vue.use](https://cn.vuejs.org/v2/api/#Vue-use) | <b class="tag-yes">支持</b> | - |
-| [Vue.mixin](https://cn.vuejs.org/v2/api/#Vue-mixin) | <b class="tag-yes">支持</b> | - |
-| [Vue.version](https://cn.vuejs.org/v2/api/#Vue-version) | <b class="tag-yes">支持</b> | - |
-| [Vue.compile](https://cn.vuejs.org/v2/api/#Vue-compile) | <b class="tag-no">不支持</b> | Weex 用的是 [只包含运行时构建](https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6) |
-
-### 选项
-
-| Vue 选项 | 是否支持 | 说明 |
-| ---------- | --------- | ----- |
-| [data](https://cn.vuejs.org/v2/api/#data) | <b class="tag-yes">支持</b> | - |
-| [props](https://cn.vuejs.org/v2/api/#props) | <b class="tag-yes">支持</b> | - |
-| [propsData](https://cn.vuejs.org/v2/api/#propsData) | <b class="tag-yes">支持</b> | - |
-| [computed](https://cn.vuejs.org/v2/api/#computed) | <b class="tag-yes">支持</b> | - |
-| [methods](https://cn.vuejs.org/v2/api/#methods) | <b class="tag-yes">支持</b> | - |
-| [watch](https://cn.vuejs.org/v2/api/#watch) | <b class="tag-yes">支持</b> | - |
-| [el](https://cn.vuejs.org/v2/api/#el) | <b class="tag-yes">支持</b> | 在移动端`el`的值是无意义的 |
-| [template](https://cn.vuejs.org/v2/api/#template) | <b class="tag-no">不支持</b> | Weex 用的是 [只包含运行时构建](https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6) |
-| [render](https://cn.vuejs.org/v2/api/#render) | <b class="tag-yes">支持</b> | 不推荐|
-| [renderError](https://cn.vuejs.org/v2/api/#renderError) | <b class="tag-yes">支持</b> | - |
-| [directives](https://cn.vuejs.org/v2/api/#directives) | <b class="tag-yes">支持</b> | - |
-| [filters](https://cn.vuejs.org/v2/api/#filters) | <b class="tag-yes">支持</b> | - |
-| [components](https://cn.vuejs.org/v2/api/#components) | <b class="tag-yes">支持</b> | - |
-| [parent](https://cn.vuejs.org/v2/api/#parent) | <b class="tag-yes">支持</b> | 不推荐 |
-| [mixins](https://cn.vuejs.org/v2/api/#mixins) | <b class="tag-yes">支持</b> | - |
-| [extends](https://cn.vuejs.org/v2/api/#extends) | <b class="tag-yes">支持</b> | - |
-| [provide/inject](https://cn.vuejs.org/v2/api/#provide-inject) | <b class="tag-yes">支持</b> | 不推荐 |
-| [name](https://cn.vuejs.org/v2/api/#name) | <b class="tag-yes">支持</b> | - |
-| [delimiters](https://cn.vuejs.org/v2/api/#delimiters) | <b class="tag-yes">支持</b> | 不推荐 |
-| [functional](https://cn.vuejs.org/v2/api/#functional) | <b class="tag-yes">支持</b> | - |
-| [model](https://cn.vuejs.org/v2/api/#model) | <b class="tag-yes">支持</b> | - |
-| [inheritAttrs](https://cn.vuejs.org/v2/api/#inheritAttrs) | <b class="tag-yes">支持</b> | - |
-| [comments](https://cn.vuejs.org/v2/api/#comments) | <b class="tag-no">不支持</b> | - |
-
-### 生命周期钩子
-
-Vue 组件的实例生命周期钩子将在特定的阶段发出，详情请参考 Vue 组件的[生命周期图示](https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA)。
-
-| Vue 生命周期钩子 | 是否支持 | 说明 |
-| ------------------ | --------- | ----- |
-| [beforeCreate](https://cn.vuejs.org/v2/api/#beforeCreate) | <b class="tag-yes">支持</b> | - |
-| [created](https://cn.vuejs.org/v2/api/#created) | <b class="tag-yes">支持</b> | - |
-| [beforeMount](https://cn.vuejs.org/v2/api/#beforeMount) | <b class="tag-yes">支持</b> | - |
-| [mounted](https://cn.vuejs.org/v2/api/#mounted) | <b class="tag-yes">支持</b> | 和 Web 端不完全一样（Weex 里并没有真实 DOM） |
-| [beforeUpdate](https://cn.vuejs.org/v2/api/#beforeUpdate) | <b class="tag-yes">支持</b> | - |
-| [updated](https://cn.vuejs.org/v2/api/#updated) | <b class="tag-yes">支持</b> | - |
-| [activated](https://cn.vuejs.org/v2/api/#activated) | <b class="tag-no">不支持</b> | 不支持`<keep-alive>` |
-| [deactivated](https://cn.vuejs.org/v2/api/#deactivated) | <b class="tag-no">不支持</b> | 不支持`<keep-alive>` |
-| [beforeDestroy](https://cn.vuejs.org/v2/api/#beforeDestroy) | <b class="tag-yes">支持</b> | - |
-| [destroyed](https://cn.vuejs.org/v2/api/#destroyed) | <b class="tag-yes">支持</b> | - |
-| [errorCaptured](https://cn.vuejs.org/v2/api/#errorCaptured) | <b class="tag-yes">支持</b> | 在 Vue 2.5.0+， Weex SDK 0.18+ 中新增 |
-
-### 实例属性
-
-| Vue 实例属性 | 是否支持 | 说明 |
-| --------------------- | --------- | ----- |
-| [vm.$data](https://cn.vuejs.org/v2/api/#vm-data) | <b class="tag-yes">支持</b> | - |
-| [vm.$props](https://cn.vuejs.org/v2/api/#vm-props) | <b class="tag-yes">支持</b> | - |
-| [vm.$el](https://cn.vuejs.org/v2/api/#vm-el) | <b class="tag-yes">支持</b> | 移动端没有`HTMLElement` |
-| [vm.$options](https://cn.vuejs.org/v2/api/#vm-options) | <b class="tag-yes">支持</b> | - |
-| [vm.$parent](https://cn.vuejs.org/v2/api/#vm-parent) | <b class="tag-yes">支持</b> | - |
-| [vm.$root](https://cn.vuejs.org/v2/api/#vm-root) | <b class="tag-yes">支持</b> | - |
-| [vm.$children](https://cn.vuejs.org/v2/api/#vm-children) | <b class="tag-yes">支持</b> | - |
-| [vm.$slots](https://cn.vuejs.org/v2/api/#vm-slots) | <b class="tag-yes">支持</b> | - |
-| [vm.$scopedSlots](https://cn.vuejs.org/v2/api/#vm-scopedSlots) | <b class="tag-yes">支持</b> | - |
-| [vm.$refs](https://cn.vuejs.org/v2/api/#vm-refs) | <b class="tag-yes">支持</b> | - |
-| [vm.$isServer](https://cn.vuejs.org/v2/api/#vm-isServer) | <b class="tag-yes">支持</b> | 永远是`false`|
-| [vm.$attrs](https://cn.vuejs.org/v2/api/#vm-attrs) | <b class="tag-yes">支持</b> | - |
-| [vm.$listeners](https://cn.vuejs.org/v2/api/#vm-listeners) | <b class="tag-yes">支持</b> | - |
-
-### 实例方法
-
-| Vue 实例方法 | 是否支持 | 说明 |
-| ------------------- | --------- | ----- |
-| [vm.$watch()](https://cn.vuejs.org/v2/api/#vm-watch) | <b class="tag-yes">支持</b> | - |
-| [vm.$set()](https://cn.vuejs.org/v2/api/#vm-set) | <b class="tag-yes">支持</b> | - |
-| [vm.$delete()](https://cn.vuejs.org/v2/api/#vm-delete) | <b class="tag-yes">支持</b> | - |
-| [vm.$on()](https://cn.vuejs.org/v2/api/#vm-on) | <b class="tag-yes">支持</b> | - |
-| [vm.$once()](https://cn.vuejs.org/v2/api/#vm-once) | <b class="tag-yes">支持</b> | - |
-| [vm.$off()](https://cn.vuejs.org/v2/api/#vm-off) | <b class="tag-yes">支持</b> | - |
-| [vm.$emit()](https://cn.vuejs.org/v2/api/#vm-emit) | <b class="tag-yes">支持</b> | - |
-| [vm.$mount()](https://cn.vuejs.org/v2/api/#vm-mount) | <b class="tag-no">不支持</b> | 你不需要手动安装 Vue 实例 |
-| [vm.$forceUpdate()](https://cn.vuejs.org/v2/api/#vm-forceUpdate) | <b class="tag-yes">支持</b> | - |
-| [vm.$nextTick()](https://cn.vuejs.org/v2/api/#vm-nextTick) | <b class="tag-yes">支持</b> | - |
-| [vm.$destroy()](https://cn.vuejs.org/v2/api/#vm-destroy) | <b class="tag-yes">支持</b> | - |
-
-### 模板指令
-
-| Vue 指令 | 是否支持 | 说明 |
-| ------------- | --------- | ----- |
-| [v-text](https://cn.vuejs.org/v2/api/#v-text) | <b class="tag-yes">支持</b> | - |
-| [v-html](https://cn.vuejs.org/v2/api/#v-html) | <b class="tag-no">不支持</b> | Weex 中没有 HTML 解析器，这不是很好的实现 |
-| [v-show](https://cn.vuejs.org/v2/api/#v-show) | <b class="tag-no">不支持</b> | 不支持 `display: none;` |
-| [v-if](https://cn.vuejs.org/v2/api/#v-if) | <b class="tag-yes">支持</b> | - |
-| [v-else](https://cn.vuejs.org/v2/api/#v-else) | <b class="tag-yes">支持</b> | - |
-| [v-else-if](https://cn.vuejs.org/v2/api/#v-else-if) | <b class="tag-yes">支持</b> | - |
-| [v-for](https://cn.vuejs.org/v2/api/#v-for) | <b class="tag-yes">支持</b> | - |
-| [v-on](https://cn.vuejs.org/v2/api/#v-on) | <b class="tag-yes">支持</b> | 不支持[事件修饰符](https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6) |
-| [v-bind](https://cn.vuejs.org/v2/api/#v-bind) | <b class="tag-yes">支持</b> | - |
-| [v-model](https://cn.vuejs.org/v2/api/#v-model) | <b class="tag-yes">支持</b> | - |
-| [v-pre](https://cn.vuejs.org/v2/api/#v-pre) | <b class="tag-yes">支持</b> | - |
-| [v-cloak](https://cn.vuejs.org/v2/api/#v-cloak) | <b class="tag-no">不支持</b> | 只支持单类名选择器 |
-| [v-once](https://cn.vuejs.org/v2/api/#v-once) | <b class="tag-yes">支持</b> | - |
-
-### 特殊属性
-
-| Vue 特殊属性 | 是否支持 | 说明 |
-| --------------------- | --------- | ----- |
-| [key](https://cn.vuejs.org/v2/api/#key) | <b class="tag-yes">支持</b> | - |
-| [ref](https://cn.vuejs.org/v2/api/#ref) | <b class="tag-yes">支持</b> | - |
-| [slot](https://cn.vuejs.org/v2/api/#slot) | <b class="tag-yes">支持</b> | - |
-| [slot-scope](https://cn.vuejs.org/v2/api/#slot-scope) | <b class="tag-yes">支持</b> | 在 Vue 2.5.0+， Weex SDK 0.18+ 中新增 |
-| [scope](https://cn.vuejs.org/v2/api/#scope) | <b class="tag-yes">支持</b> | 不推荐 |
-| [is](https://cn.vuejs.org/v2/api/#is) | <b class="tag-yes">支持</b> | - |
-
-### 内置组件
-
-| Vue 内置组件 | 是否支持 | 说明 |
-| ---------------------- | --------- | ----- |
-| [component](https://cn.vuejs.org/v2/api/#component) | <b class="tag-yes">支持</b> | - |
-| [transition](https://cn.vuejs.org/v2/api/#transition) | <b class="tag-no">不支持</b> | 在移动端 *enter* 与 *leave* 的概念可能有点不同， 并且 Weex 不支持`display: none;` |
-| [transition-group](https://cn.vuejs.org/v2/api/#transition-group) | <b class="tag-no">不支持</b> | 跟 *transition* 一样 |
-| [keep-alive](https://cn.vuejs.org/v2/api/#keep-alive) | <b class="tag-no">不支持</b> | 移动端的原生组件不能被前端缓存 |
-| [slot](https://cn.vuejs.org/v2/api/#slot) | <b class="tag-yes">支持</b> | - |
diff --git a/source/cn/index.md b/source/cn/index.md
deleted file mode 100644
index baf4a7c..0000000
--- a/source/cn/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
-layout: index
-type: index
-subtitle: 快速、简洁且高效
----
diff --git a/source/cn/references/android-apis.md b/source/cn/references/android-apis.md
deleted file mode 100644
index 3c24a4f..0000000
--- a/source/cn/references/android-apis.md
+++ /dev/null
@@ -1,242 +0,0 @@
----
-title: Android APIs
-type: references
-group: API
-order: 2.2
-version: 2.1
----
-
-# Android APIs
-
-Weex 初步接入请参考：https://github.com/weexteam/article/issues/25
-
-## WXSDKEngine
-WXSDKEngine 是 Weex 对外的总入口。
-主要提供了一下功能：
-
-1. 注册自定义 module 和 component
-1. 设置相关 adapter 和获取 adapter。
-
-### 注册自定义 module 和 component
-#### component
-Weex提供多种注册 Component的方式，其中效率最高的为
-
- public static boolean registerComponent(IFComponentHolder holder, boolean appendTree, String ... names)
-
-* holder 为一个抽象工厂，用于创建component，可使用 SimpleComponentHolder 来快速的构建该对象。
-* appendTree 为一个扩展标记位，目前暂无意义。
-* names 表示该 component 在前端代码中名称，可把多个前端组件映射成一个 component 。
-
-#### module
-Weex 提供如下注册 Module 的方式：
-
- public static <T extends WXModule> boolean registerModule(String moduleName, Class<T> moduleClass,boolean global) throws WXException
-
-* moduleName 前端代码中module的名称
-* moduleClass module对应的Class，需要提供一个不含参数的构造函数，或使用默认构造函数。
-* global 是否为全局唯一，true 为全局唯一，false 表示和 WXSDKInstance 绑定。
-
-### Adapter 介绍
-第三方 App 可能需要实现下述的 Adapter，才能完整的使用Weex的能力。
-
-#### 图片适配器
-Weex 图片适配器负责根据URL，加载对应的图片，图片适配器分为两种：
-1. 将 URL 对应的图片加载到 View 上
-1. 将 URL 对应的图片加载到 Drawable 对象上。
-
-第一种图片适配器是必须实现，第二种图片适配器是可选实现。Weex对于这两种图片适配器均没有默认实现。
-
-##### IWXImgLoaderAdapter
-Weex 会把需要设置图片的 View 和 URL 透露出来，Native 端需要实现这个接口进行图片下载。
-
-接口定义如下：
-
- public interface IWXImgLoaderAdapter {
- void setImage(String url, ImageView view, WXImageQuality quality,WXImageStrategy strategy);
- }
-
-* `WXImageQuality` 表示图片的质量，`WXImageQuality` 取如下值 `LOW`, `NORMAL`, `HIGH`, `ORIGINAL` 图片质量依次变高。默认为 `LOW`。
-* `WXImageStrategy` 为扩展类，表示了图片是否可以裁剪 (isClipping) 锐化 (isSharpen) 占位符 (placeHolder) 等。
-
-##### IDrawableLoader
-Weex 会把需要设置图片的 对象(DrawableTarget) 和 URL 透露出来，Native 端需要实现这个接口进行图片下载。
-
-接入者需要实现DrawableTarget这个类，并实现
- void setDrawable(String url, DrawableTarget drawableTarget, DrawableStrategy drawableStrategy);
-* `DrawableTarget` 表示待加载的对象，需要是`StaticTarget`或`AnimatedTarget`中的一个。
-
-#### IWXHttpAdapter 网络下载适配器
-
-Weex 自定义了 `WXRequest` 和 `OnHttpListener`，Native 重载接口后可以从 Request 中获取URL，Header 等参数，网络请求完成后可以通过 `OnHttpListener` 进行回调通知。Weex 提供了默认网络请求：`DefaultWXHttpAdapter`， 使用的是 `HttpURLConnection` 进行网络请求。
-
-接口定义如下：
-
- public interface IWXHttpAdapter {
- void sendRequest(WXRequest request, OnHttpListener listener);
- }
-
-`WXRequest` 定义了网络请求相关的参数，请求方法，请求主体，超时时间。Weex默认超时时间是3000.
-
-`OnHttpListener` 定义了网络请求结束后对应方法。定义如下：
-
- interface OnHttpListener {
- /**
- * start request
- */
- void onHttpStart();
-
- /**
- * headers received
- */
- void onHeadersReceived(int statusCode,Map<String,List<String>> headers);
-
- /**
- * post progress
- * @param uploadProgress
- */
- void onHttpUploadProgress(int uploadProgress);
-
- /**
- * response loaded length (bytes), full length should read from headers (content-length)
- * @param loadedLength
- */
- void onHttpResponseProgress(int loadedLength);
-
- /**
- * http response finish
- * @param response
- */
- void onHttpFinish(WXResponse response);
- }
-
-#### IWXUserTrackAdapter 埋点适配器
-
-接口定义：
-
- public interface IWXUserTrackAdapter {
- void commit(Context context, String eventId, String type, WXPerformance perf, Map<String, Serializable> params);
- }
-
-* Native 实现接口后可以通过 `WXPerformance` 和 `params` 获取对应的信息。
-* WXPerformane 对应字段表示含义请参考文档：https://github.com/weexteam/article/issues/124
-
-后续随着开发 Weex 还会定义更多的 Adapter，此文档也会定时更新。
-
-#### IActivityNavBarSetter Weex导航适配器
-
-Weex 提供了 `WXNavigatorModule` 进行导航控制，对应的方法可以通过设置 `IActivityNavBarSetter` 接口进行定制。
-
-使用方法:
-
- WXSDKEngine.setActivityNavBarSetter(new IActivityNavBarSetter(){});
-
-#### IWXStorageAdapter
-Weex提供了`WXStorageModule`将一些数据存储到本地，WXStorageModule依赖`IWXStorageAdapter`来操作本地存储系统。 Weex提供了一个默认的实现，DefaultWXStorage。
-
-#### IWXJSExceptionAdapter
-Weex依赖`IWXJSExceptionAdapter`来实现JavaScript异常的处理，默认行为是忽略JavaScript异常。
-
-## WXSDKInstance
-
-### Weex 中 Native 和 JS 通信
-
-#### 自定义事件通知
-多用于某个自定义控件进行事件通知，例如自定义点击事件，响应下拉事件等。
-
- WXSDKInstance.java
-
- public void fireEvent(String elementRef,final String type, final Map<String, Object> data,final Map<String, Object> domChanges){ }
-
- public void fireEvent(String elementRef,final String type, final Map<String, Object> data){
- fireEvent(elementRef,type,data,null);
- }
-
- public void fireEvent(String elementRef, String type){
- fireEvent(ref,type,new HashMap<String, Object>());
- }
-
-* `elementRef`：事件发生的控件 ID。
-* `type`: 自定义事件，Weex 默认以 onXxxxx 开头为自定义事件。onPullDown (下拉事件)。
-* `data`: 需要透出的参数，例如当前控件的大小，坐标等其他信息。
-* `domChanges`：更新 ref 对应控件的 Attribute 和 Style。
-
-#### 事件回调
-多用于 Module 回调，例如定位 Module 完成后需要通知 JS。使用方法如下：
-
- public class WXLocation extends WXModule {
-
- @JSMethod
- public void getLocation(JSCallback callback){
- //获取定位代码.....
- Map<String,String> data=new HashMap<>();
- data.put("x","x");
- data.put("y","y");
- //通知一次
- callback.invoke(data);
- //持续通知
- callback.invokeAndKeepAlive(data);
-
- //invoke方法和invokeAndKeepAlive两个方法二选一
- }
-
-### Weex 和其他 Native 组件通讯
-
-#### 注册滑动事件
-
-Weex 获取滑动事件可以通过 `WXSDKInstance` 注册 `registerOnWXScrollListener` 监听
-
-接口定义如下：
-
- public interface OnWXScrollListener {
-
- /**
- * The view is not currently scrolling.
- */
- int IDLE = RecyclerView.SCROLL_STATE_IDLE;
- /**
- * The view is currently being dragged by outside input such as user touch input.
- */
- int DRAGGING = RecyclerView.SCROLL_STATE_DRAGGING;
- /**
- * The view is currently animating to a final position while not under
- * outside control.
- */
- int SETTLING = RecyclerView.SCROLL_STATE_SETTLING;
-
- /**
- * Callback method to be invoked when the view has been scrolled. This will be
- * called after the scroll has completed.
- * <p>
- * This callback will also be called if visible item range changes after a layout
- * calculation. In that case, dx and dy will be 0.
- *
- */
- void onScrolled(View view, int x, int y);
-
- /**
- * Callback method to be invoked when view's scroll state changes.
- *
- */
- void onScrollStateChanged(View view, int x, int y, int newState);
- }
-
-## 其他介绍
-### 动态适配容器
-
-因为 Android 手机的碎片化导致屏幕适配很困难。Weex 对外提供的接口 render 需要动态传入容器的宽高，但是传入的宽高有时会发生变化，例如 ActionBar 隐藏等，这是传入的 Weex 容器也要进行对应的变化。
-为了适应这种变化，Weex 提供了接口 `WXSDKInstance.setSize(int width, int height)` 来改变容器的大小。
-
- /**
- *
- * @param width 容器宽度
- * @param height 容器高度
- */
- public void setSize(int width, int height){};
-
-### 降级使用
-
-Weex 处于发展阶段会增加一些新的特性和功能，但是这些新的特性和功能都必须升级 SDK 才能实现，对于没有升级的应用应该怎么处理呢？可以使用降级功能。
-
-所谓降级功能就是 Weex 无法运行的版本或者手机，可以用 Weex h5 来代替。
-
-Native 端可以通过接口 `IWXRenderListener` 中的 `onException` 方法进行处理，如果是主动降级 errCode 是以“|”分割的字符。“|"前面的字符为1表示主动降级，Native 端可以跳转到对应的 H5 页面。或者用其他的方式提示用户当前环境不支持 Weex。
diff --git a/source/cn/references/broadcast-channel.md b/source/cn/references/broadcast-channel.md
deleted file mode 100644
index 3794025..0000000
--- a/source/cn/references/broadcast-channel.md
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: BroadcastChannel
-type: references
-group: API
-order: 2.8
-version: 2.1
----
-
-<!-- toc -->
-
-> `BroadcastChannel` 接口在 <span class="api-version">v0.9+</span> 及以上的版本中可用。
-
-在 [JS 执行环境](./runtime-context.html)中提到过，不同的 Weex 页面使用的是不同的执行环境，即使全局变量也是互相隔离的，然而使用 `BroadcastChannel` 是可以实现跨页面通信的。
-
-## API
-
-> *BroadcastChannel* 是 [W3C 规范](https://html.spec.whatwg.org/multipage/comms.html#broadcasting-to-other-browsing-contexts)中的一部分，其中依赖的 [MessageEvent](https://html.spec.whatwg.org/multipage/comms.html#messageevent) 对象也是。
-
-`BroadcastChannel` 的构造函数只接受一个参数，那就是“频道名称”（channel name）。
-
-```js
-const jb = new BroadcastChannel('007')
-```
-
-`BroadcastChannel` 接口的定义如下：
-
-```typescript
-declare interface BroadcastChannel = {
- name: string,
- postMessage: (message: any) => void;
- onmessage: (event: MessageEvent) => void;
- close: () => void;
-}
-```
-
-+ `name`: 监听的频道名称，用来区分不同的频道（跨频道不可通信）。
-+ `postMessage`: 用于在当前频道中广播消息。
-+ `onmessage`: 消息事件的处理函数。在频道中接收到广播消息之后，会给所有订阅者派发消息事件。
-+ `close`: 关闭当前频道。
-
-消息对象（`MessageEvent`）的类型定义如下：
-
-```typescript
-declare interface MessageEvent = {
- type: string, // "message"
- data: any
-}
-```
-
-## 通信过程
-
-
-
-就像使用无线电一样，每个页面通过创建一个具有相同频道名称的 BroadcastChannel 对象来加入特定频道。 然后实现 `onmessage` 接口来监听消息事件。通过调用 BroadcastChannel 对象上的 `postMessage()` 方法可以在频道中广播一条消息给所有订阅者。
-
-事实上，这是在特定频道的所有用户之间的全双工（双向）通信，每个订阅者都可以在频道中彼此收发任何消息，即使消息的发送者也能收到自己发出的消息事件。不同频道之间的通信过程是不会互相影响的。
-
-调用 BroadcastChannel 对象的 `close()` 方法可以离开一个频道，这个方法只关闭自己，并不影响其他订阅者。当某个 Weex 页面被销毁时，其中的所有订阅者将在 `destroyInstance` 中强制关闭。如果某个频道的所有用户都关闭了，这个频道对象将会被销毁，所占内存页能被回收。
-
-## 使用范例
-
-在页面 A 中：
-
-```js
-const Steve = new BroadcastChannel('Avengers')
-Steve.postMessage('Assemble!')
-```
-
-在页面 B 中：
-
-```js
-const Hulk = new BroadcastChannel('Avengers')
-```
-
-在页面 C 中：
-
-```js
-const Stark = new BroadcastChannel('Avengers')
-Stark.onmessage = function (event) {
- console.log(event.data) // Assemble!
- Stark.postMessage('I am Tony and I am leaving now.')
-}
-```
-
-页面 A 、B 、C 都创建一个监听了 `'Avengers'` 频道的 BroadcastChannel 对象，它们可以用这个对象实现互相通信。
-
-当 Steve 发布了 `'Assemble!'` 消息时，Stark 将收到一个消息事件，其 `data` 字段等于 `'Assemble!'`，然后也向频道中回复一条消息。但是 Hulk 并不会收到这些消息，因为他没有实现`onmessage` 方法，相当于没有接收频道中的消息，所以他实际上不是一个订阅者。
-
-## 注意事项
-
-> **消息事件中的对象并没有深度复制。**（这个特性可能会修改）
-
-在页面 A 中：
-
-```js
-const a = new BroadcastChannel('app')
-const list = ['A', 'B']
-a.postMessage({ list })
-```
-
-在页面 B 中：
-
-```js
-const b = new BroadcastChannel('app')
-b.onmessage = function (event) {
- // the `event.data.list` is a reference of `list` in page A
- event.data.list.push('C')
-}
-```
-
-在这个例子中，页面 B 中的 `event.data.list` 实际上是页面 A 中 `list` 对象的引用。在页面 B 中给列表添加一项 `'C'`，也将影响到页面 A 中的 `list` 对象。
-
-相比于深度复制，这个行为可以减少页面中的内存消耗。开发者在使用时不应该存储或修改 `event` 对象。
diff --git a/source/cn/references/components/a.md b/source/cn/references/components/a.md
deleted file mode 100644
index 1b00422..0000000
--- a/source/cn/references/components/a.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: <a>
-type: references
-group: 内置组件
-order: 8.01
-version: 2.1
----
-
-`<a>` 用于实现页面间的跳转。
-
-> **注意：** 除了本文档中注明的特性，`<a>` 的表现同 [`<div>`](./div.html) 一致。
-
-> **注意：** 不能在 `<a>` 中直接添加匿名文本，请用 [`<text>`](./text.html) 包裹文本。
-
-## 基本用法
-用 `<a>` 将待跳转的元素包裹起来即可。
-
- <a href="http://dotwe.org/raw/dist/a5e3760925ac3b9d68a3aa0cc0298857.bundle.wx">
- <text>Jump</text>
- </a>
-
-参见[示例](http://dotwe.org/vue/1cec564d6e25c169a0a9a92db3a00955)。
-
-## 属性
-| 属性名 | 类型 | 值 | 默认值 |
-| ------------- | ------ | --- | ------- |
-| `href` | String | {URL} | - | - |
-
-### `href`
-待跳转的页面URL，待跳转页面**需要**是一个Weex页面。如果待跳转页面是一个普通**HTML**，这会是一个**未定义**行为。
-
-## 样式
-`<a>` 支持[通用样式](../../wiki/common-styles.html)。
-
-## 事件
-`<a>`支持 [通用事件](../../wiki/common-events.html).
-
-### `click`
-> **注意：** `click` 事件的回调函数和 `href` 跳转的执行顺序**未被定义**。**不要**使用 `click` 来进行 `href` 跳转前的逻辑处理。
-
-## 示例
-* [`<a>` 的基本用法](http://dotwe.org/vue/1cec564d6e25c169a0a9a92db3a00955)。
diff --git a/source/cn/references/components/cell.md b/source/cn/references/components/cell.md
deleted file mode 100644
index 9a0a362..0000000
--- a/source/cn/references/components/cell.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: <cell>
-type: references
-group: 内置组件
-order: 8.08
-version: 2.1
----
-
-# <cell>
-
-用于定义列表中的子列表项，类似于 HTML 中的 `ul` 之于 `li`。Weex 会对 `<cell>` 进行高效的内存回收以达到更好的性能，该组件必须作为[`<list>`](./list.html) [`<recycler>`](./list.html) [`<waterfall>`](./waterfall.html)组件的子组件, 这是为了优化滚动时的性能。
-
-## 子组件
-
-支持所有 Weex 的组件作为它的子组件。
-
-## 属性
-* `keep-scroll-position {boolean}`: <span class="api-version">v0.11+</span> List 插入数据后是否保持上次滚动的位置
-
-## 样式
-
-**注意：**
-
-由于 `<cell>` 本身是一个容器，其布局由 `<list>` 进行管理，你不能给 `<cell>` 设定`flex`值。 `<cell>`的宽度等于父组件 `<list>` 的宽度，并且 `<cell>` 高度自适应，指定 `margin` 样式也不起作用。
-
-- 通用样式：支持所有通用样式
-
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](/cn/wiki/common-styles.html)
-
-## 事件
-
-- 通用事件
-
- 支持所有通用事件：
-
- - `click`
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](/cn/wiki/common-events.html)
-
-## 示例
-
-[cell 示例](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38)
diff --git a/source/cn/references/components/div.md b/source/cn/references/components/div.md
deleted file mode 100644
index b649a31..0000000
--- a/source/cn/references/components/div.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: <div>
-type: references
-group: 内置组件
-order: 8.03
-version: 2.1
----
-
-# <div>
-
-`<div>` 组件是用于包装其它组件的最基本容器。支持所有的通用样式、特性、`flexbox` 布局。其类似于 HTML 的 `<div>` 容器，但**不能**直接在里面添加文本（字符串），如果要展示文本，应该使用 `<text>` 组件。历史版本中，`<div>` 别名是 `<container>`，目前**已经弃用**。
-
-**注意：**
-
-`<div>` 嵌套层级不可过深，否则容易引起性能问题，建议控制在 **10** 层以内。
-
-一个简单例子：
-
-```html
-<template>
- <div>
- <text class="text">Hello World!</text>
- </div>
-</template>
-
-<style>
-.text {
- font-size: 70px;
- color: #ff0000
-}
-</style>
-
-<script></script>
-```
-
-[体验一下](http://dotwe.org/vue/ea4f528a0b381640b77ba03fcc69a90a)
-
-
-
-## 子组件
-
-`<div>` 基本容器组件，因此支持包括 `<div>` 在内的任何组件作为自己的子组件。因此，在写一个组件时，推荐外层使用 `<div>` 作为根容器。
-
-## 样式
-
-`<div>` 支持所有通用样式：
-
-- 盒模型
-- `flexbox` 布局
-- `position`
-- `opacity`
-- `background-color`
-
-查看 [组件通用样式](/cn/wiki/common-styles.html)
-
-## 事件
-
-`<div>` 支持所有通用事件：
-
-- `click`
-- `longpress`
-- `appear`
-- `disappear`
-
-查看 [通用事件](/cn/wiki/common-events.html)
-
-## 约束
-
-1. **不能**直接在 `<div>` 中添加文本。
-
- 错误示例，“Hello World!” 无法被正常渲染。
-
- ```html
- <template>
- <div>Hello World!</div>
- </template>
-
- <style>
- .text {
- font-size: 70;
- color: #ff0000
- }
- </style>
-
- <script></script>
- ```
-
- [体验一下](http://dotwe.org/vue/541f016de379c8764ddcdd9da0cabc24)
-
-2. `<div>` 在 native 中不可滚动，即使显式设置高度也一样。
-
- [错误示例](http://dotwe.org/vue/6795753d1a51662b8a7282b129dc7ddf)
-
-## 示例
-
-```html
-<template>
- <div>
- <div class="box"></div>
- </div>
-</template>
-
-<style scoped>
- .box {
- border-width: 2px;
- border-style: solid;
- border-color: #BBB;
- width: 250px;
- height: 250px;
- margin-top: 250px;
- margin-left: 250px;
- background-color: #EEE;
- }
-</style>
-```
-
-[try it](http://dotwe.org/vue/edfbd1806508cb86254b03dc0b8e28ac)
diff --git a/source/cn/references/components/image.md b/source/cn/references/components/image.md
deleted file mode 100644
index 67e84d1..0000000
--- a/source/cn/references/components/image.md
+++ /dev/null
@@ -1,158 +0,0 @@
----
-title: <image>
-type: references
-group: 内置组件
-order: 8.04
-version: 2.1
----
-
-`<image>` 用于在界面中显示单个图片。
-
-> **注意:** 在代码中请使用 `<image>` 标签, `<img>` 的存在只是因为兼容性原因，在将来的版本中可能删除。
-
-> **注意：** Weex 没有内置的图片库，因为一些开源项目如 [SDWebImage](https://github.com/rs/SDWebImage) 和[Picasso](https://github.com/square/picasso)已经能很好的解决这个问题， 所以在使用 `<image>` 之前，请在 native 侧先接入相应的 adapter 或者 handler。
->
-> 参见: [Android adapter](../android-apis.html#Adapter) 和 [iOS handler](../ios-apis.html#Handler-like-Android-Adapter)。
-
-## 基本用法
-
-> **注意：** `width`, `height` 和 `src`必须被提供，否则图片无法渲染。
-
-```html
-<image style="width:500px;height:500px" src="https://vuejs.org/images/logo.png"></image>
-```
-
-参见[示例](http://dotwe.org/vue/00f4b68b3a86360df1f38728fd0b4a1f)。
-
-## 子组件
-`<image>`不支持子组件。
-
-## 样式
-支持**[通用样式](../../wiki/common-styles.html)**。
-
-## 属性
-
-| 属性名 | 类型 | 值 | 默认值 |
-| ------------- | ------ | -------------------------- | ------- |
-| `placeholder` | String | {URL / Base64} | - |
-| `resize` | String | cover / contain / stretch | stretch |
-| `src` | String | {URL / Base64 } | - |
-
-> **注意：**您可以指定一个相对 bundle URL 的相对路径，相对路径将被重写为绝对资源路径(本地或远程)。参见: [资源路径](../../guide/advanced/path.html)。
-
-### `placeholder`
-
-占位图的 URL，在图片下载过程中将展示占位图，图片下载完成后将显示`src`中指定的图片。 ([示例](http://dotwe.org/vue/712ef102fc5e073b6c7e3b701545681c))
-
-### `resize`
-
-
-
-- `contain`：缩放图片以完全装入`<image>`区域，可能背景区部分空白。 ([示例](http://dotwe.org/vue/89be94dcd1fec73b77246ec46c678914))
-- `cover`：缩放图片以完全覆盖`<image>`区域，可能图片部分看不见。 ([示例](http://dotwe.org/vue/f38e311d2e6b2af87f0a65a8f37d9490))
-- `stretch`：`默认值`. 按照`<image>`区域的宽高比例缩放图片。([示例](http://dotwe.org/vue/f38e311d2e6b2af87f0a65a8f37d9490))
-
-resize属性和[`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)的理念很相似。
-
-### `src`
-
-要显示图片的 URL，该属性是 `<image>` 组件的强制属性。
-
-#### 支持的图片格式
-
-Weex没有提供必须支持的图片格式列表，主要依赖于你正在使用的图片 adapter 或者 handler。例如，如果你使用 [SDWebImage](https://github.com/rs/SDWebImage#supported-image-formats) 作为iOS上的图片 handler，你可以使用像 JPEG、PNG、GIF、WebP 等图片格式。
-
-> **Note:** Android 默认的Image Adapter不支持 gif。
-
-## Component 方法
-
-### `save` <span class="api-version">v0.16.0+</span>
-
-保存图片内容到本地文件或相册，此操作可能需要设备相关权限。
-
-**参数**:
-
-* `callback`：{Function} 在图片被写入到本地文件或相册后的回调，回调参数：
- * `result`：{Object} 回调结果对象，属性列表：
- * `success`：{Boolean} 标记图片是否已写入完成。
- * `errorDesc`：{String} 如果图像没有成功写入，该字符串包含了详细的错误描述。
-
-**返回值**: null
-
-> **注意**: 你必须加入`NSPhotoLibraryAddUsageDescription` 和 `NSPhotoLibraryAddUsageDescription` (iOS 11) 以获得访问 iOS 系统相册权限. 参见: [Cocoa Keys](https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html)
-
-#### 使用 `save` 方法
-
-在 `<image>`标签上增加 `ref` 属性 (Vue.js *[Child Component Refs](https://vuejs.org/v2/guide/components.html#Child-Component-Refs)*) ：
-
-```html
-<image ref="poster" src="path/to/image.png"></image>
-```
-
-获取组件引用并使用 `save` 方法:
-
-```js
-const $image = this.$refs.poster
-$image.save(result => {
- if (result.success) {
- // Do something to hanlde success
- } else {
- console.log(result.errorDesc)
- // Do something to hanlde failure
- }
-})
-```
-
-参见 [完整例子](http://dotwe.org/vue/fadcd44a7031943ff0feaaf1895df414).
-
-## 事件
-
-支持 **[通用事件](../../wiki/common-events.html)**.
-
-### `load`
-
-当加载完成 `src` 指定的图片时，`load`事件将被触发。
-
-**事件对象**:
-
-- `success`: {Boolean} 标记图片是否成功加载。
-
-
-- `size`: {Object} 加载的图片大小对象，属性列表：
- - `naturalWidth`: {Number} 图片宽度，如果图片加载失败则为0。
- - `naturalHeight`: {Number} 图片高度，如果图片加载失败则为0。
-
-#### 处理 `load` 事件
-
-在 `<image>` 标签上绑定 `load` 事件：
-
-```html
-<image @load="onImageLoad" src="path/to/image.png"></image>
-```
-
-增加事件处理函数：
-
-```js
-export default {
- methods: {
- onImageLoad (event) {
- if (event.success) {
- // Do something to hanlde success
- }
- }
- }
-}
-```
-
-参见[完整示例](http://dotwe.org/vue/94de9307517240dec066d2ea57fe54a0)。
-
-## 使用说明
-
-- 在使用 `<image>` 之前，请在 native 侧先接入相应的 adapter 或者 handler。
-- `<image>` 必须指定样式中的宽度和高度。
-- `<image>` 不支持内嵌子组件。
-
-## 示例
-
-* [Base64 示例](http://dotwe.org/vue/ba477790c85ea12bbf7ad3a5f0885b5c)
-* [Lazy load image 示例](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)
diff --git a/source/cn/references/components/index.md b/source/cn/references/components/index.md
deleted file mode 100644
index fe19864..0000000
--- a/source/cn/references/components/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: 内置组件
-type: references
-group: 内置组件
-order: 8.00
-version: 2.1
----
-
-- [`<div>`](./div.html)
-- [`<image>`](./image.html)
-- [`<text>`](./text.html)
-- [`<a>`](./a.html)
-- [`<list>`](./list.html)
-- [`<cell>`](./cell.html)
-- [`<recycle-list>`](./recycle-list.html)
-- [`<refresh>` & `<loading>`](./refresh.html)
-- [`<scroller>`](./scroller.html)
-- [`<input>`](./input.html)
-- [`<textarea>`](./textarea.html)
-- [`<switch>`](./switch.html)
-- [`<slider>`](./slider.html)
-- [`<indicator>`](./indicator.html)
-- [`<video>`](./video.html)
-- [`<waterfall>`](./waterfall.html)
-- [`<web>`](./web.html)
diff --git a/source/cn/references/components/indicator.md b/source/cn/references/components/indicator.md
deleted file mode 100644
index 283449b..0000000
--- a/source/cn/references/components/indicator.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: <indicator>
-type: references
-group: 内置组件
-order: 8.05
-version: 2.1
----
-
-# <indicator>
-
-`<indicator>` 组件通常用于显示轮播图指示器效果，必须充当 [`<slider>`](./slider.html) 组件的子组件使用。
-
-## 子组件
-
-`<indicator>` 组件没有任何子组件。
-
-## 样式
-
-`<indicator>` 组件有一些私有样式，如下：
-
-- `item-color {color}`：indicator指示点未被选中时的颜色，默认值为 `#CCCCCC`
-
-- `item-selected-color {color}`：indicator指示点被选中时的颜色，默认值为 `#444444`
-
-- `item-size {number}`：指示点的半径，默认为 `5px`
-
-- 通用样式
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](/cn/wiki/common-styles.html)
-
-**注意 1：**
-
-这里需要注意一点，`<indicator>` 的 `position` 不仅依赖 `top`、`left`、`bottom` 和 `right` 样式，同时会参考 `width` 和 `height` 样式。`<indicator>` 默认的宽高继承于 `<slider>`，如果 `<slider>` 未设置宽高，需要显式的给 `<indicator>` 设置宽高值。
-
-**注意 2：**
-
-`background-color` 不推荐使用，建议使用 `item-color` 和 `item-selected-color` 代替。
-
-
-## 事件
-
-支持所有通用事件。
-
-- `click`
-- `longpress`
-- `appear`
-- `disappear`
-
-查看 [通用事件](/cn/wiki/common-events.html)
-
-## 约束
-
-1. 不支持子组件，向 indicator 中添加的所有子元素都会被忽略。
-
-## 示例
-
-[查看完整示例](http://dotwe.org/vue/e1b4fd8a37ed4cafd8f5e161698754aa)
diff --git a/source/cn/references/components/input.md b/source/cn/references/components/input.md
deleted file mode 100644
index be915e3..0000000
--- a/source/cn/references/components/input.md
+++ /dev/null
@@ -1,359 +0,0 @@
----
-title: <input>
-type: references
-group: 内置组件
-order: 8.06
-version: 2.1
----
-
-# <input>
-
-Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组件。 `<input>` 组件的工作方式因 `type` 属性的值而异，比如 `text`， `password`，`url`，`email`，`tel` 等。
-
-**注意：**
-
-此组件不支持 `click` 事件。请监听 `input` 或 `change` 来代替 `click` 事件。
-
-## 子组件
-
-不支持子组件。
-
-## 特性
-
-- `type {string}`：控件的类型，默认值是 `<text>`。`type` 值可以是 `text`，`date`，`datetime`，`email`， `password`，`tel`，`time`，`url`，`number` 。每个 `type` 值都符合 W3C 标准。
-- `value {string}`：组件的默认内容。
-- `placeholder {string}`：提示用户可以输入什么。 提示文本不能有回车或换行。
-- `disabled {boolean}`：布尔类型的数据，表示是否支持输入。通常 `click` 事件在 `disabled` 控件上是失效的。
-- `autofocus {boolean}`：布尔类型的数据，表示是否在页面加载时控件自动获得输入焦点。
-- `maxlength {nubmer}`：<sup class="wx-v">v0.7</sup>一个数值类型的值，表示输入的最大长度。
-- `return-key-type {string}`：<sup class="wx-v">v0.11</sup>键盘返回键的类型,支持 defalut;go;next;search;send,done。
-- `auto-capitalization-type {string}`：键盘自动大小写类型,支持 none;words;sentences;allCharacters
-- `singleline {boolean}`：控制内容是否只允许单行
-- `max-length {number}`：控制输入内容的最大长度
-- `lines`：控制输入内容的最大行数
-- `max`：控制当`type`属性为`date`时选择日期的最大时间，格式为`yyyy-MM-dd`
-- `min`：控制当`type`属性为`date`时选择日期的最小时间，格式为`yyyy-MM-dd`
-
-## 样式
-
-- `placeholder-color {color}`：placeholder 字符颜色。默认值是 `#999999`
-
-
-- 伪类<span class="api-version">v0.9.5+</span>: `input` 支持以下伪类：
-
- * `active`
- * `focus`
- * `disabled`
- * `enabled`
-
-- text styles
- - 支持 `color`
- - 支持 `font-size`
- - 支持 `font-style`
- - 支持 `font-weight`
- - 支持 `text-align`
-
- 查看 [文本样式](/cn/wiki/text-styles.html)
-
-- 通用样式：支持所有通用样式
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](/cn/wiki/common-styles.html)
-
-## 事件
-
-- `input`: 输入字符的值更改。
-
- 事件中 event 对象属性：
-
- - `value`: 触发事件的组件；
- - `timestamp`: 事件发生时的时间戳,仅支持Android。
-
-- `change`: 当用户输入完成时触发。通常在 `blur` 事件之后。
-
- 事件中 event 对象属性：
-
- - `value`: 触发事件的组件；
-
- - `timestamp`: 事件发生时的时间戳,仅支持Android。
-
-- `focus`: 组件获得输入焦点。
-
- 事件中 event 对象属性：
-
- - `timestamp`: 事件发生时的时间戳,仅支持Android。
-
-- `blur`: 组件失去输入焦点。
-
- 事件中 event 对象属性：
-
- - `timestamp`: 事件发生时的时间戳,仅支持Android。
-- `return`: 键盘点击返回键。
-
- 事件中 event 对象属性：
-
- - `returnKeyType`: 事件发生时的返回键类型。
- - `value`: 触发事件的组件的文本；
-
-- 通用事件
-
- **注意：**
- 不支持 `click` 事件。 请监听 `input` 或 `change` 事件代替。
-
- 支持以下通用事件：
-
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](/cn/wiki/common-events.html)
-
-
-
-## Methods
-
-- `focus()` <span class="api-version">v0.9+</span>
-
- `focus()` 方法用于将 `input` 组件聚焦。
-
-- `blur()` <span class="api-version">v0.9+</span>
-
- `blur()` 方法用于从 `input` 组件中移除焦点并关闭软键盘（如果它具有焦点）。
-- `setSelectionRange(selectionStart,selectionEnd)` <span class="api-version">v0.11+</span>设置文本选区
- - `selectionStart {number}`：设置文本选区的起始点
- - `selectionEnd {number}`：设置文本选区的起终点
-- `getSelectionRange(callback[selectionStart,selectionEnd])` <span class="api-version">v0.11+</span>设置文本选区
- - `selectionStart {number}`：获取文本选区的起始点
- - `selectionEnd {number}`：获取文本选区的起终点
-- `setTextFormatter(params)`<span class="api-version">v0.18+</span>：这是一个非常有用的特性，可以对input设置一组对输入的内容进行实时格式化的规则。
- - `params {object}`：格式化规则，包含以下参数：
- - `formatRule {regexp}`：格式化匹配的正则表达式
- - `formatReplace {string}`：格式化匹配后用于替换的内容
- - `recoverRule {regexp}`：从格式化后的内容还原原始内容的正则表达式
- - `recoverReplace {string}`：还原原始内容时用于替换的内容
-
-`setTextFormatter` 的详细使用方法请参照 [示例](http://dotwe.org/vue/bea3cb0cad697829d8d343552a2b7b77)
-## 约束
-
-目前不支持 `this.$el(id).value = ''` 这种方式改写 input value。只支持在 `<input>` 组件的 `input`、`change` 事件中改写。
-
-## 示例
-
-```html
-<template>
- <div>
- <div>
- <text style="font-size: 40px">oninput: {{txtInput}}</text>
- <text style="font-size: 40px">onchange: {{txtChange}}</text>
- <text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
- <text style="font-size: 40px">selection: {{txtSelection}}</text>
-
- </div>
- <scroller>
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text>
- </div>
- <input type="text" placeholder="Input Text" class="input" :autofocus=true value="" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = password</text>
- </div>
- <input type="password" placeholder="Input Password" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = url</text>
- </div>
- <input type="url" placeholder="Input URL" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = email</text>
- </div>
- <input type="email" placeholder="Input Email" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = tel</text>
- </div>
- <input type="tel" placeholder="Input Tel" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = time</text>
- </div>
- <input type="time" placeholder="Input Time" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = number</text>
- </div>
- <input type="number" placeholder="Input number" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = date</text>
- </div>
- <input type="date" placeholder="Input Date" class="input" @change="onchange" @input="oninput" max="2017-12-12" min="2015-01-01"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = default</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="default" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = go</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="go" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = next</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="next" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = search</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="search" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = send</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="send" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = done</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="done" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">function focus() & blur()</text>
- </div>
- <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
- <text class="button" value="Focus" type="primary" @click="focus"></text>
- <text class="button" value="Blur" type="primary" @click="blur"></text>
- </div>
-
- <input type="text" placeholder="Input1" class="input" value="" ref="input1"/>
- </div>
-
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input selection</text>
- </div>
- <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
- <text class="button" value="setRange" type="primary" @click="setRange"></text>
- <text class="button" value="getSelectionRange" type="primary" @click="getSelectionRange"></text>
- </div>
- <input type="text" ref="inputselection" placeholder="please input" value="123456789" class="input" @change="onchange" @return = "onreturn" @input="oninput"/>
- </div>
-
-
-
- </scroller>
- </div>
-</template>
-
-<style scoped>
- .input {
- font-size: 60px;
- height: 80px;
- width: 750px;
- }
- .button {
- font-size: 36;
- width: 200;
- color: #41B883;
- text-align: center;
- padding-top: 10;
- padding-bottom: 10;
- border-width: 2;
- border-style: solid;
- margin-right: 20;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
-</style>
-
-<script>
- module.exports = {
- data: function () {
- return {
- txtInput: '',
- txtChange: '',
- txtReturnType: '',
- txtSelection:'',
- autofocus: false
- };
- },
- methods: {
- ready: function () {
- var self = this;
- setTimeout(function () {
- self.autofocus = true;
- }, 1000);
- },
- onchange: function (event) {
- this.txtChange = event.value;
- console.log('onchange', event.value);
- },
- onreturn: function (event) {
- this.txtReturnType = event.returnKeyType;
- console.log('onreturn', event.type);
- },
- oninput: function (event) {
- this.txtInput = event.value;
- console.log('oninput', event.value);
- },
- focus: function () {
- this.$refs['input1'].focus();
- },
- blur: function () {
- this.$refs['input1'].blur();
- },
- setRange: function() {
- console.log(this.$refs["inputselection"]);
- this.$refs["inputselection"].setSelectionRange(2, 6);
- },
- getSelectionRange: function() {
- console.log(this.$refs["inputselection"]);
- var self = this;
- this.$refs["inputselection"].getSelectionRange(function(e) {
- self.txtSelection = e.selectionStart +'-' + e.selectionEnd;
- });
- }
- }
- };
-</script>
-```
-
-[体验一下](http://dotwe.org/vue/3470e4d0194f3879a72d38e2ab02cc9f)
diff --git a/source/cn/references/components/list.md b/source/cn/references/components/list.md
deleted file mode 100644
index 50630ec..0000000
--- a/source/cn/references/components/list.md
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: <list>
-type: references
-group: 内置组件
-order: 8.07
-version: 2.1
----
-
-# <list>
-
-`<list>` 组件是提供垂直列表功能的核心组件，拥有平滑的滚动和高效的内存管理，非常适合用于长列表的展示。最简单的使用方法是在 `<list>` 标签内使用一组由简单数组 `repeat` 生成的 `<cell>` 标签填充。
-
-## 子组件
-
-`<list>` 组件支持更多高级功能，由以下子组件提供：
-
-- `<cell>`
-
- 用于定义列表中的子列表项，类似于 HTML 中的 `ul` 之于 `li`。Weex 会对 `<cell>` 进行高效的内存回收以达到更好的性能。
-
- 使用文档请查看 [`<cell>`](./cell.html)。
-
-- `header` <sup class="wx-v">0.6.1+</sup>
-
- 当 `<header>` 到达屏幕顶部时，吸附在屏幕顶部。
-
-- `<refresh>`
-
- 用于给列表添加下拉刷新的功能。
-
- 使用文档请查看 [`<refresh>`](./refresh.html)
-
-- `<loading>`
-
- `<loading>` 用法与特性和 `<refresh>` 类似，用于给列表添加上拉加载更多的功能。
-
- 使用文档请查看 [`<loading>`](./loading.html)
-
-**注意：**
-
-`<list>` 的子组件只能包括以上四种组件或是 `fix` 定位的组件，其他形式的组件将不能被正确的渲染。
-
-## 特性
-- `show-scrollbar {boolean}`：可选值为 true/ false，默认值为 true。控制是否出现滚动条。
-- `loadmoreoffset {number}`：默认值为 0，触发 `loadmore` 事件所需要的垂直偏移距离（设备屏幕底部与 `<list>` 底部之间的距离）。当 `<list>` 的滚动条滚动到足够接近 `<list>` 底部时将会触发 `loadmore` 这个事件。
-- `offset-accuracy {number}` <sup class="wx-v">0.11+</sup>：控制`onscroll`事件触发的频率，默认值为10，表示两次`onscroll`事件之间列表至少滚动了10px。注意，将该值设置为较小的数值会提高滚动事件采样的精度，但同时也会降低页面的性能。
-- `pagingEnabled {boolean}`：可选值为 true/ false，默认值为 false。控制是否每次滚动一个cell，并最终定位在元素中心位置，类似垂直的viewpage交互。则对应 `0`<span class="api-version">v0.20+</span>.[pagingEnabled示例](http://dotwe.org/vue/1323c218072f17f10e14a5c336dac3c4)
-- `scrollable {boolean}`：可选值为 true/ false，默认值为 true。控制list是否可以滚动
-
- 
-
-## 样式
-
-- 通用样式：支持所有通用样式
-
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](/cn/wiki/common-styles.html)
-
-## 事件
-
-- `loadmore` <sup class="wx-v">0.5+</sup>：如果列表滚动到底部将会立即触发这个事件，你可以在这个事件的处理函数中加载下一页的列表项。
-- `scroll` <sup class="wx-v">0.11+</sup>: 列表发生滚动时将会触发该事件，事件的默认抽样率为10px，即列表每滚动10px触发一次，可通过属性`offset-accuracy`设置抽样率。
-
- 事件中 event 对象属性：
- - `contentSize {Object}`：列表的内容尺寸
- - `width {number}`: 列表内容宽度
- - `height {number}`: 列表内容高度
- - `contentOffset {Object}`: 列表的偏移尺寸
- - `x {number}`: x轴上的偏移量
- - `y {number}`: y轴上的偏移量
-
- [简单示例](http://dotwe.org/vue/edd19cdf2f03fbe857b76fadd65a08c3)
-
- 
-
- [滑动加载示例](http://dotwe.org/vue/2170622cc99895e5ad6af89d06355b84)
-
- [头部sticky示例](http://dotwe.org/vue/2ecfe0a1c7b820c9d9c9965e1a8cde19)
-
- [cell appear事件](http://dotwe.org/vue/ce0e953112b132e5897725b3149f3924)
-
-- 通用事件
-
- 支持所有通用事件：
-
- - `click`
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](/cn/wiki/common-events.html)
-
-## 扩展
-
-### scrollToElement(node, options)
-
-滚动到列表某个指定项是常见需求，`<list>` 拓展了该功能支持滚动到指定 `<cell>`。通过 `dom` module 访问，更多信息可参考 [dom module](../modules/dom.html) 。
-
-### resetLoadmore() <sup class="wx-v">0.9+</sup>
-在默认情况下，触发`loadmore`事件后，如果列表中内容没有发生变更，则下一次滚动到列表末尾时将不会再次触发`loadmore`事件，你可以通过调用`resetLoadmore()`方法来打破这一限制，调用该方法后，下一次滚动到列表末尾时将强制触发`loadmore`。
-
-#### 参数
-
-- `node {node}`：指定目标节点。
-- `options {Object}`：
- - `offset {number}`：一个到其可见位置的偏移距离，默认是 0
-
-## 约束
-
-1. **不允许**相同方向的 `<list>` 或者 `<scroller>` 互相嵌套，换句话说就是嵌套的 `<list>`/`<scroller>` 必须是不同的方向。
-
- 举个例子，**不允许**一个垂直方向的 `<list>` 嵌套的一个垂直方向的 `<scroller>` 中，但是一个垂直方向的 `<list>` 是可以嵌套的一个水平方向的 list 或者 `<scroller>` 中的。
-
-2. `<list>` 为根节点时无需设置高度，但是内嵌 `<list>` 高度**必须可计算**，你可以使用 `flex` 或 `postion` 将 `<list>` 设为一个响应式高度（例如全屏显示）, 也可以显式设置 `<list>` 组件的 `height` 样式。
-
-## 示例
-
-[滑动加载](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38)
diff --git a/source/cn/references/components/loading.md b/source/cn/references/components/loading.md
deleted file mode 100644
index f9fb60e..0000000
--- a/source/cn/references/components/loading.md
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: <loading>
-type: references
-group: 内置组件
-order: 8.10
-version: 2.1
----
-
-# <loading>
-
-### <span class="weex-version">v0.6.1+</span>
-
-`<loading>` 为容器提供上拉加载功能，用法和属性与 `<refresh>` 类似。
-> **注意：**`<loading>` 是 `<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>` 的子组件，只能在被它们包含时才能被正确渲染。
-
- - 简单示例：
-
-```
-<list>
- ...
- ...
- <loading>
- ...
- </loading>
-</list>
-```
- - 查看 [完整示例](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
-
-## 子组件
-
- - 诸如 `<text>`、`<image>` 之类的任何组件，都可以放到 `<loading>` 进行渲染。
-
- - 特殊子组件 `<loading-indicator>`: 只能作为 `<refresh>` 和 `<loading>` 的子组件使用，拥有默认的动画效果实现。
-
- - 简单示例：
-
-```
-<loading>
- <text>Loading</text>
- <loading-indicator></loading-indicator>
- ...
-</loading>
-```
- - 查看 [完整示例](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
-
-## 属性
-
-| 属性名 | 类型 | 值 | 默认值 |
-| ------------- | ------ | -------------------------- | ------- |
-| `display` | String | show / hide | show |
-
-### `display`
-
- - `show`：如果 `<loading>` 中包含 `<loading-indicator>`，则将其显示并开始默认动画。
-
- - `hide`：收起 loading view，如果 `<loading>` 中包含 `<loading-indicator>`，则将其视图隐藏。
-
-> **注意：** `display` 的设置必须成对出现，即设置 `display="show"`,必须有对应的 `display="hide"`。
-
- - 简单示例：
-
- ```
- <template>
- <list>
- ...
- ...
- <loading @loading="onloading" :display="loadinging ? 'show' : 'hide'">
- ...
- </loading>
- ...
- </list>
- </template>
-
- <script>
- ...
- methods: {
- onloading (event) {
- this.loadinging = true
- setTimeout(() => {
- this.loadinging = false
- }, 2000)
- },
- }
- </script>
- ```
- - 查看 [完整示例](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
-
- - 支持所有通用属性。查看 [组件通用属性](../common-attrs.html)
-
-## 样式
-
- - 支持所有通用样式。查看 [组件通用样式](/cn/wiki/common-styles.html)
-
-## 事件
-
-### `loading`
-
- - 当 `<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>` 被上拉时触发。
-
- - 查看 [完整示例](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
-
-## 示例
-
- - [完整示例](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
diff --git a/source/cn/references/components/recycle-list.md b/source/cn/references/components/recycle-list.md
deleted file mode 100644
index d06537d..0000000
--- a/source/cn/references/components/recycle-list.md
+++ /dev/null
@@ -1,256 +0,0 @@
----
-title: <recycle-list>
-type: references
-group: 内置组件
-order: 8.09
-version: 2.1
----
-
-<!-- toc -->
-
-`<recycle-list>` <span class="api-version">v0.18+</span> 是一个新的列表容器，具有回收和复用的能力，可以大幅优化内存占用和渲染性能。
-
-> 设计思路请参考 [Design.md](https://github.com/Hanks10100/weex-native-directive/blob/master/Design.md)，具体的实现细节请参考 [Implementation.md](https://github.com/Hanks10100/weex-native-directive/blob/master/Implementation.md)。
-
-## 基本用法
-
-原有 `<list>` 和 `<cell>` 组件的功能不受影响，针对新功能提供了新的 `<recycle-list>` 和 `<cell-slot>` 组件。如果想利用列表回收和复用的特性，使用新组件即可。
-
-> 该功能部分依赖与编译工具，请确保 `weex-loader` 的版本升级到最新（v0.7.2+）。
-
-## `<recycle-list>`
-
-`<recycle-list>` 是一个新的列表容器，只能使用 `<cell-slot>` 作为其直接子节点，使用其他节点无效。
-
-### `for` 属性
-
-在 `<recycle-list>` 添加 `for` 属性即可描述如何循环展开列表的数据，语法和 Vue 的 `v-for` 指令类似，但是它循环的是自己内部的子节点，并不是当前节点。
-
-`for` 属性支持如下两种写法：
-
-+ `alias in expression`
-+ `(alias, index) in expression`
-
-### `switch` 属性
-
-在 `<recycle-list>` 添加 `switch` 属性可以用来指定数据中用于区分子模板类型的字段名，语义和编程语言里的 `switch` 一致，配合 `<cell-slot>` 中的 `case` 和 `default` 属性一起使用。
-
-如果省略了 `switch` 属性，则只会将第一个 `<cell-slot>` 视为模板，多余的模板将会被忽略。
-
-## `<cell-slot>`
-
-`<cell-slot>` 代表的是列表每一项的**模板**，它只用来描述模板的结构，并不对应实际的节点。`<cell-slot>` 的个数只表示模板的种类数，真实列表项的个数是由数据决定的。
-
-### `case` 属性
-
-声明了当前模板的类型，只有和数据中的类型与当前类型匹配时才会渲染，语义和编程语言里的 `case` 一致。
-
-所有模板中最多只会匹配到一项，按照模板的顺序从上到下匹配，一旦匹配成功就不在继续匹配下一个。
-
-### `default` 属性
-
-表示当前模板为默认模板类型，不需要指定值。如果数据项没有匹配到任何 `case` 类型，则渲染带有 `default` 模板。如果存在多个 `default`，则只会使用第一个默认模板。
-
-### `key` 属性
-
-可选属性，用于指定列表数据中可以作为唯一标识的键值，可以优化渲染性能。
-
-### 属性的省略
-
-+ 如果没写 `switch`，无论有没有写 `case` 或 `default`，都只使用第一个模板。
-+ 在写了 `switch` 的情况下，`case` 和 `default` 必须写一个，否则该模板将会被忽略。
-
-## 可复用的组件
-
-在 `<recycle-list>` 中使用的子组件也将被视为模板，在开发组件时给 `<template>` 标签添加 `recyclable` 属性，才可以用在 `<recycle-list>` 中。
-
-```html
-<template recyclable>
- <div>
- <text>...</text>
- </div>
-</template>
-<script>
- // ...
-</script>
-```
-
-> 添加了 `recyclable` 属性并不会影响组件本身的功能，它仍然可以用其他在正常的组件里。
-
-## 实例
-
-在上层语法中的使用方式如下：
-
-```html
-<recycle-list for="(item, i) in longList" switch="type">
- <cell-slot case="A">
- <text>- A {{i}} -</text>
- </cell-slot>
- <cell-slot case="B">
- <text>- B {{i}} -</text>
- </cell-slot>
-</recycle-list>
-```
-
-如果有如下数据：
-
-```js
-const longList = [
- { type: 'A' },
- { type: 'B' },
- { type: 'B' },
- { type: 'A' },
- { type: 'B' }
-]
-```
-
-则会生成如下等价节点：
-
-```html
-<text>- A 0 -</text>
-<text>- B 1 -</text>
-<text>- B 2 -</text>
-<text>- A 3 -</text>
-<text>- B 4 -</text>
-```
-
-如果将模板合并成一个，也可以省略 `switch` 和 `case`，将例子进一步简化：
-
-```html
-<recycle-list for="(item, i) in longList">
- <cell-slot>
- <text>- {{item.type}} {{i}} -</text>
- </cell-slot>
-</recycle-list>
-```
-
-### 使用子组件
-
-在 `<recycle-list>` 中使用了组件 `<banner>`：
-
-```html
-<recycle-list for="(item, i) in labels">
- <cell-slot>
- <banner></banner>
- </cell-slot>
-</recycle-list>
-```
-
-`<banner>` 组件的定义如下：
-
-```html
-<template recyclable>
- <text class="title">BANNER</text>
-</template>
-```
-
-更多细节可以参考：[完整代码](http://dotwe.org/vue/4a7446690e2c87ec0d39d8ee4884fa19)。
-
-## 注意事项
-
-### 属性和文本的绑定
-
-绑定属性或者文本时，仅支持表达式，不支持函数调用，也不支持使用 filter，可以参考 [Implementation.md#支持的表达式](https://github.com/Hanks10100/weex-native-directive/blob/master/Implementation.md#%E6%94%AF%E6%8C%81%E7%9A%84%E8%A1%A8%E8%BE%BE%E5%BC%8F)。
-
-例如，下列写法不可用：
-
-```html
-<div :prop="capitalize(card.title)">
- <text>{{ card.title | capitalize }}</text>
-</div>
-```
-
-> 针对这种场景，推荐使用 [`computed` 属性](https://vuejs.org/v2/guide/computed.html)来实现。
-
-因为模板的取值是由客户端实现的，而函数的定义在前端（filter 可以认为是在模板里调用函数的语法糖），如果每次取值都走一次通信的话，会大幅降低渲染性能。
-
-### `<slot>` 不可用
-
-`<cell-slot>` 的功能和 [`<slot>`](https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots) 有部分重叠，而且更为激进，在概念上有冲突，存在很多边界情况无法完全支持。不要在 `<cell-slot>` 及其子组件里使用 `<slot>`。
-
-### v-once 不会优化渲染性能
-
-和前端框架中的理解不同，客户端里要实现复用的逻辑，会标记模板节点的状态，添加了 `v-once` 能保证节点只渲染一次，但是并不一定能优化渲染性能，反而可能会拖慢客户端复用节点时的比对效率。
-
-### 样式功能的限制
-
-> **计划支持**
-
-目前版本里还不支持绑定样式类名（`v-bind:class`），原因和进展可以参考 [#14](https://github.com/Hanks10100/weex-native-directive/issues/14)。
-
-### 双向绑定
-
-> **计划支持**
-
-`v-model` 还未调通，暂时不要使用。
-
-### 子组件的限制
-
-#### 没有 Virtual DOM！
-
-使用在 `<recycle-list>` 中的组件没有 Virtual DOM！与 Virtual DOM 相关的功能也不支持。在开发过程中尽量只处理数据，不要操作生成后的节点。
-
-下列这些属性都不再有意义，请不要使用：
-
-+ `vm.$el`
-+ `vm.$refs.xxx`
-+ `vm.$vnode`
-+ `vm.#slots`
-+ `vm.#scopedSlots`
-
-`vm.$refs` 里的值可能是数组、子组件的实例、DOM 元素，在前端里比较常用，如果不支持对 Weex 里的 [`dom` 模块](../modules/dom.html)和 [`animation` 模块](../modules/animation.html)的功能也有影响。目前正在讨论技术方案，部分接口可能会重新设计，或者是在 `vm` 上透出专为 `<recycle-list>` 设计的接口。
-
-#### 组件的属性
-
-目前子组件的属性不支持函数。（正在讨论实现方案）
-
-```html
-<sub-component :prop="item.xxx" />
-```
-
-因为子组件的属性值需要在前端和客户端之间传递，所以仅支持可序列化的值。`item.xxx` 的类型可以是对象、数组、字符串、数字、布尔值等，不支持函数。
-
-#### 生命周期的行为差异
-
-由于列表的渲染存在回收机制，节点渲染与否也与用户的滚动行为有关，组件的生命周期行为会有一些不一致。
-
-可回收长列表不会立即渲染所有节点，只有即将滚动到可视区域（以及可滚动的安全区域）内时才开始渲染，组件生命周期的语义没变，但是会延迟触发。
-
-假设有 100 条数据，一条数据了对应一个组件。渲染首屏时只能展示 8 条数据的节点，那就只有前 8 个组件被创建了，也只有前 8 个组件的生命周期被触发。
-
-+ 组件的 `beforeCreate` 和 `created` 也只有在组件*即将创建*和*创建完成*时才会触发。
-+ 同理，组件的 `beforeMount` 和 `mounted` 也只有页面真正渲染到了该组件，在*即将挂载*和*已经挂载*时才会触发。
-+ 修改处于屏幕外的组件的数据，不一定会触发 `beforeUpdate` 和 `updated` 生命周期。（行为未定义，需要进一步排查）
-
-#### 组件的自定义事件
-
-> **计划支持**
-
-`vm.$on`, `vm.$once`, `vm.$emit`, `vm.$off` 等功能还未完全调通，接口可用，但是行为可能有些差异（参数丢失），暂时不要使用。
-
-## 更多例子
-
-> Web 版本的 `<recycle-list>` 还正在开发，online playground 上暂时无法预览效果，使用最新版的 playground app（SDK 版本 0.18.0 及以上）才可以扫码查看原生效果。
-
-**模板语法**
-
-+ [绑定文本](http://dotwe.org/vue/5b25755d7371d16b3d000e0d173a5cab) ([普通 list](http://dotwe.org/vue/0f7f1c1f0a3271ed30a0c5adb6938976))
-+ [绑定属性 `v-bind`](http://dotwe.org/vue/c85fb6128ff0fa33c2b7c13ca0c40d06) ([普通 list](http://dotwe.org/vue/f6a37fbeb5d7abf2d8c4875862b49ebc))
-+ [循环 `v-for`](http://dotwe.org/vue/966e644a4cbbbc401ab431889dc48677) ([普通 list](http://dotwe.org/vue/89921581f43493e6bbb617e63be267b6))
-+ [多层循环](http://dotwe.org/vue/20a9681f9201ef1b7a68962fd9cb5eb5) ([普通 list](http://dotwe.org/vue/8a961f87c6db8e0aa221748d037b6428))
-+ [条件渲染 `v-if`/`v-else`/`v-else-if`](http://dotwe.org/vue/a645db4b73bd7c1cde669f91c7f70f3a) ([普通 list](http://dotwe.org/vue/01a1ce5b9b868de7b0e4d193110471c8))
-+ [绑定事件 `v-on`](http://dotwe.org/vue/34bb833828861bf37e9d0574241d7c82) ([普通 list](http://dotwe.org/vue/7cdb9f7819f31ea38219b8b61dc87a3f))
-+ [一次性渲染 `v-once`](http://dotwe.org/vue/d515a48f5a4112bbe8d5ac80c315bb44) ([普通 list](http://dotwe.org/vue/502bbd141010d3d1019dd8cbcc538d71))
-+ [绑定样式](http://dotwe.org/vue/d093c67d49c4e4388994fead4d1649d1) ([普通 list](http://dotwe.org/vue/fe129e413d8a7ea5c90fcf2b5e5894a8))
-+ [loadmore](http://dotwe.org/vue/89c51e90246286ad921b2fd20ccae339) ([普通 list](http://dotwe.org/vue/16a6ea76882bc4802874131cc48fa82b))
-+ [复杂压测例子](http://dotwe.org/vue/593bb4f3fa7ac1d5da5b2906fa4c8bb0) ([普通 list](http://dotwe.org/vue/07734d19b15e3528c2f7b68ba870126f))
-+ [无限列表](http://dotwe.org/vue/720573134b13f1164fe38df867dd2835) ([普通 list](http://dotwe.org/vue/d1a5ab3ca315d4aae782af8b3032dc42))
-
-**使用子组件**
-
-+ [纯静态子组件](http://dotwe.org/vue/4a7446690e2c87ec0d39d8ee4884fa19) ([普通 list](http://dotwe.org/vue/1ab67bd0f19d5cf17fc358d73801f238))
-+ [无状态，有 props](http://dotwe.org/vue/f716dfc90f7ec0f2ec142c45d814b76f) ([普通 list](http://dotwe.org/vue/42039b1ed8484c98051cc2fd1ee542bc))
-+ [props 更新](http://dotwe.org/vue/3e4ba91f5333caa531a75cbdc54a8b70) ([普通 list](http://dotwe.org/vue/8cdc3565e66c86190c8f6cd6d0e4c20d))
-+ [有内部状态](http://dotwe.org/vue/8b068a890470a8cbc737966d9e82d23a) ([普通 list](http://dotwe.org/vue/46076bc2bdd90d3e0b028994b053ef6d))
-+ [computed & watch](http://dotwe.org/vue/56ae40a63d7b02bb7e55a1fbfbefeb76) ([普通 list](http://dotwe.org/vue/c96218775a65b405368025fa81be0609))
-+ [移除组件](http://dotwe.org/vue/769285a865b9d2f4e8d8cb7e5340012c) ([普通 list](http://dotwe.org/vue/b217c818532cf2b1b488be8987d60efa))
diff --git a/source/cn/references/components/refresh.md b/source/cn/references/components/refresh.md
deleted file mode 100644
index 33ab17c..0000000
--- a/source/cn/references/components/refresh.md
+++ /dev/null
@@ -1,137 +0,0 @@
----
-title: <refresh>
-type: references
-group: 内置组件
-order: 8.11
-version: 2.1
----
-
-# <refresh>
-
-### <span class="weex-version">v0.6.1+</span>
-
-`<refresh>` 为容器提供下拉刷新功能，用法和属性与 `<loading>` 类似。
-> **注意：**`<refresh>` 是 `<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>` 的子组件，只能在被它们包含时才能被正确渲染。
-
- - 简单示例：
-
-```
-<list>
- <refresh>
- ...
- </refresh>
- ...
-</list>
-```
- - 查看 [完整示例](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
-
-## 子组件
-
- - 诸如 `<text>`、`<image>` 之类的任何组件，都可以放到 `<refresh>` 进行渲染。
-
- - 特殊子组件 `<loading-indicator>`: 只能作为 `<refresh>` 和 `<loading>` 的子组件使用，拥有默认的动画效果实现。
-
- - 简单示例：
-
-```
-<refresh>
- <text>Refreshing</text>
- <loading-indicator></loading-indicator>
- ...
-</refresh>
-```
- - 查看 [完整示例](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
-
-## 属性
-
-| 属性名 | 类型 | 值 | 默认值 |
-| ------------- | ------ | -------------------------- | ------- |
-| `display` | String | show / hide | show |
-
-### `display`
-
- - `show`：如果 `<refresh>` 中包含 `<loading-indicator>`，则将其显示并开始默认动画。
-
- - `hide`：收起 refresh view，如果 `<refresh>` 中包含 `<loading-indicator>`，则将其视图隐藏。
-
-> **注意：** `display` 的设置必须成对出现，即设置 `display="show"`,必须有对应的 `display="hide"`。
-
- - 简单示例：
-
-```
-<template>
- <list>
- <refresh @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
- ...
- </refresh>
- ...
- </list>
-</template>
-
-<script>
- ...
- methods: {
- onrefresh (event) {
- this.refreshing = true
- setTimeout(() => {
- this.refreshing = false
- }, 2000)
- },
- }
-</script>
-```
- - 查看 [完整示例](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
-
- - 支持所有通用属性。查看 [组件通用属性](../common-attrs.html)
-
-## 样式
-
- - 支持所有通用样式。查看 [组件通用样式](/cn/wiki/common-styles.html)
-
-## 事件
-
-### `refresh`
-
- - 当 `<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>` 被下拉时触发。
-
-### `pullingdown` <span class="weex-version">v0.6.1+</span>
-
- - 当 `<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>` 被下拉时触发，可以从 `event` 参数对象中获取 dy, pullingDistance, viewHeight, type
-
- - dy: 前后两次回调滑动距离的差值
- - pullingDistance: 下拉的距离
- - viewHeight: refresh 组件高度
- - type: "pullingdown" 常数字符串
-
-
- - 简单示例：
-
-```
-<scroller>
- <refresh @refresh="onrefresh" @pullingdown="onpullingdown">
- ...
- </refresh>
- ...
-</scroller>
-
-<script>
- export default {
- methods: {
- onrefresh (event) {
- ...
- },
- onpullingdown (event) {
- console.log("dy: " + event.dy)
- console.log("pullingDistance: " + event.pullingDistance)
- console.log("viewHeight: " + event.viewHeight)
- console.log("type: " + type)
- }
- }
- }
-</script>
-```
- - 查看 [完整示例](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
-
-## 示例
-
- - [完整示例](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
diff --git a/source/cn/references/components/richtext.md b/source/cn/references/components/richtext.md
deleted file mode 100644
index 470adc9..0000000
--- a/source/cn/references/components/richtext.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: <richtext>
-type: references
-group: 内置组件
-order: 8.28
-version: 2.1
----
-
-富文本组件可以内嵌 `<span>` `<a>` `<image> `。同时它也支持 `<span>` `<a>` `<image> ` 的嵌套。
-
-只有 `<span>`, `<a>` and `<image>` 可以包含在 `<richtext>` 标签里。`<span>` and `<a>` 会被显示为 `display:inline`，而 `<image>` 会被显示为 `display:inline-block`。
-
-`<richtext>` 的子节点分两种类型。
-* `<span>` and `<a>` 可以再包含孩子节点。
-* `<image>` 不能再包含孩子节点。
-
-富文本组件内部树形结构不能超过255层，超过的层会被忽略。
-
-注意事项
-* `<a>` 标签在 iOS 上恒定为 `color:blue` 蓝色样式，它孩子节点也会被应用为该样式，见下面样例。Android 上无此限制。
-* `<image>` 标签必须指定 `width` 和 `height`.
-* 在图片下载完成前，`<image>` 会保持空白状态，目前不支持显示占位图。
-* 富文本组件自身不能嵌套。
-
-## 属性
-
-富文本组件的子节点支持的属性如下。
-
-#### image
-
-* **src**. 图片链接。
-* **pseudo-ref**, <span class="api-version">v0.15+</span>. 开发者指定的索引，会被传给回调方法 **itemclick**。
-
-#### a
-
-* **herf**. Herf。
-
-#### span
-
-`<span>` 不支持任何属性，文本需要包在 `<span>` 里面，例如 `<span>Hello World</span>`。
-
-## 样式
-
-富文本和它下面的 `<span>`, `<a>`, `<image>` 只支持有限的样式。
-
-* `<span>`, `<a>` 和 `<richtext>`
- * 可以被继承
- * color
- * font-family
- * font-size
- * font-style
- * font-weight
- * line-height
- * 不可被继承
- * background-color
-* `<span>`
- * 可以被继承
- * text-decoration: none | underline | line-through, 默认值是 none
-* `<richtext>`
- * 不可被继承
- * lines: 最大行数，必须为正数。
-* `<image>`
- * 不可被继承
- * width
- * height
-
-## 事件
-
-* **通用事件** 支持所有[通用事件](/cn/wiki/common-events.html)。
-* **itemclick**. 触发时机
- * `img` 被点击
- * 没有任何父节点是 `a`
- * 如果第二个条件不满足，Weex 会尝试打开 `a` 标签指定的链接。
- * `img` 的 **pseudo-ref** 会作为参数传回来。
-
-## 示例
-
-[try it](http://dotwe.org/vue/f60fa4323e8248c91ed88d53af2ce9fc)
diff --git a/source/cn/references/components/scroller.md b/source/cn/references/components/scroller.md
deleted file mode 100644
index 80a9056..0000000
--- a/source/cn/references/components/scroller.md
+++ /dev/null
@@ -1,197 +0,0 @@
----
-title: <scroller>
-type: references
-group: 内置组件
-order: 8.20
-version: 2.1
----
-
-# <scroller>
-
-<span class="weex-version">v0.6.1+</span>
-
-`<scroller>` 是一个竖直的，可以容纳多个排成一列的子组件的滚动器。如果子组件的总高度高于其本身，那么所有的子组件都可滚动。
-
-**注意：** `<scroller>` 可以当作根元素或者嵌套元素使用。此组件的滚动方向是垂直方向的形式。
-
-## 子组件
-
-支持任意类型的 Weex 组件作为其子组件。 其中，还支持以下两个特殊组件作为子组件：
-
-- `<refresh>`
-
- 用于给列表添加下拉刷新的功能。
-
- 使用文档请查看 [`<refresh>`](./refresh.html)
-
-- `<loading>`
-
- `<loading>` 用法与特性和 `<refresh>` 类似，用于给列表添加上拉加载更多的功能。
-
- 使用文档请查看 [`<loading>`](./loading.html)
-
-## 特性
-
-- `show-scrollbar {boolean}`：可选值为 `true`/ `false`，默认值为 `true`。控制是否出现滚动条。
-
-- `scroll-direction {string}`：可选为 `horizontal` 或者 `vertical`，默认值为 `vertical` 。定义滚动的方向。
- - `scroll-direction`定义了 scroller 的滚动方向，样式表属性 `flex-direction` 定义了 scroller 的布局方向，两个方向必须一致。
- - `scroll-direction` 的默认值是 `vertical`, `flex-direction` 的默认值是 `column`。
- - 当需要一个水平方向的 scroller 时，使用 `scroll-direction:horizontal` 和 `flex-direction: row`。
- - 当需要一个竖直方向的 scroller 时，使用 `scroll-direction:vertical` 和 `flex-direction: column`。由于这两个值均是默认值，当需要一个竖直方向的 scroller 时，这两个值可以不设置。
-- `loadmoreoffset {number}`：默认值为 0，触发 `loadmore` 事件所需要的垂直偏移距离（设备屏幕底部与页面底部之间的距离）。当页面的滚动条滚动到足够接近页面底部时将会触发 `loadmore` 这个事件。
-
- 
-
-- ~~`loadmoreretry {number}`：默认值为 0，当 `loadmore` 失败时是否重置 `loadmore` 相关的 UI，值不一样就会重置。~~ 该属性已废弃，请使用`resetLoadmore()`函数实现重置`loadmore`的操作。
-- `offset-accuracy {number}` <sup class="wx-v">0.11+</sup>：控制`onscroll`事件触发的频率，默认值为10，表示两次`onscroll`事件之间列表至少滚动了10px。注意，将该值设置为较小的数值会提高滚动事件采样的精度，但同时也会降低页面的性能。
-
-
-## 样式
-
-- 通用样式：支持所有通用样式
-
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](/cn/wiki/common-styles.html)
-
-## 事件
-
-- `loadmore` <sup class="wx-v">v0.5+</sup>：如果滚动到底部将会立即触发这个事件，你可以在这个事件的处理函数中加载下一页的列表项。
-- `scroll` <sup class="wx-v">0.11+</sup>: 列表发生滚动时将会触发该事件，事件的默认抽样率为10px，即列表每滚动10px触发一次，可通过属性`offset-accuracy`设置抽样率。 参见 [scroll event demo](http://dotwe.org/vue/9ef0e52bacaa20182a693f2187d851aa)。
-
- 事件中 event 对象属性：
- - `contentSize {Object}`：列表的内容尺寸
- - `width {number}`: 列表内容宽度
- - `height {number}`: 列表内容高度
- - `contentOffset {Object}`: 列表的偏移尺寸
- - `x {number}`: x轴上的偏移量
- - `y {number}`: y轴上的偏移量
-
-- 支持 `scrollstart` 和 `scrollend` 事件 <sup class="wx-v">0.17+</sup> .当列表开始或者结束滚动的时候会分别触发相应的 `scrollstart` 和 `scrollend` 事件，当前的内容高度和列表偏移会在callback中返回。可以参见这个[example](http://dotwe.org/vue/fd1b271fa1fa100cefb40f8d69198a1b)
-
-- 通用事件
-
- 支持所有通用事件：
-
- - `click`
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](/cn/wiki/common-events.html)
-
-## 扩展
-
-### scrollToElement(node, options)
-
-滚动到列表某个指定项是常见需求，`<list>` 拓展了该功能支持滚动到指定 `<cell>`。通过 `dom` module 访问，更多信息可参考 [dom module](../modules/dom.html) 。
-
-### resetLoadmore() <sup class="wx-v">0.9+</sup>
-在默认情况下，触发`loadmore`事件后，如果列表中内容没有发生变更，则下一次滚动到列表末尾时将不会再次触发`loadmore`事件，你可以通过调用`resetLoadmore()`方法来打破这一限制，调用该方法后，下一次滚动到列表末尾时将强制触发`loadmore`。
-
-#### 参数
-
-- `node {node}`：指定目标节点。
-- `options {Object}`：
- - `offset {number}`：一个到其可见位置的偏移距离，默认是0
-
-## 约束
-
-**不允许**相同方向的 `<list>` 或者 `<scroller>` 互相嵌套，换句话说就是嵌套的 `<list>`/`<scroller>` 必须是不同的方向。
-
-举个例子，**不允许**一个垂直方向的 `<list>` 嵌套的一个垂直方向的 `<scroller>` 中，但是一个垂直方向的 `<list>` 是可以嵌套的一个水平方向的 `<list>` 或者 `<scroller>` 中的。
-
-## 示例
-
-```html
-<template>
- <div class="wrapper">
- <scroller class="scroller">
- <div class="row" v-for="(name, index) in rows" :ref="'item'+index">
- <text class="text" :ref="'text'+index">{{name}}</text>
- </div>
- </scroller>
- <div class="group">
- <text @click="goto10" class="button">Go to 10</text>
- <text @click="goto20" class="button">Go to 20</text>
- </div>
- </div>
-</template>
-
-<script>
- const dom = weex.requireModule('dom')
-
- export default {
- data () {
- return {
- rows: []
- }
- },
- created () {
- for (let i = 0; i < 30; i++) {
- this.rows.push('row ' + i)
- }
- },
- methods: {
- goto10 (count) {
- const el = this.$refs.item10[0]
- dom.scrollToElement(el, {})
- },
- goto20 (count) {
- const el = this.$refs.item20[0]
- dom.scrollToElement(el, { offset: 0 })
- }
- }
- }
-</script>
-
-<style scoped>
- .scroller {
- width: 700px;
- height: 700px;
- border-width: 3px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- margin-left: 25px;
- }
- .row {
- height: 100px;
- flex-direction: column;
- justify-content: center;
- padding-left: 30px;
- border-bottom-width: 2px;
- border-bottom-style: solid;
- border-bottom-color: #DDDDDD;
- }
- .text {
- font-size: 45px;
- color: #666666;
- }
- .group {
- flex-direction: row;
- justify-content: center;
- margin-top: 60px;
- }
- .button {
- width: 200px;
- padding-top: 20px;
- padding-bottom: 20px;
- font-size: 40px;
- margin-left: 30px;
- margin-right: 30px;
- text-align: center;
- color: #41B883;
- border-width: 2px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
-</style>
-```
-
-[try it](http://dotwe.org/vue/2f22f14fb711d88515e63c3f67bed46a)
diff --git a/source/cn/references/components/slider.md b/source/cn/references/components/slider.md
deleted file mode 100644
index 6af65cc..0000000
--- a/source/cn/references/components/slider.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: <slider>
-type: references
-group: 内置组件
-order: 8.21
-version: 2.1
----
-
-Slider 组件用于在一个页面中展示多个图片，在前端这种效果被称为轮播图。默认的轮播间隔为3秒。
-
-## 子组件
-
-支持任意类型的 Weex 组件作为其子组件。你也可以放置一个 `indicator` 组件用于显示轮播指示器。`indicator` 也只能作为 `Slider` 的子组件使用。
-
-## 属性
-
-* **auto-play**, boolean. 组件渲染完成时，是否自动开始播放，默认为 false.
-* **interval**, number（ms）. 轮播间隔，默认为 3000ms。
-* **index**, number. 设置显示slider的第几个页面。
-* **offset-x-accuracy**, number. 控制 `onscroll` 事件触发的频率，默认值为10，表示两次 `onscroll` 事件之间滚动容器至少滚动了10px。将该值设置为较小的数值会提高滚动事件采样的精度，但同时也会降低页面的性能。
-* **show-indicators**, boolean. 是否显示指示器。
-* **infinite**, boolean. 设置是否可以无限轮播，默认为 true。
-* **scrollable**, boolean. 设置是否可以通过滑动手势来切换页面，默认为 true。
-* **keep-index**, boolean, <span class="api-version">Android</span>. 设置轮播器中的数据发生变化后是否保持变化前的页面序号。
-* **forbid-slide-animation**, boolean, <span class="api-version">v0.7+ & iOS</span>. iOS 平台默认支持动画，使用该属性可以强制关闭切换时的动画。
-
-## 样式
-
-* **通用样式** 该组件支持所有[通用样式](/cn/wiki/common-styles.html)。
-
-## 事件
-
-* **通用事件** 支持所有[通用事件](/cn/wiki/common-events.html)。
-* **change** 当轮播索引改变时，触发该事件。
-* **scroll**, <span class="api-version">v0.11+</span> 列表发生滚动时将会触发该事件。
-
-## 示例
-```html
-<template>
- <div>
- <slider class="slider" interval="3000" auto-play="true">
- <div class="frame" v-for="img in imageList">
- <image class="image" resize="cover" :src="img.src"></image>
- </div>
- </slider>
- </div>
-</template>
-
-<style scoped>
- .image {
- width: 700px;
- height: 700px;
- }
- .slider {
- margin-top: 25px;
- margin-left: 25px;
- width: 700px;
- height: 700px;
- border-width: 2px;
- border-style: solid;
- border-color: #41B883;
- }
- .frame {
- width: 700px;
- height: 700px;
- position: relative;
- }
-</style>
-
-<script>
- export default {
- data () {
- return {
- imageList: [
- { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
- { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
- { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
- ]
- }
- }
- }
-</script>
-```
-[try it](http://dotwe.org/vue/0c43ffd743c90b3bd9f5371062652e60)
diff --git a/source/cn/references/components/switch.md b/source/cn/references/components/switch.md
deleted file mode 100644
index 65e24d7..0000000
--- a/source/cn/references/components/switch.md
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: <switch> (已废弃)
-type: references
-group: 内置组件
-order: 8.22
-version: 2.1
----
-
-<span class="weex-version">v0.6.1+</span>
-
-> **废弃:** 本组件已不推荐业务上使用。由于各端实现不一致且端上定制能力较弱，不适合作为内置组件实现，因此建议开发者通过 weex 上层能力自行定制该组件.
-
-`<switch>` 是个类似 checkbox 的 UI
-
-> **注意:** switch 组件的外观在三个平台（iOS, Android, Web）稍有不同，这和各平台的 UI 风格有关。
-
-| Android | Web | iOS |
-| -------- | --- | --- |
-|  |  |  |
-
-> **注意:** switch 不支持一些涉及布局的样式， 如 `width`, `height`, `margin` 等，下面有详细的样式不支持列表.
-
-## 基本用法
-
-```html
-<switch></switch>
-```
-
-参考[示例](http://dotwe.org/vue/00f4b68b3a86360df1f38728fd0b4a1f).
-
-## 特性
-
-| Attribute | Type | Value | Default Value |
-| ------------- | ------ | -------------------------- | ------------- |
-| `checked` | Boolean | true / false | false |
-| `disabled` | Boolean | true / false | false |
-
-
-### `checked`
-
-表示组件的选中状态。
-
-### `disabled`
-
-表示组件是否处于不可交互状态。
-
-
-## 组件方法
-
-无。
-
-## 事件
-
-- `change`：改变开关状态时触发该事件。
-
- 事件中 event 对象属性：
-
- - `value`: 组件布尔值真或假。
- - `timestamp`: 事件的时间戳。
-
-- 通用事件
-
- 支持所有通用事件：
-
- - `click`
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](/cn/wiki/common-events.html)
-
-## 样式
-
-> **注意:** 某些样式在 switch 组件上不能使用或使用无效，它们是：
-
-- `width`
-- `height`
-- `min-width`
-- `min-height`
-- `margin` 和 `margin-xxx`
-- `padding` 和 `padding-xxx`
-- `border` 和 `border-xxx`
-
-> **注意:** 如果 `<switch>` 的容器没有设置为 `align-items：flex-start`，则 Android 中的开关将被拉伸。
-
-- 通用样式
-
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
-查看 [组件通用样式](/cn/wiki/common-styles.html)
-
-
-## 使用说明
-
-- 不要设置样式 `width` and `height`，因为它们用在 `<switch>` 上不会影响该组件的外观和布局.
-- `<switch>` 不支持内嵌子组件.
-
-## 示例
-
-- [简单示例](http://dotwe.org/vue/00f4b68b3a86360df1f38728fd0b4a1f)
-- [各种状态的 switch](http://dotwe.org/vue/9068f28ba80e871d89dabb9fccff5cc6)
diff --git a/source/cn/references/components/text.md b/source/cn/references/components/text.md
deleted file mode 100644
index abe3b9c..0000000
--- a/source/cn/references/components/text.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: <text>
-type: references
-group: 内置组件
-order: 8.23
-version: 2.1
----
-
-`<text>` 是 Weex 内置的组件，用来将文本按照指定的样式渲染出来.
-
-> **注意：** `<text>` 里直接写文本头尾空白会被过滤，如果需要保留头尾空白，暂时只能通过数据绑定写头尾空格。
-
-> **注意：** `<text>`不支持子组件。
-
-## 样式
-* 支持 **[通用样式](../../wiki/common-styles.html)。**
-* 支持 **[文本样式](../../wiki/text-styles.html)。**
-
-## 属性
-除了动态文本，text组件不支持其他属性
-### dynamic text
-下列代码片段可以实现文字内容和JS变量的绑定。
-
- <template>
- <div>
- <text >{{content}}</text>
- </div>
- </template>
- <script>
- module.exports = {
- data: function(){
- return {
- content: "Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework. "
- }
- }
- }
- </script>
-
-## 事件
-支持 **[通用事件](../../wiki/common-events.html)**。
-
-## 其他
-### 文字高度
-文字高度的计算规则比较复杂，但大致上遵循以下优先级进行计算，排在前面的优先级最高。
-1. 文字节点的`max-height`/`min-height`样式。
-2. 文字节点的`flex`属性且文字的父节点上有`flex-direction:column`样式。
-3. 文字节点的`height`样式。
-4. 文字节点的`align-items:stretch`如果文字父节点有 `flex-direction:row`样式。
-5. 文字内容和文字本身的[样式](/wiki/text-styles.html)。
-6. 其他相关CSS属性。
-
-
-### 自定义字体
-`支持版本:v0.12.0`
-
-支持ttf和woff字体格式的自定义字体, 可以通过调用 `dom` module 里面的 [addRule](../modules/custom_font.html)方法, 构建自定义的`font-family`使用, addRule 建议在 `beforeCreate` 或者更早时调用
-
-## 示例
-* [`<text>`的基本用法](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0)
\ No newline at end of file
diff --git a/source/cn/references/components/textarea.md b/source/cn/references/components/textarea.md
deleted file mode 100644
index b4eff5f..0000000
--- a/source/cn/references/components/textarea.md
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: <textarea>
-type: references
-group: 内置组件
-order: 8.24
-version: 2.1
----
-
-# <textarea>
-
-<span class="weex-version">v0.8+</span>
-
-`textarea` 是 Weex 内置的一个组件，用于用户交互，接受用户输入数据。 可以认为是允许多行的 `<input>`
-
-**Notes:** `<textarea>`支持 `<input>` 支持的所有的事件。
-
-## 子组件
-
-`textarea` 组件不支持子组件。
-
-## 属性
-`textarea`组件支持`text`组件的所有属性，除此之外还支持以下属性：
-- `rows {number}`：接收 number 类型的数据，指定组件的高度，默认值是 2
-
-## 样式
-
-- 伪类<span class="api-version">v0.9.5+</span>: `textarea` 支持以下伪类：
-
- * `active`
- * `focus`
- * `disabled`
- * `enabled`
-
-- text styles
- - 支持 `color`
- - 支持 `font-size`
- - 支持 `font-style`
- - 支持 `font-weight`
- - 支持 `text-align`
-
- 查看 [文本样式](/cn/wiki/text-styles.html)
-
-- 通用样式：支持所有通用样式
-
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
-
- 查看 [组件通用样式](/cn/wiki/common-styles.html)
-
-## 事件
-
-- `input`: 输入字符的值更改。
-
- 事件中 event 对象属性：
-
- - `value`: 触发事件的组件；
- - `timestamp`: 事件发生时的时间戳。
-
-- `change`: 当用户输入完成时触发。通常在 `blur` 事件之后。
-
- 事件中 event 对象属性：
-
- - `value`: 触发事件的组件；
-
- - `timestamp`: 事件发生时的时间戳。
-
-- `focus`: 组件获得输入焦点。
-
- 事件中 event 对象属性：
-
- - `timestamp`: 事件发生时的时间戳。
-
-- `blur`: 组件失去输入焦点。
-
- 事件中 event 对象属性：
-
- - `timestamp`: 事件发生时的时间戳。
-
-- 通用事件
-
- **注意：**
- 不支持 `click` 事件。 请监听 `input` 或 `change` 事件代替。
-
- 支持以下通用事件：
-
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](/cn/wiki/common-events.html)
-
-## 示例
-
-```html
-<template>
- <div class="wrapper">
- <textarea class="textarea" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></textarea>
- </div>
-</template>
-
-<script>
- const modal = weex.requireModule('modal')
-
- export default {
- methods: {
- oninput (event) {
- console.log('oninput:', event.value)
- modal.toast({
- message: `oninput: ${event.value}`,
- duration: 0.8
- })
- },
- onchange (event) {
- console.log('onchange:', event.value)
- modal.toast({
- message: `onchange: ${event.value}`,
- duration: 0.8
- })
- },
- onfocus (event) {
- console.log('onfocus:', event.value)
- modal.toast({
- message: `onfocus: ${event.value}`,
- duration: 0.8
- })
- },
- onblur (event) {
- console.log('onblur:', event.value)
- modal.toast({
- message: `input blur: ${event.value}`,
- duration: 0.8
- })
- }
- }
- }
-</script>
-
-<style>
- .textarea {
- font-size: 50px;
- width: 650px;
- margin-top: 50px;
- margin-left: 50px;
- padding-top: 20px;
- padding-bottom: 20px;
- padding-left: 20px;
- padding-right: 20px;
- color: #666666;
- border-width: 2px;
- border-style: solid;
- border-color: #41B883;
- }
-</style>
-```
-
-[try it](http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa)
diff --git a/source/cn/references/components/video.md b/source/cn/references/components/video.md
deleted file mode 100644
index 881799f..0000000
--- a/source/cn/references/components/video.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: <video>
-type: references
-group: 内置组件
-order: 8.25
-version: 2.1
----
-
-Video 组件用于在页面中嵌入视频内容。
-
-## 子组件
-
-`text` 是唯一合法的子组件。
-
-## 属性
-
-* **src**, string. 内嵌的视频指向的URL。
-* **play-status**, string. 可选值为 `play` | `pause`，用来控制视频的播放状态，`play` 或者 `pause`，默认值是 `pause`。
-* **auto-play**, boolean. 当页面加载初始化完成后，用来控制视频是否立即播放，默认值是 `false`。
-* **poster**, string, <span class="weex-version">v0.18+ & iOS</span>. 指定视频首图的图片链接。
-* **controls**, string. 可选值为 `controls` | `nocontrols`，控制视频播放组件是否显示回放控制面板，默认会显示，当指定为 `nocontrols` 时不显示回放控制面板。
-
-## 样式
-
-* **通用样式** 该组件支持所有[通用样式](/cn/wiki/common-styles.html)。
-
-## 事件
-
-* **start** 当 playback 的状态是 Playing 时触发。
-* **pause** 当 playback 的状态是 Paused 时触发。
-* **finish** 当 playback 的状态是 Finished 时触发。
-* **fail** 当 playback 状态是 Failed 时触发。
-
-## 示例
-
-```html
-<template>
- <div>
- <video class="video" :src="src" autoplay controls
- @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
- <text class="info">state: {{state}}</text>
- </div>
-</template>
-
-<style scoped>
- .video {
- width: 630px;
- height: 350px;
- margin-top: 60px;
- margin-left: 60px;
- }
- .info {
- margin-top: 40px;
- font-size: 40px;
- text-align: center;
- }
-</style>
-
-<script>
- export default {
- data () {
- return {
- state: '----',
- src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
- }
- },
- methods:{
- onstart (event) {
- this.state = 'onstart'
- },
- onpause (event) {
- this.state = 'onpause'
- },
- onfinish (event) {
- this.state = 'onfinish'
- },
- onfail (event) {
- this.state = 'onfinish'
- }
- }
- }
-</script>
-```
-[try it](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197)
diff --git a/source/cn/references/components/waterfall.md b/source/cn/references/components/waterfall.md
deleted file mode 100644
index 6b3f000..0000000
--- a/source/cn/references/components/waterfall.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: <waterfall>
-type: references
-group: 内置组件
-order: 8.26
-version: 2.1
----
-
-# waterfall
-
-<span class="weex-version">v0.11.0+</span>
-
-提供瀑布流布局的组件
-
-### 子组件
-
-注意: 和list一样, waterfall 只支持特定类型的组件: cell, header, refresh, loading 和 fixed-position 组件.
-
-- `cell`: 瀑布流中的每个元素
-- `header`: 主要用于表示横跨多列的元素，可以通过css的position属性设置为sticky
-
-### 特性
-
-- **show-scrollbar** : 可选值为 true/ false，默认值为 true。控制是否出现滚动条。
-- **column-width** : 描述瀑布流每一列的列宽
- - `auto`: 意味着列宽是被其他属性所决定的(比如 column-count)
- - `<length>`: 最佳列宽，实际的列宽可能会更宽(需要填充剩余的空间)， 或者更窄(如果剩余空间比列宽还要小)。 该值必须大于0
-- **column-count**: 描述瀑布流的列数
- - `auto`: 意味着列数是被其他属性所决定的(比如 column-width)
- - `<integer>`: 最佳列数，column-width 和 column-count 都指定非0值， 则 column-count 代表最大列数。
-- **column-gap**: 列与列的间隙. 如果指定了 `normal` ，则对应 `32`.
-- **left-gap**: 左边cell和列表的间隙. 如果未指定 ，则对应 `0`<span class="api-version">v0.19+</span>.
-- **right-gap**: 右边cell和列表的间隙. 如果未指定，则对应 `0`<span class="api-version">v0.19+</span>.
-
-其他支持的属性参见 [List Component Attributes](./list.html)
-
-### 样式
-
-通用样式：支持所有通用样式
-
-- 盒模型
-- `flexbox` 布局
-- `position`
-- `opacity`
-- `background-color`
-
-查看 [组件通用样式](/cn/wiki/common-styles.html)
-
-### 事件
-
-- 通用事件
-
- 支持所有通用事件：
-
- - `click`
- - `longpress`
- - `appear`
- - `disappear`
-
- 查看 [通用事件](/cn/wiki/common-events.html)
-
-### API
-
-滚动到列表某个指定项是常见需求，`<waterfall>` 拓展了该功能支持滚动到指定 `<cell>` 或者 `<header>`。通过 `dom` module 访问，更多信息可参考 [dom module](../modules/dom.html) 。
-
-### 示例
-
-[waterfall example](http://dotwe.org/vue/7a9195643e9e8da352b0d879cdbe68c0)
diff --git a/source/cn/references/components/web.md b/source/cn/references/components/web.md
deleted file mode 100644
index 2a54cd7..0000000
--- a/source/cn/references/components/web.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: <web>
-type: references
-group: 内置组件
-order: 8.27
-version: 2.1
----
-
-<span class="weex-version">v0.5+</span>
-
-`<web>` 用于在 weex 页面中显示由 `src` 属性指定的页面内容。您还可以使用 `webview` 模块来控制 WebView 的行为，例如回退、前进和重新加载，更多信息请参见 [webview module](../modules/webview.html)。
-
-## 基本用法
-
-> **注意：** `<web>` 不支持任何嵌套的子组件，并且必须指定 `width` 和 `height` 的样式属性，否则将不起作用。
-
-```html
-<web src="https://vuejs.org"></web>
-```
-
-参见[示例](http://dotwe.org/vue/81da1f0129dfc72e1666cfd4b90f20ae).
-
-## 属性
-
-| 属性 | 类型 | 值 | 默认值 |
-| ----- | ------ | ----- | ----- |
-| `src` | String | {URL} | - |
-
-### `src`
-
-要加载的网页内容的 URL。您可以指定一个基于 bundle URL 的相对 URL，它将被重写为真实资源 URL（本地或远程）。另请参阅：[Path](../../guide/advanced/path.html)。
-
-## 事件
-
-只支持**[公共事件](../../wiki/common-events.html)**中的 `appear` 和 `disappear` 事件。
-
-### pagestart
-
-`pagestart` 事件，会在 Web 页面开始加载时调用。
-
-**事件对象**：
-
-- `url`: {String} 当前 Web 页面的 URL。
-
-### pagefinish
-
-`pagefinish` 事件，会在 Web 页面完成加载时调用。
-
-**事件对象**：
-
-- `url`: {String} 当前 Web 页面的 URL。
-- `canGoBack`: {Boolean} 当前 Web 页面是否可以回退。
-- `canGoForward`: {Boolean} 当前 Web 页面是否可以前进。
-- `title`: {String} 当前 Web 页面的标题（仅限 iOS 平台）。
-
-### error
-
-`error` 事件，会在 Web 页面加载失败时调用。
-
-### receivedtitle
-
-`receivedtitle` 事件，会在 Web 页面的标题发生改变时调用（仅限 Android 平台）。
-
-**事件对象**：
-
-- `url`: {String} 当前 Web 页面的 URL。
-
-### 处理 `<web>` 事件
-
-在 `<web>` 上绑定事件：
-
-```html
-<web @pagestart="onPageStart" @pagefinish="onPageFinish" @error="onError" src="https://vuejs.org"></web>
-```
-
-添加事件 handler：
-
-```js
-export default {
- methods: {
- onPageStart (event) {
- // page start load
- },
- onPageFinish (event) {
- // page finish load
- },
- onError (event) {
- // page load error
- },
- }
-}
-```
-
-参见[示例](http://dotwe.org/vue/f9606de73fe386d554217371c4d60d03)。
-
-## 样式
-
-支持**[公共样式](../../wiki/common-styles.html)**。
-
-## 使用注意事项
-
-- 必须指定 `<web>` 的 `width` 和 `height` 样式。
-- `<web>` 不能包含任何嵌套的子组件。
-- 您可以使用 [webview module](../modules/webview.html) 来控制 `<web>` 组件，参见[示例](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939)。
-
-## 示例
-
-- [浏览器示例](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939)
diff --git a/source/cn/references/images/Artboard.jpg b/source/cn/references/images/Artboard.jpg
deleted file mode 100644
index 2f6bb95..0000000
--- a/source/cn/references/images/Artboard.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/coding_weex_1.jpg b/source/cn/references/images/coding_weex_1.jpg
deleted file mode 100644
index 8080578..0000000
--- a/source/cn/references/images/coding_weex_1.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/css-boxmodel.png b/source/cn/references/images/css-boxmodel.png
deleted file mode 100644
index a2063e2..0000000
--- a/source/cn/references/images/css-boxmodel.png
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/css-flexbox-align.jpg b/source/cn/references/images/css-flexbox-align.jpg
deleted file mode 100644
index 8a7f731..0000000
--- a/source/cn/references/images/css-flexbox-align.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/css-flexbox-justify.svg b/source/cn/references/images/css-flexbox-justify.svg
deleted file mode 100644
index 33e742b..0000000
--- a/source/cn/references/images/css-flexbox-justify.svg
+++ /dev/null
@@ -1,59 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width='504' height='270' viewBox="0 0 504 270">
- <defs>
- <pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
- <rect x='0' y='0' width='10' height='10' fill='#eee' />
- <rect x='10' y='10' width='10' height='10' fill='#eee' />
- <rect x='0' y='10' width='10' height='10' fill='#ccc' />
- <rect x='10' y='0' width='10' height='10' fill='#ccc' />
- </pattern>
- </defs>
- <style>
- text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
- rect { stroke-width: 2px; stroke: #888; }
- g > rect:nth-child(1) { fill: #888 }
- g > rect:nth-child(2) { fill: #fcc; }
- g > rect:nth-child(3) { fill: #cfc; }
- g > rect:nth-child(4) { fill: #ccf; }
- g > rect:nth-child(5) { fill: transparent; }
- </style>
- <g transform="translate(2,2)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='0' y='0' width='100' height='50' />
- <rect x='100' y='0' width='80' height='50' />
- <rect x='180' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>flex-start</text>
- </g>
- <g transform="translate(2,56)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='120' y='0' width='100' height='50' />
- <rect x='220' y='0' width='80' height='50' />
- <rect x='300' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>flex-end</text>
- </g>
- <g transform="translate(2,110)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='60' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='240' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>center</text>
- </g>
- <g transform="translate(2,164)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='0' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='300' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>space-between</text>
- </g>
- <g transform="translate(2,218)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='20' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='280' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>space-around</text>
- </g>
-</svg>
\ No newline at end of file
diff --git a/source/cn/references/images/css-flexbox-sample.png b/source/cn/references/images/css-flexbox-sample.png
deleted file mode 100644
index 0f1236d..0000000
--- a/source/cn/references/images/css-flexbox-sample.png
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/div_1.jpg b/source/cn/references/images/div_1.jpg
deleted file mode 100644
index 3c89773..0000000
--- a/source/cn/references/images/div_1.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/div_2.jpg b/source/cn/references/images/div_2.jpg
deleted file mode 100644
index 67395bb..0000000
--- a/source/cn/references/images/div_2.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/div_3.jpg b/source/cn/references/images/div_3.jpg
deleted file mode 100644
index b10f69e..0000000
--- a/source/cn/references/images/div_3.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/div_4.jpg b/source/cn/references/images/div_4.jpg
deleted file mode 100644
index acc2518..0000000
--- a/source/cn/references/images/div_4.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/image_1.jpg b/source/cn/references/images/image_1.jpg
deleted file mode 100644
index b87de15..0000000
--- a/source/cn/references/images/image_1.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/image_2.jpg b/source/cn/references/images/image_2.jpg
deleted file mode 100644
index 598a242..0000000
--- a/source/cn/references/images/image_2.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/list_2.jpg b/source/cn/references/images/list_2.jpg
deleted file mode 100644
index 8c2cc55..0000000
--- a/source/cn/references/images/list_2.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/list_3.jpg b/source/cn/references/images/list_3.jpg
deleted file mode 100644
index f2968c7..0000000
--- a/source/cn/references/images/list_3.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/list_4.jpg b/source/cn/references/images/list_4.jpg
deleted file mode 100644
index 0123171..0000000
--- a/source/cn/references/images/list_4.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/list_demo.jpg b/source/cn/references/images/list_demo.jpg
deleted file mode 100644
index 8a5a775..0000000
--- a/source/cn/references/images/list_demo.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/nav.jpg b/source/cn/references/images/nav.jpg
deleted file mode 100644
index 8c6ed03..0000000
--- a/source/cn/references/images/nav.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/nav.png b/source/cn/references/images/nav.png
deleted file mode 100644
index 7081ca7..0000000
--- a/source/cn/references/images/nav.png
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/images/scroller_1.jpg b/source/cn/references/images/scroller_1.jpg
deleted file mode 100644
index 3e995cb..0000000
--- a/source/cn/references/images/scroller_1.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/references/index.md b/source/cn/references/index.md
deleted file mode 100644
index 82648b0..0000000
--- a/source/cn/references/index.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: References
-type: references
-order: 0
-version: 2.1
-has_chapter_content: true
----
-* API
- * [Android APIs](./android-apis.html)
- * [iOS APIS](./ios-apis.html)
- * [Weex 实例变量](./weex-variable.html)
- * [JS Service](./js-service.html)
- * [BroadcastChannel](./broadcast-channel.html)
-* [内置组件](./components/)
-* [内置模块](./modules/)
diff --git a/source/cn/references/ios-apis.md b/source/cn/references/ios-apis.md
deleted file mode 100644
index 5002c14..0000000
--- a/source/cn/references/ios-apis.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: iOS APIs
-type: references
-group: API
-order: 2.3
-version: 2.1
----
-
-# iOS APIs
-
-## Native 对外接口
-
- - 注册 SDK 默认的 Module、Handler 和 Component
- - 注册自定义 module、Handler 和 Component
- - 重置 JSFramework
-
-## Handler (对应于 Android 的 Adapter) 介绍
-
-- `WXImgLoaderDefaultImpl` 图片下载 handler。Weex 会把需要设置图片的 View 和 URL 透露出来，Native 端需要实现这个接口进行图片下载。WeexSDK kernel 本身没有提供图片下载的默认实现。
-
- 接口定义如下：
-
- ```object-c
- @protocol WXImgLoaderProtocol <WXModuleProtocol>
- /**
- * @abstract Creates a image download handler with a given URL
- *
- * @param imageUrl The URL of the image to download
- *
- * @param imageFrame The frame of the image you want to set
- *
- * @param options : The options to be used for this download
- *
- * @param completedBlock : A block called once the download is completed.
- * image : the image which has been download to local.
- * error : the error which has happened in download.
- * finished : a Boolean value indicating whether download action has finished.
- */
- - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;
- @end
- ```
-
-## Native 和 JS 通信
-
-- 自定义通知事件
-
- 用于 native 自定义部分和 js 进行实践通知，比如传递下拉事件到 js，这个是在 component 基类的方法，可以直接使用
-
- ```
- /**
- * @abstract Fire an event to the component and tell Javascript which value has been changed.
- * @param eventName 事件名称，可以在weex文件某个标签组件监听，命名规范为 onXXX
- * @param params 数据
- * @param domChanges 发生改变的数据
- **/
- - (void)fireEvent:(NSString *)eventName params:(NSDictionary *)params domChanges:(NSDictionary *)domChanges
- ```
-
-- 事件回调
-
- 多用于 Module 回调结果给 js，回调类型分为下面两种：
-
- 1. `WXModuleCallback` 为了性能考虑，该回调只能回调通知js一次，之后会被释放，多用于一次结果
-
- 2. `WXModuleKeepAliveCallback` 该回调可以设置是否为多次回调类型，多次回调的场景如持续监听位置的变化，并返回给 js。
-
- ```
- @implementation WXEchoModule
- @synthesize weexInstance; // 让该module 获得当前instance
- WX_EXPORT_METHOD(@selector(echo:))
- - (void)echo:(NSString *)param callback:(WXModuleKeepAliveCallback)callback
- {
- callback(param,ture);// 此处设置true，该回调function 可以多次回调执行，可以写循环测试.
- }
- ```
-
-## 动态适配容器
-
-WeexSDK 在 `WXSDKInstance` 类中提供了方法 `setFrame(CGRect)` 来改变容器的大小。
-
-如：在导航栏从有到无过程，需要 weexView 的变化， 可以在此时 native 调用该方法设置
-
-
-## 降级使用
-
-Weex 处于发展阶段会增加一些新的特性和功能，但是这些新的特性和功能都必须升级 SDK 才能实现，对于没有升级的应用应该怎么处理呢？可以使用降级功能。
-
-所谓降级功能就是 Weex 无法运行的版本或者手机，可以用 Weex h5 来代替。
-
-Native 端可以通过接口 WXSDKInstance 中的 onFailed 回调进行处理，如果是主动降级则返回的错误 domain 为 `TemplateErrorType`，Native 端可以跳转到对应的 H5 页面，或者用其他的方式提示用户当前环境不支持 Weex。
-
diff --git a/source/cn/references/js-service.md b/source/cn/references/js-service.md
deleted file mode 100644
index 3de6503..0000000
--- a/source/cn/references/js-service.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: JS Service
-type: references
-group: API
-order: 2.6
-version: 2.1
----
-
-
-# JS Service
-
-<span class="weex-version">v0.9.5+</span>
-
-JS service 和 Weex 实例在 JS runtime 中并行运行。Weex 实例的生命周期可调用 JS service 生命周期。目前提供创建、刷新、销毁生命周期。
-
-**重要提醒: JS Service 非常强大但也很危险，请小心使用！**
-
-
-## 注册 JS Service
-
-### iOS
-
-```objective-c
-[WXSDKEngine registerService:@"SERVICE_NAME" withScript: @"SERVICE_JS_CODE" withOptions: @{}];
-// or
-[WXSDKEngine registerService:@"SERVICE_NAME" serviceScriptUrl: @"SERVICE_JS_URL" withOptions: @{}];
-```
-
-### Android
-
-```java
-HashMap<String, String> options = new HashMap<>()
-options.put("k1", "v1")
-String SERVICE_NAME = "SERVICE_NAME"
-String SERVICE_JS_CODE = "SERVICE_JS_CODE"
-boolean result = WXSDKEngine.registerService(SERVICE_NAME, SERVICE_JS_CODE, options)
-```
-
-### Web
-```html
-<script src="SERVICE_JS_CODE_URL"></script>
-```
-
-
-
-## 编写一个 JS service
-
-```javascript
-service.register(SERVICE_NAME /* same string with native */, {
- /**
- * JS Service lifecycle. JS Service `create` will before then each instance lifecycle `create`. The return param `instance` is Weex protected param. This object will return to instance global. Other params will in the `services` at instance.
- *
- * @param {String} id instance id
- * @param {Object} env device environment
- * @return {Object}
- */
- create: function(id, env, config) {
- return {
- instance: {
- InstanceService: function(weex) {
- var modal = weex.requireModule('modal')
- return {
- toast: function(title) {
- modal.toast({ message: title })
- }
- }
- }
- },
- NormalService: function(weex) {
- var modal = weex.requireModule('modal')
- return {
- toast: function(title) {
- modal.toast({ message: title })
- }
- }
- }
- }
- },
-
- /**
- * JS Service lifecycle. JS Service `refresh` will before then each instance lifecycle `refresh`. If you want to reset variable or something on instance refresh.
- *
- * @param {String} id instance id
- * @param {Object} env device environment
- */
- refresh: function(id, env, config){
-
- },
-
- /**
- * JS Service lifecycle. JS Service `destroy` will before then each instance lifecycle `destroy`. You can deleted variable here. If you doesn't detete variable define in JS Service. The variable will always in the js runtime. It's would be memory leak risk.
- *
- * @param {String} id instance id
- * @param {Object} env device environment
- * @return {Object}
- */
- destroy: function(id, env) {
-
- }
-})
-```
-
-## Using JS Service (vuejs)
-
-```html
-<script>
-var _InstanceService = new InstanceService(weex)
-var _NormalService = new service.NormalService(weex)
-
-module.exports = {
- created: function() {
- // called modal module to toast something
- _InstanceService.toast('Instance JS Service')
- _NormalService.toast('Normal JS Service')
- }
-}
-</script>
-```
diff --git a/source/cn/references/modules/animation.md b/source/cn/references/modules/animation.md
deleted file mode 100644
index d6243de..0000000
--- a/source/cn/references/modules/animation.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: animation
-type: references
-group: 内置模块
-order: 9.01
-version: 2.1
----
-
-# 动画
-
-## 简介
-
-``animation`` 模块可以用来在组件上执行动画。
-
-JS-Animation可以对组件执行一系列简单的变换 (位置、大小、旋转角度、背景颜色和不透明度)。
-
-举个例子，如果有一个 `<image>` 组件，通过动画你可以对其进行移动、旋转、拉伸或收缩等动作。
-
-> **注意:** 如果需要使用CSS动画，参考 [transition](../../wiki/common-styles.html#property)或[transform](../../wiki/common-styles.html#transform) 。
-
-
-## 基本用法
-
-### animation.transition(erf, options, callback)
-
-```javascript
-animation.transition(ref1, {
- styles: {
- backgroundColor: '#FF0000',
- transform: 'translate(250px, 100px)',
- },
- duration: 800, //ms
- timingFunction: 'ease',
- needLayout:false,
- delay: 0 //ms
- }, function () {
- modal.toast({ message: 'animation finished.' })
- })
-```
-
-## 属性
-
-### `ref `：
-
-将要执行动画的元素。
-
-例如指定动画的元素 ``ref`` 属性为 ``test`` , 可以通过调用 `this.$refs.test` 来获取元素的引用。
-
-### `options`：
-
-- `styles`(object):设置不同样式过渡效果的键值对，下表列出了所有合法的参数：
-
- | 参数名 | 描述 | 值类型 | 默认值 |
- | --------------- | ---------------------------------------- | ---------- | --------------- |
- | width | 动画执行后应用到组件上的宽度值。设置为 `needLayout` `true` 如果你需要影响布局。 | length | computed width |
- | height | 动画执行后应用到组件上的高度值。设置为 `needLayout` `true` 如果你需要影响布局。 | length | computed height |
- | backgroundColor | 动画执行后应用到组件上的背景颜色 | string | computed backgroundColor |
- | opacity | 动画执行后应用到组件上的不透明度值 | computed opacity | `1` |
- | transformOrigin | 定义变化过程的中心点. 参数 `x-aris` 可能的值为 `left`、`center`、`right`、长度值或百分比值, 参数 `y-axis` 可能的值为 `top`、`center`、`bottom`、长度值或百分比值 | `x-axis y-axis` | `center center` |
- | transform | 变换类型，可能包含rotate`, `translate`, `scale`及其他属性。| object| 无 |
-
- * `transform`支持的字段如下：
-
- | 名称 | 描述 | 值类型 | 默认值 |
- | ---------------------------------------- | ------------------------------- | ------- | ---- |
- | `translate`/`translateX`/`translateY` | 指定元素要移动到的位置 | 像素值或百分比 | 0 |
- | `rotate` | 指定元素将被旋转的角度，单位是度 | number | 0 |
- | `scale`/`scaleX`/`scaleY` | 按比例放大或缩小元素 | number | 1 |
- | `rotate`/`rotateX` <span class="api-version">v0.14+</span> /`rotateY` <span class="api-version">v0.14+</span> | 指定元素将被旋转的角度，单位是度 | number | 无 |
- | `perspective` <span class="api-version">v0.16+</span> | 观察者距离z=0平面的距离，在Android 4.1及以上有效 | number | 正无穷 |
-
- > (注:如果想同时执行多个动画只需要用空格隔开，比如)
- ```
- transform: 'translate(250px, 100px) scale(1.5)'
- ```
-
-* `duration `(number)：指定动画的持续时间 (单位是毫秒)，默认值是 `0`，表示瞬间达到动画结束状态。
-* `delay ` (number)：指定请求动画操作到执行动画之间的时间间隔 (单位是毫秒)，默认值是 `0`，表示没有延迟，在请求后立即执行动画。
-* `needLayout` (boolean)：动画执行是否影响布局，默认值是false。
-* `timingFunction ` (string)：描述动画执行的速度曲线，用于描述动画已消耗时间和动画完成进度间的映射关系。默认值是 `linear`，表示动画从开始到结束都拥有同样的速度。下表列出了所有合法的属性：
-
-| 属性名 | 描述 |
-| ------------------------------ | ---------------------------------------- |
-| `linear` | 动画从头到尾的速度是相同的 |
-| `ease` | 动画速度逐渐变慢 |
-| `ease-in` | 动画速度由慢到快 |
-| `ease-out` | 动画速度由快到慢 |
-| `ease-in-out` | 动画先加速到达中间点后减速到达终点 |
-| `cubic-bezier(x1, y1, x2, y2)` | 在三次贝塞尔函数中定义变化过程，函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 [cubic-bezier](http://cubic-bezier.com/) 和 [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve). |
-
-### `callback `
-`callback`是动画执行完毕之后的回调函数。在iOS平台上，你可以获取动画执行是否成功的信息。
-
- > **注意: 在0.16.0+版本后，iOS上可以获取 animation 是否执行成功的信息，callback中的`result`参数会有两种，分别是是`Success`与`Fail`。**
-
- > **注意: Android 的callback 函数不支持result参数**
-
-## 示例
-[animation demo](http://dotwe.org/vue/a6c03edd4c5bbd6caea29cac688269a0)
diff --git a/source/cn/references/modules/clipboard.md b/source/cn/references/modules/clipboard.md
deleted file mode 100644
index 6aa2e89..0000000
--- a/source/cn/references/modules/clipboard.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: clipboard
-type: references
-group: 内置模块
-order: 9.02
-version: 2.1
----
-
-# `clipboard` 剪切板
-
-<span class="weex-version">v0.8+</span>
-
-我们可以通过 `clipboard` 模块的 `getString()`、`setString()` 接口从系统的粘贴板获取内容或者设置内容。
-
-以前当我们收到一条短信验证码信息时，除了人肉拷贝，我们无法获取拷贝短信的内容。这是非常苦恼的。目前很多手机自带一键复制短信中的验证码到剪贴板功能，再配合使用 `clipboard.getString()` 接口，就可以直接获取到验证码信息，并且进行下一步操作，例如帮助用户自动填到对应输入框中。
-
-**注意**
-
-* 仅支持文本拷贝
-* 出于安全考虑和平台限制，只支持 Android 和 iOS，不支持 html5。
-
-## API
-
-### `getString(callback)`
-
-从系统粘贴板读取内容。
-
-#### 参数
-
-* `callback {function (ret)}`：执行完读取操作后的回调函数。`ret {Object}` 为 `callback` 函数的参数，有两个属性：
- - `ret.data`：获取到的文本内容；
- - `ret.result`：返回状态，可能为 `success` 或 `fail`。
-
-### `setString(text)`
-
-将一段文本复制到剪切板，相当于手动复制文本。
-
-#### 参数
-
-* `text {string}`：要复制到剪切板的字符串。
-
-### Example
-
-```html
-<template>
- <div>
- <div class="div">
- <text class="text" @click="onItemClick">{{message}}</text>
- </div>
- <div class="div">
- <text class="text" @click="setContent">Click to copy: {{tobecopied}}</text>
- </div>
- </div>
-</template>
-
-<script>
- const clipboard = weex.requireModule('clipboard')
-
- export default {
- data () {
- return {
- tobecopied: 'yay!',
- message: 'nothing.'
- }
- },
-
- methods: {
- setContent () {
- clipboard.setString(this.tobecopied)
- },
- onItemClick () {
- this.message = 'clicked! '
- clipboard.getString(ret => {
- this.message = 'text from clipboard:' + ret.data
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .div {
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- width: 750px;
- height: 90px;
- padding-left: 30px;
- padding-right: 30px;
-
- border-bottom-width: 1px;
- border-style: solid;
- border-color: #DDDDDD;
- }
- .text {
- width: 750px;
- height: 90px;
- }
-</style>
-```
-
-[try it](http://dotwe.org/vue/126d3cfc5533393e28943978b07aa5c1)
diff --git a/source/cn/references/modules/custom_font.md b/source/cn/references/modules/custom_font.md
deleted file mode 100644
index 1dff42f..0000000
--- a/source/cn/references/modules/custom_font.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: custom font
-type: references
-group: Build-in Modules
-order: 9.03
-version: 2.1
----
-
-# Custom Font <span class="api-version">v0.12.0+</span>
-## 简介
-Weex 提供 **DOM.addRule** 以加载自定义字体。开发者可以通过指定 **font-family**加载 *iconfont* 和 *custom font*。
-
-## API
-开发者可以使用下面的代码加载自定义字体：
-
- const domModule = weex.requireModule('dom')
- domModule.addRule('fontFace', {
- 'fontFamily': "iconfont2",
- 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
- });
-
-参数含义如下:
-
-* **fontFace** 协议名称，不可修改。
-* **fontFamily** font-family的名称。
-* **src** 字体地址，url('') 是保留字段，其参数如下:
- * **http**. 从HTTP请求加载, e.g. `url('http://at.alicdn.com/t/font_1469606063_76593.ttf')`
- * **https**. 从HTTPS请求加载, e.g. `url('https://at.alicdn.com/t/font_1469606063_76593.ttf')`
- * **local**, *Android ONLY*. 从assets目录读取, e.g. `url('local://foo.ttf')`, **foo.ttf** 是文件名在你的assets目录中.
- * **file**. 从本地文件读取, e.g. `url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')`
- * **data**. 从base64读取, e.g. `url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')`, 上述data字段不全。
-
-## Note
-> **Note:** `addRule` 方法里的 `fontFamily` 可以随意取。这个名字不是字体真正的名字。字体真正的名字（font-family），也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字（font-family）足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符被显示为‘?’。
-
-> **Note:** 如果你使用 http://www.iconfont.cn/ 来构建你的 iconfont。确保在项目设置中，设置一个特殊的 font-family 名字。默认是 “iconfont”，但极大可能发生冲突。
-
-> **Note:** 调用`addRule` 在 `beforeCreate` 中是被推荐的。
-
-## Example
-[示例](http://dotwe.org/vue/7e328ee2ac9b7205c9ee37f4e509263d)。
\ No newline at end of file
diff --git a/source/cn/references/modules/dom.md b/source/cn/references/modules/dom.md
deleted file mode 100644
index 588a5ec..0000000
--- a/source/cn/references/modules/dom.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: dom
-type: references
-group: 内置模块
-order: 9.03
-version: 2.1
----
-
-# dom
-
-`dom` 模块用于对 weex 页面里的组件节点进行一部分特定操作。
-
-你可以使用该模块来获取某个组件的 bounding rect 布局信息，或者将 list 的某个子节点滚动到当前视口，或者添加一个 font-face rule，等等。
-
-> **Note:** API `addRule` 目前仅支持添加 'font-face'.
-
-## API
-
-### scrollToElement(ref, options)
-
-让页面滚动到 ref 对应的组件，这个 API 只能用于可滚动组件的子节点，例如 `<scroller>`，`<list>` 等可滚动组件中。
-
-> 要在你的 `.vue` 文件中使用这个 API，可以使用 `weex.requireModule('dom').scrollToElement`。
-
-#### 参数
-
-- `ref {Node}`：你要滚动到的那个节点
-- `options {Object}`:
-- `offset {number}`: 一个到其可见位置的偏移距离，默认是 `0`
-- `animated {boolean}` <sup class="wx-v">0.10+</sup>：是否需要附带滚动动画，默认是`true`
-
-#### 示例
-
-[滚动到某层](http://dotwe.org/vue/56e0d256cbb26facd958dbd6424f42b2)
-
-### getComponentRect(ref, callback) <span class="api-version">v0.9.4+</span>
-
-`支持版本: >=0.9.4`
-
-通过标签的 `ref` 获得其布局信息，返回的信息在 `callBack` 中，格式参考如下：
-
-```javascript
-{
- result: true,
- size: {
- bottom: 60,
- height: 15,
- left: 0,
- right: 353,
- top: 45,
- width: 353
- }
-}
-```
-
-如果想要获取到 Weex 视口容器的布局信息，可以指定 `ref` 为字符串 `'viewport'`，即 `getComponentRect('viewport', callback)`.
-
-#### 示例
-
-[获取 box 的布局信息](http://dotwe.org/vue/d69ec16302e06300096c7285baef538a)
-
-
-### addRule(type, contentObject) <span class="api-version">v0.12.0+</span>
-
-`支持版本: >=0.12.0`
-
-参考[自定义字体](./custom_font.html)。
\ No newline at end of file
diff --git a/source/cn/references/modules/globalevent.md b/source/cn/references/modules/globalevent.md
deleted file mode 100644
index 0e94dcb..0000000
--- a/source/cn/references/modules/globalevent.md
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: globalEvent
-type: references
-group: 内置模块
-order: 9.04
-version: 2.1
----
-
-# 全局事件
-
-<span class="weex-version">0.8</span>
-
-`globalEvent` 用于监听持久性事件，例如定位信息，陀螺仪等的变化。全局事件是需要额外 APIs 处理的次要 API。你能通过 `addEventListener` 注册事件监听，当你不再需要的时候，也可以通过 `removeEventListener` 取消事件监听。
-
-*提醒*
-
-- 这是一个实例级别的事件，而非应用级别。
-
-## 如何让你的模块支持全局事件
-
-API 开发完成后，当需要发送事件时，需要通过以下方法：
-
-```javascript
-/**
- *
- * @param eventName eventName
- * @param params event params
- */
-instance.fireGlobalEventCallback(eventName,params);
-```
-
-如何在 weex-html5 组件或模块中分发全局事件？只需在文档元素上分派事件：
-
-```javascript
-var evt = new Event('some-type')
-evt.data = { foo: 'bar' }
-document.dispatchEvent(evt)
-```
-
-**示例**
-
-### Android
-
-```java
-Map<String,Object> params=new HashMap<>();
-params.put("key","value");
-mWXSDKInstance.fireGlobalEventCallback("geolocation",params);
-```
-
-### iOS
-
-```object-c
-[weexInstance fireGlobalEvent:@"geolocation" params:@{@"key":@"value"}];
-```
-
-## API
-
-### `addEventListener(String eventName, String callback)`
-
-注册全局事件。
-
-#### 参数
-
-- `eventName {string}`：需要监听的事件名称。
-- `callback {Function}`：触发事件后的回调函数。
-
-#### 示例
-
-```javascript
-var globalEvent = weex.requireModule('globalEvent');
-globalEvent.addEventListener("geolocation", function (e) {
- console.log("get geolocation")
-});
-```
-
-### `removeEventListener(String eventName)`
-
-取消事件监听。
-
-#### 参数
-
-- `eventName {string}`：需要取消的事件名称。
-
-#### 示例
-
-```javascript
-var globalEvent = weex.requireModule('globalEvent');
-globalEvent.removeEventListener("geolocation");
-```
-
-## 已有的全局事件
-<span class="weex-version">0.14</span>
-### 应用前后事件
-WeexSDK 对获取应用前后台事件做了支持，开发者可以在页面内监听对应的事件，获得应用被前后后这后台，以方便暂停音乐，视频等，只需要指定需要监听的事件名称和回调函数就可以，例如：
-
-```
-var globalEvent = weex.requireModule('globalEvent');
-globalEvent.addEventListener("WXApplicationDidBecomeActiveEvent", function (e) {
- console.log("WXApplicationDidBecomeActiveEvent");
-});
-```
-支持的事件名称
-
- - WXApplicationDidBecomeActiveEvent 应用被前台的时候触发
- - WXApplicationWillResignActiveEvent 应用即将被后台时候触发
-
-在 [dotWe 上试一试](http://dotwe.org/vue/5a774e8ce3766c88038cab6fe3331f5b)
-
-> 目前只有 platform 为 iOS 和 Android 才能支持。[获取当前 platform](../weex-variable.html#weex-environment-object)
-
diff --git a/source/cn/references/modules/index.md b/source/cn/references/modules/index.md
deleted file mode 100644
index 608b888..0000000
--- a/source/cn/references/modules/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: 内置模块
-type: references
-group: 内置模块
-order: 9.00
-version: 2.1
----
-
-- [dom](./dom.html)
-- [modal](./modal.html)
-- [animation](./animation.html)
-- [navigator](./navigator.html)
-- [meta](./meta.html)
-- [stream](./stream.html)
-- [clipboard](./clipboard.html)
-- [storage](./storage.html)
-- [picker](./picker.html)
-- [webview](./webview.html)
-- [WebSocket](./WebSocket.html)
-- [globalEvent](./globalEvent.html)
diff --git a/source/cn/references/modules/meta.md b/source/cn/references/modules/meta.md
deleted file mode 100644
index d2cc271..0000000
--- a/source/cn/references/modules/meta.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: meta
-type: references
-group: 内置模块
-order: 9.05
-version: 2.1
----
-
-# meta
-
-meta 模块可用于声明单个页面的元信息，通常是一些页面级别的配置，如容器的显示宽度 (viewport) 等。默认情况下，应用无需修改此配置。
-
-## API
-
-### setViewport(options)
-
-<span class="weex-version">0.10.0+</span>
-
-Weex 容器默认的宽度 (viewport) 是 750px，通过 setViewport 方法可以改变页面的显示宽度，仅对当前页面生效。
-
-> 需要注意的是：**只有在页面渲染开始之前设置 viewport 才会生效。** 也就是说，setViewport 方法只能在入口文件中使用，而且要在 `new Vue(...)` 之前调用；如果是在组件中使用，就只有在渲染到该组件的时候才会执行相应的代码，此时页面已经处于渲染过程中，设置 viewport 将不会再生效。
-
-
-#### 参数
-
-参数配置借鉴了 W3C 标准中的 [CSS Device Adaptation](https://drafts.csswg.org/css-device-adapt/#viewport-meta)，目前支持如下属性：
-
-+ `options`: viewport 的配置项
- + `width`: 数值，或者 `"device-width"` 和 `"device-height"` 之一。
- + `height`: 数值，或者 `"device-width"` 和 `"device-height"` 之一。
-
-宽度和高度的单位默认是 `px`，暂不支持其他单位。
-
-#### 例子
-
-入口文件：
-
-```js
-// entry.js
-
-import App from './app.vue'
-const meta = weex.requireModule('meta')
-
-// 配置 viewport 的宽度为 640px
-meta.setViewport({
- width: 640
-})
-
-App.el = '#root'
-new Vue(App)
-```
-
-在入口文件中配置了 viewport 的宽度为 640 之后，当前页面中的所有组件都会以 640px 作为满屏宽度。
-
-组件文件：
-
-```html
-<!-- app.vue -->
-<template>
- <div>
- <div class="box750">
- <text class="text">750</text>
- <div class="box640">
- <text class="text">640</text>
- <div class="box480">
- <text class="text">480</text>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<style scoped>
- .box750 {
- width: 750px;
- height: 750px;
- background-color: #EEEEEE;
- }
- .box640 {
- width: 640px;
- height: 640px;
- background-color: #CCCCCC;
- }
- .box480 {
- width: 480px;
- height: 480px;
- background-color: #AAAAAA;
- }
- .text {
- font-size: 50px;
- }
-</style>
-```
-
-[试试看](http://dotwe.org/vue/7d0302fe499ab08afdb12a376c646b59)。（由于 http://dotwe.org 目前还不支持配置入口文件，例子中的效果暂时无法在线查看。）
-
-本地开发环境的搭建可以参考：[《搭建开发环境》](../../guide/set-up-env.html)。
diff --git a/source/cn/references/modules/modal.md b/source/cn/references/modules/modal.md
deleted file mode 100644
index 5775871..0000000
--- a/source/cn/references/modules/modal.md
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: modal
-type: references
-group: 内置模块
-order: 9.06
-version: 2.1
----
-
-# `modal` 模态
-
-`modal` 模块提供了以下展示消息框的 API：`toast`、`alert`、`confirm` 和 `prompt`。
-
-## API
-
-### `toast(options)`
-
-`toast()` 会在一个小浮层里展示关于某个操作的简单反馈。例如，在邮件发送前离开邮编编辑界面，可以触发一个“草稿已保存”的 toast，告知用户以后可以继续编辑。toast 会在显示一段时间之后自动消失。
-
-#### 参数
-
-- `options {Object}`：相关选项
- - `message {string}`：展示的内容
- - `duration {number}`：展示的持续时间（以秒为单位）
- - Android: 如果时间长度大于3s，将使用一个被称为**LONG**的系统变量, 否则使用**SHORT**这个系统变量
- - iOS: 持续的时间同Duration相同
-
-#### 基本用法
-```
-var modal = weex.requireModule('modal')
-modal.toast({
- message: 'This is a toast',
- duration: 0.3
-})
-```
-
-
-### `alert(options, callback)`
-
-警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。
-
-#### 参数
-
-- `options {Object}`：alert选项
- - `message {string}`：警告框内显示的文字信息
- - `okTitle {string}`：确定按钮上显示的文字信息，默认是“OK”
-- `callback {Function}`：用户操作完成后的回调
-
-#### 基本用法
-```
-var modal = weex.requireModule('modal')
-modal.alert({
- message: 'This is a alert',
- duration: 0.3
-}, function (value) {
- console.log('alert callback', value)
-})
-```
-
-
-
-### `confirm(options, callback)`
-
-确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
-
-#### 参数
-
-- `options {object}`：confirm 选项
- - `message {string}`：确认框内显示的文字信息
- - `okTitle {string}`：确认按钮上显示的文字信息，默认是 `OK`
- - `cancelTitle {string}`：取消按钮上显示的文字信息，默认是 `Cancel`
-- `callback {function (result)}`：用户操作完成后的回调，回调函数的参数 `result` 是确定按钮上的文字信息字符串
-
-#### 基本用法
-```
-var modal = weex.requireModule('modal')
-modal.confirm({
- message: 'Do you confirm ?',
- duration: 0.3
-}, function (value) {
- console.log('confirm callback', value)
-})
-```
-
-
-### `prompt(options, callback)`
-
-提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操作。
-
-#### 参数
-
-- `options {object}`：prompt 选项
- - `message {string}`：提示框内要显示的文字信息
- - `okTitle {string}`：确认按钮上显示的文字信息，默认是 `OK`
- - `cancelTitle {string}`：取消按钮上显示的文字信息，默认是 `Cancel`
-- `callback {function (ret)}`：用户操作完成后的回调，回调函数的参数 `ret` 格式形如 `{ result: 'OK', data: 'hello world' }`，如下：
- - `result {string}`：用户按下的按钮上的文字信息
- - `data {string}`：用户输入的文字信息
-
-#### 基本用法
-```
-var modal = weex.requireModule('modal')
-modal.prompt({
- message: 'This is a prompt',
- duration: 0.3
-}, function (value) {
- console.log('prompt callback', value)
-})
-```
-
-
-## 示例
-
-[Modal demo](http://dotwe.org/vue/a7dddfb24edb72be947fc4eec3803f1d)
diff --git a/source/cn/references/modules/navigator.md b/source/cn/references/modules/navigator.md
deleted file mode 100644
index a375a68..0000000
--- a/source/cn/references/modules/navigator.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: navigator
-type: references
-group: 内置模块
-order: 9.07
-version: 2.1
----
-
-# `navigator` 导航控制
-
-<span class="weex-version">v0.6.1+</span>
-
-众所周知，在浏览器里，我们可以通过前进或者回退按钮来切换页面，iOS/Android 的 `navigator` 模块就是用来实现类似的效果的。除了前进、回退功能，该模块还允许我们指定在切换页面的时候是否应用动画效果。
-
-## API
-
-### `push(options, callback)`
-
-把一个weex页面URL压入导航堆栈中，可指定在页面跳转时是否需要动画，以及操作完成后需要执行的回调函数
-
-#### 参数
-
-* `options {Object}`：选项参数
- * `url {string}`：要压入的 Weex 页面的 URL
- * `animated {string}`：`"true"` 示意为页面压入时需要动画效果，`"false"` 则不需要，默认值为 `"true"`
-* `callback {Function}`：执行完该操作后的回调函数
-
-### `pop(options, callback)`
-
-把一个 Weex 页面 URL 弹出导航堆栈中，可指定在页面弹出时是否需要动画，以及操作完成后需要执行的回调函数。
-
-#### 参数
-
-* `options {object}`：选项参数对象
- * `animated {string}`：`"true"` 示意为弹出页面时需要动画效果，`"false"` 则不需要，默认值为 `"true"`
-* `callback {function}`：执行完该操作后的回调函数
-
-
-*注意事项：`animated` 二级参数目前仅支持字符串的 `"true"` 和 `"false"`，传入布尔值类型会导致程序崩溃，未来版本会修复这个问题*
-
-## Example
-
-```html
-<template>
- <div class="wrapper">
- <text class="button" @click="jump">Jump</text>
- </div>
-</template>
-
-<script>
- var navigator = weex.requireModule('navigator')
- var modal = weex.requireModule('modal')
-
- export default {
- methods: {
- jump (event) {
- console.log('will jump')
- navigator.push({
- url: 'http://dotwe.org/raw/dist/519962541fcf6acd911986357ad9c2ed.js',
- animated: "true"
- }, event => {
- modal.toast({ message: 'callback: ' + event })
- })
- }
- }
- };
-</script>
-
-<style scoped>
- .wrapper {
- flex-direction: column;
- justify-content: center;
- }
- .button {
- font-size: 60px;
- width: 450px;
- text-align: center;
- margin-top: 30px;
- margin-left: 150px;
- padding-top: 20px;
- padding-bottom: 20px;
- border-width: 2px;
- border-style: solid;
- color: #666666;
- border-color: #DDDDDD;
- background-color: #F5F5F5
- }
-</style>
-```
-
-[try it](http://dotwe.org/vue/5c670b07735ee6d08de5c8eb93f91f11)
diff --git a/source/cn/references/modules/picker.md b/source/cn/references/modules/picker.md
deleted file mode 100644
index 4c8a8a4..0000000
--- a/source/cn/references/modules/picker.md
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: picker
-type: references
-group: 内置模块
-order: 9.08
-version: 2.1
----
-
-# picker
-
-<span class="weex-version">v0.9+</span>
-
-## 概述
-
-以下为 picker 相关的 API，用于数据选择，日期选择，时间选择。（ H5模块如需使用，请手动引入[weex-picker组件](https://github.com/weexteam/weex-picker)）
-
-## API
-### `pick(options, callback[options])`
-
-调用单选 picker
-
-#### 参数
-
-- `options {Object}`：调用单选 picker 选项
- - `index {number}`：默认选中的选项
- - `items {array}`：picker 数据源
- - `textColor {color}`：picker中文字的颜色
- - `selectionColor {color}`：picker中选中item的背景色
- - `confirmTitle {string}`：确认按钮的文案
- - `cancelTitle {string}`：取消按钮的文案
- - `confirmTitleColor {color}`：确认按钮的文字颜色
- - `cancelTitleColor {color}`：取消按钮的文字颜色
- - `title {string}`：对话框的标题
- - `titleColor {color}`：对话框标题的文字颜色
- - `titleBackgroundColor {color}`：对话框标题的背景色
-
-- `callback {function (ret)}`：执行完读取操作后的回调函数。`ret {Object}` 为 `callback` 函数的参数，有两个属性：
- - `result {string}`：结果三种类型 `success`, `cancel`, `error`
- - `data {number}`：选择的选项,仅成功确认时候存在。
-
-### `pickDate(options, callback[options])`
-
-调用 date picker
-
-#### 参数
-
-- `options {Object}`：调用 date picker 选项
- - `value {string}`：必选，date picker 选中的值，date 的字符串格式为`yyyy-MM-dd`
- - `max {string}`：可选，date 的最大值
- - `min {string}`：可选，date 的最小值
-
-- `callback {function (ret)}`：执行完读取操作后的回调函数。`ret {Object}` 为 `callback` 函数的参数，有两个属性：
- - `result {string}`：结果三种类型 `success`, `cancel`, `error`
- - `data {string}`：选择的值 date 的字符，格式为 `yyyy-MM-dd`, 仅成功确认的时候存在。
-
-### `pickTime(options, callback[options])`
-
-调用 time picker
-
-#### 参数
-
-- `options {Object}`：调用 time picker 选项
- - `value {string}`：必选，time 格式为 `HH:mm`
-
-- `callback {function (ret)}`：执行完读取操作后的回调函数。`ret {Object}` 为 `callback` 函数的参数，有两个属性：
- - `result {string}`：结果三种类型 `success`, `cancel`, `error`
- - `data {string}`：time 格式为 `HH:mm`, 仅成功确认的时候存在。
-
-## 示例
-
-```html
-<template>
- <div class="wrapper">
- <div class="group">
- <text class="label">Time: </text>
- <text class="title">{{value}}</text>
- </div>
- <div class="group">
- <text class="button" @click="pickTime">Pick Time</text>
- </div>
- </div>
-</template>
-
-<script>
- const picker = weex.requireModule('picker')
-
- export default {
- data () {
- return {
- value: ''
- }
- },
- methods: {
- pickTime () {
- picker.pickTime({
- value: this.value
- }, event => {
- if (event.result === 'success') {
- this.value = event.data
- }
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .wrapper {
- flex-direction: column;
- justify-content: center;
- }
- .group {
- flex-direction: row;
- justify-content: center;
- margin-bottom: 40px;
- align-items: center;
- }
- .label {
- font-size: 40px;
- color: #888888;
- }
- .title {
- font-size: 80px;
- color: #41B883;
- }
- .button {
- font-size: 36px;
- width: 280px;
- color: #41B883;
- text-align: center;
- padding-top: 25px;
- padding-bottom: 25px;
- border-width: 2px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
-</style>
-```
diff --git a/source/cn/references/modules/storage.md b/source/cn/references/modules/storage.md
deleted file mode 100644
index 855f081..0000000
--- a/source/cn/references/modules/storage.md
+++ /dev/null
@@ -1,184 +0,0 @@
----
-title: storage
-type: references
-group: 内置模块
-order: 9.09
-version: 2.1
----
-
-# `storage` 本地存储
-
-<span class="weex-version">v0.7+</span>
-
-**备注**：0.7及以上版本可用
-
-`storage` 是一个在前端比较常用的模块，可以对本地数据进行存储、修改、删除，并且该数据是永久保存的，除非手动清除或者代码清除。但是，`storage` 模块有一个限制就是浏览器端（H5）只能存储小于5M的数据，因为在 H5/Web 端的实现是采用 `HTML5 LocalStorage API`。而 Android 和 iOS 这块是没什么限制的。
- storage 常用在一些被用户经常查询，但是又不频繁更新的数据，比如搜索历史、用户的订单列表等。搜索历史一般情况都是作为本地数据存储的，因此使用 storage 比较合适。而用户订单列表是需要本地存储和服务端器检索配合的场景。当一个用户下单后，会经常查阅个人的订单列表。但是，订单的列表数据不是频繁更新的，往往只有在收到货品时，才更新“已签收”，其余平时的状态是“已发货”。因此，可以使用 storage 存储订单列表，可以减少服务器的压力，例如减少 SQL 查询或者缓存的压力。当用户查看订单详情的时候，再更新数据状态。
-
-## API
-
-`storage` 提供了一系列的 API 供我们调用。我们只需要引入该模块，然后调用对应的 API 即可。
-
-### `setItem(key, value, callback)`
-
-该方法可以通过键值对的形式将数据存储到本地。同时可以通过该方法，更新已有的数据。
-
-#### 参数
-
-* `key {string}`：要存储的键，不允许是 `""` 或 `null`
-* `value {string}`：要存储的值，不允许是 `""` 或 `null`
-* `callback {function (e)}`：执行操作成功后的回调
- * `e.result`：表示设置是否成功，如果成功返回 `"success"`
- * `e.data`：`undefined` 表示设置成功，`invalid_param` 表示 key/value 为 `""` 或者 `null`
-
-这里，对返回值做一个简单的介绍：
-
-`e` 包含两个属性：`e.result` 和 `e.data`。如果 `e.result` 返回值是 “success”，则说明成功。`e.data` 返回 `undefined` 表示设置成功，返回 `invalid_param` 表示` key/value` 为 "" 或者 null。因此，你可以判断两个返回判断是否插入成功。
-
-### `getItem(key, callback)`
-
-传入键名返回对应的键值
-
-#### 参数
-
-* `key {string}`：要获取的值的名称，不允许是 `""` 或 `null`
-* `callback {function (e)}`：执行操作成功后的回调
- * `e.result`：表示设置是否成功，如果成功返回 `"success"`
- * `e.data`：获取对应的键值字符串，如果没有找到则返回 `undefined`
-
-### `removeItem(key, callback)`
-
-传入一个键名将会删除本地存储中对应的键值
-
-#### 参数
-
-* `key {string}`：要删除的值的名称，不允许是 `""` 或 `null`
-* `callback {function (e)}`：执行操作成功后的回调.
- * `e.result`：表示删除是否成功，如果成功返回 `"success"`
- * `e.data`：`undefined` 表示删除成功
-
-### `length(callback)`
-
-返回本地存储的数据中所有存储项数量的整数
-
-#### 参数
-
-* `callback {function (e)}`：执行操作成功后的回调
- * `e.result`：表示设置是否成功，如果成功返回 `"success"`
- * `e.data`：当前已存储项的数量
-
-
-### `getAllKeys(callback)`
-
-返回一个包含全部已存储项键名的数组
-
-#### 参数
-
-* `callback {function (e)}`：执行操作成功后的回调。
- * `e.result`：表示设置是否成功，如果成功返回 `"success"`
- * `e.data`：所有键名组成的数组
-
-## 示例
-
-```html
-<template>
- <div class="list">
- <div class="group center">
- <div class="panel"><text class="text">{{state}}</text></div>
- </div>
- <div class="group">
- <div class="panel"><text class="text" @click="setItem">set</text></div>
- <div class="panel"><text class="text" @click="getItem">get</text></div>
- <div class="panel"><text class="text" @click="removeItem">remove</text></div>
- <div class="panel"><text class="text" @click="getAll">all</text></div>
- </div>
- </div>
-</template>
-
-<script>
- const storage = weex.requireModule('storage')
- const modal = weex.requireModule('modal')
-
- export default {
- data () {
- return {
- keys: '[]',
- length: 0,
- state: '----'
- }
- },
- methods: {
- setItem () {
- storage.setItem('name', 'Hanks', event => {
- this.state = 'set success'
- console.log('set success')
- })
- },
- getItem () {
- storage.getItem('name', event => {
- console.log('get value:', event.data)
- this.state = 'value: ' + event.data
- })
- },
- removeItem () {
- storage.removeItem('name', event => {
- console.log('delete value:', event.data)
- this.state = 'deleted'
- })
- },
- getAll () {
- storage.getAllKeys(event => {
- // modal.toast({ message: event.result })
- if (event.result === 'success') {
- modal.toast({
- message: 'props: ' + event.data.join(', ')
- })
- }
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .panel {
- height: 100px;
- flex-direction: column;
- justify-content: center;
- border-width: 2px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
- .group {
- flex-direction: row;
- justify-content: space-between;
- width: 650px;
- margin-left: 50px;
- margin-top: 50px;
- margin-bottom: 50px;
- }
- .center {
- justify-content: center;
- }
- .text {
- font-size: 50px;
- text-align: center;
- padding-left: 25px;
- padding-right: 25px;
- color: #41B883;
- }
- .small {
- font-size: 32px;
- padding-left: 35px;
- padding-right: 35px;
- color: #41B883;
- }
-</style>
-```
-
-[try it](http://dotwe.org/vue/3fdd3e2d1646ca41199d80c7be799858)
-
-## 其它参考
-
-* [W3school: html5 localStorage](http://www.w3school.com.cn/html5/html_5_webstorage.asp)
diff --git a/source/cn/references/modules/stream.md b/source/cn/references/modules/stream.md
deleted file mode 100644
index de2d304..0000000
--- a/source/cn/references/modules/stream.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: stream
-type: references
-group: 内置模块
-order: 9.10
-version: 2.1
----
-
-# 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}`：响应头
-
-### 注意
-
- - 默认 Content-Type 是 'application/x-www-form-urlencoded'。
- - 如果你需要通过 `POST` json ， 需要将 Content-Type 设为 'application/json'。
-
-### Example
-
-[stream demo](http://dotwe.org/vue/e182a9fbbeb6f0763cd1df1baddf1e10)
diff --git a/source/cn/references/modules/websocket.md b/source/cn/references/modules/websocket.md
deleted file mode 100644
index 053fac9..0000000
--- a/source/cn/references/modules/websocket.md
+++ /dev/null
@@ -1,220 +0,0 @@
----
-title: webSocket
-type: references
-group: 内置模块
-order: 9.11
-version: 2.1
----
-
-# webSocket
-<span class="weex-version">v0.12+</span>
-
-## Summary
-
-WebSockets 是一种先进的技术, 这使得在用户的 H5/iOS/Android 和一个服务器之间打开一个的交互式通信会话成为可能, 有了这个 API，你可以向服务器发送消息, 并接收事件驱动的响应, 无需轮询服务器的响应
-
-## **注意：**
-- iOS和h5提供 WebSockets 的 protocol 默认实现，安卓使用需要提供自定义 adapter 实现，source:
- - [DefaultWebSocketAdapter.java](https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapter.java);
- - [DefaultWebSocketAdapterFactory.java](https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapterFactory.java);
- - 集成例子参考weex [playground](https://github.com/apache/incubator-weex/tree/master/android/playground)
-
-
-## API
-### `WebSocket(url, protocol)`
-
-创建 WebSockets，并连接服务器
-
-#### Arguments
-
-- `url {string}`: 表示要连接的 URL;
-- `protocol {string}`: WebSockets 协议
-
-### `send(data)`
-
-通过WebSocket连接向服务器发送数据
-
-#### Arguments
-
-- `data{string}`:要发送到服务器的数据
-
-### `close(code,reason)`
-
-关闭 WebSockets 的链接
-
-#### Arguments
-
-- `code {number}`: 关闭连接的状态号.
-- `reason {string}`: 关闭的原因
-
-### `onopen(options)`
-
-链接打开的监听
-
-#### Arguments
-
-- `options {object}`: 一个空的对象
-
-### `onmessage(options)`
-
-消息事件的监听器
-
-#### Arguments
-
-- `options {object}`: 服务器返回的消息对象
- - `data {string}`: 监听器接收的到的消息
-
-### `onclose(options)`
-
-关闭事件的监听器
-
-#### Arguments
-
-- `options {object}`: 监听器接收到的对象
- - `code {number}`: 服务器返回关闭的状态码
- - `reason {string}`: 服务器返回的关闭原因
- - `wasClean {boolen}`: 是否完全关闭.
-
-### `onerror(options)`
-
-错误事件的监听器
-
-#### Arguments
-
-- `options {object}`: 错误信息的事件
- - `data {string}`: 监听器接收到的信息
-
-### Example
-
-```html
-<template>
- <scroller>
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80px ;padding: 20px;color: white">websocket</text>
- </div>
- <input type="text" placeholder="please input message to send" class="input" autofocus="false" value="" @change="onchange" @input="oninput" ref="input"/>
- <div style="flex-direction: row; justify-content: center;">
- <text class="button" @click="connect">connect</text>
- <text class="button" @click="send">send</text>
- <text class="button" @click="close">close</text>
- </div>
-
- <div style="background-color: lightgray">
- <text class="title" style="height: 80px ;padding: 20px;color: black">method = send</text>
- </div>
- <text style="color: black;height: 80px">{{sendinfo}}</text>
-
-
- <div style="background-color: lightgray">
- <text class="title" style="height: 80px ;padding: 20px;color: black">method = onopen</text>
- </div>
- <text style="color: black;height: 80px">{{onopeninfo}}</text>
-
- <div style="background-color: lightgray">
- <text class="title" style="height: 80px ;padding: 20px;color: black">method = onmessage</text>
- </div>
- <text style="color: black;height: 400px">{{onmessage}}</text>
-
- <div style="background-color: lightgray">
- <text class="title" style="height: 80px ;padding: 20px;color: black">method = onclose</text>
- </div>
- <text style="color: black;height: 80px">{{oncloseinfo}}</text>
-
- <div style="background-color: lightgray">
- <text class="title" style="height: 80px ;padding: 20px;color: black">method = onerror</text>
- </div>
- <text style="color: black;height: 80px">{{onerrorinfo}}</text>
-
- <div style="background-color: lightgray">
- <text class="title" style="height: 80px ;padding: 20px;color: black">method = close</text>
- </div>
- <text style="color: black;height: 80px">{{closeinfo}}</text>
-
- </div>
-
- </scroller>
-</template>
-
-<style scoped>
- .input {
- font-size: 40px;
- height: 80px;
- width: 600px;
- }
- .button {
- font-size: 36px;
- width: 150px;
- color: #41B883;
- text-align: center;
- padding-top: 25px;
- padding-bottom: 25px;
- border-width: 2px;
- border-style: solid;
- margin-right: 20px;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
-</style>
-
-
-<script>
- var websocket = weex.requireModule('webSocket')
- export default {
- data () {
- return {
- connectinfo: '',
- sendinfo: '',
- onopeninfo: '',
- onmessage: '',
- oncloseinfo: '',
- onerrorinfo: '',
- closeinfo: '',
- txtInput:'',
- navBarHeight: 88,
- title: 'Navigator',
- dir: 'examples',
- baseURL: ''
- }
- },
- methods: {
- connect:function() {
- websocket.WebSocket('ws://echo.websocket.org','');
- var self = this;
- self.onopeninfo = 'connecting...'
- websocket.onopen = function(e)
- {
- self.onopeninfo = 'websocket open';
- }
- websocket.onmessage = function(e)
- {
- self.onmessage = e.data;
- }
- websocket.onerror = function(e)
- {
- self.onerrorinfo = e.data;
- }
- websocket.onclose = function(e)
- {
- self.onopeninfo = '';
- self.onerrorinfo = e.code;
- }
- },
- send:function(e) {
- var input = this.$refs.input;
- input.blur();
- websocket.send(this.txtInput);
- this.sendinfo = this.txtInput;
- },
- oninput: function(event) {
- this.txtInput = event.value;
- },
- close:function(e) {
- websocket.close();
- },
- },
- }
-</script>
-```
-
-[Have a try](http://dotwe.org/vue/6d8bdfe66f24fda1a2dc6158b0182573)
diff --git a/source/cn/references/modules/webview.md b/source/cn/references/modules/webview.md
deleted file mode 100644
index 02ab7f0..0000000
--- a/source/cn/references/modules/webview.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: webview
-type: references
-group: 内置模块
-order: 9.12
-version: 2.1
----
-
-`webview` 模块提供了一系列的 `<web>` 组件操作接口，例如 `goBack`、`goForward`、和 `reload`。一般与 [`<web>` 组件](../components/web.html)一起使用。
-
-## API
-
-### goBack(webElement)
-
-前往 WebView 历史记录的上一页。
-
-**参数**
-
-- `webElement`*(web)*: `<web>` 组件元素。
-
-### goForward(webElement)
-
-前往 WebView 历史记录的下一页。
-
-**参数**
-
-- `webElement`*(web)*: `<web>` 组件元素。
-
-### reload(webElement)
-
-刷新当前 Web 页面。
-
-**参数**
-
-- `webElement`*(web)*: `<web>` 组件元素。
-
-### postMessage(webElement, data)
-
-向当前 Web 页面发送数据。(android weex_sdk:0.18.0-beta-3 开始支持)
-
-**参数**
-
-- `webElement`*(web)*: `<web>` 组件元素。
-- `data {Object}`: 要发送的数据
-
-## 示例
-
-- 简单用法：
-
-```js
-var webElement = this.$el('webview');
-
-var webview = weex.requireModule('webview');
-webview.goBack(webElement.ref);
-webview.goForward(webElement.ref);
-webview.reload(webElement.ref);
-webview.postMessage(webElement, {message: 'message to Web page'});
-
-// Web 页面中接收数据
-window.addEventListener('message', event => {
- console.log(event.data) // message to Web page
-})
-```
-
-- [浏览器示例](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939)
diff --git a/source/cn/references/weex-variable.md b/source/cn/references/weex-variable.md
deleted file mode 100644
index 68b7190..0000000
--- a/source/cn/references/weex-variable.md
+++ /dev/null
@@ -1,195 +0,0 @@
----
-title: Weex 实例变量
-type: references
-group: API
-order: 2.5
-version: 2.1
----
-
-<!-- toc -->
-
-每个 Weex 页面的 JS 上下文中都有一个相互独立的 `weex` 变量，它可以像全局变量一样使用，不过它在不同页面中是隔离而且*只读*的。
-
-> **注意： `weex` 实例变量只在 Vue 框架中暴露了，目前还不支持在 Rax 框架中使用。**
-
-## 属性和方法
-
-Weex 实例变量的类型定义如下：
-
-```typescript
-declare type Weex = {
- config: WeexConfigAPI;
- document: WeexDocument;
- requireModule: (name: string) => Object | void;
- supports: (condition: string) => boolean | void;
-}
-```
-
-## `weex.config`
-
-该变量包含了当前 Weex 页面的所有环境信息。
-
-```typescript
-declare type WeexConfigAPI = {
- bundleUrl: string;
- bundleType?: string;
- env: WeexEnvironment;
-}
-```
-
-+ `bundleUrl`: 当前页面 js bundle 的 URL 地址。
-+ `bundleType`: <span class="api-version">v0.17+</span> 页面 js bundle 的类型，它表示的是当前页面是用那种框架开发的，可以是 `"Vue"` 或者 `"Rax"`。
-+ `env`: Weex 环境变量。
-
-### Weex 环境变量
-
-有时候为了兼容性或者为了增强某个端上的能力，需要编写平台特异的代码。 Weex 提供了 `weex.config.env` 和全局的 `WXEnvironment` 变量（它们是等价的）来获取当前执行环境的信息。
-
-```js
-weex.config.env === WXEnvironment
-```
-
-**Weex 环境变量中的字段**:
-
-| 字段名 | 类型 | 描述 |
-| -------------- | ------ | ----------- |
-| `platform` | String | Current running platform, could be "Android", "iOS" or "Web". |
-| `weexVersion` | String | The version of Weex SDK. |
-| `appName` | String | Mobile app name or browser name. |
-| `appVersion` | String | The version of current app. |
-| `osName` | String | The OS name, could be "Android" or "iOS". |
-| `osVersion` | String | The version of current OS. |
-| `deviceModel` | String | Mobile phone device model. (native only) |
-| `deviceWidth` | Number | Screen resolution width. |
-| `deviceHeight` | Number | Screen resolution height. |
-
-[这个例子](http://dotwe.org/vue/ea2cff9039f3b0e406f8f7da10e874af) 打印出了 Weex 环境对象中的所有值。
-
-## `weex.document`
-
-`weex.document` 是当前页面的文档模型对象，可以用来创建和操作 DOM 树中元素。它是 Weex DOM API 规范的一部分，但是它和 [W3C 的 DOM 规范](https://www.w3.org/DOM/)中的 `document` 对象是不同的。
-
-而且，在使用了现代化的前端框架（如 Vue 和 Rax）的情况下，直接操作 DOM 并不是最佳实践。更何况**在 Weex 平台里并不一定有真实的 DOM**，在 Android 和 iOS 端上都是模拟出来的。
-
-这个接口主要是用在 Vue 和 Rax 框架内部，用于将 virtual-dom 转换成渲染执行，并且发送给 Weex 客户端的渲染引擎。不建议在开发页面时使用。
-
-## `weex.requireModule`
-
-对于那些不依赖 UI 交互的原生功能，Weex 将其封装成**模块**，这是一种通过 javascript 调用原生能力的方法。除了[内置模块](./modules/)以外，将已有的原生模块移植到 Weex 平台也很方便。你可以使用 `weex.requireModule` 接口引用自定义的或者内置的模块。
-
-```typescript
-weex.requireModule(name: string): Object | void;
-```
-
-**参数：**
-
-+ 大小写敏感的模块名。
-
-**返回值：**
-
-+ 如果模块已经注册了，返回一个 `Proxy` 对象（如果环境不支持 `Proxy` 则返回一个普通对象），可以使用这个对象调用客户端注册的方法。
-+ 如果模块未注册，返回 `undefined`。
-
-### 使用原生模块
-
-你可以像使用不同 javascript 函数一样使用原生注册的接口。这里是一个简单的[使用 modal 模块的例子](http://dotwe.org/vue/cd7e97f7da08d6d4ca627fc127ab8828)：
-
-```html
-<template>
- <div><text>Toast</text></div>
-</template>
-<script>
- const modal = weex.requireModule('modal')
- modal.toast({
- message: 'I am a toast.',
- duration: 3
- })
-</script>
-```
-
-## `weex.supports`
-
-> 这个接口只在 <span class="api-version">v0.15+</span> 或以上的版本可用。
-
-你应该了解 Weex 的组件和模块都是可以注册和配置的，这样导致了在不同环境中组件和模块的支持情况不一样。你可以使用 `weex.supports` 接口在运行期检测某个功能在当前环境中是否可用。
-
-```typescript
-weex.supports(condition: string): boolean | void;
-```
-
-**参数：**
-
-+ 特定格式的字符串：`@{type}/{name}`。
-
-`type` 必须是 `"component"` 和 `"module"` 之一。`name` 可以是标签名、模块名，也可以指定模块中的某个方法名（和模块名用 `.` 隔开）。
-
-**返回值：**
-
-+ 支持该特性，则返回 `true`。
-+ 不支持该特性，则返回 `false`。
-+ 参数格式错误或无法确定是否支持，则返回 `null`。
-
-### 使用范例
-
-检测某个组件是否可用：
-
-```js
-weex.supports('@component/slider') // true
-weex.supports('@component/my-tab') // false
-```
-
-检测某个模块是否可用：
-
-```js
-weex.supports('@module/stream') // true
-weex.supports('@module/abcdef') // false
-```
-
-检测某个模块是否包含某个方法：
-
-```js
-weex.supports('@module/dom.getComponentRect') // true
-weex.supports('@module/navigator.jumpToPage') // false
-```
-
-无效的输入：
-
-```js
-weex.supports('div') // null
-weex.supports('module/*') // null
-weex.supports('@stream/fetch') // null
-weex.supports('getComponentRect') // null
-```
-
-## `weex.isRegisteredModule`
-
-检测某个特定的模块或者接口是否可用。
-
-```typescript
-weex.isRegisteredModule(moduleName: string, methodName: string): boolean
-```
-
-这个接口只能用于检测特定模块和方法的兼容性，不支持检测组件。
-
-```js
-weex.isRegisteredModule('stream') // true
-weex.isRegisteredModule('stream', 'fetch') // true
-weex.isRegisteredModule('whatever', '- unknown -') // false
-weex.isRegisteredModule('div') // false, not support components
-```
-
-## `weex.isRegisteredComponent`
-
-检测某个特定的组件是否可用。
-
-```typescript
-weex.isRegisteredComponent(componentName: string): boolean
-```
-
-这个接口只能用于检测组件的兼容性，不支持检测模块。
-
-```js
-weex.isRegisteredComponent('div') // true
-weex.isRegisteredComponent('- unknown -') // false
-weex.isRegisteredComponent('navigator') // false, not support modules
-```
diff --git a/source/cn/releasenote.md b/source/cn/releasenote.md
deleted file mode 100644
index e8b5ba9..0000000
--- a/source/cn/releasenote.md
+++ /dev/null
@@ -1,473 +0,0 @@
----
-title: Release Note
-type: releasenote
-layout: post
----
-
-## v0.19.0
-
-- [WEEX-219][Android] support copy action for text component [#1037](https://github.com/apache/incubator-weex/pull/1037)
-- [WEEX-228][Android] ShouldStopPropagation Use ShortName StopPropagation [#1042](https://github.com/apache/incubator-weex/pull/1042)
-- [WEEX-222][Android] Sticky header in waterfall is not sticky [#1041](https://github.com/apache/incubator-weex/pull/1041)
-- [WEEX-210][Android] Weex Auto Scan Component And Module Discover [#1032](https://github.com/apache/incubator-weex/pull/1032)
-- [WEEX-216][Android] WXAnimation Fix Memory Leak and performance improve [#1026](https://github.com/apache/incubator-weex/pull/1026)
-- [WEEX-368][Android] Turn single process switch on for jsEngine [#1178](https://github.com/apache/incubator-weex/pull/1178)
-- [WEEX-380][Android] Fix weex show abnormally in single process [#1188](https://github.com/apache/incubator-weex/pull/1188)
-- [WEEX-281][Android] Auto Startup Time Quick [#1141](https://github.com/apache/incubator-weex/pull/1141)
-- [WEEX-325][Android] Some MeiZhu Mobole throw NoClassDefFoundError: android/support/design/widget/AppBarLayout$OnOffsetChangedListener [#1140](https://github.com/apache/incubator-weex/pull/1140)
-- [WEEX-299][Android] Touch event will transmit to next layer, requestDisallowInterceptTouchEvent should be reset for every touch event [#1138](https://github.com/apache/incubator-weex/pull/1138)
-- [WEEX-303][Android] fix nullPoint [#1106](https://github.com/apache/incubator-weex/pull/1106)
-- [WEEX-218][Android] support leftGap and rightGap for waterfall recycle-list's orientation support update attrs [#1031](https://github.com/apache/incubator-weex/pull/1031)
-- [Weex-260][Android] switch supports setting color [#1085](https://github.com/apache/incubator-weex/pull/1085)
-- [WEEX-224][Android] WXDomObject Destory Method Should Be Called avoid Memory Leak [#1086](https://github.com/apache/incubator-weex/pull/1086)
-- [WEEX-378][Android] wson support for weex-core new architecture and remove rapidjson [#1187](https://github.com/apache/incubator-weex/pull/1187)
-- [WEEX-399][Android] remove extra api js [#1203](https://github.com/apache/incubator-weex/pull/1203)
-- [WEEX-376][Android] Fix div layeroverflow event [#1191](https://github.com/apache/incubator-weex/pull/1191)
-- [WEEX-244][Android] Weex Android Support W3c Force Api [#1060](https://github.com/apache/incubator-weex/pull/1060)
-- [WEEX-240][Android] feature update for weexsandbox [#1088](https://github.com/apache/incubator-weex/pull/1088)
-- [WEEX-261][Android] Flat GUI NullPointerException fix [#1081](https://github.com/apache/incubator-weex/pull/1081)
-- [WEEX-288][Android] bug fix, fix on some case cannot get bundle type [#1110](https://github.com/apache/incubator-weex/pull/1110)
-- [WEEX-342][Android] when animation module or transition parser properties, some propers may be not right, so add try catch to handle the exceptions [#1275](https://github.com/apache/incubator-weex/pull/1275)
-- [WEEX-465][Android] fix performance point interactionTime record bug [#1278](https://github.com/apache/incubator-weex/pull/1278)
-- [WEEX-342][Android] ava.util.ConcurrentModificationException at java util.ArrayList$ArrayListIterator.next(ArrayList.java:573)at com.taobao.weex.ui.component.WXComponent.applyEvents(WXComponent.java:290) [#1273](https://github.com/apache/incubator-weex/pull/1273)
-- [WEEX-565][Android] do not set view's id if there is a id in this view [#1436](https://github.com/apache/incubator-weex/pull/1436)
-- [WEEX-564][Android] fix check screen empty logic [#1435](https://github.com/apache/incubator-weex/pull/1435)
-- [WEEX-562][Android] task may be null ,should be check ,not try/catch [#1425](https://github.com/apache/incubator-weex/pull/1425)
-- [WEEX-560][Android] fix null point of apm && report initJSFM fail info [#1422](https://github.com/apache/incubator-weex/pull/1422)
-- [WEEX-342][Android] ava.util.ConcurrentModificationException at java.util.ArrayList$ArrayListIterator.next(ArrayList.java:573)at [#1268](https://github.com/apache/incubator-weex/pull/1268)
-- [WEEX-457][Android] add back performance point of maxVDomDeep && int… [#1262](https://github.com/apache/incubator-weex/pull/1262)
-- [WEEX-454][Android] fix can't find libweexjss when deploy [#1259](https://github.com/apache/incubator-weex/pull/1259)
-- [WEEX-360][Android] Fix crash when reinit framework [#1171](https://github.com/apache/incubator-weex/pull/1171)
-- [WEEX-430][Android] Delete arm-v7a and x86 so before the program is run. [#1235](https://github.com/apache/incubator-weex/pull/1235)
-- [WEEX-412][Android] support multi vm [#1217](https://github.com/apache/incubator-weex/pull/1217)
-- [WEEX-419][Android] weeks bugfix for weexcore appear [#1246](https://github.com/apache/incubator-weex/pull/1246)
-- [WEEX-498][Android] fix report url is bundleUrlDefault [#1313](https://github.com/apache/incubator-weex/pull/1313)
-- [WEEX-506][Android] try fix report defaultUrl in mutilThread case [#1331](https://github.com/apache/incubator-weex/pull/1331)
-- [WEEX-453][iOS] transform/transformOrigin conflict when updateStyles [#1260](https://github.com/apache/incubator-weex/pull/1260)
-- [WEEX-262][iOS] Add new interface of Instance,which will terminate re… [#1079](https://github.com/apache/incubator-weex/pull/1079)
-- [WEEX-245][iOS] fix CTFont crash on iOS10 [#1062](https://github.com/apache/incubator-weex/pull/1062)
-- [WEEX-241][iOS] add WXVideoComponent "poster" attribute [#1051](https://github.com/apache/incubator-weex/pull/1051)
-- [WEEX-218][iOS] support leftGap and rightGap for waterfall component [#1029](https://github.com/apache/incubator-weex/pull/1029)
-- [WEEX-219][iOS] support copy action for text component [#1030](https://github.com/apache/incubator-weex/pull/1030)
-- [WEEX-215][iOS] recycle-list scroll orientation support [#1027](https://github.com/apache/incubator-weex/pull/1027)
-- [WEEX-375][iOS] add Protocol for PageEventNotifyEvent [#1183](https://github.com/apache/incubator-weex/pull/1183)
-- [WEEX-373][iOS] try to fix the issue about _remove_assocations [#1182](https://github.com/apache/incubator-weex/pull/1182)
-- [WEEX-345][iOS] fix animationModule with needLayout bug with nil propery [#1165](https://github.com/apache/incubator-weex/pull/1165)
-- [WEEX-339][iOS] add componentTime/Count monitor [#1150](https://github.com/apache/incubator-weex/pull/1150)
-- [WEEX-350][iOS] fix anim crash caused by problem that [WXConvert CGFl… [#1163](https://github.com/apache/incubator-weex/pull/1163)
-- [WEEX-343][iOS] Failure of "scaleY" on animationModule [#1154](https://github.com/apache/incubator-weex/pull/1154)
-- [WEEX-313][iOS] fix RTL issue [#1134](https://github.com/apache/incubator-weex/pull/1134)
-- [WEEX-297][iOS] fix iOS 11 save image permission [#1119](https://github.com/apache/incubator-weex/pull/1119)
-- [WEEX-282][iOS] update layout system to support rtl direction [#1105](https://github.com/apache/incubator-weex/pull/1105)
-- [WEEX-270][iOS] WXListComponent should add reload type of data update [#1095](https://github.com/apache/incubator-weex/pull/1095)
-- [WEEX-489][iOS] Fix resource not loaded when using dynamic framework … [#1305](https://github.com/apache/incubator-weex/pull/1305)
-- [WEEX-484][iOS] Failure of parsing transform parameter when in third-party environment [#1298](https://github.com/apache/incubator-weex/pull/1298)
-- [WEEX-468][iOS] Try to fix Fixed component related crash. [#1281](https://github.com/apache/incubator-weex/pull/1281)
-- [WEEX-548][iOS] Weex devtool can not debug recycle list [#1395](https://github.com/apache/incubator-weex/pull/1395)
-- [WEEX-563][iOS] fix the attribute of linear-gradient on iOS [#1434](https://github.com/apache/incubator-weex/pull/1434)
-- [WEEX-559][iOS] Fix issue that handleAppear should be resent for lazil… [#1420](https://github.com/apache/incubator-weex/pull/1420)
-- [WEEX-556][iOS] Fix video play state is not 'play' while set autoplay… [#1418](https://github.com/apache/incubator-weex/pull/1418)
-- [WEEX-555][iOS] fix layout engin bug [#1414](https://github.com/apache/incubator-weex/pull/1414)
-- [WEEX-552][iOS] apm for ios [#1412](https://github.com/apache/incubator-weex/pull/1412)
-- [WEEX-413][iOS] Fix when main thread parse transform cause deadlock [#1218](https://github.com/apache/incubator-weex/pull/1218)
-- [WEEX-513][iOS] Fix build issue [#1338](https://github.com/apache/incubator-weex/pull/1338)
-- [WEEX-513][iOS] Improve WeexSDK project file [#1337](https://github.com/apache/incubator-weex/pull/1337)
-- [WEEX-511][iOS] Fix debug log may crash when there is a retain cycle … [#1335](https://github.com/apache/incubator-weex/pull/1335)
-- [WEEX-501][iOS] Try to fix insert table view cell exception abort on iOS [#1322](https://github.com/apache/incubator-weex/pull/1322)
-- [WEEX-496][iOS] In CoreText mode, origin of first line is incorret un… [#1312](https://github.com/apache/incubator-weex/pull/1312)
-- [WEEX-353][iOS] Add weex-polyfill.js [#1164](https://github.com/apache/incubator-weex/pull/1164)
-- [WEEX-442][Core] Fix compile error [#1272](https://github.com/apache/incubator-weex/pull/1272)
-- [WEEX-442][Core] Fix setViewport [#1271](https://github.com/apache/incubator-weex/pull/1271)
-- [WEEX-458][Core] remove coremanager setxxx returntype [#1263](https://github.com/apache/incubator-weex/pull/1263)
-- [WEEX-433][Core] rm jni code from weexcore [#1238](https://github.com/apache/incubator-weex/pull/1238)
-- [WEEX-386][Core] Fix apply default style [#1220](https://github.com/apache/incubator-weex/pull/1220)
-- [WEEX-405][Core] make wson compilation modular [#1210](https://github.com/apache/incubator-weex/pull/1210)
-- [WEEX-411][Core] Fix memory leak due to return render time [#1214](https://github.com/apache/incubator-weex/pull/1214)
-- [WEEX-370][Core] Use GNU C++ Runtime [#1180](https://github.com/apache/incubator-weex/pull/1180)
-- [WEEX-376][Core] Support layeroverflow event [#1186](https://github.com/apache/incubator-weex/pull/1186)
-- [WEEX-445][jsfm] export requireModule to global [#1254](https://github.com/apache/incubator-weex/pull/1254)
-- [WEEX-397][jsfm] update build script of js framework [#1342](https://github.com/apache/incubator-weex/pull/1342)
-- [WEEX-547][jsfm] Remove module proxy cache of weex.requireModule [#1389](https://github.com/apache/incubator-weex/pull/1389)
-- [WEEX-461][jsfm] Remove useless trace function in js framework [#1358](https://github.com/apache/incubator-weex/pull/1358)
-
-## v0.18.0
-
-- `feature` `Android/iOS` TemplateList support lifecycle and statefull component [#1019](https://github.com/apache/incubator-weex/pull/1019) [#1023](https://github.com/apache/incubator-weex/pull/1023)
-- `feature` `Android` Support real time format to input component, support disable copy paste to input component [#1013](https://github.com/apache/incubator-weex/pull/1013)
-- `feature` `Android` Support use base64 to import fontface [#1006](https://github.com/apache/incubator-weex/pull/1006)
-- `feature` `Android` High performance binary Wson supported [#974](https://github.com/apache/incubator-weex/pull/974)
-- `feature` `Android` New touch dispatch mechanism and bubble sync method call for android touch event [#961](https://github.com/apache/incubator-weex/pull/961)
-- `feature` `Android` Support set global font to text component [#952](https://github.com/apache/incubator-weex/pull/952)
-- `feature` `Android` List component supported show scrollbar options [#951](https://github.com/apache/incubator-weex/pull/951)
-- `feature` `Android` box-shadow support multi shadows declaration [#915](https://github.com/apache/incubator-weex/pull/915)
-- `feature` `Android` Support `role` property to accessibility [#911](https://github.com/apache/incubator-weex/pull/911)
-- `bugfix` `Android` Fix network operation on main thread by WebSocket [#1015](https://github.com/apache/incubator-weex/pull/1015)
-- `bugfix` `Android` Fix font not rendered right when font is first downloaded [#972](https://github.com/apache/incubator-weex/pull/972)
-- `bugfix` `Android` Fix the `background-color` can not be set to `transparent` [#959](https://github.com/apache/incubator-weex/pull/959)
-- `bugfix` `Android` Improve JSService usage, support mutil type params [#941](https://github.com/apache/incubator-weex/pull/941)
-- `bugfix` `Android` Fix fix security weaknesses on libweex*.so [#934](https://github.com/apache/incubator-weex/pull/934)
-- `bugfix` `Android` Fix long-running operation on WXThread.scure() [#919](https://github.com/apache/incubator-weex/pull/919)
-- `bugfix` `Android` Fix status of pseudo class can not restore after touch [#907](https://github.com/apache/incubator-weex/pull/907)
-- `bugfix` `Android` Fix parallax component not reseted to right position when scrollToElement with animated:false option [#906](https://github.com/apache/incubator-weex/pull/906)
-- `feature` `weex-js-framework` Upgrade weex-vue-framework to [v2.5.13](https://github.com/vuejs/vue/releases/tag/v2.5.13), which implemented the `<recycle-list>`.
-- Only update batched and mutated attributes and styles in js framework ([#953](https://github.com/apache/incubator-weex/pull/953))
-- `feature` `weex-js-framework` Support append as tree on root element ([#954](https://github.com/apache/incubator-weex/pull/954))
-- `improvement` `weex-js-framework` Enhance the multi-instance isolation (sandbox) ([#960](https://github.com/apache/incubator-weex/pull/960))
-- `improvement` `weex-js-framework` Refactor the file structure and build scripts of js framework ([#964](https://github.com/apache/incubator-weex/pull/964) | [#1010](https://github.com/apache/incubator-weex/pull/1010))
-- `improvement` `weex-js-framework` Stop using ES6 Proxy to require a module ([#1017](https://github.com/apache/incubator-weex/pull/1017))
-- `bugfix` `iOS` bugfix about longpress and pangesture innner waterfall component invalid[#1007](https://github.com/apache/incubator-weex/pull/1007)
-- `improvemnet` `iOS` improve for threadSafe dictionary [1005](https://github.com/apache/incubator-weex/pull/1005)
-- `feature` `iOS` deprecate WXCallback and WXModuleCallback, use WXKeepAliveCallback and WXModuleKeepAliveCallback [1000](https://github.com/apache/incubator-weex/pull/1000)
-- `bugfix` `iOS` bugfix about iconfont draw failed on occasion [#997](https://github.com/apache/incubator-weex/pull/997)
-- `improvement` `iOS` [remove redundant implementation of slider](https://github.com/apache/incubator-weex/pull/973)
-- `feature` `iOS` support css value for safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom like [iPhone X design](https://webkit.org/blog/7929/designing-websites-for-iphone-x/)[#916](https://github.com/apache/incubator-weex/pull/916)
-- `feature` `iOS` support word-wrap on iOS when drawing text [#887](https://github.com/apache/incubator-weex/pull/887)
-- `improvement` `web` refactor appear watcher, image lazyloading, components implementation, some APIs, and the event triggering and handling system.
-- `improvement` `web` significantly improved runtime performance.
-- `bugfix` `web` fix event binding.
-- `bugfix` `web` fix indicator item styles.
-- `bugfix` `web` fix slider's overflow style.
-- `feature` `web` support create weex components through render function.
-- `feature` `web` support binding native events for custom components with .native modifier.
-- `feature` `web` all weex native events should be dispatched through dom elements.
-- `improvement` `web` refactor test procedure flow and increase test cases' total number to 96.
-- `bugfix` `web` fix two way binding for `<input>` component.
-- `bugfix` `web` fix return event for `<input>` component.
-- `bugfix` `web` fix errors relative to createEventMap.
-- `feature` `web` now you can use 'wx' unit.
-- `improvement` `web` remove weex.createEventMap method.
-- `bugfix` `web` fix <switch> component's styles.
-- `bugfix` `web` fix test cases for `<switch>` and `<input>`.
-- `bugfix` `web` webview.reload for `<web>` component always throws a error.
-- `bugfix` `web` should trigger error event when a cross origin issue arises.
-- `bugfix` `web` always trigger a error event when loaded a cross origin page.
-- `bugfix` `web` trigger duplicated appear/disappear events when there're more than one list.
-
-## v0.17
-
-* `feature` `Android/iOS` Support `writing direction style:direction=rtl`([#782](https://github.com/apache/incubator-weex/pull/782)[#886](https://github.com/apache/incubator-weex/pull/886))
-* `feature` `Android/iOS` Support scroll start and scroll end event on scroller and list ([#858](https://github.com/apache/incubator-weex/pull/858)[856](https://github.com/apache/incubator-weex/pull/856))
-* `feature` `iOS` support text max-width （[#834](https://github.com/apache/incubator-weex/pull/834)）
-* `feature` `Android` CSS Transiton Animation Supported component ([#851](https://github.com/apache/incubator-weex/pull/851))
-* `feature` `Android` New `local` module ([#781](https://github.com/apache/incubator-weex/pull/781))
-* `feature` `Android` Support ripple background on Android 5.0 and higher ([#792](https://github.com/apache/incubator-weex/pull/792))
-* `feature` `Android` Support multi language on dialog ([#831](https://github.com/apache/incubator-weex/pull/831))
-* `feature` `H5` Support lazyload and appear watcher when body height set to 100% ([#827](https://github.com/apache/incubator-weex/pull/827)).
-* `feature` `H5` Add try catch for storage accessing incase user disabled the related function in a browser ([#827](https://github.com/apache/incubator-weex/pull/827)).
-* `feature` `H5` image support css sprite (sprite-src, sprite-position, sprite-width) ([#827](https://github.com/apache/incubator-weex/pull/827)).
-* `feature` `JSFM` Support batch update styles and attributes in Vue.js ([#819](https://github.com/apache/incubator-weex/pull/819) [#7046](https://github.com/vuejs/vue/pull/7046))
-* `feature` `JSFM` Stop trimming CSS units in richtext component. ([#6927](https://github.com/vuejs/vue/pull/6927))
-* `feature` `JSFM` Stop rethrow the captured error on Weex platform. ([#7024](https://github.com/vuejs/vue/pull/7024))
-* `feature` `JSFM` Upgrade weex-vue-framework to 2.5.3 ([release nodes](https://github.com/vuejs/vue/releases/tag/v2.5.3))
-* `feature` `JSFM` Adjust the behavior of `nextTick` to improve compatibility.
-* `bugfix` `iOS` bugfix boxshadow render abnormal （[#791](https://github.com/apache/incubator-weex/pull/791)）
-* `bugfix` `iOS` bugfix timer exposed on JSContxt （[#839](https://github.com/apache/incubator-weex/pull/839)）
-* `bugfix` `iOS` fix iOS8 scrollview’s assign delegate crash （[#838](https://github.com/apache/incubator-weex/pull/838)）
-* `bugfix` `iOS` fix setViewport：sometimes doesn’t work（[#843](https://github.com/apache/incubator-weex/pull/843)）
-* `bugfix` `iOS` fix addEvent lead to generate a new view while it as been recycled （[#837](https://github.com/apache/incubator-weex/pull/837)）
-* `bugfix` `iOS` fix about setting nan frame crash （[#853](https://github.com/apache/incubator-weex/pull/853)）
-* `bugfix` `iOS` disable tableview estimation row or section height which make list component behavior abnormal （[#867](https://github.com/apache/incubator-weex/pull/867)）
-* `bugfix` `Android` Fix that moveElement doesn’t work when parent is not a list ([#805](https://github.com/apache/incubator-weex/pull/805))
-* `bugfix` `Android` Fix flicker caused by coexistence of box-shadow and border-radius (#[780](https://github.com/apache/incubator-weex/pull/780))
-* `bugfix` `Android` Fix android new Date() cannot get accuracy time ([#753](https://github.com/apache/incubator-weex/pull/753))
-* `bugfix` `H5` Fix scroll event listenning and scrollToElement on chrome for the latest version ([#827](https://github.com/apache/incubator-weex/pull/827)).
-
-## v0.16
-
-* support 3d rotate ([#532](https://github.com/apache/incubator-weex/pull/532) [#418](https://github.com/apache/incubator-weex/pull/418))
-* new feature support perspective function in transform ([#551](https://github.com/apache/incubator-weex/pull/551)[#532](https://github.com/apache/incubator-weex/pull/532))
-* new feature support save image to photo album ([547](https://github.com/apache/incubator-weex/pull/547) [575](https://github.com/apache/incubator-weex/pull/575) [544](https://github.com/apache/incubator-weex/pull/544))
-* support `image.save` ([#575](https://github.com/apache/incubator-weex/pull/575)).
-* optimize event binding and support mobile firefox, and also fix a lot of other things ([#606](https://github.com/apache/incubator-weex/pull/606)).
-* Support js service in Rax DSL.
-* Partial support of sending `ArrayBuffer` between js and native.
-* Add basic support of `<recycle-list>`, both in Vue and Rax DSL.
-* Support saving image to photo alubm in `image` [#547](https://github.com/apache/incubator-weex/pull/547)
-* Support perspective features [#551](https://github.com/apache/incubator-weex/pull/551)
-* New interface to performance tracing [#586](https://github.com/apache/incubator-weex/pull/586)
-* Add the ability of FlatGUI, it can reduce the view hierarchy in `cell` [#643](https://github.com/apache/incubator-weex/pull/643)
-* Support the `box-shadow` style for Android 4.3 and higher [#685](https://github.com/apache/incubator-weex/pull/685)
-* Support float interval/delay in timer [#699](https://github.com/apache/incubator-weex/pull/699)
-* New `recycle-list` compoent with hight performance and low memory cost [#726](https://github.com/apache/incubator-weex/pull/726)
-* remove dependency about socketRocket dependency in iOS.
-* fix coretext crash in iOS.
-* fix toast view still pop while the page was destroyed in iOS.
-* separate weex-vue-render into two parts: render core and plugins ([#533](https://github.com/apache/incubator-weex/pull/533)).
-* Fix Jni crash due to emoji [#574](https://github.com/apache/incubator-weex/pull/574)
-* Fix the lost refresh header of `list` in viewpager [#601](https://github.com/apache/incubator-weex/pull/601)
-* Fix draw iconfont fail when first download iconfont [#625](https://github.com/apache/incubator-weex/pull/625)
-* Fix the problem of 'text-overflow:clip' [#718](https://github.com/apache/incubator-weex/pull/718)
-* Fix android new Date() cannot get accuracy time [#753](https://github.com/apache/incubator-weex/pull/753)
-
-## v0.15
-------
-* support fast click and hairlines border [#507](https://github.com/apache/incubator-weex/pull/507).
-* Add `weex.supports` api for feature detections. [#6053](https://github.com/vuejs/vue/pull/6053)
-* Change default image quality to `WXImageQuality.AUTO` [#478](https://github.com/apache/incubator-weex/pull/478)
-* Support the `scroll` event on horizontal scroller[#494](https://github.com/apache/incubator-weex/pull/494)
-* Fix the console API to adapt JSC on Android. [#470](https://github.com/apache/incubator-weex/pull/470)
-* Fix invalid call scrollToElement when has not option param [#491](https://github.com/apache/incubator-weex/pull/491)
-* Fix the lines of `text` cannot be reset [#493](https://github.com/apache/incubator-weex/pull/493)
-* Fix invalid init index on `slider` [#510](https://github.com/apache/incubator-weex/pull/510)
-* Fix Memory optimization for `list` [#512](https://github.com/apache/incubator-weex/pull/512)
-
-## v0.14
-------
-* support `waterfall` component ([#438](https://github.com/apache/incubator-weex/pull/438)).
-* support pseudo-class ([#474](https://github.com/apache/incubator-weex/pull/474)).
-* Support component method in Vue DSL. ([proposal](https://github.com/alibaba/weex/issues/969))
-* Support returning value synchronously for module methods. ([proposal](https://github.com/alibaba/weex/issues/1677))
-* Support drag-drop on `list` [#416](https://github.com/apache/incubator-weex/pull/416)
-* Support rotateX and rotateY, optimize animation as well [#418](https://github.com/apache/incubator-weex/pull/418)
-* Fix wrong vertical offset in scroll event on `waterfall` [#424](https://github.com/apache/incubator-weex/pull/424)
-* Fix `clearTimeout` and `clearInterval` doesn't work when funId is greater than 127 [#439](https://github.com/apache/incubator-weex/pull/439)
-
-## v0.13.0
-
-* Slider implemention is refactored [Pull Request#414](https://github.com/apache/incubator-weex/pull/414)
-* Improve integration test. We are working with macaca team, to write better test code.[Pull Request#411](https://github.com/apache/incubator-weex/pull/411) [Pull Request#397](https://github.com/apache/incubator-weex/pull/397) [Pull Request#402](https://github.com/apache/incubator-weex/pull/402) [Pull Request#413](https://github.com/apache/incubator-weex/pull/413) [Pull Request#390](https://github.com/apache/incubator-weex/pull/390) [Pull Request#346](https://github.com/apache/incubator-weex/pull/346) [Pull Request#319](https://github.com/apache/incubator-weex/pull/319) [Pull Request#304](https://github.com/apache/incubator-weex/pull/304) [Pull Request#295](https://github.com/apache/incubator-weex/pull/295)
-* `scroller` now has `pagingEnabled` attribute, which can enable `paging` feature in native [Pull Request#393](https://github.com/apache/incubator-weex/pull/393)
-* New 'prerender' mechanism, which will support rendering a page in background. [Pull Request#343](https://github.com/apache/incubator-weex/pull/343) Pull Request#342](https://github.com/apache/incubator-weex/pull/342)
-* Fix `line-height` feature in iOS. [Pull Request#377](https://github.com/apache/incubator-weex/pull/377) [Pull Request#305](https://github.com/apache/incubator-weex/pull/305)
-* Add `needLayout` option in animation module operation after animation finished [Pull Request#337](https://github.com/apache/incubator-weex/pull/337) [Pull Request#336](https://github.com/apache/incubator-weex/pull/336)
-* `list` component has new type of event for `sticky` feature [Pull Request#332](https://github.com/apache/incubator-weex/pull/332)
-* Support bota and atob [Pull Request#315](https://github.com/apache/incubator-weex/pull/315)
-* Fix mixing background-color and border-color(rgba) in android [Pull Request#359](https://github.com/apache/incubator-weex/pull/359)
-* Beside these, lots of crashes and bugs are fixed.
- * [Pull Request#441](https://github.com/apache/incubator-weex/pull/441)
- * [Pull Request#413](https://github.com/apache/incubator-weex/pull/413)
- * [Pull Request#403](https://github.com/apache/incubator-weex/pull/403)
- * [Pull Request#373](https://github.com/apache/incubator-weex/pull/373)
-
-## v0.12.0 (First Offical Release)
-
-
-- C++ timer by lycool
- - Discussed in https://lists.apache.org/thread.html/567c9b19d68ccf3e0d24c1467298ebcd4316ffa524c557a34c6c087f@%3Cdev.weex.apache.org%3E
- - relate pull requests:[apache/incubator-weex/pull/228|https://github.com/apache/incubator-weex/pull/228], [apache/incubator-weex/pull/232|https://github.com/apache/incubator-weex/pull/232], [apache/incubator-weex/pull/221|https://github.com/apache/incubator-weex/pull/221]
-- Add scroller/list scroll event in html5 render android&iOS already have this feature in v0.11 https://github.com/apache/incubator-weex/commit/f50fba8647c8bb6ac522b1a4569a2a2269da1953
-- Enhance accessibility, new `aria-label` & `role` support [apache/incubator-weex/pull/149|https://github.com/apache/incubator-weex/pull/149]
-- Native input/textarea enhancement by kfeagle & misakuo support `number` data type; support soft keyboard event
-- Picker module enhancement More picker options to customize picker dialog style(background color etc.). Related pull requests: [apache/incubator-weex/pull/234|https://github.com/apache/incubator-weex/pull/234], [apache/incubator-weex/pull/233|https://github.com/apache/incubator-weex/pull/233]
-- Android DOM module refactor Seperate module code by action, increasing the maintainability. [apache/incubator-weex/pull/104|https://github.com/apache/incubator-weex/pull/104]
-
-## v0.10.0
-
-- New Feature
- - Support Vue.js
- The Vue.js 2.1.8 ([runtime-only build](https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build)) is in WeexSDK now. You can use Vue.js to build native app by WeexSDK 0.10.0.
- We reused the original native render engine and developed a new renderer ([weex-vue-render](https://www.npmjs.com/package/weex-vue-render)) for the web platform, which is based on Vue 2.0.
- The former front-end framework (commonly known as `.we`), which is inspired by Vue 1.0, is deprecated. Although it still works well in this release, we suggest to migrate it to Vue 2.0.
- - SDK
- - New CSS support
- - [text `font-weight`](https://weex.apache.org/wiki/text-styles.html)
- `font-weight` can set to [`normal`|`bold`] or 100-900.
- - gradient
- like CSS3, now you can use gradient in Weex. For example:
-
- ``` css
- background-image: linear-gradient(to right, blue, white);
- ```
- 
- [Read more about gradient](https://weex.apache.org/wiki/common-styles.html#linear-gradient-v0-10).
- - Pseudo class
- Currently, Weex supports 4 pseudo classes:`active`, `focus`, `disabled`, `enabled`.
- - New BroadcastChannel API
- Developers can use `BroadcastChannel` API to implement inter-instance communication.
-
- ``` js
- const Stack = new BroadcastChannel('Avengers')
- Stack.onmessage = function (event) {
- console.log(event.data) // in this case, it's "Hulk Smash !!!"
- }
- // in another instance
- const Hulk = new BroadcastChannel('Avengers')
- Hulk.postMessage("Hulk Smash !!!")
- ```
- - Image's `onload` event add [`naturalHeight` and `naturalWidthimage`](https://weex-project.io/references/components/image.html) to get the original size of image file.
- - Websocket Support
- WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's h5/iOS/android and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.
- [Read more about Weex's websocket.](https://weex-project.io/cn/references/modules/websocket.html)
- - Support synchronous method call
- Both module and component method can defined synchronous method exposed to JS runtime now. Means native will invoke these method in JS thread directly.
- - Support `viewport` configuration
- Similar to [W3C specification](https://drafts.csswg.org/css-device-adapt/#viewport-meta), Weex support set define `viewport` in script tag:
-
- ``` html
- <script type="config">
- {
- "viewport": {
- "width": "device-width"
- }
- }
- </script>
- ```
- - Tools
- - [Devtools](https://github.com/weexteam/weex-devtool)
- - Support Vue 2.0 debugging.
- - Add network switch for network inspector.
- - Make application capable to decide which bundle is 'un-debuggable', which means page's source code is unreadable in debug mode.
- - [Weexpack](https://github.com/weexteam/weex-pack)
- - Has full set of commands for developers to setup android/ios application with his .we/.vue files.
- - Developers could easily pack/install his application with simple command.
- - Has full set of commands for developers to manage weex plugins, including create plugin template, add plugin to his project etc.
- - [Plugin market](https://market.dotwe.org) was formally used for developers to publish/download weex plugins.
-
-
-## v0.9.4
-
-- New features
- - SDK
- - New API to get Component's size and position:
- Now you can get these data through `getComponentRect`:
- ``` javascript
- var dom = require('@weex-module/dom');
- dom.getComponentRect(this.$el('comp_id'), function(data){
- if(data.result)
- console.log(data);
- });
- ```
- The `data` callback parameter contains a `result` to tell if operation is success. And `size` tell you the true data(`bottom`/`top`/`left`/`right`/`width`/`height`) of component.
- - A brand new `picker` module. We have 'single-picker','date-picker' and 'time-picker' currently, and more common pickers are on the way.
- 
- There are two ways to use `picker`
- - Use `picker` module directly:
- ``` javascript
- var picker = require('@weex-module/picker');
- var self = this;
- picker.pickDate({
- 'value':'2016-11-28',
- 'max':'2029-11-28',
- 'min':'2015-11-28'
- },function (ret) {
- var result = ret.result;
- if(result == 'success')
- {
- self.value = ret.data;
- }
- });
- ```
- - `input` component also add 'date' and 'time`type to work with`picker` module internally:
- ``` html
- <input
- type="date"
- placeholder="select date"
- class="input"
- autofocus="false"
- value=""
- onchange="onchange"
- max = "2029-11-28"
- min = "2015-11-28"
- ></input>
- ```
- - Support animation with `width` and `height` property.
- - Support use empty value to reset css property to default value.
- - Components can expose methods too, like modules do. Developers use the same way as create module method to achieve that.
- - Add `blur` and `focus` method to manually control `input` component to lose or get focus.
- - Support relative URL, which will resolve real URL by bundle's URL.
- - Core javascript framework's unit test coverage is 100% now. we'll pay more attention to quality.
- - DevTool
- - Support to check the node hierarchy in [weex-devtool-extension](https://github.com/weexteam/weex-devtool-extension) and highlight the node if it exceeds an specified level.
- - Support different refresh mode in devtools to reload the page or SDK automatically when source file updated.
- - Improve quality in [weex-devtools-android](https://github.com/weexteam/weex-devtools-android) module
- - Remove explicit dependency on okhttp and okhttp3 by reflection and proxy
- - Improve demo application with less and refactored code
- - Fix some crash caused by class up cast
- - Fix reflection crash caused by complier optimization
- - Fix "network on main thread" and stop screencast when disconnect
- - Add [weex-analyzer-android](https://github.com/weexteam/weex-analyzer-android) and [weex-analyzer-ios](https://github.com/weexteam/weex-analyzer-ios) which support the following on device directly:
- - Inspect FPS/CPU/memory
- - Inspect storage
- - Display log information
- - 3D viewer of the weex page
- - Javascript error prompt
-
-
-## v0.8.0
-
-- New Features
- - Add [globalEvent module](https://github.com/alibaba/weex/blob/doc/doc/modules/globalevent.md)
- - Support `width/height` animation in transition
- - Refactor the default js framework code, hide almost all the private APIs #777
- - iOS 10 compatibility
-- Performance
- - Support `callAddElement` low-level API to make rendering faster
- - Improve SDK initialization performance, for minimise invoke thread impact.
- - Use native `Set` polyfill to fix iOS7 memory leak
- - Use `setProperty` replace reflection for better performance
- - Add `static` directive in default js framework to avoid unnecessary data-binding and take down the memory use
-- Tools
- - Add [weex-pack](https://github.com/weexteam/weex-pack), our next generation of engineering development kits. It allows developers to create weex projects with simple commands and run the project on different development platforms.
- - Add [weex-devtool-extension](https://github.com/weexteam/weex-devtool-extension), a extension for Weex devtool to improve your debug experience，which equivalent an element tag for debugger page.
- - Move devtool to separate [iOS](https://github.com/weexteam/weex-devtool-iOS) and [Android](https://github.com/weexteam/weex_devtools_android) repos.
- - Add "screencast" which enable the screen of the device(or monitor) to appear on the "Inspector" page;
- - Add "remote control" function, in Android user could control remote device(or monitor) when he moves mouse on screencast;
- - Add "select element" function which enable the user to find the exact node in "Elements" inspector Tab when he click the mouse on screencast;
- - Add "vdom inspector", so user can choose to see the details of native dom or vdom in "Elements" Tab at his preference;
- - Adjust interfaces with weex SDK to support "callAddElement";
-
-
-## v0.7.0
-
-- New Features
- - [Timer Module](https://github.com/alibaba/weex/blob/doc/doc/modules/timer.md)
- - [Storage Module](https://github.com/alibaba/weex/blob/dev/doc/modules/storage.md)
- - Unify the `image` component's error page when src is invalid
- - Unify the `border`,`padding`,`background-color` style
- - Horizontal-scroller support `scrollto` api
- - Fix the issue that component with `position:fixed` style can not be closed
- - Module callback support `object` params
- - Slider suppport `setIndex` api
-- Performance
- - Use `callNative` signal to stop JSFM render after instance been destroyed
- - Lazily initialize JSFM When device is in low-memory status, improve SDK stability
-- [Tools](http://alibaba.github.io/weex/doc/tools/devtools.html)
- - Support debugging weex(.we) and react(.jsx) source
- - Support apps debugging on the same device
- - Support "watch" feature
- - Solve the dependency on Debugger, user could start "Inspector" first or "Debugger" at will
- - Add "refresh" function in sdk, user could inspect new file by scanning its QR code in playground;
- - Android/ios inspect module split from weex sdk, and will deliver in separate repo in future; support inspect in windows system
-
-## v0.6.1
-
-- New Features
- 1. [iOS has been open sourced](https://github.com/alibaba/weex/tree/dev/ios)
- 2. [Lifecycle Page Event](https://github.com/alibaba/weex/blob/v0.6.1/doc/references/common-event.md#page-event): viewappear, viewdisappear
- 3. [fetch](https://github.com/alibaba/weex/blob/v0.6.1/doc/modules/stream.md#fetchoptions-callbackprogresscallback)
- 4. [line-height](https://github.com/alibaba/weex/blob/v0.6.1/doc/components/text.md#styles)
- 5. [list component](https://github.com/alibaba/weex/blob/v0.6.1/doc/components/list.md)
- - support sticky header
- - support scrollToElement API
- - support nested horizontal scroller
- - support cell children nodes event: appear/disappear
- 6. [Gesture](https://github.com/alibaba/weex/blob/v0.6.1/doc/references/gesture.md): panstart/panmove/panend, swipe, longpress
- 7. Improve Android text compatibility
-- Performance
- 1. iOS, iPhone 5c, rendering frame rate ascends from 45FPS to 52FPS
- 2. Android, Redmi Note 1, loading time of the first screen descends from 602ms to 480ms
- 3. Improve Android animation performance
-- Tools
- 1. [weex-toolkit](https://www.npmjs.com/package/weex-toolkit) supports require and generator
- 2. Playground supports runtime performance viewer
- 3. [Weex DevTools](https://github.com/alibaba/weex/blob/v0.6.1/doc/tools/devtools.md)
-
- <img src="https://img.alicdn.com/tps/TB1O.nwKFXXXXX8XpXXXXXXXXXX-1436-811.png" width="600">
-
-
-## v0.5.0
-
-### New Features
-1. [TabBar](https://github.com/alibaba/weex/blob/dev/doc/components/wxc-tabbar.md) is a specialized component corresponding to the radio-style selection.
-2. [NavPage](https://github.com/alibaba/weex/blob/dev/doc/components/wxc-navpage.md) contains a navbar at the top of the window and an embed content page.
-3. [Activity Showcase](https://github.com/alibaba/weex/blob/dev/examples/showcase/new-fashion/index.we) is built by composing TabBar and NavPage.
-4. [Web](https://github.com/alibaba/weex/blob/dev/doc/components/web.md) displays web content in the weex page.
-5. [A](https://github.com/alibaba/weex/blob/dev/doc/components/a.md) defines a hyperlink to a page in the web.
-6. `Text` supports style [text-overflow](https://github.com/alibaba/weex/blob/dev/doc/references/text-style.md#properties).
-7. `Image` supports attribute [resize](https://github.com/alibaba/weex/blob/dev/doc/components/image.md#styles).
-8. `List` supports [events `appear`, `disappear`, `loadmore`](https://github.com/alibaba/weex/blob/dev/doc/components/list.md#events) and [refresh](https://github.com/alibaba/weex/blob/dev/doc/components/list.md#child-components).
-9. New Syntax
- 1. [Inline event](https://github.com/alibaba/weex/blob/dev/doc/syntax/events.md#inline-handler) supports a expression of calling event handler in template.
- 2. [Require Native Module](https://github.com/alibaba/weex/blob/dev/doc/modules#how-to-use) requires a native module by `require('@weex-module/moduleName')`.
- 3. [Computed Property](https://github.com/alibaba/weex/blob/dev/doc/syntax/data-binding.md#computed-properties) supports complicated logic in data bindings.
- 4. [New Repeat Syntax](https://github.com/alibaba/weex/blob/dev/doc/syntax/display-logic.md#a-extension-of-repeat-syntax) is easy to access the key or value of repeated object.
diff --git a/source/cn/resources.md b/source/cn/resources.md
deleted file mode 100644
index b83535e..0000000
--- a/source/cn/resources.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: 资源
-type: community
-has_chapter_content: false
-version: 2.1
----
-
-## 关于 Weex 项目
-
-- [Weex 官方网站](http://weex.apache.org/) (weex.apache.org).
-- [Weex 官方网站 阿里云镜像](https://weex-project.io/) (weex-project.io) 加速中国用户访问
-- [Weex 项目孵化状态](http://incubator.apache.org/projects/weex.html).
-- [邮件列表](https://lists.apache.org/list.html?dev@weex.apache.org).
-- [Issues](https://issues.apache.org/jira/projects/WEEX/issues).
-- [Weex 贡献指南](https://github.com/apache/incubator-weex/blob/master/CONTRIBUTING.md) 让您了解如何为 Weex 贡献代码或参与邮件组讨论。
-- [Weex FAQ](https://weex.apache.org/cn/wiki/faq.html).
-
-## 前端框架支持
-
-- [Rax](https://alibaba.github.io/rax/) **Rax** 是一个兼容 React API 的前端框架。
-- [Vue.js](https://vuejs.org/) **Vue.js** 是一个用于构建用户界面的渐进式前端框架。
-
-## 组件和模块
-
-- [Weex Ui](https://alibaba.github.io/weex-ui/) **Weex Ui** 是一个富交互、轻量级、高性能的UI库。
-
-## Tools
-
-- [在线 Playground](http://dotwe.org/vue/) 一个提供 Weex 代码实验和预览的网站，同时支持便捷的分享功能。
-- [Playground 应用](https://weex.apache.org/cn/tools/playground.html) 您可以在 Playground 应用中预览 Weex，并且学习如何使用 Weex。
-- [Weex Language support for Intellij](https://plugins.jetbrains.com/plugin/9189-weex-language-support) 一个为 Intellij 提供 Weex 语言支持的插件。
-
-## 社区
-
-- [SegmentFault](https://segmentfault.com/t/weex)
-- [StackOverflow](https://stackoverflow.com/questions/tagged/weex)
-- [Telegram Russian Community Group](https://telegram.me/weex_ru)
-- [Gitter for weex-en](https://gitter.im/weex-en/Lobby)
-
-### 文章
-
-- [Weex 相关文章](https://github.com/weexteam/article/issues).
-
-### 例子
-
-- [Weex Vue 实例](https://hanks10100.github.io/weex-vue-examples/)
diff --git a/source/cn/tools/helpers.md b/source/cn/tools/helpers.md
deleted file mode 100644
index 5f801f2..0000000
--- a/source/cn/tools/helpers.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Weex语法支持插件
-type: tools
-order: 5.2
-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)项目中
diff --git a/source/cn/tools/index.md b/source/cn/tools/index.md
deleted file mode 100644
index 33a61f6..0000000
--- a/source/cn/tools/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: 开发工具
-type: tools
-order: 5
-version: 2.1
----
-
-# 开发工具
-
-+ [Playground App](/tools/playground.html)
-+ [Online Playground](http://dotwe.org/vue/)
-+ [weex-toolkit](./toolkit.html)
-+ [Weex Language Support插件](/cn/tools/helpers.html)
diff --git a/source/cn/tools/playground.ejs b/source/cn/tools/playground.ejs
deleted file mode 100644
index 7f3b070..0000000
--- a/source/cn/tools/playground.ejs
+++ /dev/null
@@ -1,3 +0,0 @@
-layout: playground
-type: playground
----
\ No newline at end of file
diff --git a/source/cn/tools/toolkit.md b/source/cn/tools/toolkit.md
deleted file mode 100644
index b63e100..0000000
--- a/source/cn/tools/toolkit.md
+++ /dev/null
@@ -1,203 +0,0 @@
----
-title: 使用 weex-toolkit
-type: tools
-order: 5.1
-version: 2.1
----
-
-# weex-toolkit
-
-[weex-toolkit](https://github.com/weexteam/weex-toolkit) 是官方提供的一个脚手架命令行工具，你可以使用它进行 Weex 项目的创建，调试以及打包等功能。
-
-## 安装
-
-``` bash
-$ npm install -g weex-toolkit
-```
-
-> 如果你本地没有安装 node.js 你可以前往[Nodejs 官网](https://nodejs.org/en/)下载安装, 并确保你的 node 版本是>=6，你可以使用 [n](https://github.com/tj/n) 来进行 node 的版本管理。
-
-中国用户如果npm遭遇网络问题，可以使用淘宝的 [npm镜像](https://npm.taobao.org/)或通过[nrm](https://www.npmjs.com/package/nrm)工具切换你的npm镜像：
-
-``` bash
-$ npm install weex-toolkit -g --registry=https://registry.npm.taobao.org
-// 或者
-$ npm use taobao
-$ npm install weex-toolkit -g
-```
-
-如果你安装的过程中遇到了问题，你可以在[weex-toolkit常见问题](https://github.com/weexteam/weex-toolkit/blob/master/README-zh.md#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)中找到解决方法或者在[weex-toolkit issues](https://github.com/weexteam/weex-toolkit/issues)中进行反馈。
-
-
-## 命令
-
-### create
-```bash
-# 从官方模板中创建项目
-$ weex create my-project
-
-# 从github上下载模板到本地
-$ weex create username/repo my-project
-```
-从官方模板或者远程源创建项目模板，你也可以创建你自己的`weex`项目模板，更多细节你可以查看[如何创建你自己的模板](https://github.com/weex-templates/How-to-create-your-own-template).
-
-### preview
-
-weex-toolkit工具支持对你的Weex文件（`.we`或`.vue`)在监听模式下进行预览，你只需要指定一下你的项目路径。
-
-自`weex-toolkit v1.1.0+`版本后修改
-``` bash
-$ weex preview src/foo.vue
-```
-
-浏览器会自动得打开预览页面并且你可以看到你的weex页面的布局和效果。如果你在你的设备上安装了[Playground](/cn/tools/playground.html)，你还可以通过扫描页面上的二维码来查看页面。
-
-使用下面的命令，你将可以预览整个文件夹中的`.vue`文件
-
-``` bash
-$ weex src --entry src/foo.vue
-```
-
-你需要指定要预览的文件夹路径以及入口文件（通过`--entry`传入）。
-
-### compile
-
-使用 `weex compile` 命令可以编译单个weex文件或者整个文件夹中的weex文件。
-
-``` bash
-$ weex compile [source] [dist] [options]
-```
-
-#### 参数
-
-| Option | Description |
-| -------- | :----- |
-|`-w, --watch` | 开启watch模式，同步文件改动并进行编译|
-|`-d,--devtool [devtool]`|设置devtool选项|
-|`-e,--ext [ext]`| 设置文件拓展名，默认为vue|
-|`-m, --min`| 压缩jsbundle选项|
-
-你可以这样子使用：
-
-``` bash
-$ weex compile src dest --devtool source-map -m
-```
-
-### platform
-
-使用`weex platform [add|remove] [ios|android]`命令可以添加或移除ios/android项目模板。
-
-``` bash
-$ weex platform add ios
-$ weex platform remove ios
-```
-
-使用 `weex platform list`来查看你的项目中支持的平台。
-
-### run
-
-你可以使用`weex-toolkit`来运行android/ios/web项目.
-
-``` bash
-$ weex run ios
-$ weex run android
-$ weex run web
-```
-
-### debug
-
-** [Weex devtools](https://github.com/weexteam/weex-devtool) ** 是实现[Chrome调试协议](https://developer.chrome.com/devtools/docs/debugger-protocol)的Weex自定义开发工具,
-主要用于帮助你快速检查您的应用程序，并在Chrome网页中调试您的JS bundle源代码，支持Android和iOS平台。所以你可以通过`weex-toolkit`使用的`weex-devtool`功能。
-
-#### 用法
-
-``` bash
-weex debug [we_file|bundles_dir] [options]
-```
-
-#### 参数
-
-| Option | Description |
-| -------- | :----- |
-|`-v, --version`| 显示weex-debugger版本信息|
-|`-h, --help`| 展示帮助信息 |
-|` -H --host [host]`| 设置浏览器打开的host地址（适用于代理环境下，如docker环境等）|
-|`-p, --port [port]`| 设置调试服务器的端口，默认值 8088|
-|`-m, --manual`|开启该选项后将不会自动打开浏览器|
-|`-e,--ext [ext]`|设置文件拓展名用于编译器编译，默认值为`vue`|
-|`--min`|开启该选项后将会压缩jsbundle|
-|`--telemetry`|上传用户数据帮助提升weex-toolkit体验|
-|`--verbose`|显示详细的日志数据|
-|`--loglevel [loglevel]`|设置日志等级，可选silent/error/warn/info/log/debug,默认值为error|
-|`--remotedebugport [remotedebugport]`|设置调试服务器端口号，默认值为9222|
-
-#### 功能介绍
-
-##### 连接设备
-使用以下命令打开调试页面，使用测试包扫码，进入你需要调试的weex页面
-```
-$ weex debug
-```
-自`weex-toolkit v1.1.0+`版本起默认的debug工具已从[weex-devtool](https://github.com/weexteam/weex-devtool)切换至[weex-debugger](https://github.com/weexteam/weex-debugger)，如想使用旧版本devtool，可通过以下命令使用：
-
-```
-$ weex xbind debugx weex-devtool
-$ weex debugx
-```
-
-##### 链接设备
-
-请使用[weex playground app](/tools/playground.html)扫码或使用集成了weex-devtool的app进行扫码，集成方法见[集成devtool工具](#集成devtool工具)。有ios模拟器环境的用户也可以通过点击二维码的方式进行模拟器调试（仅限mac用户使用）。
-
-
-
-##### 编译 `.vue` 文件
-
-```
-$ weex debug your_weex.vue
-```
-点击可扫码的二维码按钮即可打开编译后得到的产物二维码，可直接通过weex playground app 进行扫码预览。
-
-
-
-##### Inspector功能
-> Inspector功能可查看页面的VDOM/Native Tree结构
-
-注：如不需要此功能尽量保持关闭状态，开启浏览器Inspector界面会增加大量页面通讯，较为影响性能。
-
-
-
-
-
-##### JS Debug功能
-> JS Debug功能可对weex页面中的Jsbundle进行调试。
-
-
-
-
-##### Network功能
-> Network功能可以收集weex应用中的网络请求信息。
-
-
-
-
-##### LogLevel和ElementMode功能
-> LogLevel和ElementMode功能用于调整调试工具的输出配置。
-
-LogLevel分别有 debug/info/warn/log/error五个log等级，切换可输出不同等级的log信息
-ElementMode可以切换Element标签中Domtree显示模式，下图为vdom显示界面，可从标签中看到详细的数据结构：
-
-
-
-##### Prophet功能（加载时序图）
-> Prophet功能用于查看weex的加载时序图和页面性能指标。
-
-点击右上角Prophet即可查看时序图(iOS暂不支持，性能数据可在log的performance中查看)，如下：
-
-
-
-#### 集成devtool工具
-* Android
- * 查看文档 [Weex devtools (Android)](/cn/guide/integrate-devtool-to-android.html), 它会引导你一步一步配置和使用它。
-* iOS
- * 查看文档 [Weex devtools (iOS)](/cn/guide/integrate-devtool-to-ios.html), 它会引导你一步一步配置和使用它。
diff --git a/source/cn/who-is-using-weex.md b/source/cn/who-is-using-weex.md
deleted file mode 100644
index 0142267..0000000
--- a/source/cn/who-is-using-weex.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: who-is-using-weex
-title: 谁在使用 Weex？
-type: community
-has_chapter_content: false
-version: 2.1
----
diff --git a/source/cn/wiki/color-names.md b/source/cn/wiki/color-names.md
deleted file mode 100644
index 2575bb3..0000000
--- a/source/cn/wiki/color-names.md
+++ /dev/null
@@ -1,181 +0,0 @@
----
-title: 支持的颜色名称列表
-type: wiki
-group: 样式
-order: 3.4
-version: 2.1
----
-
-<!-- toc -->
-
-### 基础颜色关键词:
-
-| 颜色名 | 十六进制RGB值 |
-| --- | --- |
-| black(黑) | #000000 |
-| silver(银) | #C0C0C0 |
-| gray(灰) | #808080 |
-| white(白) | #FFFFFF |
-| maroon(褐紫红) | #800000 |
-| red(红) | #FF0000 |
-| purple(紫) | #800080 |
-| fuchsia(晚樱) | #FF00FF |
-| green(绿) | #008000 |
-| lime(石灰) | #00FF00 |
-| olive(橄榄) | #808000 |
-| yellow(黄) | #FFFF00 |
-| navy(海军蓝) | #000080 |
-| blue(蓝) | #0000FF |
-| teal(水鸭) | #008080 |
-| aqua(水蓝) | #00FFFF |
-### 扩展颜色关键词:
-
-| 颜色名 | 十六进制RGB值 |
-| --- | --- |
-| aliceblue | #F0F8FF |
-| antiquewhite | #FAEBD7 |
-| aqua | #00FFFF |
-| aquamarine | #7FFFD4 |
-| azure | #F0FFFF |
-| beige | #F5F5DC |
-| bisque | #FFE4C4 |
-| black | #000000 |
-| blanchedalmond | #FFEBCD |
-| blue | #0000FF |
-| blueviolet | #8A2BE2 |
-| brown | #A52A2A |
-| burlywood | #DEB887 |
-| cadetblue | #5F9EA0 |
-| chartreuse | #7FFF00 |
-| chocolate | #D2691E |
-| coral | #FF7F50 |
-| cornflowerblue | #6495ED |
-| cornsilk | #FFF8DC |
-| crimson | #DC143C |
-| cyan | #00FFFF |
-| darkblue | #00008B |
-| darkcyan | #008B8B |
-| darkgoldenrod | #B8860B |
-| darkgray | #A9A9A9 |
-| darkgreen | #006400 |
-| darkgrey | #A9A9A9 |
-| darkkhaki | #BDB76B |
-| darkmagenta | #8B008B |
-| darkolivegreen | #556B2F |
-| darkorange | #FF8C00 |
-| darkorchid | #9932CC |
-| darkred | #8B0000 |
-| darksalmon | #E9967A |
-| darkseagreen | #8FBC8F |
-| darkslateblue | #483D8B |
-| darkslategray | #2F4F4F |
-| darkslategrey | #2F4F4F |
-| darkturquoise | #00CED1 |
-| darkviolet | #9400D3 |
-| deeppink | #FF1493 |
-| deepskyblue | #00BFFF |
-| dimgray | #696969 |
-| dimgrey | #696969 |
-| dodgerblue | #1E90FF |
-| firebrick | #B22222 |
-| floralwhite | #FFFAF0 |
-| forestgreen | #228B22 |
-| fuchsia | #FF00FF |
-| gainsboro | #DCDCDC |
-| ghostwhite | #F8F8FF |
-| gold | #FFD700 |
-| goldenrod | #DAA520 |
-| gray | #808080 |
-| green | #008000 |
-| greenyellow | #ADFF2F |
-| grey | #808080 |
-| honeydew | #F0FFF0 |
-| hotpink | #FF69B4 |
-| indianred | #CD5C5C |
-| indigo | #4B0082 |
-| ivory | #FFFFF0 |
-| khaki | #F0E68C |
-| lavender | #E6E6FA |
-| lavenderblush | #FFF0F5 |
-| lawngreen | #7CFC00 |
-| lemonchiffon | #FFFACD |
-| lightblue | #ADD8E6 |
-| lightcoral | #F08080 |
-| lightcyan | #E0FFFF |
-| lightgoldenrodyellow | #FAFAD2 |
-| lightgray | #D3D3D3 |
-| lightgreen | #90EE90 |
-| lightgrey | #D3D3D3 |
-| lightpink | #FFB6C1 |
-| lightsalmon | #FFA07A |
-| lightseagreen | #20B2AA |
-| lightskyblue | #87CEFA |
-| lightslategray | #778899 |
-| lightslategrey | #778899 |
-| lightsteelblue | #B0C4DE |
-| lightyellow | #FFFFE0 |
-| lime | #00FF00 |
-| limegreen | #32CD32 |
-| linen | #FAF0E6 |
-| magenta | #FF00FF |
-| maroon | #800000 |
-| mediumaquamarine | #66CDAA |
-| mediumblue | #0000CD |
-| mediumorchid | #BA55D3 |
-| mediumpurple | #9370DB |
-| mediumseagreen | #3CB371 |
-| mediumslateblue | #7B68EE |
-| mediumspringgreen | #00FA9A |
-| mediumturquoise | #48D1CC |
-| mediumvioletred | #C71585 |
-| midnightblue | #191970 |
-| mintcream | #F5FFFA |
-| mistyrose | #FFE4E1 |
-| moccasin | #FFE4B5 |
-| navajowhite | #FFDEAD |
-| navy | #000080 |
-| oldlace | #FDF5E6 |
-| olive | #808000 |
-| olivedrab | #6B8E23 |
-| orange | #FFA500 |
-| orangered | #FF4500 |
-| orchid | #DA70D6 |
-| palegoldenrod | #EEE8AA |
-| palegreen | #98FB98 |
-| paleturquoise | #AFEEEE |
-| palevioletred | #DB7093 |
-| papayawhip | #FFEFD5 |
-| peachpuff | #FFDAB9 |
-| peru | #CD853F |
-| pink | #FFC0CB |
-| plum | #DDA0DD |
-| powderblue | #B0E0E6 |
-| purple | #800080 |
-| red | #FF0000 |
-| rosybrown | #BC8F8F |
-| royalblue | #4169E1 |
-| saddlebrown | #8B4513 |
-| salmon | #FA8072 |
-| sandybrown | #F4A460 |
-| seagreen | #2E8B57 |
-| seashell | #FFF5EE |
-| sienna | #A0522D |
-| silver | #C0C0C0 |
-| skyblue | #87CEEB |
-| slateblue | #6A5ACD |
-| slategray | #708090 |
-| slategrey | #708090 |
-| snow | #FFFAFA |
-| springgreen | #00FF7F |
-| steelblue | #4682B4 |
-| tan | #D2B48C |
-| teal | #008080 |
-| thistle | #D8BFD8 |
-| tomato | #FF6347 |
-| turquoise | #40E0D0 |
-| violet | #EE82EE |
-| wheat | #F5DEB3 |
-| white | #FFFFFF |
-| whitesmoke | #F5F5F5 |
-| yellow | #FFFF00 |
-| yellowgreen | #9ACD32 |
diff --git a/source/cn/wiki/common-events.md b/source/cn/wiki/common-events.md
deleted file mode 100644
index 19a7aa2..0000000
--- a/source/cn/wiki/common-events.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: 通用事件
-type: wiki
-group: 事件
-order: 4.1
-version: 2.1
----
-
-<!-- toc -->
-
-Weex 提供了通过事件触发动作的能力，例如在用户点击组件时执行 JavaScript。下面列出了可被添加到 Weex 组件上以定义事件动作的属性：
-
-## `click`
-
-当组件上发生点击手势时被触发。
-
-**注意：**
-
-`<input>` 和 `<switch>` 组件目前不支持 `click` 事件，请使用 `change` 或 `input` 事件来代替。
-
-### 事件对象
-
-- `type`: `click`
-- `target`: 触发点击事件的目标组件
-- `timestamp`: 触发点击事件时的时间戳
-
-
-## `longpress`
-
-如果一个组件被绑定了 `longpress` 事件，那么当用户长按这个组件时，该事件将会被触发。
-
-**注意：**
-
-`<input>` 和 `<switch>` 组件目前不支持 `click` 事件，请使用 `change` 或 `input` 事件来代替。
-
-### 事件对象
-- `type` : `longpress`
-- `target` : 触发长按事件的目标组件
-- `timestamp` : 长按事件触发时的时间戳
-
-## Appear 事件
-
-如果一个位于某个可滚动区域内的组件被绑定了 `appear` 事件，那么当这个组件的状态变为在屏幕上可见时，该事件将被触发。
-
-### 事件对象
-
-- `type` : `appear`
-- `target` : 触发 Appear 事件的组件对象
-- `timestamp` : 事件被触发时的时间戳
-- `direction` : 触发事件时屏幕的滚动方向，`up` 或 `down`
-
-## Disappear 事件
-
-如果一个位于某个可滚动区域内的组件被绑定了 `disappear` 事件，那么当这个组件被滑出屏幕变为不可见状态时，该事件将被触发。
-
-### 事件对象
-
-- `type` : `disappear`
-- `target` : 触发 Disappear 事件的组件对象
-- `timestamp` : 事件被触发时的时间戳
-- `direction` : 触发事件时屏幕的滚动方向，`up` 或 `down`
-
-## Page 事件
-
-*注意：仅支持 iOS 和 Android，H5 暂不支持。*
-
-Weex 通过 `viewappear` 和 `viewdisappear` 事件提供了简单的页面状态管理能力。
-
-`viewappear` 事件会在页面就要显示或配置的任何页面动画被执行前触发，例如，当调用 `navigator` 模块的 `push` 方法时，该事件将会在打开新页面时被触发。`viewdisappear` 事件会在页面就要关闭时被触发。
-
-与组件的 `appear` 和 `disappear` 事件不同的是，`viewappear` 和 `viewdisappear` 事件关注的是整个页面的状态，所以**它们必须绑定到页面的根元素上**。
-
-特殊情况下，这两个事件也能被绑定到非根元素的body组件上，例如`wxc-navpage`组件。
-
-### 事件对象
-
-- `type` : `viewappear` 或 `viewdisappear`
-- `target` : 触发事件的组件对象
-- `timestamp` : 事件被触发时的时间戳
-
-## 示例
-
-```html
-<template>
- <div>
- <div class="box" @click="onclick" @longpress="onlongpress" @appear="onappear" @disappear="ondisappear"></div>
- </div>
-</template>
-
-<script>
- const modal = weex.requireModule('modal')
- export default {
- methods: {
- onclick (event) {
- console.log('onclick:', event)
- modal.toast({
- message: 'onclick',
- duration: 0.8
- })
- },
- onlongpress (event) {
- console.log('onlongpress:', event)
- modal.toast({
- message: 'onlongpress',
- duration: 0.8
- })
- },
- onappear (event) {
- console.log('onappear:', event)
- modal.toast({
- message: 'onappear',
- duration: 0.8
- })
- },
- ondisappear (event) {
- console.log('ondisappear:', event)
- modal.toast({
- message: 'ondisappear',
- duration: 0.8
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .box {
- border-width: 2px;
- border-style: solid;
- border-color: #BBB;
- width: 250px;
- height: 250px;
- margin-top: 250px;
- margin-left: 250px;
- background-color: #EEE;
- }
-</style>
-```
diff --git a/source/cn/wiki/common-styles.md b/source/cn/wiki/common-styles.md
deleted file mode 100644
index 5b2dff3..0000000
--- a/source/cn/wiki/common-styles.md
+++ /dev/null
@@ -1,625 +0,0 @@
----
-title: 通用样式
-type: wiki
-group: 样式
-order: 3.1
-version: 2.1
----
-
-<!-- toc -->
-
-所有 Weex 组件都支持以下通用样式规则。
-
-## 盒模型
-
-
-
-Weex 盒模型基于 [CSS 盒模型](https://www.w3.org/TR/css3-box/)，每个 Weex 元素都可视作一个盒子。我们一般在讨论设计或布局时，会提到「盒模型」这个概念。
-
-盒模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界 margin edge, 边框边界 border edge, 内边距边界 padding edge 与内容边界 content edge。这四层边界，形成一层层的盒子包裹起来，这就是盒模型大体上的含义。
-
-**注意：**
-Weex 对于长度值目前只支持*像素*值，不支持相对单位（`em`、`rem`）。
-
-- `width {length}`：，默认值 `auto`
-- `height {length}`：，默认值 `auto`
-- `direction {string}`: 可选值为 `rtl` | `ltr`，默认值为`ltr`
-- `padding {length}`：内边距，内容和边框之间的距离。默认值 0
-
- 可有如下写法：
-
- - `padding-left {length}`：，默认值 0
- - `padding-right {length}`：，默认值 0
- - `padding-top {length}`：，默认值 0
- - `padding-bottom {length}`：，默认值 0
-- `margin`：
-
- 外边距，元素和元素之间的空白距离。值类型为 length，默认值 0
-
- 可有如下写法：
-
- - `margin-left {length}`：，默认值 0
- - `margin-right {length}`：，默认值 0
- - `margin-top {length}`：，默认值 0
- - `margin-bottom {length}`：，默认值 0
-- border：
-
- 设定边框，`border` 目前不支持类似这样 `border: 1 solid #ff0000;` 的组合写法。
-
- 可有如下写法：
-
- - `border-style`：
-
- 设定边框样式，值类型为 string，可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
-
- 可有如下写法：
-
- - `border-left-style {string}`：可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
- - `border-top-style {string}`：可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
- - `border-right-style {string}`：可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
- - `border-bottom-style {string}`：可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
-
- - `border-width {length}`：
-
- 设定边框宽度，非负值, 默认值 0
-
- 可有如下写法：
-
- - `border-left-width {length}`：，非负值, 默认值 0
- - `border-top-width {length}`：，非负值, 默认值 0
- - `border-right-width {length}`：，非负值, 默认值 0
- - `border-bottom-width {length}`：，非负值, 默认值 0
-
- - `border-color {color}`：
-
- 设定边框颜色，默认值 `#000000`
-
- 可有如下写法：
-
- - `border-left-color {color}`：，默认值 `#000000`
- - `border-top-color {color}`：，默认值 `#000000`
- - `border-right-color {color}`：，默认值 `#000000`
- - `border-bottom-color {color}`：，默认值 `#000000`
- - `border-radius {length}`：
-
- 设定圆角，默认值 0
-
- 可有如下写法：
-
- - `border-bottom-left-radius {length}`：，非负值, 默认值 0
- - `border-bottom-right-radius {length}`：，非负值, 默认值 0
- - `border-top-left-radius {length}`：，非负值, 默认值 0
- - `border-top-right-radius {length}`：，非负值, 默认值 0
-
-
-### 注意：
-
-Weex 盒模型的 `box-sizing` 默认为 `border-box`，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。
-
-> **警告** 尽管 `overflow:hidden` 在 Android 上是默认行为，但只有下列条件都满足时，一个父 view 才会去 clip 它的子 view。这个限制只对 Android 生效，iOS 不受影响。
-> * 父view是`div`, `a`, `cell`, `refresh` 或 `loading`。
-> * 系统版本是 Android 4.3 或更高。
-> * 系统版本不是 Andorid 7.0。
-> * 父 view 没有 `background-image` 属性或系统版本是 Android 5.0 或更高。
-
-### 示例：
-
-```html
-<template>
- <div>
- <image style="width: 400px; height: 200px; margin-left: 20px;" src="https://g.alicdn.com/mtb/lab-zikuan/0.0.18/weex/weex_logo_blue@3x.png"></image>
- </div>
-</template>
-```
-
-## Flexbox
-
-Weex 布局模型基于 CSS [`Flexbox`](http://www.w3.org/TR/css3-flexbox/)，以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。
-
-Flexbox 包含 flex 容器和 flex 成员项。如果一个 Weex 元素可以容纳其他元素，那么它就成为 flex 容器。需要注意的是，flexbox 的老版规范相较新版有些出入，比如是否能支持 wrapping。这些都描述在 W3C 的工作草案中了，你需要注意下新老版本之间的不同。另外，老版本只在安卓 4.4 版以下得到支持。
-
-### Flex 容器
-
-在 Weex 中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 `display: flex;` 属性。
-
-- `flex-direction`：
-
- 定义了 flex 容器中 flex 成员项的排列方向。可选值为 `row` | `column`，默认值为 `column`
-
- - `column`：从上到下排列。
- - `row`：从左到右排列。
-
-- `justify-content`：
-
- 定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。可选值为 `flex-start` | `flex-end` | `center` | `space-between`，默认值为 `flex-start`。
-
- - `flex-start`：是默认值，所有的 flex 成员项都排列在容器的前部；
- - `flex-end`：则意味着成员项排列在容器的后部；
- - `center`：即中间对齐，成员项排列在容器中间、两边留白；
- - `space-between`：表示两端对齐，空白均匀地填充到 flex 成员项之间。
-
- 
-
-- `align-items`：
-
- 定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。可选值为 `stretch` | `flex-start` | `center` | `flex-end`，默认值为 `stretch`。
-
- - `stretch` 是默认值，即拉伸高度至 flex 容器的大小；
- - `flex-start` 则是上对齐，所有的成员项排列在容器顶部；
- - `flex-end` 是下对齐，所有的成员项排列在容器底部；
- - `center` 是中间对齐，所有成员项都垂直地居中显示。
-
- 
-
-### Flex 成员项
-
-flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 `flex: 1`，它们将平均分配剩余空间. 如果一个成员项设置的值为 `flex: 2`，其它的成员项设置的值为 `flex: 1`，那么这个成员项所占用的剩余空间是其它成员项的2倍。
-
-- `flex {number}`：值为 number 类型。
-
-### 示例
-
-一个简单的网格布局。
-
-
-
-```html
-<template>
- <div>
- <div v-for="(v, i) in list" class="row">
- <div v-for="(text, k) in v" class="item">
- <div>
- <text>{{text}}</text>
- </div>
- </div>
- </div>
- </div>
-</template>
-<style scoped>
- .item{
- flex:1;
- justify-content: center;
- align-items:center;
- border-width:1;
- }
- .row{
- flex-direction: row;
- height:80px;
- }
-</style>
-<script>
- module.exports = {
- data: function () {
- return {
- list:[
- ['A', 'B', 'C'],
- ['D', 'E', 'F'],
- ['G', 'H', 'I']
- ]
- }
- }
- }
-</script>
-```
-
-一个在相对于屏幕水平居中，全屏居中的 `<div>`。
-
-```html
-<template>
- <div class="wrapper">
- <div class="box">
- </div>
- </div>
-</template>
-
-<style scoped>
- .wrapper {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: #cccccc;
- justify-content: center;
- align-items: center;
- }
- .box {
- width: 200px;
- height: 200px;
- background-color: #fc0000;
- }
-</style>
-```
-
-## 定位
-
-Weex 支持 `position` 定位，用法与 CSS position 类似。为元素设置 `position` 后，可通过 `top`、`right`、`bottom`、`left` 四个属性设置元素坐标。
-
-- `position {string}`：
-
- 设置定位类型。可选值为 `relative` | `absolute` | `fixed` | `sticky`，默认值为 `relative`。
-
- - `relative` 是默认值，指的是相对定位；
- - `absolute` 是绝对定位，以元素的容器作为参考系；
- - `fixed` 保证元素在页面窗口中的对应位置显示；
- - `sticky` 指的是仅当元素滚动到页面之外时，元素会固定在页面窗口的顶部。
-- `top {number}`：距离上方的偏移量，默认为 0。
-- `bottom {number}`：距离下方的偏移量，默认为 0。
-- `left {number}`：距离左方的偏移量，默认为 0。
-- `right {number}`：距离右方的偏移量，默认为 0。
-
-**注意：**
-
-1. Weex 目前不支持 `z-index` 设置元素层级关系，但靠后的元素层级更高，因此，对于层级高的元素，可将其排列在后面。
-2. 如果定位元素超过容器边界，在 Android 下，超出部分将**不可见**，原因在于 Android 端元素 `overflow` 默认值为 `hidden`，但目前 Android 暂不支持设置 `overflow: visible`。
-
-### 示例
-
-
-
-```html
-<template scoped>
- <div class="wrapper">
- <div class="box box1">
- </div>
- <div class="box box2">
- </div>
- <div class="box box3">
- </div>
- </div>
-</template>
-
-<style>
- .wrapper {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: #cccccc;
- }
- .box {
- width: 400px;
- height: 400px;
- position: absolute;
- }
- .box1 {
- top: 0;
- left: 0;
- background-color: #ff0000;
- }
- .box2 {
- top: 150px;
- left: 150px;
- background-color: #0055dd;
- }
- .box3 {
- top: 300px;
- left: 300px;
- background-color: #00ff49;
- }
-</style>
-```
-## transition <span class="api-version">v0.16.0+</span>
-
-现在您可以在CSS中使用transition属性来提升您应用的交互性与视觉感受，transition中包括布局动画，即LayoutAnimation，现在布局产生变化的同时也能使用transition带来的流畅动画。transition允许CSS的属性值在一定的时间区间内平滑地过渡。
-
-### 参数
-
-- ``transition-property``:允许过渡动画的属性名，设置不同样式transition效果的键值对，默认值为空，表示不执行任何transition，下表列出了所有合法的参数属性：
-
-| 参数名 | 描述 |
-| --------------- | ------------------------------ |
-| width | transition过渡执行的时候是否组件的宽度参与动画 |
-| height | transition过渡执行的时候是否组件的高度参与动画 |
-| top | transition过渡执行的时候是否组件的顶部距离参与动画 |
-| bottom | transition过渡执行的时候是否组件的底部距离参与动画 |
-| left | transition过渡执行的时候是否组件的左侧距离参与动画 |
-| right | transition过渡执行的时候是否组件的右侧距离参与动画 |
-| backgroundColor | transition过渡执行的时候是否组件的背景颜色参与动画 |
-| opacity | transition过渡执行的时候是否组件的不透明度参与动画 |
-| transform | transition过渡执行的时候是否组件的变换类型参与动画 |
-
-- ``transition-duration``:指定transition过渡的持续时间 (单位是毫秒)，默认值是 `0`，表示没有动画效果。
-
-- ``transition-delay``:指定请求transition过渡操作到执行transition过渡之间的时间间隔 (单位是毫秒或者秒)，默认值是 `0`，表示没有延迟，在请求后立即执行transition过渡。
-
-- ``transition-timing-function``:描述transition过渡执行的速度曲线，用于使transition过渡更为平滑。默认值是 `ease`。下表列出了所有合法的属性：
-
-| 属性名 | 描述 |
-| ------------------------------ | ---------------------------------------- |
-| ease | transition过渡逐渐变慢的过渡效果 |
-| ease-in | transition过渡慢速开始，然后变快的过渡效果 |
-| ease-out | transition过渡快速开始，然后变慢的过渡效果 |
-| ease-in-out | transition过渡慢速开始，然后变快，然后慢速结束的过渡效果 |
-| linear | transition过渡以匀速变化 |
-| cubic-bezier(x1, y1, x2, y2) | 使用三阶贝塞尔函数中自定义transition变化过程，函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 [cubic-bezier](http://cubic-bezier.com/) 和 [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve). |
-
-### 示例
-
-```html
-<style scoped>
- .panel {
- margin: 10px;
- top:10px;
- align-items: center;
- justify-content: center;
- border: solid;
- border-radius: 10px;
-
- transition-property: width,height,backgroundColor;
- transition-duration: 0.3s;
- transition-delay: 0s;
- transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
- }
-</style>
-```
-
-## transform
-> **注意：除了`perspective`和`transform-origin`，`transition`支持了`transform`的全部能力。**
-
-transform 属性向元素应用 2D/3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
-
-目前支持的 transform 声明格式:
-
-- translate( <number/percentage> [, <number/percentage>]?)
-- translateX( <number/percentage> )
-- translateY( <number/percentage> )
-- scale( <number>)
-- scaleX( <number> )
-- scaleY( <number> )
-- rotate( <angle/degree> )
-- rotateX( <angle/degree> ) <span class="api-version">v0.14+</span>
-- rotateY( <angle/degree> ) <span class="api-version">v0.14+</span>
-- perspective( <number> ) Android 4.1及以上版本支持 <span class="api-version">v0.16+</span>
-- transform-origin: number/percentage/keyword(top/left/right/bottom)
-
-### 示例
-
-```HTML
-<template>
- <div class="wrapper">
- <div class="transform">
- <text class="title">Transformed element</text>
- </div>
- </div>
-</template>
-
-<style>
- .transform {
- align-items: center;
- transform: translate(150px,200px) rotate(20deg);
- transform-origin: 0 -250px;
- border-color:red;
- border-width:2px;
- }
- .title {font-size: 48px;}
-</style>
-```
-
-## 伪类 <span class="api-version">v0.9.5+</span>
-
-Weex 支持四种伪类：`active`, `focus`, `disabled`, `enabled`
-
-所有组件都支持 `active`, 但只有 `input` 组件和 `textarea` 组件支持 `focus`, `enabled`, `disabled`。
-
-### 规则
-
-- 同时生效的时候，优先级高覆盖优先级低
-
- - 例如：`input:active:enabled` 和 `input:active` 同时生效，前者覆盖后者
-
-- 互联规则如下所示
-
- 
-
-### 示例
-
-```html
-<template>
- <div class="wrapper">
- <image :src="logoUrl" class="logo"></image>
- </div>
-</template>
-
-<style scoped>
- .wrapper {
- align-items: center;
- margin-top: 120px;
- }
- .title {
- font-size: 48px;
- }
- .logo {
- width: 360px;
- height: 82px;
- background-color: red;
- }
- .logo:active {
- width: 180px;
- height: 82px;
- background-color: green;
- }
-</style>
-
-<script>
- export default {
- props: {
- logoUrl: {
- default: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png'
- },
- target: {
- default: 'World'
- }
- },
- methods: {
- update (e) {
- this.target = 'Weex';
- }
- }
- };
-</script>
-```
-
-[试一下](http://dotwe.org/vue/df2c8f254620d6d30d0906ee75fe5b99)
-
-## 线性渐变 <span class="api-version">v0.10+</span>
-
-Weex 支持线性渐变背景，具体介绍可参考 [W3C description of the gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients)。
-
-所有组件均支持线性渐变。
-
-### 使用
-
- 你可以通过 `background-image` 属性创建线性渐变。
-
-```css
-background-image: linear-gradient(to top,#a80077,#66ff00);
-```
-
-目前暂不支持 `radial-gradient`（径向渐变）。
-
-Weex 目前只支持两种颜色的渐变，渐变方向如下：
-
-* to right
- 从左向右渐变
-* to left
- 从右向左渐变
-* to bottom
- 从上到下渐变
-* to top
- 从下到上渐变
-* to bottom right
- 从左上角到右下角
-* to top left
- 从右下角到左上角
-
-### Note
-
-- `background-image` 优先级高于 `background-color`，这意味着同时设置 `background-image` 和 `background-color`，`background-color` 被覆盖。
-- 不要使用 `background` 简写.
-
-### 示例
-
-```html
-<template>
- <scroller style="background-color: #3a3a3a">
- <div class="container1" style="background-image:linear-gradient(to right,#a80077,#66ff00);">
- <text class="direction">to right</text>
- </div>
- <div class="container1" style="background-image:linear-gradient(to left,#a80077,#66ff00);">
- <text class="direction">to left</text>
- </div>
- <div class="container1" style="background-image:linear-gradient(to bottom,#a80077,#66ff00);">
- <text class="direction">to bottom</text>
- </div>
- <div class="container1" style="background-image:linear-gradient(to top,#a80077,#66ff00);">
- <text class="direction">to top</text>
- </div>
- <div style="flex-direction: row;align-items: center;justify-content: center">
- <div class="container2" style="background-image:linear-gradient(to bottom right,#a80077,#66ff00);">
- <text class="direction">to bottom right</text>
- </div>
- <div class="container2" style="background-image:linear-gradient(to top left,#a80077,#66ff00);">
- <text class="direction">to top left</text>
- </div>
- </div>
- </scroller>
-</template>
-<style>
- .container1 {
- margin: 10px;
- width: 730px;
- height: 200px;
- align-items: center;
- justify-content: center;
- border: solid;
- border-radius: 10px;
- }
-
- .container2 {
- margin: 10px;
- width: 300px;
- height: 300px;
- align-items: center;
- justify-content: center;
- border: solid;
- border-radius: 10px;
- }
-
- .direction {
- font-size: 40px;
- color: white;
- }
-</style>
-```
-
-## 阴影(box-shadow) <span class="api-version">v0.11+</span>
-
-Weex 支持阴影属性：`active`, `focus`, `disabled`, `enabled` `inset(可选)`,`offset-x`,`offset-y`, `blur-radius`,`color`
-
-
-### 注意
-
-- box-shadow仅仅支持iOS
-
-### 示例
-
-```html
-<template>
- <div class="wrapper">
- <div style="width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px rgb(255, 69, 0);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow: 20px 10px 5px rgba(255, 69, 0, 0.8);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgba(255, 69, 0, 0.8);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgb(255, 69, 0);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px black;">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px #008B00;">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- </div>
-</template>
-
-<style scoped>
- .wrapper {align-items: center; margin-top: 120px;}
- .title {font-size: 48px;}
-</style>
-
-<script>
- module.exports = {
- data: function () {
- return {
- logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
- target: 'World'
- };
- }
- };
-</script>
-```
-
-## 其他基本样式
-
-- `opacity {number}`：取值范围为 [0, 1] 区间。默认值是 1，即完全不透明；0 是完全透明；0.5 是 50% 的透明度。
-- `background-color {color}`：设定元素的背景色，可选值为色值，支持RGB（ `rgb(255, 0, 0)` ）；RGBA（ `rgba(255, 0, 0, 0.5)` ）；十六进制（ `#ff0000` ）；精简写法的十六进制（ `#f00` ）；色值关键字（`red`），默认值是 `transparent` 。
-
-**注意：** [色值的关键字列表](./color-names.html)。
-
-## 上手样式
-
-如果对于样式写法需要更多上手参考，可参考每个组件的文档中，都有常见的例子可供参考。
-
-你可以按照以下步骤来规划 Weex 页面的样式。
-
-1. 全局样式规划：将整个页面分割成合适的模块。
-2. flex 布局：排列和对齐页面模块。
-3. 定位盒子：定位并设置偏移量。
-4. 细节样式处理：增加特定的具体样式。
diff --git a/source/cn/wiki/component-introduction.md b/source/cn/wiki/component-introduction.md
deleted file mode 100644
index a0a1343..0000000
--- a/source/cn/wiki/component-introduction.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Component
-type: wiki
-group: 概念
-order: 5.3
-version: 2.1
----
-
-### 什么是 component
-
- 简单来讲，`component` 就类似 `Weex` 渲染引擎上的 `Widget`, 符合一定的规则的 `Widget`, 可以被 Weex engine 在初始化的时候正确的加载，开发者在 `DSL` 书写对应的标签名字(在注册的时提供的注册名字)， 比如内置的一些组件 `div`，`image` 和 `text`。它可以读取特定的属性，展示用户数据，承载和触发事件，如果 Weex 内置的组件不能满足你的开发需求，可以自定义你自己的 component。
-
-
-### component 方法
-
- component 方法是组件支持的方法，JavaScript 可以直接对对应标签声明 `ref` 属性之后，直接可以调用对应方法的一个特性，例如下面例子。
-
- ```html
- <template>
- <mycomponent ref='mycomponent'></mycomponent>
- </template>
- <script>
- module.exports = {
- created:function() {
- this.$refs.mycomponent.focus();
- }
- }
- </script>
- ```
diff --git a/source/cn/wiki/css-units.md b/source/cn/wiki/css-units.md
deleted file mode 100644
index e2edb44..0000000
--- a/source/cn/wiki/css-units.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: CSS 单位
-type: wiki
-group: 样式
-order: 3.3
-version: 2.1
----
-
-<!-- toc -->
-
-## 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`
-
-> `6-chars hex`是性能最好的颜色使用方式。除非有特殊原因，请使用`6-chars hex`格式。
-
-> 颜色名称可查看 [颜色名称列表](./color-names.html)。
-
-## CSS `length` 单位
-
-在 Weex 中，我们只支持 `px` 长度单位。
-```css
-.classA { font-size: 48px; line-height: 64px; }
-```
-
-> 不支持类似 `em`，`rem`，`pt` 这样的 CSS 标准中的其他长度单位。
-
-## CSS `number` 单位
-number可用于以下CSS属性：
-* [opacity](./common-styles.html)
-* [lines](./text-styles.html)
-* [flex](./common-styles.html)
-
-## CSS `percentage` 单位 (暂不支持)
\ No newline at end of file
diff --git a/source/cn/wiki/design-principles.md b/source/cn/wiki/design-principles.md
deleted file mode 100644
index a5d5cec..0000000
--- a/source/cn/wiki/design-principles.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: 设计理念
-type: wiki
-group: Design
-order: 1.4
-version: 2.1
----
-
-<!-- toc -->
-
-# Weex 设计理念
-这篇文章想从 Weex 的设计理念入手，让你对 Weex 的设计哲学、优势有一个全面的了解，希望可以帮助 Weex 的使用者更好的在适合的场景应用 Weex，也希望 Weex 的开发者可以在设计理念的指引下将 Weex 变得更好
-## 性能为王
-性能对于 Weex 来说是最为重要的核心价值，也是 Weex 区别于传统的基于 WebView 的 hybrid 框架的特点。Weex 采用了 vDOM 机制，在 JavaScript context 中维护页面布局，并通过向移动端发送规范化的渲染指令，在移动端直接通过 iOS 和 Android 的界面框架生成原生的 UI 进行渲染。相比于浏览器通过自己的渲染系统实现渲染的方式，Weex 的方式更好的利用了系统 UI 体系以达到更佳的性能和用户体验。
-同时 Weex 也采取了多种手段优化性能表现，包括优化 native 与 JavaScript 的通信频率和通信量，使用二进制方式提升单次通信的耗时等，未来还会通过跨平台内核将 DOM 管理移至 native 层实现来彻底解决 native 与 JavaScript 层异步通信成本的问题，从多个维度提升 Weex 引擎的性能。
-## 交互体验
-交互体验一直是 Weex 在不断追求的目标。与 React Native 等框架不同的是，Weex 希望完全做到 iOS、Android 及 Mobile Web 的跨端一致性表现，因此在内置组件的设计上充分考虑了跨端一致性，为 Weex 开发者提供了一致的交互体验。Weex 借助 GCanvas 等组件增强了框架的 2D、3D 渲染能力，为高性能渲染场景提供了可能；同时借助 Expression Binding 的交互理念提升了 Weex 的交互性能。对于前端使用习惯带来的传统 list 性能较差的问题，Weex 提供了基于模板和数据分离的 recycle list 组件，大大提升了交互性能。
-## 开发效率
-从易用和高效的角度考虑 Weex 的开发体验，是 Weex 不断致力提升的方向。从一开始，Weex 的设计就是面向前端开发技术栈，利用前端技术在开发体验、效率上的优势，为开发者提供接近前端开发体验的开发环境。你可以使用 JavaScript、CSS 和 HTML 技术进行 Weex 开发，Weex 的内置组件通过HTML标签的方式提供给开发者，事件体系的设计遵循 W3C 标准，API 也通过 JavaScript 对象的方式提供。同时 Weex 原生支持 Vue DSL，开发者可以利用 Vue 提供的强大易用的开发范式进行 Weex 应用开发。
-## 易于扩展
-扩展机制的便利性也是 Weex 从一开始就考虑在内的设计思路。基于 Weex 的实现特点，在框架层面提供了两种扩展方式，其中 Module 用于提供无 UI 的基础功能接口扩展能力，Component 提供包含 UI 的界面组件扩展能力，开发者可以根据需要选择不同的扩展方式实现需求。
diff --git a/source/cn/wiki/event-bubble.md b/source/cn/wiki/event-bubble.md
deleted file mode 100644
index f926d62..0000000
--- a/source/cn/wiki/event-bubble.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: 事件冒泡
-type: wiki
-group: 事件
-order: 4.2
-version: 2.1
----
-
-<!-- toc -->
-
-<span class="api-version">v0.13+</span>
-
-> **注意:** 目前仅 Weex Native（Android 和 iOS）支持，[web 端](https://github.com/weexteam/weex-vue-render) 暂时不支持此项特性.
-
-如果你是个 web 开发者，你大概对浏览器事件冒泡机制已经很熟悉了，而且可能认为 Weex 默认会支持事件冒泡。然而，Weex 在 0.13 之前是不支持这一特性的，在 0.13 版本，Weex 提供了这项支持。
-
-对于不熟悉事件冒泡的开发者，这里简要介绍一下浏览器事件冒泡机制的概念：
-
-## 概念
-
-以点击事件为例，比如一个点击事件发生在某个 `<video>` 元素上，这个元素有一个父元素（比如是个 `div` 元素），浏览器会执行两个处理阶段 - 捕获（capturing）阶段和冒泡（bubbling）阶段。在 web 开发中冒泡阶段会用的比较多，而捕获处理用的比较少。
-
-在捕获阶段，浏览器检查当前元素的最外层父节点（在 web 上，比如，`<html>` 元素），如果它上面绑定了一个 click 事件处理器，那么先执行这个处理器。然后检查下一个元素，`<html>` 的子元素里是 `<video>` 祖先元素的那个元素，做同样的检测。一步步直到遇到当前点击的这个元素本身。
-
-接下来是冒泡阶段，方向和捕获阶段相反：浏览器先检测当前被点击的元素上是否注册了点击事件处理器，如果有则执行它。接下来检测它的父元素，一步步向上，直到最外层 `<html>` 元素。
-
-
-
-我们一般使用默认的事件注册机制，将事件处理注册在冒泡阶段，所以处理冒泡阶段的情况比较多。当我们想要停止事件冒泡，只需要调用事件对象的 `stopPropagation` 方法。标准事件对象包含 `stopPropagation` 方法，当执行事件处理器时调用该方法，会立即停止事件冒泡，这样事件冒泡处理链上的后续处理器就不会再执行下去。
-
-Weex 在 0.13 版本 SDK 里实现了事件冒泡机制。注意事件冒泡默认是不开启的，你需要在模板根元素上加上属性 `bubble=true` 才能开启冒泡。
-
-## 使用
-
-事件冒泡默认不开启，需要手动添加 `bubble=true` 属性到根元素上。
-
-```html
-<template>
- <!-- 开启事件冒泡机制. -->
- <div bubble="true">
- ...
- </div>
-</template>
-```
-
-## 阻止冒泡
-
-在事件处理函数里，可以通过调用 `event.stopPropagation` 方法阻止事件冒泡。这个方法和 [DOM 标准](https://dom.spec.whatwg.org/#dom-event-stoppropagation)里的方法一致。注意 `event.stopPropagation` 和 `bubble=true` 的影响范围不同，前者仅针对当前冒泡到的元素以及其祖先层级有效，而对子元素无效。而后者相当于一个全局开关，开启以后对该根元素内部所有子元素都开启了事件冒泡效果。两者可以同时存在。
-
-```javascript
-{
- handleClick (event) {
- // 阻止继续冒泡.
- event.stopPropagation()
- }
-}
-```
-
-## 注意
-
-需要注意的是: **为了兼容之前的版本，Weex 默认不会开启事件冒泡机制。需要在根元素的属性上，添加 `bubble="true"` 来开启冒泡机制。否则，将不会向上传播事件，保持与之前版本的效果相同。**
-
-## 实例
-
-- [开启事件冒泡](http://dotwe.org/vue/fa2957ce3e9eb47ad9ae1da22d845e95)：使用 Weex playground App 扫描页面里的二维码，然后在打开页面中点击包含 'click me' 文字的方框，会看到事件冒泡效果，即外层的组件依次显示事件成功冒泡到当前组件的提示。
-
-- [阻止冒泡](http://dotwe.org/vue/2cc80e19c9b2430fb780234628065a69)：使用 Weex playground App 扫描页面里的二维码，然后在打开页面中点击包含 'click me' 文字的方框，可以看到事件冒泡被父组件中断了，不再冒泡到最外层组件。
diff --git a/source/cn/wiki/faq.md b/source/cn/wiki/faq.md
deleted file mode 100644
index 4d956fa..0000000
--- a/source/cn/wiki/faq.md
+++ /dev/null
@@ -1,225 +0,0 @@
----
-title: 常见问题
-type: wiki
-group: FAQ
-order: 8
-version: 2.1
----
-
-<!-- toc -->
-
-## 如何查阅旧文档？
-
-你可以通过文档左侧目录最后一项 “旧文档” 进入对于的历史文档页面。也可以直接访问以下链接访问：
-
-- [Guide](./v-0.10/guide/index.html)
-- [手册](./v-0.10/references/index.html)
-- [高阶知识](./v-0.10/advanced/index.html)
-- [工具](./v-0.10/tools/index.html)
-
-## Windows 指令错误
-
-请先安装 [Git for Windows](https://git-scm.com/download/win)，在 [For Windows](https://github.com/apache/incubator-weex/tree/master#for-windows) 中查看更多信息。
-
-
-## Android Studio 中 Gradle 错误
-
-下载 `license-gradle-plugin.jar` 可能引发一些错误，比如 `链接被重置（Connection reset）` 和 `证书无效（peer not authenticated）` 。这可能是由于网络问题导致的，请尝试使用代理或VPN。
-
-## 使用本地图片
-
-Weex 的原生运行机制支持从设备中加载图片，你只需要设置文件 url，例如 `file:///sdcard/image_new0.png` 这样的格式。但是 Weex 暂时还不支持加载你工程中的图片文件。
-
-## Windows 错误 `The header content contains invalid characters ` （头中包含非法字符）
-
-这是由于 weex-toolkit 的依赖 http-server 导致的，http-server 的老版本在中文 windows 中的支持不是很好。我们已经修复了这个问题，请在使用前升级 weex-toolkit 版本。
-
-## Playground 应用在扫码后什么都没有显示（白屏）
-
-最好的方法是查看 debug 日志来查找原因，你可以按照 [这篇文档](./guide/how-to/debug-with-devtools.html) 中的说明来查明导致这一问题的原因。
-
-## 关于 ECMAScript 版本问题
-
-Weex 在 iOS 中使用 JSCore ，在 Android 中使用 v8，因此他们都支持 ECMAScript 5。另外，我们还在原生环境中加了一些 polyfills：
-
-- `Promise` in iOS/Android
-- `Timer APIs` (setTimeout/clearTimeout/setInterval/clearInterval`) in iOS/Android
-- `console` in iOS/Android
-
-在浏览器中我们暂时是包含了一个 `Promise` 的 polyfill。
-
-在未来，开发者可以选择是否通过 configurations 来导入一个 polyfill。
-
-你也可以通过带有 `webpack` 的 `babel` 来写 ES6，这个加载器能够自动将 ES6 转换为 ES5。
-
-如果你还想要更多的 ES6 polyfills，你可以把他们引入到 JS Bundle 中。
-
-## 前端依赖
-
-在 Weex 中你有很多方法来 import/require 一个组件或者一个 JS 模块。以 ES5 为例：
-
-- `require('xxx.js')` : 依赖一个 JS 文件
-- `require('npm-module-name')` : 依赖一个 NPM 模块
-- `require('xxx.we')` : 包含一个 `.we` 文件来注册一个 Weex 自定义组件
-- `require('@weex-module/xxx')` : 依赖一个 Weex 原生模块。注意这只支持 `*.we` 文件而不支持 `*.js` 文件。如果你想要在一个 `*.js` 文件中使用 Weex 原生模块，暂时你可以这样写：
-
-```js
-// use this piece of code below to get Weex native module "modal"
-var modal
-__weex_define__('@weex-temp/x', function (__weex_require__) {
- modal = __weex_require__('@weex-module/modal')
-})
-
-// use APIs in "modal" module
-modal.toast({message: 'hello'})
-```
-
-以后我们会给大家带来一个更好的设计。
-
-## iOS 文本 `line-height` 样式不正常
-
-`line-height` 样式在 `<text>` 组件中的表现与 H5 和 Android 不同，文本不会在行内居中，而是贴近行底部，因为这里使用的 iOS 原生 API。我们正在努力优化，与其他两端保持一致。
-
-## Android 只支持 `overflow:hidden`
-
-`overflow` 样式在 Android 默认为 `hidden` 并且无法修改，原因是 Android View framework 限制。这个问题只出现在 Android 端，iOS 端和 H5 正常。
-
-## 如何取消 750 像素自适应并以宽高比计算真实像素？
-
-`this.$getConfig()` 方法会返回一个对象，这个对象的 `deviceHeight` 和 `deviceWidth` 属性即实际设备宽度/高度（以像素为单位），而不是以 750 适配的。
-
-因此，您可以使用它们来计算实际像素的宽度/高度。
-
-假设您需要显示固定为 88 px 的导航栏，该导航栏的高度将是：
-
-``` javascript
-var height = 88 * 750 / env.deviceWidth
-```
-
-## 如何在 JavaScript 中检测是否支持某个原生的 module/component
-
-### 检测原生 module
-
-```javascript
-var xxx = require('@weex-module/xxx')
-if (xxx) {
- // todo: use this module
-}
-else {
- // todo: handle the exception
-}
-```
-
-### 检测原生 component
-
-```html
-<template>
- <component is="{{type}}"></component>
-</template>
-
-<script>
- var type = 'xxx'
- var xxx = require('@weex-component/xxx')
- if (!xxx) {
- type = 'div' // downgrade to <div>
- }
- module.exports = {
- data: function () {
- return {
- type: type
- }
- }
- }
-</script>
-```
-
-## 如何在 pages 之间传递数据
-
-如果你有两个页面，A 页面和 B 页面
-
-1. A -> B，使用 [getConfig api](/references/api.md#getconfig) or [storage module](/cn/references/modules/storage.html) 传递数据；
-2. B -> A，使用 [storage module](/cn/references/modules/storage.html) 传递数据。
-
-
-## 父子组件之间进行 repeat 操作
-
-如果你有需求，在父子组件之间进行 repeat 操作，需要注意，必须严格按照官网文档的语法来书写代码。如果缺少子组件定义 data 数据，或者是没有指定需要向下传递的 props，都会导致页面不正常渲染。
-
-错误示例：
-
-```html
-<element name="child">
- <template>
- <div>
- <text style="font-size:100">{{title}}</text>
- </div>
- </template>
-</element>
-
-<template>
- <div>
- <child repeat="item in lists"></child>
- </div>
-</template>
-<script>
- module.exports = {
- data: {
- lists: [
- { title: 'A' },
- { title: 'B' },
- { title: 'C' }
- ]
- },
- ready: function () {
- this.lists.splice(0, 1)
- }
- }
-</script>
-```
-
-以上示例的理想执行情况，应该是页面上第一个元素 A 被删除，剩下 B、C 两个元素。
-但是，由于错误的写法，导致列表执行 splice 操作之后，出现错误的更新情况：页面最后一个元素 C 被删除。
-
-正确的写法如下：
-
-```html
-<element name="child">
- <template>
- <div>
- <text style="font-size:100">{{title}}</text>
- </div>
- </template>
-
- <script>
- module.exports = {
- data: {
- title: null
- }
- }
- </script>
-</element>
-
-<template>
- <div>
- <child repeat="item in lists" title="{{ item.title }}"></child>
- </div>
-</template>
-<script>
- module.exports = {
- data: {
- lists: [
- { title: 'A' },
- { title: 'B' },
- { title: 'C' }
- ]
- },
- ready: function () {
- this.lists.splice(0, 1)
- }
- }
-</script>
-```
-
-在线示例请见：
-
-* [错误示例](http://dotwe.org/de97cf2c1b7ec09a53728edc9c27ad2a)
diff --git a/source/cn/wiki/gestures.md b/source/cn/wiki/gestures.md
deleted file mode 100644
index 8c88482..0000000
--- a/source/cn/wiki/gestures.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: 手势
-type: wiki
-group: 事件
-order: 4.3
-version: 2.1
----
-
-<!-- toc -->
-
-*注：该功能属于实验性功能*
-
-Weex 封装了原生的触摸事件以提供手势系统。使用手势类似于在 Weex 中使用事件，只需在节点上监听手势即可。
-
-## 手势类型
-
-目前，仅支持以下四种手势类型：
-
-- **Touch**：当触摸到一个点，移动或从触摸面移开时触发 `touch` 手势。触摸手势很精准，它会返回所有详细的事件信息。所以，监听 `touch` 手势可能很慢，即使只移动一丁点也需要处理大量事件。有三种类型的 `touch` 手势：
-
- - `touchstart` 将在触摸到触摸面上时触发。
- - `touchmove` 将在触摸点在触摸面移动时被触发。
- - `touchend` 将在从触摸面离开时被触发。
- - `stopPropagation` 每个touch事件都会被传递过来, 可控制touch事件是否冒泡（返回true）或者停止（返回false）；用于解决事件冲突或者自定义手势。<span class="api-version">v0.18+</span>
-
-- **Pan**：`pan` 手势也会返回触摸点在触摸面的移动信息，有点类似于 `touch` 手势。但是 `pan` 手势只会采样收集部分事件信息因此比 `touch` 事件要快得多，当然精准性差于 `touch`。`pan` 也有三种类型的手势，这些手势的意义与 `touch` 完全一样：
-
- - `panstart`
- - `panmove`
- - `panend`
- - `horizontalpan` <span class="api-version">v0.10+</span>：手势的 `start/move/end` 状态保存在 `state` 特性中。目前该手势在 Android 下会与 click 事件冲突。
- - `verticalpan` <span class="api-version">v0.10+</span>：势的 `start/move/end` 状态保存在 `state` 特性中。目前该手势在 Android 下会与 click 事件冲突。
-- **Swipe**：`swipe` 将会在用户在屏幕上滑动时触发，一次连续的滑动只会触发一次 `swiper` 手势。
-- **LongPress**：`LongPress` 将会在触摸点连续保持 500 ms以上时触发。
-
-`touch` 和 `pan` 非常接近，它们的特点可以总结成这样：
-
-- **Touch**：完整信息，精准、很慢
-- **Pan**：抽样信息，很快，不够精准
-
-开发者可以根据自己的情况选择合适的手势。
-
-## 属性
-
-以下属性可以在手势的回调中使用：
-
-- `direction`：仅在 `swipe` 手势中存在，返回滑动方向，返回值可能为 `up`, `left`, `bottom`, `right`。
-- `changedTouches`：一个数组，包含了当前手势的触摸点的运动轨迹
-
-### changedTouches
-
-`changedTouches` 是一个数组，其子元素中包含以下属性：
-
-- `identifier`：触摸点的唯一标识符。
-- `pageX`：触摸点相对于文档左侧边缘的 X 轴坐标。
-- `pageY`：触摸点相对于文档顶部边缘的 Y 轴坐标。
-- `screenX`：触摸点相对于屏幕左侧边缘的 X 轴坐标。
-- `screenY`：触摸点相对于屏幕顶部边缘的 Y 轴坐标。
-- `force`: 屏幕收到的按压力度，值的范围为 0~1
-> force 属性目前在支持 forceTouch iOS 设备才支持, iPhone 6s 及更新的 iOS 设备
-
-[试一试](http://dotwe.org/vue/91b6929f4f9f97a099a30c516dc2db06)
-
-## 约束
-
-目前，由于会触发大量事件冲突，Weex Android 还不支持在滚动类型的元素上监听手势，例如 `scroller`, `list` 和 `webview` 这三个组件。
diff --git a/source/cn/wiki/handler-introduction.md b/source/cn/wiki/handler-introduction.md
deleted file mode 100644
index 3f60541..0000000
--- a/source/cn/wiki/handler-introduction.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Handler
-type: wiki
-group: 概念
-order: 5.2
-version: 2.1
----
-
-### 什么是 handler
- hanlder(Android 中称为 adapter，以下称 handler) 是 WeexSDK engine 中一个 service 的概念，它可以被 component、module 和其他的 handler 实现中调用。
-
-### handler 调用细节
-
- handler 提供了不同 App 和客户端解耦的能力，上层通过 interface(Android) 和 protocol(iOS) 约束方法，handler 的实现者，只需要实现该 handler 对应的接口声明的方法即可，调用者不关注 handler 具体的实现，只通过接口获得需要的数据或者调用对应的 handler 方法，每个 protocol(interface) 对应的 handler 在 app 生命周期期间只有一个实例。
-
-### handler 和 module 的区别
-
-- 在应用中的位置
-
- 
- 上图假设当前APP 中已经打开了三个 Weex 的页面，三个页面中都已经调用过 fetch module 的方法，每个页面都会动态的产生一个 fetch module class 的 Object，随着页面的销毁，页面持有的 module 也会被销毁。handler class 对应的 Object 只会有一个。
-
-- 开发者使用
- handler 更多的是针对 native 开发同学来开发和使用，在其他的 component 和 module 中被调用。module 是由 native 开发同学完成之后提供给前端同学使用，可以暴露一些操作方法来实现一定的功能。
-
-### 内置 handler
-WeexSDK 内部的一些 handler 场景描述
- - navigationHandler
-
- WeexSDK 内部提供了一个默认的 navigation 的 handler，该 handler 是在 navigation Module 中调用 push 和 pop 的一些操作时候被调用。
- SDK 中提供了默认的导航操作Handler
-
- - imageLoaderHandler
-
- WeexSDK 图片组件需要从一个固定的 URI 中加载资源，这个加载行为也被封装到 image 的 handler 中，所以在接入 WeexSDK 时候，一定得提供图片 load 的handler。
- SDK 中未提供 load 图片 Handler
-
- - AppMonitorHandler
-
- 该 handler 是 WeexSDK 在渲染过程中性能统计，module 调用统计时候会将数据同步到该 handler 中，可以实现该 handler 将对应的数据上传到监控平台做性能的监控。
- SDK 未提供 监控 Handler
-
- - JSEXceptionHandler
-
- JavaScript 在 runtime 可能会发生一些错误，首先由 JavaScript Engine 捕捉，然后抛出到 WeexSDK， WeexSDK 会通过 JSExceptionHandler 通知到外部调用。
- SDK 中未提供默认接受 JSException 的 Handler
-
- - URLRewriteHandler
-
- image、video、web组件都在加载 URL 的时候会进行 URL 的重写，重写的规则就是由 URLRewriteHandler 提供，在这里 Handler 里面，可以将特定的 URL，重写为本地 URL 或者其他路径。了解更多默认重写规则 [path](../guide/advanced/path.html)
- WeexSDK 默认提供重写规则
diff --git a/source/cn/wiki/images/css-boxmodel.png b/source/cn/wiki/images/css-boxmodel.png
deleted file mode 100644
index a2063e2..0000000
--- a/source/cn/wiki/images/css-boxmodel.png
+++ /dev/null
Binary files differ
diff --git a/source/cn/wiki/images/css-flexbox-align.jpg b/source/cn/wiki/images/css-flexbox-align.jpg
deleted file mode 100644
index 8a7f731..0000000
--- a/source/cn/wiki/images/css-flexbox-align.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/wiki/images/css-flexbox-justify.svg b/source/cn/wiki/images/css-flexbox-justify.svg
deleted file mode 100644
index 33e742b..0000000
--- a/source/cn/wiki/images/css-flexbox-justify.svg
+++ /dev/null
@@ -1,59 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width='504' height='270' viewBox="0 0 504 270">
- <defs>
- <pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
- <rect x='0' y='0' width='10' height='10' fill='#eee' />
- <rect x='10' y='10' width='10' height='10' fill='#eee' />
- <rect x='0' y='10' width='10' height='10' fill='#ccc' />
- <rect x='10' y='0' width='10' height='10' fill='#ccc' />
- </pattern>
- </defs>
- <style>
- text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
- rect { stroke-width: 2px; stroke: #888; }
- g > rect:nth-child(1) { fill: #888 }
- g > rect:nth-child(2) { fill: #fcc; }
- g > rect:nth-child(3) { fill: #cfc; }
- g > rect:nth-child(4) { fill: #ccf; }
- g > rect:nth-child(5) { fill: transparent; }
- </style>
- <g transform="translate(2,2)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='0' y='0' width='100' height='50' />
- <rect x='100' y='0' width='80' height='50' />
- <rect x='180' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>flex-start</text>
- </g>
- <g transform="translate(2,56)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='120' y='0' width='100' height='50' />
- <rect x='220' y='0' width='80' height='50' />
- <rect x='300' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>flex-end</text>
- </g>
- <g transform="translate(2,110)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='60' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='240' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>center</text>
- </g>
- <g transform="translate(2,164)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='0' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='300' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>space-between</text>
- </g>
- <g transform="translate(2,218)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='20' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='280' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>space-around</text>
- </g>
-</svg>
\ No newline at end of file
diff --git a/source/cn/wiki/images/css-flexbox-sample.png b/source/cn/wiki/images/css-flexbox-sample.png
deleted file mode 100644
index 0f1236d..0000000
--- a/source/cn/wiki/images/css-flexbox-sample.png
+++ /dev/null
Binary files differ
diff --git a/source/cn/wiki/images/nav.png b/source/cn/wiki/images/nav.png
deleted file mode 100644
index 7081ca7..0000000
--- a/source/cn/wiki/images/nav.png
+++ /dev/null
Binary files differ
diff --git a/source/cn/wiki/images/style_1.jpg b/source/cn/wiki/images/style_1.jpg
deleted file mode 100644
index 2482710..0000000
--- a/source/cn/wiki/images/style_1.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/wiki/images/style_2.jpg b/source/cn/wiki/images/style_2.jpg
deleted file mode 100644
index 6b6f2e1..0000000
--- a/source/cn/wiki/images/style_2.jpg
+++ /dev/null
Binary files differ
diff --git a/source/cn/wiki/index.md b/source/cn/wiki/index.md
deleted file mode 100644
index e683120..0000000
--- a/source/cn/wiki/index.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: 工作原理
-type: wiki
-group: Design
-order: 1.1
-chapter_title: 优势介绍
-version: 2.1
----
-
-<!-- toc -->
-
-## 整体架构
-
-Weex 表面上是一个客户端技术，但实际上它串联起了从本地开发、云端部署到分发的整个链路。开发者首先可在本地像编写 web 页面一样编写一个 app 的界面，然后通过命令行工具将之编译成一段 JavaScript 代码，生成一个 Weex 的 JS bundle；同时，开发者可以将生成的 JS bundle 部署至云端，然后通过网络请求或预下发的方式加载至用户的移动应用客户端；在移动应用客户端里，Weex SDK 会准备好一个 JavaScript 执行环境，并且在用户打开一个 Weex 页面时在这个执行环境中执行相应的 JS bundle，并将执行过程中产生的各种命令发送到 native 端进行界面渲染、数据存储、网络通信、调用设备功能及用户交互响应等功能；同时，如果用户希望使用浏览器访问这个界面，那么他可以在浏览器里打开一个相同的 web 页面，这个页面和移动应用使用相同的页面源代码，但被编译成适合Web展示的JS Bundle，通过浏览器里的 JavaScript 引擎及 Weex SDK 运行起来的。
-
-
-
-## 本地开发环境
-
-Weex 的本地开发环境基于 web 开发体验而设计，web 开发者可以通过自己熟悉的 HTML/CSS/JavaScript 技术和语法实现移动应用的界面。同时 Weex 也对 [Vue.js](https://vuejs.org/) 这一非常优秀的前端框架做了官方的支持。
-
-此外，Weex 的工程设计也是 web 开发者非常熟悉的，首先 web 开发者可以使用自己熟悉的 npm 进行依赖管理；其次 web 开发者在初始化工程、开发、调试、质量控制等各个环节，都可以参考 web 开发已有的最佳实践。
-
-和如今 web 开发的最佳实践一样，Weex 会把一个页面的源代码全部编译打包成一个 JS bundle，在浏览器中，我们需要把这个 JS bundle 作为一段 `<script>` 载入网页；而在客户端里，我们把这段 JS bundle 通过Weex SDK加载并直接执行。
-
-**相关阅读**
-
-* [Weex 和 Web 平台的差异](/cn/wiki/platform-difference.html)
-* [Vue 2.x 在 Weex 和 Web 中的差异](/cn/guide/use-vue.html)
-* [快速上手](/cn/guide/index.html)
-* [使用 Devtools](/cn/guide/integrate-devtool-to-android.html)
-
-## 云端部署和分发
-
-Weex 的 JS bundle 可以作为一段静态资源进行部署和下发，如同部署和下发 web 页面一样，几乎可以复用 HTML5 所有的工程体系和最佳实践。比如在本地开发环境通过部署工具将 JS bundle 部署到 CDN、通过 CMS 或搭建平台把业务数据和模块化的前端组件自动拼接生成 JS bundle、通过服务端 JS bundle 的流量和日志来统计页面的访问情况、通过 AppCache 或类似的方式对 JS bundle 在客户端进行缓存或预加载以降低网络通信的成本等。
-
-## 客户端 JavaScript 引擎
-
-Weex 的 iOS 和 Android 客户端中都会运行一个 JavaScript 引擎，来执行 JS bundle，同时向各端的渲染层发送规范化的指令，调度客户端的渲染并实现其它各种能力。我们在 iOS 下选择了基于 JavaScriptCore 内核的iOS系统提供的 JSContext，在 Android 下也使用了 JavaScriptCore 内核的 JavaScript 引擎。经过长期优化与多种业务场景检验，JavaScriptCore 无论是从性能还是稳定性方面都为Weex提供了强有力的保障，同时也保证了双端 JavaScript 引擎的统一，更有利于开发者调试跨端的 JavaScript 错误。
-
-为了让整个移动应用的资源利用得更好，我们在客户端提供的 JavaScript 引擎是单例的，即所有 JS bundle 公用一个 JavaScript 执行环境实例，同时对每个 JS bundle 在运行时进行了上下文的隔离，使得每个 JS bundle 都能够高效安全的工作。我们还把 Vue 2.0 这样的 JS Framework 做了预置，开发者不必把 JS Framework 打包在每个 JS bundle 里，从而大大减少了 JS bundle 的体积，也就进一步保障了页面打开的速度。
-
-## 客户端渲染层
-
-Weex 目前提供了 iOS 和 Android 两个客户端的 native 渲染层。每个端都基于 DOM 模型设计并实现了标准的界面渲染接口供 JavaScript 引擎调用。并且结合 web 标准和 native 的特点和优势实现了一套统一的组件和模块。Weex 在性能方面的表现也是非常优异的，尤其是界面首屏加载时间、native 下长列表的资源开销和复用、CPU、内存、帧率等关键指标。当然，尽管 Weex 已经提供了一组开发者最常用的组件和模块，但面对丰富多样的移动应用研发需求，这些常用基础组件还是远远不够的，因此我们提供了灵活自由的能力扩展方式，开发者可以根据自身的情况定制属于自己的客户端组件和模块，进一步丰富 Weex 在客户端上的能力。
-
-**相关链接**
-
-* [Weex 的组件和模块跟 web 标准的区别](../../references/web-standards.html)
-* [如何使用 iOS](/cn/references/ios-apis.html)
-* [如何使用 Android](/cn/references/android-apis.html)
-* [如何扩展 iOS](/cn/guide/extend-ios.html)
-* [如何扩展 Android](/cn/guide/extend-android.html)
-
-## 浏览器渲染
-
-Weex 除了提供 iOS 和 Android 的客户端渲染层之外，还基于 Vue 2.0 对官方的所有组件和模块进行了 web 封装，开发者可以基于 Vue 2.0 用同一套源代码构建出在浏览器中相同效果的页面。并且同样可以横向扩展。
-
-**相关链接**
-
-* [如何使用 HTML5](/cn/references/js-service.html)
-* [如何扩展 HTML5](/cn/guide/extend-web-render.html)
diff --git a/source/cn/wiki/module-introduction.md b/source/cn/wiki/module-introduction.md
deleted file mode 100644
index 2781f22..0000000
--- a/source/cn/wiki/module-introduction.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: Module
-type: wiki
-group: 概念
-order: 5.1
-version: 2.1
----
-## 什么是 module
- module 是完成一个操作的方法集合，在 Weex 的页面中，允许开发者 `require` 引入，调用 `module` 中的方法，WeexSDK 在启动时候，已经注册了一些内置的 module。
-
-## module 注册过程
- native 端注册module 的流程如下图:
- 
-
-## 内置 module
-`stream` module, 开发者可以利用它给服务端发送网络请求，接受数据返回，开发者可以在 Weex 的页面中执行如下代码：
- ```javaScript
- var stream = weex.requireModule('stream');
- stream.fetch({
- method: 'GET',
- url: 'http://httpbin.org/get',
- type:'jsonp'
- }, function(ret) {
- console.log('in completion')
- },function(response){
- console.log('in progress')
- });
- ```
- 查看 [stream](../references/modules/stream.html) 完整文档
-
-## module 方法
- require 之后直接可以调用，相对于 [component 方法](./component-introduction.html) 可以不依赖特定的组件实例。
diff --git a/source/cn/wiki/platform-difference.md b/source/cn/wiki/platform-difference.md
deleted file mode 100644
index d9569a5..0000000
--- a/source/cn/wiki/platform-difference.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: 与 Web 平台的差异
-type: wiki
-group: Design
-order: 1.5
-version: 2.1
----
-
-# 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-events.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 导航控制》](/cn/references/modules/navigator.html)。
-
-## 能够调用移动设备原生 API
-
-在 Weex 中能够调用移动设备原生 API，使用方法是通过注册、调用模块来实现。其中有一些模块是 Weex 内置的，如 clipboard 、 navigator 、storage 等。
-
-+ [《clipboard 剪切板》](/cn/references/modules/clipboard.html)
-+ [《navigator 导航控制》](/cn/references/modules/navigator.html)
-+ [《storage 本地存储 》](/cn/references/modules/storage.html)
-
-为了保持框架的通用性，Weex 内置的原生模块有限，不过 Weex 提供了横向扩展的能力，可以扩展原生模块，具体的扩展方法请参考[《iOS 扩展》](/cn/guide/extend-ios.html) 和[《Android 扩展》](/cn/guide/extend-android.html)。
-
-> 有些接口在浏览器环境中也存在，不过在使用时应该注意浏览器的兼容性；如剪贴板功能，出于安全性考虑，绝大多数浏览器都限制其使用。
diff --git a/source/cn/wiki/text-styles.md b/source/cn/wiki/text-styles.md
deleted file mode 100644
index 4a66ad7..0000000
--- a/source/cn/wiki/text-styles.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: 文本样式
-type: wiki
-group: 样式
-order: 3.2
-version: 2.1
----
-
-<!-- toc -->
-
-<span class="weex-version">v0.5+</span>
-
-文本类组件共享一些通用样式, 这类组件目前包括 [`<text>`](../references/components/text.html)、[`<input>`](../references/components/input.html)和[`<richtext>`](../references/components/richtext.html)
-
-## 属性
-
-- `color {color}`：文字颜色，支持如下字段：
- * RGB（ `rgb(255, 0, 0)` ）
- * RGBA（ `rgba(255, 0, 0, 0.5)` ）
- * 十六进制（ `#ff0000` ）；精简写法的十六进制（ `#f00` ）
- * 色值关键字（`red`）
-* `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>`和`<richtext>`组件支持。
-* `text-align {string}`：对齐方式。可选值 `left` | `center` | `right`，默认值为 `left`。目前暂不支持 `justify`, `justify-all`。
-* `font-family {string}`：设置字体。这个设置 **不保证** 在不同平台，设备间的一致性。如所选设置在平台上不可用，将会降级到平台默认字体。如果需要加载自定义字体，请参考相关[文档](../references/modules/custom_font.html)。
-* `text-overflow {string}`：设置内容超长时的省略样式。可选值 `clip` | `ellipsis`
- >> 只有 `<text>`和`<richtext>`组件支持。
-* `lines {number}`: 正整数，指定最大文本行数，默认值为0，表示不限制最大行数。如果文本不够长，实际展示行数会小于指定行数。
-* `line-height {length}`：正整数，每行文字高度。`line-height`是 top 至 bottom 的距离。`line-height`与`font-size`没有关系，因为`line-height`被 top 和 bottom 所限制，`font-size` 被 glyph 所解析。`line-height`和`font-size`相等一般会导致文字被截断。
-
-## 其它参考
-- [颜色关键字列表](./color-names.html)。
diff --git a/source/contributing.md b/source/contributing.md
deleted file mode 100644
index 8e762a6..0000000
--- a/source/contributing.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: How to Contribute
-type: community
-has_chapter_content: false
-version: 2.1
----
-
-# How to Contribute
-
-Apache Weex is an open source project that is under active development and we're continuously working out to simplify contributing to Weex ecosystem. Developers can participate and contribute to the Apache Weex community by reporting bugs, contributing code, answering questions, joining in discussions and contributing to documentation.
-
-## Bugs
-You can use Weex directly through [Getting Started](./guide/index.html) tutorial. If you encounter any unexpected phenomena during your use, feel free to let us know by filing a bug report.
-
-##### Find Known Issues
-We are using JIRA for tracking all the issues and updating whenever when have an internal fix in progress. Before filing a new task, try to confirm if it is already listed or if there is a fix in progress.
-
-##### Report New Issues
-Open a [JIRA Issue](https://issues.apache.org/jira/projects/WEEX) , click on the top red "Create" button (you may need to [create a JIRA account](https://issues.apache.org/jira/secure/Signup!default.jspa) if you haven't registered). [Bug Report Guidelines](/bug-report-guidelines.html) document provides some of the most useful information about writing a good bug report. The better your bug report is, the faster we can reproduce and fix it!
-
-## Contribute Code
-
-Apache Weex is an open source project and both, core team members and external contributors, send pull requests which go through the same review process. If you have already decided to start writing code in Weex, Congratulations! You’re up and running.
-
-You can contribute code by either fixing an existing bug or developing new features. In either case, we always encourage to create a JIRA ticket and ensure we are in agreement on your proposal.
-
-To help you get started, we've created a document with more details about development process. Please read **[Getting Started with Development Process](/development-process.html)**.
-
-## Ask or Answer Questions
-
-For basic use problems and help, we suggest you ask questions on [stackoverflow.com](http://stackoverflow.com/) and mark them with **weex** tag.
-
-You can also view all [Weex related issues](http://stackoverflow.com/questions/tagged/weex) and answer some of the questions if you can. This will also help you get familiar with basic concepts and common misunderstandings about Weex, which can be useful when contributing documentation or code.
-
-## Join in Discussions
-
-In Weex community, most discussions happen on the mailing list.
-
-Dev mailing list "dev@weex.incubator.apache.org" is the place where Weex developers exchange ideas and discuss new features, new releases and the development process.
-
-Contributors and developers should subscribe to this list and follow it in order to keep up to date on what’s happening in Weex. [(subscribe)](mailto:dev-subscribe@weex.incubator.apache.org?subject=%28send%20this%20email%20to%20subscribe%29) [(unsubscribe)](mailto:dev-unsubscribe@weex.incubator.apache.org?subject=%28send%20this%20email%20to%20unsubscribe%29) [(archives)](http://mail-archives.apache.org/mod_mbox/incubator-weex-dev/)
-
-## Contribute Documentation
-
-Documentation with good quality is a great help to developers. If there is a powerful API that is not easy to use, it becomes useless. So, we welcome any contributions to help Weex's documents become precise and easy to read.
-
-To make changes to the document, you can edit the corresponding Markdown file at the [weex-site repository](https://github.com/apache/incubator-weex-site) and create a pull request.
-
-## How to Become a Committer
-
-Committers are core members of the community who can access the project's repository and modify its code, documentation and web sites, as well as accept the contributions of other developers.
-
-There's no exact criteria for becoming a committer, we are looking for contributors who are actively involved in community contributions and who have continued interest in Weex. If you are interested in becoming a Weex committer, contact any existing committer and we will help you go through the invitation process.
-
-
-## License
-By contributing to Weex, you agree that your contributions will be licensed under its Apache License, Version 2.0.
-
diff --git a/source/development-process.md b/source/development-process.md
deleted file mode 100644
index 54255e1..0000000
--- a/source/development-process.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: Development Process
-type: community
-has_chapter_content: false
-version: 2.1
----
-
-# Development Process
-
-Contributions are always welcome, but it is very important to understand the development process to make contributing simpler. This document will help you understand how to contribute changes to the Weex source code. Below are the recommended steps.
-
-## 1. Choose or Create a JIRA issue
-
-Weex uses [JIRA](https://issues.apache.org/jira/projects/WEEX) to track all types of code changes and not just bug fixes. A JIRA ticket should be used to describe *what* should be fixed or modified and the high-level approach of *how* it will be fixed. We use Github pull requests to manage the review and merge specific code changes. Pull Requests describe *how* to implement that change in the project’s source code.
-
-If you would like to create a new issue on JIRA, be sure to search the existing issues and see if someone has already reported the same. It helps in avoiding duplication. If your change may be controversial, you may want to create a discussion in the [weex-dev](mailto:dev@weex.incubator.apache.org) mailing list.
-
-**Every pull request should correspond to an issue in JIRA.**
-
-## 2. Develop Your Changes
-
-1. [Fork](https://help.github.com/articles/fork-a-repo/) the Github repository at [https://github.com/apache/incubator-weex](https://github.com/apache/incubator-weex).
-
-2. Clone the forked repository and create a new branch from `master` to push your commits to.
-
-3. Develop your feature or bug fix in your new branch. Make sure your code meets the [style guidelines](/development-process.html#code-style-guidelines).
-
-4. Add the below mentioned copyright notice to the top of any new file(s) you've added.
-
- ```javascript
- /*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
- ```
-
-5. Documentation and tests should be added or referenced if they need to be added or updated as part of the change. Make sure to test your changes thoroughly.
-
-6. Commit all the changes to your branch. [Commit Guidelines](/development-process.html#commit-guidelines) must be followed for better understanding.
-
-## 3. Create a Pull Request
-
-[Open a pull request](https://help.github.com/articles/using-pull-requests/) against the `master` branch of `apache/incubator-weex`. Make sure following guidelines are considered when creating a pull request.
-
-1. There should be one pull request for one issue.
-2. The PR title should be of the form `[WEEX-xxxx][COMPONENT] Summary` where `xxxx` is the relevant JIRA number and `COMPONENT` is one of the mentioned PR categories (android, iOS, jsfm, web, doc, website, example, test, other). `Summary` can be same as JIRA’s title or can also be a more specific title describing the PR itself.
-3. If the pull request is still a work in progress but needs to be pushed to Github to facilitate review, then add `[WIP]` after the component. This also means that the PR is not ready to be merged.
-
-**It is easier to review small pull requests and those are more likely to get merged. Prefer to split the PR if it includes changes for more than one thing.**
-
-## Code Style Guidelines
-
-### Objective-C
-
-- Tabs should be used for indentation. Please do not use spaces.
-- `*` operator goes with the variable name (e.g. Type *variable;)
-- For function definitions, place each brace on its own line.
-- For all the other braces, place the open brace on the line preceding the code block and place the close brace on its own line.
-- Use `#pragma marks` to categorize methods into functional groupings and protocol implementations
-- Follow other guidelines on [GitHub Objective-C Style Guide](https://github.com/github/objective-c-style-guide)
-
-### Java & Android
-
-- Use [Google Java Style](https://google.github.io/styleguide/javaguide.html) as basic guidelines of java code.
-- Follow [AOSP Code Style](https://source.android.com/source/code-style.html) for rest of android related code style.
-
-## Commit Guidelines
-
-Following template should be used to write commit descriptions.
-
-```markdown
-Summary of change, same as PR title: `[WEEX-xxxx][COMPONENT] Summary`
-
-Longer description of change addressing the following: Why the change
-is made, Context if it is part of many other changes, Description of previous
-behavior and newly introduced differences, etc.
-
-Long lines should be wrapped to 80 columns for easier log message
-viewing in terminals.
-
-Bug: 123456
-```
-
-A short subject and a blank line after the subject are crucial. Use the bug number from the JIRA issue.
-
-Some good thoughts on how to write better git commit messages can be found [here](https://chris.beams.io/posts/git-commit/).
-
-## License
-By contributing to Weex, you agree that your contributions will be licensed under its Apache License, Version 2.0.
-
-
diff --git a/source/download.ejs b/source/download.ejs
deleted file mode 100644
index ef2c86f..0000000
--- a/source/download.ejs
+++ /dev/null
@@ -1,3 +0,0 @@
-layout: download
-type: download
----
\ No newline at end of file
diff --git a/source/examples.ejs b/source/examples.ejs
deleted file mode 100644
index e64c436..0000000
--- a/source/examples.ejs
+++ /dev/null
@@ -1,3 +0,0 @@
-layout: examples
-type: examples
----
diff --git a/source/examples/a.md b/source/examples/a.md
deleted file mode 100644
index 1080cb9..0000000
--- a/source/examples/a.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: a
-type: example
-layout: example
-bundle_name: a
----
-
-```html
-<template>
- <div class="wrapper">
- <a class="button" href="http://dotwe.org/raw/dist/3e0e40f9ddad79f98cd236753965ffd8.js">
- <text class="text">Jump</text>
- </a>
- </div>
-</template>
-
-<style scoped>
- .wrapper {
- flex-direction: column;
- justify-content: center;
- }
- .button {
- width: 450px;
- margin-top: 30px;
- margin-left: 150px;
- padding-top: 20px;
- padding-bottom: 20px;
- border-width: 2px;
- border-style: solid;
- border-color: #DDDDDD;
- background-color: #F5F5F5
- }
- .text {
- font-size: 60px;
- color: #666666;
- text-align: center;
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/animation.md b/source/examples/animation.md
deleted file mode 100644
index 819fd9e..0000000
--- a/source/examples/animation.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: animation
-type: example
-layout: example
-web_bundle_url: ../js/examples/animation.web.js
----
-
-```html
-<template>
- <div class="wrapper">
- <div ref="test" @click="move" class="box"></div>
- </div>
-</template>
-
-<script>
- const animation = weex.requireModule('animation')
- const modal = weex.requireModule('modal')
-
- export default {
- methods: {
- move () {
- var testEl = this.$refs.test;
- animation.transition(testEl, {
- styles: {
- color: '#FF0000',
- transform: 'translate(250px, 100px)',
- transformOrigin: 'center center'
- },
- duration: 800, //ms
- timingFunction: 'ease',
- delay: 0 //ms
- }, function () {
- modal.toast({ message: 'animation finished.' })
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .box {
- width: 250px;
- height: 250px;
- background-color: #DDD;
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/clipboard.md b/source/examples/clipboard.md
deleted file mode 100644
index 7eab9e9..0000000
--- a/source/examples/clipboard.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: clipboard
-type: example
-layout: example
-web_bundle_url: ../js/examples/clipboard.web.js
----
-
-```html
-<template>
- <div>
- <div class="div">
- <text class="text" @click="onItemClick">{{message}}</text>
- </div>
- <div class="div">
- <text class="text" @click="setContent">Click to copy: {{tobecopied}}</text>
- </div>
- </div>
-</template>
-
-<script>
- const clipboard = weex.requireModule('clipboard')
-
- export default {
- data () {
- return {
- tobecopied: 'yay!',
- message: 'nothing.'
- }
- },
-
- methods: {
- setContent () {
- clipboard.setString(this.tobecopied)
- },
- onItemClick () {
- this.message = 'clicked! '
- clipboard.getString(ret => {
- this.message = 'text from clipboard:' + ret.data
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .div {
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- width: 750px;
- height: 90px;
- padding-left: 30px;
- padding-right: 30px;
-
- border-bottom-width: 1px;
- border-style: solid;
- border-color: #DDDDDD;
- }
- .text {
- width: 750px;
- height: 90px;
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/div.md b/source/examples/div.md
deleted file mode 100644
index b67f061..0000000
--- a/source/examples/div.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: div
-type: example
-layout: example
-web_bundle_url: ../js/examples/div.web.js
----
-
-```html
-<template>
- <div>
- <div class="box"></div>
- </div>
-</template>
-
-<style scoped>
- .box {
- border-width: 2px;
- border-style: solid;
- border-color: #BBB;
- width: 250px;
- height: 250px;
- margin-top: 250px;
- margin-left: 250px;
- background-color: #EEE;
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/dom-rect.md b/source/examples/dom-rect.md
deleted file mode 100644
index 9b786ba..0000000
--- a/source/examples/dom-rect.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: dom-rect
-type: example
-layout: example
-web_bundle_url: ../js/examples/dom-rect.web.js
----
-
-```html
-<template>
- <div class="wrapper" style='margin-top:200px'>
- <div ref="box" class="box">
- <text class="info">Width: {{size.width}}</text>
- <text class="info">Height: {{size.height}}</text>
- <text class="info">Top: {{size.top}}</text>
- <text class="info">Bottom: {{size.bottom}}</text>
- <text class="info">Left: {{size.left}}</text>
- <text class="info">Right: {{size.right}}</text>
- </div>
-
- <text class="info btn" @click='click()'>{{this.tip}}</text>
-
- </div>
-</template>
-
-<script>
- const dom = weex.requireModule('dom')
-
- function round(size) {
- var roundSize = {
- 'width': Math.round(size.width),
- 'height': Math.round(size.height),
- 'top': Math.round(size.top),
- 'bottom': Math.round(size.bottom),
- 'left': Math.round(size.left),
- 'right': Math.round(size.right)
- }
- return roundSize
- }
-
- export default {
- data () {
- return {
- size: {
- width: 0,
- height: 0,
- top: 0,
- bottom: 0,
- left: 0,
- right: 0
- },
- ref:"viewport",
- tip:"get box rect"
- }
- },
- mounted () {
- const result = dom.getComponentRect(this.ref, option => {
- console.log('getComponentRect:', option)
- this.size = round.call(this,option.size);
- })
- },
-
- methods:{
- click:function() {
- if (this.ref === 'viewport') {
- this.ref = this.$refs.box;
- this.tip = "get viewport rect"
- } else {
- this.ref = 'viewport'
- this.tip = "get box rect"
- }
-
- const result = dom.getComponentRect(this.ref, option => {
- console.log('getComponentRect:', option)
- this.size = round.call(this,option.size);
- })
- }
- }
-
- }
-</script>
-
-<style scoped>
- .btn {
- margin-top:20px;
- border-width:2px;
- border-style: solid;
- border-radius:10px;
- width:300px;
- margin-left:170px;
- padding-left:35px;
- border-color: rgb(162, 217, 192);
-
- }
- .btn:active {
- background-color: #8fbc8f;
- border-color: gray;
- }
-
- .box {
- align-items:center;
- margin-left: 150px;
- width: 350px;
- height: 400px;
- background-color: #DDD;
- border-width: 2px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
- .info {
- font-size: 40px;
- top:30px;
- margin-left:20px;
- font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
- color: #41B883;
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/dom-scroll.md b/source/examples/dom-scroll.md
deleted file mode 100644
index dca612f..0000000
--- a/source/examples/dom-scroll.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: dom-scroll
-type: example
-layout: example
-web_bundle_url: ../js/examples/dom-scroll.web.js
----
-
-```html
-<template>
- <div class="wrapper">
- <scroller class="scroller">
- <div class="row" v-for="(name, index) in rows" :ref="'item'+index">
- <text class="text" :ref="'text'+index">{{name}}</text>
- </div>
- </scroller>
- <div class="group">
- <text @click="goto10" class="button">Go to 10</text>
- <text @click="goto20" class="button">Go to 20</text>
- </div>
- </div>
-</template>
-
-<script>
- const dom = weex.requireModule('dom')
-
- export default {
- data () {
- return {
- rows: []
- }
- },
- created () {
- for (let i = 0; i < 30; i++) {
- this.rows.push('row ' + i)
- }
- },
- methods: {
- goto10 (count) {
- const el = this.$refs.item10[0]
- dom.scrollToElement(el, {})
- },
- goto20 (count) {
- const el = this.$refs.item20[0]
- dom.scrollToElement(el, { offset: 0 })
- }
- }
- }
-</script>
-
-<style scoped>
- .scroller {
- width: 700px;
- height: 700px;
- border-width: 3px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- margin-left: 25px;
- }
- .row {
- height: 100px;
- flex-direction: column;
- justify-content: center;
- padding-left: 30px;
- border-bottom-width: 2px;
- border-bottom-style: solid;
- border-bottom-color: #DDDDDD;
- }
- .text {
- font-size: 45px;
- color: #666666;
- }
- .group {
- flex-direction: row;
- /*justify-content: space-around;*/
- justify-content: center;
- margin-top: 60px;
- }
- .button {
- width: 200px;
- padding-top: 20px;
- padding-bottom: 20px;
- font-size: 40px;
- margin-left: 30px;
- margin-right: 30px;
- text-align: center;
- color: #41B883;
- border-width: 2px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/image.md b/source/examples/image.md
deleted file mode 100644
index f3b1015..0000000
--- a/source/examples/image.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: image
-type: example
-layout: example
-web_bundle_url: ../js/examples/image.web.js
----
-
-```html
-<template>
- <scroller class="wrapper" >
- <div class="page-head" >
- <image class="title-bg" resize="cover" src="https://img.alicdn.com/tps/TB1dX5NOFXXXXc6XFXXXXXXXXXX-750-202.png"></image>
- <div class="title-box">
- <text class="title">Alan Mathison Turing</text>
- </div>
- </div>
- <div class="article">
- <text class="paragraph">Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.</text>
- <text class="paragraph">During the Second World War, Turing worked for the Government Code and Cypher School (GC&CS) at Bletchley Park, Britain's codebreaking centre. For a time he led Hut 8, the section responsible for German naval cryptanalysis. He devised a number of techniques for speeding the breaking of German ciphers, including improvements to the pre-war Polish bombe method, an electromechanical machine that could find settings for the Enigma machine. Turing played a pivotal role in cracking intercepted coded messages that enabled the Allies to defeat the Nazis in many crucial engagements, including the Battle of the Atlantic; it has been estimated that this work shortened the war in Europe by more than two years and saved over fourteen million lives.</text>
- <text class="paragraph">After the war, he worked at the National Physical Laboratory, where he designed the ACE, among the first designs for a stored-program computer. In 1948 Turing joined Max Newman's Computing Machine Laboratory at the Victoria University of Manchester, where he helped develop the Manchester computers and became interested in mathematical biology. He wrote a paper on the chemical basis of morphogenesis, and predicted oscillating chemical reactions such as the Belousov–Zhabotinsky reaction, first observed in the 1960s.</text>
- <text class="paragraph">Turing was prosecuted in 1952 for homosexual acts, when by the Labouchere Amendment, "gross indecency" was still criminal in the UK. He accepted chemical castration treatment, with DES, as an alternative to prison. Turing died in 1954, 16 days before his 42nd birthday, from cyanide poisoning. An inquest determined his death as suicide, but it has been noted that the known evidence is also consistent with accidental poisoning. In 2009, following an Internet campaign, British Prime Minister Gordon Brown made an official public apology on behalf of the British government for "the appalling way he was treated." Queen Elizabeth II granted him a posthumous pardon in 2013.</text>
- </div>
- </scroller>
-</template>
-
-<style>
- .page-head {
- width: 750px;
- height: 200px;
- }
- .title-bg {
- width: 750px;
- height: 200px;
- }
- .title-box {
- width: 750px;
- height: 200px;
- justify-content: center;
- align-items: center;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
- .title {
- color: #ffffff;
- font-size: 32px;
- font-weight: bold;
- }
- .article {
- padding: 20px;
- }
- .paragraph{
- margin-bottom: 15px;
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/indicator.md b/source/examples/indicator.md
deleted file mode 100644
index 837e4df..0000000
--- a/source/examples/indicator.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: indicator
-type: example
-layout: example
-web_bundle_url: ../js/examples/indicator.web.js
----
-
-```html
-<template>
- <div>
- <slider class="slider" interval="4500" @change="onchange">
- <div class="frame" v-for="img in imageList">
- <image class="image" resize="cover" :src="img.src"></image>
- <text class="title">{{img.title}}</text>
- </div>
- <indicator class="indicator"></indicator>
- </slider>
- </div>
-</template>
-
-<style>
- .image {
- width: 700px;
- height: 700px;
- }
- .slider {
- margin-top: 25px;
- margin-left: 25px;
- width: 700px;
- height: 700px;
- border-width: 2px;
- border-style: solid;
- border-color: #41B883;
- }
- .title {
- position: absolute;
- top: 20px;
- left: 20px;
- padding-left: 20px;
- width: 200px;
- color: #FFFFFF;
- font-size: 36px;
- line-height: 60px;
- background-color: rgba(0, 0, 0, 0.3);
- }
- .frame {
- width: 700px;
- height: 700px;
- position: relative;
- }
- .indicator {
- width: 700px;
- height: 700px;
- item-color: green;
- item-selected-color: red;
- item-size: 50px;
- top: 200px;
- left: 200px;
- }
-</style>
-
-<script>
- export default {
- data () {
- return {
- imageList: [
- { title: 'item A', src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
- { title: 'item B', src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
- { title: 'item C', src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
- ]
- }
- },
- methods: {
- onchange (event) {
- console.log('changed:', event.index)
- }
- }
- }
-</script>
-```
\ No newline at end of file
diff --git a/source/examples/input.md b/source/examples/input.md
deleted file mode 100644
index a6e1df4..0000000
--- a/source/examples/input.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: input
-type: example
-layout: example
-web_bundle_url: ../js/examples/input.web.js
----
-
-```html
-<template>
- <div class="wrapper">
- <input ref="input" class="input" type="text" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur">
- </div>
-</template>
-
-<script>
- const modal = weex.requireModule('modal')
-
- export default {
- methods: {
- oninput (event) {
- console.log('oninput:', event.value)
- modal.toast({
- message: `oninput: ${event.value}`,
- duration: 0.8
- })
- },
- onchange (event) {
- console.log('onchange:', event.value)
- modal.toast({
- message: `onchange: ${event.value}`,
- duration: 0.8
- })
- },
- onfocus (event) {
- console.log('onfocus:', event.value)
- modal.toast({
- message: `onfocus: ${event.value}`,
- duration: 0.8
- })
- },
- onblur (event) {
- console.log('onblur:', event.value)
- modal.toast({
- message: `input blur: ${event.value}`,
- duration: 0.8
- })
- }
- }
- }
-</script>
-
-<style>
- .input {
- font-size: 50px;
- width: 650px;
- margin-top: 50px;
- margin-left: 50px;
- padding-top: 20px;
- padding-bottom: 20px;
- padding-left: 20px;
- padding-right: 20px;
- color: #666666;
- border-width: 2px;
- border-style: solid;
- border-color: #41B883;
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/list.md b/source/examples/list.md
deleted file mode 100644
index d95e631..0000000
--- a/source/examples/list.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: list
-type: example
-layout: example
-web_bundle_url: ../js/examples/list.web.js
----
-
-```html
-<template>
- <list class="list" @loadmore="fetch" loadmoreoffset="10">
- <cell class="cell" v-for="num in lists">
- <div class="panel">
- <text class="text">{{num}}</text>
- </div>
- </cell>
- </list>
-</template>
-
-<script>
- const modal = weex.requireModule('modal')
- const LOADMORE_COUNT = 4
-
- export default {
- data () {
- return {
- lists: [1, 2, 3, 4, 5]
- }
- },
- methods: {
- fetch (event) {
- modal.toast({ message: 'loadmore', duration: 1 })
-
- setTimeout(() => {
- const length = this.lists.length
- for (let i = length; i < length + LOADMORE_COUNT; ++i) {
- this.lists.push(i + 1)
- }
- }, 800)
- }
- }
- }
-</script>
-
-<style scoped>
- .panel {
- width: 600px;
- height: 250px;
- margin-left: 75px;
- margin-top: 35px;
- margin-bottom: 35px;
- flex-direction: column;
- justify-content: center;
- border-width: 2px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
- .text {
- font-size: 50px;
- text-align: center;
- color: #41B883;
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/modal.md b/source/examples/modal.md
deleted file mode 100644
index 7a9c3cd..0000000
--- a/source/examples/modal.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: modal
-type: example
-layout: example
-web_bundle_url: ../js/examples/modal.web.js
----
-
-```html
-<template>
- <div class="wrapper">
- <text class="button" @click="showToast">Toast</text>
- <text class="button" @click="showAlert">Alert</text>
- <text class="button" @click="showConfirm">Confirm</text>
- <text class="button" @click="showPrompt">Prompt</text>
- </div>
-</template>
-
-<script>
- var modal = weex.requireModule('modal')
-
- export default {
- methods: {
- showToast (event) {
- console.log('will show toast')
- modal.toast({
- message: 'This is a toast',
- duration: 0.3
- })
- },
- showAlert (event) {
- console.log('will show alert')
- modal.alert({
- message: 'This is a alert',
- duration: 0.3
- }, function (value) {
- console.log('alert callback', value)
- })
- },
- showConfirm (event) {
- console.log('will show confirm')
- modal.confirm({
- message: 'Do you confirm ?',
- duration: 0.3
- }, function (value) {
- console.log('confirm callback', value)
- })
- },
- showPrompt (event) {
- console.log('will show prompt')
- modal.prompt({
- message: 'This is a prompt',
- duration: 0.3
- }, function (value) {
- console.log('prompt callback', value)
- })
- }
- }
- };
-</script>
-
-<style scoped>
- .wrapper {
- flex-direction: column;
- justify-content: center;
- }
- .button {
- font-size: 60px;
- width: 450px;
- text-align: center;
- margin-top: 30px;
- margin-left: 150px;
- padding-top: 20px;
- padding-bottom: 20px;
- border-width: 2px;
- border-style: solid;
- color: #666666;
- border-color: #DDDDDD;
- background-color: #F5F5F5
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/navigator.md b/source/examples/navigator.md
deleted file mode 100644
index a2fcd9a..0000000
--- a/source/examples/navigator.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: navigator
-type: example
-layout: example
-web_bundle_url: ../js/examples/navigator.web.js
----
-
-```html
-<template>
- <div class="wrapper">
- <text class="button" @click="jump">Jump</text>
- </div>
-</template>
-
-<script>
- var navigator = weex.requireModule('navigator')
- var modal = weex.requireModule('modal')
-
- export default {
- methods: {
- jump (event) {
- console.log('will jump')
- navigator.push({
- url: 'http://dotwe.org/raw/dist/519962541fcf6acd911986357ad9c2ed.js',
- animated: "true"
- }, event => {
- modal.toast({ message: 'callback: ' + event })
- })
- }
- }
- };
-</script>
-
-<style scoped>
- .wrapper {
- flex-direction: column;
- justify-content: center;
- }
- .button {
- font-size: 60px;
- width: 450px;
- text-align: center;
- margin-top: 30px;
- margin-left: 150px;
- padding-top: 20px;
- padding-bottom: 20px;
- border-width: 2px;
- border-style: solid;
- color: #666666;
- border-color: #DDDDDD;
- background-color: #F5F5F5
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/refresh.md b/source/examples/refresh.md
deleted file mode 100644
index b5f200c..0000000
--- a/source/examples/refresh.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: refresh
-type: example
-layout: example
-web_bundle_url: ../js/examples/refresh.web.js
----
-
-```html
-<template>
- <scroller class="scroller">
- <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
- <text class="indicator">Refreshing ...</text>
- </refresh>
- <div class="cell" v-for="num in lists">
- <div class="panel">
- <text class="text">{{num}}</text>
- </div>
- </div>
- </scroller>
-</template>
-
-<script>
- const modal = weex.requireModule('modal')
-
- export default {
- data () {
- return {
- refreshing: false,
- lists: [1, 2, 3, 4, 5]
- }
- },
- methods: {
- onrefresh (event) {
- console.log('is refreshing')
- modal.toast({ message: 'refresh', duration: 1 })
- this.refreshing = true
- setTimeout(() => {
- this.refreshing = false
- }, 2000)
- },
- onpullingdown (event) {
- console.log('is onpulling down')
- modal.toast({ message: 'pulling down', duration: 1 })
- }
- }
- }
-</script>
-
-<style scoped>
- .indicator {
- color: #888888;
- font-size: 42px;
- text-align: center;
- }
- .panel {
- width: 600px;
- height: 250px;
- margin-left: 75px;
- margin-top: 35px;
- margin-bottom: 35px;
- flex-direction: column;
- justify-content: center;
- border-width: 2px;
- border-style: solid;
- border-color: #DDDDDD;
- background-color: #F5F5F5;
- }
- .text {
- font-size: 50px;
- text-align: center;
- color: #41B883;
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/scroller.md b/source/examples/scroller.md
deleted file mode 100644
index 43c5c85..0000000
--- a/source/examples/scroller.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: scroller
-type: example
-layout: example
-web_bundle_url: ../js/examples/scroller.web.js
----
-
-```html
-<template>
- <div class="wrapper">
- <scroller class="scroller">
- <div class="row" v-for="(name, index) in rows" :ref="'item'+index">
- <text class="text" :ref="'text'+index">{{name}}</text>
- </div>
- </scroller>
- <div class="group">
- <text @click="goto10" class="button">Go to 10</text>
- <text @click="goto20" class="button">Go to 20</text>
- </div>
- </div>
-</template>
-
-<script>
- const dom = weex.requireModule('dom')
-
- export default {
- data () {
- return {
- rows: []
- }
- },
- created () {
- for (let i = 0; i < 30; i++) {
- this.rows.push('row ' + i)
- }
- },
- methods: {
- goto10 (count) {
- const el = this.$refs.item10[0]
- dom.scrollToElement(el, {})
- },
- goto20 (count) {
- const el = this.$refs.item20[0]
- dom.scrollToElement(el, { offset: 0 })
- }
- }
- }
-</script>
-
-<style scoped>
- .scroller {
- width: 700px;
- height: 700px;
- border-width: 3px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- margin-left: 25px;
- }
- .row {
- height: 100px;
- flex-direction: column;
- justify-content: center;
- padding-left: 30px;
- border-bottom-width: 2px;
- border-bottom-style: solid;
- border-bottom-color: #DDDDDD;
- }
- .text {
- font-size: 45px;
- color: #666666;
- }
- .group {
- flex-direction: row;
- justify-content: center;
- margin-top: 60px;
- }
- .button {
- width: 200px;
- padding-top: 20px;
- padding-bottom: 20px;
- font-size: 40px;
- margin-left: 30px;
- margin-right: 30px;
- text-align: center;
- color: #41B883;
- border-width: 2px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/slider.md b/source/examples/slider.md
deleted file mode 100644
index 89e11e5..0000000
--- a/source/examples/slider.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: slider
-type: example
-layout: example
-web_bundle_url: ../js/examples/slider.web.js
----
-
-```html
-<template>
- <div>
- <slider class="slider" interval="3000" auto-play="true">
- <div class="frame" v-for="img in imageList">
- <image class="image" resize="cover" :src="img.src"></image>
- </div>
- </slider>
- </div>
-</template>
-
-<style scoped>
- .image {
- width: 700px;
- height: 700px;
- }
- .slider {
- margin-top: 25px;
- margin-left: 25px;
- width: 700px;
- height: 700px;
- border-width: 2px;
- border-style: solid;
- border-color: #41B883;
- }
- .frame {
- width: 700px;
- height: 700px;
- position: relative;
- }
-</style>
-
-<script>
- export default {
- data () {
- return {
- imageList: [
- { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
- { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
- { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
- ]
- }
- }
- }
-</script>
-```
\ No newline at end of file
diff --git a/source/examples/storage.md b/source/examples/storage.md
deleted file mode 100644
index e5819bb..0000000
--- a/source/examples/storage.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: storage
-type: example
-layout: example
-web_bundle_url: ../js/examples/storage.web.js
----
-
-```html
-<template>
- <div class="list">
- <div class="group center">
- <div class="panel"><text class="text">{{state}}</text></div>
- </div>
- <div class="group">
- <div class="panel"><text class="text" @click="setItem">set</text></div>
- <div class="panel"><text class="text" @click="getItem">get</text></div>
- <div class="panel"><text class="text" @click="removeItem">remove</text></div>
- <div class="panel"><text class="text" @click="getAll">all</text></div>
- </div>
- </div>
-</template>
-
-<script>
- const storage = weex.requireModule('storage')
- const modal = weex.requireModule('modal')
-
- export default {
- data () {
- return {
- keys: '[]',
- length: 0,
- state: '----'
- }
- },
- methods: {
- setItem () {
- storage.setItem('name', 'Hanks', event => {
- this.state = 'set success'
- console.log('set success')
- })
- },
- getItem () {
- storage.getItem('name', event => {
- console.log('get value:', event.data)
- this.state = 'value: ' + event.data
- })
- },
- removeItem () {
- storage.removeItem('name', event => {
- console.log('delete value:', event.data)
- this.state = 'deleted'
- })
- },
- getAll () {
- storage.getAllKeys(event => {
- // modal.toast({ message: event.result })
- if (event.result === 'success') {
- modal.toast({
- message: 'props: ' + event.data.join(', ')
- })
- }
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .panel {
- height: 100px;
- flex-direction: column;
- justify-content: center;
- border-width: 2px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
- .group {
- flex-direction: row;
- justify-content: space-between;
- width: 650px;
- margin-left: 50px;
- margin-top: 50px;
- margin-bottom: 50px;
- }
- .center {
- justify-content: center;
- }
- .text {
- font-size: 50px;
- text-align: center;
- padding-left: 25px;
- padding-right: 25px;
- color: #41B883;
- }
- .small {
- font-size: 32px;
- padding-left: 35px;
- padding-right: 35px;
- color: #41B883;
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/stream.md b/source/examples/stream.md
deleted file mode 100644
index 2a4d47a..0000000
--- a/source/examples/stream.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: stream
-type: example
-layout: example
-web_bundle_url: ../js/examples/stream.web.js
----
-
-```html
-<template>
- <div class="wrapper">
- <div class="group">
- <text class="title">Weex Star :</text>
- <text class="count">{{weexStar}}</text>
- </div>
- <div class="group">
- <text class="title">Vue Star :</text>
- <text class="count">{{vueStar}}</text>
- </div>
- </div>
-</template>
-
-<script>
- var stream = weex.requireModule('stream')
- export default {
- data () {
- return {
- weexStar: 'unknown',
- vueStar: 'unknown'
- }
- },
-
- methods: {
- getStarCount (repo, callback) {
- return stream.fetch({
- method: 'GET',
- type: 'json',
- url: 'https://api.github.com/repos/' + repo
- }, callback)
- }
- },
- created () {
- this.getStarCount('alibaba/weex', res => {
- this.weexStar = res.ok ? res.data.stargazers_count : '(network error)'
- })
- this.getStarCount('vuejs/vue', res => {
- this.vueStar = res.ok ? res.data.stargazers_count : '(network error)'
- })
- }
- }
-</script>
-
-
-<style scoped>
- .wrapper {
- flex-direction: column;
- justify-content: center;
- }
- .group {
- flex-direction: row;
- justify-content: center;
- margin-bottom: 40px;
- }
- .title {
- font-size: 45px;
- color: #888888;
- }
- .count {
- font-size: 45px;
- font-weight: bold;
- margin-left: 12px;
- color: #41B883;
- }
-</style>
-```
diff --git a/source/examples/switch.md b/source/examples/switch.md
deleted file mode 100644
index 12b2a2e..0000000
--- a/source/examples/switch.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: switch
-type: example
-layout: example
-web_bundle_url: ../js/examples/switch.web.js
----
-
-```html
-<template>
- <div>
- <div class="example">
- <text class="label">normal</text>
- <switch></switch>
- </div>
- <div class="example">
- <text class="label">checked</text>
- <switch checked="true"></switch>
- </div>
- <div class="example">
- <text class="label">disabled</text>
- <switch disabled="true" checked="true"></switch>
- <switch disabled="true"></switch>
- </div>
- <div class="example">
- <text class="label">onchange</text>
- <switch @change="onchange"></switch>
- <text class="info">{{checked}}</text>
- </div>
- </div>
-</template>
-
-<script>
- export default {
- data () {
- return {
- checked: false
- }
- },
- methods: {
- onchange (event) {
- console.log(`onchage, value: ${event.value}`)
- this.checked = event.value
- }
- }
- }
-</script>
-
-<style scoped>
- .example {
- flex-direction: row;
- justify-content: flex-start;
- margin-top: 60px;
- }
- .label {
- font-size: 40px;
- line-height: 60px;
- width: 350px;
- color: #666;
- text-align: right;
- margin-right: 20px;
- }
- .info {
- font-size: 30px;
- line-height: 60px;
- color: #BBB;
- margin-left: 10px;
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/examples/text.md b/source/examples/text.md
deleted file mode 100644
index 83438ae..0000000
--- a/source/examples/text.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: text
-type: example
-layout: example
-web_bundle_url: ../js/examples/text.web.js
----
-
-```html
-<template>
- <div class="wrapper">
- <div class="panel">
- <text class="text" lines="3">Weex 是一套简单易用的跨平台开发方案，能以 Web 的开发体验构建高性能、可扩展的原生应用。Vue 是一个轻量并且功能强大的渐进式前端框架。</text>
- </div>
- <div class="panel">
- <text class="text" lines="3">Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework. </text>
- </div>
- </div>
-</template>
-
-
-<style scoped>
- .wrapper {
- flex-direction: column;
- justify-content: center;
- }
- .panel {
- width: 600px;
- margin-left: 75px;
- border-width: 2px;
- border-style: solid;
- border-color: #BBB;
- padding-top: 15px;
- padding-bottom: 15px;
- padding-left: 15px;
- padding-right: 15px;
- margin-bottom: 30px;
- }
- .text {
- lines: 3;
- color: #666666;
- font-size: 32px;
- }
-</style>
-```
diff --git a/source/examples/textarea.md b/source/examples/textarea.md
deleted file mode 100644
index 3e682db..0000000
--- a/source/examples/textarea.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: textarea
-type: example
-layout: example
-web_bundle_url: ../js/examples/textarea.web.js
----
-
-```html
-<template>
- <div class="wrapper">
- <textarea class="textarea" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></textarea>
- </div>
-</template>
-
-<script>
- const modal = weex.requireModule('modal')
-
- export default {
- methods: {
- oninput (event) {
- console.log('oninput:', event.value)
- modal.toast({
- message: `oninput: ${event.value}`,
- duration: 0.8
- })
- },
- onchange (event) {
- console.log('onchange:', event.value)
- modal.toast({
- message: `onchange: ${event.value}`,
- duration: 0.8
- })
- },
- onfocus (event) {
- console.log('onfocus:', event.value)
- modal.toast({
- message: `onfocus: ${event.value}`,
- duration: 0.8
- })
- },
- onblur (event) {
- console.log('onblur:', event.value)
- modal.toast({
- message: `input blur: ${event.value}`,
- duration: 0.8
- })
- }
- }
- }
-</script>
-
-<style>
- .textarea {
- font-size: 50px;
- width: 650px;
- margin-top: 50px;
- margin-left: 50px;
- padding-top: 20px;
- padding-bottom: 20px;
- padding-left: 20px;
- padding-right: 20px;
- color: #666666;
- border-width: 2px;
- border-style: solid;
- border-color: #41B883;
- }
-</style>
-```
diff --git a/source/examples/video.md b/source/examples/video.md
deleted file mode 100644
index a8a35f0..0000000
--- a/source/examples/video.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: video
-type: example
-layout: example
-web_bundle_url: ../js/examples/video.web.js
----
-
-```html
-<template>
- <div>
- <video class="video" :src="src" autoplay controls
- @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
- <text class="info">state: {{state}}</text>
- </div>
-</template>
-
-<style scoped>
- .video {
- width: 630px;
- height: 350px;
- margin-top: 60px;
- margin-left: 60px;
- }
- .info {
- margin-top: 40px;
- font-size: 40px;
- text-align: center;
- }
-</style>
-
-<script>
- export default {
- data () {
- return {
- state: '----',
- src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
- }
- },
- methods:{
- onstart (event) {
- this.state = 'onstart'
- },
- onpause (event) {
- this.state = 'onpause'
- },
- onfinish (event) {
- this.state = 'onfinish'
- },
- onfail (event) {
- this.state = 'onfinish'
- }
- }
- }
-</script>
-```
\ No newline at end of file
diff --git a/source/examples/web.md b/source/examples/web.md
deleted file mode 100644
index 6192985..0000000
--- a/source/examples/web.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: web
-type: example
-layout: example
-web_bundle_url: ../js/examples/web.web.js
----
-
-```html
-<template>
- <div class="wrapper">
- <div class="group">
- <input class="input" ref="input" type="url" autofocus="false" value="https://m.taobao.com"></input>
- </div>
- <div class="group">
- <text class="button" @click="loadURL">LoadURL</text>
- <text class="button" @click="reload">reload</text>
- </div>
- <web ref="webview" :src="url" class="webview" @pagestart="start" @pagefinish="finish" @error="error"></web>
- </div>
-</template>
-
-<script>
- const webview = weex.requireModule('webview')
- const modal = weex.requireModule('modal')
-
- export default {
- data () {
- return {
- url : 'https://m.alibaba.com'
- }
- },
- methods: {
- loadURL (event) {
- this.url = this.$refs.input.value
- modal.toast({ message: 'load url:' + this.url })
- setTimeout(() => {
- console.log('will go back.')
- modal.toast({ message: 'will go back' })
- webview.goBack(this.$refs.webview)
- }, 10000)
- },
- reload (event) {
- console.log('will reload webview')
- modal.toast({ message: 'reload' })
- webview.reload(this.$refs.webview)
- },
- start (event) {
- console.log('pagestart', event)
- modal.toast({ message: 'pagestart' })
- },
- finish (event) {
- console.log('pagefinish', event)
- modal.toast({ message: 'pagefinish' })
- },
- finish (event) {
- console.log('error', event)
- modal.toast({ message: 'error' })
- }
- }
- }
-</script>
-
-<style scoped>
- .group {
- flex-direction: row;
- justify-content: space-around;
- margin-top: 20px;
- }
- .input {
- width: 600px;
- font-size: 36px;
- padding-top: 15px;
- padding-bottom: 15px;
- border-width: 2px;
- border-style: solid;
- border-color: #BBBBBB;
- }
- .button {
- width: 225px;
- text-align: center;
- background-color: #D3D3D3;
- padding-top: 15px;
- padding-bottom: 15px;
- margin-bottom: 30px;
- font-size: 30px;
- }
-
- .webview {
- margin-left: 75px;
- width: 600px;
- height: 750px;
- border-width: 2px;
- border-style: solid;
- border-color: #41B883;
- }
-</style>
-```
\ No newline at end of file
diff --git a/source/guide/.gitkeep b/source/guide/.gitkeep
deleted file mode 100644
index e69de29..0000000
--- a/source/guide/.gitkeep
+++ /dev/null
diff --git a/source/guide/advanced/app-architecture.md b/source/guide/advanced/app-architecture.md
deleted file mode 100644
index 135a7a8..0000000
--- a/source/guide/advanced/app-architecture.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: Mobile App Architecture
-type: guide
-group: Advanced Guide
-order: 8.5
-version: 2.1
----
-
-<!-- toc -->
-
-## Today's Mobile App
-
-Let's talk about what we think a mobile app should be.
-
-### Mobile App Needs Parallel Development
-
-Nowadays, all mobile app teams requires the ability to develop in parallel. When a mobile app keeps growing, supporting large-scale parallel development must become a very important key thing. Otherwise it's really easy to become a bottleneck.
-
-### Mobile App Needs to be Dynamic
-
-Today the development of mobile apps is very heavy. And it's really slow in iteration, release, distribution and online bugfix. The size of the package of an app is growing fast too. All of this is not suitable for this mobile internet age. Mobile app needs to be dynaimic which is out of the cumbersome process of version deployment and distribution.
-
-### Mobile App Needs Open Interconnection
-
-Today in your phone, things are hard to connect and share between different apps. They needs some container with common standard and specs to be shared with each other.
-
-## Our Thinking of Mobile App
-
-We think a dynamic, parallel development supported, standardized mobile app should be like this:
-
-```
-|------|------|------|------| |-----|
-| page | page | page | page | | api |
-|------|------|------|------| | api |
-| page | page | page | page | | api |
-|------|------|------|------| | api |
-| page | page | page | page | | api |
-|---------------------------| | api |
-| router | | api |
-|---------------------------| |-----|
-```
-
-* Pages: A whole mobile app should be divided into several mobile pages. Each mobile page has its own "URL".
-* Router: All the mobile pages above will be connected with router. And navigators or tab bars are just doing this job.
-* Features: All kinds of APIs or services provided from the device. Every mobile page could use these features as they like.
-
-So before you build your mobile app, make sure how many mobile pages your mobile app has and what are they. How do they connect each other. Give each mobile page a URL. And sort out all the APIs and services your mobile app needs.
-
-Then create the pages and develop, debug and deploy them using Weex.
-
-**Links**
-
-* [Mobile page architecture](./page-architecture.html)
-
-If you have built a complete mobile app already and just want to using Weex to rebuild part of these pages, that's absolutely no problem. Because Weex is just a SDK to build mobile pages which can coexist very well with other native views or hybrid pages.
-
-If the feature of WeexSDK is limited to your mobile app. You can extend your own components and modules. It requires some native development knowledge. But with our efforts on delivering more and more features, we believe this part of job will be getting smaller and smaller.
-
-**Links**
-
-* [Extend iOS](../extend-ios.html)
-* [Extend Android](../extend-android.html)
-* [Extend Web Renderer](../extend-web-render.html)
-* [Extend JS framework](../extend-js-framework.html)
diff --git a/source/guide/advanced/downgrade.md b/source/guide/advanced/downgrade.md
deleted file mode 100644
index e9f4f40..0000000
--- a/source/guide/advanced/downgrade.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: Downgrade
-type: guide
-group: Advanced Guide
-order: 8.2
-version: 2.1
----
-
-<!-- toc -->
-Due to the continuous development of Weex, some version fragmentation problems occur inevitably . For example, certain new features are not fully supported in the historical version. In this case, we need to degrade Weex to HTML and render through web.
-
-Currently, there are many conditions and rules for the degradation which triggered by Weex definition, including operating system version, app version, SDK version, etc.
-
-
-Weex 2.0 downgrade change to module，please refer to [downgrade](https://www.npmjs.com/package/@weex-project/downgrade)
-
diff --git a/source/guide/advanced/page-architecture.md b/source/guide/advanced/page-architecture.md
deleted file mode 100644
index 8e408fe..0000000
--- a/source/guide/advanced/page-architecture.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Weex Page Architecture
-type: guide
-group: Advanced Guide
-order: 8.6
-version: 2.1
----
-
-<!-- toc -->
-
-A Weex page is a independent mobile page which includes UI, interaction logic, device power, lifecycle management etc.
-
-## UI
-
-### Native DOM Model
-
-Weex page has its HTML-like DOM model to manage UI. It will be decomposed into a DOM tree which consists of some DOM nodes.
-
-**Links**
-
-* [Weex Native DOM APIs](../../references/native-dom-api.html)
-
-### Components
-
-Weex supports many kinds of components. Some of them are content components such as text, image and videos. Some of them are container components such as div, list, scroller. Also there are some special components like slider, input, textarea, and switch.
-
-**Links**
-
-* [All components Weex supports](../../references/components/index.html)
-
-### Layout System
-
-Weex use some CSS properties to layout every nodes in the DOM tree together. It includes:
-
-* Box model: Describe the `width`, `height`, `padding`, `margin` and `border` of a component node.
-* Flexbox: Describe the relations between different nodes with CSS Flexbox Spec.
-* Supportting `absolute`, `relative`, `fixed` and `sticky` value of CSS `position` property.
-
-### Features
-
-Weex supports lots of device features through modules such as storage, navigation, modals etc. Each of them exposes some JS APIs.
-
-**Links**
-
-* [All modules Weex supports](../../references/modules/index.html)
-
-### Lifecycle
-
-Every Weex page has its lifecycle which is defined and implemented in WeexSDK. All Weex pages will go through the whole process, from being created and last to being destroyed.
diff --git a/source/guide/advanced/path.md b/source/guide/advanced/path.md
deleted file mode 100644
index 0d00b1e..0000000
--- a/source/guide/advanced/path.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: Asset Path
-type: guide
-group: Advanced Guide
-order: 8.1
-version: 2.1
-has_chapter_content: true
----
-
-<!-- toc -->
-
-<span class="weex-version">0.9</span>
-
-This article will cover uri (url) usage in Weex. Including using image/typeface resources, deal with relative uri and how to access local and packaged asset files.
-
-## Schemes
-
-* Local
-Weex SDK provide `local` scheme to access resources packaged with application, and of cource, it's not working in the HTML5 runtime.
-Currently, developers can use this scheme with `image` and text's font file location.
- * In iOS, it's always locate file in 'bundle resources'. For example, a `image` component with `local:///app_icon` will load image file named 'app_icon' in bundle resouce, and font file work in the same way.
- * In Android, image component will load from 'drawable' resource folder like 'res/drawable-xxx'. But load font file is different, android framework can not load font file from 'res', so SDK will load it from `assets` folder.
-
-* HTTP/HTTPS
-It's working in the same way as in web, Weex support these at very beginning.
-
-* File
-Use `file` scheme to access local disk file. This scheme has its limitations: You would not hard coded a file url in source page. Because not matter it's running in different platform(iOS, Android) or not, the content will be totally different in another device, which is depend to the specific device.
-So one possible case is getting the file url in runtime dynamically, which you can use it to display a local disk image, or maybe upload it later.
-
-## Relative URI
-
-[Like we do in HTML](https://www.w3.org/TR/html4/types.html#type-uri), weex process 'relative URI' in the same way. The relative URI, which start with `/`,`.`,`..`,`//`, will resolve by the bundle url.
-Means URL start with `/` will resolve to the root folder as bundle js file, `.` and `..` will resolve to current and parent folder, and `//` will resolve to same scheme bundle js have.
-
-## URI Adapter
-
-All the above is the default implementation, developers can extend or override these their own by providing a 'URI Adapter'. Same as the other adapters, Custom adapter should be set before Weex SDK is initializing.
diff --git a/source/guide/advanced/use-vuex-and-vue-router.md b/source/guide/advanced/use-vuex-and-vue-router.md
deleted file mode 100644
index 8c1289d..0000000
--- a/source/guide/advanced/use-vuex-and-vue-router.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Use Vuex and vue-router
-type: guide
-group: Advanced Guide
-order: 8.4
-version: 2.1
----
-
-<!-- toc -->
-
-Vue.js has many peripheral technology products such as [Vuex](https://github.com/vuejs/vuex) and [vue-router](https://github.com/vuejs/vue-router), those libraries can also work well on Weex.
-
-> **NOTE**: Weex is using native navigator to manage instance pages, the context of them are isolated. That means, Both Vuex and vue-router can only effect the single page, they can't share state between different pages.
-
-## Using Vuex
-
-> [Official Vuex documents](https://vuex.vuejs.org/en/)
-
-
-
-Vuex is a state management pattern + library for Vue.js applications. It's also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
-
-As a kind of state management library, Vuex is platform-independent, It also can be used in Weex. It also integrates with Vue's official [devtools extension](https://github.com/vuejs/vue-devtools) to provide advanced features on web platform, such as zero-config time-travel debugging and state snapshot export / import. (web platform only)
-
-## Using vue-router
-
-> [Official vue-router documents](https://router.vuejs.org/en/)
-
-Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, you are already composing our application with components. When adding vue-router to the mix, all you need to do is map your components to the routes and let vue-router know where to render them.
-
-However, there are many differences between web and Android or iOS, some features of vue-router are limited in Weex.
-
-### Router mode
-
-vue-router provides three routing modes:
-
-+ `hash`: uses the URL hash for routing. Works in all Vue-supported browsers, including those that do not support HTML5 History API. (**default**)
-+ `history`: requires HTML5 History API and server config. See [HTML5 History Mode](https://router.vuejs.org/en/essentials/history-mode.html).
-+ `abstract`: works in all JavaScript environments, e.g. server-side with Node.js.
-
-You can pass the `mode` parameter when creating a router:
-
-```js
-new Router({
- mode: 'abstract',
- // ...
-})
-```
-
-Obviously, `hash` mode and `history` mode are only available on the web, and have no effect in Weex. In other words, you can only use `abstract` mode in Android and iOS. However, vue-router will automatically be forced into `abstract` mode if no browser API is present. So, just **don't set the `mode` option, or set it to `abstract`**.
-
-### Programmatic navigation
-
-vue-router use `<router-link>` to create a navigation link, but in which, some features are based on the DOM events and it doesn't work well in the native environment. In Weex, you must use the [Programmatic Navigation](https://router.vuejs.org/en/essentials/navigation.html) to manage the router.
-
-Here is a basic example using `<router-link>`:
-
-```html
-<!-- Can only be used on the web, it takes no effects on Android or iOS! -->
-<template>
- <div>
- <router-link to="profile">
- <text>Profile</text>
- </router-link>
- </div>
-</template>
-```
-
-For native platforms, you have to use the `router.push`:
-
-```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>
-```
diff --git a/source/guide/create-a-plugin.md b/source/guide/create-a-plugin.md
deleted file mode 100644
index 9a098f8..0000000
--- a/source/guide/create-a-plugin.md
+++ /dev/null
@@ -1,133 +0,0 @@
----
-title: Create a plugin
-type: guide
-group: Extend
-order: 6.1
-version: 2.1
----
-
-<!-- toc -->
-
-The weex plugin development kit is designed to help developers build weex plugins quickly and easily, allowing them to integrate native functionality without changing business code.
-
-The plugin abstracts a functionality and/or component to the rest of the app by including the specific implementation for each target platform ([Web](#web), [Android](#android) and [iOS](#ios)) and exposing it through a common API.
-
-## Getting started
-
-Create a weex plugin with weexpack:
-```
-weex plugin create weex-my-plugin
-```
-This will create a project structure similar to this:
-```
- ├── android (Android native code project)
- │ └── ...
- ├── ios (iOS native code project)
- │ └── ...
- ├── js (html5 project)
- │ └── ...
- ├── examples (sample app)
- │ └── index.vue
- ├── playground (sample projects to test the plugin)
- │ ├── android
- │ ├── browser
- │ └── ios
- ├── WeexMyPlugin.podspec (iOS .podspec)
- ├── package.json
- ├── README.md
- ```
-
-The `examples` directory contains a weex app that you can use to test your plugin. This test app will be loaded from the playground apps that are installed in the `playground` folder.
-
-## Web
-
-### Developing and testing with the playground app
-1. Build the example weex app in `examples/index.vue`:
- ```
- npm run start:web
- ```
- Webpack will be listening for changes in `examples/index.vue` and re-build the example app for you. The app will be served in the port 12580 (e.g. http://localhost:12580).
-
-2. Edit the plugin JavaScript/HTML/CSS code under the `js` folder. Refresh the test app to update the plugin in the playground app.
-
-### Extending Web functionality
-See [Extend Web Render](./extend-web-render.html).
-
-## Android
-
-### Developing and testing with the playground app
-1. Build the example weex app in `examples/index.vue`:
- ```
- npm run start:native
- ```
- Webpack will be listening for changes in `examples/index.vue` and re-build the example app for you.
-
-2. Open the android project under `playground/android` with Android Studio.
-
- The native plugin code will be linked as a gradle dependency. You can develop and test the plugin directly from Android Studio. You can also use `weex debug` to debug the playground app.
-
-### Extending native functionality
-See [Extend Android](./extend-android.html).
-
-## iOS
-
-### Developing and testing with the playground app
-1. Build the example weex app in `examples/index.vue`:
- ```
- npm run start:native
- ```
- Webpack will be listening for changes in `examples/index.vue` and re-build the example app for you.
-
-2. Open the iOS playground app and install the dependencies:
- ```
- cd playground/ios
- pod install
- ```
-3. Open `WeexDemo.xcworkspace` in Xcode.
-
- The native plugin code will be linked as cocoa pod. You can develop and test the plugin directly from Xcode. You can also use `weex debug` to debug the playground app.
-
-### Extending native functionality
-See [Extend iOS](./extend-ios.html).
-
-### Publishing a plugin to the cocapods repository
-1. Edit the `*.podspec` generated in the root of the plugin project.
-2. Check the correctness of the iOS plugin:
- ```
- pod spec lint --allow-warnings
- ```
-3. Publish to cocoapods repository:
- ```
- pod trunk push --allow-warnings
- ```
-
-## Publish the plugin in the weex market
-You can publish to the [Weex Market](https://market.dotwe.org/) with the simple command:
-```
-weex plugin publish
-```
-
-## How to use the plugin in another project
-
-### Using `weexpack`:
-```
-weex plugin add weex-kdp
-```
-
-### Manual integration:
-#### iOS:
-```
-pod 'WeexMyPlugin'
-```
-
-#### Android:
-Add the following line to the dependencies list in the build.gradle file for the corresponding project.
-```
- compile '${groupId}:weexkdp:{$version}'
-```
-> Note: You need to specify the groupId and $version of the project.
-
-#### Web integration
-```
- npm install weexkdp
-```
diff --git a/source/guide/extend-android.md b/source/guide/extend-android.md
deleted file mode 100644
index 1bfe0a9..0000000
--- a/source/guide/extend-android.md
+++ /dev/null
@@ -1,287 +0,0 @@
----
-title: Extend Android
-type: guide
-group: Extend
-order: 6.3
-version: 2.1
----
-
-<!-- toc -->
-
-Weex supports module-extend、component-extend and adapter-extend.
-
-## Module extend
-
-1. Customize modules class must extend from WXModule.
-2. Extended method must add @JSMethod (uiThread = false or true) annotation, which determines whether the method is run on UI thread.
-3. The access level of method must be `public`.
-4. Do not obfuscate code using tools like ProGuard.
-5. Extended method suppport the data type of int, double, float, String, Map, List as its param.
-7. Register the module: `WXSDKEngine.registerModule("MyModule", MyModule.class);`or else may report an error: `ReportException :undefined:9: TypeError: Object #<Object> has no method 'xxx'` .
-
-Refer to the following example:
-
-```java
-public class MyModule extends WXModule{
-
- //run ui thread
- @JSMethod (uiThread = true)
- public void printLog(String msg) {
- Toast.makeText(mWXSDKInstance.getContext(),msg,Toast.LENGTH_SHORT).show();
- }
-
- //run JS thread
- @JSMethod (uiThread = false)
- public void fireEventSyncCall(){
- //implement your module logic here
- }
-}
-```
-Register the module
-
-```java
-WXSDKEngine.registerModule("MyModule", MyModule.class);
-```
-Use this module in weex DSL
-Now `event` moudle is avaiable in weex, use the module like this:
-
-```html
-<template>
- <div>
- <text onclick="click">testMyModule</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- methods: {
- click: function() {
- weex.requireModule('MyModule').printLog("I am a weex Module!");
- }
- }
- }
-</script>
-```
-
-## Javascript callback
-
-If the module need implement a callback to javascript, you just add `JSCallback` argument to the method you want expose to javascript:
-
-```java
-@WXModuleAnno
-public void openURL(String url,JSCallback callback){
- //implement your module logic here
- Map<String,Object> resp = new HashMap();
- resp.put("result","ok");
- callback.invoke(resp);
-}
-```
-
-At the javascript side, call the module with javascript function to receive callback data:
-
-```javascript
-event.openURL("http://www.github.com",function(resp){ console.log(resp.result); });
-```
-
-## Component extension adaptation document（v0.19+）
-
-### 1. Description of change
-The WXDomObject and Layout engines are sunk into WeexCore using C++, and the WXDomObject in Java code has been removed. The 0.19 version of the upgrade involves interface changes to WXComponent and WXDomObject.
-
-#### (1) setMeasureFunction migrate
-The setMeasureFunction() method in WXDomObject was migrated to WXComponent:
-```java
-protected void setMeasureFunction(final ContentBoxMeasurement contentBoxMeasurement);
-```
-See: com.taobao.weex.layout.ContentBoxMeasurement.java
-
-Demo: WXText.java / setMeasureFunction()
-
-Note：ContentBoxMeasurement only supports leaf nodes.
-
-#### (2) WXComponent Interface change
-##### getDomObject [Delete]
-Since the WXDomObject sinks to WeexCore, the WXComponent's getDomObject() method has been removed.
-
-##### Constructor [Parameter change]
-The constructor of WXComponent removes the parameter of type WXDomObject, adds a parameter of type BasicComponentData, and the remaining parameters remain unchanged:
-
-```java
-public WXComponent(WXSDKInstance instance, WXVContainer parent, int type, BasicComponentData basicComponentData);
-public WXComponent(WXSDKInstance instance, WXVContainer parent, BasicComponentData basicComponentData);
-```
-
-
-#### （3）WXDomObject Interface change
-You can't access and inherit WXDomObject using Java code, (the ImmutableDomObject.java has also been removed), some of the methods in WXDomObject have been migrated to WXComponent if you need to use them:
-
-
-##### WXDomObject.getType() -> WXComponent.getComponentType() [Migrate]
-The getType() method in WXDomObject is used to get the type of Component (for example: list, div, text, img...). After migrating to WXComponent, it is renamed to:
-
-```java
-public String getComponentType();
-```
-
-##### Some methods for Layout results [Migrate]
-Migrating from WXDomObject to WXComponent:
-```java
-public float getCSSLayoutTop();
-public float getCSSLayoutBottom();
-public float getCSSLayoutLeft();
-public float getCSSLayoutRight();
-public float getLayoutWidth();
-public float getLayoutHeight();
-```
-Remove two obsolete interfaces:
-```java
-public float getLayoutY();
-public float getLayoutX();
-```
-
-## Component extend (< v0.19)
-
-1. Customize components must extend from WXComponent
-2. Use the `@WXComponentProp(name = value(value is attr or style))` annotation to let the update of attribute or style be recognized automatically.
-3. The access levels of method must be **public**
-4. Customize can not be obfuscated by tools like ProGuard
-5. Component method with the annotation of `@JSMethod` can
-7. Weex params can be int, double, float, String, Map, List, Array
-8. Register your Component by `WXSDKEngine.registerComponent`
-
-Refer to the following example
-
-```java
-public class RichText extends WXComponent<TextView> {
-
- public RichText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent) {
- super(instance, dom, parent);
- }
-
- @Override
- protected TextView initComponentHostView(@NonNull Context context) {
- TextView textView = new TextView(context);
- textView.setTextSize(22);
- textView.setTextColor(Color.BLACK);
- return textView;
- }
-
- @WXComponentProp(name = "tel")
- public void setTel(String telNumber) {
- getHostView().setText("tel: " + telNumber);
- }
-}
-```
-Register your Component：
-
-```java
-WXSDKEngine.registerComponent("richText", RichText.class);
-```
-
-Use this component in weex DSL：
-
-```html
-<template>
- <div>
- <richText tel="12305" style="width:200;height:100">12305</richText>
- </div>
-</template>
-```
-
-
-### Extend Component Method
- WeexSDK `(0.9.5+)` support the component method that can be invoked
- for example：
-
- ```java
- @JSMethod
- public void focus(){
- //method implementation
- }
- ```
- after your registration for your own custom component, now you can call it in your js file.
-
-```html
-<template>
- <mycomponent ref='mycomponent'></mycomponent>
-</template>
-<script>
- module.exports = {
- created: function() {
- this.$refs.mycomponent.focus();
- }
- }
-</script>
-```
-
-
-# Extend adapter
-
-## ImagedownloadAdapter
-
-Weex SDK has no image download capability, you need to implement `IWXImgLoaderAdapter`.
-
-Refer to the following example
-```java
-public class ImageAdapter implements IWXImgLoaderAdapter {
-
- public ImageAdapter() {
- }
-
- @Override
- public void setImage(final String url, final ImageView view,
- WXImageQuality quality, WXImageStrategy strategy) {
-
- WXSDKManager.getInstance().postOnUiThread(new Runnable() {
-
- @Override
- public void run() {
- if(view==null||view.getLayoutParams()==null){
- return;
- }
- if (TextUtils.isEmpty(url)) {
- view.setImageBitmap(null);
- return;
- }
- String temp = url;
- if (url.startsWith("//")) {
- temp = "http:" + url;
- }
- if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
- return;
- }
- Picasso.with(WXEnvironment.getApplication())
- .load(temp)
- .into(view);
- }
- },0);
- }
-}
-```
-## Proguard Rules
-
-If you want to using proguard to protect your source code, please add the following rules to your profile:
-
-```java
--keep class com.taobao.weex.WXDebugTool{*;}
--keep class com.taobao.weex.devtools.common.LogUtil{*;}
--keepclassmembers class ** {
- @com.taobao.weex.ui.component.WXComponentProp public *;
-}
--keep class com.taobao.weex.bridge.**{*;}
--keep class com.taobao.weex.dom.**{*;}
--keep class com.taobao.weex.adapter.**{*;}
--keep class com.taobao.weex.common.**{*;}
--keep class * implements com.taobao.weex.IWXObject{*;}
--keep class com.taobao.weex.ui.**{*;}
--keep class com.taobao.weex.ui.component.**{*;}
--keep class com.taobao.weex.utils.**{
- public <fields>;
- public <methods>;
- }
--keep class com.taobao.weex.view.**{*;}
--keep class com.taobao.weex.module.**{*;}
--keep public class * extends com.taobao.weex.common.WXModule{*;}
--keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}
--keep class * implements com.taobao.weex.ui.IExternalComponentGetter{*;}
-```
diff --git a/source/guide/extend-ios.md b/source/guide/extend-ios.md
deleted file mode 100644
index 4aa8303..0000000
--- a/source/guide/extend-ios.md
+++ /dev/null
@@ -1,351 +0,0 @@
----
-title: Extend iOS
-type: guide
-group: Extend
-order: 6.4
-version: 2.1
----
-
-<!-- toc -->
-
-> **NOTICE**: **All of the exported APIs in Weex are controllable and safe, they can not access private APIs or do any system hacks at runtime, neither can they change the primary purpose of the Application**.
->
-> **If you are extending your custom modules/components, be sure NOT to export the ability of Objective-C runtime, be sure NOT to export dynamic and uncontrolled methods such as `dlopen()`, `dlsym()`, `respondsToSelector:`, `performSelector:`, `method_exchangeImplementations()`, be sure NOT to export any private methods. **
-
-Weex SDK provides only rendering capabilities, rather than have other capabilities. There are some internal [components](../wiki/component-introduction.html), [modules](../wiki/module-introduction.html) and [handlers](../wiki/handler-introduction.html). If you want these features which weexSDK doesn't provide, you can to extend.
-> The following section we will extend iOS using Objective-C and here is [swift](./extend-module-using-swift.html).
-
-### extend custom module
-
- To extend your custom weex modules in iOS, you must make your class conform to `WXModuleProtocol` protocol, and then exports your method to javaScript using macro `WX_EXPORT_METHOD`,finally register your module with your class and a self-define module name.
-
-- basic
- we will custom a module to print params that javaScript give.
-
- 1. new a class derived from `NSObject` conforming `WXModuleProtocol` protocol
-
- 
-
- 2. add your module method and then exports using macro `WX_EXPORT_METHOD`
-
- 
-
- 3. register module after WeexSDK's initialization
-
- 
-
- by far, we've finished a basic custom module, and you may understand how to custom a weex module in iOS using Objective-C.
-
- We can use it in javaScript code like this:
-
- ```javaScript
- weex.requireModule("event").showParams("hello Weex)
- ```
-
-- advanced extendibility
-
- you must understand more in `WXModuleProtocol` protocol, we'll talk more about blueprint methods and properties in this protocol.
-
- 1. `weexInstance`
- The instance of `WXSDKInstance` holds the references of all modules created in a single page. if you add `@synthesize weexInstance` in your module class, your module will hold a reference to the instance of `WXSDKInstance` who create and initialize your module, or you get nothing. You can get more details by `weexInstance` such as pageName.
-
- 2. `targetExecuteThread`
- We will schedule your module method to main thread(UI thread), we highly recommend that you can not do much works here, if must, you can add implementation for this method. You can provide a thread so that we can schedule to.
-
- 3. `WXModuleKeepAliveCallback`
- Sometimes you can return your result to your caller, callback is important in this scene,the params for callback can be string or dictionary. You must specify a second params to keep your callback function id in js after used. We'll create a new function id every time callback, `NO` will be a better choice for memory.
-
- 4. `WX_EXPORT_METHOD_SYNC`
- > This feature only works on WeexSDK 0.10 and later. Synchronous method only works in JavaScript thread, you cannot do much works here.
- exports asynchronous method using `WX_EXPORT_METHOD`, you may get result in callback function.
- `WX_EXPORT_METHOD_SYNC` to export synchronous method. You can get result on the left of operand `=`.
-
-### extend custom component
-
-- new a class derived from `WXComponent` class
- if we do nothing in this class and then register to WeexSDK engine, its functionality is just like `div`.
-
-- override the lifecycle of `WXComponent`
-
- - `loadView`
- We will load a view for a component default, if you didn't override this method, supperclass will provide a `WXView` derived from `UIView`. If we want to load html or just to show a map, override `loadView` and provide a custom view is a good choice.
-
- ```
- - (UIView *)loadView {
- return [MKMapView new];
- }
- ```
- - `viewDidLoad`
- If you want to make some configurations for your custom view like set delegate, you can finish here.
- You don't need to set frame for your custom view if it doesn't has any subview, weexSDK will set it's frame according to style.
-
- ```
- - (void)viewDidLoad {
- ((MKMapView*)self.view).delegate = self;
- }
- ```
-- register component
-
- ```
- [WXSDKEngine registerComponent:@"map" withClass:[WXMapComponent class]];
- ```
-
- by far you can use your custom component in front-end
-
- ```html
- <template>
- <div>
- <map style="width:200px;height:200px"></map>
- </div>
- </template>
-```
-
-Weex engine has done some works to support common events and other attributes, if you want support your own attributes, let's continue.
-
-- custom events for your component
- Our target is that support `mapLoaded` event for the component we just implement, and then we can use in front-end directyly. The front-end code can be like this.
-
- ```html
- <template>
- <div>
- <map style="width:200px;height:200px" @mapLoaded="onMapLoaded"></map>
- </div>
- </template>
-
- <script>
- export default {
- methods: {
- onMapLoaded:function(e) {
- console.log("map loaded"+JSON.stringify(e))
- }
- }
- }
- </script>
-```
-we must save status for event added or not, so we add a `BOOL` member named `mapLoaded` for the component class to make it record, and when event map loaded, we can fire event according to this record.
-
-- custom event
- - override method add/remove event
-
- ```Objective-C
- - (void)addEvent:(NSString *)eventName {
- if ([eventName isEqualToString:@"mapLoaded"]) {
- _mapLoaded = YES;
- }
- }
-
- - (void)removeEvent:(NSString *)eventName
- {
- if ([eventName isEqualToString:@"mapLoaded"]) {
- _mapLoaded = NO;
- }
- }
- ```
- - fire event to front-end
- we'll fire `mapLoaded` event when map loaded finish according to our record.
- > do not forget to set delegate for MKMapView.
-
- ```object-c
- - (void)mapViewDidFinishLoadingMap:(MKMapView *)mapView {
- if (_mapLoaded) {
- [self fireEvent:@"mapLoaded" params:@{@"customKey":@"customValue"} domChanges:nil]
- }
- }
- ```
-
-We have finish our custom event, so what about custom attributes? this is the same important as custom events.
-
-- custom attributes
- The next target is that we add a custom attribute `showTraffic`, we can display real time traffic or not according to this attribute. The front-end code can be like the following.
-
-```html
- <template>
- <div>
- <map style="width:200px;height:200px" showTraffic="true"></map>
- </div>
- </template>
-```
-
- - override component init method `initWithRef...`
- add a `BOOL` member `showsTraffic` to make the status whether front-end user use the attribute or not record. We can get all the attribute for this component by override init method of component.
-
- ```object-c
- - (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]) {
-
- if (attributes[@"showsTraffic"]) {
- _showsTraffic = [WXConvert BOOL: attributes[@"showsTraffic"]];
- }
- }
- return self;
- }
- ```
- - set property for custom view.
- ```object-c
- - (void)viewDidLoad {
- ((MKMapView*)self.view).showsTraffic = _showsTraffic;
- }
- ```
- - support attribute updates
-
- ```object-c
- - (void)updateAttributes:(NSDictionary *)attributes
- {
- if (attributes[@"showsTraffic"]) {
- _showsTraffic = [WXConvert BOOL: attributes[@"showsTraffic"]];
- ((MKMapView*)self.view).showsTraffic = _showsTraffic;
- }
- }
- ```
-- more life cycle for component
-
-A Native Component has a life cycle managed by Weex. Weex creates it, layout it, renders it and destroys it.
-
-Weex offers component life cycle hooks that give you visibility into these key moments and the ability to act when they occur.
-
- | method | description |
- | :------------------: | ---------------------------------------- |
- | initWithRef:type:... | Initializes a new component using the specified properties. |
- | layoutDidFinish | Called when the component has just laid out. |
- | loadView | Creates the view that the component manages. |
- | viewWillLoad | Called before the load of component's view . |
- | viewDidLoad | Called after the component's view is loaded and set. |
- | viewWillUnload | Called just before releasing the component's view. |
- | viewDidUnload | Called when the component's view is released. |
- | updateStyles: | Called when component's style are updated. |
- | updateAttributes: | Called when component's attributes are updated. |
- | addEvent: | Called when adding an event to the component. |
- | removeEvent: | Called when removing an event frome the component. |
-
-### Component Method
-from WeexSDK `0.9.5`, you can define your component method by macro `WX_EXPORT_METHOD`
-for example:
-
-```
-@implementation WXMyComponent
- +WX_EXPORT_METHOD(@selector(focus))
- +- (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]) {
- // handle your attributes
- // handle your styles
- }
-
- return self;
- }
-
-
- - (void)focus
- {
- NSLog(@"you got it");
- }
-@end
-```
-
-after your registration for your own custom component, now you can call it in your js file.
-
-```html
-<template>
- <mycomponent ref='mycomponent'></mycomponent>
-</template>
-<script>
- module.exports = {
- created: function() {
- this.$refs.mycomponent.focus();
- }
- }
-</script>
-```
-
-### Fetch CSS styles of a WXComponent
-
-- Before v0.19, Weex used Yoga layout engine. You can access css styles via cssNode of WXCompoent. Such as
- ```
- self.cssNode->style.flex = 1.0;
- float height = self.cssNode->style.dimensions[CSS_HEIGHT]);
- ```
-
-- From v0.19, Weex replaced layout engine which is C++ codes. You can get css styles from styles dictionary of a WXComponent. You can also access flexCssNode property which is of type WeexCore::WXCoreLayoutNode, but must in .mm files.
-
-- From v0.20, WeexCore is imported to iOS, and css styles are never uploaded to WXComponent. The styles dictionary only contains non-css styles. We think that upper UI components should only care about final layout results generated by layout engine. If you still want to access css styles, you may use flexCssNode in .mm files or by extension methods provided in WXComponent+Layout.h.
-
- ```
-/**
- * @abstract Get css style value for key. The key should be of CSS standard form.
- * This method is for convenience use in C/ObjC environment. And if you want to
- * retrieve all style values or in C++, you could use flexCssNode directly.
- *
- * Thread usage:
- * This method should be invoked in component thread by WXPerformBlockOnComponentThread.
- * Note that all initWithRef methods of WXComponent and its subclasses are performed in
- * component thread by default. Therefore you can call this method directly in initWithRef.
- *
- * Supported keys:
- * width, height, min-width, min-height, max-width, max-height,
- * margin-(left/right/top/bottom)
- * padding-(left/right/top/bottom)
- * border-(left/right/top/bottom)-width
- * left, right, top, bottom
- * flex-grow
- */
-- (float)getCssStyleValueForKey:(NSString *)key;
-
-// Other methods which should also be used in component thread.
-- (WXCoreFlexDirection)getCssStyleFlexDirection;
-- (WXCoreFlexWrap)getCssStyleFlexWrap;
-- (WXCoreJustifyContent)getCssStyleJustifyContent;
-- (WXCoreAlignItems)getCssStyleAlignItems;
-- (WXCoreAlignSelf)getCssStyleAlignSelf;
-- (WXCorePositionType)getCssStylePositionType;
-- (NSString*)convertLayoutValueToStyleValue:(NSString*)valueName;
- ```
-
-### custom your handlers
-
-We don't provide functionality for downloading image but defines a blueprint of methods in `WXImgLoaderProtocol` for loading image, and image component get image content from these methods. You must implement methods in `WXImgLoaderProtocol` except the `optional` methods to display image from specified url.
-You can also define your own `protocol` and implement its handler.
-
-- new a class derived from `NSObject` conforming `WXImgLoaderProtocol` and then add implementation for methods in `WXImgLoaderProtocol`.
-
-> the flowing code may require SDWebImage as dependency, you can download remote url image by your own way without SDWebImage.
-
- ```object-c
- @implementation WXImgLoaderDefaultImpl
- - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock
- {
- if ([url hasPrefix:@"//"]) {
- url = [@"http:" stringByAppendingString:url];
- }
- return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
- } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
- if (completedBlock) {
- completedBlock(image, error, finished);
- }
- }];
- }
- @end
-```
-- register handler
- register handler by the method `registerHandler:withProtocol` in WXSDKEngine
-
- ```object-c
- WXSDKEngine.h
- /**
- * @abstract Registers a handler for a given handler instance and specific protocol
- * @param handler The handler instance to register
- * @param protocol The protocol to confirm
- */
- + (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
-
- [WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)]
-
- ```
-- use handler
- you can use your handle in any native code including `component`, `module` and other `handlers`
- ```object-c
- id<WXImgLoaderProtocol> imageLoader = [WXSDKEngine handlerForProtocol:@protocol(WXImgLoaderProtocol)];
- [iamgeLoader downloadImageWithURL:imageURl imageFrame:frame userInfo:customParam completed:^(UIImage *image, NSError *error, BOOL finished){
- }];
- ```
-
-
diff --git a/source/guide/extend-js-framework.md b/source/guide/extend-js-framework.md
deleted file mode 100644
index 4e75a0a..0000000
--- a/source/guide/extend-js-framework.md
+++ /dev/null
@@ -1,170 +0,0 @@
----
-title: Extend JS framework
-type: guide
-group: Extend
-order: 6.5
-version: 2.1
----
-
-<!-- toc -->
-
-# Extend JS framework
-
-This part of the extension of JS framework is still in the discussion, may be adjusted at any time, please pay attention.
-
-Weex wants to be able to respect as many developer development habits as possible.So, in addition to Weex official support Vue 2.0, the developer can also customize and horizontally extension their own or their favorite JS Framework.The steps to customize the JS Framework are as follows:
-
-+ First you have a complete set of JS Framework.
-+ Learn about Weex's JS engine feature support.
-+ Adapting Weex's native DOM APIs.
-+ Adapting Weex's initialization portal and multi-instance management mechanism.
-+ Add your own JS Framework to the framework configuration of the Weex JS runtime. Then pack it.
-+ Build JS bundles based on the JS Framework. You need to add a specific prefix comment so that the Weex JS runtime can recognize it.
-
-## Weex JS engine features support
-
-+ Under iOS, Weex uses the JavaScriptCore that comes with the system, so the ES support depends on the version of the operating system.
-The current conservative judgments, ES5 features on the market mainstream iOS devices are perfectly supported, but some of the features of ES6 + is not supported.
-
-+ Under Android, Weex uses the v8 kernel provided by UC. For performance and stability considerations, we are not using the latest version of the v8 kernel.The same conservative judgment, the ES5 feature can all support, including strict mode `Object.freeze` and so on.
-
-+ The Weex JS engine does not support HTML DOM APIs and HTML5 JS APIs, including `document`, `set`Timeout`, and so on.
-
-+ We added `Promise`'s polyfill, as well as the `console`'s polyfill.
-
-+ In addition, in order to ensure that the JS engine can manage memory as much as possible, we have a generic global object for the `Object.freeze ()` freeze operation, which includes:
-
- - `Object`
- - `Object.prototype`
- - `Array`
- - `Array.prototype`
- - `String.prototype`
- - `Number.prototype`
- - `Boolean.prototype`
- - `Error.prototype`
- - `Date.prototype`
- - `RegExp.prototype`
-
-## Adapt to Weex's initial entry and multi-instance management mechanism
-
-The JS Framework provided by the developer needs to be packaged as a **CommonJS** package, and the package needs to be extension to the following methods:
-
-### Framework initialization
-
-+ `init(config)`
- - `config`
- - `Document`
- - `Element`
- - `Comment`
- - `TaskSender`
- - `CallbackManager`
-
-This method places the Native DOM class and two auxiliary classes provided by Weex in the `config` parameter and allows the framework itself to be initialized.
-
-Tip: At the same time, the author can pass in a different `config` in the framework of the initialization time. This allows for framework testing or environmental simulation.
-
-#### Introduction to parameter format
-
-+ `TaskSender`: wip…
-+ `CallbackManager`: wip…
-
-### Register available native components and modules
-
-+ `registerComponents(components)`
-+ `registerModules(modules)`
-
-These two methods are called immediately after the frame is initialized. This framework will be able to know which components and modules the current client supports.
-
-#### Introduction to parameter format
-
-+ `components: Array`: Describe the array of components, each of which includes:
- + `type: string`: Component name, for example `div`。
- + `methods: string[]`: Optional, a list of method names supported by this component. These methods can follow the native DOM APIs call.
-+ `modules: Object`: Describe the hash table of a series of modules. Key is the module name, the value is an array. The elements of the array describe a method in the module. The information of the method includes:
- + `name: string`: Method name
- + `args: string[]`: Parameter number and type description
-
-**E.g:**
-
-```javascript
-registerComponents([
- { type: 'web', methods: ['goBack', 'goForward', 'refresh']}
-])
-registerModules({
- event: [
- {name: 'openURL', args: ['string']}
- ]
-})
-```
-
-### Multi - instance lifecycle management
-
-+ `createInstance(instanceId, code, config, data, env)`
-+ `refreshInstance(instanceId, data)`
-+ `destroyInstance(instanceId)`
-
-Each Weex page has two stages: created and destroyed. At the same time in the Weex page running process, native can send messages to the Weex page. Different frameworks can follow their own ideas to achieve the message.
-
-#### Introduction to parameter format
-
-+ `instanceId: string`: The unique id of the Weex page is generated by native.
-+ `code: string`:The Wex page's JS bundle's code is passed through native.
-+ `config: Object?`: The configuration information for the Wex page, such as the bundleUrl representing the bundle address, is generated by the native configuration. It has nothing to do with the contents of the JS bundle itself.
-+ `data: Object?`: Native can import an external data when creating a Weex page. The JS framework can also generate different page content for the same JS bundle with different data.
-+ `env: Object?`:The current environment information about the Weex page, the meaning of each field:
- - `info: Object`: Framework information, see the "JS Bundle format requirements" later.
- - `config: Object`:Equivalent to the third parameter of the method `config`
- - `callbacks: CallbackManager`: only `CallbackManager`instance of Weex page.
- - `created: number`:The number of seconds that the Wex page was created.
- - `framework: string`:The name of the framework used by the Wex page. Equivalent to `info.framework`.
-
-### Native communication
-
-+ `receiveTasks(instanceId, tasks)`
-
-Native can use the `refreshInstance` method to send a message to the JS framework layer. But in many cases will use `receiveTasks` to send user events or methods callback to the JS framework.
-
-For example, if the user clicks on a button, native will send a `fireEvent` type of task to the JS framework, and then the JS framework will handle the corresponding event logic. This part of the working mechanism is related to the design of the `addEvent` in the native DOM interface.
-
-Another example is the user using fetch to send network requests. When the request is done at the native end, it will be sent to the JS framework with a callback type of task. Since native can not pass the function in JavaScript, it actually only sends a callbackId to the JS framework. This part of the working mechanism is related to the design of CallbackManager.
-
-#### Auxiliary method
-
-+ `getRoot(instanceId): JSON`
-
-This method returns the full JSON description of the document body node. Developers can view the full native DOM tree as a result. The format of the specific return value is the same as the return method of the toJSON () method in the native DOM interface. This feature is used extensively as a developer tool extension.
-
-## Configure the JS Framework in WeexSDK
-### Prepare your JS Framework code
-
-```javascript
-// your-own-js-framework.js
-export function init (config) { ... }
-export function registerComponents (components) { ... }
-export function registerModules (modules) { ... }
-export function createInstance (id, code, config, data, env) { ... }
-export function destroyInstance (id) { ... }
-export function refreshInstance (id, data) { ... }
-export function recieveTasks (id, tasks) { ... }
-export function getRoot (id) { ... }
-```
-
-### Register a JS Framework
-
-```javascript
-import * as Vue from '...'
-import * as React from '...'
-import * as Angular from '...'
-export default { Vue, React, Angular };
-```
-And then packaged JS runtime, integrated into WeexSDK.
-
-#### JS Bundle format requirements
-
-**Framework info**
-The note(alias framework info) at the beginning of the JS Bundle file is very important. The format is as follows:
-
-```javascript
-// { "framework": "Vue" }
-```
-So that the Weex JS engine will know that the JS bundle needs to use the Vue framework to resolve.Similarly, Weex supports multiple frameworks.It will be based on js bundle notes to select the corresponding framework resolution.
diff --git a/source/guide/extend-module-using-swift.md b/source/guide/extend-module-using-swift.md
deleted file mode 100644
index 5d39a9f..0000000
--- a/source/guide/extend-module-using-swift.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: Extend iOS with swift
-type: guide
-group: Extend
-order: 6.4
-version: 2.1
----
-
-## Swift In Weex
-
-[Swift and Objective-C](https://developer.apple.com/library/ios/documentation/Swift/Conceptual/BuildingCocoaApps/MixandMatch.html#//apple_ref/doc/uid/TP40014216-CH10-ID122) mix-up
-
-a complete [demo](https://github.com/acton393/WeexSwiftSample.git)
-
-### extend module using swift
-
- As we export moudle method using macro and calling in runtime, so we can extend module using swift by `extension` `bjective-C` class.
- > You can also finish extending module by write an category for swift class in Objective-C class.
-
-- new `WXSwiftTestModule.h/m` and `WXSwiftTestModule.swift` file ，you will get a tip as follow during the creation
- 
- choose `Create Bridging Header`, as we need to access method in `Objective-C` in swift file, and the `Bridging header` can help us. And the format name of the header file is `yourTarget-Bridging-Header.h`, and mine is `WeexDemo-Bridging-Header.h`.
-
-- implementation in `WXSwiftTestModule.h/m`
- - WXSwiftTestModule.h
-
- ```
- #import <Foundation/Foundation.h>
- #import <WeexSDK/WeexSDK.h>
-
- @interface WXSwiftTestModule : NSObject <WXModuleProtocol>
-
- @end
-
- ```
- - WXSwiftTestModule.m
-
- you can search WeexDemo-Swift.h after building your project, Xcode will generate this file for us.
-
- for simulator the file path may be:
- ```
- weex/ios/playground/DerivedData/WeexDemo/Build/Intermediates/WeexDemo.build/Debug-iphonesimulator/WeexDemo.build/DerivedSources/WeexDemo-Swift.h
- ```
- export method define in swift file.
- ```
- #import "WXSwiftTestModule.h"
- #import "WeexDemo-Swift.h" // you need to import the header to make Objective-C code recognize the method defined in swift file.
-
- @implementation WXSwiftTestModule
- #pragma clang diagnostic push //forbid unknow selector warrning
- #pragma clang diagnostic ignored "-Wundeclared-selector"
-
- WX_EXPORT_METHOD(@selector(printSome:callback:)) //method name in Swift, you can get the final method name in `WeexDemo-Swift.h` as the convert of Xcode.
-
- #pragma clang diagnostic pop
-
- @end
-
- ```
-- in Swift
- make an extension for Objective-C class `WXSwiftTestModule`, add a method, and then export it in Objective-C, then we can use it in javaScript.
-
- - WXSwiftTestModule.swift
-
- ```
- import Foundation
- public extension WXSwiftTestModule {
- public func printSome(someThing:String, callback:WXModuleCallback) {
- print(someThing)
- callback(someThing)
- }
- }
- ```
-
- we need to expose `WXSwiftTestModule` `WXModuleCallback` in `WeexDemo-Bridging-Header` as our `Objective-C` need to access them
-
- - WeexDemo-Bridging-Header.h
-
- ```
- //
- // Use this file to import your target's public headers that you would like to expose to Swift.
- //
- #import "WXSwiftTestModule.h"
- #import "WeexSDK.h"
- ```
-
- by far we have finished our module using swift.
-
- ### module usage
- - register module to WeexSDK
-
- ```
- [WXSDKEngine registerModule:@"swifter" withClass:[WXSwiftTestModule class]];
-
- ```
- - front-end usage
-
- ```
- <template>
- <text>Swift Module</text>
- </template>
-
- <script>
- module.exports = {
- ready: function() {
- var swifter = weex.require('swifter');
- swifter.printSome("https://www.taobao.com",function(param){
- nativeLog(param);
- });
- }
-
- };
- </script>
- ```
diff --git a/source/guide/extend-web-render.md b/source/guide/extend-web-render.md
deleted file mode 100644
index 33899ce..0000000
--- a/source/guide/extend-web-render.md
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: Extend Web Renderer
-type: guide
-group: Extend
-order: 6.2
-version: 2.1
----
-
-<!-- toc -->
-
-# Extend Web components
-
-Vue.js is an independent front-end framework. In the browser, you can not use the Weex container for page rendering. So, the two things are the same: (1) for the Weex platform to expand Vue.js Web components. (2) directly using Vue.js to develop a Web component. The development of components can refer to its documentation: [component](https://vuejs.org/v2/guide/components.html). It is also recommended to use the `.vue` file to write components. How to use it: [Single file component](https://vuejs.org/v2/guide/single-file-components.html).
-
-# Extend Web renderer's built-in components
-
-Weex itself offers a lot of built-in components and modules, but also has the ability to expand horizontally. It allows developers to expand and customize themselves. But it is important to note that Weex is a cross-platform solution. When extending its built-in components or modules, you need to implement it on the three ends (Android, iOS, Web).
-
-After Weex switches the kernel to Vue 2.x, it will be easier to extend the Vue component on the Web side.
-
-We current use [weex-vue-render](https://github.com/weexteam/weex-vue-render) for Vue 2.x Web side rendering. Firstly import this library in your web page, then you can extend the render's built-in components using `weex.registerComponent` or `Vue.component`. Basically these two methods are doing the same thing.
-
-## Example of extension for weex built-in components.
-
-To extend `<sidebar>` as an example, you should first write the logic of the component itself:
-
-```html
-<!-- sidebar.vue -->
-<template>
- <div class="sidebar">
- <slot></slot>
- </div>
-</template>
-<style scoped>
- .sidebar {
- /* ... */
- }
-</style>
-<script>
- export default {
- props: [],
- data () {
- return {}
- }
- }
-</script>
-```
-
-And then register the `<sidebar>` component globally before using it:
-
-```javascript
-import Vue from 'vue'
-import weex from 'weex-vue-render'
-import Sidebar from './path/to/sidebar.vue'
-weex.init(Vue)
-// register the `<sidebar>` component globally
-weex.registerComponent('sidebar', Sidebar)
-// or:
-// Vue.component('sidebar', Sidebar)
-```
-
-When you extend the Weex component, if you only use the built-in components provided by Weex and use the styles that Weex supports, it is no different from the normal custom component and does not need to be implemented at the Native side.
-
-If you find a component that does not support labels and styles that are not supported by Weex, you will need to really extend the Weex component. At the same time, you also need to extend in the Android side and the iOS side, or will lead to rendering exception.
-
-# Extend the Web module
-
-In addition to the common components, Weex also provides a common module, you can easily call the native API. In general, the registered Weex module requires three ends to be implemented, otherwise it will affect its normal use.
-
-## Register the module
-
-If we import the `weex-vue-render` library, we can get the weex variable globally. You can register the module using the `registerModule`method.
-
-## API format
-
-+ `registerModule`
-
- 1. `name`: {String} Required, module name.
- 2. `define`: {Object} Required, module definition.
- 3. `meta`: {Object} Optional, module meta info. Basically you won't need this except you want to pass a non iterable attribute or method from your module implementation object. In this case you should pass a `{ registerType: 'assignment' }` object to it. Otherwise only the iterables will be registered in the module.
-
-## The example of register module
-
-The following code registers a module called guide:
-
-```javascript
-weex.registerModule('guide', {
- greeting () {
- console.log('Hello, nice to meet you. I am your guide.')
- },
- farewell () {
- console.log('Goodbye, I am always at your service.')
- }
-})
-```
-
-## Use the module
-
-Weex provides the require method for getting registered modules. You only need to pass the module name directly:
-
-```javascript
-//import module
-const guide = weex.requireModule('guide')
-// use the methods of module
-guide.greeting()
-guide.farewell()
-```
-
-The above wording is as useful as the native end, except that the methods in the module are provided by Native.
diff --git a/source/guide/front-end-frameworks.md b/source/guide/front-end-frameworks.md
deleted file mode 100644
index 2464a87..0000000
--- a/source/guide/front-end-frameworks.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Front-End Frameworks
-type: guide
-group: Overview
-order: 1.5
-version: 2.1
----
-
-<!-- toc -->
-
-
-
-## Front-end Frameworks in Weex
-
-Front-end technologies seem flourishing and productive. Using front-end frameworks in production is a good way to write maintainable apps.
-
-However, **Weex is not a front-end framework**. Indeed, front-end frameworks are just the syntax layer or DSL (Domain-specific Language) of Weex, they are decoupled from native render engines. In another word, Weex does not rely on any specific front-end frameworks. With the evolution of the technology, Weex can integrate more widely used front-end frameworks as well.
-
-Currently, Weex mainly supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/), and those frameworks are already integrated into Weex SDK, you don't need to require them manually.
-
-> **Learn some basics of Vue.js or Rax could be very helpful when you are using Weex.**
-
-It is better to learn some basics of Vue.js or Rax before using Weex.
-
-## Vue.js
-
-Weex integrated the v2 version of Vue.js since WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) is released at 2017/02/17. Vue (pronounced /vjuː/, like view) is a progressive front-end framework for building user interfaces. Please refer to its [official website](https://vuejs.org/) for more information.
-
-Please refer to [Use Vue.js on Weex](./use-vue.html) document to learn more technics about Weex and Vue.
-
-## Rax
-
-Rax is a front-end framework with React-compatible APIs.
-
-Please refer to [Rax's official website](https://alibaba.github.io/rax/) to get more information.
diff --git a/source/guide/images/different-switch.png b/source/guide/images/different-switch.png
deleted file mode 100644
index 7407743..0000000
--- a/source/guide/images/different-switch.png
+++ /dev/null
Binary files differ
diff --git a/source/guide/images/flow.png b/source/guide/images/flow.png
deleted file mode 100644
index c5a1b61..0000000
--- a/source/guide/images/flow.png
+++ /dev/null
Binary files differ
diff --git a/source/guide/images/native-component.png b/source/guide/images/native-component.png
deleted file mode 100644
index 9dd5550..0000000
--- a/source/guide/images/native-component.png
+++ /dev/null
Binary files differ
diff --git a/source/guide/images/toolkit-preview.png b/source/guide/images/toolkit-preview.png
deleted file mode 100644
index 5046052..0000000
--- a/source/guide/images/toolkit-preview.png
+++ /dev/null
Binary files differ
diff --git a/source/guide/images/vue-rax.png b/source/guide/images/vue-rax.png
deleted file mode 100644
index 1e6e57e..0000000
--- a/source/guide/images/vue-rax.png
+++ /dev/null
Binary files differ
diff --git a/source/guide/images/weex-example-yo.png b/source/guide/images/weex-example-yo.png
deleted file mode 100644
index 81e78c1..0000000
--- a/source/guide/images/weex-example-yo.png
+++ /dev/null
Binary files differ
diff --git a/source/guide/index.md b/source/guide/index.md
deleted file mode 100644
index 7dab9aa..0000000
--- a/source/guide/index.md
+++ /dev/null
@@ -1,183 +0,0 @@
----
-title: Getting Started
-type: guide
-group: Overview
-order: 1.1
-version: 2.1
----
-
-<!-- toc -->
-
-## What is Weex?
-
-> **Weex is a framework for building high-performance mobile applications with a modern web development experience.**
-
-Weex enables developers to use a modern web development experience to build Android, iOS, and web apps with a single codebase. In practice, you can use JavaScript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-
-The structure of Weex is decoupled; the render engines are separated from the syntax layer. Weex does not rely on any specific front-end framework, but it does mainly support [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
-
-A primary goal of Weex is to keep up with modern development technologies and platform capabilities, both for web and native applications. Productivity and performance can coexist in Weex. Writing Weex pages feels the same as writing web pages. In fact, rendering Weex pages is the same as rendering native pages.
-
-## Overview
-
-If you just want to try Weex, you do not need to install anything. There is an [online playground](http://dotwe.org/vue/) for Weex wherein you can write single page examples without any installation or configuration. The source code should be written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax (also known as `*.vue` files), and the rendered result from editor pane will be displayed in a mock phone shell.
-
-Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-
-
-
-This example renders the word "Yo" in the center of the screen. If you want to preview the rendered result on a mobile device, either install the [Weex playground app](/tools/playground.html) or integrate the Weex SDK into your own app, then scan your page's QR code with the app. This will load the URL with the Weex SDK.
-
-Within the `<template>` node in the source code, you will notice the `<div>` element—this generic HTML element also serves as the generic "container" element in Weex. The `<text>` component, however, is provided by Weex and is a block-level text container.
-
-> A raw text node can only be placed in a `<text>` component. Otherwise, it will be ignored.
-
-Within the `<style>` tag, you can write CSS to describe the styles of a component. Those styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) forcibly in Weex.
-
-### Native Components
-
-In the example above, the `<div>` and the `<text>` elements are rendered into corresponding native views on the mobile device. As such, they do not implement the `HTMLElement` interface.
-
-
-
-Weex implements render engines both on iOS and Android. It also provides a group of [built-in components](../references/components/) for basic usage. You can compose and wrap custom components using these basic components.
-
-**Note:** Although the components in Weex may **look** like HTML tags, you are not able to use the full suite of HTML elements; you are restricted to built-in components and your custom components.
-
-Behind the scenes, Weex uses native widgets. Although Weex emphasizes consistency on each mobile platform, we still embrace the platform's own behavior and UI differences. For example, [the `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS (the appearance on the web simulates iOS).
-
-
-
-If you want to use additional native components, other than the built-in components provided by Weex, you need to implement them on each platform and keep their behaviors consistent. The most practical way is to integrate the existing native components to Weex platform. /_ need explanation _/
-
-### Native Modules
-
-For those features that do not rely on the UI, Weex wraps them into **modules**. You can use `weex.requireModule('xxx')` to require them. Weex modules provide easy access to native capabilities in JavaScript, such as network, storage, clipboard, and navigator. For example, you can [use the `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
-Similarly, Weex provides a group of [built-in modules](../references/modules/) for basic usage, and supports the integration of existing native modules into the Weex platform.
-
-Here are some documents about how to extend native components and native modules for Weex:
-
-- [Extend Web Render](./extend-web-render.html)
-- [Extend Android](./extend-android.html)
-- [Extend iOS](./extend-ios.html)
-
-### Write Once, Run Everywhere
-
-Yes, Weex can build for Android, iOS, and Web apps from a single codebase.
-
-Using the same source code across different platforms improves development productivity, simplifies testing, and streamlines building and publishing. Weex combines front-end packaging and testing processes with those of mobile publishing and monitoring, dramatically improving development efficiency.
-
-> You can read _[How it works](../wiki/index.html)_ and _[Design Principles](../wiki/design-principles.html)_ to know more about the technologies and ideas behind Weex.
-
-Although Weex uses a single codebase, you can still write platform specific code. Weex provides `weex.config.env` and `WXEnvironment` (they are strictly equal) to get the current runtime environment. You can use `WXEnvironment.platform` to determine which platform the code is running on. Apart from the _platform,_ `WXEnvironment` contains other information pertaining to environment, such as _osVersion_ and _deviceModel_. Refer to _[Weex variable](../references/weex-variable.html)_ for the complete list.
-
-## Support For Multiple Front-End Frameworks
-
-Front-end frameworks are the syntax layer of Weex; therefore, they are decoupled from native render engines. Weex does not bind with any specific front-end frameworks. Instead, Weex brings native capabilities to the front-end.
-
-Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/) as its internal front-end frameworks.
-
-
-
-- **Vue.js** is a progressive front-end framework for building user interfaces.
-- **Rax** is a front-end framework with React-compatible APIs.
-
-> Vue.js and Rax are already integrated into Weex SDK, so you don't need to require them manually.
-
-However, Vue and Rax are not the only options. It is entirely possible to integrate your favorite front-end framework into Weex! The document _[Extend JS Framework](./extend-js-framework.html)_ describes how to integrate a different front-end framework. The process, however, is still complicated. You need to understand many underlying details about the js-native bridge and native render engines in order to successfully integrate an alternate front-end framework.
-
-Read _[Front-End Frameworks](./front-end-frameworks.html)_ for more details.
-
-## Create Your Own App
-
-> The following steps assume basic knowledge of Node.js and npm. If you are not familiar, you can visit [https://docs.npmjs.com/](https://docs.npmjs.com/) to learn more about npm, and [https://nodejs.org/en/docs/](https://nodejs.org/en/docs/) to learn more about Node.js.
-
-Weex provides a command line tool, the [weex-toolkit](/tools/toolkit.html), to help developers get started more easily. The CLI can help you create a starter project, set up iOS and Android development environments, debug, install plugins, and so on.
-
-Currently, `weex-toolkit` only supports the creation of Vue.js projects. The `rax-cli` may be helpful if you want to use Rax. Please visit [Rax's official website](https://alibaba.github.io/rax/) for more details.
-
-### Setup
-
-With [Node.js](https://nodejs.org/) installed, install `weex-toolkit` CLI globally.
-
-```bash
-npm install weex-toolkit -g
-```
-
-This will add the `weex` command to your global path, and will allow you to generate new projects with the `weex create <project-name>` command.
-Use `weex create` to create a starter project:
-
-```bash
-weex create awesome-app
-```
-
-After doing that, a standard **Weex + Vue.js** project will be generated inside the `awesome-app` folder in the current path.
-
-### Develop
-
-The next step is to navigate into the generated directory, install dependencies, and start:
-
-```bash
-cd awesome-app
-npm install
-npm start
-```
-
-`npm start` will start a web server on port `8081`. Open `http://localhost:8081` in your browser of choice to see the rendered result of your Weex app. The source code is located in the `src/` directory. You can develop it as a normal Vue.js project.
-
-
-
-Additionally, you can open `http://localhost:8081/web/preview.html` to preview the rendered result on the web in an iframe. You can also scan the QR code generated on the right using the [Weex playground app](/tools/playground.html) to see the rendered result on a mobile device.
-
-### Build and Run
-
-By default, the `weex create` command doesn't create an iOS or Android project, but you can use `weex platform add` to add them.
-
-```bash
-weex platform add ios # for iOS
-weex platform add android # for Android
-```
-
-Depending on your network environment, it may take a while to add them. Please be patient.
-
-In order to develop the app on your local machine, you need to set up a mobile development environment. For iOS, you should install [Xcode](https://developer.apple.com/xcode/). For Android, you should install [Android Studio](https://developer.android.com/studio/index.html). When the development environment is ready, run the commands below to launch your app on the simulator or on the device.
-
-```bash
-weex run ios
-weex run android
-weex run web
-```
-
-### Debug
-
-`weex-toolkit` can also be used to debug your mobile apps. Just run:
-
-```bash
-weex debug
-```
-
-Running `weex debug` will start a debug server and open a web page in Chrome (only supports the V8 engine). For technical details on `weex-toolkit`, please refer to the _[toolkit document](../tools/toolkit.html)_.
-
-## Next Steps
-
-At this point, you should have a general understanding of Weex. The next step is to explore and try the advanced features of Weex.
-
-If you want to use Weex right now:
-
-- [Integrate Weex to Your Existing App](./integrate-to-your-app.html)
-- [Set up Development Environment](./set-up-env.html)
-- [References](../references/)
-
-If you want to know more about the technologies and ideas behind Weex:
-
-- [How it Works](../wiki/index.html)
-- [Design Principles](../wiki/design-principles.html)
-- [Platform Differences between Weex and Web](../wiki/platform-difference.html)
-
-After getting acquainted with Weex, if you want to contribute to make it even better:
-
-- [Development Process](../development-process.html)
-- [How to Contribute](../contributing.html)
-
-Considering that Weex is a cross-stack technology, fundamental knowledge of front-end development, Vue.js, iOS, and Android will be especially helpful when contributing.
diff --git a/source/guide/integrate-devtool-to-android.md b/source/guide/integrate-devtool-to-android.md
deleted file mode 100644
index 0ea97a0..0000000
--- a/source/guide/integrate-devtool-to-android.md
+++ /dev/null
@@ -1,134 +0,0 @@
-# ---
-title: Integrate Devtool to Android
-type: guide
-group: Develop
-order: 5.4
-version: 2.1
----
-
-<!-- toc -->
-
-# Integrate Devtool to Android
-
-Weex devtools is a custom devtools for weex that implements Chrome Debugging Protocol inspired by Stetho, it is designed to help you quickly inspect your app and debug your JS bundle source in a Chrome web page. To make it work, at first you must integrate devtool to your App. This page will help you integrate devtool to your Android App.
-
-#### Version compatibility
-
-| weex sdk | weex inspector | Debugger Server |
-|----------|----------------|-----------------|
-| 0.13+ | 0.12+ | 0.2.39+ |
-| 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 | - |
-| 0.16.0+ | 0.12.1 | - |
-| 0.17.0+ | 0.13.2 | - |
-| 0.18.0+ | 0.13.4-multicontext | - |
-| 0.19.0+ | 0.18.68 | - |
-
-## Integrate to Android
-
-### Installing Dependencies
-
-Weex Devtools depend on `weex_inspector`. I strongly recommend you use the latest version since both Weex SDK and devtools are developed iteratively and rapidly.
-
-- From Gradle
-
- ```
- dependencies {
- compile 'com.taobao.android:weex_inspector:0.18.10'
- }
- ```
-
-- From Maven
-
-```
- <dependency>
- <groupId>com.taobao.android</groupId>
- <artifactId>weex_inspector</artifactId>
- <version>0.18.10</version>
- <type>pom</type>
- </dependency>
- ```
-
-
-- From source code
-
- you need to copy the dir of [inspector](https://github.com/weexteam/weex_devtools_android/tree/master/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`.
-
- ```gradle
- dependencies {
- compile project(':inspector')
- }
- ```
-
-- need include okhttp 2.3.0
-
- ```
- dependencies {
- compile 'com.squareup.okhttp:okhttp:2.3.0'
- compile 'com.squareup.okhttp:okhttp-ws:2.3.0'
- }
- ```
-
-### Adding Debug mode switch
-
-The easiest way is reuse the code of playground. On the other hand QR code is not necessary, if you review the source code you can draw a conclusion that QR CODE is just a way to set devtools server address. There are two examples of how to open debug modes in the Playground App:
-
- - Demo 1: Set the debug mode via `XXXApplication` <br>
-
-``` Java
-public class MyApplication extends Application {
- public void onCreate() {
- super.onCreate();
- initDebugEnvironment(true, "xxx.xxx.xxx.xxx"/*"DEBUG_SERVER_HOST"*/);
- //WXSDKEngine.reload();
- }
-}
-
-private void initDebugEnvironment(boolean enable, String host) {
- WXEnvironment.sRemoteDebugMode = enable;
- WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native";
-}
-```
-
- - Demo 2: Set the debug mode by scan QR code <br>
-
-``` Java
-if (WXEnvironment.isApkDebugable()) {
- String devToolUrl = uri.getQueryParameter("_wx_devtool");
- if (!TextUtils.isEmpty(devToolUrl)) {
- WXEnvironment.sRemoteDebugProxyUrl = devToolUrl;
- WXEnvironment.sDebugServerConnectable = true;
- WXSDKEngine.reload(XXXXX.getApplication(), false);
- }
-}
-```
- - Note：Auto refresh page via `ACTION_DEBUG_INSTANCE_REFRESH` broadcast
-
- `ACTION_DEBUG_INSTANCE_REFRESH` can be broadcast messages when the debug mode is switched or Chrome page refresh. You can use this mechanism to inform the current page to refresh in time.
-
-``` Java
-public class RefreshBroadcastReceiver extends BroadcastReceiver {
- @Override
- public void onReceive(Context context, Intent intent) {
- if (IWXDebugProxy.ACTION_INSTANCE_RELOAD.equals(intent.getAction()) ||
- IWXDebugProxy.ACTION_DEBUG_INSTANCE_REFRESH.equals(intent.getAction())) {
- Log.v(TAG, "connect to debug server success");
- if (mUri != null) {
- if (TextUtils.equals(mUri.getScheme(), "http") || TextUtils.equals(mUri.getScheme(), "https")) {
- String weexTpl = mUri.getQueryParameter(Constants.WEEX_TPL_KEY);
- String url = TextUtils.isEmpty(weexTpl) ? mUri.toString() : weexTpl;
- loadWXfromService(url);
- } else {
- loadWXfromLocal(true);
- }
- }
- }
- }
-}
-```
-
-
-## Known Issues
-
-You can report issues and bugs [here](https://github.com/weexteam/weex_devtools_android/issues). We will reply as soon as possible.
diff --git a/source/guide/integrate-devtool-to-ios.md b/source/guide/integrate-devtool-to-ios.md
deleted file mode 100644
index 888e4f7..0000000
--- a/source/guide/integrate-devtool-to-ios.md
+++ /dev/null
@@ -1,241 +0,0 @@
----
-title: Integrate Devtool to iOS
-type: guide
-group: Develop
-order: 5.5
-version: 2.1
----
-
-<!-- toc -->
-
-# Guide
-
-Weex devtools is a custom devtools for weex that implements Chrome Debugging Protocol inspired by Stetho, it is designed to help you quickly inspect your app and debug your JS bundle source in a Chrome web page. To make it work, at first you must integrate devtool to your App. This page will help you integrate devtool to your iOS App.
-
-- Integrate Devtool to iOS
-- Integrate Devtool to iOS
-
-
-# Integrate Devtool to iOS
-
-
-
-
-## Installing Dependencies
-
-There are two choices to install dependencies:
-
-#### No.1 From cocoapods
-
-```
-source https://github.com/CocoaPods/Specs.git，
-pod 'WXDevtool', '0.15.3', :configurations => ['Debug']，
-```
-
-I strongly recommend you use the latest version since both Weex SDK and devtools are developed iteratively and rapidly.
-
-#### No.2 From source code
-
-1. `git clone git@github.com:weexteam/weex-devtool-iOS.git`
-2. Copy source folder to your project.
-
- 
-
-3. Choose options as the picture shows.
-
- 
-
-## Integrate
-
-You can see the demo here [Playground App](https://github.com/weexteam/weex-devtool-iOS/blob/master/playground/WeexDemo/WXDemoViewController.m).
-
-### Step 1. Add header file in `AppDelegate.m`
-
-```
-//1. From cocoapods
-#import <TBWXDevtool/WXDevtool.h>
-
-//2. From source code
-#import "WXDevtool.h"
-```
-
-###Step 2. Initialize inspector when the APP launched
-
-You can see the WXDevtool header file as follows:
-
-```object-c
-
-+ (void)setDebug:(BOOL)isDebug;
-
-+ (BOOL)isDebug;
-
-+ (void)launchDevToolDebugWithUrl:(NSString *)url;
-
-@end
-```
-
-**Note: The inspector API must be called before weex is initialized **
-
-**if your application is a pure weex project, you need to ensure that the initial value of setDebug is `NO`, otherwise it may be white screen on the first page of the weex page**
-
-- `setDebug`
-
- `setDebug` is used to control the state of debug mode, when its value is `YES`, open the debug mode, otherwise closed.
-
-- `(void)launchDevToolDebugWithUrl:(NSString *)url;`
-
-
-You can fix the link address by command `weex debug --port 8888 --channelid 1`, and connect debug server like below:
-
-eg：
-
-```object-c
-
-- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
-
- [WXDevTool setDebug:NO];
- [WXDevTool launchDevToolDebugWithUrl:@"ws://{ip}:{port}/debugProxy/native/{channelid}"];
- }
-```
-
-### Step 3. Auto refresh
-
-Q: Why do we need auto refresh feature?
-
-A: As shown in future, when you click the debugger button, Javascript runtime environment will change from the phone (JavaScriptCore) to PC (Chrome V8), then Weex need to re-initialize the Weex environment, re-render the page. Page rendering is required for the developer to add on its own page.
-
-
-
-Q: What kind of scene need to add refresh feature?
-
-- Click debugger button
-- Switch remoteDebug
-- Refresh inspect page
-
-Q: How to add auto refresh feature?
-
-Register events when Weex initialization.
-
-```object-c
-[[NSNotificationCenter defaultCenter] addObserver:self selector:notificationRefreshInstance: name:@"RefreshInstance" object:nil];
-```
-
-**Notes: You must cancel this event in the `dealloc` method. For example:**
-
-```
-- (void)dealloc
-{
- [[NSNotificationCenter defaultCenter] removeObserver:self];
-}
-```
-
-For example, First you can destroy the current instance, and then re-create instance:
-
-
-```
-- (void)dealloc
-{
- [[NSNotificationCenter defaultCenter] removeObserver:self];
-}
-```
-
-destroy instance，and reCreate new instance，example:
-
-```
- - (void)render
- {
- CGFloat width = self.view.frame.size.width;
- [_instance destroyInstance];
- _instance = [[WXSDKInstance alloc] init];
- _instance.viewController = self;
- _instance.frame = CGRectMake(self.view.frame.size.width-width, 0, width, _weexHeight);
-
- __weak typeof(self) weakSelf = self;
- _instance.onCreate = ^(UIView *view) {
- [weakSelf.weexView removeFromSuperview];
- weakSelf.weexView = view;
- [weakSelf.view addSubview:weakSelf.weexView];
- UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, weakSelf.weexView);
- };
- _instance.onFailed = ^(NSError *error) {
-
- };
-
- _instance.renderFinish = ^(UIView *view) {
- [weakSelf updateInstanceState:WeexInstanceAppear];
- };
-
- _instance.updateFinish = ^(UIView *view) {
- };
- if (!self.url) {
- return;
- }
- NSURL *URL = [self testURL: [self.url absoluteString]];
- NSString *randomURL = [NSString stringWithFormat:@"%@?random=%d",URL.absoluteString,arc4random()];
- [_instance renderWithURL:[NSURL URLWithString:randomURL] options:@{@"bundleUrl":URL.absoluteString} data:nil];
-}
-```
-
-You can see the details in this case [WXDemoViewController.m](https://github.com/weexteam/weex-devtool-iOS/blob/master/Devtools/playground/WeexDemo/WXDemoViewController.m)
-
-
-# Usage with Debugger Server
-
-## Envirenment
-
-you need install `Debugger Server`
-
-```
-npm install -g weex-toolkit
-```
-
-launch DebugServer
-
-```
-weex debug
-```
-
-[《Get started》](../../guide/index.html)。then,browser will show a page with QR code，you can scan QR code to connect App and Server(PlayGround)
-
-
-## Partial function
-
-1. LogLevel - control weex log output level
-
- 
-
- LogLevel define
-
- ```
- Off = 0,
- Error = Error
- Warning = Error | Warning,
- Info = Warning | Info,
- Log = Log | Info,
- Debug = Log | Debug,
- All = NSUIntegerMax
- ```
-
-2. Vdom/Native tree choice
-
- 
-
- *picture 1*
-
- 
-
- *picture 2*
-
- Click native option on picture 1,then will show native tree and view property
-
- 
-
- *picture 3*
-
- 
-
- *picture 4*
-
- Click `vdom` on picture 3, show vdom tree and component property
-
-
diff --git a/source/guide/integrate-to-your-app.md b/source/guide/integrate-to-your-app.md
deleted file mode 100644
index cb5ae72..0000000
--- a/source/guide/integrate-to-your-app.md
+++ /dev/null
@@ -1,251 +0,0 @@
----
-title: Integrate to Your App
-type: guide
-group: Overview
-order: 1.3
-version: 2.1
----
-
-<!-- toc -->
-
-# Integrate to Your App
-
-## Integrate to Android Platform
-
-The following documents assume that you already have a certain Android development experience.
-
-
-### Quick Start Five Steps
-
-The keys to intergrating Weex into your Android application are the following five step:
-
-1. Configure Gradle dependency in build.gradle
-
-```javascript
-dependencies {
- ...
- // weex sdk and fastjson
- compile 'com.taobao.android:weex_sdk:0.18.0@aar'
- compile 'com.alibaba:fastjson:1.1.46.android'
-
- //support library dependencies
- compile 'com.android.support:recyclerview-v7:23.1.1'
- compile 'com.android.support:support-v4:23.1.1'
- compile 'com.android.support:appcompat-v7:23.1.1'
-}
-```
-
-2. Add required permissions in your AndroidManifest.xml
-
-```xml
-<uses-permission android:name="android.permission.INTERNET"/>
-<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
-<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
-<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
-```
-
-3. Init Weex SDK When Application Create
-
-```java
-public class WXApplication extends Application {
- @Override
- public void onCreate() {
- super.onCreate();
- InitConfig config = new InitConfig.Builder().setImgAdapter(new FrescoImageAdapter()).build();
- WXSDKEngine.initialize(this,config);
- }
-}
-```
-
-[Fresco ImageAdapter](https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/FrescoImageAdapter.java) [Picasso ImageAdapter](https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/ImageAdapter.java)
-
-4. Create an WXSDKInstance, add IWXRenderListener and activity lifecycle on it. load weex bundle url. when page load success; target view will be send for you on onViewCreated callback, set target view to activity contentView.
-
-```java
-public class MainActivity extends AppCompatActivity implements IWXRenderListener {
- WXSDKInstance mWXSDKInstance;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- mWXSDKInstance = new WXSDKInstance(this);
- mWXSDKInstance.registerRenderListener(this);
- /**
- * bundleUrl source http://dotwe.org/vue/38e202c16bdfefbdb88a8754f975454c
- */
- String pageName = "WXSample";
- String bundleUrl = "http://dotwe.org/raw/dist/38e202c16bdfefbdb88a8754f975454c.bundle.wx";
- mWXSDKInstance.renderByUrl(pageName, bundleUrl, null, null,WXRenderStrategy.APPEND_ASYNC);
- }
- @Override
- public void onViewCreated(WXSDKInstance instance, View view) {
- setContentView(view);
- }
- @Override
- public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
- }
- @Override
- public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
- }
- @Override
- public void onException(WXSDKInstance instance, String errCode, String msg) {
- }
- @Override
- protected void onResume() {
- super.onResume();
- if(mWXSDKInstance!=null){
- mWXSDKInstance.onActivityResume();
- }
- }
- @Override
- protected void onPause() {
- super.onPause();
- if(mWXSDKInstance!=null){
- mWXSDKInstance.onActivityPause();
- }
- }
- @Override
- protected void onStop() {
- super.onStop();
- if(mWXSDKInstance!=null){
- mWXSDKInstance.onActivityStop();
- }
- }
- @Override
- protected void onDestroy() {
- super.onDestroy();
- if(mWXSDKInstance!=null){
- mWXSDKInstance.onActivityDestroy();
- }
- }
-}
-```
-
-5. Run app, start activity, then you will see hello world demo. well done.
-
-[Hello World Demo Source](http://dotwe.org/vue/38e202c16bdfefbdb88a8754f975454c)
-
-Tip: Click QRCode Image in Demo Source Page, your will see compiled bundle js.
-
-## Integrated to iOS
-
-Through the [CocoaPods](https://cocoapods.org/) or [Carthage](https://github.com/Carthage/Carthage) integrated Weex iOS SDK to your project.
-First assume that you have finished installing the [iOS development environment](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html) and [CocoaPods](https://guides.cocoapods.org/using/getting-started.html)(or [Carthage](https://github.com/Carthage/Carthage#installing-carthage)).
-
-### Step 1: Add Dependencies
-
-Import Weex iOS SDK to your existing project, if not, you can create a new project according to the [tutorial](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html)).
-Before proceeding, make sure that the Podfile file is under the project file. If not, create one and open with text editor(if Carthage, please ensure the [`Cartfile`](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile) in your project directory). You can choose one of Integration method.
-
-- using [CocoaPods](https://cocoapods.org/)
- WeexSDK The latest version on cocoaPods can be obtained [here](https://cocoapods.org/pods/WeexSDK) .
- Add the following to the Podfile file:
-
- ```object-c
- source 'git@github.com:CocoaPods/Specs.git'
- target 'YourTarget' do
- platform :ios, '7.0'
- pod 'WeexSDK', '0.17.0' ## latest Weex SDK recommended
- end
- ```
- Open the command line, switch to the directory of the Podfile file, and run the pod install command. If there are no errors, it means that the environment has been configured.
-- using [Carthage](https://github.com/Carthage/Carthage)
- [here](https://github.com/apache/incubator-weex/tags) you can get the latest version of WeexSDK.
- Add `github "apache/incubator-weex"` to [`Cartfile`](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile)
- Open the command line, switch to the directory of the Cartfile, and run `carthage update`.
- [Add Carthage build framework to your project](https://github.com/Carthage/Carthage#adding-frameworks-to-an-application)
-
-
-### Step 2: Initialize the Weex environment
-
-In the AppDelegate.m file to do the initialization operation, usually in the didFinishLaunchingWithOptions method as follows to add.
-
-```object-c
-//business configuration
-[WXAppConfiguration setAppGroup:@"AliApp"];
-[WXAppConfiguration setAppName:@"WeexDemo"];
-[WXAppConfiguration setAppVersion:@"1.0.0"];
-//init sdk environment
-[WXSDKEngine initSDKEnvironment];
-//register custom module and component，optional
-[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];
-[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
-//register the implementation of protocol, optional
-[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
-//set the log level
-[WXLog setLogLevel: WXLogLevelAll];
-```
-
-### Step 3: Render weex Instance
-
-Weex supports both full page rendering and partial rendering. What you need to do is render Weex's view with the specified URL and add it to its parent container. The parent container is generally a viewController.
-
-```object-c
-#import <WeexSDK/WXSDKInstance.h>
-- (void)viewDidLoad
-{
- [super viewDidLoad];
- _instance = [[WXSDKInstance alloc] init];
- _instance.viewController = self;
- _instance.frame = self.view.frame;
- __weak typeof(self) weakSelf = self;
- _instance.onCreate = ^(UIView *view) {
- [weakSelf.weexView removeFromSuperview];
- weakSelf.weexView = view;
- [weakSelf.view addSubview:weakSelf.weexView];
- };
- _instance.onFailed = ^(NSError *error) {
- //process failure
- };
- _instance.renderFinish = ^ (UIView *view) {
- //process renderFinish
- };
- NSURL *url = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"js"];
- [_instance renderWithURL:url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
-}
-```
-
-WXSDKInstance is a very important class that provides a basic method and some callbacks, such as renderWithURL, onCreate, onFailed, etc., can be found in WXSDKInstance.h.
-
-### Step 4: Destroy Weex Instance
-
-In the dealloc phase of the viewController destroyed Weex instance, can play a role in avoiding memory leaks.
-
-```object-c
-- (void)dealloc
-{
- [_instance destroyInstance];
-}
-```
-
-#### Build your own WeexSDK.framework and Import to your project.
-
-The Weex SDK can be compiled from the source code. You can try the latest feature in the new feature or bugfix branch.
-
-- clone [Weex](https://github.com/apache/incubator-weex.git) project
- you can use SSH
-
- ```
- git clone git@github.com:apache/incubator-weex.git
- ```
- or use https
-
- ```
- git clone https://github.com/apache/incubator-weex.git
- ```
-
-- open WeexSDK.xcodeproj in `weex/ios/sdk`
- switch target just below
- 
-
-- Build this project or just use the xcode default hot key `⌘ + b`
-
-- Finally you can find `Products` directory in `weex/ios/sdk`, `WeexSDK.framework` was here
- 
-
-- Add `js-framework`(which is in the `WeexSDK.framework` and renamed to `native-bundle-main.js`) to your main bundle
- 
-- Import the framework you get above and import system framework
- 
-- add `-ObjC` to your project settings,just like this
-
diff --git a/source/guide/set-up-env.md b/source/guide/set-up-env.md
deleted file mode 100644
index f0959cb..0000000
--- a/source/guide/set-up-env.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: Setup Develop Environment
-type: guide
-group: Develop
-order: 5.1
-version: 2.1
----
-
-<!-- toc -->
-
-# Setup Develop Environment
-
-Using [dotWe](http://dotwe.org/vue) is a good choice, but if you want to develop locally on your own machine, you will need to set up your develop environment.
-
-You will need Node.js and the [Weex CLI](https://github.com/weexteam/weex-toolkit).
-
-Install Node.js using [nvm](https://github.com/creationix/nvm) (Simple bash script to manage multiple active Node.js versions). Run the following commands in a terminal after installing nvm:
-
-```bash
-$ nvm install 6.10.0
-$ nvm use 6.10.0
-```
-
-And `npm` comes with Node.js, with which you can install the Weex command line tools.
-
-> **NOTE: ** After upgrading the `weex-toolkit` to v1.0.8, the `npm-shrinkwrap.json` npm 5 specification has been added to lock the package dependencies, it is needed to upgrade your npm version to 5 above by command: `npm install npm@latest -g` if your version is lower than this, please check your npm version before using it.
-
-Run the following commands in a terminal:
-
-```bash
-$ npm install -g weex-toolkit
-$ weex -v
-```
-You can use 'weex update <component>@x.x.x' to update weex-devtool, weex-previewer, weex-builder and weexpack to a specific version.
-```
-weex update weex-devtool@latest // Here latest means to install the latest version
-```
-
-> **NOTE: ** If you receive an error like `permission error`, check out where permission problems occur, please delete the corresponding file and reinstall or run the `chmod -R 777 [path]` command to authorize.
-
-Then you can use the Weex command to verify if the installation is successful:
-
-
-
-### Generate a new Weex project
-
-Use the command line tool to generate a Weex project called "awesome-project". Run the following command in a terminal:
-
-```bash
-$ weex create awesome-project
-```
-
-Then enter the awesome-project folder, you will see a standard project skeleton has been generated.
-
-### Usage
-
-The `weex-toolkit` will prompt you whether to automatically run `npm install`, if not running, manually `cd` into the folder and run `npm install`.
-
-In the `awesome-project` folder, install dependencies with the following command:
-
-
-```bash
-npm start
-```
-
-It will open the preview server automaticly, if you just want to see the web site, you can visite `/index.html`, like `localhost:8081/index.html`.
-
-> **NOTE** When the port number is occupied, the port number may change, please pay attention to the console output.
-
-### Folder Structure
-
-```
-| —— configs
- | —— config.js global config of webpack
- | —— helper.js helper functions
- | —— logo.png
- | —— plugin.js script for compile plugins
- | —— utils.js tool functions
- | —— vue-loader.conf.js loader config of weex
- | —— webpack.common.conf.js webpack configuration for common environment
- | —— webpack.dev.conf.js webpack configuration for develop environment
- | —— webpack.prod.conf.js webpack configuration for production environment
- | —— webpack.test.conf.js webpack configuration for test environment
-| —— platforms
- | —— platforms.json platform meta data
-| —— plugins
- | —— plugins.json plugin data
-| —— src
- | —— entry.js the entry file of whole bundle
- | —— index.vue vue file source
-| —— test
- | —— unit
- | —— specs test scripts
- | —— index.js source code and config test environment
- | —— karma.conf.js configuration for karma
-| —— web static source
-| —— .babelrc configuration for babel-loader
-| —— android.config.json configuration for packing android project
-| —— ios.config.json configuration for packing ios project
-| —— npm-shrinkwrap.json npm dependence lock file
-| —— package.json
-| —— README.md
-| —— webpack.config.js entry file of the webpack command
-
-```
-
-For more technical details, please continue to read the next section. And don't forget to write and preview your codes at [dotWe](http://dotwe.org/vue).
diff --git a/source/guide/use-vue.md b/source/guide/use-vue.md
deleted file mode 100644
index fd6f401..0000000
--- a/source/guide/use-vue.md
+++ /dev/null
@@ -1,268 +0,0 @@
----
-title: Use Vue.js on Weex
-type: guide
-group: Overview
-order: 1.6
-version: 2.1
----
-
-<!-- toc -->
-
-Weex integrated the v2 version of Vue.js since WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) is released at 2017/02/17. Vue (pronounced /vjuː/, like view) is a progressive front-end framework for building user interfaces. Please refer to its [official website](https://vuejs.org/) for more information.
-
-> If there is no special instructions, the "Vue.js" or "Vue" in this article all refers to the v2 version of Vue.js.
-
-## Runtime-only Build
-
-If you are familiar with Vue.js, you should know that there are two available builds of Vue.js: [the **Runtime + Compiler** build and the **Runtime-only** build](https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build). The difference between them is whether to include the compiler which is able to compile the `template` option at runtime.
-
-Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, Weex is using the runtime-only build of Vue.js for better performance and less code size.
-
-Specifically, the differences are as follows:
-
-+ The [`template`](https://vuejs.org/v2/api/#template) option is not supported when defining a component.
-+ Does not support using [`x-templates`](https://vuejs.org/v2/guide/components.html#X-Templates).
-+ Does not support using [`Vue.compile`](https://vuejs.org/v2/api/#Vue-compile).
-
-## Platform Differences
-
-Vue.js was designed for the Web platform at the beginning. Although it can be based on Weex to develop native applications, there are still many [platform differences between Weex and web](../wiki/platform-difference.html).
-
-The key platform differences are context, DOM, styles and events.
-
-### Context
-
-Weex is mostly used to write multi-page applications, each page is a native *View* or *Activity* on mobile, and has its own context. In particular, the `Vue` instances are different in each pages, and even the "global" config of Vue (`Vue.config.xxx`) only affect the single page on Weex.
-
-On this basis, some SPA (single-page application) technologies of Vue, such as [Vuex](https://vuex.vuejs.org/en/) and [vue-router](https://router.vuejs.org/en/) will also take effect within the single page. More colloquially, the "page" concept is virtual in SPA technologies, but it is real on Weex.
-
-However, Vuex and vue-router are standalone libraries, they all have their own concept and usage scenario, you can still [use Vuex and vue-router](./advanced/use-vuex-and-vue-router.html) on Weex.
-
-### DOM
-
-Because there is no DOM (document object model) on Android and iOS, if you are manipulating and generating DOM elements manually, it may have some compatibility issues. It is a good practice to manipulate data and components instead of generated elements when you are using modern front-end frameworks.
-
-Some DOM-related features, such as `v-html`, `vm.$el`, `template` option, may not have the same behavior on different platforms.
-
-To be more specific, the type of [`vm.$el`](https://vuejs.org/v2/api/#vm-el) property is `HTMLElement` on the web, but it is not that type on mobile environments. Actually it's a special data structure defined by *Weex document object model*.
-
-### Styles
-
-The style sheet and CSS rules in managed by Weex js framework and native render engines. It would be very difficult and unnecessary to implement the whole CSSOM spec and support all CSS rules.
-
-For performance reasons, **Weex only support single class selector currently, and only support a subset of CSS Rules**. Please refer to *[common styles](../wiki/common-styles.html)* and *[text styles](../wiki/text-styles.html)* for more details.
-
-On Weex, styles are *[scoped](https://vue-loader.vuejs.org/en/features/scoped-css.html)* by force for each Vue component.
-
-### Events
-
-Event bubbling and capturing are not supported in Weex currently, therefore, [event modifiers](https://vuejs.org/v2/guide/events.html#Event-Modifiers) such as `.prevent`, ` .capture`, `.stop`, ` .self` are not supported on Weex native components.
-
-Moreover, the [keyboard event modifiers](https://vuejs.org/v2/guide/events.html#Key-Modifiers) and [system modifier keys](https://vuejs.org/v2/guide/events.html#System-Modifier-Keys), such as `.enter`, `.tab`, `.ctrl`, `.shift` mostly are meaningless on mobile device, which are also not supported in Weex.
-
-## The Web Renderer
-
-If you want to render your page on the web, you need to require the [weex-vue-render](https://github.com/weexteam/weex-vue-render) to achieve it.
-
-`weex-vue-render` is a web renderer for Vue DSL, it implemented the built-in components and built-in modules of Weex on the web. Please refer to [its repo](https://github.com/weexteam/weex-vue-render) for more details.
-
-## Single File Component
-
-[Single file component](https://vuejs.org/v2/guide/single-file-components.html) (as known as the `*.vue` files) of Vue is a special file format with a `.vue` extension. The template inside will be compiled into the `render` function at build time.
-
-Moreover, there are a good deals of [syntax highlight plugins](https://github.com/vuejs/awesome-vue#source-code-editing) for all kind of editors.
-
-> It's a good practice to use single file component syntax in Weex.
-
-### Compile Targets
-
-Because of the platform difference and to improve the performance on the web, the `*.vue` file should be compiled in two different ways:
-
-+ For the web platform, you can compile source files in any official way, such as [Webpack](https://webpack.js.org/) + [vue-loader](https://vue-loader.vuejs.org/en/) or Browserify + vueify.
-+ For Android and iOS platforms, you should use [weex-loader](https://github.com/weexteam/weex-loader) to compile the `*.vue` files.
-
-Use different bundles for different platforms is to make good use of the platform original features and reduce compatibility code at build time. But the source code is still the same, the only difference is the way to compile it.
-
-### Use weex-loader
-
-[weex-loader](https://github.com/weexteam/weex-loader) is a [loader](https://webpack.js.org/concepts/loaders/#using-loaders) for webpack that can transform `*.vue` file into a plain javascript module for Android and iOS platform. All features and configurations of it are same with [vue-loader](https://vue-loader.vuejs.org/en/).
-
-One thing should be noted that if the *entry* option of your Webpack config is a `*.vue` file, you also need to pass an additional `entry` parameter.
-
-```js
-const webpackConfig = {
- // Add the entry parameter for the .vue file
- entry: './path/to/App.vue?entry=true'
-
- /* ... */
-
- use: {
- loaders: [{
- // matches the .vue file path which contains the entry parameter
- test: /\.vue(\?^^]+)?$/,
- loaders: ['weex-loader']
- }]
- }
-}
-```
-
-**You don't need to write those additional parameters if you are using `.js` file as entry file.** It's a good practice to using javascript file as the entry file of webpack config.
-
-```Js
-{
- entry: './path/to/entry.js'
-}
-```
-
-## Supported Features
-
-### Global Config
-
-> The Vue "Global" config only affect the single page on Weex, the configuration will not be shared between different Weex pages.
-
-| Vue Global Config | Supported | Notes |
-| -------------- | --------- | ----- |
-| [Vue.config.silent](https://vuejs.org/v2/api/#silent) | <b class="tag-yes">Yes</b> | - |
-| [Vue.config.optionMergeStrategies](https://vuejs.org/v2/api/#optionMergeStrategies) | <b class="tag-yes">Yes</b> | - |
-| [Vue.config.devtools](https://vuejs.org/v2/api/#devtools) | <b class="tag-no">No</b> | Only supported on the web. |
-| [Vue.config.errorHandler](https://vuejs.org/v2/api/#errorHandler) | <b class="tag-yes">Yes</b> | - |
-| [Vue.config.warnHandler](https://vuejs.org/v2/api/#warnHandler) | <b class="tag-yes">Yes</b> | - |
-| [Vue.config.ignoredElements](https://vuejs.org/v2/api/#ignoredElements) | <b class="tag-yes">Yes</b> | Not Recommend. |
-| [Vue.config.keyCodes](https://vuejs.org/v2/api/#keyCodes) | <b class="tag-no">No</b> | Useless on the mobile. |
-| [Vue.config.performance](https://vuejs.org/v2/api/#performance) | <b class="tag-no">No</b> | Same with *devtools*. |
-| [Vue.config.productionTip](https://vuejs.org/v2/api/#productionTip) | <b class="tag-yes">Yes</b> | - |
-
-### Global API
-
-| Vue Global API | Supported | Notes |
-| -------------- | --------- | ----- |
-| [Vue.extend](https://vuejs.org/v2/api/#Vue-extend) | <b class="tag-yes">Yes</b> | - |
-| [Vue.nextTick](https://vuejs.org/v2/api/#Vue-nextTick) | <b class="tag-yes">Yes</b> | - |
-| [Vue.set](https://vuejs.org/v2/api/#Vue-set) | <b class="tag-yes">Yes</b> | - |
-| [Vue.delete](https://vuejs.org/v2/api/#Vue-delete) | <b class="tag-yes">Yes</b> | - |
-| [Vue.directive](https://vuejs.org/v2/api/#Vue-directive) | <b class="tag-yes">Yes</b> | - |
-| [Vue.filter](https://vuejs.org/v2/api/#Vue-filter) | <b class="tag-yes">Yes</b> | - |
-| [Vue.component](https://vuejs.org/v2/api/#Vue-component) | <b class="tag-yes">Yes</b> | - |
-| [Vue.use](https://vuejs.org/v2/api/#Vue-use) | <b class="tag-yes">Yes</b> | - |
-| [Vue.mixin](https://vuejs.org/v2/api/#Vue-mixin) | <b class="tag-yes">Yes</b> | - |
-| [Vue.version](https://vuejs.org/v2/api/#Vue-version) | <b class="tag-yes">Yes</b> | - |
-| [Vue.compile](https://vuejs.org/v2/api/#Vue-compile) | <b class="tag-no">No</b> | Weex is using the [runtime-only build](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only). |
-
-### Options
-
-| Vue Option | Supported | Notes |
-| ---------- | --------- | ----- |
-| [data](https://vuejs.org/v2/api/#data) | <b class="tag-yes">Yes</b> | - |
-| [props](https://vuejs.org/v2/api/#props) | <b class="tag-yes">Yes</b> | - |
-| [propsData](https://vuejs.org/v2/api/#propsData) | <b class="tag-yes">Yes</b> | - |
-| [computed](https://vuejs.org/v2/api/#computed) | <b class="tag-yes">Yes</b> | - |
-| [methods](https://vuejs.org/v2/api/#methods) | <b class="tag-yes">Yes</b> | - |
-| [watch](https://vuejs.org/v2/api/#watch) | <b class="tag-yes">Yes</b> | - |
-| [el](https://vuejs.org/v2/api/#el) | <b class="tag-yes">Yes</b> | The value of `el` is meaningless on the mobile. |
-| [template](https://vuejs.org/v2/api/#template) | <b class="tag-no">No</b> | Weex is using the [runtime-only build](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only). |
-| [render](https://vuejs.org/v2/api/#render) | <b class="tag-yes">Yes</b> | Not Recommend. |
-| [renderError](https://vuejs.org/v2/api/#renderError) | <b class="tag-yes">Yes</b> | - |
-| [directives](https://vuejs.org/v2/api/#directives) | <b class="tag-yes">Yes</b> | - |
-| [filters](https://vuejs.org/v2/api/#filters) | <b class="tag-yes">Yes</b> | - |
-| [components](https://vuejs.org/v2/api/#components) | <b class="tag-yes">Yes</b> | - |
-| [parent](https://vuejs.org/v2/api/#parent) | <b class="tag-yes">Yes</b> | Not Recommend. |
-| [mixins](https://vuejs.org/v2/api/#mixins) | <b class="tag-yes">Yes</b> | - |
-| [extends](https://vuejs.org/v2/api/#extends) | <b class="tag-yes">Yes</b> | - |
-| [provide/inject](https://vuejs.org/v2/api/#provide-inject) | <b class="tag-yes">Yes</b> | Not Recommend. |
-| [name](https://vuejs.org/v2/api/#name) | <b class="tag-yes">Yes</b> | - |
-| [delimiters](https://vuejs.org/v2/api/#delimiters) | <b class="tag-yes">Yes</b> | Not Recommend. |
-| [functional](https://vuejs.org/v2/api/#functional) | <b class="tag-yes">Yes</b> | - |
-| [model](https://vuejs.org/v2/api/#model) | <b class="tag-yes">Yes</b> | - |
-| [inheritAttrs](https://vuejs.org/v2/api/#inheritAttrs) | <b class="tag-yes">Yes</b> | - |
-| [comments](https://vuejs.org/v2/api/#comments) | <b class="tag-no">No</b> | - |
-
-### Lifecycle Hooks
-
-Instance lifecycle hooks of Vue components will be emitted at particular stages, refer to the [lifecycle diagram](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram) of Vue component for more details.
-
-| Vue Lifecycle Hook | Supported | Notes |
-| ------------------ | --------- | ----- |
-| [beforeCreate](https://vuejs.org/v2/api/#beforeCreate) | <b class="tag-yes">Yes</b> | - |
-| [created](https://vuejs.org/v2/api/#created) | <b class="tag-yes">Yes</b> | - |
-| [beforeMount](https://vuejs.org/v2/api/#beforeMount) | <b class="tag-yes">Yes</b> | - |
-| [mounted](https://vuejs.org/v2/api/#mounted) | <b class="tag-yes">Yes</b> | Not exactly the same with web, because there is no actually DOM in Weex. |
-| [beforeUpdate](https://vuejs.org/v2/api/#beforeUpdate) | <b class="tag-yes">Yes</b> | - |
-| [updated](https://vuejs.org/v2/api/#updated) | <b class="tag-yes">Yes</b> | - |
-| [activated](https://vuejs.org/v2/api/#activated) | <b class="tag-no">No</b> | Not support `<keep-alive>` yet. |
-| [deactivated](https://vuejs.org/v2/api/#deactivated) | <b class="tag-no">No</b> | Not support `<keep-alive>` yet. |
-| [beforeDestroy](https://vuejs.org/v2/api/#beforeDestroy) | <b class="tag-yes">Yes</b> | - |
-| [destroyed](https://vuejs.org/v2/api/#destroyed) | <b class="tag-yes">Yes</b> | - |
-| [errorCaptured](https://vuejs.org/v2/api/#errorCaptured) | <b class="tag-yes">Yes</b> | New in Vue 2.5.0+, Weex SDK 0.18+ |
-
-### Instance Properties
-
-| Vue Instance Property | Supported | Notes |
-| --------------------- | --------- | ----- |
-| [vm.$data](https://vuejs.org/v2/api/#vm-data) | <b class="tag-yes">Yes</b> | - |
-| [vm.$props](https://vuejs.org/v2/api/#vm-props) | <b class="tag-yes">Yes</b> | - |
-| [vm.$el](https://vuejs.org/v2/api/#vm-el) | <b class="tag-yes">Yes</b> | The value is not `HTMLElement` on the mobile. |
-| [vm.$options](https://vuejs.org/v2/api/#vm-options) | <b class="tag-yes">Yes</b> | - |
-| [vm.$parent](https://vuejs.org/v2/api/#vm-parent) | <b class="tag-yes">Yes</b> | - |
-| [vm.$root](https://vuejs.org/v2/api/#vm-root) | <b class="tag-yes">Yes</b> | - |
-| [vm.$children](https://vuejs.org/v2/api/#vm-children) | <b class="tag-yes">Yes</b> | - |
-| [vm.$slots](https://vuejs.org/v2/api/#vm-slots) | <b class="tag-yes">Yes</b> | - |
-| [vm.$scopedSlots](https://vuejs.org/v2/api/#vm-scopedSlots) | <b class="tag-yes">Yes</b> | - |
-| [vm.$refs](https://vuejs.org/v2/api/#vm-refs) | <b class="tag-yes">Yes</b> | - |
-| [vm.$isServer](https://vuejs.org/v2/api/#vm-isServer) | <b class="tag-yes">Yes</b> | Always `false`. |
-| [vm.$attrs](https://vuejs.org/v2/api/#vm-attrs) | <b class="tag-yes">Yes</b> | - |
-| [vm.$listeners](https://vuejs.org/v2/api/#vm-listeners) | <b class="tag-yes">Yes</b> | - |
-
-### Instance Methods
-
-| Vue Instance Method | Supported | Notes |
-| ------------------- | --------- | ----- |
-| [vm.$watch()](https://vuejs.org/v2/api/#vm-watch) | <b class="tag-yes">Yes</b> | - |
-| [vm.$set()](https://vuejs.org/v2/api/#vm-set) | <b class="tag-yes">Yes</b> | - |
-| [vm.$delete()](https://vuejs.org/v2/api/#vm-delete) | <b class="tag-yes">Yes</b> | - |
-| [vm.$on()](https://vuejs.org/v2/api/#vm-on) | <b class="tag-yes">Yes</b> | - |
-| [vm.$once()](https://vuejs.org/v2/api/#vm-once) | <b class="tag-yes">Yes</b> | - |
-| [vm.$off()](https://vuejs.org/v2/api/#vm-off) | <b class="tag-yes">Yes</b> | - |
-| [vm.$emit()](https://vuejs.org/v2/api/#vm-emit) | <b class="tag-yes">Yes</b> | - |
-| [vm.$mount()](https://vuejs.org/v2/api/#vm-mount) | <b class="tag-no">No</b> | You don't need to mount Vue instance manually. |
-| [vm.$forceUpdate()](https://vuejs.org/v2/api/#vm-forceUpdate) | <b class="tag-yes">Yes</b> | - |
-| [vm.$nextTick()](https://vuejs.org/v2/api/#vm-nextTick) | <b class="tag-yes">Yes</b> | - |
-| [vm.$destroy()](https://vuejs.org/v2/api/#vm-destroy) | <b class="tag-yes">Yes</b> | - |
-
-### Directives
-
-| Vue Directive | Supported | Notes |
-| ------------- | --------- | ----- |
-| [v-text](https://vuejs.org/v2/api/#v-text) | <b class="tag-yes">Yes</b> | - |
-| [v-html](https://vuejs.org/v2/api/#v-html) | <b class="tag-no">No</b> | No HTML parser in Weex, and it is not good practice. |
-| [v-show](https://vuejs.org/v2/api/#v-show) | <b class="tag-no">No</b> | Not support `display: none;` yet. |
-| [v-if](https://vuejs.org/v2/api/#v-if) | <b class="tag-yes">Yes</b> | - |
-| [v-else](https://vuejs.org/v2/api/#v-else) | <b class="tag-yes">Yes</b> | - |
-| [v-else-if](https://vuejs.org/v2/api/#v-else-if) | <b class="tag-yes">Yes</b> | - |
-| [v-for](https://vuejs.org/v2/api/#v-for) | <b class="tag-yes">Yes</b> | - |
-| [v-on](https://vuejs.org/v2/api/#v-on) | <b class="tag-yes">Yes</b> | Not support [event modifiers](https://vuejs.org/v2/guide/events.html#Event-Modifiers). |
-| [v-bind](https://vuejs.org/v2/api/#v-bind) | <b class="tag-yes">Yes</b> | - |
-| [v-model](https://vuejs.org/v2/api/#v-model) | <b class="tag-yes">Yes</b> | - |
-| [v-pre](https://vuejs.org/v2/api/#v-pre) | <b class="tag-yes">Yes</b> | - |
-| [v-cloak](https://vuejs.org/v2/api/#v-cloak) | <b class="tag-no">No</b> | Only support single class selector. |
-| [v-once](https://vuejs.org/v2/api/#v-once) | <b class="tag-yes">Yes</b> | - |
-
-### Special Attributes
-
-| Vue Special Attribute | Supported | Notes |
-| --------------------- | --------- | ----- |
-| [key](https://vuejs.org/v2/api/#key) | <b class="tag-yes">Yes</b> | - |
-| [ref](https://vuejs.org/v2/api/#ref) | <b class="tag-yes">Yes</b> | - |
-| [slot](https://vuejs.org/v2/api/#slot) | <b class="tag-yes">Yes</b> | - |
-| [slot-scope](https://vuejs.org/v2/api/#slot-scope) | <b class="tag-yes">Yes</b> | New in Vue 2.5.0+, Weex SDK 0.18+ |
-| [scope](https://vuejs.org/v2/api/#scope) | <b class="tag-yes">Yes</b> | Not Recommend. |
-| [is](https://vuejs.org/v2/api/#is) | <b class="tag-yes">Yes</b> | - |
-
-### Built-In Components
-
-| Vue Built-In Component | Supported | Notes |
-| ---------------------- | --------- | ----- |
-| [component](https://vuejs.org/v2/api/#component) | <b class="tag-yes">Yes</b> | - |
-| [transition](https://vuejs.org/v2/api/#transition) | <b class="tag-no">No</b> | The concept of *enter* and *leave* maybe different on the mobile, and Weex does not support `display: none;` yet. |
-| [transition-group](https://vuejs.org/v2/api/#transition-group) | <b class="tag-no">No</b> | Same with *transition*. |
-| [keep-alive](https://vuejs.org/v2/api/#keep-alive) | <b class="tag-no">No</b> | Native components on the mobile can not be cached at front-end. |
-| [slot](https://vuejs.org/v2/api/#slot) | <b class="tag-yes">Yes</b> | - |
diff --git a/source/index.md b/source/index.md
deleted file mode 100644
index ee7bdcd..0000000
--- a/source/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
-layout: index
-type: index
-subtitle: 快速、简洁且高效
----
\ No newline at end of file
diff --git a/source/references/android-apis.md b/source/references/android-apis.md
deleted file mode 100644
index e262b39..0000000
--- a/source/references/android-apis.md
+++ /dev/null
@@ -1,218 +0,0 @@
----
-title: Android APIs
-type: references
-group: API
-order: 2.2
-version: 2.1
----
-
-# Android APIs
-
-## WXSDKEngine
-
-1. Register the module and component
-1. Set up various adapters
-
-### Module & Component
-#### Component
-One can register a component using the following function:
-
- public static boolean registerComponent(IFComponentHolder holder, boolean appendTree, String ... names)
-
-* holder is a abstract factory designed for create Component, and SimpleComponentHolder is the a simple way to achieve IFComponentHolder.
-* appendTree is an additional flag which is unused now.
-* names is the component's name in front end template file. A Android component could be mapped into multiple names.
-
-#### Module
-One can register a module using the following way:
-
- public static <T extends WXModule> boolean registerModule(String moduleName, Class<T> moduleClass,boolean global) throws WXException
-
-* moduleName is the name in front end template.
-* moduleClass is the Java class of the module, which provide a constructor with an empty parameter.
-* global is a flag, true for singleton in the whole app, false for creating an object for each WXSDKIntance.
-
-### Adapter
-#### ImageAdapter
-Image adapter is responsible for loading images according to URLs. There are two types of image adapter:
-1. Loading a image to a view according to URL.
-1. Loading a image to a specified object according to URL.
-
-In order to use image component, one must implement the first adapter, while the second adapter is optional.
-
-##### IWXImgLoaderAdapter
-
- public interface IWXImgLoaderAdapter {
- void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy);
- }
-
- * `WXImageQuality` that the quality of the picture variables, take the following values `LOW`, `NORMAL`, `HIGH`, `ORIGINAL` picture quality in turn higher. The default is `LOW`.
- * `WXImageStrategy` is an extension class that indicates whether the image can be cut (isClipping) sharpening (isSharpen) placeholder (placeHolder) and so on.
-
-##### IDrawableLoaderAdapter
-This adapter is optional.
-
- void setDrawable(String url, DrawableTarget drawableTarget, DrawableStrategy drawableStrategy);
-
-* `DrawableTarget` is a object into where will load an image. `DrawableTarget` is one of `StaticTarget` or `AnimatedTarget`.
-
-#### IWXHttpAdapter
-
-Weex custom `WXRequest` and `OnHttpListener`, Native reload interface can be obtained from the Request URL, Header and other parameters, the network request can be completed through `OnHttpListener` callback notification. Weex provides the default network request: `DefaultWXHttpAdapter`, using `HttpURLConnection` for network requests.
-
-The interface is defined as follows:
-
- public interface IWXHttpAdapter {
- void sendRequest(WXRequest request, OnHttpListener listener);
- }
-
-* `WXRequest` defines the parameters related to the network request, the request method, the request body, and the timeout time. Weex default timeout is 3000.
-
-* `OnHttpListener` defines the corresponding method after the network request ends. Defined as follows:
-
- interface OnHttpListener {
-
- /**
- * start request
- */
- void onHttpStart();
-
- /**
- * headers received
- */
- void onHeadersReceived(int statusCode,Map<String,List<String>> headers);
-
- /**
- * post progress
- * @param uploadProgress
- */
- void onHttpUploadProgress(int uploadProgress);
-
- /**
- * response loaded length (bytes), full length should read from headers (content-length)
- * @param loadedLength
- */
- void onHttpResponseProgress(int loadedLength);
-
- /**
- * http response finish
- * @param response
- */
- void onHttpFinish(WXResponse response);
- }
-
-#### IWXUserTrackAdapter
-Weex related performance data (first screen loading time, JS-Native communication time, dom update time, etc.) and other general information (JSLib file size, Weex SDK version number, etc.).
-
- public interface IWXUserTrackAdapter {
- void commit(Context context, String eventId, String type, WXPerformance perf, Map<String, Serializable> params);
- }
-
-Native implementation interface can be obtained through `WXPerformance` and `params` corresponding information.
-
-#### IActivityNavBarSetter
-Weex provided the ability of navigation through `WXNavigatorModule` which relys on IActivityNavBarSetter.
-
-Usage:
-
- WXSDKEngine.setActivityNavBarSetter(new IActivityNavBarSetter(){});
-
-#### IWXStorageAdapter
-Weex provided the ability of local storage through `WXStorageModule` which depends on IWXStorageAdapter. One can use `DefaultWXStorage` as the default implementation of IWXStorageAdapter.
-
-
-#### IWXJSExceptionAdapter
-IWXJSExceptionAdapter is used to handle JavaScript exception.
-
-## WXSDKInstace
-### Weex Native and JavaScript communication.
-
-#### Custom events
-Used for a custom control for event notifications, such as custom click events, response drop events, and so on.
-
-`WXSDKInstance.java `
-
- public void fireEvent(String elementRef,final String type, final Map<String, Object> data,final Map<String, Object> domChanges){ }
-
- public void fireEvent(String elementRef,final String type, final Map<String, Object> data){
- fireEvent(elementRef,type,data,null);
- }
-
- public void fireEvent(String elementRef, String type){
- fireEvent(ref,type,new HashMap<String, Object>());
- }
-
-* `elementRef`：The event occurred for the control ID。
-
-* `type`: Custom events, Weex defaults to a custom event starting with onXxxxx. OnPullDown (drop-down event)
-
-* `data`: Need to reveal the parameters, such as the current control of the size, coordinates and other information。
-
-* `domChanges`：Update ref for the control's Attribute and Style
-
-#### Event callback
-Used for Module callback, for example, after the completion of positioning Module need to notify JS. Use as follows:
-
- public class WXLocation extends WXModule {
-
- @JSMethod
- public void getLocation(JSCallback callback){
- //Get the code for the location information .....
- Map<String,String> data=new HashMap<>();
- data.put("x","x");
- data.put("y","y");
- //notify once
- callback.invoke(data);
- //Continuous connection
- callback.invokeAndKeepAlive(data);
- //Invoke method and invokeAndKeepAlive two methods of choice }
- }
-
-### Weex Native and other Native code communication
-#### OnWXScrollListener
-Weex gets the scroll event You can register `registerOnWXScrollListener` via `WXSDKInstance`
-The interface is defined as follows:
-
- public interface OnWXScrollListener {
-
- /**
- * The view is not currently scrolling.
- */
- int IDLE = RecyclerView.SCROLL_STATE_IDLE;
- /**
- * The view is currently being dragged by outside input such as user touch input.
- */
- int DRAGGING = RecyclerView.SCROLL_STATE_DRAGGING;
- /**
- * The view is currently animating to a final position while not under
- * outside control.
- */
- int SETTLING = RecyclerView.SCROLL_STATE_SETTLING;
-
- /**
- * Callback method to be invoked when the view has been scrolled. This will be
- * called after the scroll has completed.
- * <p>
- * This callback will also be called if visible item range changes after a layout
- * calculation. In that case, dx and dy will be 0.
- *
- */
- void onScrolled(View view, int x, int y);
-
- /**
- * Callback method to be invoked when view's scroll state changes.
- *
- */
- void onScrollStateChanged(View view, int x, int y, int newState);
- }
-
-## Other Introduction
-### setSize
-
-You can use the `mWXSDKInstance.setSize()` method to change the size of the Weex container.
-
-### Downgrade
-
-Weex in the development stage will add some new features and new methods, but these new features and functions must be upgraded to achieve the SDK, for the application should not be upgraded how to deal with it? You can use the downgrade feature.
-
-Native can be handled by the `onException` method in interface `IWXRenderListener`, and if it is an active demoulding errCode is a character that is divided by "|". "|" The preceding character is 1 for active demotion, and the Native side can jump to the corresponding H5 page. Or otherwise prompted the user's current environment does not support Weex.
diff --git a/source/references/broadcast-channel.md b/source/references/broadcast-channel.md
deleted file mode 100644
index 13628d1..0000000
--- a/source/references/broadcast-channel.md
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: BroadcastChannel
-type: references
-group: API
-order: 2.8
-version: 2.1
----
-
-<!-- toc -->
-
-> The `BroadcastChannel` is available since <span class="api-version">v0.9+</span>.
-
-As mentioned in JS Runtime Context, Weex is using different context for each page, even global variables are isolated, but `BroadcastChannel` is a way to achieve cross-page communication.
-
-## API
-
-> *BroadcastChannel* is part of [W3C specifications](https://html.spec.whatwg.org/multipage/comms.html#broadcasting-to-other-browsing-contexts), as well as the [MessageEvent](https://html.spec.whatwg.org/multipage/comms.html#messageevent).
-
-The constructor of `BroadcastChannel` only take one single parameter which is the channel name.
-
-```js
-const jb = new BroadcastChannel('007')
-```
-
-The type declaration of the `BroadcastChannel` is:
-
-```typescript
-declare interface BroadcastChannel = {
- name: string,
- postMessage: (message: any) => void;
- onmessage: (event: MessageEvent) => void;
- close: () => void;
-}
-```
-
-+ `name`: The channel name, it's the indicator when broadcast messages.
-+ `postMessage`: Sends the given message to other BroadcastChannel objects set up for this channel.
-+ `onmessage`: The event handler. An event will be triggered when the instance received a message.
-+ `close`: Closes the BroadcastChannel object, opening it up to garbage collection.
-
-The type declaration of the `MessageEvent` is:
-
-```typescript
-declare interface MessageEvent = {
- type: string, // "message"
- data: any
-}
-```
-
-## Communication Procedure
-
-
-
-Just like using radio, each client joins a specific channel by creating a `BroadcastChannel` object with the same channel name. Then implement the `onmessage` event handler to listen on the underlying channel. Call the `postMessage()` method on the BroadcastChannel object will broadcast a message to every subscriber of the channel.
-
-Indeed, it's a full-duplex (bi-directional) communication between all subscriber of the particular channel, each of them is able to receive any message that has been posted to it. Even the sender of the message can receive the message event itself. Communications between different channels will not affect each other.
-
-To leave a channel, it is required to call the `close()` method on the BroadcastChannel object. This method only closed itself, and does not affect other subscribers. When a Weex page is destroyed, all subscribers in it will be closed at `destroyInstance`. If all subscribers of a channel are closed, the underlying channel would be destroyed and allows garbage collection to happen.
-
-## Usage Example
-
-In page A:
-
-```js
-const Steve = new BroadcastChannel('Avengers')
-Steve.postMessage('Assemble!')
-```
-
-In page B:
-
-```js
-const Hulk = new BroadcastChannel('Avengers')
-```
-
-In page C:
-
-```js
-const Stack = new BroadcastChannel('Avengers')
-Stack.onmessage = function (event) {
- console.log(event.data) // Assemble!
- Stack.postMessage('I am Tony and I am leaving now.')
-}
-```
-
-The page A, B and C are all create a BroadcastChannel object which is listening on the `'Avengers'` channel. They can use it to communicate with each other.
-
-When Steve post the message `'Assemble!'`, Stack will receive a message event whose `data` equals the `'Assemble!'`, and then send another message back. But Hulk will not receive the message because he does not implement the `onmessage` method, so he is not a subscriber actually.
-
-## Notice
-
-> **The `message` object is not deep cloned.** (This feature could be changed.)
-
-In page A:
-
-```js
-const a = new BroadcastChannel('app')
-const list = ['A', 'B']
-a.postMessage(list)
-```
-
-In page B:
-
-```js
-const b = new BroadcastChannel('app')
-b.onmessage = function (event) {
- // the event.data is a reference of list in page A
- event.data.push('C')
-}
-```
-
-In this case, the `event.data` in page B is a reference of `list` in page A. When pushing a new item `'C'`, it will also affect the `list` object in page A.
-
-Compared to the deep clone, this behavior improves efficiency and reduces memory cost. However, developers are not recommended caching or modifying the `event` object after received it.
diff --git a/source/references/components/a.md b/source/references/components/a.md
deleted file mode 100644
index 25dd084..0000000
--- a/source/references/components/a.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: <a>
-type: references
-group: Build-in Components
-order: 8.01
-version: 2.1
----
-
-`<a>` is mainly used for navigation between weex pages。
-
-> **Note:** The behavior of `<a>` is similar to [`<div>`](./div.html) except for the aspect mentioned in current page.
-
-> **Note:** It's forbidden to add text directly to `<a>`, use [`<text>`](./text.html) to wrap your text instead.
-
-## Basic Usage
-Wrap the element navigating from with `<a>`
-
- <a href="http://dotwe.org/raw/dist/a5e3760925ac3b9d68a3aa0cc0298857.bundle.wx">
- <text>Jump</text>
- </a>
-
-Refer the [demo](http://dotwe.org/vue/1cec564d6e25c169a0a9a92db3a00955).
-
-## Attributes:
-| Attribute | Type |Value| Default Value|
-| ------------- | ------ | --- | ------------ |
-| `href` | String | {URL} | - | - |
-
-### `href`
-`href` defines the URL that current page will navigate. `href` **must** point to a weex page, the behavior of other case is **undefined**.
-
-## Style
-Support [common styles](../../wiki/common-styles.html).
-
-## Events
-Support [common events](../../wiki/common-events.html)
-
-### `click`
-> **Notes:** The execution order of callback function of click and href is **undefined**. Do **not** use click event to do the preprocessing of `href`.
-
-## Examples
-* [Basic usage for `<a>`](http://dotwe.org/vue/1cec564d6e25c169a0a9a92db3a00955) .
\ No newline at end of file
diff --git a/source/references/components/cell.md b/source/references/components/cell.md
deleted file mode 100644
index d948a43..0000000
--- a/source/references/components/cell.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: <cell>
-type: references
-group: Build-in Components
-order: 8.08
-version: 2.1
----
-
-# <cell>
-
-### Summary
-
-This component must be used as a subcomponent of a [`list`](./list.html) [`recycler`](./list.html) [`waterfall`](./waterfall.html) component, which is for the performance optimizing for long list scrolling.
-
-### Child Components
-
-This type of component supports all kinds of weex component as its child components.
-
-### Attributes
-
-**Notes:** you can't give `<cell>` a `flex` value. Width of `<cell>` is equal to the width of its parent component `<list>`, and you don't need to specify its height.
-
-* `keep-scroll-position {boolean}`: <span class="api-version">v0.11+</span> List Whether to keep the last sliding position after inserting the Cell
-
-### Styles
-
-**common styles**: check out the [common styles](/wiki/common-styles.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-**Notes:** cell itself is a container, its layout info is managed by list, so specifying cell's margin info will not work.
-
-### Events
-
-**common events**: check out the [common events](/wiki/common-events.html)
-
-- support `click` event. Check out [common events](/wiki/common-events.html)
-- support `appear` / `disappear` event. Check out [common events](/wiki/common-events.html)
-
-### Example
-
-please refer to [List](./list.html) [`recycler`](./list.html) [`waterfall`](./waterfall.html)
diff --git a/source/references/components/div.md b/source/references/components/div.md
deleted file mode 100644
index 3d0d80e..0000000
--- a/source/references/components/div.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: <div>
-type: references
-group: Build-in Components
-order: 8.03
-version: 2.1
----
-
-# <div>
-
-### Summary
-
-The most fundamental component which is a container to wrap any other components. It supports all the common styles, attributes and layout of flexbox.
-
-alias: `<container>` (deprecated)
-
-### Child Components
-
-This type of component supports all kinds of weex component as its child components including its own kind.
-
-### Attributes
-
-There is no specific attribute for this component.
-
-### Styles
-
-**common styles**: check out the [common styles](/wiki/common-styles.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-**common events**: check out the [common events](/wiki/common-events.html)
-
-- support `click` event. Check out [common events](/wiki/common-events.html)
-- support `appear` / `disappear` event. Check out [common events](/wiki/common-events.html)
-
-### Examples
-
-```html
-<template>
- <div>
- <div class="box"></div>
- </div>
-</template>
-
-<style scoped>
- .box {
- border-width: 2px;
- border-style: solid;
- border-color: #BBB;
- width: 250px;
- height: 250px;
- margin-top: 250px;
- margin-left: 250px;
- background-color: #EEE;
- }
-</style>
-```
-
-[try it](http://dotwe.org/vue/edfbd1806508cb86254b03dc0b8e28ac)
-
diff --git a/source/references/components/image.md b/source/references/components/image.md
deleted file mode 100644
index 612f61c..0000000
--- a/source/references/components/image.md
+++ /dev/null
@@ -1,154 +0,0 @@
----
-title: <image>
-type: references
-group: Build-in Components
-order: 8.04
-version: 2.1
----
-
-`<image>` is used to display a single image in your interface.
-
-> **Note:** Always use `<image>` in your code, as `<img>` exists only for backward compatibility reasons and may removed in the future release.
-
-> **Note:** Weex doesn't have built-in library for image downloading and caching, as there are some great open source library like [SDWebImage in iOS](https://github.com/rs/SDWebImage) and [Picasso in Android](https://github.com/square/picasso) handling these problem, so please add native image adapter/handler before using `<image>`.
->
-> See also: [Android adapter](../android-apis.html#Adapter) and [iOS handler](../ios-apis.html#Handler-like-Android-Adapter).
-
-## Basic Usage
-
-> **Note:** the style of `width`, `height` and `src` must be specified, otherwise it will load nothing.
-
-
-```html
-<image style="width:500px;height:500px" src="https://vuejs.org/images/logo.png"></image>
-```
-
-See the [example](http://dotwe.org/vue/00f4b68b3a86360df1f38728fd0b4a1f).
-
-## Child
-`<image>` doesn't support any child component.
-
-## Styles
-
-Support **[common styles](../../wiki/common-styles.html)**.
-
-## Attributes
-
-| Attribute | Type | Value | Default Value |
-| ------------- | ------ | -------------------------- | ------------- |
-| `placeholder` | String | {URL / Base64} | - |
-| `resize` | String | cover / contain / stretch | stretch |
-| `src` | String | {URL / Base64 } | - |
-
- > **Note:** you can specify a relative URL for `src` and `placeholder`, relative URL will be rewritten to the to the actual resource URL (local or remote). See also: [Path](../../guide/advanced/path.html).
-
-### placeholder
-
-A URL value for placeholder image. It will be displayed during image downloading and replaced as soon as the image gets loaded.[(Example)](http://dotwe.org/vue/712ef102fc5e073b6c7e3b701545681c)
-
-### resize
-
-
-
-- `contain`: Scales the image as large as possible without cropping or stretching it. Remaining area within bounds is transparent ([Example](http://dotwe.org/vue/89be94dcd1fec73b77246ec46c678914))
-
-
-- `cover`: Scales the image as large as possible without stretching it. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains. ([Example](http://dotwe.org/vue/f38e311d2e6b2af87f0a65a8f37d9490))
-
-- `stretch`: `Default value`. Scales the content to fit the size of the element itself by changing the aspect ratio of the image if necessary. ([Example](http://dotwe.org/vue/f38e311d2e6b2af87f0a65a8f37d9490))
-
-`resize` property is similar to [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size).
-
-### src
-
-The URL of the image to display. This attribute is mandatory for the `<image>` component.
-
-#### Supported Image Formats
-
-Weex doesn't give a list of image formats that must be supported, it mainly relies on the image adapter/handler you are using. For example, if you are using [SDWebImage](https://github.com/rs/SDWebImage#supported-image-formats) as the image adapter on iOS, you can use image formats like JPEG, PNG, GIF, WebP, etc.
-
-> **Note:** The default image adapter on Android doesn't support gif.
-
-## Component Methods
-
-### `save` <span class="api-version">v0.16.0+</span>
-
-Save `<image>` content to the local device or photo album, this operation may require device permission.
-
-**Parameters**:
-
-* `callback`: {Function} A function which is called after the image has been saved to the local device or photo album. Callback parameters:
- * `result`: {Object} Callback result whose properties are:
- * `success`: {Boolean} A flag indicating whether the image has been saved completed.
- * `errorDesc`: {String} A string containing the description of the error if image is not written successfully.
-
-**Return value**: null
-
-> **Note**: You must add `NSPhotoLibraryAddUsageDescription` and `NSPhotoLibraryAddUsageDescription` (iOS 11) to enable the access permission of the iOS photo album. See also: [Cocoa Keys](https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html).
-
-#### Use `save` Method
-
-Add `ref` attribute (Vue.js *[Child Component Refs](https://vuejs.org/v2/guide/components.html#Child-Component-Refs)*) on `<image>`:
-
-```html
-<image ref="poster" src="path/to/image.png"></image>
-```
-
-Get the component reference and use the `save` method:
-
-```js
-const $image = this.$refs.poster
-$image.save(result => {
- if (result.success) {
- // Do something to handle success
- } else {
- console.log(result.errorDesc)
- // Do something to handle failure
- }
-})
-```
-
-Complete example goes [here](http://dotwe.org/vue/fadcd44a7031943ff0feaaf1895df414).
-
-## Events
-
-Support **[common events](../../wiki/common-events.html)**.
-
-### `load`
-
-`load` event handler will be called when the image is loaded.
-
-**Event object**:
-
-- `success`: {Boolean} It shows that whether the image is loaded successfully.
-- `size`: {Object} The loaded image size whose properties are:
- - `naturalWidth`: {Number} The intrinsic width of image displayed on device, it will be zero if the specified image cannot be loaded correctly.
- - `naturalHeight`: {Number} the intrinsic height of image displayed on device, it will be zero if the specified image cannot be loaded correctly.
-
-#### Handle `load` Event
-
-Bind `load` event on `<image>`:
-
-```html
-<image @load="onImageLoad" src="path/to/image.png"></image>
-```
-
-Add event handler:
-
-```js
-export default {
- methods: {
- onImageLoad (event) {
- if (event.success) {
- // Do something to hanlde success
- }
- }
- }
-}
-```
-
-Complete example goes [here](http://dotwe.org/vue/94de9307517240dec066d2ea57fe54a0).
-
-## Examples
-* [Base64 example](http://dotwe.org/vue/ba477790c85ea12bbf7ad3a5f0885b5c)
-* [Lazy load image example](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)
diff --git a/source/references/components/index.md b/source/references/components/index.md
deleted file mode 100644
index 2912623..0000000
--- a/source/references/components/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Build-in Components
-type: references
-group: Build-in Components
-order: 8.00
-version: 2.1
----
-
-- [`<div>`](./div.html)
-- [`<image>`](./image.html)
-- [`<text>`](./text.html)
-- [`<a>`](./a.html)
-- [`<list>`](./list.html)
-- [`<cell>`](./cell.html)
-- [`<recycle-list>`](./recycle-list.html)
-- [`<refresh>` & `<loading>`](./refresh.html)
-- [`<scroller>`](./scroller.html)
-- [`<input>`](./input.html)
-- [`<textarea>`](./textarea.html)
-- [`<switch>`](./switch.html)
-- [`<slider>`](./slider.html)
-- [`<indicator>`](./indicator.html)
-- [`<video>`](./video.html)
-- [`<web>`](./web.html)
-- [`<waterfall>`](./waterfall.html)
diff --git a/source/references/components/indicator.md b/source/references/components/indicator.md
deleted file mode 100644
index 494170a..0000000
--- a/source/references/components/indicator.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: <indicator>
-type: references
-group: Build-in Components
-order: 8.05
-version: 2.1
----
-
-# <indicator>
-
-### Summary
-
-The `<indicator>` component usually used to show an indicator effect, it must be used as a subcomponent of a [`slider`](./slider.html) component.
-
-### Child Components
-
-This component dosen not supports any child components.
-
-### Attributes
-
-There is no specific attribute for this component.
-
-### Styles
-
-Threr are some private styles for `<indicator>` :
-- `item-color`: <colors> This style attribute sets the normal item, default is `#CCCCCC`.
-- `item-selectedColor`: <colors> This style attribute sets the selected item, default is `#444444`.
-- `item-size`: <length> The radius of the indicator elements, default is `5px`
-
-**common styles**: see [common styles](/wiki/common-styles.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-
-**Note:** There are some specific details about the style `width` and `height` on this component: the position of indicator will not only depend on the `top`, `left`, `bottom` and `right`, but also depend on the value of `width` and `height`. Imagine there is a virtual container outside the indicator, and it inherit the `width` and `height` of the indicator. The `top`, `left`, `right` and `bottom` will always take effect on this container, not the indicator points themselves, and the indicator points will be positioned in the center of it. And also you should know the default `width` and `height` is the parent slider's `width` and `height`.
-
-**Note:** `background-color` is not recommended to apply on this component, and you should use `item-color` and `item-selectedColor` instead.
-
-### Events
-
-**common events**: check out the [common events](/wiki/common-events.html)
-
-- support `click` event. Check out [common events](/wiki/common-events.html)
-- support `appear` / `disappear` event. Check out [common events](/wiki/common-events.html)
-
-### Example
-
-[indicator demo](http://dotwe.org/vue/e1b4fd8a37ed4cafd8f5e161698754aa)
diff --git a/source/references/components/input.md b/source/references/components/input.md
deleted file mode 100644
index c67d742..0000000
--- a/source/references/components/input.md
+++ /dev/null
@@ -1,347 +0,0 @@
----
-title: <input>
-type: references
-group: Build-in Components
-order: 8.06
-version: 2.1
----
-
-# input
-
-The weex builtin component `input` is used to create input controls to receive the user's input characters. How a `input` component works varies considerably depending on the value of its `type` attribute, such as `text`, `password`, `url`, `email`, `tel` etc.
-
-**Notes:** does not support the common-event `click`. Please listen to the `input` or `change` event instead.
-
-## Child Components
-
-This component does not support any child component.
-
-## Attributes
-
-* `type`: the type of controls to display. The default value is `text`, if this attribute is not specified. Possible values are `text`, `date`, `datetime`, `email`, `password`, `tel`, `time`, `url`, `number`. each of which has the same meaning with W3C standard.
-
-* `value`: the default value(text) of the control.
-
-* `placeholder`: a hint to the user of which can be entered to the control. The placeholder text must have no carriage returns or line-feeds.
-
-* `disabled`: a boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls.
-
-* `autofocus`: a boolean attribute lets you specify that a form control should have input focus when the page loads.
-
-* `singleline`: a boolean sttribute sets the properties of this field (lines, horizontally scrolling, transformation method) to be for a single-line input.
-
-* `lines`: makes the input exactly this many lines tall.
-
-* `max-length`: constrain edits not to make the length of the text greater than the specified length.
-
-* `max` constrain the max date when `type` is `date`, format is `yyyy-MM-dd`
-
-* `min` constrain the min date when `type` is `date`, format is `yyyy-MM-dd`
-
-* `maxlength`: <span class="api-version">v0.7+</span> a number value to specify maxlength of input.
-
-* `return-key-type`：<sup class="wx-v">v0.11</sup>the keybord returen key type support `defalut`, `go`, `next`, `search`, `send`, `done`.
-
-* `auto-capitalization-type`：the keybord auto capitalization type support `none`, `words`, `sentences`, `allCharacters`.
-
-
-## Styles
-
-* placeholder-color: the color of placeholder. Default value is '#999999'.
-
-* Pseudo-class<span class="api-version">v0.9.5+</span>: `input` component support the following pseudo-classes:
-
- * `active`
- * `focus`
- * `disabled`
- * `enabled`
-
-* text styles: checkout [text styles](/wiki/text-styles.html)
-
- * support `color` style.
- * support `font-size` style.
- * support `font-style` style.
- * support `font-weight` style.
- * support `text-align` style.
-
-### common styles
-check out [common styles for components](/wiki/common-styles.html)
-
-* support flexbox related styles.
-* support box model related styles.
-* support `position` related styles.
-* support `opacity`, `background-color` etc.
-
-## Events
-
-* `input`: the input evenr is fired when input content changes.
-* `change`: the change event is fired when a change to the component's value is commited by the user. It always come after a `blur` event.
-* `focus`: a component has received focus.
-* `blur`: a component has lost focus.
-* `return`: the return key clicked.
-
- the object property of event:
-
- - `returnKeyType`: return key Type of component
- - `value`: component text value
-
-### common events
-check out [common events](/wiki/common-events.html)
-
-* support `appear` / `disappear` event.
-
-
-### Methods
-
- - `focus()` <span class="api-version">v0.9+</span>
-
- The `focus()` method is used to give focus to an input component and tigger soft keybord(if it can be focused).
-
- - `blur()`<span class="api-version">v0.9+</span>
-
- The `blur()` method is used to remove focus from an input component and close soft keybord(if it has focus).
-
-- `setSelectionRange(selectionStart,selectionEnd)` <span class="api-version">v0.11+</span>set text selection range of input or textarea
-
- - `selectionStart {number}`:set starting location text selection range
- - `selectionEnd {number}`:set end location text selection range
-
-- `getSelectionRange(callback[selectionStart,selectionEnd])` <span class="api-version">v0.11+</span>get text selection range of input or textarea
- - `selectionStart {number}`:get starting location text selection range
- - `selectionEnd {number}`: get end location text selection range
-
-- `setTextFormatter(params)`<span class="api-version">v0.18+</span>: This is a very useful feature,can be used to set a set of rules for the input to formatting the input content in real-time.
- - `params {object}`：formatting rules, contains the following parameters:
- - `formatRule {regexp}`: Regular expression used to format the match
- - `formatReplace {string}`: Contents to replace after format matching
- - `recoverRule {regexp}`: Regular expressions to restore original content from formatted content
- - `recoverReplace {string}`: Content to replace when restoring original content
-
-For details of `setTextFormatter`, please refer to [sample](http://dotwe.org/vue/bea3cb0cad697829d8d343552a2b7b77)
-### Notes
-input does not support the common-event `click`. Please listen to the `input` or `change` event instead.
-
-### Parameters of events' object
-
-* for `input` and `change` events:
- - `value`: the value of the component who dispatched this event.
- - `timestamp`: the time stamp of the event.
-* for `focus` and `blur` events:
- - `timestamp`: the time stamp of the event.
-
-## Example
-
-```html
-<template>
- <div>
- <div>
- <text style="font-size: 40px">oninput: {{txtInput}}</text>
- <text style="font-size: 40px">onchange: {{txtChange}}</text>
- <text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
- <text style="font-size: 40px">selection: {{txtSelection}}</text>
-
- </div>
- <scroller>
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text>
- </div>
- <input type="text" placeholder="Input Text" class="input" :autofocus=true value="" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = password</text>
- </div>
- <input type="password" placeholder="Input Password" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = url</text>
- </div>
- <input type="url" placeholder="Input URL" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = email</text>
- </div>
- <input type="email" placeholder="Input Email" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = tel</text>
- </div>
- <input type="tel" placeholder="Input Tel" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = time</text>
- </div>
- <input type="time" placeholder="Input Time" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = number</text>
- </div>
- <input type="number" placeholder="Input number" class="input" @change="onchange" @input="oninput"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = date</text>
- </div>
- <input type="date" placeholder="Input Date" class="input" @change="onchange" @input="oninput" max="2017-12-12" min="2015-01-01"/>
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = default</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="default" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = go</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="go" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = next</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="next" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = search</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="search" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = send</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="send" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = done</text>
- </div>
- <input type="text" placeholder="please input" return-key-type="done" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
- </div>
-
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">function focus() & blur()</text>
- </div>
- <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
- <text class="button" value="Focus" type="primary" @click="focus"></text>
- <text class="button" value="Blur" type="primary" @click="blur"></text>
- </div>
-
- <input type="text" placeholder="Input1" class="input" value="" ref="input1"/>
- </div>
-
-
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input selection</text>
- </div>
- <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
- <text class="button" value="setRange" type="primary" @click="setRange"></text>
- <text class="button" value="getSelectionRange" type="primary" @click="getSelectionRange"></text>
- </div>
- <input type="text" ref="inputselection" placeholder="please input" value="123456789" class="input" @change="onchange" @return = "onreturn" @input="oninput"/>
- </div>
-
-
-
- </scroller>
- </div>
-</template>
-
-<style scoped>
- .input {
- font-size: 60px;
- height: 80px;
- width: 750px;
- }
- .button {
- font-size: 36;
- width: 200;
- color: #41B883;
- text-align: center;
- padding-top: 10;
- padding-bottom: 10;
- border-width: 2;
- border-style: solid;
- margin-right: 20;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
-</style>
-
-<script>
- module.exports = {
- data: function () {
- return {
- txtInput: '',
- txtChange: '',
- txtReturnType: '',
- txtSelection:'',
- autofocus: false
- };
- },
- methods: {
- ready: function () {
- var self = this;
- setTimeout(function () {
- self.autofocus = true;
- }, 1000);
- },
- onchange: function (event) {
- this.txtChange = event.value;
- console.log('onchange', event.value);
- },
- onreturn: function (event) {
- this.txtReturnType = event.returnKeyType;
- console.log('onreturn', event.type);
- },
- oninput: function (event) {
- this.txtInput = event.value;
- console.log('oninput', event.value);
- },
- focus: function () {
- this.$refs['input1'].focus();
- },
- blur: function () {
- this.$refs['input1'].blur();
- },
- setRange: function() {
- console.log(this.$refs["inputselection"]);
- this.$refs["inputselection"].setSelectionRange(2, 6);
- },
- getSelectionRange: function() {
- console.log(this.$refs["inputselection"]);
- var self = this;
- this.$refs["inputselection"].getSelectionRange(function(e) {
- self.txtSelection = e.selectionStart +'-' + e.selectionEnd;
- });
- }
- }
- };
-</script>
-```
-
-[try it](http://dotwe.org/vue/3470e4d0194f3879a72d38e2ab02cc9f)
diff --git a/source/references/components/list.md b/source/references/components/list.md
deleted file mode 100644
index 052e415..0000000
--- a/source/references/components/list.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: <list>
-type: references
-group: Build-in Components
-order: 8.07
-version: 2.1
----
-
-# List
-
-<span class="weex-version">v0.6.1+</span>
-
-The List component, which inspired by Android RecyclerView, is a core component, and it provides the most popular features for using a list of items. which support vertical and horizontal list.
-
-It can provide excellent experience and performance while still maintaining smooth scroll and low memory usage.
-
-[list simple demo](http://dotwe.org/vue/edd19cdf2f03fbe857b76fadd65a08c3)
-
-
-
-[list loadmore demo](http://dotwe.org/vue/2170622cc99895e5ad6af89d06355b84)
-
-[list sticky header](http://dotwe.org/vue/2ecfe0a1c7b820c9d9c9965e1a8cde19)
-
-[list cell appear event](http://dotwe.org/vue/ce0e953112b132e5897725b3149f3924)
-
-
-### Child Components
-
-Notes: The list now supports the following child components: cell, header, refresh, loading and fixed-position components. Other kinds of components will not be guaranteed to be displayed correctly.
-
-* cell 0.6.1 defines the attributes and behavior of the cells that appear in list.
-* header 0.6.1 sticks to the top when it reaches the top of the screen.
-* refresh 0.6.1 used inside list to add pull-down-to-refresh functionality.
-* loading 0.6.1 used inside list to add pull-up-to-load-more functionality.
-
-
-### Attributes
-
-* show-scrollbar: true/false whether show the scroll bar or not, default value is true
-* loadmoreoffset : <number> default value is 0. The loadmore event will be triggered when the list is loadmoreoffset left to reach the bottom of the list view. e.g. a list has total content length of 1000, and the loadmoreoffset is set to 400, the loadmore event will be triggered when 600 has beed scrolled and there is less than 400 left.
-* loadmoreretry : <number> default value 0，whether to reset loadmore related UI when loadmore failed, will be deprecated in further release.
-* offset-accuracy：<number> default value is 0, the vertical offset distance required to trigger the scroll event.
-* pagingEnabled: <boolean> default value is false. supporting pager style snapping in vertical orientation. support version: `0`<span class="api-version">v0.20+</span>. Example : [pagingEnabled](http://dotwe.org/vue/1323c218072f17f10e14a5c336dac3c4)
-* scrollable: <boolean> default value is true. set whether list is scrollable.
-
-Please checkout [Scroller Component Attributes](./scroller.html) to have a look at the inherited attributes from direct parent.
-
-### Styles
-
-
-common styles: check out [common styles for components](/wiki/common-styles.html)
-
-* support flexbox related styles
-* support box model related styles
-* support position related styles
-* support opacity, background-color etc.
-
-### Events
-
-onloadmore 0.5 used with loadmoreoffset attribute. if the view has less than loadmoreoffset to scroll down, the onloadmore event will be triggered.
-
-scroll <sup class="wx-v">0.12+</sup> used with offset-accuracy attribute. This event is fired when the list scrolls. The current contentOffset value is given in this event callback. See details in [scroll event demo](http://dotwe.org/vue/9ef0e52bacaa20182a693f2187d851aa).
-
-common events: check out the [common events](/wiki/common-events.html)
-
-* support onclick event. Check out [common events](/wiki/common-events.html)
-* support onappear / ondisappear event. Check out [common events](/wiki/common-events.html)
-
-
-### API
-
-All cells or cell's subcomponents in list support the scrollToElement API in [dom module](../modules/dom.html)
-
-#### Difference between loading child component and onloadmore event
-
-loading is a child component that can response to the onloading event, and this event can only be triggered when the scroller/list has been scrolled down to the bottom.
-onloadmore is an event that will be triggered when the rest of the scroller/list is less than loadmoreoffset long.
-
-### Restrictions
-
-Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions.
-For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal.
-
-
-[load more demo](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38)
diff --git a/source/references/components/loading.md b/source/references/components/loading.md
deleted file mode 100644
index d776ff3..0000000
--- a/source/references/components/loading.md
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: <loading>
-type: references
-group: Build-in Components
-order: 8.09
-version: 2.1
----
-
-# <loading>
-
-### <span class="weex-version">v0.6.1+</span>
-
-The `<loading>` Component provide a pullup to loading function for some special containers, its usage and attributes are similar to the `<refresh>` Component.
-> **Note：** To be rendered properly, the `<loading>` Component must appear inside the special Component such as `<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>`.
-
- - Example:
-
-```
-<list>
- ...
- ...
- <loading>
- ...
- </loading>
-</list>
-```
-
- - Complete example goes [here](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
-
-## Child Components
-
- - Any other components, like the `<text>` and `<image>` components, can be put inside the loading component.
-
- - `<loading-indicator>`: This is a dedicated component which provides a default loading animation effect, can only be used inside the `<refresh>` or the `<loading>` components.
-
- - Example:
-
-```
-<loading>
- <text>Loading</text>
- <loading-indicator></loading-indicator>
- ...
-</loading>
-```
- - Complete example goes [here](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
-
-## Attributes
-
- - Support all common attributes, check out [common attributes](../common/common-attrs)
-
-| Attribute | Type | Value | Default Value |
-| ------------- | ------ | -------------------------- | ------- |
-| `display` | String | show / hide | show |
-
-#### `display`
-
- - `show`：The loading animation will be started if a `<loading-indicator>` is included in the loading component.
-
- - `hide`：Collapse the loading view. It also hides the `<loading-indicator>` and stops the loading animation if there's a `<loading-indicator>` included in the loading component.
-
-> **Note：** The visibility of `<loading>` component can be controlled by display attribute with the value show and hide. A `display="show"` should always be paired with a `display="hide"` statement.
-
- - Example:
-
-```
-<template>
- <list>
- ...
- ...
- <loading @loading="onloading" :display="loadinging ? 'show' : 'hide'">
- ...
- </loading>
- ...
- </list>
-</template>
-
-<script>
- ...
- methods: {
- onloading (event) {
- this.loadinging = true
- setTimeout(() => {
- this.loadinging = false
- }, 2000)
- },
- }
-</script>
-```
- - Complete example goes [here](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
-
-## Styles
-
- - Please check out the [common styles](/wiki/common-styles.html)
-
-## Events
-
-### `loading`
-
- - Triggered when the scroller or list is pulled up.
-
- - Complete example goes [here](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
-
-
-## Example
-
- - Complete example goes [here](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
diff --git a/source/references/components/recycle-list.md b/source/references/components/recycle-list.md
deleted file mode 100644
index a46e643..0000000
--- a/source/references/components/recycle-list.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: <recycle-list>
-type: references
-group: Build-in Components
-order: 8.09
-version: 2.1
----
-
-Work in progress, please see [the Chinese version](../../cn/references/components/recycle-list.html).
diff --git a/source/references/components/refresh.md b/source/references/components/refresh.md
deleted file mode 100644
index 6c222d4..0000000
--- a/source/references/components/refresh.md
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: <refresh>
-type: references
-group: Build-in Components
-order: 8.10
-version: 2.1
----
-
-# <refresh>
-
-### <span class="weex-version">v0.6.1+</span>
-
-The `<refresh>` Component provide a pulldown-refresh function for some special containers, its usage and attributes are similar to the `<loading>` Component.
-> **Note：** To be rendered properly, the `<refresh>` Component must appear inside the special Component such as `<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>`.
-
- - Example:
-
-```
-<list>
- <refresh>
- ...
- </refresh>
- ...
-</list>
-```
-
- - Complete example goes [here](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
-
-## Child Components
-
- - Any other components, like the `<text>` and `<image>` components, can be put inside the refresh component.
-
- - `<loading-indicator>`: This is a dedicated component which provides a default refresh animation effect, can only be used inside the `<refresh>` or the `<loading>` components.
-
- - Example:
-
-```
-<refresh>
- <text>Refreshing</text>
- <loading-indicator></loading-indicator>
- ...
-</refresh>
-```
- - Complete example goes [here](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
-
-## Attributes
-
- - Support all common attributes, check out [common attributes](../common/common-attrs)
-
-| Attribute | Type | Value | Default Value |
-| ------------- | ------ | -------------------------- | ------- |
-| `display` | String | show / hide | show |
-
-#### `display`
-
- - `show`：The refresh animation will be started if a `<loading-indicator>` is included in the refresh component.
-
- - `hide`：Collapse the refresh view. It also hides the `<loading-indicator>` and stops the loading animation if there's a `<loading-indicator>` included in the refresh component.
-
-> **Note：** The visibility of `<refresh>` component can be controlled by display attribute with the value show and hide. A `display="show"` should always be paired with a `display="hide"` statement.
-
- - Example:
-
-```
-<template>
- <list>
- <refresh @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
- ...
- </refresh>
- ...
- </list>
-</template>
-
-<script>
- ...
- methods: {
- onrefresh (event) {
- this.refreshing = true
- setTimeout(() => {
- this.refreshing = false
- }, 2000)
- },
- }
-</script>
-```
- - Complete example goes [here](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
-
-## Styles
-
- - Please check out the [common styles](/wiki/common-styles.html)
-
-## Events
-
-### `refresh`
-
- - Triggered when the scroller or list is pulled down.
-
-### `pullingdown` <span class="weex-version">v0.6.1+</span>
-
- - Triggered when the scroller or list is pulled down. The attributes `dy`, `pullingDistance`, `viewHeight` and `type` are accessible from the `event` object :
-
- - `dy` : The offset between two scroll actions
- - `pullingDistance` : The distance of pulling
- - `viewHeight` : The height of refreshView
- - `type` : "pullingdown" constant string type for this event
-
-
- - Example:
-
-```
-<scroller>
- <refresh @refresh="onrefresh" @pullingdown="onpullingdown">
- ...
- </refresh>
- ...
-</scroller>
-
-<script>
- export default {
- methods: {
- onrefresh (event) {
- ...
- },
- onpullingdown (event) {
- console.log("dy: " + event.dy)
- console.log("pullingDistance: " + event.pullingDistance)
- console.log("viewHeight: " + event.viewHeight)
- console.log("type: " + type)
- }
- }
- }
-</script>
-```
- - Complete example goes [here](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
-
-
-
-## Example
-
- - Complete example goes [here](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
diff --git a/source/references/components/richtext.md b/source/references/components/richtext.md
deleted file mode 100644
index 930fb5a..0000000
--- a/source/references/components/richtext.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: <richtext>
-type: references
-group: Build-in Components
-order: 8.28
-version: 2.1
----
-
-Richtext is used to achieve inline `<span>` or `<a>` combined with inline-block `<image> `. It also supports nested `<span>`, `<image>` and `<a>` with style inheritance and override. Thus, richtext can be considered as a more general `<text>` with more powerful usage.
-
-Only `<span>`, `<a>` and `<image>` are valid children of `<richtext>`. `<span>` and `<a>` are considered as `display:inline`, while `<image>` is considered as `display:inline-block`, which are default values and cannot be changed.
-
-Children of `<richtext>` can be classified as two types of node, **internal** and **external**.
-* Internal node can have children nodes.
-* External node is not allowed to have any children.
-* `<span>` and `<a>` are internal nodes, while `<image>` is external node.
-
-Richtext can be seen as a tree, and the max height of the tree is 255. Any style on a node of which the height is greater than 255 has no effect.
-
-Notes
-* `<a>` on iOS will have a `color:blue` style, and children of `<a>` can not override this style. This only happens on iOS. There is no default style and override restriction for `<a>` on Android.
-* `<image>` in richtext must have `width` and `height` styles.
-* The content area of `<image>` will remain blank until the corresponding image is downloaded and there is no way to display a placeholder image.
-* Richtext cannot be nested.
-
-## Attributes
-
-Supported attributes of children of a `richtext`.
-
-#### image
-
-* **src**. Image source.
-* **pseudo-ref**. A ref assigned by developers and passed to the callback function of **itemclick**.
-
-#### a
-
-* **herf**. The herf.
-
-#### span
-
-`<span>` does not support any attribute. A text must be set as the content of `<span>`, e.g. `<span>Hello World</span>`.
-
-## Styles
-
-Only limited css styles listed below are supported by richtext.
-
-* `<span>`, `<a>` and `<richtext>` itself
- * styles can be inherited
- * color
- * font-family
- * font-size
- * font-style
- * font-weight
- * line-height
- * styles cannot be inherited
- * background-color
-* `<span>`
- * styles cannot be inherited
- * text-decoration: none | underline | line-through, the default value is none
-* `<richtext>`
- * styles cannot be inherited
- * lines: the max line of richtext. Must be a **positive integer**.
-* `<image>`
- * styles cannot be inherited
- * width
- * height
-
-## Events
-
-* **common events**. Check out [common events](/wiki/common-events.html).
-* **itemclick**. This event will be fired when
- * An `img` in richtext is clicked
- * None of parents is an `a` tag
- * If the second condition is not satisfied, Weex will try to open the hyperlink of `a` tag instead.
- * **pseudo-ref** of img will be passed to the callback function of onitemclick.
-
-## Example
-
-[try it](http://dotwe.org/vue/f60fa4323e8248c91ed88d53af2ce9fc)
diff --git a/source/references/components/scroller.md b/source/references/components/scroller.md
deleted file mode 100644
index fbfc26d..0000000
--- a/source/references/components/scroller.md
+++ /dev/null
@@ -1,156 +0,0 @@
----
-title: <scroller>
-type: references
-order: 8.20
-version: 2.1
----
-
-# <scroller>
-
-<span class="weex-version">v0.6.1+</span>
-
-Scroller is a component which can have multiple child components in one column. It supports both direcitons. If the content size of child components exceeds the frame of the scroller, the whole child components will be scrollable.
-
-Notes: A <scroller> can be used as a root element or a embed element. The scroll direction of this component is column, and it can't be changed.
-
-
-## Child Components
-
-Scroller supports all kinds of components, such as div, text, etc.
-There are two special components that can only be used inside scroller component.
-
-* refresh 0.6.1 used inside list to add pull-down-to-refresh functionality.
-* loading 0.6.1 used inside list to add pull-up-to-load-more functionality.
-
-
-## Attributes
-
-* show-scrollbar: <boolean> true | false, default value is true. This attribute indicates whether show the scroll bar or not.
-* scroll-direction: <string> the scroll direction of component, horizontal or vertical.
- * `scroll-direction` defines the scrollable axis of scroller and `flex-direction` defines the layout axis of scroller. `scroll-direction` and `flex-direction` must be set to the same direction, otherwise, undefined behavior may happen.
- * Default value for `scroll-direction` is `vertical`, and for `flex-direction` is `column` .
- * Use `scroll-direction:horizontal` and `flex-direction: row` when a horizontal layout and scrollable scroller is expected.
- * Use `scroll-direction:vertical` and `flex-direction: column` when a vertical layout and scrollable scroller is expected. But those two values are default, if you don't set them, it also works fine.
-* loadmoreoffset : <number> default value is 0. The loadmore event will be triggered when the list is loadmoreoffset left to reach the bottom. e.g. A list has total content length of 1000, and the loadmoreoffset is set to 400, the loadmore event will be triggered when 600 has beed scrolled and there is less than 400 left.
-* loadmoreretry : <number> default value 0，whether to reset loadmore related UI when loadmore failed, will be deprecated in further release.
-* offset-accuracy：<number> default value is 0, the vertical offset distance required to trigger the scroll event.
-
-
-## Styles
-
-common styles: check out [common styles for components](/wiki/common-styles.html)
-
-* support flexbox related styles
-* support box model related styles
-* support position related styles
-* support opacity, background-color etc.
-
-
-## Events
-
-**common events**: check out the [common events](/wiki/common-events.html)
-
-- support `click` event. Check out [common events](/wiki/common-events.html)
-- support `appear` / `disappear` event. Check out [common events](/wiki/common-events.html)
-
-- support `loadmore` event. The `loadmore` event should be used in concert with loadmoreoffset. If the view has less than loadmoreoffset to scroll down, the event will be triggered.See details in [example](http://dotwe.org/vue/26e980d5ccd9538941ea6d17761219ff).
-
-- support `scroll` event <sup class="wx-v">0.12+</sup> .The `scroll` should be used in concert with offset-accuracy. This event is fired when the list scrolls. The current contentOffset value is given in this event callback. See details in [example](http://dotwe.org/vue/9ef0e52bacaa20182a693f2187d851aa).
-
-- support `scrollstart` and `scrollend` event <sup class="wx-v">0.17+</sup> .These events are fired when the list begins or ends scrolling.The current contentSize and contentOffset value are given in this event callback. See details in [example](http://dotwe.org/vue/fd1b271fa1fa100cefb40f8d69198a1b)
-
-
-## Restrictions
-
-Nested lists or scrollers within the same direction are not supported. In other words. nested list/scroller must have different directions.
-For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal.
-
-## example
-
-```html
-<template>
- <div class="wrapper">
- <scroller class="scroller">
- <div class="row" v-for="(name, index) in rows" :ref="'item'+index">
- <text class="text" :ref="'text'+index">{{name}}</text>
- </div>
- </scroller>
- <div class="group">
- <text @click="goto10" class="button">Go to 10</text>
- <text @click="goto20" class="button">Go to 20</text>
- </div>
- </div>
-</template>
-
-<script>
- const dom = weex.requireModule('dom')
-
- export default {
- data () {
- return {
- rows: []
- }
- },
- created () {
- for (let i = 0; i < 30; i++) {
- this.rows.push('row ' + i)
- }
- },
- methods: {
- goto10 (count) {
- const el = this.$refs.item10[0]
- dom.scrollToElement(el, {})
- },
- goto20 (count) {
- const el = this.$refs.item20[0]
- dom.scrollToElement(el, { offset: 0 })
- }
- }
- }
-</script>
-
-<style scoped>
- .scroller {
- width: 700px;
- height: 700px;
- border-width: 3px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- margin-left: 25px;
- }
- .row {
- height: 100px;
- flex-direction: column;
- justify-content: center;
- padding-left: 30px;
- border-bottom-width: 2px;
- border-bottom-style: solid;
- border-bottom-color: #DDDDDD;
- }
- .text {
- font-size: 45px;
- color: #666666;
- }
- .group {
- flex-direction: row;
- justify-content: center;
- margin-top: 60px;
- }
- .button {
- width: 200px;
- padding-top: 20px;
- padding-bottom: 20px;
- font-size: 40px;
- margin-left: 30px;
- margin-right: 30px;
- text-align: center;
- color: #41B883;
- border-width: 2px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
-</style>
-```
-
-[try it](http://dotwe.org/vue/2f22f14fb711d88515e63c3f67bed46a)
diff --git a/source/references/components/slider.md b/source/references/components/slider.md
deleted file mode 100644
index b8d5bb7..0000000
--- a/source/references/components/slider.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: <slider>
-type: references
-group: Build-in Components
-order: 8.21
-version: 2.1
----
-
-## Summary
-
-A slide's player to show slides (mostly pictures) one page by another. The default interval between two slides is 3 seconds.
-
-## Child Components
-
-It supports all kinds of weex components as its slides. The `indicator` component should be only used as a child component of `slider`.
-
-## Attributes
-* **auto-play**, boolean. This value determines whether the slides plays automatically after the page rendering finished. The default value is false.
-* **interval**, number in millisecond. This value determines time interval for each page displayed in slider.
-* **index**, number. This value determines the index of current shown slide. The default value is 0.
-* **offset-x-accuracy**, number. Set the scroll event trigger precision, precision value represents the rolling distance of a page width ratio.
-* **show-indicators**, boolean. Set whether to display indicator.
-* **infinite**, boolean. Set whether the page in the slider can be scrolled. The default value is true.
-* **scrollable**, boolean. Set whether slider pages can be switched by sliding gestures. The default value is true.
-* **keep-index**, boolean, <span class="api-version">Android</span>. Set whether to maintain the index of the page after the data changes.
-* **forbid-slide-animation**, boolean, <span class="api-version">v0.7+ & iOS</span>. On iOS animation is enabled by default, and here we provide this attribute to shutdown animation on iOS.
-
-## Styles
-
-* **common styles**. Check out [common styles for components](/wiki/common-styles.html).
-
-## Events
-* **common events**. Check out the [common events](/wiki/common-events.html).
-* **change**. Triggerd when the slide's index is changed. The event object contains the attribute of `index`, which is the index number of the currently shown slide.
-* **scroll**, <span class="api-version">v0.11+</span>. This event is fired when scrolling. The current `offsetXRatio` value is given in this event callback.
-
-## Example
-```html
-<template>
- <div>
- <slider class="slider" interval="3000" auto-play="true">
- <div class="frame" v-for="img in imageList">
- <image class="image" resize="cover" :src="img.src"></image>
- </div>
- </slider>
- </div>
-</template>
-
-<style scoped>
- .image {
- width: 700px;
- height: 700px;
- }
- .slider {
- margin-top: 25px;
- margin-left: 25px;
- width: 700px;
- height: 700px;
- border-width: 2px;
- border-style: solid;
- border-color: #41B883;
- }
- .frame {
- width: 700px;
- height: 700px;
- position: relative;
- }
-</style>
-
-<script>
- export default {
- data () {
- return {
- imageList: [
- { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
- { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
- { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
- ]
- }
- }
- }
-</script>
-```
-[try it](http://dotwe.org/vue/0c43ffd743c90b3bd9f5371062652e60)
diff --git a/source/references/components/switch.md b/source/references/components/switch.md
deleted file mode 100644
index 5296c9a..0000000
--- a/source/references/components/switch.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: <switch> (deprecated)
-type: references
-group: Build-in Components
-order: 8.22
-version: 2.1
----
-
-<span class="weex-version">v0.6.1+</span>
-
-> **deprecated:** This built-in component will be deprecated soon. There're some reasons for this deprecation, such as the inconsistency of user experience on different ends, and the component's appearance sometimes being not as expected. Therefore we strongly suggest developers build this component as a customized component using weex's DSL and its rendering ability.
-
-`<switch>` is a checkbox-like UI component.
-
-> **Note:** The appearance of switch component is a bit of different in three ends (iOS, Android, Web) in consideration of different platform styles.
-
-| Android | Web | iOS |
-| -------- | --- | --- |
-|  |  |  |
-
-> **Note:** Layout style attributes listed below such as `width`, `height`, `margin` are not supported.
-
-## Basic Usage
-
-```html
-<switch></switch>
-```
-
-See the [example](http://dotwe.org/vue/00f4b68b3a86360df1f38728fd0b4a1f).
-
-## Attributes
-
-| Attribute | Type | Value | Default Value |
-| ------------- | ------ | -------------------------- | ------------- |
-| `checked` | Boolean | true / false | false |
-| `disabled` | Boolean | true / false | false |
-
-### `checked`
-
-Indicates this component's status is set to true or false.
-
-### `disabled`
-
-Indicates this component is not available for interaction.
-
-## Component Methods
-
-None.
-
-## Events
-
-* `appear` / `disappear` event. check out [common events](/wiki/common-events.html)
-* `click` / `longpress`: check out [common events](/wiki/common-events.html)
-* `change`: check out [common events](/wiki/common-events.html)
-
-## Parameters of events' object for onchange event:
-
-* `value`: the value of the component who dispatched this event, which is the boolean value true or false.
-* `timestamp`: the time stamp of the event.
-
-## Styles
-
-> **Notes:** There are several style properties that you mustn't use on this component. And here are all the invalid properties:
-
-* `width`
-* `height`
-* `min-width`
-* `min-height`
-* `margin` and `margin-xxx`
-* `padding` and `padding-xxx`
-* `border` and `border-xxx`
-
-> **Notes:** If the container of `<switch>` is not set to `align-items:flex-start`, the switch in android will be stretched.
-
-common styles: check out [common styles for components](/wiki/common-styles.html)
-
-## Usage Notes
-
-- The `width` and `height` in the styles of `<switch>` won't effect the component's apparence and layout.
-- `<switch>` can not have any nested child component.
-
-## Examples
-
-- [Simple Switch](http://dotwe.org/vue/00f4b68b3a86360df1f38728fd0b4a1f)
-- [Switch List](http://dotwe.org/vue/9068f28ba80e871d89dabb9fccff5cc6)
diff --git a/source/references/components/text.md b/source/references/components/text.md
deleted file mode 100644
index 549dfa8..0000000
--- a/source/references/components/text.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: <text>
-type: references
-group: Build-in Components
-order: 8.23
-version: 2.1
----
-
-The weex builtin component 'text' is used to render text with specified style rule.
-
-> **Note:** This component supports no child components.
-
-> **Note:** The heading and trailing white space will be ignored. If this is not what you need, you can set text using the data-binding method above.
-
-## Styles
-* Support [common styles for components](/wiki/common-styles.html)
-* Support [text style](/wiki/text-styles.html)
-
-## Attributes
-Except for dynamic text, there is no other supported attributes for text.
-### dynamic text
-One can use the following code snippet to bind the content of text to a variable
-
- <template>
- <div>
- <text >{{content}}</text>
- </div>
- </template>
- <script>
- module.exports = {
- data: function(){
- return {
- content: "Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework. "
- }
- }
- }
- </script>
-
-## Events
-Support [common events](/wiki/common-events.html)
-
-## Other
-### The magic of text height
-The rules for computed height of text component is complicated, basically but not always, text in weex obey the following rules in order:
-1. The CSS style of `max-height`/`min-height` on your text
-2. The CSS style of `flex` on your text if there is a `flex-direction:column` on the parent component of you text.
-3. The CSS style of `height` on your text
-4. The CSS style of `align-items:stretch` on your text if there is a `flex-direction:row` on the parent you text.
-5. The content of your text and [text style](/wiki/text-styles.html) on your text.
-6. Other related CSS style not mentioned here.
-
-### Custom Typeface
-`support:v0.12.0`
-
-support loading custom font of `ttf` and `woff` format. Call [addRule](../modules/custom_font.html) in dom module to build your own `font-family`, we suggest that you call `addRule` in `beforeCreate`.
-
-## Examples
-* [Basic usage for `<text>`](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0).
-
diff --git a/source/references/components/textarea.md b/source/references/components/textarea.md
deleted file mode 100644
index def3734..0000000
--- a/source/references/components/textarea.md
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: <textarea>
-type: references
-group: Build-in Components
-order: 8.24
-version: 2.1
----
-
-# <textarea>
-<span class="weex-version">v0.8+</span>
-
-
-### Summary
-
-The weex builtin component `textarea` is used to create interactive controls to accept data from users. It can be a multi-line [input](./input.html).
-
-**Notes:** `<textarea>` support all event which `<input>` had.
-
-### Child Components
-
-This component supports no child components.
-
-### attributes
-
-The `textarea` component supports all the properties of the `text` component, in addition to the following properties:
-
-- `rows:`<number> a number which can specify the height of textarea, default is `2`.
-
-### Styles
-
-**Pseudo-class**<span class="api-version">v0.9.5+</span>: `textarea` component support the following pseudo-classes:
-
-* `active`
-* `focus`
-* `disabled`
-* `enabled`
-
-**text styles**: checkout [text styles](/wiki/text-styles.html)
-
-- support `color` style.
-- support `font-size` style.
-- support `font-style` style.
-- support `font-weight` style.
-- support `text-align` style.
-
-
-**common styles**: check out [common styles for components](/wiki/common-styles.html)
-
-- support flexbox related styles.
-- support box model related styles.
-- support ``position`` related styles.
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-- `input`: the value of an element changes.
-- `change`: the change event is fired when a change to the component's value is commited by the user. It always come after a ``blur`` event.
-- `focus`: a component has received focus.
-- `blur`: a component has lost focus.
-
-**common events**: check out the [common events](/wiki/common-events.html)
-
-- support `appear` / `disappear` event. Check out [common events](/wiki/common-events.html).
-
-**Notes:** `<textarea>` does not support the common-event `click`. Please listen to the `input` or `change` event instead.
-
-### Parameters of events' object
-
-- for ``input`` and ``change`` events:
- - `value`: the value of the component who dispatched this event.
- - `timestamp`: the time stamp of the event.
-- for ``focus`` and ``blur`` events:
- - `timestamp`: the time stamp of the event.
-
-### Example
-
-```html
-<template>
- <div class="wrapper">
- <textarea class="textarea" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></textarea>
- </div>
-</template>
-
-<script>
- const modal = weex.requireModule('modal')
-
- export default {
- methods: {
- oninput (event) {
- console.log('oninput:', event.value)
- modal.toast({
- message: `oninput: ${event.value}`,
- duration: 0.8
- })
- },
- onchange (event) {
- console.log('onchange:', event.value)
- modal.toast({
- message: `onchange: ${event.value}`,
- duration: 0.8
- })
- },
- onfocus (event) {
- console.log('onfocus:', event.value)
- modal.toast({
- message: `onfocus: ${event.value}`,
- duration: 0.8
- })
- },
- onblur (event) {
- console.log('onblur:', event.value)
- modal.toast({
- message: `input blur: ${event.value}`,
- duration: 0.8
- })
- }
- }
- }
-</script>
-
-<style>
- .textarea {
- font-size: 50px;
- width: 650px;
- margin-top: 50px;
- margin-left: 50px;
- padding-top: 20px;
- padding-bottom: 20px;
- padding-left: 20px;
- padding-right: 20px;
- color: #666666;
- border-width: 2px;
- border-style: solid;
- border-color: #41B883;
- }
-</style>
-```
-
-[try it](http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa)
diff --git a/source/references/components/video.md b/source/references/components/video.md
deleted file mode 100644
index cf128fa..0000000
--- a/source/references/components/video.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: <video>
-type: references
-group: Build-in Components
-order: 8.25
-version: 2.1
----
-
-The video component can be used to embed video content in a Weex page.
-
-## Child Components
-
-A `text` is the only valid type of child component.
-
-## Attributes
-
-* **src**, string. The URL of the video to embed.
-* **play-status**, string. Valid options are 'play' | 'pause'. Use it to control video's play status. Default value is `pause`。
-* **auto-play**, boolean. Use it to control whether it is playing when the page initialization finished. Defalut value is false.
-* **poster**, string, <span class="weex-version">v0.18+ & iOS</span>. Post image URL of this video if any.
-* **controls**, string, <span class="weex-version">v0.19+</span>. If set to `nocontrols`, native video component will hide its play-back control panel.
-
-## Styles
-
-* **common styles**. Check out [common styles for components](/wiki/common-styles.html).
-
-## Events
-
-* **start** Triggered when playback state is Playing.
-* **pause** Triggered when playback state is Paused.
-* **finish** Triggered when playback state is Finished.
-* **fail** Triggered when playback state is Failed.
-
-## example
-
-```html
-<template>
- <div>
- <video class="video" :src="src" autoplay controls
- @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
- <text class="info">state: {{state}}</text>
- </div>
-</template>
-
-<style scoped>
- .video {
- width: 630px;
- height: 350px;
- margin-top: 60px;
- margin-left: 60px;
- }
- .info {
- margin-top: 40px;
- font-size: 40px;
- text-align: center;
- }
-</style>
-
-<script>
- export default {
- data () {
- return {
- state: '----',
- src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
- }
- },
- methods:{
- onstart (event) {
- this.state = 'onstart'
- },
- onpause (event) {
- this.state = 'onpause'
- },
- onfinish (event) {
- this.state = 'onfinish'
- },
- onfail (event) {
- this.state = 'onfinish'
- }
- }
- }
-</script>
-```
-[try it](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197)
diff --git a/source/references/components/waterfall.md b/source/references/components/waterfall.md
deleted file mode 100644
index 1e85b7a..0000000
--- a/source/references/components/waterfall.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: <waterfall>
-type: references
-group: Build-in Components
-order: 8.26
-version: 2.1
----
-
-# waterfall
-
-<span class="weex-version">v0.11.0+</span>
-
-A component providing waterfall layout over list component.
-
-### Child Components
-
-Notes: The waterfall only supports the following child components: cell, header, refresh, loading and fixed-position components. Other kinds of components will not be guaranteed to be displayed correctly.
-
-* cell: presents the content for a single data item in waterfall
-* header: components that need to stretch across multiple columns. It can be sticky by using css position.
-
-### Attributes
-
-* **column-width** : This property describes the width of columns in waterfall elements.
- * `auto`: means that the column width will be determined by other properties(e.g., column-count, if it has a non-auto value).
- * `<length>`: describes the optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). Specified values must be greater than 0.
-* **column-count**:This property describes the number of columns of a multicol element.
- * `auto`: means that the number of columns will be determined by other properties (e.g., column-width, if it has a non-auto value).
- * `<integer>`: describes the optimal number of columns into which the content of the element will be flowed. Values must be greater than 0. If both column-width and column-count have non-auto values, the integer value describes the maximum number of columns.
-* **column-gap**:sets the gap between columns. if `normal` is specified, the gap will be `32`.
-* **left-gap**:sets the gap between left edge and left cell. if `none` is specified, the gap will be `0`<span class="api-version">v0.19+</span>.
-* **right-gap**:sets the gap between right edge and right most cell. if `none` is specified, the gap will be `0`<span class="api-version">v0.19+</span>.
-
-To see other attributes in list, please checkout [List Component Attributes](./list.html)
-
-### Styles
-
-common styles: check out [common styles for components](/wiki/common-styles.html)
-
-* support flexbox related styles
-* support box model related styles
-* support position related styles
-* support opacity, background-color etc.
-
-### Events
-
-common events: check out the [common events](/wiki/common-events.html)
-
-* support onclick event. Check out [common events](/wiki/common-events.html)
-* support onappear / ondisappear event. Check out [common events](/wiki/common-events.html)
-
-### API
-
-All subcomponents in waterfall support the scrollToElement API in [dom module](../modules/dom.html)
-
-### Example
-
-[waterfall example](http://dotwe.org/vue/7a9195643e9e8da352b0d879cdbe68c0)
diff --git a/source/references/components/web.md b/source/references/components/web.md
deleted file mode 100644
index b5d9457..0000000
--- a/source/references/components/web.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: <web>
-type: references
-group: Build-in Components
-order: 8.27
-version: 2.1
----
-
-<span class="weex-version">v0.5+</span>
-
-`<web>` is used to display web content that specified by `src` attribute in weex page. You also can use `webview` module to control WebView behavior such as goBack, goForward and reload, See [webview module](../modules/webview.html) for more information.
-
-## Basic Usage
-
-> **Note:** `<web>` does not support any nested child components, and must specific `width` and `height` in style attribute, otherwise it won't work.
-
-```html
-<web src="https://vuejs.org"></web>
-```
-
-See the [example](http://dotwe.org/vue/81da1f0129dfc72e1666cfd4b90f20ae).
-
-## Attributes
-
-| Attribute | Type | Value | Default Value |
-| --------- | ------ | ----- | ------------- |
-| `src` | String | {URL} | - |
-
-### `src`
-
-A URL value for web content to be loaded. You can specify a URL which is relative to bundle URL, it will be rewritten to the real resource URL (local or remote). See also: [Path](../../guide/advanced/path.html).
-
-## Events
-
-Only support `appear` and `disappear` event in **[common events](../../wiki/common-events.html)**.
-
-### pagestart
-
-`pagestart` event handler will be called when the web content is start loading.
-
-**Event object**:
-
-- `url`: {String} URL of current web content.
-
-### pagefinish
-
-`pagefinish` event handler will be called when the web content is loaded.
-
-**Event object**:
-
-- `url`: {String} URL of current web content.
-- `canGoBack`: {Boolean} Can current web content go back.
-- `canGoForward`: {Boolean} Can current web content go forward.
-- `title`: {String} Title of current web content (iOS platform only).
-
-### error
-
-`error` event handler will be called when the web content loaded failed.
-
-### receivedtitle
-
-`receivedtitle` event handler will be called when the title of web content had changed (Android platform only).
-
-**Event object**:
-
-- `url`: {String} URL of current web content.
-
-### Handle `<web>` Events
-
-Bind events on `<web>`:
-
-```html
-<web @pagestart="onPageStart" @pagefinish="onPageFinish" @error="onError" src="https://vuejs.org"></web>
-```
-
-Add event handler:
-
-```js
-export default {
- methods: {
- onPageStart (event) {
- // page start load
- },
- onPageFinish (event) {
- // page finish load
- },
- onError (event) {
- // page load error
- },
- }
-}
-```
-
-See the [example](http://dotwe.org/vue/f9606de73fe386d554217371c4d60d03).
-
-## Styles
-
-Support **[common styles](../../wiki/common-styles.html)**.
-
-## Usage Notes
-
-- The `width` and `height` in the styles of `<web>` must be specified.
-- `<web>` can not have any nested child component.
-- You can use [webview module](../modules/webview.html) to control `<web>` component, see the [example](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939).
-
-## Examples
-
-- [Browser example](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939)
diff --git a/source/references/images/BroadcastChannel.png b/source/references/images/BroadcastChannel.png
deleted file mode 100644
index 050e043..0000000
--- a/source/references/images/BroadcastChannel.png
+++ /dev/null
Binary files differ
diff --git a/source/references/images/css-boxmodel.png b/source/references/images/css-boxmodel.png
deleted file mode 100644
index a2063e2..0000000
--- a/source/references/images/css-boxmodel.png
+++ /dev/null
Binary files differ
diff --git a/source/references/images/css-flexbox-align.jpg b/source/references/images/css-flexbox-align.jpg
deleted file mode 100644
index 8a7f731..0000000
--- a/source/references/images/css-flexbox-align.jpg
+++ /dev/null
Binary files differ
diff --git a/source/references/images/css-flexbox-justify.svg b/source/references/images/css-flexbox-justify.svg
deleted file mode 100644
index 33e742b..0000000
--- a/source/references/images/css-flexbox-justify.svg
+++ /dev/null
@@ -1,59 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width='504' height='270' viewBox="0 0 504 270">
- <defs>
- <pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
- <rect x='0' y='0' width='10' height='10' fill='#eee' />
- <rect x='10' y='10' width='10' height='10' fill='#eee' />
- <rect x='0' y='10' width='10' height='10' fill='#ccc' />
- <rect x='10' y='0' width='10' height='10' fill='#ccc' />
- </pattern>
- </defs>
- <style>
- text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
- rect { stroke-width: 2px; stroke: #888; }
- g > rect:nth-child(1) { fill: #888 }
- g > rect:nth-child(2) { fill: #fcc; }
- g > rect:nth-child(3) { fill: #cfc; }
- g > rect:nth-child(4) { fill: #ccf; }
- g > rect:nth-child(5) { fill: transparent; }
- </style>
- <g transform="translate(2,2)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='0' y='0' width='100' height='50' />
- <rect x='100' y='0' width='80' height='50' />
- <rect x='180' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>flex-start</text>
- </g>
- <g transform="translate(2,56)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='120' y='0' width='100' height='50' />
- <rect x='220' y='0' width='80' height='50' />
- <rect x='300' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>flex-end</text>
- </g>
- <g transform="translate(2,110)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='60' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='240' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>center</text>
- </g>
- <g transform="translate(2,164)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='0' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='300' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>space-between</text>
- </g>
- <g transform="translate(2,218)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='20' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='280' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>space-around</text>
- </g>
-</svg>
\ No newline at end of file
diff --git a/source/references/images/css-flexbox-sample.png b/source/references/images/css-flexbox-sample.png
deleted file mode 100644
index 0f1236d..0000000
--- a/source/references/images/css-flexbox-sample.png
+++ /dev/null
Binary files differ
diff --git a/source/references/images/image-resize-property.png b/source/references/images/image-resize-property.png
deleted file mode 100644
index c3b17a2..0000000
--- a/source/references/images/image-resize-property.png
+++ /dev/null
Binary files differ
diff --git a/source/references/images/list_demo.jpg b/source/references/images/list_demo.jpg
deleted file mode 100644
index 8a5a775..0000000
--- a/source/references/images/list_demo.jpg
+++ /dev/null
Binary files differ
diff --git a/source/references/images/nav.png b/source/references/images/nav.png
deleted file mode 100644
index 7081ca7..0000000
--- a/source/references/images/nav.png
+++ /dev/null
Binary files differ
diff --git a/source/references/index.md b/source/references/index.md
deleted file mode 100644
index e666214..0000000
--- a/source/references/index.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: References
-type: references
-order: 0
-version: 2.1
-has_chapter_content: true
----
-
-# Common Options
-
-* API
- * [Android APIs](./android-apis.html)
- * [iOS APIS](./ios-apis.html)
- * [Weex Variable](./weex-variable.html)
- * [JS Service](./js-service.html)
- * [BroadcastChannel](./broadcast-channel.html)
-* [Built-in Components](./components/)
-* [Built-in Modules](./modules/)
diff --git a/source/references/ios-apis.md b/source/references/ios-apis.md
deleted file mode 100644
index 6e5daad..0000000
--- a/source/references/ios-apis.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: iOS APIs
-type: references
-group: API
-order: 2.3
-version: 2.1
----
-
-# iOS APIs
-
-## Handler(like Android Adapter)
-
-- `WXImgLoaderDefaultImpl` Image load handler. Weex need to implement this interface to download the picture. The interface is defined as follows:
-
- ```object-c
- @protocol WXImgLoaderProtocol <WXModuleProtocol>
- /**
- * @abstract Creates a image download handler with a given URL
- *
- * @param imageUrl The URL of the image to download
- *
- * @param imageFrame The frame of the image you want to set
- *
- * @param options : The options to be used for this download
- *
- * @param completedBlock : A block called once the download is completed.
- * image : the image which has been download to local.
- * error : the error which has happened in download.
- * finished : a Boolean value indicating whether download action has finished.
- */
- - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;
- @end
- ```
-
-## Native interacts with JavaScript
-
-- Custom events
-
- Used for a custom control for event notifications, such as custom click events, response drop events, and so on. This is a method in the component base class that can be used directly.
-
- ```object-c
- /**
- * @abstract Fire an event to the component and tell Javascript which value has been changed.
- * @param eventName
- * @param params
- * @param domChanges
- **/
- - (void)fireEvent:(NSString *)eventName params:(NSDictionary *)params domChanges:(NSDictionary *)domChanges
- ```
-
-- Event callback
-
- Used for Module callback. There are two types of callback:
-
- - `WXModuleCallback`: For performance reasons, the callback can only callback js once, and then will be released.
-
- - `WXModuleKeepAliveCallback`: This callback can be set to multiple callbacks, multiple callbacks of the scene such as continually listen scrolls event and return to js.
-
- ```object-c
- @implementation WXEchoModule
- @synthesize weexInstance;
- WX_EXPORT_METHOD(@selector(echo:))
- - (void)echo:(NSString *)param callback:(WXModuleKeepAliveCallback)callback
- {
- callback(param,ture);
- }
- ```
-
-## Set size of the Weex container
-
-You can use the `setFrame(CGRect)` method to change the size of the Weex container.
-
-## Downgrade
-
-Weex in the development stage will add some new features and new methods, but these new features and functions must be upgraded to achieve the SDK, for the application should not be upgraded how to deal with it? You can use the downgrade feature.
-
-Native can be handled by the `onFailed` method in interface `WXSDKInstance`, and if it is an active demoulding error domain is `TemplateErrorType`, and the Native side can jump to the corresponding H5 page. Or otherwise prompted the user’s current environment does not support Weex.
diff --git a/source/references/js-service.md b/source/references/js-service.md
deleted file mode 100644
index f93ddae..0000000
--- a/source/references/js-service.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: JS Service
-type: references
-group: API
-order: 2.6
-version: 2.1
----
-
-
-# JS Service
-
-<span class="weex-version">v0.9.5+</span>
-
-JS service and Weex instance are parallel in js runtime. Weex instance lifecycle will invoke JS service lifecycle. Currently provide create, refresh, destroy of lifecycle.
-
-!!!Important: JS Service is very powerful. Please be careful to use.
-
-
-## Register JS Service
-
-### iOS
-```objective-c
-[WXSDKEngine registerService:@"SERVICE_NAME" withScript: @"SERVICE_JS_CODE" withOptions: @{}];
-// or
-[WXSDKEngine registerService:@"SERVICE_NAME" serviceScriptUrl: @"SERVICE_JS_URL" withOptions: @{}];
-```
-
-### Android
-```java
-HashMap<String, String> options = new HashMap<>()
-options.put("k1", "v1")
-String SERVICE_NAME = "SERVICE_NAME"
-String SERVICE_JS_CODE = "SERVICE_JS_CODE"
-boolean result = WXSDKEngine.registerService(SERVICE_NAME, SERVICE_JS_CODE, options)
-```
-
-### Web
-```html
-<script src="SERVICE_JS_CODE_URL"></script>
-```
-
-
-
-## Write a JS Service
-```javascript
-service.register(SERVICE_NAME /* same string with native */, {
- /**
- * JS Service lifecycle. JS Service `create` will before then each instance lifecycle `create`. The return param `instance` is Weex protected param. This object will return to instance global. Other params will in the `services` at instance.
- *
- * @param {String} id instance id
- * @param {Object} env device environment
- * @return {Object}
- */
- create: function(id, env, config) {
- return {
- instance: {
- InstanceService: function(weex) {
- var modal = weex.requireModule('modal')
- return {
- toast: function(title) {
- modal.toast({ message: title })
- }
- }
- }
- },
- NormalService: function(weex) {
- var modal = weex.requireModule('modal')
- return {
- toast: function(title) {
- modal.toast({ message: title })
- }
- }
- }
- }
- },
-
- /**
- * JS Service lifecycle. JS Service `refresh` will before then each instance lifecycle `refresh`. If you want to reset variable or something on instance refresh.
- *
- * @param {String} id instance id
- * @param {Object} env device environment
- */
- refresh: function(id, env, config){
-
- },
-
- /**
- * JS Service lifecycle. JS Service `destroy` will before then each instance lifecycle `destroy`. You can deleted variable here. If you doesn't detete variable define in JS Service. The variable will always in the js runtime. It's would be memory leak risk.
- *
- * @param {String} id instance id
- * @param {Object} env device environment
- * @return {Object}
- */
- destroy: function(id, env) {
-
- }
-})
-```
-
-## Using JS Service (vuejs)
-```html
-<script>
-var _InstanceService = new InstanceService(weex)
-var _NormalService = new service.NormalService(weex)
-
-module.exports = {
- created: function() {
- // called modal module to toast something
- _InstanceService.toast('Instance JS Service')
- _NormalService.toast('Normal JS Service')
- }
-}
-</script>
-```
diff --git a/source/references/modules/animation.md b/source/references/modules/animation.md
deleted file mode 100644
index 8081dbc..0000000
--- a/source/references/modules/animation.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: animation
-type: references
-order: 9.01
-version: 2.1
----
-
-# Animation
-
-## Overview
-
-The `animation` module is used to perform animation on components.
-
-JS-Animation can perform a series of simple transformations (position, size, rotation, background color, and opacity) on the component with Javascript.
-
-For example, if you have a `image` component, you can move, rotate, grow, or shrink it by animation.
-
-> **Note:** Ref [transition](../../wiki/common-styles.html#property) or [transform](../../wiki/common-styles.html#transform) if you want to use CSS animation.
-
-## Basic Usage
-
-### animation.transition(ref, options, callback)
-
-```javascript
-animation.transition(test, {
- styles: {
- backgroundColor: '#FF0000',
- transform: 'translate(250px, 100px)',
- },
- duration: 800, //ms
- timingFunction: 'ease',
- needLayout:false,
- delay: 0 //ms
- }, function () {
- modal.toast({ message: 'animation finished.' })
- })
-```
-
-## Attributes
-
-### ``ref``
-
-The element that will be animated.
-
-For example, if the value of `ref` for an element is `test`, you can start an animation with `this.$refs.test`.
-
-### ``options``
-
-- `styles` (object): Specify the names and values of styles to which a transition effect should be applied. The supported styles are listed in the following table:
-
- | name | description | value type | default value |
- | :-------------- | :--------------------------------------- | :-------------------- | :-------------- |
- | width | The width applied to the component after the animation finished. Set `needLayout` to true if you want the change to be persistence. | length | computed width |
- | height | The height applied to the component after the animation finished. Set `needLayout` to true if you want the change to be persistence. | length | computed height |
- | backgroundColor | The background color applied to the component after the animation finished. | string | computed backgroundColor |
- | opacity | The opacity applied to the component after the animation finished. | number between 0 to 1 | computed opacity |
- | transformOrigin | The pivot of transition. The possible values for `x-aris` are `left`/`center`/`right`/length or percent, and possible values of `y-axis` are `top`/`center`/`bottom`/ length or percent | `x-axis y-axis` | `center center` |
- | **transform** | Transform object, which may include `rotate`, `translate`, `scale` and etc. | object | none |
-
- * The following table illustrate the detail of ``transform``.
-
- | name | description | value type | default value |
- | :--------------------------------------- | :--------------------------------------- | :--------------- | :---------------- |
- | translate/translateX/translateY | Specifies the location which the element will be translated to. | pixel or percent | 0 |
- | rotate/rotateX <span class="api-version">v0.14+</span> /rotateY <span class="api-version">v0.14+</span> | Specifies the angle of which the element will be rotated, the unit is degree. | number | 0 |
- | perspective <span class="api-version">v0.16+</span> | 3D perspective. The distance between the z=0 plane and the user. Supported for **Android 4.1** and above. | number | positive infinity |
- | scale/scaleX/scaleY | Stretch or shrink the element. | number | 1 |
-
-- `duration` (number): Specify the duration of animation execution, the default value is `0`, meaning that the component get the desired property immediately.
-- `delay` (number): Specify the waiting time before the animation starts. The default value is `0`.
-- `needLayout`(boolean)：Whether the change to layout(width/height/etc..) is persistence and takes affect after the animation. Default value is `false`
-- `timingFunction` (string): Used to describe how the intermediate values are calculated for the CSS properties being affected by the animation effect. default value is `linear`, the supported values are listed in the following table:
-
- | name | description |
- | :----------------------------- | :--------------------------------------- |
- | `linear` | Specifies a transition effect with the same speed from start to end |
- | `ease` | Specifies a transition effect with a slower and slower speed |
- | `ease-in` | Specifies a transition effect with a slow start |
- | `ease-out` | Specifies a transition effect with a slow end |
- | `ease-in-out` | Specifies a transition effect with a slow start and end |
- | `cubic-bezier(x1, y1, x2, y2)` | Define your own values in the cubic-bezier function. Possible values are parameter values from 0 to 1. More information about cubic-bezier please visit [cubic-bezier](http://cubic-bezier.com/) and [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve). |
-
-### ``callback``
-
-Callback is a function called after the completion of animation. In iOS platform, you can use function to get information of animation execution.
-
->**Note: after WeexSDK0.16.0, in iOS platform can get animation's message about completion, there are two types of parameters with `result`, is `Success`and `Fail`, Android can not support until now.**
-
-> **Note: Android doesn't support the result parameter.**
-
-### Example
-- [animation demo](http://dotwe.org/vue/2d1b61bef061448c1a5a13eac9624410)
diff --git a/source/references/modules/clipboard.md b/source/references/modules/clipboard.md
deleted file mode 100644
index 998e36a..0000000
--- a/source/references/modules/clipboard.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: clipboard
-type: references
-group: Build-in Modules
-order: 9.02
-version: 2.1
----
-
-# clipboard
-<span class="weex-version">v0.8+ (developing)</span>
-
-clipboard allows you to `getString()` or `setString()` from the system clipboard.
-
-Not long ago, We're still suffering from such a situation that we got a verification code sent by SMS, and we had no way to get the code from the SMS text but to typed it by our hands. How frustrated it is! But now you can enable your app to get the code from the system clipboard by calling `clipboard.getString()` .
-
-## Caution
-
-* only support text.
-* only works on Android and iOS. NOT works for html5, for web security reason.
-
-## API
-
-### getString(callback)
-
-reads from clipboard.
-
-##### Arguments
-
-`callback(function)`: the callback function after executing this action. `data` is the return value.
-
-### setString(text)
-
-sets the text to clipboard, having the same effect as copying manually.
-
-##### Arguments
-
-`text(string)`: the text copied to clipboard.
-
-### Example
-
-```html
-<template>
- <div>
- <div class="div">
- <text class="text" @click="onItemClick">{{message}}</text>
- </div>
- <div class="div">
- <text class="text" @click="setContent">Click to copy: {{tobecopied}}</text>
- </div>
- </div>
-</template>
-
-<script>
- const clipboard = weex.requireModule('clipboard')
-
- export default {
- data () {
- return {
- tobecopied: 'yay!',
- message: 'nothing.'
- }
- },
-
- methods: {
- setContent () {
- clipboard.setString(this.tobecopied)
- },
- onItemClick () {
- this.message = 'clicked! '
- clipboard.getString(ret => {
- this.message = 'text from clipboard:' + ret.data
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .div {
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- width: 750px;
- height: 90px;
- padding-left: 30px;
- padding-right: 30px;
-
- border-bottom-width: 1px;
- border-style: solid;
- border-color: #DDDDDD;
- }
- .text {
- width: 750px;
- height: 90px;
- }
-</style>
-```
-
-[try it](http://dotwe.org/vue/126d3cfc5533393e28943978b07aa5c1)
diff --git a/source/references/modules/custom_font.md b/source/references/modules/custom_font.md
deleted file mode 100644
index adf4967..0000000
--- a/source/references/modules/custom_font.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: dom
-type: references
-group: Build-in Modules
-order: 9.03
-version: 2.1
----
-
-# Custom Font <span class="api-version">v0.12.0+</span>
-## OverView
-Weex provide the ability of loading custom through **DOM.addRule**. Developers can load *iconfont* and *custom font* by specifying the **font-family**.
-
-## API
-Developers may use the following code snippet to load their font:
-
- const domModule = weex.requireModule('dom')
- domModule.addRule('fontFace', {
- 'fontFamily': "iconfont2",
- 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
- });
-
-The parameter of **Add Rule** is illustrated as following:
-
-* **fontFace** You should not change this as this is the name of the font rule
-* **fontFamily** You should provide the name of your font-family there, the valid name should be a string.
-* **src** The src of your custom font, and url('') is reserved for protocol reason, the supported parameters are listed below:
- * **http**. Read from http, e.g. `url('http://at.alicdn.com/t/font_1469606063_76593.ttf')`
- * **https**. Read from https, e.g. `url('https://at.alicdn.com/t/font_1469606063_76593.ttf')`
- * **local**, *Android ONLY*. Read from assets directory e.g. `url('local://foo.ttf')`, the **foo.ttf** is in your android assets directory.
- * **file**. Read from a local file, e.g. `url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')`
- * **data**. Read from a base64 data source, e.g. `url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')`, the above data field is only a part of the actual data.
-
-## Note
-> **Note:** You can name `fontFamily` in `addRule` as you wish in your page, any string is OK. But this is not the real font-family name of the font file. The real name or system name for the font is stored in binrary data of ttf file. You must ensure that the real font-family name of font file is unique. Or your font may not be successfully registered to device and your text may display as a '?'.
-
-> **Note:** Specially, if you are using http://www.iconfont.cn/ to build your iconfont. Make sure that you set a unique enough font-family name for your font in project settings.
-
-> **Note:** Calling `addRule` in `beforeCreate` is recommended.
-
-## Example
-Check the custom font [example](http://dotwe.org/vue/7e328ee2ac9b7205c9ee37f4e509263d).
\ No newline at end of file
diff --git a/source/references/modules/dom.md b/source/references/modules/dom.md
deleted file mode 100644
index 4858209..0000000
--- a/source/references/modules/dom.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: custom font
-type: references
-group: Build-in Modules
-order: 9.03
-version: 2.1
----
-
-# Dom
-
-## Overview
-
-The `dom` module is used to manipulate the components in weex pages.
-
-You can use these APIs to get a component's bounding rect in the page, or scroll a list to some specific component, or add a font-face rule to the page and so on.
-
-> **Note:** The `addRule` method is currently used only with font-face supportability.
-
-## API
-
-### scrollToElement(ref, options)
-
-Scroll the scrollable component to the referenced component. This API should only be used in the children components of a scrollable component, such as in a `<scroller>` or `<list>` component.
-
-> **NOTE:** You can use `weex.requireModule('dom')` to requrie the dom module, and use `weex.requireModule('dom').scrollToElement` to call this API.
-
-#### Arguments
-
-* `ref`*(Node)*: the referenced component who is meant to scroll into the view.
-* `options`*(object)*:
- * `offset`*(number)*: An space on top of the ref component, which is also scrolling down to the visual viewport. Default is `0`.
- * `animated` *(bool)*: <sup class="wx-v">0.10+</sup> Indicates whether a scroll animation should be played. If set to false, the ref component will jump into the view without any transition animation. Default is true.
-
-#### Example
-
-[Scroll To Floor](http://dotwe.org/vue/56e0d256cbb26facd958dbd6424f42b2)
-
-### getComponentRect(ref, callback) <span class="api-version">v0.9.4+</span>
-
-`support: >=0.9.4`
-
-You can get the bounding rect of the referenced component using this API.
-
-An example callback result should be like:
-
-```javascript
-{
- result: true,
- size: {
- bottom: 60,
- height: 15,
- left: 0,
- right: 353,
- top: 45,
- width: 353
- }
-}
-```
-
-If you want to get the bounding rect of outside viewport of the weex container, you can specify the `ref` as a literal string `'viewport'`, like `getComponentRect('viewport', callback)`.
-
-#### Example
-
-[get box's rect](http://dotwe.org/vue/d69ec16302e06300096c7285baef538a)
-
-
-### addRule(type, contentObject) <span class="api-version">v0.12.0+</span>
-
-`support: >=0.12.0`
-
-Reference [custom Font](./custom_font.html) for more detail.
\ No newline at end of file
diff --git a/source/references/modules/globalevent.md b/source/references/modules/globalevent.md
deleted file mode 100644
index 7237a6a..0000000
--- a/source/references/modules/globalevent.md
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: globalEvent
-type: references
-group: Build-in Modules
-order: 9.04
-version: 2.1
----
-
-# globalEvent
-<span class="weex-version">v0.8+</span>
-
-## Summary
-
-`globalEvent` are used to listen for persistent events, such as changes in positioning information, gyroscopes, and so on. A global event is a secondary API that requires additional APIs to work with.
-
-You can register events via `addEventListener`, which can be removed by `removeEventListener` when you do not need to listen for `globalEvent`.
-
-*AUCTION*
-- Only instance level is not application level .
-
-## How to make your Module support global events
-API development is complete, when the event needs to be sent, the need through the following methods:
-
-```javascript
-/**
- *
- * @param eventName eventName
- * @param params event params
- */
-instance.fireGlobalEventCallback(eventName,params);
-```
-
-How to dispatch a global event in a weex-html5 component or module ? Just dispatch the event on the document element:
-
-```javascript
-var evt = new Event('some-type')
-evt.data = { foo: 'bar' }
-document.dispatchEvent(evt)
-```
-
-### Example
-
-#### Android
-
-```java
-Map<String,Object> params=new HashMap<>();
-params.put("key","value");
-mWXSDKInstance.fireGlobalEventCallback("geolocation", params);
-```
-#### iOS
-
-```Objective-C
-[weexInstance fireGlobalEvent:@"geolocation" params:@{@"key":@"value"}];
-```
-
-## API
-
-### addEventListener(String eventName, String callback)
-
-register global event.
-
-#### Arguments
-
-* `eventName`*(string)*: The name of the event you want to listen to.
-* `callback`*(function)*: the callback function after executing this action.
-
-#### Example
-
-```javascript
-var globalEvent = weex.requireModule('globalEvent');
-globalEvent.addEventListener("geolocation", function (e) {
- console.log("get geolocation")
-});
-```
-
-### removeEventListener(String eventName)
-
-remove global event
-
-#### Arguments
-
-* `eventName`*(string)*: You no longer need to listen for event names.
-
-#### Example
-
-```javascript
-var globalEvent = weex.requireModule('globalEvent');
-globalEvent.removeEventListener("geolocation");
-```
-
-## Built-in global event
-<span class="weex-version">0.14</span>
-### background or foreground event
-You can specify the event name as `WXApplicationDidBecomeActiveEvent ` or `WXApplicationWillResignActiveEvent` to obtain application becoming foreground or background, so that you can pause your video or music at this time.For example
-
-```
-var globalEvent = weex.requireModule('globalEvent');
-globalEvent.addEventListener("WXApplicationDidBecomeActiveEvent", function (e) {
- console.log("WXApplicationDidBecomeActiveEvent");
-});
-```
-
-- `WXApplicationDidBecomeActiveEvent` fired while application did become foreground
-- `WXApplicationWillResignActiveEvent` fired while application will become background
-
-[have a try at DotWe](http://dotwe.org/vue/5a774e8ce3766c88038cab6fe3331f5b)
-
-> this feature only works on iOS and Android platforms, it doesn't work on Web. [Obtain your weex platform on weex page](../weex-variable.html#weex-environment-object)
-
diff --git a/source/references/modules/index.md b/source/references/modules/index.md
deleted file mode 100644
index c2c849d..0000000
--- a/source/references/modules/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Build-in Modules
-type: references
-group: Build-in Modules
-order: 9.00
-version: 2.1
----
-
-- [dom](./dom.html)
-- [modal](./modal.html)
-- [animation](./animation.html)
-- [navigator](./navigator.html)
-- [meta](./meta.html)
-- [stream](./stream.html)
-- [clipboard](./clipboard.html)
-- [storage](./storage.html)
-- [picker](./picker.html)
-- [webview](./webview.html)
-- [WebSocket](./websocket.html)
-- [globalEvent](./globalevent.html)
diff --git a/source/references/modules/meta.md b/source/references/modules/meta.md
deleted file mode 100644
index c6812fc..0000000
--- a/source/references/modules/meta.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: meta
-type: references
-group: Build-in Modules
-order: 9.05
-version: 2.1
----
-
-# meta
-
-The meta module can be used to update meta information for a single page, such as the viewport of the container.
-
-## API
-
-### setViewport(options)
-
-<span class="weex-version">0.10.0+</span>
-
-The default width (viewport) of Weex container is 750px. The `setViewport` method can change the viewport of the page and only takes effect on the current page.
-
-> Notice: **The viewport must be set before the page rendering starts.** In other words, the `setViewport` method can only be used in the entry file, and before the `new Vue (...)` statement. If it's used in the component, the code is executed only when the component is being rendered, meanwhile, the page is already in the rendering process, set the viewport will not take effect again.
-
-it is only in the rendering of the components will be implemented The corresponding code,
-
-#### Parameters
-
-Referance: W3C Spec [CSS Device Adaptation](https://drafts.csswg.org/css-device-adapt/#viewport-meta).
-
-+ `options`: viewport configuration
- + `width`: Number or `"device-width"` or `"device-height"`.
- + `height`: Number or `"device-width"` or `"device-height"`.
-
-The default unit of the width and height is `px`, other units are not supported.
-
-#### Example
-
-The entry file:
-
-```js
-// entry.js
-
-import App from './app.vue'
-const meta = weex.requireModule('meta')
-
-// The width of the viewport is set to 640px
-meta.setViewport({
- width: 640
-})
-
-App.el = '#root'
-new Vue(App)
-```
-
-After configuring the width of the viewport to 640 in the entry.js, all the components in the current page will take 640px as full screen width.
-
-Example component:
-
-```html
-<!-- app.vue -->
-<template>
- <div>
- <div class="box750">
- <text class="text">750</text>
- <div class="box640">
- <text class="text">640</text>
- <div class="box480">
- <text class="text">480</text>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<style scoped>
- .box750 {
- width: 750px;
- height: 750px;
- background-color: #EEEEEE;
- }
- .box640 {
- width: 640px;
- height: 640px;
- background-color: #CCCCCC;
- }
- .box480 {
- width: 480px;
- height: 480px;
- background-color: #AAAAAA;
- }
- .text {
- font-size: 50px;
- }
-</style>
-```
-
-[Try it](http://dotwe.org/vue/7d0302fe499ab08afdb12a376c646b59). (The http://dotwe.org doesn't support to configure the entry file currently.)
-
-Referance: [Set up development environment](../../guide/set-up-env.html).
diff --git a/source/references/modules/modal.md b/source/references/modules/modal.md
deleted file mode 100644
index 4005769..0000000
--- a/source/references/modules/modal.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: modal
-type: references
-group: Build-in Modules
-order: 9.06
-version: 2.1
----
-
-# modal
-
-Weex provides a series of message boxes: `toast`, `alert`, `confirm` and `prompt`.
-
-## API
-### toast(options)
-
-A toast provides simple feedback about an operation in a small popup. For example, navigating away from an email before you send it triggers a "Draft saved" toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout.
-
-#### Arguments
-- `options` (object): toast options.
- - `message` (string): the text message that the toast shows.
- - `duration` (number): the duration(seconds) that the toast shows.
- - For Android: If the duration is longer than 3, it will use a system defined variable called **LONG**, otherwise it will use another variable called **SHORT**
- - For iOS: It will show the toast during the specified time.
-
-#### Basic Usage
-```
-var modal = weex.requireModule('modal')
-modal.toast({
- message: 'This is a toast',
- duration: 0.3
-})
-```
-
-
-### alert(options, callback)
-
-An alert box is often used if you want to make sure information comes through to the user.
-When an alert box pops up, the user will have to click "OK" to proceed.
-
-#### Arguments
-
-- `options` (object): alert box options.
- - `message` (string): the text message that the alert shows.
- - `okTitle` (string): the text of positive button, default is 'OK'.
- - `callback` (function): callback when complete.
- This method has a callback function whose arguments will be:
-- `result` (string): the title text of the confirm button that clicked by user.
-
-#### Basic Usage
-```
-var modal = weex.requireModule('modal')
-modal.alert({
- message: 'This is a alert',
- duration: 0.3
-}, function (value) {
- console.log('alert callback', value)
-})
-```
-
-
-### confirm(options, callback)
-A confirm box is often used if you want the user to verify or accept something.
-
-When a confirm box pops up, the user will have to click either confirm or cancel button to proceed.
-
-#### Arguments
-- `options` (object): confirm box options.
- - `message` (string): the message that the confirm shows.
- - `okTitle` (string): the title of confirm button, default is 'OK'.
- - `cancelTitle` (string): the title of cancel button, default is 'Cancel'.
-- `callback` (function): callback when complete.
-
-This method has a callback function whose arguments will be:
-- `result`(string): the title text of the button that clicked by user.
-
-#### Basic Usage
-```
-var modal = weex.requireModule('modal')
-modal.confirm({
- message: 'Do you confirm ?',
- duration: 0.3
-}, function (value) {
- console.log('confirm callback', value)
-})
-```
-
-
-### prompt(options, callback)
-
-A prompt box is often used if you want the user to input a value before entering a page.
-When a prompt box pops up, the user will have to click either confirm or cancel button to proceed after entering an input value.
-
-#### Arguments
-- `options` (object): some options.
- - `message` (string): the message that the prompt shows.
- - `okTitle` (string): the title text of confirm button, default is 'OK'.
- - `cancelTitle` (string): the title text of cancel button, default is 'Cancel'.
-- `callback` (function): callback when complete.
- This method has a callback function whose arguments will be:
-- `ret` (object): the argument will be a object, which has attributes `result` and `data`, like `{ result: 'OK', data: 'hello world' }`
- - `result` (string): the title of the button that clicked by user.
- - `data` (string): the value of the text that entered by user.
-
-#### Basic Usage
-```
-var modal = weex.requireModule('modal')
-modal.prompt({
- message: 'This is a prompt',
- duration: 0.3
-}, function (value) {
- console.log('prompt callback', value)
-})
-```
-
-
-## Example
-
-[Modal demo](http://dotwe.org/vue/a7dddfb24edb72be947fc4eec3803f1d)
diff --git a/source/references/modules/navigator.md b/source/references/modules/navigator.md
deleted file mode 100644
index c78c528..0000000
--- a/source/references/modules/navigator.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: navigator
-type: references
-group: Build-in Modules
-order: 9.07
-version: 2.1
----
-
-# Navigator
-
-<span class="weex-version">v0.6.1+</span>
-
-As it's known to all that, we can navigate back and forth in the web browser using the navigation bar.
-And The navigator module mimics the same behaviors in the iOS/Android application. Without such an ability, We will have to stay in the same page forever, so it is very important. Besides the navigation, the module can specify whether to apply animation or not during the transition.
-
-## API
-### push(options, callback)
-
-Push a weex page onto the navigator stack, you can specify whether apply animation when pushing. And you can also specify a callback function to be executed after the operation is over.
-
-**Arguments**
-
-* options(object): some options.
- * url(string): The URL of the weex page to push.
- * animated(string): true, if the weex page is push through animation, otherwise, false. Default value is true.
-
-* callback(object): the callback function to be called after executing this action.
-
-**Example**
-
-```html
- var navigator = weex.requireModule('navigator')
- var modal = weex.requireModule('modal')
- var bundleUrl = weex.config.bundleUrl;
- navigator.push({
- url: bundleUrl,
- animated: "true"
- }, event => {
- modal.toast({ message: 'callback: ' + event })
- })
-```
-
-### pop(options, callback)
-
-pop a weex page onto the navigator stack, you can specify whether apply animation when popping. And you can also specify a callback function to be executed after the operation is over.
-
-**Arguments**
-
-* options(object): some options.
- * animated(string): true if the weex page is pop through animation; otherwise, false. Default value is true.
-* callback(object): the callback function after executing this action.
-
-**Example**
-
-```html
- var navigator = weex.requireModule('navigator')
- var modal = weex.requireModule('modal')
- navigator.pop({ animated: "true"
- }, event => {
- modal.toast({ message: 'callback: ' + event })
- })
-```
-
-## Notice
-Due to the differences in the behavior of the navigation in clients, the above interfaces need to be adapted. You can implement the above interfaces on the client side by seeing the description of the navigation protocol.
-
-In addtion，you can read [How to extend] (https://github.com/apache/incubator-weex-site/blob/master/source/guide/extend-ios.md) in iOS/Android to learn how to register the implementation the protocol on the client.
-
-[try it](http://dotwe.org/vue/f2daa25e32eec2a294d59a9144660cad)
diff --git a/source/references/modules/picker.md b/source/references/modules/picker.md
deleted file mode 100644
index c2d7a01..0000000
--- a/source/references/modules/picker.md
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: picker
-type: references
-group: Build-in Modules
-order: 9.08
-version: 2.1
----
-
-# picker
-
-<span class="weex-version">v0.9+</span>
-
-## Summary
-
-A series of stream api. It provides function: pick data,pick date,pick time
-
-## API
-### `pick(options, callback[options])`
-
-pick data(single column)
-
-#### Arguments
-
-- `options {Object}`:pick options
- - `index {number}`:default selected row
- - `items {array}`:picker's data
- - `textColor {color}`：text color in the picker item
- - `selectionColor {color}`：the background color of the selected item in the picker
- - `confirmTitle {string}`：confirm button text
- - `cancelTitle {string}`：cancel button text
- - `confirmTitleColor {color}`：confirm button text color
- - `cancelTitleColor {color}`：cancel button text color
- - `title {string}`：title of dialog
- - `titleColor {color}`：text color of the dialog title
- - `titleBackgroundColor {color}`：background color of the dialog title
-
-- `callback {function (ret)}`:the callback function after executing this action.`ret {Object}` is `callback` 's parameter:
- - `result {string}`:result is one of success,cancel,error
- - `data {number}`:the selected index,it exists when result is success.
-
-### `pickDate(options, callback[options])`
-
-pick date
-
-#### Arguments
-
-- `options {Object}`:pick date options
- - `value {string}`:Required，date picker selected value by default，date's form is yyyy-MM-dd
- - `max {string}`:optional，date’s max value
- - `min {string}`:optional，date's min value
-
-- `callback {function (ret)}`：the callback function after executing this action.ret {Object} is callback 's parameter:
- - `result {string}`:result is one of success,cancel,error
- - `data {string}`:the selected value，the form of data is yyyy-MM-dd ,it exists when result is success.
-
-### `pickTime(options, callback[options])`
-
-pick time
-
-#### Arguments
-
-- `options {Object}`:pick time options
- - `value {string}`:required，the form of value is HH:mm
-
-- `callback {function (ret)}`:the callback function after executing this action.ret {Object} is callback 's parameter：
- - `result {string}`:result is one of success,cancel,error
- - `data {string}`:the selected value，the form of data is HH:mm,it exists when result is success.
-
-## Example
-
-```html
-<template>
- <div class="wrapper">
- <div class="group">
- <text class="label">Time: </text>
- <text class="title">{{value}}</text>
- </div>
- <div class="group">
- <text class="button" @click="pickTime">Pick Time</text>
- </div>
- </div>
-</template>
-
-<script>
- const picker = weex.requireModule('picker')
-
- export default {
- data () {
- return {
- value: ''
- }
- },
- methods: {
- pickTime () {
- picker.pickTime({
- value: this.value
- }, event => {
- if (event.result === 'success') {
- this.value = event.data
- }
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .wrapper {
- flex-direction: column;
- justify-content: center;
- }
- .group {
- flex-direction: row;
- justify-content: center;
- margin-bottom: 40px;
- align-items: center;
- }
- .label {
- font-size: 40px;
- color: #888888;
- }
- .title {
- font-size: 80px;
- color: #41B883;
- }
- .button {
- font-size: 36px;
- width: 280px;
- color: #41B883;
- text-align: center;
- padding-top: 25px;
- padding-bottom: 25px;
- border-width: 2px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
-</style>
-```
diff --git a/source/references/modules/storage.md b/source/references/modules/storage.md
deleted file mode 100644
index 2a64999..0000000
--- a/source/references/modules/storage.md
+++ /dev/null
@@ -1,175 +0,0 @@
----
-title: storage
-type: references
-group: Build-in Modules
-order: 9.09
-version: 2.1
----
-
-# storage
-<span class="weex-version">v0.7+</span>
-
-## Summary
-
-`storage` is a series of apis, support add, modify and delete stored data.
-
-**Cauction**: There is NO same-origin-policy in weex storage moudle. Any one can access any key, even can change the value. So be careful of your usage.
-
-## API
-
-### setItem(key, value, callback)
-
-When passed a key and a value, it will saved into the storage,
-or update the value if the key already exists.
-
-#### Arguments
-
-* `key`*(string)*: the name of the key you want to store. "" or null is not allowed.
-* `value`*(string)*: the name of the value you want to store."" or null is not allowed.
-* `callback`*(object)*: the callback function after executing this action.
-
-### getItem(key, callback)
-
-When passed a key, will return that key's value.
-
-#### Arguments
-
-* `key`*(string)*: the name of the key you want to retrieve the value of."" or null is not allowed.
-* `callback`*(object)*: the callback function after executing this action.
-
-### removeItem(key, callback)
-
-When passed a key, will remove that key and value from the storage.
-
-#### Arguments
-
-* `key`*(string)*: the name of the key you want to remove."" or null is not allowed.
-* `callback`*(object)*: the callback function after executing this action.
-
-##### Example
-
-```javascript
-var storage = weex.requireModule('storage');
-storage.removeItem('foo', function(e) {
- // callback. 'e' is an object that contains 'result' and 'data'.
- // e.result will return 'success' or 'failed' according to the executing result.
- // e.data will always return 'undefined' in this function if success.
-});
-```
-
-### length(callback)
-
-Returns an integer representing the number of key-value items stored in the storage.
-
-#### Arguments
-
-* `callback`*(object)*: the callback function after executing this action.
-
-### getAllKeys(callback)
-
-Returns an array that contains all keys stored in the storage.
-
-#### Arguments
-
-* `callback`*(object)*: the callback function after executing this action.
-
-## Example
-
-```html
-<template>
- <div class="list">
- <div class="group center">
- <div class="panel"><text class="text">{{state}}</text></div>
- </div>
- <div class="group">
- <div class="panel"><text class="text" @click="setItem">set</text></div>
- <div class="panel"><text class="text" @click="getItem">get</text></div>
- <div class="panel"><text class="text" @click="removeItem">remove</text></div>
- <div class="panel"><text class="text" @click="getAll">all</text></div>
- </div>
- </div>
-</template>
-
-<script>
- const storage = weex.requireModule('storage')
- const modal = weex.requireModule('modal')
-
- export default {
- data () {
- return {
- keys: '[]',
- length: 0,
- state: '----'
- }
- },
- methods: {
- setItem () {
- storage.setItem('name', 'Hanks', event => {
- this.state = 'set success'
- console.log('set success')
- })
- },
- getItem () {
- storage.getItem('name', event => {
- console.log('get value:', event.data)
- this.state = 'value: ' + event.data
- })
- },
- removeItem () {
- storage.removeItem('name', event => {
- console.log('delete value:', event.data)
- this.state = 'deleted'
- })
- },
- getAll () {
- storage.getAllKeys(event => {
- // modal.toast({ message: event.result })
- if (event.result === 'success') {
- modal.toast({
- message: 'props: ' + event.data.join(', ')
- })
- }
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .panel {
- height: 100px;
- flex-direction: column;
- justify-content: center;
- border-width: 2px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
- .group {
- flex-direction: row;
- justify-content: space-between;
- width: 650px;
- margin-left: 50px;
- margin-top: 50px;
- margin-bottom: 50px;
- }
- .center {
- justify-content: center;
- }
- .text {
- font-size: 50px;
- text-align: center;
- padding-left: 25px;
- padding-right: 25px;
- color: #41B883;
- }
- .small {
- font-size: 32px;
- padding-left: 35px;
- padding-right: 35px;
- color: #41B883;
- }
-</style>
-```
-
-[try it](http://dotwe.org/vue/3fdd3e2d1646ca41199d80c7be799858)
diff --git a/source/references/modules/stream.md b/source/references/modules/stream.md
deleted file mode 100644
index 0f8ccda..0000000
--- a/source/references/modules/stream.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: stream
-type: references
-group: Build-in Modules
-order: 9.10
-version: 2.1
----
-
-# stream
-
-A series of stream api. It provides a network request.
-
-## API
-
-### fetch(options, callback,progressCallback)
-
-Start a network request, use two callbacks to receive server's response data.
-
-**Arguments**
-
-* options(object): the request options, key value style dictionary.
-
- * method(string): the HTTP method `GET` or `POST`.
-
- * url(string): the request url.
-
- * headers(string): the HTTP request headers.
-
- * type(string): response type, 'json','text' or 'jsonp'(same as 'json' in native implementation)
-
- * body(string): the HTTP body.
-
-* callback(function): A callback function whose argument is the response object of the request. Callback function will receive a `response` object.
-
- * status(number): response status code.
-
- * ok(boolean): true if status code is bewteen 200～299.
-
- * statusText(string): status text
-
- * data(string): response data. It's a object if request option is `json`/`jsonp`, or *(string)* in other type value.
-
- * headers(object): response headers
-
-* progressCallback(function): A progress callback. This callback will be invoked before request finished.
-
- * readyState(number): Current request state.'1':request connection opened;'2':response headers received.;'3':response data is loading;
-
- * status(number): response status code.
-
- * length(number): bytes of data have received. You can read full length of response from 'headers'.
-
- * statusText(string): status text.
-
- * headers(object): response headers.
-
-### Note
-
- - Default Content-Type is 'application/x-www-form-urlencoded'. (The type specified in fetch is the response type!)
- - You need to set the Content-Type header to 'application/json' manually if you want to post the json body.
-
-### Example
-
-[stream demo](http://dotwe.org/vue/e182a9fbbeb6f0763cd1df1baddf1e10)
diff --git a/source/references/modules/websocket.md b/source/references/modules/websocket.md
deleted file mode 100644
index 4b08a84..0000000
--- a/source/references/modules/websocket.md
+++ /dev/null
@@ -1,219 +0,0 @@
----
-title: webSocket
-type: references
-group: Build-in Modules
-order: 9.11
-version: 2.1
----
-
-# webSocket
-<span class="weex-version">v0.12+</span>
-
-## Summary
-
-WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's H5/iOS/android and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply
-
-## **Notes:**
-- iOS and h5 provide webSocket default handle. if you use webSocket in android environment . you should provide custom adapter implementation,source:
- - [DefaultWebSocketAdapter.java](https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapter.java);
- - [DefaultWebSocketAdapterFactory.java](https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapterFactory.java);
- - refer: [weex playground](https://github.com/apache/incubator-weex/tree/master/android/playground)
-
-## API
-### `WebSocket(url, protocol)`
-
-create websocket
-
-#### Arguments
-
-- `url {string}`:The URL to which to connect;
-- `protocol {string}`:the websocket protocol
-
-### `send(data)`
-
-Transmits data to the server over the WebSocket connection
-
-#### Arguments
-
-- `data {string}`:A text string to send to the server.
-
-### `close(code,reason)`
-
-Closes the WebSocket connection or connection attempt, if any. If the connection is already CLOSED, this method does nothing.
-
-#### Arguments
-
-- `code {number}`: the status code explaining why the connection is being closed.
-- `reason {string}`:a string explaining why the connection is closing
-
-### `onopen(options)`
-
-An event listener to be called when the WebSocket connection's readyState changes to OPEN; this indicates that the connection is ready to send and receive data.
-
-#### Arguments
-
-- `options {object}`:an empty object
-
-### `onmessage(options)`
-
-An event listener to be called when a message is received from the server
-
-#### Arguments
-
-- `options {object}`:the server message options
- - `data {string}`: The listener received message
-
-### `onclose(options)`
-
-An event listener to be called when the WebSocket connection's readyState changes to CLOSED
-
-#### Arguments
-
-- `options {object}`:the CloseEvent is sent to clients using WebSockets when the connection is closed
- - `code {number}`: Returns an unsigned short containing the close code send by the server
- - `reason {string}`: Returns a string indicating the reason the server closed the connection
- - `wasClean {boolen}`: Returns a Boolean that Indicates whether or not the connection was cleanly closed.
-
-### `onerror(options)`
-
-An event listener to be called when an error occurs.
-
-#### Arguments
-
-- `options {object}`:the error event
- - `data {string}`: The listener received error data
-
-### Example
-
-```html
-<template>
- <scroller>
- <div>
- <div style="background-color: #286090">
- <text class="title" style="height: 80px ;padding: 20px;color: white">websocket</text>
- </div>
- <input type="text" placeholder="please input message to send" class="input" autofocus="false" value="" @change="onchange" @input="oninput" ref="input"/>
- <div style="flex-direction: row; justify-content: center;">
- <text class="button" @click="connect">connect</text>
- <text class="button" @click="send">send</text>
- <text class="button" @click="close">close</text>
- </div>
-
- <div style="background-color: lightgray">
- <text class="title" style="height: 80px ;padding: 20px;color: black">method = send</text>
- </div>
- <text style="color: black;height: 80px">{{sendinfo}}</text>
-
-
- <div style="background-color: lightgray">
- <text class="title" style="height: 80px ;padding: 20px;color: black">method = onopen</text>
- </div>
- <text style="color: black;height: 80px">{{onopeninfo}}</text>
-
- <div style="background-color: lightgray">
- <text class="title" style="height: 80px ;padding: 20px;color: black">method = onmessage</text>
- </div>
- <text style="color: black;height: 400px">{{onmessage}}</text>
-
- <div style="background-color: lightgray">
- <text class="title" style="height: 80px ;padding: 20px;color: black">method = onclose</text>
- </div>
- <text style="color: black;height: 80px">{{oncloseinfo}}</text>
-
- <div style="background-color: lightgray">
- <text class="title" style="height: 80px ;padding: 20px;color: black">method = onerror</text>
- </div>
- <text style="color: black;height: 80px">{{onerrorinfo}}</text>
-
- <div style="background-color: lightgray">
- <text class="title" style="height: 80px ;padding: 20px;color: black">method = close</text>
- </div>
- <text style="color: black;height: 80px">{{closeinfo}}</text>
-
- </div>
-
- </scroller>
-</template>
-
-<style scoped>
- .input {
- font-size: 40px;
- height: 80px;
- width: 600px;
- }
- .button {
- font-size: 36px;
- width: 150px;
- color: #41B883;
- text-align: center;
- padding-top: 25px;
- padding-bottom: 25px;
- border-width: 2px;
- border-style: solid;
- margin-right: 20px;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
-</style>
-
-
-<script>
- var websocket = weex.requireModule('webSocket')
- export default {
- data () {
- return {
- connectinfo: '',
- sendinfo: '',
- onopeninfo: '',
- onmessage: '',
- oncloseinfo: '',
- onerrorinfo: '',
- closeinfo: '',
- txtInput:'',
- navBarHeight: 88,
- title: 'Navigator',
- dir: 'examples',
- baseURL: ''
- }
- },
- methods: {
- connect:function() {
- websocket.WebSocket('ws://echo.websocket.org','');
- var self = this;
- self.onopeninfo = 'connecting...'
- websocket.onopen = function(e)
- {
- self.onopeninfo = 'websocket open';
- }
- websocket.onmessage = function(e)
- {
- self.onmessage = e.data;
- }
- websocket.onerror = function(e)
- {
- self.onerrorinfo = e.data;
- }
- websocket.onclose = function(e)
- {
- self.onopeninfo = '';
- self.onerrorinfo = e.code;
- }
- },
- send:function(e) {
- var input = this.$refs.input;
- input.blur();
- websocket.send(this.txtInput);
- this.sendinfo = this.txtInput;
- },
- oninput: function(event) {
- this.txtInput = event.value;
- },
- close:function(e) {
- websocket.close();
- },
- },
- }
-</script>
-```
-
-[Have a try](http://dotwe.org/vue/6d8bdfe66f24fda1a2dc6158b0182573)
diff --git a/source/references/modules/webview.md b/source/references/modules/webview.md
deleted file mode 100644
index 144ff9a..0000000
--- a/source/references/modules/webview.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: webview
-type: references
-group: Build-in Modules
-order: 9.12
-version: 2.1
----
-
-`webview` module provides a series of web operation API like `goBack`, `goForward`, and `reload`. Usually used with the [`<web>` component](../components/web.html).
-
-## API
-
-### goBack(webElement)
-
-Goes to the previous page in WebView's session history.
-
-**Arguments**
-
-- `webElement`*(web)*: the element of the `<web>` component.
-
-### goForward(webElement)
-
-Goes to the next page in WebView's session history.
-
-**Arguments**
-
-- `webElement`*(web)*: the element of the `<web>` component.
-
-### reload(webElement)
-
-Reloads the current web page.
-
-**Arguments**
-
-- `webElement`*(web)*: the element of the `<web>` component.
-
-## Examples
-
-- Simple useage:
-
-```js
-var webElement = this.$el('webview');
-
-var webview = weex.requireModule('webview');
-webview.goBack(webElement.ref);
-webview.goForward(webElement.ref);
-webview.reload(webElement.ref);
-```
-
-- [Browser example](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939)
diff --git a/source/references/weex-variable.md b/source/references/weex-variable.md
deleted file mode 100644
index 6cb4d76..0000000
--- a/source/references/weex-variable.md
+++ /dev/null
@@ -1,195 +0,0 @@
----
-title: Weex Variable
-type: references
-group: API
-order: 2.5
-version: 2.1
----
-
-<!-- toc -->
-
-Each page of Weex contains a `weex` variable in the js runtime context. It can be assessed directly just like a global object, but it's *readonly* and separated from different pages.
-
-> NOTE: **The `weex` variable only exposed in the Vue framework. It's not available in Rax framework yet.**
-
-## Properties and Methods
-
-The type declaration of the Weex variable is:
-
-```typescript
-declare type Weex = {
- config: WeexConfigAPI;
- document: WeexDocument;
- requireModule: (name: string) => Object | void;
- supports: (condition: string) => boolean | void;
-}
-```
-
-## `weex.config`
-
-The `weex.config` contains all the environment information of current page.
-
-```typescript
-declare type WeexConfigAPI = {
- bundleUrl: string;
- bundleType?: string;
- env: WeexEnvironment;
-}
-```
-
-+ `bundleUrl`: The URL of the js bundle in current page.
-+ `bundleType`: <span class="api-version">v0.17+</span> The type of the js bundle, it indicates which framework is using for current js bundle, could be `"Vue"` or `"Rax"`.
-+ `env`: Weex environment object.
-
-### Weex Environment Object
-
-Sometimes, you still need to write some platform specific codes for compatibility or enhancement. Weex provides `weex.config.env` and a global object `WXEnvironment` (they are strictly equal) to get the information of current runtime environment.
-
-```js
-weex.config.env === WXEnvironment
-```
-
-**Properties in Weex environment object**:
-
-| Property | Type | Description |
-| -------------- | ------ | ----------- |
-| `platform` | String | Current running platform, could be "Android", "iOS" or "Web". |
-| `weexVersion` | String | The version of Weex SDK. |
-| `appName` | String | Mobile app name or browser name. |
-| `appVersion` | String | The version of current app. |
-| `osName` | String | The OS name, could be "Android" or "iOS". |
-| `osVersion` | String | The version of current OS. |
-| `deviceModel` | String | Mobile phone device model. (native only) |
-| `deviceWidth` | Number | Screen resolution width. |
-| `deviceHeight` | Number | Screen resolution height. |
-
-[This example](http://dotwe.org/vue/ea2cff9039f3b0e406f8f7da10e874af) prints all properties in the Weex environment object.
-
-## `weex.document`
-
-The `weex.document` is the document object of current page, it can be used to create or manipulate the *Elements* in *DOM tree*. It's part of *Weex DOM API* specification which is NOT the same with the `document` object in the [W3C DOM API](https://www.w3.org/DOM/).
-
-However, it's not a good practice to manipulate DOM directly when using modern front-end frameworks, such as Vue and Rax. Especially, **there is no actually DOM in Weex**, it was simulated on the native (Android or iOS).
-
-This API is mainly used inside of the Vue and Rax framework to convert the virtual-dom into render directives and send them to native render engines of Weex. Not recommended for using it when developing pages.
-
-## `weex.requireModule`
-
-For those features which does not rely on the UI, Weex wraps them into **modules**. It is a way to access native capabilities in javascript. Except for the [built-in modules](./modules/), it's quite easy to integrate the existing native modules to Weex platform. After that, you can use `weex.requireModule` to require both customized and built-in modules.
-
-```typescript
-weex.requireModule(name: string): Object | void;
-```
-
-**Parameter:**
-
-+ A case-sensitive module name.
-
-**Return Value:**
-
-+ If the module is registered, return a `Proxy` or plain object if the context doesn't support `Proxy`. You can use it to call the registered methods in the module.
-+ If the module is unregistered, return `undefined`.
-
-### Use Native Module
-
-You can require a native module and use its APIs just like normal javascript functions. Here is [a simple example](http://dotwe.org/vue/cd7e97f7da08d6d4ca627fc127ab8828) of using the [`modal`](/examples/modal.html) module:
-
-```html
-<template>
- <div><text>Toast</text></div>
-</template>
-<script>
- const modal = weex.requireModule('modal')
- modal.toast({
- message: 'I am a toast.',
- duration: 3
- })
-</script>
-```
-
-## `weex.supports`
-
-> This API only available in <span class="api-version">v0.15+</span>.
-
-As you may know, components and modules are extendable and configurable in Weex. So it could be various in different apps or running context. You can use `weex.supports` to detect whether a feature is supported in the current environment at runtime.
-
-```typescript
-weex.supports(condition: string): boolean | void;
-```
-
-**Parameter:**
-
-+ A formatted condition string: `@{type}/{name}`.
-
-The `type` must be `"component"` or `"module"`. The `name` could be a tag name, module name or the method name in specific module.
-
-**Return Value:**
-
-+ If the feature is supported, return `true`.
-+ If the feature is unsupported, return `false`.
-+ If not sure about whether this feature is supported, return `null`.
-
-### Examples
-
-Detects whether the specific component is supported:
-
-```js
-weex.supports('@component/slider') // true
-weex.supports('@component/my-tab') // false
-```
-
-Detects whether the specific module is supported:
-
-```js
-weex.supports('@module/stream') // true
-weex.supports('@module/abcdef') // false
-```
-
-Detects whether the method in specific module is supported:
-
-```js
-weex.supports('@module/dom.getComponentRect') // true
-weex.supports('@module/navigator.jumpToPage') // false
-```
-
-Invalid input or unknown features:
-
-```js
-weex.supports('div') // null
-weex.supports('module/*') // null
-weex.supports('@stream/fetch') // null
-weex.supports('getComponentRect') // null
-```
-
-## `weex.isRegisteredModule`
-
-Detect whether the specific module or method is registered.
-
-```js
-weex.weex.isRegisteredModule(moduleName: string, methodName: string): boolean
-```
-
-It can only be used to check compatibility of a specific module or method.
-
-```js
-weex.isRegisteredModule('stream') // true
-weex.isRegisteredModule('stream', 'fetch') // true
-weex.isRegisteredModule('whatever', '- unknown -') // false
-weex.isRegisteredModule('div') // false, not support components
-```
-
-## `weex.isRegisteredComponent`
-
-Detect whether the specific component is registered.
-
-```js
-weex.weex.isRegisteredComponent(componentName: string): boolean
-```
-
-It can only be used to check compatibility of a specific component.
-
-```js
-weex.isRegisteredComponent('div') // true
-weex.isRegisteredComponent('- unknown -') // false
-weex.isRegisteredComponent('navigator') // false, not support modules
-```
diff --git a/source/releasenote.md b/source/releasenote.md
deleted file mode 100644
index 77284fa..0000000
--- a/source/releasenote.md
+++ /dev/null
@@ -1,475 +0,0 @@
----
-title: Release Note
-type: releasenote
-layout: post
----
-
-
-## v0.19.0
-
-- [WEEX-219][Android] support copy action for text component [#1037](https://github.com/apache/incubator-weex/pull/1037)
-- [WEEX-228][Android] ShouldStopPropagation Use ShortName StopPropagation [#1042](https://github.com/apache/incubator-weex/pull/1042)
-- [WEEX-222][Android] Sticky header in waterfall is not sticky [#1041](https://github.com/apache/incubator-weex/pull/1041)
-- [WEEX-210][Android] Weex Auto Scan Component And Module Discover [#1032](https://github.com/apache/incubator-weex/pull/1032)
-- [WEEX-216][Android] WXAnimation Fix Memory Leak and performance improve [#1026](https://github.com/apache/incubator-weex/pull/1026)
-- [WEEX-368][Android] Turn single process switch on for jsEngine [#1178](https://github.com/apache/incubator-weex/pull/1178)
-- [WEEX-380][Android] Fix weex show abnormally in single process [#1188](https://github.com/apache/incubator-weex/pull/1188)
-- [WEEX-281][Android] Auto Startup Time Quick [#1141](https://github.com/apache/incubator-weex/pull/1141)
-- [WEEX-325][Android] Some MeiZhu Mobole throw NoClassDefFoundError: android/support/design/widget/AppBarLayout$OnOffsetChangedListener [#1140](https://github.com/apache/incubator-weex/pull/1140)
-- [WEEX-299][Android] Touch event will transmit to next layer, requestDisallowInterceptTouchEvent should be reset for every touch event [#1138](https://github.com/apache/incubator-weex/pull/1138)
-- [WEEX-303][Android] fix nullPoint [#1106](https://github.com/apache/incubator-weex/pull/1106)
-- [WEEX-218][Android] support leftGap and rightGap for waterfall recycle-list's orientation support update attrs [#1031](https://github.com/apache/incubator-weex/pull/1031)
-- [Weex-260][Android] switch supports setting color [#1085](https://github.com/apache/incubator-weex/pull/1085)
-- [WEEX-224][Android] WXDomObject Destory Method Should Be Called avoid Memory Leak [#1086](https://github.com/apache/incubator-weex/pull/1086)
-- [WEEX-378][Android] wson support for weex-core new architecture and remove rapidjson [#1187](https://github.com/apache/incubator-weex/pull/1187)
-- [WEEX-399][Android] remove extra api js [#1203](https://github.com/apache/incubator-weex/pull/1203)
-- [WEEX-376][Android] Fix div layeroverflow event [#1191](https://github.com/apache/incubator-weex/pull/1191)
-- [WEEX-244][Android] Weex Android Support W3c Force Api [#1060](https://github.com/apache/incubator-weex/pull/1060)
-- [WEEX-240][Android] feature update for weexsandbox [#1088](https://github.com/apache/incubator-weex/pull/1088)
-- [WEEX-261][Android] Flat GUI NullPointerException fix [#1081](https://github.com/apache/incubator-weex/pull/1081)
-- [WEEX-288][Android] bug fix, fix on some case cannot get bundle type [#1110](https://github.com/apache/incubator-weex/pull/1110)
-- [WEEX-342][Android] when animation module or transition parser properties, some propers may be not right, so add try catch to handle the exceptions [#1275](https://github.com/apache/incubator-weex/pull/1275)
-- [WEEX-465][Android] fix performance point interactionTime record bug [#1278](https://github.com/apache/incubator-weex/pull/1278)
-- [WEEX-342][Android] ava.util.ConcurrentModificationException at java util.ArrayList$ArrayListIterator.next(ArrayList.java:573)at com.taobao.weex.ui.component.WXComponent.applyEvents(WXComponent.java:290) [#1273](https://github.com/apache/incubator-weex/pull/1273)
-- [WEEX-565][Android] do not set view's id if there is a id in this view [#1436](https://github.com/apache/incubator-weex/pull/1436)
-- [WEEX-564][Android] fix check screen empty logic [#1435](https://github.com/apache/incubator-weex/pull/1435)
-- [WEEX-562][Android] task may be null ,should be check ,not try/catch [#1425](https://github.com/apache/incubator-weex/pull/1425)
-- [WEEX-560][Android] fix null point of apm && report initJSFM fail info [#1422](https://github.com/apache/incubator-weex/pull/1422)
-- [WEEX-342][Android] ava.util.ConcurrentModificationException at java.util.ArrayList$ArrayListIterator.next(ArrayList.java:573)at [#1268](https://github.com/apache/incubator-weex/pull/1268)
-- [WEEX-457][Android] add back performance point of maxVDomDeep && int… [#1262](https://github.com/apache/incubator-weex/pull/1262)
-- [WEEX-454][Android] fix can't find libweexjss when deploy [#1259](https://github.com/apache/incubator-weex/pull/1259)
-- [WEEX-360][Android] Fix crash when reinit framework [#1171](https://github.com/apache/incubator-weex/pull/1171)
-- [WEEX-430][Android] Delete arm-v7a and x86 so before the program is run. [#1235](https://github.com/apache/incubator-weex/pull/1235)
-- [WEEX-412][Android] support multi vm [#1217](https://github.com/apache/incubator-weex/pull/1217)
-- [WEEX-419][Android] weeks bugfix for weexcore appear [#1246](https://github.com/apache/incubator-weex/pull/1246)
-- [WEEX-498][Android] fix report url is bundleUrlDefault [#1313](https://github.com/apache/incubator-weex/pull/1313)
-- [WEEX-506][Android] try fix report defaultUrl in mutilThread case [#1331](https://github.com/apache/incubator-weex/pull/1331)
-- [WEEX-453][iOS] transform/transformOrigin conflict when updateStyles [#1260](https://github.com/apache/incubator-weex/pull/1260)
-- [WEEX-262][iOS] Add new interface of Instance,which will terminate re… [#1079](https://github.com/apache/incubator-weex/pull/1079)
-- [WEEX-245][iOS] fix CTFont crash on iOS10 [#1062](https://github.com/apache/incubator-weex/pull/1062)
-- [WEEX-241][iOS] add WXVideoComponent "poster" attribute [#1051](https://github.com/apache/incubator-weex/pull/1051)
-- [WEEX-218][iOS] support leftGap and rightGap for waterfall component [#1029](https://github.com/apache/incubator-weex/pull/1029)
-- [WEEX-219][iOS] support copy action for text component [#1030](https://github.com/apache/incubator-weex/pull/1030)
-- [WEEX-215][iOS] recycle-list scroll orientation support [#1027](https://github.com/apache/incubator-weex/pull/1027)
-- [WEEX-375][iOS] add Protocol for PageEventNotifyEvent [#1183](https://github.com/apache/incubator-weex/pull/1183)
-- [WEEX-373][iOS] try to fix the issue about _remove_assocations [#1182](https://github.com/apache/incubator-weex/pull/1182)
-- [WEEX-345][iOS] fix animationModule with needLayout bug with nil propery [#1165](https://github.com/apache/incubator-weex/pull/1165)
-- [WEEX-339][iOS] add componentTime/Count monitor [#1150](https://github.com/apache/incubator-weex/pull/1150)
-- [WEEX-350][iOS] fix anim crash caused by problem that [WXConvert CGFl… [#1163](https://github.com/apache/incubator-weex/pull/1163)
-- [WEEX-343][iOS] Failure of "scaleY" on animationModule [#1154](https://github.com/apache/incubator-weex/pull/1154)
-- [WEEX-313][iOS] fix RTL issue [#1134](https://github.com/apache/incubator-weex/pull/1134)
-- [WEEX-297][iOS] fix iOS 11 save image permission [#1119](https://github.com/apache/incubator-weex/pull/1119)
-- [WEEX-282][iOS] update layout system to support rtl direction [#1105](https://github.com/apache/incubator-weex/pull/1105)
-- [WEEX-270][iOS] WXListComponent should add reload type of data update [#1095](https://github.com/apache/incubator-weex/pull/1095)
-- [WEEX-489][iOS] Fix resource not loaded when using dynamic framework … [#1305](https://github.com/apache/incubator-weex/pull/1305)
-- [WEEX-484][iOS] Failure of parsing transform parameter when in third-party environment [#1298](https://github.com/apache/incubator-weex/pull/1298)
-- [WEEX-468][iOS] Try to fix Fixed component related crash. [#1281](https://github.com/apache/incubator-weex/pull/1281)
-- [WEEX-548][iOS] Weex devtool can not debug recycle list [#1395](https://github.com/apache/incubator-weex/pull/1395)
-- [WEEX-563][iOS] fix the attribute of linear-gradient on iOS [#1434](https://github.com/apache/incubator-weex/pull/1434)
-- [WEEX-559][iOS] Fix issue that handleAppear should be resent for lazil… [#1420](https://github.com/apache/incubator-weex/pull/1420)
-- [WEEX-556][iOS] Fix video play state is not 'play' while set autoplay… [#1418](https://github.com/apache/incubator-weex/pull/1418)
-- [WEEX-555][iOS] fix layout engin bug [#1414](https://github.com/apache/incubator-weex/pull/1414)
-- [WEEX-552][iOS] apm for ios [#1412](https://github.com/apache/incubator-weex/pull/1412)
-- [WEEX-413][iOS] Fix when main thread parse transform cause deadlock [#1218](https://github.com/apache/incubator-weex/pull/1218)
-- [WEEX-513][iOS] Fix build issue [#1338](https://github.com/apache/incubator-weex/pull/1338)
-- [WEEX-513][iOS] Improve WeexSDK project file [#1337](https://github.com/apache/incubator-weex/pull/1337)
-- [WEEX-511][iOS] Fix debug log may crash when there is a retain cycle … [#1335](https://github.com/apache/incubator-weex/pull/1335)
-- [WEEX-501][iOS] Try to fix insert table view cell exception abort on iOS [#1322](https://github.com/apache/incubator-weex/pull/1322)
-- [WEEX-496][iOS] In CoreText mode, origin of first line is incorret un… [#1312](https://github.com/apache/incubator-weex/pull/1312)
-- [WEEX-353][iOS] Add weex-polyfill.js [#1164](https://github.com/apache/incubator-weex/pull/1164)
-- [WEEX-442][Core] Fix compile error [#1272](https://github.com/apache/incubator-weex/pull/1272)
-- [WEEX-442][Core] Fix setViewport [#1271](https://github.com/apache/incubator-weex/pull/1271)
-- [WEEX-458][Core] remove coremanager setxxx returntype [#1263](https://github.com/apache/incubator-weex/pull/1263)
-- [WEEX-433][Core] rm jni code from weexcore [#1238](https://github.com/apache/incubator-weex/pull/1238)
-- [WEEX-386][Core] Fix apply default style [#1220](https://github.com/apache/incubator-weex/pull/1220)
-- [WEEX-405][Core] make wson compilation modular [#1210](https://github.com/apache/incubator-weex/pull/1210)
-- [WEEX-411][Core] Fix memory leak due to return render time [#1214](https://github.com/apache/incubator-weex/pull/1214)
-- [WEEX-370][Core] Use GNU C++ Runtime [#1180](https://github.com/apache/incubator-weex/pull/1180)
-- [WEEX-376][Core] Support layeroverflow event [#1186](https://github.com/apache/incubator-weex/pull/1186)
-- [WEEX-445][jsfm] export requireModule to global [#1254](https://github.com/apache/incubator-weex/pull/1254)
-- [WEEX-397][jsfm] update build script of js framework [#1342](https://github.com/apache/incubator-weex/pull/1342)
-- [WEEX-547][jsfm] Remove module proxy cache of weex.requireModule [#1389](https://github.com/apache/incubator-weex/pull/1389)
-- [WEEX-461][jsfm] Remove useless trace function in js framework [#1358](https://github.com/apache/incubator-weex/pull/1358)
-
-
-## v0.18.0
-
-- `feature` `Android/iOS` TemplateList support lifecycle and statefull component [#1019](https://github.com/apache/incubator-weex/pull/1019) [#1023](https://github.com/apache/incubator-weex/pull/1023)
-- `feature` `Android` Support real time format to input component, support disable copy paste to input component [#1013](https://github.com/apache/incubator-weex/pull/1013)
-- `feature` `Android` Support use base64 to import fontface [#1006](https://github.com/apache/incubator-weex/pull/1006)
-- `feature` `Android` High performance binary Wson supported [#974](https://github.com/apache/incubator-weex/pull/974)
-- `feature` `Android` New touch dispatch mechanism and bubble sync method call for android touch event [#961](https://github.com/apache/incubator-weex/pull/961)
-- `feature` `Android` Support set global font to text component [#952](https://github.com/apache/incubator-weex/pull/952)
-- `feature` `Android` List component supported show scrollbar options [#951](https://github.com/apache/incubator-weex/pull/951)
-- `feature` `Android` box-shadow support multi shadows declaration [#915](https://github.com/apache/incubator-weex/pull/915)
-- `feature` `Android` Support `role` property to accessibility [#911](https://github.com/apache/incubator-weex/pull/911)
-- `bugfix` `Android` Fix network operation on main thread by WebSocket [#1015](https://github.com/apache/incubator-weex/pull/1015)
-- `bugfix` `Android` Fix font not rendered right when font is first downloaded [#972](https://github.com/apache/incubator-weex/pull/972)
-- `bugfix` `Android` Fix the `background-color` can not be set to `transparent` [#959](https://github.com/apache/incubator-weex/pull/959)
-- `bugfix` `Android` Improve JSService usage, support mutil type params [#941](https://github.com/apache/incubator-weex/pull/941)
-- `bugfix` `Android` Fix fix security weaknesses on libweex*.so [#934](https://github.com/apache/incubator-weex/pull/934)
-- `bugfix` `Android` Fix long-running operation on WXThread.scure() [#919](https://github.com/apache/incubator-weex/pull/919)
-- `bugfix` `Android` Fix status of pseudo class can not restore after touch [#907](https://github.com/apache/incubator-weex/pull/907)
-- `bugfix` `Android` Fix parallax component not reseted to right position when scrollToElement with animated:false option [#906](https://github.com/apache/incubator-weex/pull/906)
-- `feature` `weex-js-framework` Upgrade weex-vue-framework to [v2.5.13](https://github.com/vuejs/vue/releases/tag/v2.5.13), which implemented the `<recycle-list>`.
-- Only update batched and mutated attributes and styles in js framework ([#953](https://github.com/apache/incubator-weex/pull/953))
-- `feature` `weex-js-framework` Support append as tree on root element ([#954](https://github.com/apache/incubator-weex/pull/954))
-- `improvement` `weex-js-framework` Enhance the multi-instance isolation (sandbox) ([#960](https://github.com/apache/incubator-weex/pull/960))
-- `improvement` `weex-js-framework` Refactor the file structure and build scripts of js framework ([#964](https://github.com/apache/incubator-weex/pull/964) | [#1010](https://github.com/apache/incubator-weex/pull/1010))
-- `improvement` `weex-js-framework` Stop using ES6 Proxy to require a module ([#1017](https://github.com/apache/incubator-weex/pull/1017))
-- `bugfix` `iOS` bugfix about longpress and pangesture innner waterfall component invalid[#1007](https://github.com/apache/incubator-weex/pull/1007)
-- `improvemnet` `iOS` improve for threadSafe dictionary [1005](https://github.com/apache/incubator-weex/pull/1005)
-- `feature` `iOS` deprecate WXCallback and WXModuleCallback, use WXKeepAliveCallback and WXModuleKeepAliveCallback [1000](https://github.com/apache/incubator-weex/pull/1000)
-- `bugfix` `iOS` bugfix about iconfont draw failed on occasion [#997](https://github.com/apache/incubator-weex/pull/997)
-- `improvement` `iOS` [remove redundant implementation of slider](https://github.com/apache/incubator-weex/pull/973)
-- `feature` `iOS` support css value for safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom like [iPhone X design](https://webkit.org/blog/7929/designing-websites-for-iphone-x/)[#916](https://github.com/apache/incubator-weex/pull/916)
-- `feature` `iOS` support word-wrap on iOS when drawing text [#887](https://github.com/apache/incubator-weex/pull/887)
-- `improvement` `web` refactor appear watcher, image lazyloading, components implementation, some APIs, and the event triggering and handling system.
-- `improvement` `web` significantly improved runtime performance.
-- `bugfix` `web` fix event binding.
-- `bugfix` `web` fix indicator item styles.
-- `bugfix` `web` fix slider's overflow style.
-- `feature` `web` support create weex components through render function.
-- `feature` `web` support binding native events for custom components with .native modifier.
-- `feature` `web` all weex native events should be dispatched through dom elements.
-- `improvement` `web` refactor test procedure flow and increase test cases' total number to 96.
-- `bugfix` `web` fix two way binding for `<input>` component.
-- `bugfix` `web` fix return event for `<input>` component.
-- `bugfix` `web` fix errors relative to createEventMap.
-- `feature` `web` now you can use 'wx' unit.
-- `improvement` `web` remove weex.createEventMap method.
-- `bugfix` `web` fix <switch> component's styles.
-- `bugfix` `web` fix test cases for `<switch>` and `<input>`.
-- `bugfix` `web` webview.reload for `<web>` component always throws a error.
-- `bugfix` `web` should trigger error event when a cross origin issue arises.
-- `bugfix` `web` always trigger a error event when loaded a cross origin page.
-- `bugfix` `web` trigger duplicated appear/disappear events when there're more than one list.
-
-## v0.17
-
-* `feature` `Android/iOS` Support `writing direction style:direction=rtl`([#782](https://github.com/apache/incubator-weex/pull/782)[#886](https://github.com/apache/incubator-weex/pull/886))
-* `feature` `Android/iOS` Support scroll start and scroll end event on scroller and list ([#858](https://github.com/apache/incubator-weex/pull/858)[856](https://github.com/apache/incubator-weex/pull/856))
-* `feature` `iOS` support text max-width （[#834](https://github.com/apache/incubator-weex/pull/834)）
-* `feature` `Android` CSS Transiton Animation Supported component ([#851](https://github.com/apache/incubator-weex/pull/851))
-* `feature` `Android` New `local` module ([#781](https://github.com/apache/incubator-weex/pull/781))
-* `feature` `Android` Support ripple background on Android 5.0 and higher ([#792](https://github.com/apache/incubator-weex/pull/792))
-* `feature` `Android` Support multi language on dialog ([#831](https://github.com/apache/incubator-weex/pull/831))
-* `feature` `H5` Support lazyload and appear watcher when body height set to 100% ([#827](https://github.com/apache/incubator-weex/pull/827)).
-* `feature` `H5` Add try catch for storage accessing incase user disabled the related function in a browser ([#827](https://github.com/apache/incubator-weex/pull/827)).
-* `feature` `H5` image support css sprite (sprite-src, sprite-position, sprite-width) ([#827](https://github.com/apache/incubator-weex/pull/827)).
-* `feature` `JSFM` Support batch update styles and attributes in Vue.js ([#819](https://github.com/apache/incubator-weex/pull/819) [#7046](https://github.com/vuejs/vue/pull/7046))
-* `feature` `JSFM` Stop trimming CSS units in richtext component. ([#6927](https://github.com/vuejs/vue/pull/6927))
-* `feature` `JSFM` Stop rethrow the captured error on Weex platform. ([#7024](https://github.com/vuejs/vue/pull/7024))
-* `feature` `JSFM` Upgrade weex-vue-framework to 2.5.3 ([release nodes](https://github.com/vuejs/vue/releases/tag/v2.5.3))
-* `feature` `JSFM` Adjust the behavior of `nextTick` to improve compatibility.
-* `bugfix` `iOS` bugfix boxshadow render abnormal （[#791](https://github.com/apache/incubator-weex/pull/791)）
-* `bugfix` `iOS` bugfix timer exposed on JSContxt （[#839](https://github.com/apache/incubator-weex/pull/839)）
-* `bugfix` `iOS` fix iOS8 scrollview’s assign delegate crash （[#838](https://github.com/apache/incubator-weex/pull/838)）
-* `bugfix` `iOS` fix setViewport：sometimes doesn’t work（[#843](https://github.com/apache/incubator-weex/pull/843)）
-* `bugfix` `iOS` fix addEvent lead to generate a new view while it as been recycled （[#837](https://github.com/apache/incubator-weex/pull/837)）
-* `bugfix` `iOS` fix about setting nan frame crash （[#853](https://github.com/apache/incubator-weex/pull/853)）
-* `bugfix` `iOS` disable tableview estimation row or section height which make list component behavior abnormal （[#867](https://github.com/apache/incubator-weex/pull/867)）
-* `bugfix` `Android` Fix that moveElement doesn’t work when parent is not a list ([#805](https://github.com/apache/incubator-weex/pull/805))
-* `bugfix` `Android` Fix flicker caused by coexistence of box-shadow and border-radius (#[780](https://github.com/apache/incubator-weex/pull/780))
-* `bugfix` `Android` Fix android new Date() cannot get accuracy time ([#753](https://github.com/apache/incubator-weex/pull/753))
-* `bugfix` `H5` Fix scroll event listenning and scrollToElement on chrome for the latest version ([#827](https://github.com/apache/incubator-weex/pull/827)).
-
-## v0.16
-
-* support 3d rotate ([#532](https://github.com/apache/incubator-weex/pull/532) [#418](https://github.com/apache/incubator-weex/pull/418))
-* new feature support perspective function in transform ([#551](https://github.com/apache/incubator-weex/pull/551)[#532](https://github.com/apache/incubator-weex/pull/532))
-* new feature support save image to photo album ([547](https://github.com/apache/incubator-weex/pull/547) [575](https://github.com/apache/incubator-weex/pull/575) [544](https://github.com/apache/incubator-weex/pull/544))
-* support `image.save` ([#575](https://github.com/apache/incubator-weex/pull/575)).
-* optimize event binding and support mobile firefox, and also fix a lot of other things ([#606](https://github.com/apache/incubator-weex/pull/606)).
-* Support js service in Rax DSL.
-* Partial support of sending `ArrayBuffer` between js and native.
-* Add basic support of `<recycle-list>`, both in Vue and Rax DSL.
-* Support saving image to photo alubm in `image` [#547](https://github.com/apache/incubator-weex/pull/547)
-* Support perspective features [#551](https://github.com/apache/incubator-weex/pull/551)
-* New interface to performance tracing [#586](https://github.com/apache/incubator-weex/pull/586)
-* Add the ability of FlatGUI, it can reduce the view hierarchy in `cell` [#643](https://github.com/apache/incubator-weex/pull/643)
-* Support the `box-shadow` style for Android 4.3 and higher [#685](https://github.com/apache/incubator-weex/pull/685)
-* Support float interval/delay in timer [#699](https://github.com/apache/incubator-weex/pull/699)
-* New `recycle-list` compoent with hight performance and low memory cost [#726](https://github.com/apache/incubator-weex/pull/726)
-* remove dependency about socketRocket dependency in iOS.
-* fix coretext crash in iOS.
-* fix toast view still pop while the page was destroyed in iOS.
-* separate weex-vue-render into two parts: render core and plugins ([#533](https://github.com/apache/incubator-weex/pull/533)).
-* Fix Jni crash due to emoji [#574](https://github.com/apache/incubator-weex/pull/574)
-* Fix the lost refresh header of `list` in viewpager [#601](https://github.com/apache/incubator-weex/pull/601)
-* Fix draw iconfont fail when first download iconfont [#625](https://github.com/apache/incubator-weex/pull/625)
-* Fix the problem of 'text-overflow:clip' [#718](https://github.com/apache/incubator-weex/pull/718)
-* Fix android new Date() cannot get accuracy time [#753](https://github.com/apache/incubator-weex/pull/753)
-
-## v0.15
-------
-* support fast click and hairlines border [#507](https://github.com/apache/incubator-weex/pull/507).
-* Add `weex.supports` api for feature detections. [#6053](https://github.com/vuejs/vue/pull/6053)
-* Change default image quality to `WXImageQuality.AUTO` [#478](https://github.com/apache/incubator-weex/pull/478)
-* Support the `scroll` event on horizontal scroller[#494](https://github.com/apache/incubator-weex/pull/494)
-* Fix the console API to adapt JSC on Android. [#470](https://github.com/apache/incubator-weex/pull/470)
-* Fix invalid call scrollToElement when has not option param [#491](https://github.com/apache/incubator-weex/pull/491)
-* Fix the lines of `text` cannot be reset [#493](https://github.com/apache/incubator-weex/pull/493)
-* Fix invalid init index on `slider` [#510](https://github.com/apache/incubator-weex/pull/510)
-* Fix Memory optimization for `list` [#512](https://github.com/apache/incubator-weex/pull/512)
-
-## v0.14
-------
-* support `waterfall` component ([#438](https://github.com/apache/incubator-weex/pull/438)).
-* support pseudo-class ([#474](https://github.com/apache/incubator-weex/pull/474)).
-* Support component method in Vue DSL. ([proposal](https://github.com/alibaba/weex/issues/969))
-* Support returning value synchronously for module methods. ([proposal](https://github.com/alibaba/weex/issues/1677))
-* Support drag-drop on `list` [#416](https://github.com/apache/incubator-weex/pull/416)
-* Support rotateX and rotateY, optimize animation as well [#418](https://github.com/apache/incubator-weex/pull/418)
-* Fix wrong vertical offset in scroll event on `waterfall` [#424](https://github.com/apache/incubator-weex/pull/424)
-* Fix `clearTimeout` and `clearInterval` doesn't work when funId is greater than 127 [#439](https://github.com/apache/incubator-weex/pull/439)
-
-## v0.13.0
-
-* Slider implemention is refactored [Pull Request#414](https://github.com/apache/incubator-weex/pull/414)
-* Improve integration test. We are working with macaca team, to write better test code.[Pull Request#411](https://github.com/apache/incubator-weex/pull/411) [Pull Request#397](https://github.com/apache/incubator-weex/pull/397) [Pull Request#402](https://github.com/apache/incubator-weex/pull/402) [Pull Request#413](https://github.com/apache/incubator-weex/pull/413) [Pull Request#390](https://github.com/apache/incubator-weex/pull/390) [Pull Request#346](https://github.com/apache/incubator-weex/pull/346) [Pull Request#319](https://github.com/apache/incubator-weex/pull/319) [Pull Request#304](https://github.com/apache/incubator-weex/pull/304) [Pull Request#295](https://github.com/apache/incubator-weex/pull/295)
-* `scroller` now has `pagingEnabled` attribute, which can enable `paging` feature in native [Pull Request#393](https://github.com/apache/incubator-weex/pull/393)
-* New 'prerender' mechanism, which will support rendering a page in background. [Pull Request#343](https://github.com/apache/incubator-weex/pull/343) Pull Request#342](https://github.com/apache/incubator-weex/pull/342)
-* Fix `line-height` feature in iOS. [Pull Request#377](https://github.com/apache/incubator-weex/pull/377) [Pull Request#305](https://github.com/apache/incubator-weex/pull/305)
-* Add `needLayout` option in animation module operation after animation finished [Pull Request#337](https://github.com/apache/incubator-weex/pull/337) [Pull Request#336](https://github.com/apache/incubator-weex/pull/336)
-* `list` component has new type of event for `sticky` feature [Pull Request#332](https://github.com/apache/incubator-weex/pull/332)
-* Support bota and atob [Pull Request#315](https://github.com/apache/incubator-weex/pull/315)
-* Fix mixing background-color and border-color(rgba) in android [Pull Request#359](https://github.com/apache/incubator-weex/pull/359)
-* Beside these, lots of crashes and bugs are fixed.
- * [Pull Request#441](https://github.com/apache/incubator-weex/pull/441)
- * [Pull Request#413](https://github.com/apache/incubator-weex/pull/413)
- * [Pull Request#403](https://github.com/apache/incubator-weex/pull/403)
- * [Pull Request#373](https://github.com/apache/incubator-weex/pull/373)
-
-## v0.12.0 (First Offical Release)
-
-
-- C++ timer by lycool
- - Discussed in https://lists.apache.org/thread.html/567c9b19d68ccf3e0d24c1467298ebcd4316ffa524c557a34c6c087f@%3Cdev.weex.apache.org%3E
- - relate pull requests:[apache/incubator-weex/pull/228|https://github.com/apache/incubator-weex/pull/228], [apache/incubator-weex/pull/232|https://github.com/apache/incubator-weex/pull/232], [apache/incubator-weex/pull/221|https://github.com/apache/incubator-weex/pull/221]
-- Add scroller/list scroll event in html5 render android&iOS already have this feature in v0.11 https://github.com/apache/incubator-weex/commit/f50fba8647c8bb6ac522b1a4569a2a2269da1953
-- Enhance accessibility, new `aria-label` & `role` support [apache/incubator-weex/pull/149|https://github.com/apache/incubator-weex/pull/149]
-- Native input/textarea enhancement by kfeagle & misakuo support `number` data type; support soft keyboard event
-- Picker module enhancement More picker options to customize picker dialog style(background color etc.). Related pull requests: [apache/incubator-weex/pull/234|https://github.com/apache/incubator-weex/pull/234], [apache/incubator-weex/pull/233|https://github.com/apache/incubator-weex/pull/233]
-- Android DOM module refactor Seperate module code by action, increasing the maintainability. [apache/incubator-weex/pull/104|https://github.com/apache/incubator-weex/pull/104]
-
-## v0.10.0
-
-- New Feature
- - Support Vue.js
- The Vue.js 2.1.8 ([runtime-only build](https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build)) is in WeexSDK now. You can use Vue.js to build native app by WeexSDK 0.10.0.
- We reused the original native render engine and developed a new renderer ([weex-vue-render](https://www.npmjs.com/package/weex-vue-render)) for the web platform, which is based on Vue 2.0.
- The former front-end framework (commonly known as `.we`), which is inspired by Vue 1.0, is deprecated. Although it still works well in this release, we suggest to migrate it to Vue 2.0.
- - SDK
- - New CSS support
- - [text `font-weight`](https://weex.apache.org/wiki/text-styles.html)
- `font-weight` can set to [`normal`|`bold`] or 100-900.
- - gradient
- like CSS3, now you can use gradient in Weex. For example:
-
- ``` css
- background-image: linear-gradient(to right, blue, white);
- ```
- 
- [Read more about gradient](https://weex.apache.org/wiki/common-styles.html#linear-gradient-v0-10).
- - Pseudo class
- Currently, Weex supports 4 pseudo classes:`active`, `focus`, `disabled`, `enabled`.
- - New BroadcastChannel API
- Developers can use `BroadcastChannel` API to implement inter-instance communication.
-
- ``` js
- const Stack = new BroadcastChannel('Avengers')
- Stack.onmessage = function (event) {
- console.log(event.data) // in this case, it's "Hulk Smash !!!"
- }
- // in another instance
- const Hulk = new BroadcastChannel('Avengers')
- Hulk.postMessage("Hulk Smash !!!")
- ```
- - Image's `onload` event add [`naturalHeight` and `naturalWidthimage`](https://weex-project.io/references/components/image.html) to get the original size of image file.
- - Websocket Support
- WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's h5/iOS/android and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.
- [Read more about Weex's websocket.](https://weex-project.io/cn/references/modules/websocket.html)
- - Support synchronous method call
- Both module and component method can defined synchronous method exposed to JS runtime now. Means native will invoke these method in JS thread directly.
- - Support `viewport` configuration
- Similar to [W3C specification](https://drafts.csswg.org/css-device-adapt/#viewport-meta), Weex support set define `viewport` in script tag:
-
- ``` html
- <script type="config">
- {
- "viewport": {
- "width": "device-width"
- }
- }
- </script>
- ```
- - Tools
- - [Devtools](https://github.com/weexteam/weex-devtool)
- - Support Vue 2.0 debugging.
- - Add network switch for network inspector.
- - Make application capable to decide which bundle is 'un-debuggable', which means page's source code is unreadable in debug mode.
- - [Weexpack](https://github.com/weexteam/weex-pack)
- - Has full set of commands for developers to setup android/ios application with his .we/.vue files.
- - Developers could easily pack/install his application with simple command.
- - Has full set of commands for developers to manage weex plugins, including create plugin template, add plugin to his project etc.
- - [Plugin market](https://market.dotwe.org) was formally used for developers to publish/download weex plugins.
-
-
-## v0.9.4
-
-- New features
- - SDK
- - New API to get Component's size and position:
- Now you can get these data through `getComponentRect`:
- ``` javascript
- var dom = require('@weex-module/dom');
- dom.getComponentRect(this.$el('comp_id'), function(data){
- if(data.result)
- console.log(data);
- });
- ```
- The `data` callback parameter contains a `result` to tell if operation is success. And `size` tell you the true data(`bottom`/`top`/`left`/`right`/`width`/`height`) of component.
- - A brand new `picker` module. We have 'single-picker','date-picker' and 'time-picker' currently, and more common pickers are on the way.
- 
- There are two ways to use `picker`
- - Use `picker` module directly:
- ``` javascript
- var picker = require('@weex-module/picker');
- var self = this;
- picker.pickDate({
- 'value':'2016-11-28',
- 'max':'2029-11-28',
- 'min':'2015-11-28'
- },function (ret) {
- var result = ret.result;
- if(result == 'success')
- {
- self.value = ret.data;
- }
- });
- ```
- - `input` component also add 'date' and 'time`type to work with`picker` module internally:
- ``` html
- <input
- type="date"
- placeholder="select date"
- class="input"
- autofocus="false"
- value=""
- onchange="onchange"
- max = "2029-11-28"
- min = "2015-11-28"
- ></input>
- ```
- - Support animation with `width` and `height` property.
- - Support use empty value to reset css property to default value.
- - Components can expose methods too, like modules do. Developers use the same way as create module method to achieve that.
- - Add `blur` and `focus` method to manually control `input` component to lose or get focus.
- - Support relative URL, which will resolve real URL by bundle's URL.
- - Core javascript framework's unit test coverage is 100% now. we'll pay more attention to quality.
- - DevTool
- - Support to check the node hierarchy in [weex-devtool-extension](https://github.com/weexteam/weex-devtool-extension) and highlight the node if it exceeds an specified level.
- - Support different refresh mode in devtools to reload the page or SDK automatically when source file updated.
- - Improve quality in [weex-devtools-android](https://github.com/weexteam/weex-devtools-android) module
- - Remove explicit dependency on okhttp and okhttp3 by reflection and proxy
- - Improve demo application with less and refactored code
- - Fix some crash caused by class up cast
- - Fix reflection crash caused by complier optimization
- - Fix "network on main thread" and stop screencast when disconnect
- - Add [weex-analyzer-android](https://github.com/weexteam/weex-analyzer-android) and [weex-analyzer-ios](https://github.com/weexteam/weex-analyzer-ios) which support the following on device directly:
- - Inspect FPS/CPU/memory
- - Inspect storage
- - Display log information
- - 3D viewer of the weex page
- - Javascript error prompt
-
-
-## v0.8.0
-
-- New Features
- - Add [globalEvent module](https://github.com/alibaba/weex/blob/doc/doc/modules/globalevent.md)
- - Support `width/height` animation in transition
- - Refactor the default js framework code, hide almost all the private APIs #777
- - iOS 10 compatibility
-- Performance
- - Support `callAddElement` low-level API to make rendering faster
- - Improve SDK initialization performance, for minimise invoke thread impact.
- - Use native `Set` polyfill to fix iOS7 memory leak
- - Use `setProperty` replace reflection for better performance
- - Add `static` directive in default js framework to avoid unnecessary data-binding and take down the memory use
-- Tools
- - Add [weex-pack](https://github.com/weexteam/weex-pack), our next generation of engineering development kits. It allows developers to create weex projects with simple commands and run the project on different development platforms.
- - Add [weex-devtool-extension](https://github.com/weexteam/weex-devtool-extension), a extension for Weex devtool to improve your debug experience，which equivalent an element tag for debugger page.
- - Move devtool to separate [iOS](https://github.com/weexteam/weex-devtool-iOS) and [Android](https://github.com/weexteam/weex_devtools_android) repos.
- - Add "screencast" which enable the screen of the device(or monitor) to appear on the "Inspector" page;
- - Add "remote control" function, in Android user could control remote device(or monitor) when he moves mouse on screencast;
- - Add "select element" function which enable the user to find the exact node in "Elements" inspector Tab when he click the mouse on screencast;
- - Add "vdom inspector", so user can choose to see the details of native dom or vdom in "Elements" Tab at his preference;
- - Adjust interfaces with weex SDK to support "callAddElement";
-
-
-## v0.7.0
-
-- New Features
- - [Timer Module](https://github.com/alibaba/weex/blob/doc/doc/modules/timer.md)
- - [Storage Module](https://github.com/alibaba/weex/blob/dev/doc/modules/storage.md)
- - Unify the `image` component's error page when src is invalid
- - Unify the `border`,`padding`,`background-color` style
- - Horizontal-scroller support `scrollto` api
- - Fix the issue that component with `position:fixed` style can not be closed
- - Module callback support `object` params
- - Slider suppport `setIndex` api
-- Performance
- - Use `callNative` signal to stop JSFM render after instance been destroyed
- - Lazily initialize JSFM When device is in low-memory status, improve SDK stability
-- [Tools](http://alibaba.github.io/weex/doc/tools/devtools.html)
- - Support debugging weex(.we) and react(.jsx) source
- - Support apps debugging on the same device
- - Support "watch" feature
- - Solve the dependency on Debugger, user could start "Inspector" first or "Debugger" at will
- - Add "refresh" function in sdk, user could inspect new file by scanning its QR code in playground;
- - Android/ios inspect module split from weex sdk, and will deliver in separate repo in future; support inspect in windows system
-
-## v0.6.1
-
-- New Features
- 1. [iOS has been open sourced](https://github.com/alibaba/weex/tree/dev/ios)
- 2. [Lifecycle Page Event](https://github.com/alibaba/weex/blob/v0.6.1/doc/references/common-event.md#page-event): viewappear, viewdisappear
- 3. [fetch](https://github.com/alibaba/weex/blob/v0.6.1/doc/modules/stream.md#fetchoptions-callbackprogresscallback)
- 4. [line-height](https://github.com/alibaba/weex/blob/v0.6.1/doc/components/text.md#styles)
- 5. [list component](https://github.com/alibaba/weex/blob/v0.6.1/doc/components/list.md)
- - support sticky header
- - support scrollToElement API
- - support nested horizontal scroller
- - support cell children nodes event: appear/disappear
- 6. [Gesture](https://github.com/alibaba/weex/blob/v0.6.1/doc/references/gesture.md): panstart/panmove/panend, swipe, longpress
- 7. Improve Android text compatibility
-- Performance
- 1. iOS, iPhone 5c, rendering frame rate ascends from 45FPS to 52FPS
- 2. Android, Redmi Note 1, loading time of the first screen descends from 602ms to 480ms
- 3. Improve Android animation performance
-- Tools
- 1. [weex-toolkit](https://www.npmjs.com/package/weex-toolkit) supports require and generator
- 2. Playground supports runtime performance viewer
- 3. [Weex DevTools](https://github.com/alibaba/weex/blob/v0.6.1/doc/tools/devtools.md)
-
- <img src="https://img.alicdn.com/tps/TB1O.nwKFXXXXX8XpXXXXXXXXXX-1436-811.png" width="600">
-
-
-## v0.5.0
-
-### New Features
-1. [TabBar](https://github.com/alibaba/weex/blob/dev/doc/components/wxc-tabbar.md) is a specialized component corresponding to the radio-style selection.
-2. [NavPage](https://github.com/alibaba/weex/blob/dev/doc/components/wxc-navpage.md) contains a navbar at the top of the window and an embed content page.
-3. [Activity Showcase](https://github.com/alibaba/weex/blob/dev/examples/showcase/new-fashion/index.we) is built by composing TabBar and NavPage.
-4. [Web](https://github.com/alibaba/weex/blob/dev/doc/components/web.md) displays web content in the weex page.
-5. [A](https://github.com/alibaba/weex/blob/dev/doc/components/a.md) defines a hyperlink to a page in the web.
-6. `Text` supports style [text-overflow](https://github.com/alibaba/weex/blob/dev/doc/references/text-style.md#properties).
-7. `Image` supports attribute [resize](https://github.com/alibaba/weex/blob/dev/doc/components/image.md#styles).
-8. `List` supports [events `appear`, `disappear`, `loadmore`](https://github.com/alibaba/weex/blob/dev/doc/components/list.md#events) and [refresh](https://github.com/alibaba/weex/blob/dev/doc/components/list.md#child-components).
-9. New Syntax
- 1. [Inline event](https://github.com/alibaba/weex/blob/dev/doc/syntax/events.md#inline-handler) supports a expression of calling event handler in template.
- 2. [Require Native Module](https://github.com/alibaba/weex/blob/dev/doc/modules#how-to-use) requires a native module by `require('@weex-module/moduleName')`.
- 3. [Computed Property](https://github.com/alibaba/weex/blob/dev/doc/syntax/data-binding.md#computed-properties) supports complicated logic in data bindings.
- 4. [New Repeat Syntax](https://github.com/alibaba/weex/blob/dev/doc/syntax/display-logic.md#a-extension-of-repeat-syntax) is easy to access the key or value of repeated object.
diff --git a/source/resources.md b/source/resources.md
deleted file mode 100644
index 090679d..0000000
--- a/source/resources.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Resources
-type: community
-has_chapter_content: false
-version: 2.1
----
-
-## About Weex Project
-
-- [Weex Official Website](http://weex.apache.org/) (weex.apache.org).
-- [Mirror in Alibaba Cloud](https://weex-project.io/) (weex-project.io), faster in China.
-- [Weex Project Incubation Status](http://incubator.apache.org/projects/weex.html).
-- [Mailing List](https://lists.apache.org/list.html?dev@weex.apache.org).
-- [Issues](https://issues.apache.org/jira/projects/WEEX/issues).
-- [Weex Contributing Guide](https://github.com/apache/incubator-weex/blob/master/CONTRIBUTING.md) A guidance document tells you how to be submitted by the person weex and how to participate in mailing discussions.
-- [Weex FAQ](https://weex.apache.org/wiki/faq.html).
-
-## Supported Front-end Frameworks
-
-- [Rax](https://alibaba.github.io/rax/) **Rax** is a front-end framework with React-compatible APIs.
-- [Vue.js](https://vuejs.org/) **Vue.js** is a progressive front-end framework for building user interfaces.
-
-## Components and Modules
-
-- [Weex Ui](https://alibaba.github.io/weex-ui/) **Weex Ui** is a rich interaction, lightweight, high performance UI library.
-
-## Tools
-
-- [Online Playground](http://dotwe.org/vue/) A website provides weex code practice and preview, as well as a convenient sharing platform.
-- [Playground App](https://weex.apache.org/tools/playground.html) You can preview weex on the Playground App and learning how to use weex on it.
-- [Weex Language support for Intellij](https://plugins.jetbrains.com/plugin/9189-weex-language-support) A plugin supports Weex Language for Intellij.
-
-## Community
-
-- [SegmentFault (cn)](https://segmentfault.com/t/weex)
-- [StackOverflow](https://stackoverflow.com/questions/tagged/weex)
-- [Telegram Russian Community Group](https://telegram.me/weex_ru)
-- [Gitter for weex-en](https://gitter.im/weex-en/Lobby)
-
-### Posts
-
-- [Weex Articles(cn)](https://github.com/weexteam/article/issues).
-
-### Examples
-
-- [Weex Vue Examples](https://hanks10100.github.io/weex-vue-examples/)
diff --git a/source/tools/helpers.md b/source/tools/helpers.md
deleted file mode 100644
index 04c967c..0000000
--- a/source/tools/helpers.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: Helpers
-type: tools
-order: 5.2
-version: 2.1
----
-
-# Weex Language Support Plugin
-
-[Weex Language Support](https://plugins.jetbrains.com/plugin/9189-weex-language-support) is a official tools to code highlight, automatic completion，lint and other functions in IDEA, WebStorm or the others IDEs.
-
-### Supported IDEs
-You can install and use this plugin on the following IDEs on any operating system:
-**IntelliJ IDEA Ultimate, PhpStorm, WebStorm, PyCharm, RubyMine, AppCode, CLion, Gogland, Rider**
-
-### Install
-Just searching the `Weex Language Support` in plugin repo to install, next you need restart IDE to enable it.
-
-
-### Configurations
-Open `Preferences -> Other Settings -> Weex language support` to configuration plugin
-
-- Target Weex Version: Config the version of Weex that your current project in use, default is `LATEST`, it means always using the latest version
-- Vue Support: Config whether to support Vue, you need to restart IDE after turning on or off the set to take effect
-- Custom Rules: Import the custom Weex DSL rules, The format of the custom rules will be listed later
-- Global Weex Components: Sets the location of the module that is applied in the project, in particular, the `node_modules` directory in current project and npm root will be automatically included, you do not need to add them here
-
-
-### Format of Custom DSL Rules
-Custom rules are included in a json file, the root node of the json file is an array, each element in the array corresponds to a label in the DSL.
-Let's take the example of the `loading>` tag:
-```js
-{
- "tag": "loading", //tag name, not null
- "attrs": [ //attributes of tag, can be null
- {
- "name": "display", //attribute name, not null
- "valuePattern": null, //pattern expression to check the attribute value, can be null
- "valueEnum": [ //attribute value enumeration, can be null
- "show",
- "hide"
- ],
- "valueType": "var", //type of attribute value, must be var or function
- "since": 0, //which version the attribute is added to sdk, such as 0.11
- "weexOnly": false //whether the attribute is available only in 1.0 syntax, default is false
- }
- ],
- "events": [ //events list, can be null
- {
- "name": "loading", //event name, not null
- "since": 0 //which version the event is added to sdk
- }
- ],
- "parents": [ //The tag is allowed to be a child of which tags, null means no restrictions
- "list",
- "scroller"
- ],
- "childes": [ //which tags are allowed as their own child tags, null means no restrictions
- "text",
- "image",
- "loading-indicator"
- ],
- "document": "/references/components/loading.html" //document link
- }
-```
-
-### Contribution
-Please commiting Issues and Pull Requests into the [weex-language-support](https://github.com/misakuo/weex-language-support) project
diff --git a/source/tools/index.md b/source/tools/index.md
deleted file mode 100644
index 2188a70..0000000
--- a/source/tools/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Develop Tools
-type: tools
-order: 5
-version: 2.1
----
-
-# 开发工具
-
-+ [Playground App](/cn/tools/playground.html)
-+ [Online Playground](http://dotwe.org/vue/)
-+ [Weex Toolkit](./toolkit.html)
-+ [Syntax Highlight Plugins](/tools/helpers.html)
diff --git a/source/tools/playground.ejs b/source/tools/playground.ejs
deleted file mode 100644
index 0e310d4..0000000
--- a/source/tools/playground.ejs
+++ /dev/null
@@ -1,3 +0,0 @@
-layout: playground
-type: playground
----
diff --git a/source/tools/toolkit.md b/source/tools/toolkit.md
deleted file mode 100644
index 93d5ffe..0000000
--- a/source/tools/toolkit.md
+++ /dev/null
@@ -1,197 +0,0 @@
----
-title: Use weex-toolkit
-type: tools
-order: 5.1
-version: 2.1
----
-
-# weex-toolkit
-
-[weex-toolkit](https://github.com/weexteam/weex-toolkit) is an official command line tool to help developers to create, debug and build their Weex project.
-
-## Install
-
-``` bash
-$ npm install -g weex-toolkit
-```
-You can use the `weex -v` command to confirm that the installation is successful.
-
-
-> If you have never installed node.js, you should go [node.js.org]( https://nodejs.org/en/) to download and install it. The node version needs to be upper 6.0. You can try [n](https://github.com/tj/n) to manage your node versions.
-
-If you meet some errors when installing, please go [weex-toolkit issues](https://github.com/weexteam/weex-toolkit/issues) or [weex-toolkit faq](https://github.com/weexteam/weex-toolkit#faq) to find some solution or have a discuss with us.
-
-
-## Commands
-
-### create
-```bash
-# create a new project with an official template
-$ weex create my-project
-
-# create a new project straight from a github template
-$ weex create username/repo my-project
-```
-Create a new project with an official template or from other remote, also you can create your own weex template, more detail you can see [How-to-create-your-own-template](https://github.com/weex-templates/How-to-create-your-own-template).
-
-### preview
-
-weex-toolkit supports previewing your Weex file(`.vue`) in a watch mode. You only need specify your file path.
-
-``` bash
-$ weex preview src/foo.vue
-```
-
-The browser automatically opens the preview page and you can see the layout and effects of your weex page. If you have a [Playground App](/tools/playground.html) in your mobile devices, you can scan the QR code at the opened page.
-
-Try the command below, you’ll preview the whole directory files.
-
-``` bash
-$ weex preview src --entry src/foo.vue
-```
-
-You need to specify the folder path to preview and the entry file (passed in via `--entry`).
-
-### compile
-
-Use `weex compile` o compile a single weex file or a weex file in an entire folder.
-
-``` bash
-$ weex compile [source] [dist] [options]
-```
-
-#### options
-
-| Option | Description |
-| -------- | :----- |
-|`-w, --watch` | watch we file changes auto build them and refresh debugger page! [default `true`]|
-|`-d,--devtool [devtool]` |set webpack devtool mode|
-|`-e,--ext [ext]` | set enabled extname for compiler default is vue |
-|`-m, --min`| set jsbundle uglify or not. [default `false`]|
-
-You can use like this:
-
-``` bash
-$ weex compile src dest --devtool source-map -m
-```
-
-### platform
-
-Use `weex platform [add|remove|update] [ios|android]` to add, remove or update your ios / android project templates.
-
-``` bash
-# add weex platform
-$ weex platform add [ios|android]
-
-# remove weex platform
-$ weex platform remove [ios|android]
-
-# update weex platform
-$ weex platform update [ios|android]
-
-# list weex platform
-$ weex platform list
-```
-Use `weex platform list` to show what platforms your application supported.
-
-### run
-
-You can use `weex-toolkit` to run project on android/ios/web.
-
-``` bash
-# run weex Android project
-$ weex run android
-
-# run weex iOS project
-$ weex run ios
-
-# run weex web
-$ weex run web
-```
-
-### debug
-
-** [Weex devtools](https://github.com/weexteam/weex-devtool) ** is a custom devtools for Weex that implements [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol), it is designed to help you quickly inspect your app and debug your JS bundle source in a Chrome web page, both android and iOS platform are supported. So you can use weex-devtools feature by weex-toolkit.
-
-#### usage
-
-``` bash
-weex debug [we_file|bundles_dir] [options]
-```
-
-| Option | Description |
-| -------- | :----- |
-|`-V, --verbose` | display logs of debugger server|
-|`-v, --version` | display version|
-|`-p, --port [port]` | set debugger server port|
-|`-e, --entry [entry]` | set the entry bundlejs path when you specific the bundle server root path|
-|`-m, --mode [mode]` | set build mode [transformer or loader]|
-|`-w, --watch` | watch we file changes auto build them and refresh debugger page [default `true`]|
-|`--ip [ip]`|set the host ip of debugger server|
-|`--loglevel [loglevel]`| set log level|
-|`--min`| set jsbundle uglify or not. [default `false`]|
-|`--remotedebugport [remotedebugport]`|set the remote debug port,default 9222|
-
-#### Features
-
-##### Connect devices
-
-```
-$ weex debug
-```
-
-This command will start debug server and launch a chrome opening `DeviceList` page.
-this page will display a QR code, you can use [Playground](/tools/playground.html) scan it for starting debug or integrate [Weex devtools](#Integrate devtool) into your application.
-
-
-
-##### Debug with `.vue` file
-
-```
-$ weex debug your_weex.vue
-```
-Click the button you can use your app or [weex playground app](/tools/playground.html) to preview your pages.
-
-
-
-
-##### Inspector
-
-> Inspector feature to view the page's VDOM / Native Tree structure
-
-Note: If you do not need this feature as far as possible to maintain the closed state, open the browser Inspector interface will increase the page communication, more affect performance.
-
-
-
-
-
-##### Breakpoint
-> JS Debug feature support you to set breakpoint on your jsbundle and debugging with it.
-
-You can find your jsbundle in the `source` folder of the `Runtime.js` directory. If you do not see the `Runtime.js` directory, check if the weex-debugger tool is completely installed or try to restart the debug tool.
-
-
-
-##### NetWork
-
-> The Network feature collects network request information from weex applications.
-
-
-
-##### Loglevel & ElementMode
-
-> The LogLevel and ElementMode feature are used to adjust the output configuration of the debugger.
-
-
-
-##### Prophet
-> The Prophet feature is used to view weex's load timing diagram and page performance metrics.
-
-Click on the upper right corner of the Prophet to view the timing diagram (iOS is not supported, the performance data can be viewed in the log performance), as follows:
-
-
-#### Integrate devtool
-* Android
- * See the doc [Weex devtools (Android)](/guide/integrate-devtool-to-android.html), it will lead you to config and use it step by step.
-* iOS
- * See the doc [Weex devtools (iOS)](/guide/integrate-devtool-to-ios.html), it will lead you to config and use it step by step.
diff --git a/source/who-is-using-weex.md b/source/who-is-using-weex.md
deleted file mode 100644
index eae730f..0000000
--- a/source/who-is-using-weex.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: who-is-using-weex
-title: Who is Using Weex?
-type: community
-has_chapter_content: false
-version: 2.1
----
diff --git a/source/wiki/color-names.md b/source/wiki/color-names.md
deleted file mode 100644
index d46d490..0000000
--- a/source/wiki/color-names.md
+++ /dev/null
@@ -1,183 +0,0 @@
----
-title: Color name
-type: wiki
-group: Style
-order: 3.4
-version: 2.1
----
-
-<!-- toc -->
-
-### Basic color keywords:
-
-| Color Name | Hex rgb |
-| ---------- | ------- |
-| black | #000000 |
-| silver | #C0C0C0 |
-| gray | #808080 |
-| white | #FFFFFF |
-| maroon | #800000 |
-| red | #FF0000 |
-| purple | #800080 |
-| fuchsia | #FF00FF |
-| green | #008000 |
-| lime | #00FF00 |
-| olive | #808000 |
-| yellow | #FFFF00 |
-| navy | #000080 |
-| blue | #0000FF |
-| teal | #008080 |
-| aqua | #00FFFF |
-
-### Extended color keywords:
-
-| Color Name | Hex rgb |
-| ---------- | ------- |
-| aliceblue | #F0F8FF |
-| antiquewhite | #FAEBD7 |
-| aqua | #00FFFF |
-| aquamarine | #7FFFD4 |
-| azure | #F0FFFF |
-| beige | #F5F5DC |
-| bisque | #FFE4C4 |
-| black | #000000 |
-| blanchedalmond | #FFEBCD |
-| blue | #0000FF |
-| blueviolet | #8A2BE2 |
-| brown | #A52A2A |
-| burlywood | #DEB887 |
-| cadetblue | #5F9EA0 |
-| chartreuse | #7FFF00 |
-| chocolate | #D2691E |
-| coral | #FF7F50 |
-| cornflowerblue | #6495ED |
-| cornsilk | #FFF8DC |
-| crimson | #DC143C |
-| cyan | #00FFFF |
-| darkblue | #00008B |
-| darkcyan | #008B8B |
-| darkgoldenrod | #B8860B |
-| darkgray | #A9A9A9 |
-| darkgreen | #006400 |
-| darkgrey | #A9A9A9 |
-| darkkhaki | #BDB76B |
-| darkmagenta | #8B008B |
-| darkolivegreen | #556B2F |
-| darkorange | #FF8C00 |
-| darkorchid | #9932CC |
-| darkred | #8B0000 |
-| darksalmon | #E9967A |
-| darkseagreen | #8FBC8F |
-| darkslateblue | #483D8B |
-| darkslategray | #2F4F4F |
-| darkslategrey | #2F4F4F |
-| darkturquoise | #00CED1 |
-| darkviolet | #9400D3 |
-| deeppink | #FF1493 |
-| deepskyblue | #00BFFF |
-| dimgray | #696969 |
-| dimgrey | #696969 |
-| dodgerblue | #1E90FF |
-| firebrick | #B22222 |
-| floralwhite | #FFFAF0 |
-| forestgreen | #228B22 |
-| fuchsia | #FF00FF |
-| gainsboro | #DCDCDC |
-| ghostwhite | #F8F8FF |
-| gold | #FFD700 |
-| goldenrod | #DAA520 |
-| gray | #808080 |
-| green | #008000 |
-| greenyellow | #ADFF2F |
-| grey | #808080 |
-| honeydew | #F0FFF0 |
-| hotpink | #FF69B4 |
-| indianred | #CD5C5C |
-| indigo | #4B0082 |
-| ivory | #FFFFF0 |
-| khaki | #F0E68C |
-| lavender | #E6E6FA |
-| lavenderblush | #FFF0F5 |
-| lawngreen | #7CFC00 |
-| lemonchiffon | #FFFACD |
-| lightblue | #ADD8E6 |
-| lightcoral | #F08080 |
-| lightcyan | #E0FFFF |
-| lightgoldenrodyellow | #FAFAD2 |
-| lightgray | #D3D3D3 |
-| lightgreen | #90EE90 |
-| lightgrey | #D3D3D3 |
-| lightpink | #FFB6C1 |
-| lightsalmon | #FFA07A |
-| lightseagreen | #20B2AA |
-| lightskyblue | #87CEFA |
-| lightslategray | #778899 |
-| lightslategrey | #778899 |
-| lightsteelblue | #B0C4DE |
-| lightyellow | #FFFFE0 |
-| lime | #00FF00 |
-| limegreen | #32CD32 |
-| linen | #FAF0E6 |
-| magenta | #FF00FF |
-| maroon | #800000 |
-| mediumaquamarine | #66CDAA |
-| mediumblue | #0000CD |
-| mediumorchid | #BA55D3 |
-| mediumpurple | #9370DB |
-| mediumseagreen | #3CB371 |
-| mediumslateblue | #7B68EE |
-| mediumspringgreen | #00FA9A |
-| mediumturquoise | #48D1CC |
-| mediumvioletred | #C71585 |
-| midnightblue | #191970 |
-| mintcream | #F5FFFA |
-| mistyrose | #FFE4E1 |
-| moccasin | #FFE4B5 |
-| navajowhite | #FFDEAD |
-| navy | #000080 |
-| oldlace | #FDF5E6 |
-| olive | #808000 |
-| olivedrab | #6B8E23 |
-| orange | #FFA500 |
-| orangered | #FF4500 |
-| orchid | #DA70D6 |
-| palegoldenrod | #EEE8AA |
-| palegreen | #98FB98 |
-| paleturquoise | #AFEEEE |
-| palevioletred | #DB7093 |
-| papayawhip | #FFEFD5 |
-| peachpuff | #FFDAB9 |
-| peru | #CD853F |
-| pink | #FFC0CB |
-| plum | #DDA0DD |
-| powderblue | #B0E0E6 |
-| purple | #800080 |
-| red | #FF0000 |
-| rosybrown | #BC8F8F |
-| royalblue | #4169E1 |
-| saddlebrown | #8B4513 |
-| salmon | #FA8072 |
-| sandybrown | #F4A460 |
-| seagreen | #2E8B57 |
-| seashell | #FFF5EE |
-| sienna | #A0522D |
-| silver | #C0C0C0 |
-| skyblue | #87CEEB |
-| slateblue | #6A5ACD |
-| slategray | #708090 |
-| slategrey | #708090 |
-| snow | #FFFAFA |
-| springgreen | #00FF7F |
-| steelblue | #4682B4 |
-| tan | #D2B48C |
-| teal | #008080 |
-| thistle | #D8BFD8 |
-| tomato | #FF6347 |
-| turquoise | #40E0D0 |
-| violet | #EE82EE |
-| wheat | #F5DEB3 |
-| white | #FFFFFF |
-| whitesmoke | #F5F5F5 |
-| yellow | #FFFF00 |
-| yellowgreen | #9ACD32 |
-
diff --git a/source/wiki/common-events.md b/source/wiki/common-events.md
deleted file mode 100644
index 2f73a5b..0000000
--- a/source/wiki/common-events.md
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: Common Events
-type: wiki
-group: Event
-order: 4.1
-version: 2.1
----
-
-<!-- toc -->
-
-Weex provide the ability to let events trigger action, like starting a JavaScript when a user click on a component. Below are the common event attributes that can be added to weex components to define event actions.
-
-## Click event
-
-The onclick attribute fires on a click gesture on the element.
-**Notes: ** The `input` and `switch` component does not currently support the `click` event, please use `change` or `input` event instead.
-
-### event object
-
-- `type` : `click`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-
-## Longpress event
-
-If a `longpress` event is bound to a component, the event will be triggered when user long press on it.
-**Notes: ** The `input` and `switch` component does not currently support the `click` event, please use `change` or `input` event instead.
-
-### event object
-
-- `type` : `longpress`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-
-## Appear event
-
-If a appear event is bound to a component inside a scrollable container, the event will be triggered when the component comes to be visible.
-
-### event object
-
-- `type` : `appear`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-- `direction` : The direction in which the scroller is scrolling. Could be `up` or `down`.
-
-## Disappear event
-
-If a `disappear` event is bound to a component inside a scrollable container, the event will be triggered when the component scrolls out of viewport and disappears from your sight.
-
-### event object
-
-- `type` : `disappear`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-- `direction` : The direction in which the scroller is scrolling. Could be `up` or `down`.
-
-## Page event
-
-Weex provides you with simple management of page status, such as `viewappear` and `viewdisappear`.
-The `viewappear` event will be triggered when page is about to show or before any animations are configured for showing. For example, when calling `push` method in `navigator` module, this event will be trigged in new page.
-The `viewdisappear` event will be triggeded when page is about to dismiss.
-Different from `appear` and `disappear` of component, these two events focus on the status of whole page, so **they must be bound to the root component**.
-In addititon, these events also can be bound to body component which is not root actually such as `wxc-navpage`.
-
-### event object
-
-- `type` : `viewappear` or `viewdisappear`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-
-
-## Example
-
-```html
-<template>
- <div>
- <div class="box" @click="onclick" @longpress="onlongpress" @appear="onappear" @disappear="ondisappear"></div>
- </div>
-</template>
-
-<script>
- const modal = weex.requireModule('modal')
- export default {
- methods: {
- onclick (event) {
- console.log('onclick:', event)
- modal.toast({
- message: 'onclick',
- duration: 0.8
- })
- },
- onlongpress (event) {
- console.log('onlongpress:', event)
- modal.toast({
- message: 'onlongpress',
- duration: 0.8
- })
- },
- onappear (event) {
- console.log('onappear:', event)
- modal.toast({
- message: 'onappear',
- duration: 0.8
- })
- },
- ondisappear (event) {
- console.log('ondisappear:', event)
- modal.toast({
- message: 'ondisappear',
- duration: 0.8
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .box {
- border-width: 2px;
- border-style: solid;
- border-color: #BBB;
- width: 250px;
- height: 250px;
- margin-top: 250px;
- margin-left: 250px;
- background-color: #EEE;
- }
-</style>
-```
diff --git a/source/wiki/common-styles.md b/source/wiki/common-styles.md
deleted file mode 100644
index 6853537..0000000
--- a/source/wiki/common-styles.md
+++ /dev/null
@@ -1,523 +0,0 @@
----
-title: Common Styles
-type: wiki
-group: Style
-order: 3.1
-version: 2.1
----
-
-<!-- toc -->
-
-All of weex tags share some common style rules
-
-## Box Model
-
-
-
-Weex box model based on the CSS box model, all of weex elements can be considered as boxes. The term "box model" is used when talking about design and layout. The box model is essentially a box that wraps around every HTML element. It consists of margins, borders, paddings, and the actual content.
-
-you can use the definition below in weex box model.
-
-- `width`: `length` type, default value `auto`
-- `height`: `length` type, default value `auto`
-- `direction`: values `rtl` | `ltr`, default value `ltr`
-- `padding`: `length` type, default value `0`, (space around content, between element content and the element border)
- - `padding-left`: `length` type, default value `0`
- - `padding-right`: `length` type, default value `0`
- - `padding-top`: `length` type, default value `0`
- - `padding-bottom`: `length` type, default value `0`
-- `margin`: `length` type, default value `0`, (space around elements, outside the border)
- - `margin-left`: `length` type, default value `0`
- - `margin-right`: `length` type, default value `0`
- - `margin-top`: `length` type, default value `0`
- - `margin-bottom`: `length` type, default value `0`
-- `border`
- - `border-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-left-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-top-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-right-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-bottom-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-width`: `length` type, non-negative, default value `0`
- - `border-left-width`: `length` type, non-negative, default value `0`
- - `border-top-width`: `length` type, non-negative, default value `0`
- - `border-right-width`: `length` type, non-negative, default value `0`
- - `border-bottom-width`: `length` type, non-negative, default value `0`
- - `border-color`: `color` type, default value `#000000`
- - `border-left-color`: `color` type, default value `#000000`
- - `border-top-color`: `color` type, default value `#000000`
- - `border-right-color`: `color` type, default value `#000000`
- - `border-bottom-color`: `color` type, default value `#000000`
- - `border-radius`: `length` type, default value `0`, (rounded borders to elements , default value is 0 meaning right angle )
- - `border-bottom-left-radius`: `length` type, non-negative, default value `0`
- - `border-bottom-right-radius`: `length` type, non-negative, default value `0`
- - `border-top-left-radius`: `length` type, non-negative, default value `0`
- - `border-top-right-radius`: `length` type, non-negative, default value `0`
-
-### Notes
-Weex box model uses `border-box` as the default value of `box-sizing`, meaning the width and height properties includes content, padding and border, but not the margin.
-
-> **Waring** Although `overflow:hidden` is default on android, a view **will not** clip its children according to `border-radius` unless all the following condtions met. This only happens on Android, it works fine on iOS.
-> * The view type is `div`, `a`, `cell`, `refresh` or `loading`.
-> * OS version is Android 4.3 or higher.
-> * OS version is **not** Andorid 7.0
-> * A view **does not** have `background-image` property nor OS version is Android 5.0 or higher.
-
-### Example
-
-```html
-<template>
- <div>
- <image src="..." style="width: 400; height: 200; margin-left: 20;"></image>
- </div>
-</template>
-```
-
-## Flexbox
-
-Weex box style model based on the CSS flexbox, ensures that elements behave predictably and the page layout can accommodates to different screen sizes and different display devices.
-
-Flexbox consists of flex containers and flex items. If a weex element can containing other elements, it is a flex container.
-
-Notice that the old version of flexbox specification has differences with the new ones, such as whether or not to support wrapping. This is described at w3c's working drafts, and you should notice the differences among them. Also notice that the old version is only supported below the 4.4 version of android.
-
-### Flex container
-
-Flexbox is the default and only style model in Weex, so you don't have to add `display: flex;` in a container.
-
-- `flex-direction`: values `row` | `column`, default value `column`
-
-The flex-direction property specifies the direction of the flexible items inside the flex container. Default value is `column` (top-to-bottom).
-
-- `justify-content`: values `flex-start` | `flex-end` | `center` | `space-between`, default value `flex-start`
-
-The justify-content property horizontally aligns the flexible container's items when the items do not use all available space on the main-axis. Default value is `flex-start` meaning the flex items are positioned at the beginning of the container. `flex-end` means the items are positioned at the end of the container. `center` means the items are positioned at the center of the container. `space-between` means the items are positioned with space between the lines.
-
-
-
-- `align-items`: values `stretch` | `flex-start` | `center` | `flex-end`, default value `stretch`
-
-The align-items property vertically aligns the flexible container's items when the items do not use all available space on the cross-axis. Default value is `stretch` meaning the items are stretched to fit the container. `flex-start` means the items are positioned at the top of the container; `flex-end` means the items are positioned at the bottom of the container; `center` means items are positioned at the center of the container (vertically).
-
-
-
-### Flex item
-
-- `flex`: `number` type, default value `0`
-
-the flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container. If all of the flex items set `flex: 1`, they will have equal width or height on direction of flex container's `flex-direction`. If there are two flex items, with one setting `flex: 1`, and the other setting `flex: 2`, the first one will take 1/3 container space, and the second one will take 2/3 container space. If all of flex items don't set `flex`, they will be aligned depending on the container's `justify-content` property.
-
-
-## Examples
-
-a list of images with equal scales align at the vertical axis:
-
-```html
-<template>
- <div style="width: 300; height: 100;">
- <image src="..." style="flex: 1;"></image>
- <image src="..." style="flex: 1;"></image>
- <image src="..." style="flex: 1;"></image>
- </div>
-</template>
-```
-
-a image with fixed width aligns with a stretched text:
-
-```html
-<template>
- <div style="width: 300; height: 100;">
- <image src="..." style="width: 100; height: 100;"></image>
- <text style="flex: 1;">...</text>
- </div>
-</template>
-```
-
-mixed direction alignment:
-
-```html
-<template>
- <div style="width: 100;">
- <image src="..." style="width: 100; height: 100;"></image>
- <div style="flex-direction: row;">
- <text style="flex: 2; font-size: 32;">title</text>
- <text style="flex: 1; font-size: 16;">$100</text>
- </div>
- </div>
-</template>
-```
-
-one text align left , the other float right:
-
-
-
-```html
-<template>
-<div style="flex-direction: row; justify-content: space-between;">
- <text>WEEX</text>
- <text>2016-05-08</text>
-</div>
-</template>
-```
-
-## Position
-
-we can use properties below to control placement of weex tag
-
-- `position`: values `relative` | `absolute` | `fixed` | `sticky`, default value `relative`
-
-`relative` means the item is positioned relative to its normal position. `absolute` means the item is positioned relative to its container. `fixed` keeps the elements position fixed when the page is scrolling. `sticky` keeps elements positioned inside the viewport as "stuck" at the top or "relative" at its original place depending on whether does it about to scroll out of the view.
-
-- `top`: `number` type, default value `0`, upward offset value
-- `bottom`: `number` type, default value `0`, downward offset value
-- `left`: `number` type, default value `0`, leftward offset value
-- `right`: `number` type, default value `0`, rightward offset value
-
-### Examples
-
-```html
-<template>
- <div style="flex-direction: column;">
- <div style="height: 3000;">
- <image src="..." style="top: 50px; left: 50px;"></image>
- </div>
- <div style="height: 3000;">
- <image src="..." style="position: sticky;"></image>
- </div>
- <div style="height: 3000;">
- <image src="..." style="position: absolute; top: 50px; left: 50px;"></image>
- </div>
- </div>
-</template>
-```
-
-## transition <span class="api-version">v0.17.0+</span>
-
-Now you can use the transition attribute in CSS to enhance the interactivity and visual experience of your application. The transition includes the layout animation, that is, LayoutAnimation, which now changes the layout and uses the fluent animation of the transition. Transition allows the CSS attribute values to transition smoothly over a certain time interval.
-
-### Property
-
-- ``transition-property``:Allows the name of the transitional animation to set the value of the different styles transition effect, the default value is empty, that does not perform any transition, the following table lists all the legitimate parameters of the property:
-
-| Property | Description |
-| --------------- | ---------------------------------------- |
-| width | The transition is performed when the width of the component is involved in the animation |
-| height | The transition is performed when the height of the component is involved in the animation |
-| top | The transition is performed when the top of the component is involved in the animation |
-| bottom | The transition is performed when the bottom of the component is involved in the animation |
-| left | The transition is performed when the left of the component is involved in the animation |
-| right | The transition is performed when the right of the component is involved in the animation |
-| backgroundColor | The transition is performed when the backgroundColor of the component is involved in the animation |
-| opacity | The transition is performed when the opacity of the component is involved in the animation |
-| transform | The transition is performed when the transform of the component is involved in the animation |
-
-- ``transition-duration``:Specifies the duration of the transition transition (in milliseconds). The default value is 0, indicating that there is no animation.
-
-- ``transition-delay``:Specifies the time interval (in milliseconds or seconds) between the request transition transition and the transition transition. The default value is 0, indicating that there is no delay, and the transition transition is performed immediately after the request.
-
-- ``transition-timing-function``:Describes the velocity curve of the transition transition, which is used to make the transition transition smoother. The default is ease. The following table lists all the valid attributes:
-
-| Property | Description |
-| ------------------------------ | ---------------------------------------- |
-| ease | The transition gradually slow down the transition effect |
-| ease-in | The transition starts slowly and then becomes faster for the transition effect |
-| ease-out | The transition starts quickly and then slows the transition effect |
-| ease-in-out | The transition starts slowly, then goes fast and then slowly ends the transition effect |
-| linear | The transition changes at constant speed |
-| cubic-bezier(x1, y1, x2, y2) | Using the custom transition in the third-order Bessel function, the parameter values of the function must be between 0 and 1. For more information on three times Bessel, see [cubic-bezier](http://cubic-bezier.com/) and [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve). |
-
-### Example
-
-```html
-<style scoped>
- .panel {
- margin: 10px;
- top:10px;
- align-items: center;
- justify-content: center;
- border: solid;
- border-radius: 10px;
-
- transition-property: width,height,backgroundColor;
- transition-duration: 0.3s;
- transition-delay: 0s;
- transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
- }
-</style>
-```
-
-## transform
-
-> **Note: Consider use `transition` instead, which supports all the style that `transform` supports except for `transform-origin` and `perspective`**
-
-The CSS **transform** property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated and scaled.
-
-Currently supported format:
-
-* translate( <number/percentage> [, <number/percentage>]?)
-* translateX( <number/percentage> )
-* translateY( <number/percentage> )
-* scale( <number>)
-* scaleX( <number> )
-* scaleY( <number> )
-* rotate( <angle/degree> )
-* rotateX( <angle/degree> ) <span class="api-version">v0.14+</span>
-* rotateY( <angle/degree> ) <span class="api-version">v0.14+</span>
-* perspective( <number> ), supported for Android 4.1 and above. <span class="api-version">v0.16+</span>
-* transform-origin: number/percentage/keyword(top/left/right/bottom)
-
-### Example
-
-```HTML
-<template>
- <div class="wrapper">
- <div class="transform">
- <text class="title">Transformed element</text>
- </div>
- </div>
-</template>
-
-<style>
- .transform {
- align-items: center;
- transform: translate(150px,200px) rotate(20deg);
- transform-origin: 0 -250px;
- border-color:red;
- border-width:2px;
- }
- .title {font-size: 48px;}
-</style>
-```
-
-
-## Pseudo class <span class="api-version">v0.9.5+</span>
-
-Weex support four pseudo-classes: `active`, `focus`, `disabled`, `enabled`
-
-All components support `active`, but only the input component and the textarea component support `focus`, `enabled`, `diabled`.
-
-### Rule
-
-- the high priority override low priority when rules take effect at the same time
-
- - such as: "input:active:enabled" will override "input:active"
-
-- the interconnection rule as follow
-
- 
-
-### Example
-
-```html
-<template>
- <div class="wrapper">
- <image :src="logoUrl" class="logo"></image>
- </div>
-</template>
-
-<style scoped>
- .wrapper {
- align-items: center;
- margin-top: 120px;
- }
- .title {
- font-size: 48px;
- }
- .logo {
- width: 360px;
- height: 82px;
- background-color: red;
- }
- .logo:active {
- width: 180px;
- height: 82px;
- background-color: green;
- }
-</style>
-
-<script>
- export default {
- props: {
- logoUrl: {
- default: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png'
- },
- target: {
- default: 'World'
- }
- },
- methods: {
- update (e) {
- this.target = 'Weex';
- }
- }
- };
-</script>
-```
-
-[Try it](http://dotwe.org/vue/df2c8f254620d6d30d0906ee75fe5b99)
-
-## linear-gradient <span class="api-version">v0.10+</span>
-
-Weex support linear-gradient background, You can see [W3C description of the gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients).
-
-### Supported components
-
-All components in Weex support gradients
-
-### Usage
-
-You can use linear gradient by `background-image` property.
-
-```css
-background-image: linear-gradient(to top,#a80077,#66ff00);
-```
-
-`radial-gradient` is not currently supported, do not use it.
-
-Weex currently supports two color gradients. The direction of the gradient is as follows:
-
-* to right
- From left to right
-* to left
- From right to left
-* to bottom
- From top to bottom
-* to top
- From bottom to top
-* to bottom right
- From the upper left corner to the lower right corner
-* to top left
- From the lower right corner to the upper left corner
-
-### Note
-
-- `background-image` and `background-color` are set at the same time, `background-image` precedes `background-color`.
-- Do not use shorthand property such as `background`.
-
-### Example
-
-```html
-<template>
- <scroller style="background-color: #3a3a3a">
- <div class="container1" style="background-image:linear-gradient(to right,#a80077,#66ff00);">
- <text class="direction">to right</text>
- </div>
- <div class="container1" style="background-image:linear-gradient(to left,#a80077,#66ff00);">
- <text class="direction">to left</text>
- </div>
- <div class="container1" style="background-image:linear-gradient(to bottom,#a80077,#66ff00);">
- <text class="direction">to bottom</text>
- </div>
- <div class="container1" style="background-image:linear-gradient(to top,#a80077,#66ff00);">
- <text class="direction">to top</text>
- </div>
- <div style="flex-direction: row;align-items: center;justify-content: center">
- <div class="container2" style="background-image:linear-gradient(to bottom right,#a80077,#66ff00);">
- <text class="direction">to bottom right</text>
- </div>
- <div class="container2" style="background-image:linear-gradient(to top left,#a80077,#66ff00);">
- <text class="direction">to top left</text>
- </div>
- </div>
- </scroller>
-</template>
-<style>
- .container1 {
- margin: 10px;
- width: 730px;
- height: 200px;
- align-items: center;
- justify-content: center;
- border: solid;
- border-radius: 10px;
- }
-
- .container2 {
- margin: 10px;
- width: 300px;
- height: 300px;
- align-items: center;
- justify-content: center;
- border: solid;
- border-radius: 10px;
- }
-
- .direction {
- font-size: 40px;
- color: white;
- }
-</style>
-```
-
-## box-shadow <span class="api-version">v0.11+</span>
-
-Weex supports box-shadow in iOS： `inset`,`offset-x`,`offset-y`, `blur-radius`,`color`
-
-
-### Note
-
-- box-shadow takes effect in iOS
-
-### Example
-
-```html
-<template>
- <div class="wrapper">
- <div style="width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px rgb(255, 69, 0);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow: 20px 10px 5px rgba(255, 69, 0, 0.8);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgba(255, 69, 0, 0.8);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgb(255, 69, 0);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px black;">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px #008B00;">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- </div>
-</template>
-
-<style scoped>
- .wrapper {align-items: center; margin-top: 120px;}
- .title {font-size: 48px;}
-</style>
-
-<script>
- module.exports = {
- data: function () {
- return {
- logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
- target: 'World'
- };
- }
- };
-</script>
-```
-
-
-## Other Common Style
-
-- `opacity`
-- `background-color`
-
-## Type of Style Value
-
-- `length` type
-- `number` type
-- `color` type (*[The list of color keywords.](./color-names.html)*)
-- enumerated type
-
-## Simple Step
-
-These up-to-down steps may help you to plan the whole style of weex pages.
-
-1. overall style: divide the whole page to different parts
-2. flex alignment: align boxes in every part of page
-3. position box: place box, set offset
-4. element specific style: set styles for certain element if needed
diff --git a/source/wiki/component-introduction.md b/source/wiki/component-introduction.md
deleted file mode 100644
index 01cee5f..0000000
--- a/source/wiki/component-introduction.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Component
-type: wiki
-group: concept
-order: 5.1
-version: 2.1
----
-
-### what's component
-
- Generally，`component` is a entity `Widget` in Weex engine, and it can be loaded if confirm to some details rules whlile the Weex engine init. It can display some detail contents, receive touch or other custom events, custom attributes. There are some internal components registered such as `div`, `image` and `text`, you can custom your own component if these can not meet your needs.
-
-
-### component method
-
- you can call custom methods for a entity component after adding `ref` attributes, for example:
-
- ```html
- <template>
- <mycomponent ref='mycomponent'></mycomponent>
- </template>
- <script>
- module.exports = {
- created:function() {
- this.$refs.mycomponent.focus();
- }
- }
- </script>
- ```
diff --git a/source/wiki/css-units.md b/source/wiki/css-units.md
deleted file mode 100644
index 972f836..0000000
--- a/source/wiki/css-units.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: CSS Units
-type: wiki
-group: Style
-order: 3.3
-version: 2.1
----
-
-<!-- toc -->
-
-## CSS `color` units
-
-```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;
-}
-```
-
-### Notes
-
-> `hsl()`, `hsla()`, `currentColor`, nor 8-character hexadecimal color are not supported.
-
-> `6-chars hex` format is the most efficient way. Use it unless you have a special reason.
-
-> build-in [color names](./color-names.html).
-
-## CSS `length` units
-`px` is the only supported length units.
-You can use it like this :
-
-```css
-.classA { font-size: 48px; line-height: 64px; }
-```
-
-> Other length units in the CSS standard like `em`, `rem`, and `pt` are not supported.
-
-## CSS `number` units
-You can use `number` on following properties:
-* [opacity](./common-styles.html)
-* [lines](./text-styles.html)
-* [flex](./common-styles.html)
-
-## CSS `percentage` (Not support)
\ No newline at end of file
diff --git a/source/wiki/design-principles.md b/source/wiki/design-principles.md
deleted file mode 100644
index 72ac347..0000000
--- a/source/wiki/design-principles.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Design Principles
-type: wiki
-group: Design
-order: 1.4
-version: 2.1
----
-
-<!-- toc -->
diff --git a/source/wiki/event-bubble.md b/source/wiki/event-bubble.md
deleted file mode 100644
index 07b3034..0000000
--- a/source/wiki/event-bubble.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: Event Bubble
-type: wiki
-group: Event
-order: 4.2
-version: 2.1
----
-
-<!-- toc -->
-
-<span class="api-version">v0.13+</span>
-
-> **Note:** This feature works only on weex's native platforms (i.e., on Android and iOS), but not on the web with latest [web renderer](https://github.com/weexteam/weex-vue-render) yet.
-
-If you are a web developer, then you are probably familiar with the event bubbling mechanism, and you may expect Weex to work the same way. However, Weex didn't implement this mechiansim util version 0.13.
-
-To those developers who are not familiar with the event bubbling, Here are some explanations about it, and the concept is rather easy.
-
-## Concept
-
-Take clicking as a example. When a click event fired on a `<video>` element that has a parent element (e.g. a parent `div` component), web browsers run two different phases - the capturing phase and the bubbling phase. We use bubbling phase a lot in web development, and use capturing less.
-
-In the capturing phase, The browser checks to see if the element's outer-most ancestor (on web, may be a `<html>`) has an corresponding event handler registered on it, and runs it if so. Then it moves on to the next element inside `<html>` and does the same thing, then the next one, and so on until it reaches the element that was actually clicked on.
-
-In the bubbling phase, the exact opposite occurs: The browser checks to see if the element that was actually clicked on has an onclick event handler registered on it in the bubbling phase, and runs it if so. Then it moves on to the next immediate ancestor element and does the same thing, then the next one, and so on until it reaches the `<html>` element.
-
-
-
-We usually register our event listeners on the bubbling phase, so that we use bubbling a lot. But if you want to turn this off, you can use `stopPropagation` method of the event object. The standard event object has a function available on it called `stopPropagation`, which when invoked on a handler's event object makes it so that handler is run, but the event doesn't bubble any further up the chain, so no more handlers will be run.
-
-Weex implemented this event bubbling phase in the 0.13 SDK, and for the record, the event bubbling phase is not enabled by default - You should use a attribute `bubble=true` on the root element to turn this feature on.
-
-## How To Use
-
-The event bubbling is not enabled by default, you should use `bubble="true"` in the root element to turn it on.
-
-```html
-<template>
- <!-- Use it in the root element to turn it on. -->
- <div bubble="true">
- ...
- </div>
-</template>
-```
-
-## Stop Bubbling
-
-In the event handler function, you can use the `event.stopPropagation()` method to prevent the event from escalating, which is exactly like the event's method with the same name in [DOM standard](https://dom.spec.whatwg.org/#dom-event-stoppropagation). Note that `event.stopPropagation()` differs from `bubble = "true"`, which affects only the current elements and the propagation of parent elements, without affecting the propagation of child elements; the latter is a switching mechanism that is added for compatibility, Will be a global shutdown or open the bubble mechanism, the two can co-exist.
-
-```javascript
-{
- handleClick (event) {
- // Stop event propagation.
- event.stopPropagation()
- }
-}
-```
-
-## Notice
-
-One thing should be noticed: **For compatibility reason, Weex does not turn on event bubbling by default. You need to add `bubble = "true"` on the root element's properties to turn on the bubbling mechanism. Otherwise, Weex will keep working in the old way, without the event bubbling effect.**
-
-## Examples
-
-- [enable event bubbling](http://dotwe.org/vue/fa2957ce3e9eb47ad9ae1da22d845e95): Use Weex playground APP to scan the qr-code, and then click on the middle of the rectangle with a line of text 'click me' on, you can see the event bubbling up, being handled with every listener binding on each div element, printing messages which indicate that they are indeed been reached by the event.
-
-- [stop event propagation](http://dotwe.org/vue/2cc80e19c9b2430fb780234628065a69): Use Weex playground APP to scan the qr-code, and then click on the middle of the rectangle with a line of text 'click me' on, you can see the event bubbling is disturbed, no longer continue to spread to the root element.
diff --git a/source/wiki/faq.md b/source/wiki/faq.md
deleted file mode 100644
index bf37747..0000000
--- a/source/wiki/faq.md
+++ /dev/null
@@ -1,209 +0,0 @@
----
-title: FAQ
-type: wiki
-group: FAQ
-order: 8
-version: 2.1
----
-
-<!-- toc -->
-
-## Where are legacy docs?
-
-- [Guide](./v-0.10/guide/index.html)
-- [References](./v-0.10/references/index.html)
-- [Advanced](./v-0.10/advanced/index.html)
-- [Tools](./v-0.10/tools/index.html)
-
-## Command errors in MS Windows
-
-Please install [Git for Windows](https://git-scm.com/download/win) first, see [For Windows](https://github.com/apache/incubator-weex/tree/master#for-windows) for more information.
-
-
-## Gradle errors in Android Studio
-
-Downloading `license-gradle-plugin.jar` may trigger errors, like `Connection reset` or `peer not authenticated`.
-Maybe a network problem, try a proxy or VPN.
-
-## Use local image
-Weex's native runtime support load image file from device's disk, all you have to do set the file url like `file:///sdcard/image_new0.png`. As to load image file in your project, Weex is not support yet.
-
-## Error（`The header content contains invalid characters`) in windows
-This's is caused by weex-toolkit's dependency 'http-server', whose old version is not working well in chinese windows environment. We have fixed that, you should upgrade weex-toolkit before use that.
-
-## Playground app display nothing (white screen) after scan
-Best way to find out what's happening is read debug log, you can follow [this document](/guide/index.html) to firgure out how to do that.
-
-## About ECMAScript Version
-
-Weex uses JSCore in iOS and uses v8 in Android. So they both support ECMAScript 5 spec. Additionally, we do some polyfills in native environment:
-
-* `Promise` in iOS/Android
-* Timer APIs (`setTimeout` / `clearTimeout` / `setInterval` / `clearInterval`) in iOS/Android
-* `console` in iOS/Android
-
-In Browser we contains a polyfill of `Promise` temporarily. In the future developers can choose whether to import a polyfill by configurations.
-
-You can also write ES6 syntax by `babel` with `webpack`. The loader will convert ES6 syntax into ES5 automatically.
-
-If you want more ES6 polyfills you can import them into the JS Bundle as you like.
-
-## Dependencies in frontend
-
-In Weex you may have some ways to import/require a component or a JS module. Take ES5 syntax for example:
-
-* `require('xxx.js')`: depends on a JS file
-* `require('npm-module-name')`: depends on a NPM module
-* `require('xxx.we')`: include a `we` file to register a Weex custom component
-* `require('@weex-module/xxx')`: depends on a Weex native module. Notice that it is supported only in `*.we` file not `*.js` file. If you want to use Weex native module in a `*.js` file, temporarily you may write like this:
-
-```javascript
-// use this piece of code below to get Weex native module "modal"
-var modal
-__weex_define__('@weex-temp/x', function (__weex_require__) {
- modal = __weex_require__('@weex-module/modal')
-})
-
-// use APIs in "modal" module
-modal.toast({message: 'hello'})
-```
-
-We will bring a better syntax design in the future.
-
-## iOS text line-height style is abnormal
-
-`line-height` style in text component is different from h5 and Android, text value will be placed at bottom of line box because of iOS native api. We are trying to optimize it.
-
-## Android only support `overflow:hidden`
-The `overflow` style in android is `hidden` and cannot be changed. This is the result of Android View framework. This only happens on Android, iOS will work as expected.
-
-## How to get rid of 750 adaption and calculate width/height in real pixels？
-
-The deviceHeight and deviceWidth got in `this.$getConfig()` is the real device width/height in pixels, not the ones with 750-adapted.
-
-So you can use them to calculate width/height in real pixels.
-
-Suppose you need to display a navigation bar of fixed 88 pixels, the bar's height will be:
-
-```
-var height = 88 * 750 / env.deviceWidth
-```
-
-
-## How to detect an native module/component supported in JavaScript?
-
-### Detect native module
-
-```javascript
-var xxx = require('@weex-module/xxx')
-if (xxx) {
- // todo: use this module
-}
-else {
- // todo: handle the exception
-}
-```
-
-### Detect native component
-
-```html
-<template>
- <component is="{{type}}"></component>
-</template>
-
-<script>
- var type = 'xxx'
- var xxx = require('@weex-component/xxx')
- if (!xxx) {
- type = 'div' // downgrade to <div>
- }
- module.exports = {
- data: function () {
- return {
- type: type
- }
- }
- }
-</script>
-```
-
-## How to transfer data between pages
-
-If you have 2 pages, A and B.
-
-0. A -> B, use [storage module](/references/modules/storage.html) to transfer data
-0. B -> A, use [storage module](/references/modules/storage.html) to transfer data
-
-## How to use `repeat` in Parent-Child components
-
-If you want, You can make a `repeat` operation between Parent-Child components. But you must be strictly in accordance with the document syntax to write code. If there is no child component defined data, or there is no specify `props` that need to be passed down. It will lead to the page does not render properly.
-
-A correct example:
-
-```html
-<element name="child">
- <template>
- <div>
- <text style="font-size:100">{{title}}</text>
- </div>
- </template>
-
- <script>
- module.exports = {
- data: {
- title: null
- }
- }
- </script>
-</element>
-<template>
- <div>
- <child repeat="item in lists" title="{{ item.title }}"></child>
- </div>
-</template>
-<script>
- module.exports = {
- data: {
- lists: [
- { title: 'A' },
- { title: 'B' },
- { title: 'C' }
- ]
- },
- ready: function () {
- this.lists.splice(0, 1)
- }
- }
-</script>
-```
-
-A wrong example：
-
-```html
-<element name="child">
- <template>
- <div>
- <text style="font-size:100">{{title}}</text>
- </div>
- </template>
-</element>
-<template>
- <div>
- <child repeat="item in lists"></child>
- </div>
-</template>
-<script>
- module.exports = {
- data: {
- lists: [
- { title: 'A' },
- { title: 'B' },
- { title: 'C' }
- ]
- },
- ready: function () {
- this.lists.splice(0, 1)
- }
- }
-</script>
-```
diff --git a/source/wiki/gestures.md b/source/wiki/gestures.md
deleted file mode 100644
index 12720f7..0000000
--- a/source/wiki/gestures.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: Gesture
-type: wiki
-group: Event
-order: 4.3
-version: 2.1
----
-
-<!-- toc -->
-
-> Experiment Feature
-
-Weex encapsulates native touch events to provide a gesture system. Using gesture is similar to use event in Weex.
-
-## Type
-For now, there are four types of gestures:
-
-* **Touch**. Touch gesture is fired when a touch point is placed, moved or removed from the touch surface. Touch gesture is accuracy as it will report every trivial event. As a result, listening to touch gesture may be slow, a great deal of events needs to be processed even a small move happened. There are three types of Touch gesture:
- * `touchstart` will be fired when a touch point is placed on the touch surface.
- * `touchmove` will be fired when a touch point is moved along the touch surface.
- * `touchend` will be fired when a touch point is removed from the touch surface.
- * `stopPropagation` every touch event will be fired, you can control touch event whether should be bubbled by return true(should bubble) or false(touch event consumed by this view, will not be bubbled). this can be used to handle touch confliction between views. (since v0.18+)
-* **Pan**. Pan gesture also report motion of touch point on the touch surface, which is similar to touch gesture. But Pan gesture is sampled and faster than the touch event. As consequence, it is less accuracy than touch gesture. There are also three types of Pan gesture, and the meaning of these types is very close to types of Touch.
- * `panstart`
- * `panmove`
- * `panend`
-* **Horizontal/Vertical Pan** <span class="api-version">v0.10+</span> . Mainly used for cell swipe gestures before conflict resolving system is completed. start/move/end state of the gesture will be passed by `state` property. **Note**: These gestures are in conflict with click event on Android currently.
- * `horizontalpan`
- * `verticalpan`
-* **Swipe**. Swipe is fired when user swipe a touch point on the screen. A serial of motion will only trigger one Swipe gesture.
-* **LongPress**. LongPress is fired when a touch point is held for 500 ms or more.
-
-The Touch gesture and Pan is very close to each other, with following features hold:
-
-* **Touch**. Not sampled, accuracy, but slow.
-* **Pan**. Sampled, fast, less accuracy.
-
-Users may choose their gesture according to their situation.
-
-## Properties
-The following properties can be used in gesture callback:
-
-* `direction`. Only exists for **Swipe** gesture. Indicate the direcion of the swipe, choose from `up`, `left`, `bottom`, `right`.
-* `changedTouches`. An array of motion for every touch pointer that has contribute to the current gesture.
-
-### changedTouches
-
-`changedTouches` is an array, with the following properties in its children:
-
-* `identifier`. A unique identifier for a touch pointer.
-* `pageX`. The X coordinate of the touch pointer relative to the left edge of the document.
-* `pageY`. The Y coordinate of the touch pointer relative to the top of the document.
-* `screenX`. The X coordinate of the touch point relative to the left edge of the screen.
-* `screenY`. The Y coordinate of the touch point relative to the top edge of the screen.
-* `force`. A float value that represents the amount of pressure the user is applying to the touch surface. This is a value between 0.0 (no pressure) and 1.0 (the maximum amount of pressure the hardware can recognize).
-> iOS only and force is included in iPhone 6S and later models
-
-[have a try](http://dotwe.org/vue/91b6929f4f9f97a099a30c516dc2db06)
-
-## Constrain
-Currently, Weex Android do not support listening to gesture on `scroller`, `list` and `webview`, as it would lead a large amount of event conflicting.
diff --git a/source/wiki/handler-introduction.md b/source/wiki/handler-introduction.md
deleted file mode 100644
index 22d0e28..0000000
--- a/source/wiki/handler-introduction.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Handler
-type: wiki
-group: concept
-order: 5.2
-version: 2.1
----
-
-### what's handler
- handler(adapter) is just like service in WeexSDK engine, it can service for component and module, you can use it directly in component、module and other native code.
-
-### handler caller
-
-handler decouples the interface implementation and its interface. You don't need to care more details about the implementation as a handler user, this can be done by the handler developer and the instance of handler will be only one during the lifecycle of application. You can define your own handler interface(protocol in iOS) and use it in any native code.
-
-### the difference between module and handler
-
-- position in app
-
- 
- Assume that we have three weex page(WeexSDK instance) in navigation stacks, and they all use fetch module method during the render of page. There will be an instance of fetch module class in every page(WeexSDK instance) destroyed with page destroyed, but there will be only one for the instance of handler class.
-
-- usage
-
- handler can be called in any native code including weex native component, module and other handlers, it cannot be used in javaScript directly.
- module can export some methods by native developers to front-end developers, it can be used in javaScript code.
-
-### introduction to internal handler
-
- - navigationHandler
-
- There is a default implementation for navigation insterface(protocol), this handler can be used in navigation module methods which complete pop and push operations.
-
- - imageLoaderHandler
-
- The image component is a container for image, you can specify url to load image, the logic for download image is in the imageLoaderHandler handler, image component only display image contents.
-
- WeexSDK doesn't provide default loader for image handler.
-
- - AppMonitorHandler
-
- There are some metrics collected during the render progress, and module caller frequency also collect, you can got these metrics by implementing `AppMonitorHandler` handler.
- WeexSDK doesn't provide default handler for `AppMonitorHandler`.
-
- - JSExceptionHandler
-
- There are some runtime exceptions during the execution of javaScript code, JSExceptionHandler provide the monitor for javaScript exception, WeexSDK will invoke this handler while exceptions occurs.
-
- WeexSDK doesn't provide default handler for `JSExceptionHandler`.
-
- - URLRewriteHandler
-
- image、video and web load content from specified url by adopting this rewrite rules, you can define your own rules for custom path.
-
- WeexSDK provide default handler for `URLRewriteHandler`. Get more details about the default [rewrite rules](../guide/advanced/path.html)
diff --git a/source/wiki/images/css-boxmodel.png b/source/wiki/images/css-boxmodel.png
deleted file mode 100644
index a2063e2..0000000
--- a/source/wiki/images/css-boxmodel.png
+++ /dev/null
Binary files differ
diff --git a/source/wiki/images/css-flexbox-align.jpg b/source/wiki/images/css-flexbox-align.jpg
deleted file mode 100644
index 8a7f731..0000000
--- a/source/wiki/images/css-flexbox-align.jpg
+++ /dev/null
Binary files differ
diff --git a/source/wiki/images/css-flexbox-justify.svg b/source/wiki/images/css-flexbox-justify.svg
deleted file mode 100644
index 33e742b..0000000
--- a/source/wiki/images/css-flexbox-justify.svg
+++ /dev/null
@@ -1,59 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width='504' height='270' viewBox="0 0 504 270">
- <defs>
- <pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
- <rect x='0' y='0' width='10' height='10' fill='#eee' />
- <rect x='10' y='10' width='10' height='10' fill='#eee' />
- <rect x='0' y='10' width='10' height='10' fill='#ccc' />
- <rect x='10' y='0' width='10' height='10' fill='#ccc' />
- </pattern>
- </defs>
- <style>
- text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
- rect { stroke-width: 2px; stroke: #888; }
- g > rect:nth-child(1) { fill: #888 }
- g > rect:nth-child(2) { fill: #fcc; }
- g > rect:nth-child(3) { fill: #cfc; }
- g > rect:nth-child(4) { fill: #ccf; }
- g > rect:nth-child(5) { fill: transparent; }
- </style>
- <g transform="translate(2,2)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='0' y='0' width='100' height='50' />
- <rect x='100' y='0' width='80' height='50' />
- <rect x='180' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>flex-start</text>
- </g>
- <g transform="translate(2,56)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='120' y='0' width='100' height='50' />
- <rect x='220' y='0' width='80' height='50' />
- <rect x='300' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>flex-end</text>
- </g>
- <g transform="translate(2,110)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='60' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='240' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>center</text>
- </g>
- <g transform="translate(2,164)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='0' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='300' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>space-between</text>
- </g>
- <g transform="translate(2,218)">
- <rect x='0' y='0' width='500' height='50' />
- <rect x='20' y='0' width='100' height='50' />
- <rect x='160' y='0' width='80' height='50' />
- <rect x='280' y='0' width='200' height='50' />
- <rect x='0' y='0' width='500' height='50' />
- <text x='250' y='38'>space-around</text>
- </g>
-</svg>
\ No newline at end of file
diff --git a/source/wiki/images/css-flexbox-sample.png b/source/wiki/images/css-flexbox-sample.png
deleted file mode 100644
index 0f1236d..0000000
--- a/source/wiki/images/css-flexbox-sample.png
+++ /dev/null
Binary files differ
diff --git a/source/wiki/images/nav.png b/source/wiki/images/nav.png
deleted file mode 100644
index 7081ca7..0000000
--- a/source/wiki/images/nav.png
+++ /dev/null
Binary files differ
diff --git a/source/wiki/index.md b/source/wiki/index.md
deleted file mode 100644
index c53db88..0000000
--- a/source/wiki/index.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: How it works
-type: wiki
-group: Design
-order: 1.1
-version: 2.1
----
-
-<!-- toc -->
-
-## Overall Structure
-
-Weex is a client-side technology on the surface, but in fact it connects the whole way from the local development environment to the cloud deployment and distribution.
-
-Developers can first write an app page just like writing a web page, and then compile the app page into a piece of JavaScript which is called Weex JS bundle.
-
-In the cloud, developers can deploy the generated JS bundle. And then it can be requested or pre-fetched from a mobile app with WeexSDK.
-
-The WeexSDK would prepare a JavaScript engine to run corresponding JS bundle when user opens a Weex page anytime. Usually the JS bundle will make some calls to native-side through Weex JS bridge. They let native-side render the user interface or handle user interactions, storage data, make network communications, call device powers and so on.
-
-Even if a user does not install the App, he can still open a same web page in the browser, using the same source code.
-
-
-
-## Local Development Environment
-
-The design of local development environment of Weex is based on the web development experience. It help web developers writing mobile app UI with their familiar HTML / CSS / JavaScript. At the same time Weex also do the official support to [Vue.js](https://vuejs.org/), a very great front-end framework.
-
-In addition, the management of a Weex project is also very familiar with a web project. First, web developers can use npm packages to manage dependencies. Second, web developers can refer to all best practices from every process of a web project such as scaffolding, development, preview, debugging, test etc.
-
-Also same as the best practice of web development, each Weex page will be built into a JS bundle. In the browser, we put JS bundle into the web page as a `<script>` tag. In the client, we put JS bundle into the local, and execute it in WeexSDK.
-
-**Links**
-
-* [Platform differences between Weex and web](/wiki/platform-difference.html)
-* [Differences of using Vue between Weex with web](/wiki/platform-difference.html)
-* [Get Started](../index.html)
-* [Using Devtools](./devtools.html)
-
-## Cloud Deployment & Distribution
-
-Weex JS bundle can be deployed and distributed as a static resource. Almost all current web development system and best practice can be applied to Weex directly such as generating JS bundle through CMS system or deploying JS bundle to static CDN, monitoring JS bundle traffic through server log, caching or pre-fetching JS bundle to reduce networking cost etc.
-
-## Client-side JavaScript Engine
-
-Both iOS and Android client-side of Weex run a JavaScript engine to execute JS bundles and send well defined instructions to the native render layers. We choose JavaScriptCore in iOS and v8 in Android which provide strong performance and stability.
-
-In order to make the mobile resources better utilized, we just run only one instance of JavaScript for all Weex pages. That is, all JS bundles share the same JavaScript instance, but each JS bundle context also isolated well by default in the runtime. We also put Vue 2.0 as a built-in JS Framework, developers do not have to pack it in each JS bundle, which save the size and time of networking.
-
-## Client Rendering Layer
-
-Weex offers both iOS and Android native rendering layers. Each of them are based on the Native DOM model and exposed to JavaScript APIs. At the same time we provide a set of native components and modules to use. Also Weex has high performance especially on first-screen loading time, memory cost and re-reuse of long list, etc.
-
-Although Weex has provided a group of most commonly used components and modules officially. But we definitely know they couldn't satisfy everyone. So we design our native render as extendable as possible. You can extend more components and modules on your own. We can build and share an Weex eco-system together.
-
-**Links**
-
-* [Differences between Weex and web standard](../../references/web-standards.html)
-* [Using Weex in iOS](/references/ios-apis.html)
-* [Using Weex in Android](/references/android-apis.html)
-* [Extend to iOS](/guide/extend-ios.html)
-* [Extend to Android](/guide/extend-android.html)
-
-## In the Browser
-
-Besides iOS and Android client, Weex also has a web version based on Vue 2.0. Developers can just use Vue 2.0 to build the same page in browsers.
-
-**Links**
-
-* [Using Weex in HTML5](../../references/html5-apis.html)
-* [Extend to HTML5](../../references/advanced/extend-to-html5.html)
diff --git a/source/wiki/module-introduction.md b/source/wiki/module-introduction.md
deleted file mode 100644
index 1e7e2c7..0000000
--- a/source/wiki/module-introduction.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: Module
-type: wiki
-group: concept
-order: 5.3
-version: 2.1
----
-## What is a module?
-A module is a set of method operations. You can `require` it and call its methods. During the initialization of WeexSDK, some internal modules have already been registered by the engine.
-
-## Native module registration process
- 
-
-## Built-in modules
-`stream` module: it provides a method called `fetch` which can invoke a network request to specified server. You can get more details [here](../references/modules/stream.html).
-
-For example:
-
- ```javaScript
- var stream = weex.requireModule('stream');
- stream.fetch({
- method: 'GET',
- url: 'http://httpbin.org/get',
- type:'jsonp'
- }, function(ret) {
- console.log('in completion')
- },function(response){
- console.log('in progress')
- });
- ```
-
-## Difference between module method and component method
-For a module method, you can call the method after require and it doesn't rely on any component instance. For component method, you must get the ref for component first and then call the [component method](./component-introduction.html)
diff --git a/source/wiki/platform-difference.md b/source/wiki/platform-difference.md
deleted file mode 100644
index 3ffc852..0000000
--- a/source/wiki/platform-difference.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Platform Differences with Web
-type: wiki
-group: Design
-order: 1.4
-version: 2.1
----
-
-# Platform Differences with Web
-
-Work in progresss.
diff --git a/source/wiki/text-styles.md b/source/wiki/text-styles.md
deleted file mode 100644
index 40592f1..0000000
--- a/source/wiki/text-styles.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Text Styles
-type: wiki
-group: Style
-order: 3.2
-version: 2.1
----
-
-<!-- toc -->
-
-Text alike components share some common style rules. The text alike components currently includes [`text`](../references/components/text.html)、[`input`](../references/components/input.html) and [`richtext`](../references/components/richtext.html)
-
-## Properties
-
-- `color`: <colors> this property set the foreground color of an component's text content.
- * The property `color` support multiple formats of values, contains rgb, rgba, #fff, #ffffff, named-color. Example:
- ```css
- .my-class { color: red; }
- .my-class { color: #f00; }
- .my-class { color: #ff0000; }
- .my-class { color: rgb(255, 0, 0); }
- .my-class { color: rgba(255, 0, 0, 0.5); }
- ```
-- `font-size`: <length> this property specifies the size of the font.
-- `font-style`: <enum> `normal` | `italic`. This property lets you select italic or normal faces within a font-family. Default value is `normal`.
-- `font-weight`<span class="api-version">v0.9+</span>:
- * values: `normal`, `bold`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`
- * normal is equal to 400, bold equel to 700
- * default value: `normal`
- * apply to: `<text>`, `<input>`
- * ios support showing 9 kind of font-weight.
- * android support showing 2 kind of font-weight:400,700, other value will map to 400 or 700
- * Some standard values like `lighter`, `bolder`, number unit are not supported.
- * The effect not apply to all elements, just `<text>` and `<input>`. In another way, it's not inherited.
-- `text-decoration`: <enum> `none` | `underline` | `line-through`. This property is used to set the text formatting to underline or line-through. The default value is `none`.
- >> Only support for `<text>` and `<ricthext>`
-- `text-align`: <enum> `left` | `center` | `right`. This property describes how inline content like text is aligned in its parent component. The default value is `left`.
-- `font-family`:<string> this property set the font-family of the text. This property **doesn't guarantee** the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices. If you want load your own font-family, ref [custom-font](../references/modules/custom_font.html) instead.
-- `text-overflow`:<enum> `clip` | `ellipsis`. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis.
- >> Only support for `<text>` and `<ricthext>`
-- `lines`: <number> positive number. This is the max lines of text that would be displayed, the default value is 0 which means there is no restriction on text lines. If the text is not enough, the actual number of line may be shorter than the specified value.
-- `line-height`: <length> The line height of every line in the text. `line-height` is the space between top and bottom. There is no relationship between `line-height` and `font-size`, as `line-height` is restricted by top and bottom, `font-size` is interpreted by glyph. Usually but not always, `line-height` and `font-size` with the same value will cause the text clipped.
-
-## Note
-* [The list of color keywords.](./color-names.html)
-
diff --git a/test/catalog.js b/test/catalog.js
deleted file mode 100644
index 0e7bbd2..0000000
--- a/test/catalog.js
+++ /dev/null
@@ -1,33 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const glob = require('glob')
-
-const bannerRE = /^[^`]*(\-{3})?([^`]+)\-{3}\n/i
-
-function scan () {
- const output = glob.sync('source/**/*.md')
- .filter(name => !/\/\_/i.test(name))
- .map((name, index) => {
- const file = fs.readFileSync(name, { encoding: 'utf-8' })
- const result = bannerRE.exec(file)
- if (result && result[0]) {
- const keys = {}
- result[0].split(/[\n\t]+/).forEach(str => {
- const pair = str.split(/\s*\:\s*/)
- if (pair.length > 1) {
- keys[pair[0]] = pair[1]
- }
- })
- const indent = ' '.repeat(name.split(/\/|\\/).length - 2)
- const string = `${indent}* [${keys.title || ''}](${path.join('./', name)})`
- // console.log(string)
- return string
- }
- })
- .filter(x => !!x)
-
- console.log('-----> output:', output.length)
- fs.writeFileSync('catalog.md', output.join('\n'))
-}
-
-scan()
diff --git a/test/url-validator.js b/test/url-validator.js
deleted file mode 100644
index 198dc9b..0000000
--- a/test/url-validator.js
+++ /dev/null
@@ -1,98 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const glob = require('glob')
-const chalk = require('chalk')
-const fetch = require('node-fetch')
-const urlExtractor = require('url-extractor')
-const similarity = require('string-similarity')
-const findLineColumn = require('find-line-column')
-
-const extractUrls = urlExtractor.extractUrls
-const SOURCE_TYPE_MARKDOWN = urlExtractor.SOURCE_TYPE_MARKDOWN
-
-const whiteList = [
- 'localhost'
-]
-
-function log(errorCode, url, file, position) {
- console.log(chalk.bgRed(errorCode), chalk.yellow(url),
- `${file}:${position.line}:${position.col}`);
-}
-
-glob('source/**/*.md', (err, files) => {
- files.forEach((file, fileIndex) => {
- fs.readFile(file, { encoding: 'utf-8' }, (err, text) => {
- if (err) {
- console.error(err)
- return
- }
-
- const urls = extractUrls(text, SOURCE_TYPE_MARKDOWN)
- urls.forEach(url => {
- const position = findLineColumn(text, text.indexOf(url))
-
- // '//xxx.com' -> 'http://xxx.com'
- if (url.match(/^\/\//)) url = 'http:' + url
-
- // ignore whitelist
- for (let i = 0; i < whiteList.length; i++) {
- if (url.match(whiteList[i])) return
- }
-
- if (url.match(/^https?:\/\//)) {
- // using fetch to test whether available
- fetch(url)
- .then(res => {
- if (res.status >= 400) {
- log(res.status, url, file, position);
- }
- })
- .catch(err => {
- if (err.code !== 'ECONNREFUSED' && err.code !== 'ECONNRESET') {
- log(err.code, url, file, position)
- }
- })
- } else if (url.match(/^.{0,2}\//)) {
- // test local path
- let targetPath
- if (url.startsWith('/')) {
- // '/wiki' -> 'source/wiki'
- targetPath = path.resolve('source', url.substring(1))
- } else {
- targetPath = path.resolve(path.dirname(file), url)
- }
- // 'a.html#title1' -> '#title1
- const urlHash = url.split('#')[1] ? '#' + url.split('#')[1] : ''
- // 'a.html#title1' -> 'a.html' -> 'a.md
- targetPath = targetPath.replace(/#(.*)/, '').replace('.html', '.md')
- fs.access(targetPath, err => {
- if (err) {
- let patternDir
- const option = {
- cwd: 'source'
- }
- if (file.indexOf('/cn/') >= 0) {
- patternDir = 'cn/**/'
- } else {
- patternDir = '**/'
- option.ignore = 'cn/**'
- }
- glob(patternDir + path.basename(targetPath), option, (globError, files) => {
- log(err.code, url, file, position)
- if (files.length) {
- console.log(chalk.bgBlue('FOUND'), files)
- const match = similarity.findBestMatch(url, files)
- .bestMatch.target.replace('.md', '.html')
- console.log(chalk.bgGreen('FIXED'), match)
- text = text.replace(url, `/${match}${urlHash}`)
- // using sync mehtod to avoid writing a file in the same time.
- fs.writeFileSync(file, text)
- }
- })
- }
- })
- }
- })
- })
- })
-})
