You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ky...@apache.org on 2019/03/26 07:03:56 UTC
[incubator-weex-site] branch master updated: Update master branch
(#357)
This is an automated email from the ASF dual-hosted git repository.
kyork pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
The following commit(s) were added to refs/heads/master by this push:
new 6e39144 Update master branch (#357)
6e39144 is described below
commit 6e39144c7a93a875933f8f70fa1ba7e0814bac28
Author: YorkShen <sh...@gmail.com>
AuthorDate: Tue Mar 26 15:03:51 2019 +0800
Update master branch (#357)
As the master branch and draft branch is different in many ways, there is no way to merge them directly. Instead, the following command is used:
git checkout master
git merge -X theirs draft --allow-unrelated-histories
---
.gitignore | 43 +-
README.md | 18 +-
docs/.vuepress/components/SourceCode.vue | 114 ++++
docs/.vuepress/config.js | 351 +++++++++++
docs/.vuepress/data/lang-en.js | 36 ++
docs/.vuepress/data/lang-zh.js | 35 ++
docs/.vuepress/data/redirect.json | 199 ++++++
docs/.vuepress/data/who-is-using-weex.js | 285 +++++++++
docs/.vuepress/override.styl | 7 +
docs/README.md | 7 +
docs/blog/README.md | 7 +
docs/blog/write-a-blog.md | 3 +
docs/community/README.md | 7 +
docs/community/roadmap.md | 34 ++
docs/community/weex-third-party-extensions.md | 11 +
docs/docs/README.md | 7 +
docs/docs/api/android-apis.md | 62 ++
docs/docs/api/broadcast-channel.md | 115 ++++
docs/docs/api/ios-apis.md | 77 +++
docs/docs/api/js-service.md | 115 ++++
docs/docs/api/weex-variable.md | 195 ++++++
docs/docs/components/a.md | 41 ++
docs/docs/components/cell.md | 35 ++
docs/docs/components/div.md | 23 +
docs/docs/components/image.md | 166 +++++
docs/docs/components/indicator.md | 27 +
docs/docs/components/input.md | 150 +++++
docs/docs/components/list.md | 78 +++
docs/docs/components/loading.md | 70 +++
docs/docs/components/recycle-list.md | 189 ++++++
docs/docs/components/refresh.md | 81 +++
docs/docs/components/richtext.md | 75 +++
docs/docs/components/scroller.md | 150 +++++
docs/docs/components/slider.md | 83 +++
docs/docs/components/text.md | 65 ++
docs/docs/components/textarea.md | 118 ++++
docs/docs/components/video.md | 82 +++
docs/docs/components/waterfall.md | 50 ++
docs/docs/components/web.md | 102 ++++
docs/docs/events/common-events.md | 142 +++++
docs/docs/events/event-bubbling.md | 67 ++
docs/docs/events/gesture.md | 61 ++
docs/docs/images/BroadcastChannel.png | Bin 0 -> 50463 bytes
docs/docs/images/CustomFontface_badcase.png | Bin 0 -> 54306 bytes
docs/docs/images/css-boxmodel.png | Bin 0 -> 12581 bytes
docs/docs/images/css-flexbox-align.jpg | Bin 0 -> 35005 bytes
docs/docs/images/css-flexbox-justify.svg | 59 ++
docs/docs/images/css-flexbox-sample.png | Bin 0 -> 3210 bytes
docs/docs/images/image-resize-property.png | Bin 0 -> 730054 bytes
docs/docs/images/list_demo.jpg | Bin 0 -> 128304 bytes
docs/docs/images/nav.png | Bin 0 -> 83497 bytes
docs/docs/modules/animation.md | 85 +++
docs/docs/modules/clipboard.md | 30 +
docs/docs/modules/dom.md | 112 ++++
docs/docs/modules/globalEvent.md | 68 +++
docs/docs/modules/meta.md | 88 +++
docs/docs/modules/modal.md | 104 ++++
docs/docs/modules/navigator.md | 56 ++
docs/docs/modules/picker.md | 50 ++
docs/docs/modules/storage.md | 65 ++
docs/docs/modules/stream.md | 49 ++
docs/docs/modules/websockets.md | 129 ++++
docs/docs/modules/webview.md | 41 ++
docs/docs/styles/color-name.md | 677 +++++++++++++++++++++
docs/docs/styles/common-styles.md | 585 ++++++++++++++++++
docs/docs/styles/css-units.md | 220 +++++++
docs/docs/styles/text-styles.md | 56 ++
docs/guide/README.md | 7 +
docs/guide/advanced/asset-path.md | 40 ++
docs/guide/advanced/downgrade.md | 160 +++++
docs/guide/advanced/use-vuex-and-vue-router.md | 82 +++
docs/guide/contribute/bug-report-guidelines.md | 23 +
docs/guide/contribute/contribute-code.md | 84 +++
docs/guide/contribute/how-to-contribute.md | 57 ++
docs/guide/debug/debug.md | 86 +++
docs/guide/debug/integrate-devtool-to-android.md | 131 ++++
docs/guide/debug/integrate-devtool-to-ios.md | 177 ++++++
docs/guide/develop/create-a-new-app.md | 69 +++
docs/guide/develop/integrate-to-android-app.md | 162 +++++
docs/guide/develop/integrate-to-iOS-app.md | 123 ++++
docs/guide/develop/integrate-to-your-app.md | 254 ++++++++
docs/guide/develop/setup-develop-environment.md | 37 ++
docs/guide/extend/extend-android.md | 455 ++++++++++++++
docs/guide/extend/extend-framework.md | 144 +++++
docs/guide/extend/extend-ios-with-swift.md | 106 ++++
docs/guide/extend/extend-ios.md | 301 +++++++++
docs/guide/extend/extend-web.md | 99 +++
docs/guide/front-end-frameworks.md | 86 +++
docs/guide/images/different-switch.png | Bin 0 -> 29228 bytes
docs/guide/images/flow.png | Bin 0 -> 57741 bytes
docs/guide/images/native-component.png | Bin 0 -> 82080 bytes
docs/guide/images/toolkit-preview.png | Bin 0 -> 180414 bytes
docs/guide/images/vue-rax.png | Bin 0 -> 120960 bytes
docs/guide/images/weex-example-yo.png | Bin 0 -> 200510 bytes
docs/guide/introduction.md | 81 +++
docs/guide/platform-difference.md | 63 ++
docs/guide/use-rax-in-weex.md | 5 +
docs/guide/use-vue-in-weex.md | 277 +++++++++
docs/release-note.md | 482 +++++++++++++++
docs/tools/README.md | 7 +
docs/tools/extension.md | 152 +++++
docs/tools/playground.md | 1 +
docs/tools/toolkit.md | 199 ++++++
docs/zh/README.md | 7 +
docs/zh/blog/README.md | 7 +
docs/zh/blog/interaction-optimization.md | 289 +++++++++
docs/zh/blog/ios-weexcore.md | 71 +++
docs/zh/blog/weex-auto-test-locating.md | 182 ++++++
docs/zh/blog/weexcore-multiprocess-evolution.md | 146 +++++
docs/zh/blog/write-a-blog.md | 3 +
docs/zh/community/README.md | 7 +
docs/zh/community/roadmap.md | 35 ++
docs/zh/community/weex-third-party-extensions.md | 11 +
docs/zh/docs/README.md | 7 +
docs/zh/docs/api/android-apis.md | 67 ++
docs/zh/docs/api/broadcast-channel.md | 115 ++++
docs/zh/docs/api/ios-apis.md | 91 +++
docs/zh/docs/api/js-service.md | 117 ++++
docs/zh/docs/api/weex-variable.md | 195 ++++++
docs/zh/docs/components/a.md | 41 ++
docs/zh/docs/components/cell.md | 37 ++
docs/zh/docs/components/div.md | 23 +
docs/zh/docs/components/image.md | 166 +++++
docs/zh/docs/components/indicator.md | 27 +
docs/zh/docs/components/input.md | 138 +++++
docs/zh/docs/components/list.md | 113 ++++
docs/zh/docs/components/loading.md | 48 ++
docs/zh/docs/components/recycle-list.md | 181 ++++++
docs/zh/docs/components/refresh.md | 53 ++
docs/zh/docs/components/richtext.md | 74 +++
docs/zh/docs/components/scroller.md | 121 ++++
docs/zh/docs/components/slider.md | 83 +++
docs/zh/docs/components/text.md | 66 ++
docs/zh/docs/components/textarea.md | 119 ++++
docs/zh/docs/components/video.md | 82 +++
docs/zh/docs/components/waterfall.md | 69 +++
docs/zh/docs/components/web.md | 86 +++
docs/zh/docs/events/common-events.md | 104 ++++
docs/zh/docs/events/event-bubbling.md | 58 ++
docs/zh/docs/events/gesture.md | 79 +++
docs/zh/docs/images/BroadcastChannel.png | Bin 0 -> 50463 bytes
docs/zh/docs/images/CustomFontface_badcase.png | Bin 0 -> 54306 bytes
docs/zh/docs/images/css-boxmodel.png | Bin 0 -> 12581 bytes
docs/zh/docs/images/css-flexbox-align.jpg | Bin 0 -> 35005 bytes
docs/zh/docs/images/css-flexbox-justify.svg | 59 ++
docs/zh/docs/images/css-flexbox-sample.png | Bin 0 -> 3210 bytes
docs/zh/docs/images/image-resize-property.png | Bin 0 -> 730054 bytes
docs/zh/docs/images/list_demo.jpg | Bin 0 -> 128304 bytes
docs/zh/docs/images/nav.png | Bin 0 -> 83497 bytes
docs/zh/docs/modules/animation.md | 80 +++
docs/zh/docs/modules/clipboard.md | 28 +
docs/zh/docs/modules/dom.md | 122 ++++
docs/zh/docs/modules/globalEvent.md | 68 +++
docs/zh/docs/modules/meta.md | 86 +++
docs/zh/docs/modules/modal.md | 96 +++
docs/zh/docs/modules/navigator.md | 50 ++
docs/zh/docs/modules/picker.md | 50 ++
docs/zh/docs/modules/storage.md | 57 ++
docs/zh/docs/modules/stream.md | 49 ++
docs/zh/docs/modules/websockets.md | 129 ++++
docs/zh/docs/modules/webview.md | 41 ++
docs/zh/docs/styles/color-name.md | 676 ++++++++++++++++++++
docs/zh/docs/styles/common-styles.md | 442 ++++++++++++++
docs/zh/docs/styles/css-units.md | 220 +++++++
docs/zh/docs/styles/text-styles.md | 49 ++
docs/zh/guide/README.md | 7 +
docs/zh/guide/advanced/asset-path.md | 40 ++
docs/zh/guide/advanced/downgrade.md | 164 +++++
docs/zh/guide/advanced/use-vuex-and-vue-router.md | 80 +++
docs/zh/guide/contribute/bug-report-guidelines.md | 27 +
docs/zh/guide/contribute/contribute-code.md | 87 +++
docs/zh/guide/contribute/how-to-contribute.md | 57 ++
docs/zh/guide/debug/debug.md | 87 +++
.../zh/guide/debug/integrate-devtool-to-android.md | 121 ++++
docs/zh/guide/debug/integrate-devtool-to-ios.md | 178 ++++++
docs/zh/guide/develop/create-a-new-app.md | 68 +++
docs/zh/guide/develop/integrate-to-android-app.md | 168 +++++
docs/zh/guide/develop/integrate-to-iOS-app.md | 129 ++++
docs/zh/guide/develop/integrate-to-your-app.md | 305 ++++++++++
docs/zh/guide/develop/setup-develop-environment.md | 50 ++
docs/zh/guide/extend/extend-android.md | 468 ++++++++++++++
docs/zh/guide/extend/extend-framework.md | 144 +++++
docs/zh/guide/extend/extend-ios-with-swift.md | 102 ++++
docs/zh/guide/extend/extend-ios.md | 290 +++++++++
docs/zh/guide/extend/extend-web.md | 76 +++
docs/zh/guide/front-end-frameworks.md | 83 +++
docs/zh/guide/images/different-switch.png | Bin 0 -> 29228 bytes
docs/zh/guide/images/flow.png | Bin 0 -> 57741 bytes
docs/zh/guide/images/native-component.png | Bin 0 -> 82080 bytes
docs/zh/guide/images/toolkit-preview.png | Bin 0 -> 180414 bytes
docs/zh/guide/images/vue-rax.png | Bin 0 -> 120960 bytes
docs/zh/guide/images/weex-example-yo.png | Bin 0 -> 200510 bytes
docs/zh/guide/introduction.md | 82 +++
docs/zh/guide/platform-difference.md | 62 ++
docs/zh/guide/use-rax-in-weex.md | 3 +
docs/zh/guide/use-vue-in-weex.md | 277 +++++++++
docs/zh/release-note.md | 8 +
docs/zh/tools/README.md | 7 +
docs/zh/tools/extension.md | 152 +++++
docs/zh/tools/playground.md | 1 +
docs/zh/tools/toolkit.md | 201 ++++++
package.json | 67 +-
202 files changed, 18962 insertions(+), 56 deletions(-)
diff --git a/.gitignore b/.gitignore
index 63f5992..05cb898 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,10 +1,39 @@
+# Editor directories and files
.DS_Store
-Thumbs.db
-node_modules/
-public/
-.deploy*/
-.vscode/
-db.json
+.idea
+.vscode
+*.iml
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+
+# Logs
+logs
*.log
+
+# Runtime data
+pids
+*.pid
+*.pid.lock
+*.apk
+*.ap_
+*.class
+*.dex
+*.seed
+*.tgz
+
+# Node and yarn files
+.npm
+.eslintcache
+.yarn-integrity
+package-lock.json
+node_modules/
+jspm_packages/
+
+# Scripts
+bin/
/*.sh
-/bin/
+
+# Vue Press
+docs/.vuepress/dist/
diff --git a/README.md b/README.md
index c99518d..c6564ac 100644
--- a/README.md
+++ b/README.md
@@ -16,11 +16,23 @@ npm install
After that, you can start a web server to preview the website on your local machine.
```bash
-npm run server
+npm run dev
```
-It will start a web server at `http://localhost:4000`. The pages will be updated automatically once you save the corresponding source file.
+It will start a web server at `http://localhost:8080`. The pages will be updated automatically once you save the corresponding source file.
## Contribute
-The documents are written in Markdown format located in the `source` folder. Feel free to send pull requests!
+The documents are written in Markdown format located in the `docs` folder. Feel free to send pull requests!
+
+## How to add a blog
+
+To write a blog, edit 'docs/.vuepress/config.js'.
+
+* Search 'blog' in this file. Edit blog section and add your article filename(without 'md' extension) and title.
+```javascript
+'/blog/': [['write-a-blog', 'Write a Blog'], ['your-file-name', 'Your article title']]
+'/zh/blog/': [['write-a-blog', '写一篇博客'], ['your-file-name', '你的文章标题']]
+```
+
+* Add your file(with 'md' extension) in 'docs/blog' and 'docs/zn/blog' directories.
\ No newline at end of file
diff --git a/docs/.vuepress/components/SourceCode.vue b/docs/.vuepress/components/SourceCode.vue
new file mode 100644
index 0000000..8063d1c
--- /dev/null
+++ b/docs/.vuepress/components/SourceCode.vue
@@ -0,0 +1,114 @@
+<template>
+ <div class="wrapper">
+ <iframe class="iframe"
+ ref="iframe"
+ :src="url"
+ :style="{ height }"
+ @load="onLoad"
+ frameborder="0"></iframe>
+ <div class="controls" v-if="showControls">
+ <div class="btn" @click="openURL">
+ <span class="btn-text">Open</span>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ const baseURL = 'https://editor.weex.alibaba-inc.com'
+ function setParams (url, params) {
+ const querys = []
+ for (const key in params) {
+ if (Object.prototype.hasOwnProperty.call(params, key) && params[key]) {
+ querys.push({ name: key, value: params[key] })
+ }
+ }
+ if (url && querys.length) {
+ url += ('?' + querys.map(x => `${x.name}=${x.value}`).join('&'))
+ }
+ return url
+ }
+ export default {
+ props: ['hash', 'file', 'line', 'mode', 'buttons'],
+ data () {
+ return {
+ url: this.createURL(),
+ showControls: false,
+ height: 'auto'
+ }
+ },
+ created () {
+ if (this.line) {
+ this.height = this.calculateHeight() + 'px'
+ }
+ },
+ methods: {
+ createURL () {
+ let url = this.src ? this.src : `${baseURL}/source/${this.hash}`
+ const params = []
+ if (this.file) {
+ url += `/${this.file}`
+ }
+ return setParams(url, { line: this.line })
+ },
+ onLoad () {
+ // const $iframe = this.$refs.iframe
+ if (this.buttons !== 'none') {
+ this.showControls = true
+ }
+ },
+ calculateHeight () {
+ const lineHeight = 19
+ if (this.line) {
+ var pair = this.line.split(/\-|\~/i)
+ var begin = parseInt(pair[0], 10)
+ var end = parseInt(pair[1], 10) || begin
+ return (end - begin + 1) * lineHeight + 20
+ }
+ },
+ openURL () {
+ try {
+ const url = setParams(`${baseURL}/vue/${this.hash}`, {
+ file: this.file,
+ line: this.line
+ })
+ window.open(url)
+ } catch (e) {}
+ }
+ }
+ }
+</script>
+
+<style scoped>
+ .wrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ padding: 10px 2%;
+ box-sizing: border-box;
+ }
+ .iframe {
+ width: 100%;
+ height: auto;
+ }
+ .controls {
+ position: absolute;
+ top: 18px;
+ right: 3%;
+ }
+ .controls .btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid #5f5f5f;
+ border-radius: 5px;
+ background-color: rgba(255,255,255,.1);
+ color: #969696;
+ cursor: pointer;
+ padding: 3px 8px;
+ font-size: 13px;
+ }
+ .controls .btn:hover {
+ box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
+ }
+</style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
new file mode 100644
index 0000000..ea4be33
--- /dev/null
+++ b/docs/.vuepress/config.js
@@ -0,0 +1,351 @@
+module.exports = {
+ title: 'WEEX',
+ description: 'Weex',
+ locales: {
+ '/': {
+ lang: 'en-US'
+ },
+ '/zh/': {
+ lang: 'zh-CN'
+ }
+ },
+ theme: 'fast',
+ themeConfig: {
+ repo: 'apache/incubator-weex-site',
+ docsRepo: 'apache/incubator-weex-site',
+ docsBranch: 'draft',
+ version: 'v0.20',
+ versionLink: '/release-note.html',
+ logo: 'https://img.alicdn.com/tfs/TB1WtVjogHqK1RjSZFgXXa7JXXa-78-39.svg',
+ locales: {
+ '/': {
+ selectText: 'Languages',
+ label: 'English',
+ lastUpdated: 'Last Updated',
+ editLinkText: 'Edit this page on GitHub',
+ scoreText: {
+ good: 'Excellent doc',
+ bad: 'Unusable doc'
+ },
+ nav: [
+ { text: 'Guide', link: '/guide/' },
+ { text: 'Docs', link: '/docs/' },
+ { text: 'Tools', link: '/tools/' },
+ { text: 'Community', link: '/community/' },
+ { text: 'Blog', link: '/blog/' }
+ ],
+ sidebar: {
+ '/guide/': [
+ {
+ title: 'Getting Started',
+ collapsable: false,
+ children: [
+ ['introduction', 'Introduction'],
+ ['front-end-frameworks', 'Front-End Frameworks'],
+ ['platform-difference', 'Platform Difference'],
+ ['use-vue-in-weex', 'Use Vue in Weex'],
+ ['use-rax-in-weex', 'Use Rax in Weex']
+ ]
+ },
+ {
+ title: 'Develop',
+ collapsable: false,
+ children: [
+ ['develop/setup-develop-environment', 'Setup Develop Environment'],
+ ['develop/create-a-new-app', 'Create a New App'],
+ ['develop/integrate-to-android-app', 'Integrate to Android'],
+ ['develop/integrate-to-iOS-app', 'Integrate to iOS']
+ ]
+ },
+ {
+ title: 'Debug',
+ collapsable: false,
+ children: [
+ ['debug/integrate-devtool-to-android', 'Integrate Devtool to Android'],
+ ['debug/integrate-devtool-to-ios', 'Integrate Devtool to iOS'],
+ ['debug/debug', 'Debug']
+ ]
+ },
+ {
+ title: 'Extend',
+ collapsable: false,
+ children: [
+ ['extend/extend-android', 'Extend Android'],
+ ['extend/extend-ios', 'Extend iOS'],
+ ['extend/extend-ios-with-swift', 'Extend iOS with Swift'],
+ ['extend/extend-web', 'Extend Web Renderer']
+ ]
+ },
+ {
+ title: 'Advanced',
+ collapsable: false,
+ children: [
+ ['advanced/asset-path', 'Asset Path'],
+ ['advanced/downgrade', 'Downgrade'],
+ ['advanced/use-vuex-and-vue-router', 'Use Vuex and vue-router']
+ ]
+ },
+ {
+ title: 'Contribute',
+ collapsable: false,
+ children: [
+ ['contribute/bug-report-guidelines', 'Bug Report'],
+ ['contribute/how-to-contribute', 'Join Weex community'],
+ ['contribute/contribute-code', 'Contribute Code'],
+ ]
+ }
+ ],
+ '/docs/': [
+ {
+ title: 'API',
+ collapsable: false,
+ children: [
+ ['api/weex-variable', 'Weex Variable'],
+ ['api/android-apis', 'Android APIs'],
+ ['api/ios-apis', 'iOS APIs'],
+ ['api/js-service', 'JS Service'],
+ ['api/broadcast-channel', 'BroadcastChannel']
+ ]
+ },
+ {
+ title: 'Built-in Components',
+ collapsable: false,
+ children: [
+ ['components/a', '<a>'],
+ ['components/div', '<div>'],
+ ['components/text', '<text>'],
+ ['components/image', '<image>'],
+ ['components/list', '<list>'],
+ ['components/cell', '<cell>'],
+ ['components/loading', '<loading>'],
+ ['components/refresh', '<refresh>'],
+ ['components/recycle-list', '<recycle-list>'],
+ ['components/scroller', '<scroller>'],
+ ['components/slider', '<slider>'],
+ ['components/indicator', '<indicator>'],
+ ['components/textarea', '<textarea>'],
+ ['components/input', '<input>'],
+ ['components/waterfall', '<waterfall>'],
+ ['components/video', '<video>'],
+ ['components/web', '<web>'],
+ ['components/richtext', '<richtext>']
+ ]
+ },
+ {
+ title: 'Built-in Modules',
+ collapsable: false,
+ children: [
+ ['modules/animation', 'animation'],
+ ['modules/clipboard', 'clipboard'],
+ ['modules/dom', 'dom'],
+ ['modules/globalEvent', 'globalEvent'],
+ ['modules/meta', 'meta'],
+ ['modules/modal', 'modal'],
+ ['modules/navigator', 'navigator'],
+ ['modules/picker', 'picker'],
+ ['modules/storage', 'storage'],
+ ['modules/stream', 'stream'],
+ ['modules/webview', 'webview'],
+ ['modules/websockets', 'webSockets']
+ ]
+ },
+ {
+ title: 'Styles',
+ collapsable: false,
+ children: [
+ ['styles/common-styles', 'Common Styles'],
+ ['styles/text-styles', 'Text Styles'],
+ ['styles/css-units', 'CSS Units'],
+ ['styles/color-name', 'Color name']
+ ]
+ },
+ {
+ title: 'Events',
+ collapsable: false,
+ children: [
+ ['events/common-events', 'Common Events'],
+ ['events/event-bubbling', 'Event Bubble'],
+ ['events/gesture', 'Gesture']
+ ]
+ }
+ ],
+ '/tools/': [
+ ['playground', 'Playground App'],
+ ['toolkit', 'Weex Toolkit'],
+ ['extension', 'VSCode Extension']
+ ],
+ '/community/': [['roadmap', 'Roadmap'], ['weex-third-party-extensions', 'Plugins Market']],
+ '/blog/': [
+ ['write-a-blog', 'Write a Blog']
+ ]
+ }
+ },
+ '/zh/': {
+ selectText: '选择语言',
+ label: '简体中文',
+ lastUpdated: '上次更新',
+ editLinkText: '在 GitHub 上编辑此页',
+ scoreText: {
+ good: '文档写得很棒',
+ bad: '文档写得很差'
+ },
+ nav: [
+ { text: '指南', link: '/zh/guide/' },
+ { text: '文档', link: '/zh/docs/' },
+ { text: '工具', link: '/zh/tools/' },
+ { text: '社区', link: '/zh/community/' },
+ { text: '博客', link: '/zh/blog/' }
+ ],
+ sidebar: {
+ '/zh/guide/': [
+ {
+ title: '快速上手',
+ collapsable: false,
+ children: [
+ ['introduction', '简介'],
+ ['front-end-frameworks', '前端框架'],
+ ['platform-difference', '平台差异'],
+ ['use-vue-in-weex', '在Weex中使用Vue.js'],
+ ['use-rax-in-weex', '在Weex中使用Rax.js']
+ ]
+ },
+ {
+ title: '开发',
+ collapsable: false,
+ children: [
+ ['develop/setup-develop-environment', '设置开发环境'],
+ ['develop/create-a-new-app', '创建一个新的app'],
+ ['develop/integrate-to-android-app', '集成到Android应用'],
+ ['develop/integrate-to-iOS-app', '集成到iOS应用']
+ ]
+ },
+ {
+ title: '调试',
+ collapsable: false,
+ children: [
+ ['debug/integrate-devtool-to-android', '集成Devtool到Android'],
+ ['debug/integrate-devtool-to-ios', '集成Devtool到iOS'],
+ ['debug/debug', '调试']
+ ]
+ },
+ {
+ title: '扩展',
+ collapsable: false,
+ children: [
+ ['extend/extend-android', '扩展Android能力'],
+ ['extend/extend-ios', '扩展iOS能力'],
+ ['extend/extend-ios-with-swift', '使用Swift扩展iOS能力'],
+ ['extend/extend-web', '扩展Web组件']
+ ]
+ },
+ {
+ title: '高阶特性',
+ collapsable: false,
+ children: [
+ ['advanced/asset-path', '资源路径'],
+ ['advanced/downgrade', '降级方案'],
+ ['advanced/use-vuex-and-vue-router', '使用Vuex和vue-router']
+ ]
+ },
+ {
+ title: '贡献',
+ collapsable: false,
+ children: [
+ ['contribute/bug-report-guidelines', 'Bug 反馈'],
+ ['contribute/how-to-contribute', '加入 Weex 社区'],
+ ['contribute/contribute-code', '代码贡献指南'],
+ ]
+ }
+ ],
+ '/zh/docs/': [
+ {
+ title: 'API',
+ collapsable: false,
+ children: [
+ ['api/weex-variable', 'Weex 环境变量'],
+ ['api/android-apis', 'Android 接口'],
+ ['api/ios-apis', 'iOS 接口'],
+ ['api/js-service', 'JS 服务'],
+ ['api/broadcast-channel', '跨页面通信']
+ ]
+ },
+ {
+ title: '内置组件',
+ collapsable: false,
+ children: [
+ ['components/a', '<a>'],
+ ['components/div', '<div>'],
+ ['components/text', '<text>'],
+ ['components/image', '<image>'],
+ ['components/list', '<list>'],
+ ['components/cell', '<cell>'],
+ ['components/loading', '<loading>'],
+ ['components/refresh', '<refresh>'],
+ ['components/recycle-list', '<recycle-list>'],
+ ['components/scroller', '<scroller>'],
+ ['components/slider', '<slider>'],
+ ['components/indicator', '<indicator>'],
+ ['components/textarea', '<textarea>'],
+ ['components/input', '<input>'],
+ ['components/waterfall', '<waterfall>'],
+ ['components/video', '<video>'],
+ ['components/web', '<web>'],
+ ['components/richtext', '<richtext>']
+ ]
+ },
+ {
+ title: '内置模块',
+ collapsable: false,
+ children: [
+ ['modules/animation', 'animation'],
+ ['modules/clipboard', 'clipboard'],
+ ['modules/dom', 'dom'],
+ ['modules/globalEvent', 'globalEvent'],
+ ['modules/meta', 'meta'],
+ ['modules/modal', 'modal'],
+ ['modules/navigator', 'navigator'],
+ ['modules/picker', 'picker'],
+ ['modules/storage', 'storage'],
+ ['modules/stream', 'stream'],
+ ['modules/webview', 'webview'],
+ ['modules/websockets', 'webSockets']
+ ]
+ },
+ {
+ title: '样式',
+ collapsable: false,
+ children: [
+ ['styles/common-styles', '通用样式'],
+ ['styles/text-styles', '文本样式'],
+ ['styles/css-units', 'CSS 单位'],
+ ['styles/color-name', '颜色值']
+ ]
+ },
+ {
+ title: '事件',
+ collapsable: false,
+ children: [
+ ['events/common-events', '通用事件'],
+ ['events/event-bubbling', '事件冒泡'],
+ ['events/gesture', '手势']
+ ]
+ }
+ ],
+ '/zh/tools/': [
+ ['playground', 'Playground 应用'],
+ ['toolkit', 'Weex 工具箱'],
+ ['extension', 'VSCode 插件']
+ ],
+ '/zh/community/': [['roadmap', '路线图'], ['weex-third-party-extensions', '插件市场']],
+ '/zh/blog/': [
+ ['write-a-blog', '写一篇博客'],
+ ['weex-auto-test-locating', 'Weex自动化测试元素定位方案'],
+ ['ios-weexcore.md', 'iOS WeexSDK 接入 WeexCore'],
+ ['weexcore-multiprocess-evolution', 'WeexCore 多进程多线程架构演进'],
+ ['interaction-optimization', '可交互时间的探索和首屏时间的改进之路']
+ ]
+ }
+ }
+ }
+ }
+};
diff --git a/docs/.vuepress/data/lang-en.js b/docs/.vuepress/data/lang-en.js
new file mode 100644
index 0000000..2ad9290
--- /dev/null
+++ b/docs/.vuepress/data/lang-en.js
@@ -0,0 +1,36 @@
+export default {
+ weex: {
+ desc: 'Weex is a framework for building performant mobile apps with modern web technology.',
+ getStartedBtn: 'Get Started',
+ startText: 'Start building your weex app',
+ charc1Title: 'High Performance',
+ charc1Content:
+ 'Weex is using native components and native modules to take advantage of native rendering performance and platform capabilities. Both components and modules are pluggable and extendable.',
+ charc2Title: 'Cross Platforms',
+ charc2Content:
+ 'You can use a single codebase to generate different bundle files to running on both Webs, Android and iOS platforms. Native components and modules have a different implementation on each platform, but they all exposed the same API.',
+ charc3Title: 'Front-end Friendly',
+ charc3Content:
+ 'Weex embraces the existing Web ecosystem, you can use modern front-end technology to develop your mobile apps. Weex supports most commonly used CSS properties and most popular front-end frameworks, such as Vue and Rax, maybe more in the future.',
+ charc4Title: 'Large-scale Used in Production',
+ charc4Content:
+ 'Weex has been large-scale used in many super apps for a long time, served almost billions of people in total. Weex also derived many engineering products and platforms for industry development.'
+ },
+ info: {
+ solutionTitle: 'Solutions',
+ demoTitle: 'Demos',
+ searchTag: 'Search Tags',
+ hotTags: 'Hot Tags',
+ searchBtn: 'Search',
+ placeholder: 'Select tags or input tags then press the Enter key',
+ solutionFavoriteNone:
+ "You don't have any favorite solution. Start collecting the first one now!",
+ solutionWorksNone: "You don't write any solution. Start writing one now!",
+ demoFavoriteNone: "You don't have any favorite demo. Start collecting the first one now!",
+ demoWorksNone: "You don't write any demo. Start writing one now!",
+ startWriting: 'startWriting',
+ noData: 'No Data',
+ pv: 'pv',
+ favor: 'favor'
+ }
+};
diff --git a/docs/.vuepress/data/lang-zh.js b/docs/.vuepress/data/lang-zh.js
new file mode 100644
index 0000000..49211c6
--- /dev/null
+++ b/docs/.vuepress/data/lang-zh.js
@@ -0,0 +1,35 @@
+export default {
+ weex: {
+ desc: 'Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。',
+ getStartedBtn: '快速开始',
+ startText: '开始构建你的 weex 应用',
+ charc1Title: '高性能',
+ charc1Content:
+ 'Weex 使用原生组件和原生模块，来最大化利用原生渲染的性能优势以及平台能力，所有的组件和模块都是可插拔、可扩展的。',
+ charc2Title: '跨平台',
+ charc2Content:
+ '你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现，但是它们都提供了相同的接口。',
+ charc3Title: '贴近前端生态',
+ charc3Content:
+ 'Weex 拥抱已有的 Web 生态，你可以使用现代化的前端技术开发移动应用。 Weex 支持了最常用 CSS 样式以及最流行的前端框架，如 Vue 和 Rax，在未来或许还可以支持更多。',
+ charc4Title: '被大规模的使用',
+ charc4Content:
+ 'Weex 已经在许多超级 App 中大规模使用，一共服务了数亿用户。Weex 还衍生出了各种工程化的产品和平台，以供 工业生产使用。'
+ },
+ info: {
+ solutionTitle: '干货集中营-解决方案',
+ demoTitle: '干货集中营-代码案例',
+ searchTag: '标签筛选',
+ hotTags: '热门标签',
+ searchBtn: '筛选',
+ palceholder: '请选择标签或者输入关键词后回车',
+ solutionFavoriteNone: '你还没有收藏解决方案，赶快点击按钮开始收藏你的第一个解决方案吧~',
+ solutionWorksNone: '你还没有编写解决方案，赶快去编写你的第一个解决方案吧~',
+ demoFavoriteNone: '你还没有收藏代码案例，赶快点击按钮开始收藏你的第一个代码案例吧~',
+ demoWorksNone: '你还没有编写代码案例，赶快去编写你的第一个代码案例吧~',
+ startWriting: 'GO-编写去',
+ noData: '暂无数据~',
+ pv: '浏览',
+ favor: '收藏'
+ }
+};
diff --git a/docs/.vuepress/data/redirect.json b/docs/.vuepress/data/redirect.json
new file mode 100644
index 0000000..751a1a5
--- /dev/null
+++ b/docs/.vuepress/data/redirect.json
@@ -0,0 +1,199 @@
+{
+ "/references/": "/docs/api/weex-variable.html",
+ "/cn/references/": "/zh/docs/api/weex-variable.html",
+ "/wiki/": "/guide/introduction.html",
+ "/cn/wiki/": "/zh/guide/introduction.html",
+ "/cn": "/zh/",
+ "/faq.html": "/guide/contribute/bug-report-guidelines.html",
+ "/cn/faq.html": "/zh/guide/contribute/bug-report-guidelines.html",
+ "/releasenote.html": "/release-note.html",
+ "/cn/releasenote.html": "/zh/release-note.html",
+ "/contributing.html": "/guide/contribute/contribute-code.html",
+ "/cn/contributing.html": "/zh/guide/contribute/contribute-code.html",
+ "/en/arkit/": "/zh/blog/write-a-blog.html",
+ "/cn/guide/": "/zh/guide/introduction.html",
+ "/en/coreml/": "/zh/blog/write-a-blog.html",
+ "/references/components/": "/docs/components/a.html",
+ "/references/modules/": "/docs/modules/animation.html",
+ "/cn/references/components/": "/zh/docs/components/a.html",
+ "/cn/references/modules/": "/zh/docs/modules/animation.html",
+ "/resources.html": "/tools/playground.html",
+ "/cn/resources.html": "/zh/tools/playground.html",
+ "/playground.html": "/tools/playground.html",
+ "/cn/playground.html": "/zh/tools/playground.html",
+ "/examples.html": "/community/code-demo.html",
+ "/cn/examples.html": "/zh/community/code-demo.html",
+ "/examples/dom-rect.html": "/community/code-demo.html",
+ "/cn/examples/dom-rect.html": "/zh/community/code-demo.html",
+ "/wiki/gestures.html": "/docs/events/gesture.html",
+ "/cn/wiki/gestures.html": "/zh/docs/events/gesture.html",
+ "/development-process.html": "/guide/develop/setup-develop-environment.html",
+ "/cn/development-process.html": "/zh/guide/develop/setup-develop-environment.html",
+ "/examples/image.html": "/docs/components/image.html",
+ "/cn/examples/image.html": "/zh/docs/components/image.html",
+ "/examples/web.html": "/docs/components/web.html",
+ "/cn/examples/web.html": "/zh/docs/components/web.html",
+ "/examples/scroller.html": "/docs/components/scroller.html",
+ "/cn/examples/scroller.html": "/zh/docs/components/scroller.html",
+ "/examples/indicator.html": "/docs/components/indicator.html",
+ "/cn/examples/indicator.html": "/zh/docs/components/indicator.html",
+ "/examples/a.html": "/docs/components/a.html",
+ "/cn/examples/a.html": "/zh/docs/components/a.html",
+ "/examples/div.html": "/docs/components/div.html",
+ "/cn/examples/div.html": "/zh/docs/components/div.html",
+ "/examples/text.html": "/docs/components/text.html",
+ "/cn/examples/text.html": "/zh/docs/components/text.html",
+ "/examples/list.html": "/docs/components/list.html",
+ "/cn/examples/list.html": "/zh/docs/components/list.html",
+ "/examples/loading.html": "/docs/components/loading.html",
+ "/cn/examples/loading.html": "/zh/docs/components/loading.html",
+ "/examples/refresh.html": "/docs/components/refresh.html",
+ "/cn/examples/refresh.html": "/zh/docs/components/refresh.html",
+ "/examples/recycle-list.html": "/docs/components/recycle-list.html",
+ "/cn/examples/recycle-list.html": "/zh/docs/components/recycle-list.html",
+ "/examples/slider.html": "/docs/components/slider.html",
+ "/cn/examples/slider.html": "/zh/docs/components/slider.html",
+ "/examples/textarea.html": "/docs/components/textarea.html",
+ "/cn/examples/textarea.html": "/zh/docs/components/textarea.html",
+ "/examples/input.html": "/docs/components/input.html",
+ "/cn/examples/input.html": "/zh/docs/components/input.html",
+ "/examples/waterfall.html": "/docs/components/waterfall.html",
+ "/cn/examples/waterfall.html": "/zh/docs/components/waterfall.html",
+ "/examples/richtext.html": "/docs/components/richtext.html",
+ "/cn/examples/richtext.html": "/zh/docs/components/richtext.html",
+ "/examples/video.html": "/docs/components/video.html",
+ "/cn/examples/video.html": "/zh/docs/components/video.html",
+ "/examples/modal.html": "/docs/modules/modal.html",
+ "/cn/examples/modal.html": "/zh/docs/modules/modal.html",
+ "/examples/storage.html": "/docs/modules/storage.html",
+ "/cn/examples/storage.html": "/zh/docs/modules/storage.html",
+ "/examples/animation.html": "/docs/modules/animation.html",
+ "/cn/examples/animation.html": "/zh/docs/modules/animation.html",
+ "/examples/clipboard.html": "/docs/modules/clipboard.html",
+ "/cn/examples/clipboard.html": "/zh/docs/modules/clipboard.html",
+ "/examples/dom.html": "/docs/modules/dom.html",
+ "/cn/examples/dom.html": "/zh/docs/modules/dom.html",
+ "/examples/globalEvent.html": "/docs/modules/globalEvent.html",
+ "/cn/examples/globalEvent.html": "/zh/docs/modules/globalEvent.html",
+ "/examples/meta.html": "/docs/modules/meta.html",
+ "/cn/examples/meta.html": "/zh/docs/modules/meta.html",
+ "/examples/navigator.html": "/docs/modules/navigator.html",
+ "/cn/examples/navigator.html": "/zh/docs/modules/navigator.html",
+ "/examples/stream.html": "/docs/modules/stream.html",
+ "/cn/examples/stream.html": "/zh/docs/modules/stream.html",
+ "/examples/picker.html": "/docs/modules/picker.html",
+ "/cn/examples/picker.html": "/zh/docs/modules/picker.html",
+ "/examples/webview.html": "/docs/modules/webview.html",
+ "/cn/examples/webview.html": "/zh/docs/modules/webview.html",
+ "/examples/webSockets.html": "/docs/modules/webSockets.html",
+ "/cn/examples/webSockets.html": "/zh/docs/modules/webSockets.html",
+ "/archives/index.html": "/guide/introduction.html",
+ "/cn/archives/index.html": "/zh/guide/introduction.html",
+ "/wiki/common-styles.html": "/docs/styles/common-styles.html",
+ "/cn/wiki/common-styles.html": "/zh/docs/styles/common-styles.html",
+ "/guide/use-vue.html": "/guide/use-vue-in-weex.html",
+ "/cn/guide/use-vue.html": "/zh/guide/use-vue-in-weex.html",
+ "/references/broadcast-channel.html": "/docs/api/broadcast-channel.html",
+ "/cn/references/broadcast-channel.html": "/zh/docs/api/broadcast-channel.html",
+ "/references/js-service.html": "/docs/api/js-service.html",
+ "/cn/references/js-service.html": "/zh/docs/api/js-service.html",
+ "/wiki/event-bubble.html": "/docs/events/event-bubbling.html",
+ "/cn/wiki/event-bubble.html": "/zh/docs/events/event-bubbling.html",
+ "/references/weex-variable.html": "/docs/api/weex-variable.html",
+ "/cn/references/weex-variable.html": "/zh/docs/api/weex-variable.html",
+ "/references/ios-apis.html": "/docs/api/ios-apis.html",
+ "/cn/references/ios-apis.html": "/zh/docs/api/ios-apis.html",
+ "/references/android-apis.html": "/docs/api/android-apis.html",
+ "/cn/references/android-apis.html": "/zh/docs/api/android-apis.html",
+ "/bug-report-guidelines.html": "/guide/contribute/bug-report-guidelines.html",
+ "/cn/bug-report-guidelines.html": "/zh/guide/contribute/bug-report-guidelines.html",
+ "/wiki/css-units.html": "/docs/styles/css-units.html",
+ "/cn/wiki/css-units.html": "/zh/docs/styles/css-units.html",
+ "/wiki/color-name.html": "/docs/styles/color-name.html",
+ "/cn/wiki/color-name.html": "/zh/docs/styles/color-name.html",
+ "/wiki/text-styles.html": "/docs/styles/text-styles.html",
+ "/cn/wiki/text-styles.html": "/zh/docs/styles/text-styles.html",
+ "/wiki/platform-difference.html": "/guide/platform-difference.html",
+ "/cn/wiki/platform-difference.html": "/zh/guide/platform-difference.html",
+ "/tools/index.html": "/tools/toolkit.html",
+ "/cn/tools/index.html": "/zh/tools/toolkit.html",
+ "/guide/extend-web-render.html": "/guide/extend/extend-web.html",
+ "/cn/guide/extend-web-render.html": "/zh/guide/extend/extend-web.html",
+ "/guide/extend-ios.html": "/guide/extend/extend-ios.html",
+ "/cn/guide/extend-ios.html": "/zh/guide/extend/extend-ios.html",
+ "/guide/extend-android.html": "/guide/extend/extend-android.html",
+ "/cn/guide/extend-android.html": "/zh/guide/extend/extend-android.html",
+ "/guide/integrate-devtool-to-android.html": "/guide/debug/integrate-devtool-to-android.html",
+ "/cn/guide/integrate-devtool-to-android.html": "/zh/guide/debug/integrate-devtool-to-android.html",
+ "/guide/integrate-devtool-to-ios.html": "/guide/debug/integrate-devtool-to-ios.html",
+ "/cn/guide/integrate-devtool-to-ios.html": "/zh/guide/debug/integrate-devtool-to-ios.html",
+ "/references/weex-variable": "/docs/api/weex-variable.html",
+ "/cn/references/weex-variable": "/zh/docs/api/weex-variable.html",
+ "/guide/advanced/path.html": "/guide/advanced/asset-path.html",
+ "/cn/guide/advanced/path.html": "/zh/guide/advanced/asset-path.html",
+ "/guide/advanced/downgrade.html": "/guide/advanced/downgrade.html",
+ "/cn/guide/advanced/downgrade.html": "/zh/guide/advanced/downgrade.html",
+ "/guide/advanced/use-vuex-and-vue-router.html": "/guide/advanced/use-vuex-and-vue-router.html",
+ "/cn/guide/advanced/use-vuex-and-vue-router.html": "/zh/guide/advanced/use-vuex-and-vue-router.html",
+ "/guide/integrate-to-your-app.html": "/guide/develop/integrate-to-android-app.html",
+ "/cn/guide/integrate-to-your-app.html": "/zh/guide/develop/integrate-to-android-app.html",
+ "/cn/guide/front-end-frameworks.html": "/zh/guide/front-end-frameworks.html",
+ "/references/components/image.html": "/docs/components/image.html",
+ "/cn/references/components/image.html": "/zh/docs/components/image.html",
+ "/references/components/web.html": "/docs/components/web.html",
+ "/cn/references/components/web.html": "/zh/docs/components/web.html",
+ "/references/components/scroller.html": "/docs/components/scroller.html",
+ "/cn/references/components/scroller.html": "/zh/docs/components/scroller.html",
+ "/references/components/indicator.html": "/docs/components/indicator.html",
+ "/cn/references/components/indicator.html": "/zh/docs/components/indicator.html",
+ "/references/components/a.html": "/docs/components/a.html",
+ "/cn/references/components/a.html": "/zh/docs/components/a.html",
+ "/references/components/div.html": "/docs/components/div.html",
+ "/cn/references/components/div.html": "/zh/docs/components/div.html",
+ "/references/components/text.html": "/docs/components/text.html",
+ "/cn/references/components/text.html": "/zh/docs/components/text.html",
+ "/references/components/list.html": "/docs/components/list.html",
+ "/cn/references/components/list.html": "/zh/docs/components/list.html",
+ "/references/components/loading.html": "/docs/components/loading.html",
+ "/cn/references/components/loading.html": "/zh/docs/components/loading.html",
+ "/references/components/refresh.html": "/docs/components/refresh.html",
+ "/cn/references/components/refresh.html": "/zh/docs/components/refresh.html",
+ "/references/components/recycle-list.html": "/docs/components/recycle-list.html",
+ "/cn/references/components/recycle-list.html": "/zh/docs/components/recycle-list.html",
+ "/references/components/slider.html": "/docs/components/slider.html",
+ "/cn/references/components/slider.html": "/zh/docs/components/slider.html",
+ "/references/components/textarea.html": "/docs/components/textarea.html",
+ "/cn/references/components/textarea.html": "/zh/docs/components/textarea.html",
+ "/references/components/input.html": "/docs/components/input.html",
+ "/cn/references/components/input.html": "/zh/docs/components/input.html",
+ "/references/components/waterfall.html": "/docs/components/waterfall.html",
+ "/cn/references/components/waterfall.html": "/zh/docs/components/waterfall.html",
+ "/references/components/richtext.html": "/docs/components/richtext.html",
+ "/cn/references/components/richtext.html": "/zh/docs/components/richtext.html",
+ "/references/components/video.html": "/docs/components/video.html",
+ "/cn/references/components/video.html": "/zh/docs/components/video.html",
+ "/references/modules/modal.html": "/docs/modules/modal.html",
+ "/cn/references/modules/modal.html": "/zh/docs/modules/modal.html",
+ "/references/modules/storage.html": "/docs/modules/storage.html",
+ "/cn/references/modules/storage.html": "/zh/docs/modules/storage.html",
+ "/references/modules/animation.html": "/docs/modules/animation.html",
+ "/cn/references/modules/animation.html": "/zh/docs/modules/animation.html",
+ "/references/modules/clipboard.html": "/docs/modules/clipboard.html",
+ "/cn/references/modules/clipboard.html": "/zh/docs/modules/clipboard.html",
+ "/references/modules/dom.html": "/docs/modules/dom.html",
+ "/cn/references/modules/dom.html": "/zh/docs/modules/dom.html",
+ "/references/modules/globalEvent.html": "/docs/modules/globalEvent.html",
+ "/cn/references/modules/globalEvent.html": "/zh/docs/modules/globalEvent.html",
+ "/references/modules/meta.html": "/docs/modules/meta.html",
+ "/cn/references/modules/meta.html": "/zh/docs/modules/meta.html",
+ "/references/modules/navigator.html": "/docs/modules/navigator.html",
+ "/cn/references/modules/navigator.html": "/zh/docs/modules/navigator.html",
+ "/references/modules/stream.html": "/docs/modules/stream.html",
+ "/cn/references/modules/stream.html": "/zh/docs/modules/stream.html",
+ "/references/modules/picker.html": "/docs/modules/picker.html",
+ "/cn/references/modules/picker.html": "/zh/docs/modules/picker.html",
+ "/references/modules/webview.html": "/docs/modules/webview.html",
+ "/cn/references/modules/webview.html": "/zh/docs/modules/webview.html",
+ "/references/modules/webSockets.html": "/docs/modules/webSockets.html",
+ "/cn/references/modules/webSockets.html": "/zh/docs/modules/webSockets.html"
+}
diff --git a/docs/.vuepress/data/who-is-using-weex.js b/docs/.vuepress/data/who-is-using-weex.js
new file mode 100644
index 0000000..859dabf
--- /dev/null
+++ b/docs/.vuepress/data/who-is-using-weex.js
@@ -0,0 +1,285 @@
+export default [
+ {
+ name_CN: '手机淘宝',
+ name_EN: 'taobao',
+ 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'
+ },
+ {
+ name_CN: '手机天猫',
+ name_EN: 'tmall',
+ 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'
+ },
+ {
+ name_CN: '优酷',
+ name_EN: 'youku',
+ 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'
+ },
+ {
+ name_CN: '闲鱼',
+ name_EN: 'xianyu',
+ 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'
+ },
+ {
+ name_CN: '飞猪',
+ name_EN: 'fliggy',
+ 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'
+ },
+ {
+ name_CN: 'UC浏览器',
+ name_EN: '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'
+ },
+ {
+ name_CN: '菜鸟裹裹',
+ name_EN: 'cainiao',
+ 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'
+ },
+ {
+ name_CN: '裹裹包裹侠',
+ name_EN: 'cainiaobgx',
+ 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'
+ },
+ {
+ name_CN: '千牛',
+ name_EN: 'qianniu',
+ 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'
+ },
+ {
+ name_CN: '阿里云',
+ name_EN: 'aliyun',
+ 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'
+ },
+ {
+ name_CN: '阿里巴巴',
+ name_EN: 'alibaba',
+ 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'
+ },
+ {
+ name_CN: '淘票票专业版',
+ name_EN: 'taopiaopiao',
+ 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'
+ },
+ {
+ name_CN: '盒马',
+ name_EN: 'hema',
+ 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/'
+ },
+ {
+ name_CN: '饿了么',
+ name_EN: 'eleme',
+ 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'
+ },
+ {
+ name_CN: 'Lazada',
+ name_EN: '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'
+ },
+ {
+ name_CN: 'Paytm Mall',
+ name_EN: 'paytmmall',
+ 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'
+ },
+ {
+ name_CN: '企鹅电竞',
+ name_EN: 'qierdianjing',
+ 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'
+ },
+ {
+ name_CN: '网易考拉海购',
+ name_EN: 'kaola',
+ icon: 'https://haitao.nos.netease.com/5c5f27c5-71f1-4f73-978d-e1f244bb4128.jpg',
+ iOS: 'https://app.kaola.com/',
+ android: 'https://app.kaola.com/'
+ },
+ {
+ name_CN: '分期乐',
+ name_EN: 'fenqile',
+ 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'
+ },
+ {
+ name_CN: '微店买家版',
+ name_EN: 'weidian',
+ 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'
+ },
+ {
+ name_CN: '达人店',
+ name_EN: 'daren',
+ 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'
+ },
+ {
+ name_CN: '点我达骑手',
+ name_EN: 'dianwoda',
+ 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'
+ },
+ {
+ name_CN: '极客时间',
+ name_EN: 'geektime',
+ 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'
+ },
+ {
+ name_CN: '开语',
+ name_EN: 'kyur',
+ 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: ''
+ },
+ {
+ name_CN: '有赞零售',
+ name_EN: 'youzan',
+ 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'
+ },
+ {
+ name_CN: '百强排行',
+ name_EN: 'qiang100',
+ 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'
+ },
+ {
+ name_CN: '新浪众测',
+ name_EN: 'sinazc',
+ icon: 'http://n.sinaimg.cn/tech/zcapp/zhongce_3x.png',
+ iOS: 'https://itunes.apple.com/cn/app/id1309407290?mt=8',
+ android: ''
+ },
+ {
+ name_CN: '班豆',
+ name_EN: 'bandou',
+ 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'
+ },
+ {
+ name_CN: '超级云校',
+ name_EN: 'cschool',
+ 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'
+ },
+ {
+ name_CN: '飞呀',
+ name_EN: 'flya',
+ 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'
+ },
+ {
+ name_CN: '猎游',
+ name_EN: 'lieyou',
+ 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/'
+ },
+ {
+ name_CN: 'iGola骑鹅旅行',
+ name_EN: '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'
+ },
+ {
+ name_CN: '一亩田',
+ name_EN: 'yimutian',
+ 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'
+ },
+ {
+ name_CN: '牙医管家',
+ name_EN: 'dentalink',
+ 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'
+ },
+ {
+ name_CN: '人人贷借款',
+ name_EN: 'renrendai',
+ 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/'
+ },
+ {
+ name_CN: '乐和金融',
+ name_EN: 'hbfintech',
+ 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'
+ },
+ {
+ name_CN: '开始吧',
+ name_EN: 'kaishiba',
+ 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'
+ },
+ {
+ name_CN: '达卡',
+ name_EN: 'dakacard',
+ 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'
+ },
+ {
+ name_CN: '有赞微商城',
+ name_EN: 'youzan_kdt',
+ 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'
+ }
+];
diff --git a/docs/.vuepress/override.styl b/docs/.vuepress/override.styl
new file mode 100644
index 0000000..634bf69
--- /dev/null
+++ b/docs/.vuepress/override.styl
@@ -0,0 +1,7 @@
+#app .sidebar { width: 15rem; }
+#app .page { padding-bottom: 0; }
+#app .noFooter .page {
+ .page-edit, .page-nav, .license-wrap {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..59f7ff8
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,7 @@
+<script>
+module.exports = {
+ created(){
+ this.$router.push('/guide/')
+ }
+}
+</script>
\ No newline at end of file
diff --git a/docs/blog/README.md b/docs/blog/README.md
new file mode 100644
index 0000000..18938b9
--- /dev/null
+++ b/docs/blog/README.md
@@ -0,0 +1,7 @@
+<script>
+module.exports = {
+ created(){
+ this.$router.push('/blog/write-a-blog.html')
+ }
+}
+</script>
\ No newline at end of file
diff --git a/docs/blog/write-a-blog.md b/docs/blog/write-a-blog.md
new file mode 100644
index 0000000..7369c5a
--- /dev/null
+++ b/docs/blog/write-a-blog.md
@@ -0,0 +1,3 @@
+This is a platform for Weex developers and users to share. We Weex developers will post blogs about principles of Weex, architecture, best practice, optimization, etc.
+
+Also, it is welcomed for Weex users to share their articles about Weex. Your articles will be read by many other developers. If you want to share, please click "Suggest" button below and contact us.
\ No newline at end of file
diff --git a/docs/community/README.md b/docs/community/README.md
new file mode 100644
index 0000000..2cf69f4
--- /dev/null
+++ b/docs/community/README.md
@@ -0,0 +1,7 @@
+<script>
+module.exports = {
+ created(){
+ this.$router.push('/community/roadmap.html')
+ }
+}
+</script>
\ No newline at end of file
diff --git a/docs/community/roadmap.md b/docs/community/roadmap.md
new file mode 100644
index 0000000..60acc5a
--- /dev/null
+++ b/docs/community/roadmap.md
@@ -0,0 +1,34 @@
+# Weex Project Roadmap
+
+> This document outlines work that is currently being worked on and things we plan to work on next. And we hope to obtain valuable feedback from the community to help us better understand user needs and adjust our roadmaps.
+
+## WeexCore
+### JS binding
+#### v0.21
+* New WeexCore 3.0 structure. Support more platforms, Android, iOS.
+* Standlone jsRuntime with javaScriptCore standard API instead of source code. Available for both android and ios.
+* Support native dom Binding for better portability and performance.
+
+### Layout
+#### v0.21
+* Support more layout attribute.
+* Add enough test cases to cover layout engine.
+### Render
+#### v0.21
+## tools
+
+Weex-toolkit will release version 2.0.0 this year, it mainly provides those following new features:
+
+- Flawless installation and upgrade experience.
+- Better unit & functional testing support.
+- Visual Studio Code extensions with support for build/run/debug.
+- Split into multiple packages that can be reused on the Node-side program.
+
+Also, there will be some feartures and optimization for the submodules, such as weex-debugger, weexpack and so on.
+
+All the schedules can be viewed on the [milestones](https://github.com/weexteam/weex-toolkit/milestones).
+
+### Community
+#### v0.22
+* Github commit/PR will be send to commit@weex.incubator.apache.org instead of dev@weex.incubator.apache.org
+* Make the code design and development process of Layout transparent to the community, make it happen on [github project](https://github.com/apache/incubator-weex/projects)
\ No newline at end of file
diff --git a/docs/community/weex-third-party-extensions.md b/docs/community/weex-third-party-extensions.md
new file mode 100644
index 0000000..c864b5f
--- /dev/null
+++ b/docs/community/weex-third-party-extensions.md
@@ -0,0 +1,11 @@
+In this article, we list some plugins for Weex beyonds default components in WeexSDK. Some plugins may not adapt to latest WeexSDK, please report any issue to us.
+
+| Name | Function |
+| --- | --- |
+| [BindingX](https://alibaba.github.io/bindingx/guide/cn_introduce) | BindingX is a new way to implement complex effect on Weex and React Native and Html5. The main idea is translate the user interaction into expression, then transfer those expressions into native environment. When the action occurs, all computing task will running on the native side, NO redundant js-bridge calls any more. |
+| [GCanvas](https://github.com/alibaba/GCanvas) |GCanvas is a cross-platform rendering engine for mobile devices developed by Taobao. It is written with C++ based on OpenGL ES, so it can provide high performance 2D/WebGL rendering capabilities for Javascript runtime. It also has browser-like canvas APIs, so it's very convenient and flexiable for use, especially for web developers.|
+| [Weex-Amap](https://github.com/weex-plugins/weex-amap) |Amap weex plugin for map display.|
+| [Weex-SVG](https://github.com/weex-plugins/weex-svg) |A weex plugin to support svg for Web/iOS/Andoid.|
+| [Weex-Chart](https://github.com/weex-plugins/weex-chart) |Chart component based on GCanvas.|
+
+Get more plugins, please visit [Weex-Plugins](https://github.com/weex-plugins)
diff --git a/docs/docs/README.md b/docs/docs/README.md
new file mode 100644
index 0000000..0e21c5d
--- /dev/null
+++ b/docs/docs/README.md
@@ -0,0 +1,7 @@
+<script>
+module.exports = {
+ created(){
+ this.$router.push('/docs/api/weex-variable.html')
+ }
+}
+</script>
\ No newline at end of file
diff --git a/docs/docs/api/android-apis.md b/docs/docs/api/android-apis.md
new file mode 100644
index 0000000..81e20c0
--- /dev/null
+++ b/docs/docs/api/android-apis.md
@@ -0,0 +1,62 @@
+---
+title: Android APIs
+type: references
+group: API
+order: 2.2
+version: 2.1
+---
+
+# WXSDKInstace
+
+## Custom events
+Used for a custom control for event notifications, such as custom click events, response drop events, and so on.
+
+```
+void fireEvent(elementRef,type)
+void fireEvent(elementRef,type, data)
+void fireEvent(elementRef,type,data,domChanges)
+```
+
+* `elementRef`(_String_): The event occurred for the control ID。
+
+* `type`(_String_): Custom events, Weex defaults to a custom event starting with onXxxxx. OnPullDown (drop-down event)
+
+* `data`(_Map<String, Object>_): Need to reveal the parameters, such as the current control of the size, coordinates and other information。
+
+* `domChanges`(_Map<String, Object>_): 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 }
+}
+```
+
+
+## OnWXScrollListener
+Weex gets the scroll event You can register `registerOnWXScrollListener` via `WXSDKInstance`
+
+## 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/docs/docs/api/broadcast-channel.md b/docs/docs/api/broadcast-channel.md
new file mode 100644
index 0000000..a122c32
--- /dev/null
+++ b/docs/docs/api/broadcast-channel.md
@@ -0,0 +1,115 @@
+---
+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 [Platform Difference with Web](../../guide/platform-difference.html), 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 bc = 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.
+
+> note: Stack will not receive this message which posted by himself
+
+## 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/docs/docs/api/ios-apis.md b/docs/docs/api/ios-apis.md
new file mode 100644
index 0000000..36f9e01
--- /dev/null
+++ b/docs/docs/api/ios-apis.md
@@ -0,0 +1,77 @@
+---
+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/docs/docs/api/js-service.md b/docs/docs/api/js-service.md
new file mode 100644
index 0000000..e8d30a6
--- /dev/null
+++ b/docs/docs/api/js-service.md
@@ -0,0 +1,115 @@
+---
+title: JSService
+type: references
+group: API
+order: 2.6
+version: 2.1
+---
+
+
+## Summary
+
+<span class="weex-version">v0.9.5+</span>
+
+JSService and Weex instance are parallel in js runtime. Weex instance's lifecycle will invoke JSService's lifecycle. Currently provide create, refresh, destroy of lifecycle.
+
+**!!!Important: Improper use of JSService may lead to increased memory usage or global pollution !**
+
+
+## Register
+
+### 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)
+```
+
+> params of `options` Could have { create, refresh, destroy } lifecycle methods. In create method it should return an object of what variables or classes would be injected into the `Weex` instance.
+
+### Web
+```html
+<script src="SERVICE_JS_CODE_URL"></script>
+```
+
+## Demo
+```javascript
+service.register(SERVICE_NAME /* same string with native */, {
+ /**
+ * JSService lifecycle. JSService `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 })
+ }
+ }
+ }
+ }
+ },
+
+ /**
+ * JSService lifecycle. JSService `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){
+
+ },
+
+ /**
+ * JSService lifecycle. JSService `destroy` will before then each instance lifecycle `destroy`. You can deleted variable here. If you doesn't detete variable define in JSService. 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) {
+
+ }
+})
+```
+
+Use JSService
+
+```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 JSService')
+ _NormalService.toast('Normal JSService')
+ }
+}
+</script>
+```
diff --git a/docs/docs/api/weex-variable.md b/docs/docs/api/weex-variable.md
new file mode 100644
index 0000000..36d9f16
--- /dev/null
+++ b/docs/docs/api/weex-variable.md
@@ -0,0 +1,195 @@
+---
+title: Weex Variable
+type: references
+group: API
+order: 2.5
+version: 2.1
+---
+
+<!-- toc -->
+
+Every Weex page contains a `weex` variable in its js runtime context. It can be assessed directly just like a global object, but it is *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;
+}
+```
+
+## `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.
+
+## `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.
+
+## `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/animation.html), 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` 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>
+```
+
+## `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
+```
+
+## `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
+```
+
+## `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/docs/docs/components/a.md b/docs/docs/components/a.md
new file mode 100644
index 0000000..87f2dfb
--- /dev/null
+++ b/docs/docs/components/a.md
@@ -0,0 +1,41 @@
+# <a>
+
+## Summary
+
+`<a>` is mainly used for navigation between weex pages。
+
+::: tip
+It's forbidden to add text directly to `<a>`, use [`<text>`](./text.html) to wrap your text instead.
+:::
+
+```Html
+<a href="http://dotwe.org/raw/dist/a5e3760925ac3b9d68a3aa0cc0298857.bundle.wx">
+ <text>Jump</text>
+</a>
+```
+
+## Attributes
+
+* **href** String, `href` defines the URL that current page will navigate to. `href` must point to a weex page, or behavior is undefined.
+
+## Style
+
+* **common styles**. Check out [common styles](../styles/common-styles.html).
+
+## Events
+
+* **common events**. Check out [common events](../events/common-events.html).
+
+::: tip
+The execution order of callback function of click and href is **undefined**. Do **not** use click event to do the preprocessing of `href`.
+:::
+
+## Examples
+
+```Html
+<a href="http://emas-ha-remote-log-poc.oss-cn-beijing.aliyuncs.com/eweex/app/biz-docs-com-mod/upload/271ccdca-db41-423d-981c-c7c6751ba479/show_1.js">
+ <text>主会场</text>
+</a>
+```
+
+[Demo](http://dotwe.org/vue/3b789771e48be92a70bd682f084b84b5)
diff --git a/docs/docs/components/cell.md b/docs/docs/components/cell.md
new file mode 100644
index 0000000..9a385ce
--- /dev/null
+++ b/docs/docs/components/cell.md
@@ -0,0 +1,35 @@
+# <cell>
+
+## Summary
+
+This component must be used as a subcomponent of a [`list`](./list.html) [`recycler`](./list.html) [`waterfall`](./waterfall.html) component.
+
+## Child Components
+
+This type of component supports all kinds of weex component as its child components. But you should not add another scroller or list into a cell.
+
+## Attributes
+
+* **keep-scroll-position** boolean. It controls whether to keep the last sliding position after inserting the cell.
+* **insert-animation** string, cell insert animation. Only support `none` and `default` now.
+* **delete-animation** string, cell delete animation. Only support `none` and `default` now.
+* **recycle** boolean, <Badge text="iOS" type="warning"/>, <Badge text="Android" type="warning"/>, default true. It controls whether the cell's view in a list should be recycled when the UITableView is scrolling. You should always use true for iOS. On Android recycle is always true, you can use false to prevent image and text data rebinding.
+
+## Styles
+
+* **common styles**. Check out [common styles](../styles/common-styles.html).
+
+::: tip
+* You can't give `<cell>` a `flex` value. Width of `<cell>` is equal to the width of its parent list/recycler/waterfall component, and you don't need to specify its height.
+* Cell itself is a container and its layout info is managed by parent component such as list. So `margin` should not be specified for a cell.
+:::
+
+## Events
+
+* **common events**. Check out [common events](../events/common-events.html).
+
+## Example
+
+Please refer to
+* [list](./list.html)
+* [waterfall](./waterfall.html)
diff --git a/docs/docs/components/div.md b/docs/docs/components/div.md
new file mode 100644
index 0000000..1ebbc77
--- /dev/null
+++ b/docs/docs/components/div.md
@@ -0,0 +1,23 @@
+# <div>
+
+## Summary
+
+`<div>` is the base container component.
+
+::: tip
+* Don't add text in `<div>`directly. Use `<text>` instead.
+* In Weex, `<div>` cannot scroll.
+* Depth level of `<div>` should be controlled for better performance. We sugges lower than 14 depth level.
+:::
+
+## Child Components
+
+`<div>` supports all kinds of components as it child including `<div>`.
+
+## Styles
+
+* **common styles**. Check out [common styles](../styles/common-styles.html).
+
+## Events
+
+* **common events**. Check out [common events](../events/common-events.html).
diff --git a/docs/docs/components/image.md b/docs/docs/components/image.md
new file mode 100644
index 0000000..c55f3a5
--- /dev/null
+++ b/docs/docs/components/image.md
@@ -0,0 +1,166 @@
+# <image>
+
+## Summary
+
+`<image>` is used to display a single image in your interface.
+
+:::tip
+* Always use `<image>` in your code, as `<img>` exists only for backward compatibility reasons and may removed in the future release.
+* 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>`. Ref [Android adapter](../api/android-apis.html) and [iOS handler](../api/ios-apis.html).
+:::
+
+## Basic Usage
+```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
+
+* **common styles**. Check out [common styles](../styles/common-styles.html).
+
+:::warning
+The style of `width`, `height` and `src` must be specified, otherwise it will load nothing.
+:::
+
+## Attributes
+
+| Attribute | Type | Value | Default Value |
+| ------------------- | ------ | -------------------------- | ------------- |
+| `placeholder` | String | {URL / Base64} | - |
+| `resize` | String | cover / contain / stretch | stretch |
+| `src` | String | {URL / Base64 } | - |
+| `quality` | String | original/normal/low/high/auto | - |
+| `autoBitmapRecycle` <Badge text="Android" type="warning"/> | Boolean| {true / false } | true |
+
+:::tip
+* 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/asset-path.html).
+* `quality` attribute is parsed by WeexSDK but not handled. WeexSDK will pass this value to image handler.
+* If `resize` property does not work as expected, the image may be clipped by image downloader. You can use "quality='original'" to solve the problem.
+:::
+
+### 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.
+
+:::danger
+The default image adapter on Android doesn't support gif.
+:::
+
+### autoBitmapRecycle
+A boolean flag which controls whether recycle the memory of image when the image is out of the screen.
+
+* `true` for recycling the memory of image when the image is out of the screen.
+* `false` for not recycling the memory of image when the image is out of the screen, which may provide better user experience with more memory cost.
+* The default value is `true`
+
+## 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
+
+:::warning
+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
+
+* **common events**. Check out [common events](../events/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)
\ No newline at end of file
diff --git a/docs/docs/components/indicator.md b/docs/docs/components/indicator.md
new file mode 100644
index 0000000..423a1c8
--- /dev/null
+++ b/docs/docs/components/indicator.md
@@ -0,0 +1,27 @@
+# <indicator>
+
+## Summary
+
+`indicator` is used inside a `slider`.
+
+## Child Components
+
+Cannot have any sub component.
+
+## Attributes
+
+No attributes.
+
+## Styles
+
+* **item-color**, color. The unselected color of an indicator dot.
+* **item-selected-color**, color. The selected color of an indicator dot.
+* **item-size**, number. Radius of indicator dot.
+
+## Events
+
+No events.
+
+## Example
+
+Please refer to [slider](./slider.html)
diff --git a/docs/docs/components/input.md b/docs/docs/components/input.md
new file mode 100644
index 0000000..56fd8a0
--- /dev/null
+++ b/docs/docs/components/input.md
@@ -0,0 +1,150 @@
+# <input>
+
+## Summary
+
+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.
+
+## Child Components
+
+No child should be added to a `input`.
+
+## 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`: a number value to specify maxlength of input.
+
+* `return-key-type`: 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`.
+
+* `upriseOffset`: <Badge text="v0.21+ & iOS" type="warn" vertical="middle"/> the additional vertical margin between bottom of input and top of keyboard if the keyboard would cover the input. Default is 20 system pixels on iOS.
+
+* `hideDoneButton`: <Badge text="iOS" type="warn" vertical="middle"/>, hide the "Done" button toolbar on keyboard.
+
+
+## Styles
+
+#### Common Styles
+* Support [common styles](../styles/common-styles.html).
+
+::: tip
+Input component does not support separate border styles for edges. You can wrap another div out of the input.
+:::
+
+#### Pseudo Styles
+* Pseudo-class: `input` component support the following pseudo-classes:
+ * `active`
+ * `focus`
+ * `disabled`
+ * `enabled`
+
+#### Text Styles
+* Support [text styles](/docs/styles/text-styles.html)
+ * support `color` style.
+ * support `font-size` style.
+ * support `font-style` style.
+ * support `font-weight` style.
+ * support `text-align` style.
+
+#### Custom Styles
+* **placeholder-color** the color of placeholder. Default value is '#999999'.
+
+## Events
+
+* **common events**. support [common events](/docs/events/common-events.html).
+* **input**. Fired when the text is being changed.
+ * @param value: current text of the input.
+* **change**. Fired when the user finished and make a commit.
+ * @param value: current text of the input.
+* **focus**. Fired when the input become focused.
+* **blur**. Fired when the input lost focus.
+* **return**. Fired when return key is pressed.
+ * @param value: current text of the input.
+ * @param returnKeyType, "default" | "go" | "next" | "search" | "send" | "done".
+* **keyboard**. Fired when keyborad is shown or hidden.
+ * @param isShow: boolean, showing or hiding the keyboard.
+ * @param keyboardSize: keyboard size in web pixel format.
+
+::: tip
+Input component does not support the common-event `click`. Please listen to the `input` or `change` event instead.
+:::
+
+
+### Methods
+
+ - `focus()` <Badge text="0.8+" type="warning" />
+
+ The `focus()` method is used to give focus to an input component and tigger soft keybord(if it can be focused).
+
+ - `blur()`<Badge text="0.9+" type="warning" />
+
+ The `blur()` method is used to remove focus from an input component and close soft keybord(if it has focus).
+
+- `setSelectionRange(selectionStart,selectionEnd)` <Badge text="0.11+" type="warning" /><Badge text="only support android & ios" type="warning" />
+
+ 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])` <Badge text="0.11+" type="warning" /><Badge text="only support android & ios" type="warning" />
+
+ 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)`<Badge text="0.18+" type="warning" /><Badge text="only support android & ios" type="warning" />
+
+ 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
+::: warning
+
+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.
+
+## Demo
+
+- [ date & time Example ](http://dotwe.org/vue/23ec083078356ef0e31618164e5a184b)
+
+- [return-key-type Example](http://dotwe.org/vue/703c94a1db921df110a11ce33b42c0d7)
+- [setTextFormatter Example](http://dotwe.org/vue/bea3cb0cad697829d8d343552a2b7b77)
+- [Other Examples](http://dotwe.org/vue/aec5342b15d3c01b3b427384a71b0874)
+
+[try it](http://dotwe.org/vue/3470e4d0194f3879a72d38e2ab02cc9f)
\ No newline at end of file
diff --git a/docs/docs/components/list.md b/docs/docs/components/list.md
new file mode 100644
index 0000000..621f60c
--- /dev/null
+++ b/docs/docs/components/list.md
@@ -0,0 +1,78 @@
+# <list>
+
+## Summary
+
+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 defines the attributes and behavior of the cells that appear in list.
+* header sticks to the top when it reaches the top of the screen.
+* refresh used inside list to add pull-down-to-refresh functionality.
+* loading 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: <Badge text="v0.20+" type="warning"/>. 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](/docs/styles/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](/docs/events/common-events.html)
+
+* support onclick event. Check out [common events](/docs/events/common-events.html)
+* support onappear / ondisappear event. Check out [common events](/docs/events/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/docs/docs/components/loading.md b/docs/docs/components/loading.md
new file mode 100644
index 0000000..799291e
--- /dev/null
+++ b/docs/docs/components/loading.md
@@ -0,0 +1,70 @@
+# <loading>
+
+## Summary
+
+::: warning
+The `<loading>` Component provide a pullup to loading function for some special containers, its usage and attributes are similar to the `<refresh>` Component.
+> **Note：** To be rendered properly, the `<loading>` Component must appear inside the special Component such as `<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>`.
+:::
+
+```vue{5}
+<scroller>
+ <div v-for="num in lists">
+ <text>{{num}}</text>
+ </div>
+ <loading>
+ <text>Loading</text>
+ </loading>
+</scroller>
+```
+
+## 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.
+
+ ```vue{3}
+ <loading>
+ <text>Loading</text>
+ <loading-indicator></loading-indicator>
+ </loading>
+ ```
+
+## Attributes
+
+ - Support all common attributes.
+
+| 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.
+
+
+## Styles
+
+ - Please check out the [common styles](../styles/common-styles.html)
+
+## Events
+
+### `loading`
+
+ - Triggered when the scroller or list is pulled up.
+
+ ```vue
+ <loading @loading="onloading" :display="loadinging ? 'show' : 'hide'">
+ <text>Loading ...</text>
+ <loading-indicator></loading-indicator>
+ </loading>
+ ```
+
+## Example
+
+ - Complete example goes [here](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
diff --git a/docs/docs/components/recycle-list.md b/docs/docs/components/recycle-list.md
new file mode 100644
index 0000000..9ba0255
--- /dev/null
+++ b/docs/docs/components/recycle-list.md
@@ -0,0 +1,189 @@
+# <recycle-list> <Badge text="v0.18+" type="warning"/>
+
+## Summary
+
+`<recycle-list>` is a new list container with the ability to recycle and reuse, which can greatly optimize memory usage and rendering performance.
+
+> * Please refer to [Design.md](https://github.com/Hanks10100/weex-native-directive/blob/master/Design.md) for design ideas. For details, please refer to [Implementation.md](https://github.com/Hanks10100/weex-native-directive/blob/master/Implementation.md)
+> * This feature is partially dependent on the build tool, please ensure that the version of weex-loader is up to date (v0.7.2+)
+> * Use the latest version of the playground app (SDK version 0.18.0+) to scan the code for native effects, or use dotwe.org to view the web preview directly.
+
+## Child Component
+`<recycle-list>` can only use `<cell-slot>` as its immediate child node, and other nodes are invalid.
+
+### <cell-slot>
+`<cell-slot>` Represents a template for each item in the list, which is only used to describe the structure of the template, and does not correspond to the actual node. The number of `<cell-slot>` only indicates the number of types of templates, and the number of real list items is determined by data.
+
+<table>
+ <thead><tr><th>Attributes</th><th style="width: 90%">Description</th></tr></thead>
+ <tbody>
+ <tr><td>case</td><td>The type of the current template is declared, and will only be rendered if the type in the data matches the current type. The semantics are consistent with the <code>case</code> in the programming language. Only one item will be matched in all templates, matching from top to bottom in the order of the template. Once the matching is successful, the next one will not be matched.</td></tr>
+ <tr><td>default</td><td>Indicates that the current template is the default template type and does not require a value. If the data item does not match any <code>case</code> type, the rendering has a <code>default</code> template. If there are multiple <code>default</code>, only the first default template will be used.</td></tr>
+ <tr><td>key</td><td>An optional attribute that specifies the key values in the list data that can be uniquely identified to optimize rendering performance.</td></tr>
+ </tbody>
+</table>
+
+- warning attribute omission
+ - If you don't write a `switch`, use the first template with or without `case` or `default`.
+ - In the case of a `switch`, `case` and `default` must be written, otherwise the template will be ignored
+
+## Attributes
+* `for`
+ In `<recycle-list>`, add the `for` attribute to describe how to loop through the list's data. The syntax is similar to Vue's `v-for` directive, but it loops through its own internal nodes, not the current node. Written:
+ * `alias in expression`
+ * `(alias, index) in expression`
+* `switch`
+ Adding a `switch` attribute to the `<recycle-list> `can be used to specify the field name for the region's molecular template type in the data. The semantics are consistent with the switch in the programming language, along with the `case` and `default` attributes in `<cell-slot>`
+* If the `switch` attribute is omitted, only the first` <cell-slot>` will be treated as a template and the extra template will be ignored.
+
+```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>
+```
+
+## Recyclable component
+Subcomponents used in `<recycle-list>` will also be treated as templates, and the recyclable attribute will be added to the `<template> `tag when developing the component before it can be used in `<recycle-list>`.
+```vue{1}
+<template recyclable>
+ <div>
+ <text>...</text>
+ </div>
+</template>
+<script>
+ // ...
+</script>
+```
+> Adding the `recyclable` property does not affect the functionality of the component itself, it can still be used in other normal components.
+
+## Precautions
+### Binding of attributes and text
+When binding properties or text, only expressions are supported, function calls are not supported, and filters are not supported. You can refer to the expressions supported by[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)。
+
+For example, the following notation is not available：
+```html
+<div :prop="capitalize(card.title)">
+ <text>{{ card.title | capitalize }}</text>
+</div>
+```
+For this scenario, it is recommended to use the [computed](https://vuejs.org/v2/guide/computed.html) property.
+
+Because the value of the template is implemented by the client, and the definition of the function is at the front end (filter can be considered as the syntactic sugar of the function in the template), if you take the communication once every time, the rendering performance will be greatly reduced.
+
+#### `<slot> ` unavailable
+
+The `<cell-slot>` function and `<slot> `are partially overlapping, and are more radical, conceptually conflicting, and there are many boundary conditions that cannot be fully supported. Do not use `<slot>` in `<cell-slot> `and its subcomponents.
+
+### `v-once` does not optimize rendering performance
+
+Different from the understanding in the front-end framework, the logic to implement multiplexing in the client will mark the state of the template node. Adding `v-once` can ensure that the node is only rendered once, but it does not necessarily optimize the rendering performance, but may drag Comparison efficiency when slow client multiplexing nodes.
+
+### Style feature restrictions
+*Plan support*. The binding style class name (v-bind:class) is not supported in the current version. For reasons and progress, please refer to [#14](https://github.com/Hanks10100/weex-native-directive/issues/14).
+
+### Two-way binding
+*Plan support*. The `v-model` has not been tuned yet. Please do not use it for the time being.
+
+### Subcomponent restrictions
+* No Virtual DOM!
+ The components used in `<recycle-list>` do not have Virtual DOM! Features related to Virtual DOM are also not supported. Try to process only the data during the development process, and do not operate the generated nodes.
+
+ The following properties are no longer meaningful, please do not use:
+
+ * `vm.$el`
+ * `vm.$refs.xxx`
+ * `vm.$vnode`
+ * `vm.#slots`
+ * `vm.#scopedSlots`
+
+ The values in `vm.$refs` may be arrays, instances of subcomponents, DOM elements, which are commonly used in front ends. If not supported, the functionality of the `dom` module and `animation` module in Weex also has an effect.
+
+ The technical solution is currently being discussed, some of the interfaces may be redesigned, or an interface designed for` <recycle-list>` will be available on `vm`.
+
+* Component properties
+ The properties of the current subcomponent do not support functions. (Discussing the implementation plan)
+
+ ```html
+ <sub-component :prop="item.xxx" />
+ ```
+ Because the subcomponent's attribute values need to be passed between the front end and the client, only serializable values are supported. The type of `item.xxx` can be an object, an array, a string, a number, a boolean, etc., and functions are not supported.
+
+* Life cycle behavioral differences
+
+ Since the rendering of the list has a recycling mechanism, whether the node is rendered or not is also related to the user's scrolling behavior, and the lifecycle behavior of the component may be inconsistent.
+
+ Recyclable long lists do not render all nodes immediately, only when they are about to scroll into the visible area (and scrollable safe area), the semantics of the component lifecycle does not change, but the trigger is delayed.
+
+ Suppose there are 100 pieces of data, one piece of data corresponds to one component. When the first screen is rendered, only the nodes of 8 data can be displayed. Only the first 8 components are created, and only the lifecycle of the first 8 components is triggered.
+
+ - The component's `beforeCreate` and `created` will only fire when the component is about to be created and created.
+ - Similarly, the component's `beforeMount` and `mounted` only the page is actually rendered to the component, and will only fire when it is about to be mounted and already mounted.
+
+* Component custom event
+ Plan support. Features such as `vm.$on`, `vm.$once`, `vm.$emit`, `vm.$off` are not fully tuned, the interface is available, but the behavior may be slightly different (parameters are missing), do not use it for the time being.
+
+## Demo
+```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>
+```
+If you have the following data:
+```js
+const longList = [
+ { type: 'A' },
+ { type: 'B' },
+ { type: 'B' },
+ { type: 'A' },
+ { type: 'B' }
+]
+```
+The following equivalent nodes are generated:
+```html
+<text>- A 0 -</text>
+<text>- B 1 -</text>
+<text>- B 2 -</text>
+<text>- A 3 -</text>
+<text>- B 4 -</text>
+```
+If you merge the templates into one, you can also omit the `switch` and `case` to further simplify the example:
+```html
+<recycle-list for="(item, i) in longList">
+ <cell-slot>
+ <text>- {{item.type}} {{i}} -</text>
+ </cell-slot>
+</recycle-list>
+```
+More demos：
+
+**Template syntax**
+
+* [Binding text](http://dotwe.org/vue/33688e1ad843fd2a1b9f1f27a3905b9c)（[normal list](http://dotwe.org/vue/99e44cbc137d4e3ab841c88fedd91d7c)）
+* [Binding property `v-bind`](http://dotwe.org/vue/b4223fd71c93c89ba75a1876b0832772)（[normal list](http://dotwe.org/vue/a43685d00842f0558857b7942a74621a)）
+* [Cycle `v-for`](http://dotwe.org/vue/7e34f1998a0a04ff11d4c30727b3e1b6)（[normal list](http://dotwe.org/vue/fbd22af052d8855a0da0d2eacee322e4)）
+* [Multi-layer loop](http://dotwe.org/vue/a633e1932c67f59a4c1a6b84aba7c2d0)（[normal list](http://dotwe.org/vue/3368f34c62d58b083e9e6de22acafe4d)）
+* [Conditional rendering `v-if`/`v-else`/`v-else-if`](http://dotwe.org/vue/96cc151e9798bfa43aa029767f66a68b)（[normal list](http://dotwe.org/vue/92bd285b3419f34fe16a72604e10b4ff)）
+* [Binding event `v-on`](http://dotwe.org/vue/f3f72eb4e4e7b39223f174cf9a0d1875)（[normal list](http://dotwe.org/vue/88039631a296bd6d41271cd36727d914)）
+* [One-time rendering `v-once`](http://dotwe.org/vue/fc6c08e80ebeebe4cde6f16af88eb3e8)（[normal list]list](http://dotwe.org/vue/e2dde8bf1fa3d121eea824087181ee19)）
+* [Binding style](http://dotwe.org/vue/2bf86e5c2aaff1d1a0eec30abc3713b5)（[normal list](http://dotwe.org/vue/db6d50253d88f7670a69cf0225d3c893)）
+* [loadmore](http://dotwe.org/vue/efeb1d42226b8b919df0a9a314ef0648)（[normal list](http://dotwe.org/vue/107b622dbf231a56b6da7ad49985bd17)）
+* [Complex pressure test example](http://dotwe.org/vue/dc9ef31c0304e7d1d27f0d0baa677b57)（[normal list](http://dotwe.org/vue/da8361cd2f614a26e97ceec6316fe0d7)）
+* [Unlimited list](http://dotwe.org/vue/1a2f6cd2edcd2edcd3a6d9906b7cfd6a)（[normal list](http://dotwe.org/vue/6e6dceed2accc3be39c61fac58dc4440)）
+
+**Using subcomponents**
+* [Pure static subcomponent](http://dotwe.org/vue/68e405753d8c3c2a8168185140ac08bb)（[normal list](http://dotwe.org/vue/d7ea3addbd445d7ef51151f84af64c01)）
+* [no status, have props](http://dotwe.org/vue/89c177e6336ad7789ef500bc2daf61bb)（[normal list](http://dotwe.org/vue/451afc28c004b62cec9fa1c46e56c2d5)）
+* [props update](http://dotwe.org/vue/37056065a0a2c104e73dd550f252fabc)（[normal list](http://dotwe.org/vue/778e93001e573ea0bbe9fc332a6a1e6c)）
+* [Internal state](http://dotwe.org/vue/baeda092d257d91d8c9c216e91ba350a)（[normal list](http://dotwe.org/vue/a6e19f26653c890544c1036a7e9d2722)）
+* [computed & watch](http://dotwe.org/vue/c9ab8a26fb10fb163891ac58b2322671)（[normal list](http://dotwe.org/vue/5e13c37f136fde456da311e5ddf17324)）
+* [Remove component](http://dotwe.org/vue/c63e11f62c8f50d6120d56f97253a1b6)（[normal list](http://dotwe.org/vue/a9d299cbf2870c99b32df047ed0c4265)）
diff --git a/docs/docs/components/refresh.md b/docs/docs/components/refresh.md
new file mode 100644
index 0000000..07f292f
--- /dev/null
+++ b/docs/docs/components/refresh.md
@@ -0,0 +1,81 @@
+# <refresh>
+
+## Summary
+
+::: warning
+The `<refresh>` Component provide a pulldown-refresh function for some special containers, its usage and attributes are similar to the `<loading>` Component.
+
+To be rendered properly, the `<refresh>` Component must appear inside the special Component such as `<scroller>`、`<list>`、`<hlist>`、`<vlist>`、`<waterfall>`.
+:::
+
+```vue{2}
+<scroller>
+ <refresh>
+ <text>Refreshing...</text>
+ </refresh>
+ <div v-for="num in lists">
+ <text>{{num}}</text>
+ </div>
+</scroller>
+```
+
+## 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.
+
+```vue{2}
+<refresh>
+ <text>Refreshing</text>
+ <loading-indicator></loading-indicator>
+</refresh>
+```
+
+## Attributes
+
+ - Support all common attributes;
+
+| 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.
+
+## Styles
+
+ - Please check out the [common styles](../styles/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
+
+```vue{2}
+ <refresh @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
+ <text>Refreshing ...</text>
+ <loading-indicator></loading-indicator>
+ </refresh>
+```
+
+
+
+## Example
+
+ - Complete example goes [here](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
diff --git a/docs/docs/components/richtext.md b/docs/docs/components/richtext.md
new file mode 100644
index 0000000..38f5f0d
--- /dev/null
+++ b/docs/docs/components/richtext.md
@@ -0,0 +1,75 @@
+# <richtext> <Badge text="v0.20+" type="warning"/>
+
+## Summary
+
+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**. Support [common events](../events/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
+
+[Demo](http://dotwe.org/vue/f748b0cee3991522a66d4376b66a4f2a)
\ No newline at end of file
diff --git a/docs/docs/components/scroller.md b/docs/docs/components/scroller.md
new file mode 100644
index 0000000..ed16904
--- /dev/null
+++ b/docs/docs/components/scroller.md
@@ -0,0 +1,150 @@
+# <scroller>
+
+## Summary
+
+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 row .
+ * 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.
+* scrollToBegin : <string> * if scrooler has attr `scrollToBegin=false`,then scroller will not scroller to begin position auto when content layout change. default is true __just for android__
+
+
+## Styles
+
+common styles: check out [common styles for components](../styles/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](../events/common-events.html)
+
+- support `click` event. Check out [common events](../events/common-events.html)
+- support `appear` / `disappear` event. Check out [common events](../events/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/docs/docs/components/slider.md b/docs/docs/components/slider.md
new file mode 100644
index 0000000..1cdcc24
--- /dev/null
+++ b/docs/docs/components/slider.md
@@ -0,0 +1,83 @@
+# <slider>
+
+## 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`. An `indicator` cannot have any sub component.
+
+## 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, <Badge text="Android" type="warning"/>. Set whether to maintain the index of the page after the data changes.
+* **forbid-slide-animation**, boolean, <Badge text="v0.20+ & iOS" type="warning"/>. 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](../styles/common-styles.html).
+
+## Events
+
+* **common events**. Check out the [common events](../events/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**. This event is fired when scrolling. The current `offsetXRatio` value is given in this event callback. And `offsetXRatio` means the current slide offset ratio which value range is [-1, 1]. Negative value means the slide is shifted to left and positive value means to right. For example, -0.2 means 20% of the current slide is slided beyonds left border of the slider.
+
+## 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>
+```
+* [Demo](http://dotwe.org/vue/0c43ffd743c90b3bd9f5371062652e60)
+* [Demo of setting scroll event](http://dotwe.org/vue/00aff16c6c1c9e9c1209d2db70b94b24)
+* [Demo of auto-play with indicator](http://dotwe.org/vue/7c9c0f5cc6e4571a962b8f0cf627fab3)
+* [Demo Ocean](http://dotwe.org/vue/c851d5fe09e54709a6128dbc5bf74a6e)
diff --git a/docs/docs/components/text.md b/docs/docs/components/text.md
new file mode 100644
index 0000000..60613d9
--- /dev/null
+++ b/docs/docs/components/text.md
@@ -0,0 +1,65 @@
+# <text>
+
+## Summary
+
+`<text>` is used to render text with specified styles.
+
+> **Note:** This component supports no child components.
+
+> **Note:** The heading and trailing white spaces will be ignored. If this is not what you need, you can set text using data-binding method demonstrated below.
+
+## Styles
+* Support [common styles](../styles/common-styles.html)
+* Support [text styles](../styles/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.
+
+```html
+<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](../events/common-events.html)
+
+## Other
+### 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 styles](../styles/text-styles.html) on your text.
+6. Other related CSS styles not mentioned here.
+
+### Custom Typeface <Badge text="v0.12+" type="warning"/>
+
+Text component supports loading custom fonts in `ttf` and `woff` file formats.
+1. Create your font with unique `font-family` name.
+2. Using [addRule](../modules/dom.html#addrule-type-contentobject) method of dom module to register your font.
+3. Set `font-family:YourFontFamilyName` style for your text component.
+
+> **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 binary data of font 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 ‘?’. To get the real name of a font file on Mac, right click on the file in Finder and inspect the f [...]
+
+
+
+> **Note:** Specially, if you are using [Alibaba Iconfont](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.
+
+## Example
+* [Basic usage for `<text>`](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0).
diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md
new file mode 100644
index 0000000..cdd1d21
--- /dev/null
+++ b/docs/docs/components/textarea.md
@@ -0,0 +1,118 @@
+# <textarea>
+
+## Summary
+
+`textarea` is used to create interactive controls to accept keyboard input from users. It can be a multi-line [input](./input.html). `<textarea>` supports all attributes, styles and events that `<input>` supports.
+
+## Child Components
+
+No child should be added to a `textarea`.
+
+## Attributes
+
+The `textarea` component supports all the properties of the `input` component. Besides, it support the `row` attributes.
+
+* **row**, number, default is 2. Specify the rows of a textarea.
+
+## Styles
+
+#### Common styles
+
+* Checkout [common styles](../styles/common-styles.html).
+
+#### Pseudo-class styles
+
+* **active**
+* **disabled**
+* **enbaled**
+* **focus**
+
+The difference between `active` and `focus` is that when the cursor is inside the input, it is focused. While only when you touch down the input, it is in active status.
+
+#### Text styles
+
+* Checkout [text styles](../styles/text-styles.html)
+
+## Events
+
+* **common events**. support [common events](../events/common-events.html).
+* **input**. Fired when the text is being changed.
+ * @param value: current text of the input.
+* **change**. Fired when the user finished and make a commit.
+ * @param value: current text of the input.
+* **focus**. Fired when the input become focused.
+* **blur**. Fired when the input lost focus.
+* **return**. Fired when return key is pressed.
+ * @param value: current text of the input.
+ * @param returnKeyType, "default" | "go" | "next" | "search" | "send" | "done".
+* **keyboard**. Fired when keyborad is shown or hidden.
+ * @param isShow: boolean, showing or hiding the keyboard.
+ * @param keyboardSize: keyboard height in web pixel format.
+
+## 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>
+```
+
+* [Demo](http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa)
+* [Demo of events](http://dotwe.org/vue/2ba8ebc4e6970e1e86725c3e80296e40)
+* [Demo of binding](http://dotwe.org/vue/d884b0c18891a05d653253c0f0a94bc1)
diff --git a/docs/docs/components/video.md b/docs/docs/components/video.md
new file mode 100644
index 0000000..5f037b5
--- /dev/null
+++ b/docs/docs/components/video.md
@@ -0,0 +1,82 @@
+# <video>
+
+## Summary
+
+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, <Badge text="v0.18+ & iOS" type="warning"/>. Post image URL of this video if any.
+* **controls**, string, <Badge text="v0.19+" type="warning"/>. If set to `nocontrols`, native video component will hide its play-back control panel.
+
+## Styles
+
+* **common styles**. support [common styles](../styles/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>
+```
+* [Demo](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197)
+* [Demo of autoplay](http://dotwe.org/vue/342d32830f51f72df6acab21fb1c21bd)
+* [Demo of controls](http://dotwe.org/vue/7bdf54dce22def3d3850f65d95f5eac9)
diff --git a/docs/docs/components/waterfall.md b/docs/docs/components/waterfall.md
new file mode 100644
index 0000000..0c04ac8
--- /dev/null
+++ b/docs/docs/components/waterfall.md
@@ -0,0 +1,50 @@
+# <waterfall>
+
+## Summary
+
+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](/docs/styles/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](/docs/events/common-events.html)
+
+* support onclick event. Check out [common events](/docs/events/common-events.html)
+* support onappear / ondisappear event. Check out [common events](/docs/events/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/docs/docs/components/web.md b/docs/docs/components/web.md
new file mode 100644
index 0000000..ba50345
--- /dev/null
+++ b/docs/docs/components/web.md
@@ -0,0 +1,102 @@
+# <web>
+
+## Summary
+
+`<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/asset-path.html).
+
+## Events
+
+Only support `appear` and `disappear` event in **[common events](../events/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](../styles/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/docs/docs/events/common-events.md b/docs/docs/events/common-events.md
new file mode 100644
index 0000000..9720c38
--- /dev/null
+++ b/docs/docs/events/common-events.md
@@ -0,0 +1,142 @@
+---
+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`.
+
+## stopPropagation
+
+when you want to handler list in list, scroller in list which has touch conflict touch scene. you can use this to control touch dispatch.
+together with the following attr to achive smooth nest scroll.
+
+shouldStopPropagationInitResult : default true/false,
+
+shouldStopPropagationInterval : control touch call frequency with js. reduce js call with native.
+
+### Example
+
+[Scroller With List](http://dotwe.org/vue/48ddb2f7339d1fb116135900a2dbc8e5)
+
+## 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/docs/docs/events/event-bubbling.md b/docs/docs/events/event-bubbling.md
new file mode 100644
index 0000000..07b3034
--- /dev/null
+++ b/docs/docs/events/event-bubbling.md
@@ -0,0 +1,67 @@
+---
+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 th [...]
+
+```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/docs/docs/events/gesture.md b/docs/docs/events/gesture.md
new file mode 100644
index 0000000..dac6b56
--- /dev/null
+++ b/docs/docs/events/gesture.md
@@ -0,0 +1,61 @@
+---
+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` will be fired when pan start
+ * `panmove` will be fired when pan move
+ * `panend` will be fired when pan end
+* **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/docs/docs/images/BroadcastChannel.png b/docs/docs/images/BroadcastChannel.png
new file mode 100644
index 0000000..050e043
Binary files /dev/null and b/docs/docs/images/BroadcastChannel.png differ
diff --git a/docs/docs/images/CustomFontface_badcase.png b/docs/docs/images/CustomFontface_badcase.png
new file mode 100644
index 0000000..2832c55
Binary files /dev/null and b/docs/docs/images/CustomFontface_badcase.png differ
diff --git a/docs/docs/images/css-boxmodel.png b/docs/docs/images/css-boxmodel.png
new file mode 100644
index 0000000..a2063e2
Binary files /dev/null and b/docs/docs/images/css-boxmodel.png differ
diff --git a/docs/docs/images/css-flexbox-align.jpg b/docs/docs/images/css-flexbox-align.jpg
new file mode 100644
index 0000000..8a7f731
Binary files /dev/null and b/docs/docs/images/css-flexbox-align.jpg differ
diff --git a/docs/docs/images/css-flexbox-justify.svg b/docs/docs/images/css-flexbox-justify.svg
new file mode 100644
index 0000000..33e742b
--- /dev/null
+++ b/docs/docs/images/css-flexbox-justify.svg
@@ -0,0 +1,59 @@
+<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/docs/docs/images/css-flexbox-sample.png b/docs/docs/images/css-flexbox-sample.png
new file mode 100644
index 0000000..0f1236d
Binary files /dev/null and b/docs/docs/images/css-flexbox-sample.png differ
diff --git a/docs/docs/images/image-resize-property.png b/docs/docs/images/image-resize-property.png
new file mode 100644
index 0000000..c3b17a2
Binary files /dev/null and b/docs/docs/images/image-resize-property.png differ
diff --git a/docs/docs/images/list_demo.jpg b/docs/docs/images/list_demo.jpg
new file mode 100644
index 0000000..8a5a775
Binary files /dev/null and b/docs/docs/images/list_demo.jpg differ
diff --git a/docs/docs/images/nav.png b/docs/docs/images/nav.png
new file mode 100644
index 0000000..7081ca7
Binary files /dev/null and b/docs/docs/images/nav.png differ
diff --git a/docs/docs/modules/animation.md b/docs/docs/modules/animation.md
new file mode 100644
index 0000000..76527c0
--- /dev/null
+++ b/docs/docs/modules/animation.md
@@ -0,0 +1,85 @@
+# animation
+
+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.
+
+One can invoke `animation.transition(ref, options, callback)` to start animation. Ref the following code snippets.
+```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.' })
+ })
+```
+* [Demo](http://dotwe.org/vue/2d1b61bef061448c1a5a13eac9624410)
+
+::: warning Only for Android
+It may cause crash with exception **Unable to create layer for xxx** if the size ( *width or height* ) of your component with `animation` exceeds the maximum as your component makes the OpenGL memory zone OutOfMemory.
+
+The maximum of the size for your component is device dependent, but you are in the danger zone if the size is bigger than screen's size.
+:::
+
+:::tip
+Ref [transition](../styles/common-styles.html#property) or [transform](../styles/common-styles.html#transform) if you prefer CSS animation.
+:::
+
+# API
+
+## transition
+
+#### transition(ref, options, callback)
+
+* **@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**, animation properties such as keys, duration.
+ * **`styles`**, `styles` specifies the names and values of styles to which a transition effect should be applied. The supported styles are listed below:
+ * width
+ * height
+ * backgroundColor
+ * opacity
+ * transformOrigin
+ * transform
+ * translate/translateX/translateY
+ * rotate/rotateX/rotateY
+ * perspective
+ * scale/scaleX/scaleY
+ * **`duration`**, `duration` *number* specifies the duration of animation execution, the default value is `0`, meaning that the component get the desired property immediately.
+ * **`delay`**, `delay` *number* specifies the waiting time before the animation starts. The default value is `0`.
+ * **`needLayout`**, `needLayout` *boolean* Specifies whether the change to layout(width/height/etc..) is persistence and takes affect after the animation. Default value is `false`
+ * **`timingFunction`**, `timingFunction` *string* describes 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:
+ * `linear`: Specify a transition effect with the same speed from start to end.
+ * `ease-in`: Specify a transition effect with a slow start and fast end.
+ * `ease-out`: Specify a transition effect with a fast start and slow end.
+ * `ease-in-out`: Specify a transition effect with a slow start, fast intermediate and slow 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.
+
+::: tip
+* On iOS platform you 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.
+* Android doesn't support the result parameter.
+:::
+
+#### Animated properties in styles
+* **`width`**, the `width` applied to the component after the animation finished. Set `needLayout` to true if you want the change to be persistence. The default value is `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. The default value is `computed height`.
+* **`backgroundColor`**, the `backgroundColor` applied to the component after the animation finished. The default value is `computed backgroundColor`.
+* **`opacity`**, the `opacity` applied to the component after the animation finished. The default value is `computed opacity`.
+* **`transformOrigin`**, the `transformOrigin` indicate the pivot of the element being animated. The possible values for `x-axis` are `left`/`center`/`right`/length or percent, and possible values of `y-axis` are `top`/`center`/`bottom`/ length or percent. The default value is `center center`.
+* **`transform`**, transform object, which may include `rotate`, `translate`, `scale` and etc. The detail of transform is illustrated below.
+ * `translate/translateX/translateY`: Specify the location which the element will be translated to.The unit is number or percent and the default value is 0.
+ * `rotate/rotateX/rotateY`**v0.14+**: Specify the angle of which the element will be rotated. The unit is **degree** and the default value is 0.
+ * `perspective`**v0.16+**: The distance between the z=0 plane and the user. Supported for **Android 4.1** and above. The unit is number and the default value is positive infinity.
+ * `scale/scaleX/scaleY`: Stretch or shrink the element. The unit is number and the default value is 1.
+:::
+
+
diff --git a/docs/docs/modules/clipboard.md b/docs/docs/modules/clipboard.md
new file mode 100644
index 0000000..d731740
--- /dev/null
+++ b/docs/docs/modules/clipboard.md
@@ -0,0 +1,30 @@
+# clipboard
+
+Clipboard allows you to use methods `getString()` and `setString()` to access 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()` .
+
+::: tip
+* Only support text.
+* Only works on Android and iOS. NOT works for html5, for web security reason.
+:::
+
+# API
+
+## getString
+
+Reads from clipboard.
+
+#### getString(callback)
+
+* **@callback**, the callback function after executing this action. `data` is the return value.
+
+## setString
+
+Sets the text to clipboard, having the same effect as copying manually.
+
+#### setString(text)
+
+* **@text**, the text.
+
+[Demo](http://dotwe.org/vue/126d3cfc5533393e28943978b07aa5c1)
diff --git a/docs/docs/modules/dom.md b/docs/docs/modules/dom.md
new file mode 100644
index 0000000..95c9c6d
--- /dev/null
+++ b/docs/docs/modules/dom.md
@@ -0,0 +1,112 @@
+# dom
+
+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.
+
+::: tip
+The `addRule` method is currently used only with font-face supportability.
+:::
+
+# API
+
+## scrollToElement
+
+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.
+
+#### scrollToElement(ref, options)
+
+* **@ref**, the referenced component who is meant to scroll into the view.
+* **@options**,
+ * **`offset`**, an space on top of the ref component, which is also scrolling down to the visual viewport. Default is `0`.
+ * **`animated`**, a boolean 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.
+
+[Demo](http://dotwe.org/vue/56e0d256cbb26facd958dbd6424f42b2)
+
+## getComponentRect
+
+You can get the bounding rect of the referenced component using this API.
+
+#### getComponentRect(ref, callback)
+
+* **@ref**, the referenced component.
+* **@callback**, the callback function after executing this action.
+
+An example callback result should be like:
+```javascript
+{
+ result: true,
+ size: {
+ bottom: 60,
+ height: 15,
+ left: 0,
+ right: 353,
+ top: 45,
+ width: 353
+ }
+}
+```
+
+::: tip
+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)`.
+:::
+
+[Demo](http://dotwe.org/vue/d69ec16302e06300096c7285baef538a)
+
+## getLayoutDirection <Badge text="0.20.0+" type="warn" vertical="middle"/>
+
+You can get the layout direction the referenced component using this API.
+
+#### getLayoutDirection(ref, callback)
+
+* **@ref**, the referenced component.
+* **@callback**, the callback function after executing this action.
+
+An example callback result should be like:
+```json
+{
+ "result": "rtl",
+}
+```
+
+Demo
+```javascript
+const element = this.$refs['kkk'][0];
+dom.getLayoutDirection(element, function(ret) {
+ console.log(ret.result);
+});
+```
+
+## addRule <Badge text="0.12.0+" type="warn" vertical="middle"/>
+
+Weex provide the ability of loading custom through **DOM.addRule**. Developers can load *iconfont* and *custom font* by specifying the **font-family**.
+
+Developers may use the following code snippet to load their font:
+```javascript
+const domModule = weex.requireModule('dom')
+domModule.addRule('fontFace', {
+ 'fontFamily': "iconfont2",
+ 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
+});
+```
+
+#### addRule(type, contentObject)
+
+* **@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.
+
+::: warning
+You can name `fontFamily` in `addRule` as you wish in your page, any string is OK. But this is not the real font-family name of the font file. The real name or system name for the font is stored in binrary data of ttf file. You must ensure that the real font-family name of font file is unique. Or your font may not be successfully registered to device and your text may display as a '?'.
+
+Specially, if you are using http://www.iconfont.cn/ to build your iconfont. Make sure that you set a unique enough font-family name for your font in project settings.
+
+Calling `addRule` in `beforeCreate` is recommended.
+:::
+
+[Demo](http://dotwe.org/vue/7e328ee2ac9b7205c9ee37f4e509263d).
diff --git a/docs/docs/modules/globalEvent.md b/docs/docs/modules/globalEvent.md
new file mode 100644
index 0000000..605ba8d
--- /dev/null
+++ b/docs/docs/modules/globalEvent.md
@@ -0,0 +1,68 @@
+# globalEvent <Badge text="0.14" type="warn" vertical="middle"/>
+
+`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.
+
+#### Built-in global events
+
+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.
+
+```javascript
+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
+
+[Demo](http://dotwe.org/vue/5a774e8ce3766c88038cab6fe3331f5b)
+
+::: warning
+This feature only works on iOS and Android platforms, it doesn't work on Web. [Obtain your weex platform on weex page](/docs/api/weex-variable.html#weex-environment-object)
+:::
+
+#### Fire a global event
+
+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
+
+Register global event.
+
+#### addEventListener(eventName, callback)
+
+* **@eventName**, string, the name of the event you want to listen to.
+* **@callback**, function, the callback function after executing this action.
+
+```javascript
+var globalEvent = weex.requireModule('globalEvent');
+globalEvent.addEventListener("geolocation", function (e) {
+ console.log("get geolocation")
+});
+```
+
+## removeEventListener
+
+Remove global event
+
+#### removeEventListener(eventName)
+
+* **@eventName**, the event name to unregister.
+
+```javascript
+var globalEvent = weex.requireModule('globalEvent');
+globalEvent.removeEventListener("geolocation");
+```
diff --git a/docs/docs/modules/meta.md b/docs/docs/modules/meta.md
new file mode 100644
index 0000000..c792d72
--- /dev/null
+++ b/docs/docs/modules/meta.md
@@ -0,0 +1,88 @@
+# meta
+
+The meta module can be used to update meta information for a single page, such as the viewport of the container.
+
+# API
+
+## setViewport
+
+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.
+
+#### setViewport(options)
+
+* **@options**
+ * **`width`**, number value or `"device-width"` or `"device-height"` macros.
+ * **`height`**, number value or `"device-width"` or `"device-height"` macros.
+ * **`roundOffDeviation`** <Badge text="0.20.0+" type="warn" vertical="middle"/>, The default value is true, which means that the layout engine ignores the error caused by the decimal point in the layout; if there is a gap in the component splicing, you can set the `roundOffDeviation` to false, and the layout engine will automatically fill in the decimal point error.
+
+::: tip
+* Referance: W3C Spec [CSS Device Adaptation](https://drafts.csswg.org/css-device-adapt/#viewport-meta).
+* The default unit of the width and height is `px`, other units are not supported.
+* 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.
+:::
+
+#### Demo
+
+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,
+ roundOffDeviation: false
+})
+
+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/develop/setup-develop-environment.html).
diff --git a/docs/docs/modules/modal.md b/docs/docs/modules/modal.md
new file mode 100644
index 0000000..ccaffcb
--- /dev/null
+++ b/docs/docs/modules/modal.md
@@ -0,0 +1,104 @@
+# modal
+
+Weex provides a series of message boxes: `toast`, `alert`, `confirm` and `prompt` via modal module.
+
+# API
+
+## toast
+
+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.
+
+#### toast(options)
+
+* **@options**
+ * **`message`**, string, the text message that the toast shows.
+ * **`duration`**, number, the duration(seconds) that the toast shows.
+
+::: tip
+* 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.
+:::
+
+Demo
+```javascript
+var modal = weex.requireModule('modal')
+modal.toast({
+ message: 'This is a toast',
+ duration: 0.3
+})
+```
+
+## alert
+
+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.
+
+#### alert(options, callback)
+
+* **@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.
+
+Demo
+```javascript
+var modal = weex.requireModule('modal')
+modal.alert({
+ message: 'This is a alert',
+ okTitle: '确认'
+}, function () {
+ console.log('alert callback')
+})
+```
+
+## confirm
+
+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.
+
+#### confirm(options, callback)
+
+* **@options**
+ * **`message`**, string: the text message that the alert shows.
+ * **`okTitle`**, string: the text of positive button, default is 'OK'.
+ * **`cancelTitle`**, string, the title of cancel button, default is 'Cancel'.
+* **@callback**, function: callback when complete.
+ * **`result`**, string, the title text of the confirm button that clicked by user.
+
+Demo
+```javascript
+var modal = weex.requireModule('modal')
+modal.confirm({
+ message: 'Do you confirm ?',
+ duration: 0.3
+}, function (value) {
+ console.log('confirm callback', value)
+})
+```
+
+## prompt
+
+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.
+
+#### prompt(options, callback)
+
+* **@options**
+ * **`message`**, string: the text message that the alert shows.
+ * **`okTitle`**, string: the text of positive button, default is 'OK'.
+ * **`cancelTitle`**, string, the title of cancel button, default is 'Cancel'.
+* **@callback**, function: callback when complete.
+ * **`ret`**, object, the argument will be an object, which contains button clicked by user or text typed by user. Attributes `result` and `data`, like `{ result: 'OK', data: 'hello world' }`
+
+Demo
+```javascript
+var modal = weex.requireModule('modal')
+modal.prompt({
+ message: 'This is a prompt',
+ duration: 0.3
+}, function (value) {
+ console.log('prompt callback', value)
+})
+```
+
+[Modal Demos](http://dotwe.org/vue/a7dddfb24edb72be947fc4eec3803f1d)
diff --git a/docs/docs/modules/navigator.md b/docs/docs/modules/navigator.md
new file mode 100644
index 0000000..34e37b6
--- /dev/null
+++ b/docs/docs/modules/navigator.md
@@ -0,0 +1,56 @@
+# Navigator
+
+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
+
+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.
+
+#### push(options, callback)
+
+* **@options**
+ * **`url`**, string, the URL of the weex page to push.
+ * **`animated`** boolean, if the weex page is push through animation, otherwise, false. Default value is true.
+* **@callback**, the callback function to be called after executing this action.
+
+Demo
+```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
+
+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.
+
+#### pop(options, callback)
+
+* **@options**
+ * **`animated`**, boolean, true if the weex page is pop through animation; otherwise, false. Default value is true.
+* **@callback**, the callback function after executing this action.
+
+Demo
+```html
+var navigator = weex.requireModule('navigator')
+var modal = weex.requireModule('modal')
+navigator.pop({ animated: "true"}, event => {
+ modal.toast({ message: 'callback: ' + event })
+})
+```
+
+::: tip
+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.
+:::
+
+[Demo](http://dotwe.org/vue/f2daa25e32eec2a294d59a9144660cad)
diff --git a/docs/docs/modules/picker.md b/docs/docs/modules/picker.md
new file mode 100644
index 0000000..5fc1c30
--- /dev/null
+++ b/docs/docs/modules/picker.md
@@ -0,0 +1,50 @@
+# picker
+
+A series of stream api. It provides function: pick data, pick date, pick time
+
+# API
+
+## pick
+
+#### pick(options, callback[options])
+
+* **@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**, 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
+
+#### pickDate(options, callback[options])
+
+* **@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**, 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
+
+#### pickTime(options, callback[options])
+
+* **@options**
+ * **`value`**, string, required，the form of value is HH:mm
+* **@callback**, 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.
+
+[Demo](http://dotwe.org/vue/060faedd0952f518d2d5322a5fb5ea2f)
diff --git a/docs/docs/modules/storage.md b/docs/docs/modules/storage.md
new file mode 100644
index 0000000..af54370
--- /dev/null
+++ b/docs/docs/modules/storage.md
@@ -0,0 +1,65 @@
+# storage
+
+`storage` is a series of apis, support add, modify and delete stored data.
+
+::: warning
+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
+
+When passed a key and a value, it will saved into the storage,
+or update the value if the key already exists.
+
+#### setItem(key, value, callback)
+
+* **@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**, function, the callback function after executing this action.
+
+## getItem
+
+When passed a key, will return that key's value.
+
+#### getItem(key, callback)
+
+* **@key**, string, the name of the key you want to retrieve the value of."" or null is not allowed.
+* **@callback**, function, the callback function after executing this action.
+
+## removeItem
+
+When passed a key, will remove that key and value from the storage.
+
+#### removeItem(key, callback)
+
+* **@key**, string, the name of the key you want to remove."" or null is not allowed.
+* **@callback**, function, the callback function after executing this action.
+
+```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
+
+Returns an integer representing the number of key-value items stored in the storage.
+
+#### length(callback)
+
+* **@callback**, the callback function after executing this action.
+
+## getAllKeys
+
+Returns an array that contains all keys stored in the storage.
+
+#### getAllKeys(callback)
+
+* **@callback**, the callback function after executing this action.
+
+[Demo](http://dotwe.org/vue/3fdd3e2d1646ca41199d80c7be799858)
diff --git a/docs/docs/modules/stream.md b/docs/docs/modules/stream.md
new file mode 100644
index 0000000..d20c884
--- /dev/null
+++ b/docs/docs/modules/stream.md
@@ -0,0 +1,49 @@
+# stream
+
+A series of stream api. It provides a network request.
+
+# API
+
+## fetch
+
+Start a network request, use two callbacks to receive server's response data.
+
+#### fetch(options, callback, progressCallback)
+
+* **@options**, 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.
+
+::: warning
+- The `body` parameter only supports arguments of type `string`. Do not use the `JSON` format directly, you must convert it to a string.
+- The `GET` request does not support arguments as `body`. Please use the URL to set the parameters.
+- The default value of `Content-Type` is `application/x-www-form-urlencoded`.
+- If you need to send data in `JSON` format via POST, you need to set `Content-Type` to `application/json`.
+:::
+
+* **@callback**, 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.
+
+::: tip
+- 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.
+:::
+
+**Demos**
+- [Simple Demo](http://dotwe.org/vue/80b21a0fce98acdffad96c57b2eadd1d)
+- [Post Demo](http://dotwe.org/vue/6dd65122144d9ad26594c0f900c75cd4)
+- [Get Demo](http://dotwe.org/vue/892bd1c977b61762baca8e02a65b6d97)
diff --git a/docs/docs/modules/websockets.md b/docs/docs/modules/websockets.md
new file mode 100644
index 0000000..7a2d590
--- /dev/null
+++ b/docs/docs/modules/websockets.md
@@ -0,0 +1,129 @@
+# webSocket
+
+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
+
+::: warning
+iOS and h5 provide webSocket default handle. if you use webSocket in android environment. You should provide custom adapter implementation, source:
+- [DefaultWebSocketAdapter.java](https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapter.java);
+- [DefaultWebSocketAdapterFactory.java](https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapterFactory.java);
+- refer: [weex playground](https://github.com/apache/incubator-weex/tree/master/android/playground)
+:::
+
+# API
+
+## WebSocket
+
+create websocket
+
+#### WebSocket(url, protocol)
+
+* **@url**, string, the URL to which to connect.
+* **@protocol**, string, the websocket protocol.
+
+```javascript
+const ws = weex.requireModule('webSocket');
+ws.WebSocket('ws://echo.websocket.org','');
+```
+
+## send
+
+Transmits data to the server over the WebSocket connection
+
+#### send(data)
+
+* **@data**, string, a text string to send to the server.
+
+```javascript
+const ws = weex.requireModule('webSocket');
+ws.WebSocket('ws://echo.websocket.org','');
+ws.send('some message.');
+```
+
+## close
+
+Closes the WebSocket connection or connection attempt, if any. If the connection is already CLOSED, this method does nothing.
+
+#### close(code, reason)
+
+* **@code**, number, the status code explaining why the connection is being closed.
+* **@reason**, string, a string explaining why the connection is closing
+
+```javascript
+const ws = weex.requireModule('webSocket');
+ws.WebSocket('ws://echo.websocket.org','');
+ws.close();
+```
+
+## onopen
+
+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.
+
+#### onopen(options)
+
+* **@options**, object, an empty object
+
+```javascript
+const ws = weex.requireModule('webSocket')
+ws.WebSocket('ws://echo.websocket.org','');
+ws.onopen = function(event) {
+console.log('onopen', event);
+}
+```
+
+## onmessage
+
+An event listener to be called when a message is received from the server
+
+#### onmessage(options)
+
+* **@options**, object, the server message options.
+ * **`data`**, string, the listener received message.
+
+```javascript
+const ws = weex.requireModule('webSocket')
+ws.WebSocket('ws://echo.websocket.org','');
+ws.onmessage = function(event) {
+ console.log('onmessage', event);
+}
+```
+
+## onclose
+
+An event listener to be called when the WebSocket connection's readyState changes to CLOSED
+
+#### onclose(options)
+
+* **@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.
+
+```javascript
+const ws = weex.requireModule('webSocket')
+ws.WebSocket('ws://echo.websocket.org','');
+ws.onclose = function(event) {
+ console.log('onclose', event);
+}
+```
+
+## onerror
+
+An event listener to be called when an error occurs.
+
+#### onerror(options)
+
+* **@options**, object, the error event.
+ * **`data`**, string, the listener received error data.
+
+```javascript
+const ws = weex.requireModule('webSocket')
+ws.WebSocket('ws://echo.websocket.org','');
+ws.onerror = function(event) {
+ console.log('onerror', event);
+}
+```
+
+**Demos**
+
+- [Demo](http://dotwe.org/vue/6b7d6dc14320e3f04e0f203cb8bcc703)
+- [Chat Demo](http://dotwe.org/vue/21d8b0a79c20e95139353d9cc8b634f5)
diff --git a/docs/docs/modules/webview.md b/docs/docs/modules/webview.md
new file mode 100644
index 0000000..0153490
--- /dev/null
+++ b/docs/docs/modules/webview.md
@@ -0,0 +1,41 @@
+# webview
+
+`webview` module provides a series of web operation API like `goBack`, `goForward`, and `reload`.
+
+Usually used with the [`<web>` component](../components/web.html).
+
+```javascript
+var webElement = this.$el('webview');
+var webview = weex.requireModule('webview');
+webview.goBack(webElement.ref);
+webview.goForward(webElement.ref);
+webview.reload(webElement.ref);
+```
+
+# API
+
+## goBack
+
+Goes to the previous page in WebView's session history.
+
+#### goBack(webElement)
+
+* **@webElement**, the element ref of the `<web>` component.
+
+## goForward
+
+Goes to the next page in WebView's session history.
+
+#### goForward(webElement)
+
+* **@webElement**, the element ref of the `<web>` component.
+
+## reload
+
+Reloads the current web page.
+
+#### reload(webElement)
+
+* **@webElement**, the element ref of the `<web>` component.
+
+[Demo](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939)
diff --git a/docs/docs/styles/color-name.md b/docs/docs/styles/color-name.md
new file mode 100644
index 0000000..d227ccc
--- /dev/null
+++ b/docs/docs/styles/color-name.md
@@ -0,0 +1,677 @@
+### Color name
+
+#### Basic color keywords:
+<table>
+<thead>
+<tr>
+<th>Color Name</th>
+<th>Hex rgb</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>black</td>
+<td>#000000</td>
+</tr>
+<tr>
+<td>silver</td>
+<td>#C0C0C0</td>
+</tr>
+<tr>
+<td>gray</td>
+<td>#808080</td>
+</tr>
+<tr>
+<td>white</td>
+<td>#FFFFFF</td>
+</tr>
+<tr>
+<td>maroon</td>
+<td>#800000</td>
+</tr>
+<tr>
+<td>red</td>
+<td>#FF0000</td>
+</tr>
+<tr>
+<td>purple</td>
+<td>#800080</td>
+</tr>
+<tr>
+<td>fuchsia</td>
+<td>#FF00FF</td>
+</tr>
+<tr>
+<td>green</td>
+<td>#008000</td>
+</tr>
+<tr>
+<td>lime</td>
+<td>#00FF00</td>
+</tr>
+<tr>
+<td>olive</td>
+<td>#808000</td>
+</tr>
+<tr>
+<td>yellow</td>
+<td>#FFFF00</td>
+</tr>
+<tr>
+<td>navy</td>
+<td>#000080</td>
+</tr>
+<tr>
+<td>blue</td>
+<td>#0000FF</td>
+</tr>
+<tr>
+<td>teal</td>
+<td>#008080</td>
+</tr>
+<tr>
+<td>aqua</td>
+<td>#00FFFF</td>
+</tr>
+</tbody>
+</table>
+
+#### Extended color keywords:
+<table>
+<thead>
+<tr>
+<th>Color Name</th>
+<th>Hex rgb</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>aliceblue</td>
+<td>#F0F8FF</td>
+</tr>
+<tr>
+<td>antiquewhite</td>
+<td>#FAEBD7</td>
+</tr>
+<tr>
+<td>aqua</td>
+<td>#00FFFF</td>
+</tr>
+<tr>
+<td>aquamarine</td>
+<td>#7FFFD4</td>
+</tr>
+<tr>
+<td>azure</td>
+<td>#F0FFFF</td>
+</tr>
+<tr>
+<td>beige</td>
+<td>#F5F5DC</td>
+</tr>
+<tr>
+<td>bisque</td>
+<td>#FFE4C4</td>
+</tr>
+<tr>
+<td>black</td>
+<td>#000000</td>
+</tr>
+<tr>
+<td>blanchedalmond</td>
+<td>#FFEBCD</td>
+</tr>
+<tr>
+<td>blue</td>
+<td>#0000FF</td>
+</tr>
+<tr>
+<td>blueviolet</td>
+<td>#8A2BE2</td>
+</tr>
+<tr>
+<td>brown</td>
+<td>#A52A2A</td>
+</tr>
+<tr>
+<td>burlywood</td>
+<td>#DEB887</td>
+</tr>
+<tr>
+<td>cadetblue</td>
+<td>#5F9EA0</td>
+</tr>
+<tr>
+<td>chartreuse</td>
+<td>#7FFF00</td>
+</tr>
+<tr>
+<td>chocolate</td>
+<td>#D2691E</td>
+</tr>
+<tr>
+<td>coral</td>
+<td>#FF7F50</td>
+</tr>
+<tr>
+<td>cornflowerblue</td>
+<td>#6495ED</td>
+</tr>
+<tr>
+<td>cornsilk</td>
+<td>#FFF8DC</td>
+</tr>
+<tr>
+<td>crimson</td>
+<td>#DC143C</td>
+</tr>
+<tr>
+<td>cyan</td>
+<td>#00FFFF</td>
+</tr>
+<tr>
+<td>darkblue</td>
+<td>#00008B</td>
+</tr>
+<tr>
+<td>darkcyan</td>
+<td>#008B8B</td>
+</tr>
+<tr>
+<td>darkgoldenrod</td>
+<td>#B8860B</td>
+</tr>
+<tr>
+<td>darkgray</td>
+<td>#A9A9A9</td>
+</tr>
+<tr>
+<td>darkgreen</td>
+<td>#006400</td>
+</tr>
+<tr>
+<td>darkgrey</td>
+<td>#A9A9A9</td>
+</tr>
+<tr>
+<td>darkkhaki</td>
+<td>#BDB76B</td>
+</tr>
+<tr>
+<td>darkmagenta</td>
+<td>#8B008B</td>
+</tr>
+<tr>
+<td>darkolivegreen</td>
+<td>#556B2F</td>
+</tr>
+<tr>
+<td>darkorange</td>
+<td>#FF8C00</td>
+</tr>
+<tr>
+<td>darkorchid</td>
+<td>#9932CC</td>
+</tr>
+<tr>
+<td>darkred</td>
+<td>#8B0000</td>
+</tr>
+<tr>
+<td>darksalmon</td>
+<td>#E9967A</td>
+</tr>
+<tr>
+<td>darkseagreen</td>
+<td>#8FBC8F</td>
+</tr>
+<tr>
+<td>darkslateblue</td>
+<td>#483D8B</td>
+</tr>
+<tr>
+<td>darkslategray</td>
+<td>#2F4F4F</td>
+</tr>
+<tr>
+<td>darkslategrey</td>
+<td>#2F4F4F</td>
+</tr>
+<tr>
+<td>darkturquoise</td>
+<td>#00CED1</td>
+</tr>
+<tr>
+<td>darkviolet</td>
+<td>#9400D3</td>
+</tr>
+<tr>
+<td>deeppink</td>
+<td>#FF1493</td>
+</tr>
+<tr>
+<td>deepskyblue</td>
+<td>#00BFFF</td>
+</tr>
+<tr>
+<td>dimgray</td>
+<td>#696969</td>
+</tr>
+<tr>
+<td>dimgrey</td>
+<td>#696969</td>
+</tr>
+<tr>
+<td>dodgerblue</td>
+<td>#1E90FF</td>
+</tr>
+<tr>
+<td>firebrick</td>
+<td>#B22222</td>
+</tr>
+<tr>
+<td>floralwhite</td>
+<td>#FFFAF0</td>
+</tr>
+<tr>
+<td>forestgreen</td>
+<td>#228B22</td>
+</tr>
+<tr>
+<td>fuchsia</td>
+<td>#FF00FF</td>
+</tr>
+<tr>
+<td>gainsboro</td>
+<td>#DCDCDC</td>
+</tr>
+<tr>
+<td>ghostwhite</td>
+<td>#F8F8FF</td>
+</tr>
+<tr>
+<td>gold</td>
+<td>#FFD700</td>
+</tr>
+<tr>
+<td>goldenrod</td>
+<td>#DAA520</td>
+</tr>
+<tr>
+<td>gray</td>
+<td>#808080</td>
+</tr>
+<tr>
+<td>green</td>
+<td>#008000</td>
+</tr>
+<tr>
+<td>greenyellow</td>
+<td>#ADFF2F</td>
+</tr>
+<tr>
+<td>grey</td>
+<td>#808080</td>
+</tr>
+<tr>
+<td>honeydew</td>
+<td>#F0FFF0</td>
+</tr>
+<tr>
+<td>hotpink</td>
+<td>#FF69B4</td>
+</tr>
+<tr>
+<td>indianred</td>
+<td>#CD5C5C</td>
+</tr>
+<tr>
+<td>indigo</td>
+<td>#4B0082</td>
+</tr>
+<tr>
+<td>ivory</td>
+<td>#FFFFF0</td>
+</tr>
+<tr>
+<td>khaki</td>
+<td>#F0E68C</td>
+</tr>
+<tr>
+<td>lavender</td>
+<td>#E6E6FA</td>
+</tr>
+<tr>
+<td>lavenderblush</td>
+<td>#FFF0F5</td>
+</tr>
+<tr>
+<td>lawngreen</td>
+<td>#7CFC00</td>
+</tr>
+<tr>
+<td>lemonchiffon</td>
+<td>#FFFACD</td>
+</tr>
+<tr>
+<td>lightblue</td>
+<td>#ADD8E6</td>
+</tr>
+<tr>
+<td>lightcoral</td>
+<td>#F08080</td>
+</tr>
+<tr>
+<td>lightcyan</td>
+<td>#E0FFFF</td>
+</tr>
+<tr>
+<td>lightgoldenrodyellow</td>
+<td>#FAFAD2</td>
+</tr>
+<tr>
+<td>lightgray</td>
+<td>#D3D3D3</td>
+</tr>
+<tr>
+<td>lightgreen</td>
+<td>#90EE90</td>
+</tr>
+<tr>
+<td>lightgrey</td>
+<td>#D3D3D3</td>
+</tr>
+<tr>
+<td>lightpink</td>
+<td>#FFB6C1</td>
+</tr>
+<tr>
+<td>lightsalmon</td>
+<td>#FFA07A</td>
+</tr>
+<tr>
+<td>lightseagreen</td>
+<td>#20B2AA</td>
+</tr>
+<tr>
+<td>lightskyblue</td>
+<td>#87CEFA</td>
+</tr>
+<tr>
+<td>lightslategray</td>
+<td>#778899</td>
+</tr>
+<tr>
+<td>lightslategrey</td>
+<td>#778899</td>
+</tr>
+<tr>
+<td>lightsteelblue</td>
+<td>#B0C4DE</td>
+</tr>
+<tr>
+<td>lightyellow</td>
+<td>#FFFFE0</td>
+</tr>
+<tr>
+<td>lime</td>
+<td>#00FF00</td>
+</tr>
+<tr>
+<td>limegreen</td>
+<td>#32CD32</td>
+</tr>
+<tr>
+<td>linen</td>
+<td>#FAF0E6</td>
+</tr>
+<tr>
+<td>magenta</td>
+<td>#FF00FF</td>
+</tr>
+<tr>
+<td>maroon</td>
+<td>#800000</td>
+</tr>
+<tr>
+<td>mediumaquamarine</td>
+<td>#66CDAA</td>
+</tr>
+<tr>
+<td>mediumblue</td>
+<td>#0000CD</td>
+</tr>
+<tr>
+<td>mediumorchid</td>
+<td>#BA55D3</td>
+</tr>
+<tr>
+<td>mediumpurple</td>
+<td>#9370DB</td>
+</tr>
+<tr>
+<td>mediumseagreen</td>
+<td>#3CB371</td>
+</tr>
+<tr>
+<td>mediumslateblue</td>
+<td>#7B68EE</td>
+</tr>
+<tr>
+<td>mediumspringgreen</td>
+<td>#00FA9A</td>
+</tr>
+<tr>
+<td>mediumturquoise</td>
+<td>#48D1CC</td>
+</tr>
+<tr>
+<td>mediumvioletred</td>
+<td>#C71585</td>
+</tr>
+<tr>
+<td>midnightblue</td>
+<td>#191970</td>
+</tr>
+<tr>
+<td>mintcream</td>
+<td>#F5FFFA</td>
+</tr>
+<tr>
+<td>mistyrose</td>
+<td>#FFE4E1</td>
+</tr>
+<tr>
+<td>moccasin</td>
+<td>#FFE4B5</td>
+</tr>
+<tr>
+<td>navajowhite</td>
+<td>#FFDEAD</td>
+</tr>
+<tr>
+<td>navy</td>
+<td>#000080</td>
+</tr>
+<tr>
+<td>oldlace</td>
+<td>#FDF5E6</td>
+</tr>
+<tr>
+<td>olive</td>
+<td>#808000</td>
+</tr>
+<tr>
+<td>olivedrab</td>
+<td>#6B8E23</td>
+</tr>
+<tr>
+<td>orange</td>
+<td>#FFA500</td>
+</tr>
+<tr>
+<td>orangered</td>
+<td>#FF4500</td>
+</tr>
+<tr>
+<td>orchid</td>
+<td>#DA70D6</td>
+</tr>
+<tr>
+<td>palegoldenrod</td>
+<td>#EEE8AA</td>
+</tr>
+<tr>
+<td>palegreen</td>
+<td>#98FB98</td>
+</tr>
+<tr>
+<td>paleturquoise</td>
+<td>#AFEEEE</td>
+</tr>
+<tr>
+<td>palevioletred</td>
+<td>#DB7093</td>
+</tr>
+<tr>
+<td>papayawhip</td>
+<td>#FFEFD5</td>
+</tr>
+<tr>
+<td>peachpuff</td>
+<td>#FFDAB9</td>
+</tr>
+<tr>
+<td>peru</td>
+<td>#CD853F</td>
+</tr>
+<tr>
+<td>pink</td>
+<td>#FFC0CB</td>
+</tr>
+<tr>
+<td>plum</td>
+<td>#DDA0DD</td>
+</tr>
+<tr>
+<td>powderblue</td>
+<td>#B0E0E6</td>
+</tr>
+<tr>
+<td>purple</td>
+<td>#800080</td>
+</tr>
+<tr>
+<td>red</td>
+<td>#FF0000</td>
+</tr>
+<tr>
+<td>rosybrown</td>
+<td>#BC8F8F</td>
+</tr>
+<tr>
+<td>royalblue</td>
+<td>#4169E1</td>
+</tr>
+<tr>
+<td>saddlebrown</td>
+<td>#8B4513</td>
+</tr>
+<tr>
+<td>salmon</td>
+<td>#FA8072</td>
+</tr>
+<tr>
+<td>sandybrown</td>
+<td>#F4A460</td>
+</tr>
+<tr>
+<td>seagreen</td>
+<td>#2E8B57</td>
+</tr>
+<tr>
+<td>seashell</td>
+<td>#FFF5EE</td>
+</tr>
+<tr>
+<td>sienna</td>
+<td>#A0522D</td>
+</tr>
+<tr>
+<td>silver</td>
+<td>#C0C0C0</td>
+</tr>
+<tr>
+<td>skyblue</td>
+<td>#87CEEB</td>
+</tr>
+<tr>
+<td>slateblue</td>
+<td>#6A5ACD</td>
+</tr>
+<tr>
+<td>slategray</td>
+<td>#708090</td>
+</tr>
+<tr>
+<td>slategrey</td>
+<td>#708090</td>
+</tr>
+<tr>
+<td>snow</td>
+<td>#FFFAFA</td>
+</tr>
+<tr>
+<td>springgreen</td>
+<td>#00FF7F</td>
+</tr>
+<tr>
+<td>steelblue</td>
+<td>#4682B4</td>
+</tr>
+<tr>
+<td>tan</td>
+<td>#D2B48C</td>
+</tr>
+<tr>
+<td>teal</td>
+<td>#008080</td>
+</tr>
+<tr>
+<td>thistle</td>
+<td>#D8BFD8</td>
+</tr>
+<tr>
+<td>tomato</td>
+<td>#FF6347</td>
+</tr>
+<tr>
+<td>turquoise</td>
+<td>#40E0D0</td>
+</tr>
+<tr>
+<td>violet</td>
+<td>#EE82EE</td>
+</tr>
+<tr>
+<td>wheat</td>
+<td>#F5DEB3</td>
+</tr>
+<tr>
+<td>white</td>
+<td>#FFFFFF</td>
+</tr>
+<tr>
+<td>whitesmoke</td>
+<td>#F5F5F5</td>
+</tr>
+<tr>
+<td>yellow</td>
+<td>#FFFF00</td>
+</tr>
+<tr>
+<td>yellowgreen</td>
+<td>#9ACD32</td>
+</tr>
+</tbody>
+</table>
\ No newline at end of file
diff --git a/docs/docs/styles/common-styles.md b/docs/docs/styles/common-styles.md
new file mode 100644
index 0000000..e29b28c
--- /dev/null
+++ b/docs/docs/styles/common-styles.md
@@ -0,0 +1,585 @@
+# Common Styles
+
+All of weex tags share some common style rules
+
+::: danger
+The supported styles is listed below, and some component may support custom style, which you can check in the component's doc. Except for this, other styles are not supported.
+:::
+
+::: warning
+Weex only supports `px` as length unit, `%`, `rem`, `em` are not supported.
+:::
+
+## Box Model
+Weex box model based on the [CSS box model](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_mode), 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.
+
+::: warning
+Weex only supports `box-sizing:border-box`, in which box size includes `content`, `padding` and `border-width` and excludes `margin`
+:::
+
+::: warning
+Weex only supports `overflow:hidden`.
+:::
+
+The following code snippets shows the basic usage of box model
+
+```html
+<template>
+ <div>
+ <image src="..." style="width: 400; height: 200; margin-left: 20;"></image>
+ </div>
+</template>
+```
+
+### width
+`width`: `length` type, default value `auto`
+
+### height
+`height`: `length` type, default value `auto`
+
+### padding
+`padding` specifies the space between element content and the element border. One can use shorthand for four edges or specify the padding for one edge:
+ * `padding: {length}`: padding for four edges, default value `0`,
+ * `padding-left {length}`: default value `0`
+ * `padding-right {length}`: default value `0`
+ * `padding-top {length}`: default value `0`
+ * `padding-bottom {length}`: default value `0`
+
+### border
+::: warning Only for Android
+It may cause crash with exception **Unable to create layer for xxx** if the length of border exceeds the maximum as your component makes the OpenGL memory zone OutOfMemory.
+
+The maximum of the border length is device dependent, but you are in the danger zone if the length of your border is longer than the screen height.
+:::
+#### border-style
+The `border-style` CSS property is a shorthand property that sets the line style for all four sides of an element's border. One can use shorthand for four edges or specify the style for one edge:
+ * `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
+The border-width shorthand CSS property sets the widths of all four sides of an element's border. One can use shorthand for four edges or specify the width for one edge:
+ * `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
+The border-color shorthand CSS property sets the color of all sides of an element's border. One can use shorthand for four edges or specify the color for one edge:
+ * `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
+`border-radius` property rounds the corners of an element's outer border edge. One can use shorthand for four corners or specify the radius for one corner:
+ * `border-radius`: `length` type, default value `0` which means the corner is a 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`
+
+::: danger
+`border-radius` defines the radius of a quarter ellipse that defines the shape of the corner of the outer border edge by definition, but weex may not render as expected if you need a smooth transition between different `border-radius` or `border-width` on adjoining sides.
+:::
+
+::: danger Only for Android
+Although `overflow:hidden` is default on android, a view **will not** clip its children according to `border-radius` unless all the following conditions meet.
+ * The view type is `div`, `a`, `cell`, `refresh` or `loading`.
+ * OS version is Android 4.3 or higher.
+ * OS version is **not** Android 7.0
+ * A view **does not** have `background-image` property nor OS version is Android 5.0 or higher.
+:::
+
+### margin
+`margin` specifies the space around elements which is outside the border. One can use shorthand for four edges or specify the margin for one edge:
+ * `margin: {length}`: margin for four edges, default value `0`,
+ * `margin-left {length}`: margin for left edge, default value `0`
+ * `margin-right {length}`: margin for left edge, default value `0`
+ * `margin-top {length}`: margin for left edge, default value `0`
+ * `margin-bottom {length}`: margin for bottom edge, default value `0`
+
+## 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.
+
+::: warning
+Only styles listed below is supported, other style like `order` and `flex-flow` are not supported.
+:::
+
+### Flex container
+Flexbox is the default and only style model in Weex, so you don't have to add `display: flex;` in a container.
+
+#### direction
+The `direction` CSS property sets the direction of text, flex-container. The default value is `lrt`
+* `ltr`: Text and other elements go from left to right. This is the default value.
+* `rtl`: Text and other elements go from right to left.
+
+:::tip
+Thought `direction` is not part of flexbox but have huge impact on flexbox.
+:::
+
+#### flex-direction
+The `flex-direction` CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
+* `row`: The flex container's main-axis is horizontal and defined to be the same as `direction`. The **main-start** and **main-end** points are the same as the `direction`.
+* `row-reverse`: Behaves the same as `row` but the **main-start** and **main-end** points are permuted
+* `vertical`: The flex container's main-axis is vertical. The **main-start** and **main-end** points is top and bottom.
+* `column-reverse`: Behaves the same as column but the **main-start** and **main-end** are permuted.
+
+#### flex-wrap
+The `flex-wrap` CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. The default value is `nowrap`
+
+* `nowrap`:The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending flex-direction value. This is the default value.
+* `wrap`:The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start.
+* `wrap-reverse`:Behaves the same as wrap but cross-start and cross-end are permuted.
+
+#### justify-content
+The CSS `justify-content` property defines how Weex distributes space between and around content items along the main-axis of a flex container. The default value is `flex-start`.
+
+* `flex-start`: The items are packed flush to each other toward the edge of the alignment container depending on the flex container's **main-start** side.
+* `flex-end`:The items are packed flush to each other toward the edge of the alignment container depending on the flex container's **main-end** side.
+* `center`:The items are packed flush to each other toward the center of the alignment container along the main axis.
+* `space-between`: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the **main-start** edge, and the last item is flush with the **main-end** edge.
+
+ <div style="width: 400px; margin: 20px 0;">
+ <img width="400px" src="https://img.alicdn.com/tfs/TB1fQRmohnaK1RjSZFBXXcW7VXa-504-270.svg" />
+ </div>
+
+#### align-items
+The CSS align-items property sets the align-self value on all direct children as a group. It controls the alignment of items on the cross Axis. The default value is `stretch`.
+
+* `stretch`: Flex items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints.
+* `flex-start`: The cross-start margin edges of the flex items are flushed with the cross-start edge of the line.
+* `flex-end`: The cross-end margin edges of the flex items are flushed with the cross-end edge of the line.
+* `center`: The flex items' margin boxes are centered within the line on the cross-axis.
+- `align-items`: values `stretch` | `flex-start` | `center` | `flex-end`, default value `stretch`
+
+ <div style="width: 400px; margin: 20px 0;">
+ <img width="400px" src="https://img.alicdn.com/tfs/TB1AM8oohnaK1RjSZFtXXbC2VXa-1018-502.jpg" />
+ </div>
+
+### Flex item
+#### flex
+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.
+
+The following code snippet show three `div` with the same `height`
+
+```html
+ <div style="width:300px; height:100px;">
+ <div style="flex: 1;background-color:blue"></div>
+ <div style="flex: 1;background-color:red"></div>
+ <div style="flex: 1;background-color:yellow"></div>
+ </div>
+```
+
+* `flex`: `number` type, default value `0`
+
+### Examples
+
+* [Vertical and horizontal alignment](http://dotwe.org/vue/505b5e8bdb6774bccb597a30f74492af)
+* [Grid layout](http://dotwe.org/vue/4e1dcb58b31c266c4979fcbed04bb25b)
+* [The same height div](http://dotwe.org/vue/5aa2fa9a1ed5ea250e553683ca710f7a)
+
+## 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
+
+:::warning Only for Android
+If your `component` is bigger than its parent, it will be **partial** invisible as Weex on Android only supports `overflow:hidden`.
+
+Ref the [demo](http://dotwe.org/vue/cb3436ea65283d2ab456641ba30133a4) to see more detail.
+:::
+
+### 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
+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.
+
+:::warning
+Supported for v0.17.0 and higher.
+:::
+
+::: warning Only for Android
+It may cause crash with exception **Unable to create layer for xxx** if the size ( *width or height* ) of your component with `transition-property` exceeds the maximum as your component makes the OpenGL memory zone OutOfMemory.
+
+The maximum of the size for your component is device dependent, but you are in the danger zone if the size is bigger than screen's size.
+:::
+
+### 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
+::: warning Only for Android
+It may cause crash with exception **Unable to create layer for xxx** if the size ( *width or height* ) of your component with `transform` exceeds the maximum as your component makes the OpenGL memory zone OutOfMemory.
+
+The maximum of the size for your component is device dependent, but you are in the danger zone if the size is bigger than screen's size.
+:::
+
+:::tip
+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( {<length/percentage>} [, {<length/percentage>}]?)
+* translateX( {<length/percentage>})
+* translateY( {<length/percentage>})
+* scale: `number`
+* scaleX: `number`
+* scaleY: `number`
+* rotate: `degree`
+* rotateX: `degree` **v0.14+**
+* rotateY: `degree` **v0.14+**
+* perspective: `number`, supported for Android 4.1 and above. **v0.16+**
+* 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).
+
+::: warning Only for Android
+It may cause crash with exception **Unable to create layer for xxx** if the size ( *width or height* ) of your component with `background-image: linear-gradient` exceeds the maximum as your component makes the OpenGL memory zone OutOfMemory.
+
+The maximum of the size for your component is device dependent, but you are in the danger zone if the size is bigger than screen's size.
+:::
+
+### 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`
+
+
+:::danger
+box-shadow takes effect on Android
+:::
+
+### 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 {number}`:Set the transparency of an element or the degree to which content behind an element is visible. The {number} range is **0** to **1**, **0** for fully transparent and **1** for fully opaque.
+* `background-color {color}`: Set the background color of an element. The following color format is supported.
+ * RGB, e.g. `rgb(250, 0, 0)`
+ * RGBA, e.g. `rgba(255, 0, 0, 0.5)`
+ * Hexadecimal color e.g. `#ff0000` or `#f00`
+ * Keywords, include [basic keywords](https://drafts.csswg.org/css-color-3/#html4) and [extends keywords](https://drafts.csswg.org/css-color-3/#svg-color)
+
+::: warning Only for Android
+It may cause crash with exception **Unable to create layer for xxx** if the size ( *width or height* ) of your component with `background-color` exceeds the maximum as your component makes the OpenGL memory zone OutOfMemory.
+
+The maximum of the size for your component is device dependent, but you are in the danger zone if the size is bigger than screen's size.
+:::
+
+## 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
\ No newline at end of file
diff --git a/docs/docs/styles/css-units.md b/docs/docs/styles/css-units.md
new file mode 100644
index 0000000..3b37b34
--- /dev/null
+++ b/docs/docs/styles/css-units.md
@@ -0,0 +1,220 @@
+# CSS Unit
+
+## CSS `length` unit
+
+`px` is the only supported length units.
+
+::: danger
+Ignoring `px` will cause render error on Webview.
+:::
+
+::: warning
+`em`、`rem`、`pt`, `%`, etc. are not supported.
+:::
+
+## CSS `number` units
+
+CSS `number` unit is a pure number without `px`, styles like `opacity`，`lines`，`flex` only accept `number` unit, you can find detail in [common-style](./common-styles.html).
+
+::: tip
+Some style only accepts integer value, such as `lines`.
+:::
+
+## CSS `color` unit
+The supported color format is listed below:
+ * RGB, e.g. `rgb(250, 0, 0)`
+ * RGBA, e.g. `rgba(255, 0, 0, 0.5)`
+ * Hexadecimal color e.g. `#ff0000` or `#f00`
+ * Color keywords
+
+```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;
+}
+```
+
+::: warning
+* Only the color format listed above is supported, others are not.
+* `6-chars hex` format is the most efficient way. Use it unless you have a special reason.
+:::
+
+### CSS color keywords
+
+| 颜色名 | 十六进制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 |
+| 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 |
\ No newline at end of file
diff --git a/docs/docs/styles/text-styles.md b/docs/docs/styles/text-styles.md
new file mode 100644
index 0000000..16a773c
--- /dev/null
+++ b/docs/docs/styles/text-styles.md
@@ -0,0 +1,56 @@
+# Text Styles
+
+Text alike components share some common style rules. The text alike components currently includes [`text`](../components/text.html)、[`input`](../components/input.html) and [`richtext`](../components/richtext.html)
+
+## Reference
+### color
+`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
+`font-size`: <length> this property specifies the size of the font.
+
+### font-style
+`font-style`: <enum> `normal` | `italic`. This property lets you select italic or normal faces within a font-family. Default value is `normal`.
+
+### font-weight
+This property indicate the weight of the text.
+ * 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
+`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`.
+
+::: warning
+Only support for `<text>` and `<ricthext>`
+:::
+
+### text-align
+`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
+`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 [dom.addRule](../modules/dom.html) instead.
+
+### text-overflow
+`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.
+
+::: warning
+Only support for `<text>` and `<ricthext>`
+:::
+
+### lines
+`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
+`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.
diff --git a/docs/guide/README.md b/docs/guide/README.md
new file mode 100644
index 0000000..aa6492e
--- /dev/null
+++ b/docs/guide/README.md
@@ -0,0 +1,7 @@
+<script>
+module.exports = {
+ created(){
+ this.$router.push('/guide/introduction.html')
+ }
+}
+</script>
diff --git a/docs/guide/advanced/asset-path.md b/docs/guide/advanced/asset-path.md
new file mode 100644
index 0000000..329ba38
--- /dev/null
+++ b/docs/guide/advanced/asset-path.md
@@ -0,0 +1,40 @@
+---
+title: Asset Path
+type: guide
+group: Advanced Guide
+order: 8.1
+version: 2.1
+has_chapter_content: true
+---
+
+<!-- toc -->
+
+
+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.
+
+### remote
+
+* `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/docs/guide/advanced/downgrade.md b/docs/guide/advanced/downgrade.md
new file mode 100644
index 0000000..efd5ac5
--- /dev/null
+++ b/docs/guide/advanced/downgrade.md
@@ -0,0 +1,160 @@
+# Downgrade
+
+"Downgrade" means to rendering Weex's pages as the normal web page.
+
+Weex supports cross-platform (Android, iOS, Web), with different SDK but same APIs, under the hood, it's using platform capability to render pages. However with the iteration of the platforms and app, version fragmentation problem is inevitable. If you are using the feature which only supported in a higher version, you can let your page "downgrade" at the lower versions (The web renderer of Weex, or the "WebSDK", is implemented in Javascript, so it can be updated dynamically).
+
+> “Downgrade” is not a technical limitation, but it's useful to handle real world problems.
+
+## Emit Downgrade
+
+In Weex, the "downgrade" behavior is emitted at the front-end and is implemented by the native. The trigger of it is by calling the `error` method of the `instanceWrap` module.
+
+```js
+const instanceWrap = weex.requireModule('instanceWrap')
+instanceWrap.error(errorType, errorCode, message)
+```
+
+The `instanceWrap` only contains one API which is `error`, the arguments of it will be used to differentiate the type and reason of the downgrade behavior, they are not restrictions but conventions.
+
+* `errorType`: `Number` Error type, usually be `1` when it was emitted at front-end.
+* `errorCode`: `Number` Error code, the meaning are as follows:
+ * `1001`: The version of os (Android or iOS) is not satisfied.
+ * `1002`: The version of app is not satisfied.
+ * `1003`: The version of WeexSDK is not satisfied.
+ * `1004`: The device mode is not satisfied.
+* `message`: `String` Error message.
+
+> Calling the API anywhere in the page will trigger the downgrade immediately. It a common way to determine whether to downgrade at the beginning of the page by checking if environment meets the requirements.
+
+## Useful Tools
+
+### Npm module
+
+* npm module: [https://www.npmjs.com/package/@weex-project/downgrade](https://www.npmjs.com/package/@weex-project/downgrade)
+* source code: [https://github.com/weexteam/downgrade](https://github.com/weexteam/downgrade)
+
+First install the `@weex-project/downgrade` package, the import it to your code.
+
+```js
+import downgrade from '@weex-project/downgrade'
+```
+
+The APIs of this package are as follows:
+
+#### `force()`
+
+Force downgrade. Will downgrade immediately once you call this API.
+
+```js
+downgrade.force()
+```
+
+#### `check(options)`
+
+Check if the environment satisfies the `options`, return the diagnose result, and **will not emit downgrade.**
+
+The format of `options` will be explained later, the return value is as follow:
+
+* `isDowngrade`: Should downgrade or not. (It's `true` of the environment not satisfies the `options`)
+* `errorType`: Error type, only exist when `isDowngrade` is `true`.
+* `code`: Error code, only exist when `isDowngrade` is `true`.
+
+```js
+const result = downgrade.check({ ios: { osVersion: '<=9.0' } })
+if (!result.isDowngrade) {
+ // Do something
+}
+```
+
+#### `condition(options)`
+
+**Emit downgrade** when the environment is not satisfies the `options`.
+
+```js
+downgrade.condition({
+ android: {
+ appVersion: '<=7.8.0',
+ weexVersion: '<0.16.0'
+ }
+})
+```
+
+### Webpack Plugin
+
+Weex provides a Webpack plugin [`webpack-plugin-downgrade`](https://www.npmjs.com/package/webpack-plugin-downgrade) to inject downgrade codes to the generated file.
+
+```js
+// webpack.config.js
+var DowngradePlugin = require('webpack-plugin-downgrade')
+
+module.exports = {
+ // other configs ...
+
+ plugins: [
+ new DowngradePlugin({ /* downgrade options */ })
+ ]
+}
+```
+
+Supported options as as follows:
+
+* `force`: `Boolean` Whether to force downgrade.
+* `condition`: `Object` The condition to emit downgrade.
+
+```js
+// Force downgrade
+new DowngradePlugin({ force: true })
+
+// Downgrade if the environment satisfies the condition
+new DowngradePlugin({
+ condition: {
+ ios: {
+ deviceModel: ['iPhone5,1']
+ },
+ android: {
+ osVersion: '<=4.4',
+ weexVersion: '<0.16.0'
+ }
+ }
+})
+```
+
+## Downgrade Options
+
+The downgrade configuration is a plain object which contains `ios` and `android` options, the config properties within them are the same. The page will be downgrade once any of the option is satisfied.
+
+| Option | Data Format | Note |
+| --- | ------- | --- |
+| `osVersion` | Semantic Version | Version range of mobile OS (Android or iOS). |
+| `appVersion` | Semantic Version | Version range of App. |
+| `weexVersion` | Semantic Version | Version range of Weex SDK. |
+| `deviceModel` | String Array | Device model list. |
+
+```js
+const options = {
+ android: {
+ // Downgrade if Android version is lower than 4.5
+ osVersion: '<4.5',
+
+ // Only downgrade in the v8.1.10 of App
+ appVersion: '8.1.10'
+ },
+
+ ios: {
+ // Downgrade in WeexSDK v0.18.2 or lower
+ weexVersion: '<=0.18.2',
+
+ // Downgrade in iPhone 5 or iPhone 5s
+ deviceModel: [ 'iPhone5,1', 'iPhone6,1' ]
+ }
+}
+```
+
+### Semantic Version
+
+In the npm package and Webpack plugin, they are using a simple version of [Semantic Versioning](https://semver.org/) to verify the version number, but **only supports `>`, `<`, `=`, `>=`, `<=` those five compare operator**
+
+### Device Model
+
+The device mode string in defined by mobile device manufacturer.
diff --git a/docs/guide/advanced/use-vuex-and-vue-router.md b/docs/guide/advanced/use-vuex-and-vue-router.md
new file mode 100644
index 0000000..a60aa6f
--- /dev/null
+++ b/docs/guide/advanced/use-vuex-and-vue-router.md
@@ -0,0 +1,82 @@
+# Use Vuex and vue-router
+
+[[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/docs/guide/contribute/bug-report-guidelines.md b/docs/guide/contribute/bug-report-guidelines.md
new file mode 100644
index 0000000..e51a7a2
--- /dev/null
+++ b/docs/guide/contribute/bug-report-guidelines.md
@@ -0,0 +1,23 @@
+# Bug Report
+
+Weex Community [Github Issue](https://github.com/apache/incubator-weex/issues) to report and track bugs 。The more information provided in a Github issue, the sooner it get solved.
+
+::: tip
+* Avoid duplicated: Always search on Github before you fire a new one.
+* Always run with the latest version before you fire a bug
+* Only report one bug in one Github Issue.
+:::
+
+## Format of Github issue
+Please use the [Bug Report](https://github.com/apache/incubator-weex/issues/new?template=bug_report.md) template when firing a bug. All the information needed to solve a bug is listed in the Bug report template , please fill it out as much as you can. **The more information provided in a Github issue, the sooner it get solved.**
+
+::: warning
+Report bug with fact and expected behavior, not complaint or emotional words.
+:::
+
+## 96 Hours rule
+Generally speaking, weex community response to a Github issue within 96 hours, which could be longer if there is a holiday. Please be patient.
+
+::: tip
+If your Github issue doesn't get any response over a week, you can ask developers through [weex mailing list](./how-to-contribute.html#join-in-discussions).
+:::
\ No newline at end of file
diff --git a/docs/guide/contribute/contribute-code.md b/docs/guide/contribute/contribute-code.md
new file mode 100644
index 0000000..452730e
--- /dev/null
+++ b/docs/guide/contribute/contribute-code.md
@@ -0,0 +1,84 @@
+# Contribute Code
+
+This page describes the standard procedure to modify code of weex.
+## Before Coding
+### Check License
+Weex adopts [Apache License 2.0](https://choosealicense.com/licenses/apache-2.0/) as its open source license. Make sure your potential contribution obeys the requirement of Apache License 2.0.
+
+### Bug or Feature ?
+* If you are going to fix a bug of Weex, check whether it already exists in [Github Issue](https://github.com/apache/incubator-weex/issues). If it exists, make sure to write down the link to the corresponding Github issue in the PR you are going to create.
+* If you are going to add a feature for weex, reference the following recommend procedure:
+ 1. Writing a email to [mailing list](how-to-contribute.html#mailing-list) to talk about what you'd like to do.
+ 1. Write the corresponding [document](how-to-contribute.html#contribute-code-or-document)
+
+
+## Coding
+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).
+
+1. Clone the forked repository and create a new branch from `master` to push your commits to.
+
+1. Develop your feature or bug fix in your new branch. Make sure your code meets the [style guidelines](contribute-code.html#code-style-guidelines).
+
+1. Add the **License** below to the top of any new file(s) you've added.
+
+ /*
+ * 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.
+ */
+
+1. Commit all the changes to your branch.
+
+:::tip
+If you are writing Java or C++ with Android Studio, **License** will be added to the head of the file automatically.
+:::
+
+### 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.
+
+#### C & C++
+
+- Use [Google C++ Style ](https://google.github.io/styleguide/cppguide.html) as basic guidelines of C++ code
+- Weex defines [a subset of the Google C++ development specification](https://github.com/jianhan-he/C-Style-Guide/blob/master/C%2B%2B_Style_Guide_en.md) that covers some of the major C++ scenario usage specifications.
+
+## Publish your Change
+[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. One PR should solve only one problem.
+1. The PR title should be the form of `[COMPONENT] Summary`:
+ * `COMPONENT` is one of the mentioned PR categories (android, iOS, JsFm, web, test, etc..).
+ * `Summary` should be a brief description of your change within one sentence.
+1. Content description of PR
+ * If the PR is about fixing a bug *excluding crash*, a [demo](http://dotwe.org/vue) is necessary in code's description.
+ * If the PR is about adding a new feature, another [PR for documentation](how-to-contribute.html#contribute-code-or-document) is necessary in codes' PR description.
+ * *Optional* If the PR fixes an existing Github issue, you may add the link to the corresponding issue in the PR.
+
+:::tip
+Reviewing PR may take a great deal of time, please be patient. If your PR doesn't get response over 96 hours, you might send an email to [mailing list](how-to-contribute.html#mailing-list) to ask the progress.
+:::
\ No newline at end of file
diff --git a/docs/guide/contribute/how-to-contribute.md b/docs/guide/contribute/how-to-contribute.md
new file mode 100644
index 0000000..871790e
--- /dev/null
+++ b/docs/guide/contribute/how-to-contribute.md
@@ -0,0 +1,57 @@
+# Join Weex community
+
+> Community over code
+
+Weex project belongs to Apache Software Foundation and Weex community respects and fulfills the Apache rule, which is **Community over code** .
+
+## Code of Conduct
+
+To make an open and friendly community, Weex community adopt [Contributor Covenant](https://www.contributor-covenant.org/version/1/4/code-of-conduct) as the code of conduct.
+
+## Mailing List
+> If it didn't happen on a mailing list, it didn't happen.
+
+**Subscribing mailing list of weex is necessary to join weex community.**
+
+In Weex community, feature requests, discussions and decisions happen on the mailing list, which is open to the whole world.
+
+`dev@weex.incubator.apache.org` is the mailing list's address. Developers can subscribe this list to know what is happening in weex community and express his/her idea.If you want to subscribe the mailing list, please send an email to [dev-subscribe@weex.incubator.apache.org](mailto:dev-subscribe@weex.incubator.apache.org?subject=%28send%20this%20email%20to%20subscribe%29), shortly afterwards you will receive a confirmation email. Once you reply the confirmation email, the subscription is done.
+
+If you want to unsubscribe, please send an email to [dev-unsubscribe@weex.incubator.apache.org](mailto:dev-unsubscribe@weex.incubator.apache.org?subject=%28send%20this%20email%20to%20unsubscribe%29)
+
+Read [Apache mailing list](https://apache.org/foundation/mailinglists.html) to have a deeper view of mailing list.
+
+
+## Ask or Answer Questions
+* You ask questions on [stackoverflow.com](http://stackoverflow.com/questions/tagged/weex) for basic use problems and concepts.
+* You can report a bug through Github Issue as mention in [bug report](./bug-report-guidelines.html).
+
+:::tip
+Formally speaking, StackOverflow is not part of Weex community though developers around the world continually contribute to it. If your question on StackOverflow doesn't get response within 96 hours, you can fire a [Github Issue](https://github.com/apache/incubator-weex/issues) with link to your question on StackOverflow.
+:::
+
+:::warning
+Only the following types of issues are valid Github issues, for other problem, ask it in the mailing list.
+* Bug
+* StackOverflow questions, which doesn't get response over 96 hours.
+:::
+
+## Contribute Code or document
+In Weex community, **Documentation is as important as code**, and Weex community respects all the contribution of documentation or code.
+
+:::tip
+Weex adopts [Apache License 2.0](https://choosealicense.com/licenses/apache-2.0/) as its open source license. Make sure your contribution obeys the requirement of Apache License 2.0.
+:::
+
+### 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.
+
+You can contribute to a document through the following ways:
+* Click **Edit this page** on the bottom of website, and you will be navigated to a new Github PR.
+
+:::tip
+PR about documentation should be fired based on **draft** branch currently, which will be merged master branch automatically later when all things are settled.
+:::
+
+### Contribute code
+You can fix a bug or develop a new feature when contributing code, ref [Contribution of Code](./contribute-code.html) to see more detail.
diff --git a/docs/guide/debug/debug.md b/docs/guide/debug/debug.md
new file mode 100644
index 0000000..b3e86a9
--- /dev/null
+++ b/docs/guide/debug/debug.md
@@ -0,0 +1,86 @@
+# Debug
+
+This document focuses on how to use the debugging tools built into `weex-toolkit` for code debugging.
+
+## Installation
+
+First you need to install the `weex-toolkit` tool via `npm` or `yarn`
+
+```
+$ npm i weex-toolkit@beta -g
+$ weex -v // check if the installation is successful
+```
+## Run
+
+After the installation is complete, run the `weex debug` command to start the debug console. After running, the program will automatically open the following interface:
+
+
+
+If you have a page that needs to be compiled, you can also compile it with the `weex debug [ folder | file ]` command. If you run `weex debug src`, the compiled page will be displayed under the `page` tab. Shown as follows:
+
+
+
+## Start debugging
+
+::: tip
+
+Before debugging, please make sure that the mobile phone with the debugging application is on the same LAN as the PC, and disable the proxy settings such as VPN. Otherwise, the debugging will not be performed normally. At the same time, when using the function, try to ensure that other functions are disabled. If you use the `JS Debug` function to turn off the `Network` function, you will have a better development experience.
+
+:::
+
+Debugging requires the use of an integrated Weex debugging tool for code scanning and debugging. For related documents, please refer to:
+
+[1] [Android Weex Detool Integration Document](./integrate-devtool-to-android.html).
+</br>
+[2] [iOS Weex Detool integration documentation](./integrate-devtool-to-ios.html).
+
+You can also use the Playground App provided by Weex to debug your code. For the download address, see [Weex Playground](http://weex.apache.org/tools/playground.html).
+
+Go back to the debug QR code page and use the scan code function of the application to scan the code to enter the debug console, as shown in the figure:
+
+
+
+The first time you enter the debugging interface, there will be a prompt interface to guide you to understand the related functions that will be used during debugging. For developers who use the debugging tool for the first time, it is recommended to read all the prompts completely.
+
+### JS debug
+
+Open the `JS Debug` function to enter the Weex code debugging mode as shown, you can find the source code on the `Source` panel:
+
+
+
+### Loglevel
+
+Filter and filter the logs through the console and `LogLevel` options, and keep the log content you are concerned with, as shown in the figure:
+
+
+
+### Network
+
+Open the 'Network' function to view the application's network request information and perform an effective analysis of the page request, as shown in the figure:
+
+
+### Element
+
+::: tip
+In the node review mode, a large amount of page information will be sent. By default, it is enabled. In the case of complicated pages, we generally recommend resetting the station by click this button ![Preview] (https://img.alicdn.com/tfs/TB1S4RVJkvoK1RjSZFwXXciCFXa-30-24.png), otherwise it may affect the speed of JS debugging related functions.
+:::
+
+You can switch the display of the current view by selecting the `ElementMode` option. You can analyze the view level of the page as shown in the figure:
+
+
+
+### Extension
+
+The following extension functions need to be enabled in the `JS Debug` function and are available on the Weex page
+
+#### Quick navigation
+
+
+
+#### File Replacement
+
+Click the `Environment Settings` menu at the top of the console to modify and replace the dependent files running on the weex page. After the modification is completed, click `Generate File` -> `Change Setting` to replace the running environment.
+
+
+
+If you have any problems during the use, you can submit the relevant issue to us on [here](https://github.com/weexteam/weex-toolkit/issues/new?labels=@weex-cli/debug), also you can search for the known issues [here](https://github.com/weexteam/weex-toolkit/labels/%40weex-cli%2Fdebug).
diff --git a/docs/guide/debug/integrate-devtool-to-android.md b/docs/guide/debug/integrate-devtool-to-android.md
new file mode 100644
index 0000000..b2ab97f
--- /dev/null
+++ b/docs/guide/debug/integrate-devtool-to-android.md
@@ -0,0 +1,131 @@
+---
+title: Integrate Devtool to Android
+type: guide
+group: debug
+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 |
+|----------|----------------|
+| 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 |
+| 0.20.3.0-beta | 0.20.3.0-beta |
+
+## 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/docs/guide/debug/integrate-devtool-to-ios.md b/docs/guide/debug/integrate-devtool-to-ios.md
new file mode 100644
index 0000000..480bd77
--- /dev/null
+++ b/docs/guide/debug/integrate-devtool-to-ios.md
@@ -0,0 +1,177 @@
+# Integrate Devtool to iOS
+
+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
+
+
+#### Version compatibility
+
+| weex sdk | weex inspector |
+|----------|----------------|
+| 0.16.0+ | 0.15.3 |
+| 0.17.0+ | 0.16.0 |
+| 0.18.0+ | 0.16.3+ |
+| 0.19.0+ | 0.17.2+ |
+| 0.20.0+ | 0.20.0+ |
+
+
+## Integrate to iOS
+
+### Installing Dependencies
+
+There are two choices to install dependencies:
+
+#### 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.
+
+#### 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 JSDebug 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)
\ No newline at end of file
diff --git a/docs/guide/develop/create-a-new-app.md b/docs/guide/develop/create-a-new-app.md
new file mode 100644
index 0000000..acc013b
--- /dev/null
+++ b/docs/guide/develop/create-a-new-app.md
@@ -0,0 +1,69 @@
+# Create Your Own App
+
+> The following steps assume basic knowledge of Node.js and npm. If you are not familiar with them, 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 start easily. The CLI can help you create a starter project, setup iOS and Android development environments, debug, install plugins, and so on.
+
+Currently, the `weex-toolkit` only supports the creation of Vue.js project. 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.
+
+## Set up
+
+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 `src/` folder. 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 the mobile device.
+
+## Build and Run
+
+By default, the `weex create` command doesn't create the iOS and Android project, but you can use `weex platform add` to add them.
+
+```bash
+weex platform add ios
+weex platform add 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 the device.
+
+```bash
+weex run ios
+weex run android
+weex run web
+```
+
+## Debug
+
+The `weex-toolkit` can also be used to debug your mobile apps. Just run:
+
+```bash
+weex debug
+```
+
+`weex debug` will start a debug server and open a web page in Chrome (only support V8 engine). For more technical details of `weex-toolkit`, please refer to the [toolkit document](../../tools/toolkit.html).
\ No newline at end of file
diff --git a/docs/guide/develop/integrate-to-android-app.md b/docs/guide/develop/integrate-to-android-app.md
new file mode 100644
index 0000000..f5a7281
--- /dev/null
+++ b/docs/guide/develop/integrate-to-android-app.md
@@ -0,0 +1,162 @@
+---
+title: Integrate to Your App
+type: guide
+group: Overview
+order: 1.3
+version: 2.1
+---
+
+<!-- toc -->
+
+# Integrate to Android App
+::: warning
+Considering the package size, Android x86 is not supported for the moment.
+:::
+
+The following documents assume that you already have a certain Android development experience.
+
+- [JAVA Environment, jdk7+](https://www.oracle.com/technetwork/java/javase/downloads/index.html)
+- [Android Studio](https://developer.android.com/training/basics/firstapp/)
+- [NDK r16](https://developer.android.com/ndk/)、[Cmake 3.9.0+](https://cmake.org/download/) (option: if you need compile the source ,ndk and cmake are required)
+
+
+## 1. Configure dependency
+
+edit `build.gradle`
+
+```javascript
+dependencies {
+ ...
+ // weex sdk and fastjson
+ compile 'com.taobao.android:weex_sdk:0.20.0.2@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. Configure proguard
+
+proguard rules are as follows,recommended reference to [__the latest source configuration__](https://github.com/apache/incubator-weex/blob/master/android/sdk/proguard-rules.pro)
+
+```
+-keep class com.taobao.weex.bridge.** { *; }
+-keep class com.taobao.weex.layout.** { *; }
+-keep class com.taobao.weex.WXSDKEngine { *; }
+-keep class com.taobao.weex.base.SystemMessageHandler { *; }
+-dontwarn com.taobao.weex.bridge.**
+```
+
+## 3. Add permissions
+
+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"/>
+```
+
+## 4. Init Weex SDK
+
+Init Weex SDK When Application Create
+
+```java
+InitConfig config = new InitConfig.Builder()
+ //imageLib interface
+ .setImgAdapter(new FrescoImageAdapter())
+ //network lib interface
+ .setHttpAdapter(new InterceptWXHttpAdapter())
+ .build();
+WXSDKEngine.initialize(applicationContext,config);
+```
+
+- [demo init case](https://github.com/apache/incubator-weex/blob/master/android/playground/app/src/main/java/com/alibaba/weex/WXApplication.java)
+- [extend-android doc](/guide/extend/extend-android.html)
+
+
+## 5. Create an WXSDKInstance
+
+- 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();
+ }
+ }
+}
+```
+
+## 6. Run
+
+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.
+
+## 7. Extend-Android
+
+Weex supports module-extend、component-extend and adapter-extend
+
+[Extend Android Doc](/guide/extend/extend-android.html)
+
+
diff --git a/docs/guide/develop/integrate-to-iOS-app.md b/docs/guide/develop/integrate-to-iOS-app.md
new file mode 100644
index 0000000..10d683b
--- /dev/null
+++ b/docs/guide/develop/integrate-to-iOS-app.md
@@ -0,0 +1,123 @@
+---
+title: Integrate to Your App
+type: guide
+group: Overview
+order: 1.3
+version: 2.1
+---
+
+<!-- toc -->
+
+# Integrate Weex to iOS App
+
+You may integrate Weex to your iOS app through the [CocoaPods](https://cocoapods.org/) or [Carthage](https://github.com/Carthage/Carthage). We assume that you have already installed the Xcode and CocoaPods or Carthage.
+
+## 1. Configure dependency
+
+### Using CocoaPods
+
+The latest WeexSDK version on iOS could be obtained from [here](https://cocoapods.org/pods/WeexSDK).
+
+Add WeexSDK to your Podfile.
+
+```ruby
+source 'git@github.com:CocoaPods/Specs.git'
+target 'YourTarget' do
+ platform :ios, '8.0'
+ pod 'WeexSDK', '0.20.1'
+end
+```
+
+Then run `pod install` command in your project directory.
+
+### Using Carthage
+
+Create a Cartfile in your project directory. [Carthage Manual](https://github.com/Carthage/Carthage#adding-frameworks-to-an-application)
+
+Add `github "apache/incubator-weex"` to [`Cartfile`](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile)
+
+Run `carthage update` in your project directory.
+
+## 2. Initialize Weex
+
+We recommend initializing Weex in `didFinishLaunchingWithOptions` callback of your App delegate.
+
+```Objective-C
+// App configuration
+[WXAppConfiguration setAppGroup:@"Your app group"];
+[WXAppConfiguration setAppName:@"Your app name"];
+[WXAppConfiguration setAppVersion:@"Your app version"];
+
+//Initialize WeexSDK
+[WXSDKEngine initSDKEnvironment];
+
+//Register custom modules and components, optional.
+[WXSDKEngine registerComponent:@"myview" withClass:[MyViewComponent class]];
+[WXSDKEngine registerModule:@"mymodule" withClass:[MyWeexModule class]];
+
+//Register the implementation of protocol, optional.
+[WXSDKEngine registerHandler:[WXAppNavigationImpl new] withProtocol:@protocol(WXNavigationProtocol)];
+
+//Set the log level, optional
+[WXLog setLogLevel: WXLogLevelWarning];
+```
+
+## 3. Create a Weex instance
+
+You can render a Weex instance in full page or in a view. All you need to do is to create a Weex instance and set callbacks of it, then provide it with a valid URL. In the `onCreate` callback, add the root view to your desired parent view and set the view frame using `instance.frame = `.
+
+```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:view];
+ };
+ _instance.onFailed = ^(NSError *error) {
+ //process failure, you could open an h5 web page instead or just show the error.
+ };
+ _instance.renderFinish = ^ (UIView *view) {
+ //process renderFinish
+ };
+ NSURL *url = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"js"];
+ [_instance renderWithURL:url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
+}
+```
+
+## 4. Destroy the instance
+
+You should destroy the Weex instance explicitly using `[instance destroyInstance]`.
+
+## 5. Extend Weex
+
+You can extend Weex functionality by writing your own components, modules. For more details please refer to [Extend iOS](../extend/extend-ios.html) and [Extend iOS with swift](../extend/extend-ios-with-swift.html).
+
+## 6. Using Weex on iPad
+
+When a page finishes rendering, then the screen rotates, the page will not adjust automatically.
+So if your App allows screen orientation changing, you must update screen-width before rendering.
+
+CSS styles will be converted using **screen-width** and **view-port-width of a page**.
+
+view-port-width is 750px by default.
+```javascript
+beforeCreate(){
+ const meta = weex.requireModule('meta');
+ meta.setViewport({
+ width: 1536
+ });
+}
+```
+
+Observe UIDeviceOrientationDidChangeNotification notification and update screen size. We presume that screen rotation is done and [UIScreen mainScreen].bounds.size.width gives the current screen width.
+```Objective-C
+[WXCoreBridge setDeviceSize:[UIScreen mainScreen].bounds.size];
+```
diff --git a/docs/guide/develop/integrate-to-your-app.md b/docs/guide/develop/integrate-to-your-app.md
new file mode 100644
index 0000000..580953a
--- /dev/null
+++ b/docs/guide/develop/integrate-to-your-app.md
@@ -0,0 +1,254 @@
+---
+title: Integrate to Your App
+type: guide
+group: Overview
+order: 1.3
+version: 2.1
+---
+
+<!-- toc -->
+
+# Integrate to Your App
+> Weex Release Note: https://github.com/apache/incubator-weex/releases
+
+## Integrate to Android
+
+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
+InitConfig config = new InitConfig.Builder()
+ //imageLib interface
+ .setImgAdapter(new FrescoImageAdapter())
+ //network lib interface
+ .setHttpAdapter(new InterceptWXHttpAdapter())
+ .build();
+WXSDKEngine.initialize(applicationContext,config);
+```
+
+- [demo init case](https://github.com/apache/incubator-weex/blob/master/android/playground/app/src/main/java/com/alibaba/weex/WXApplication.java)
+- [InterceptWXHttpAdapter](https://github.com/apache/incubator-weex/blob/master/android/playground/app/src/main/java/com/alibaba/weex/extend/adapter/InterceptWXHttpAdapter.java)
+- [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.
+
+- `git clone https://github.com/apache/incubator-weex.git'
+ 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/docs/guide/develop/setup-develop-environment.md b/docs/guide/develop/setup-develop-environment.md
new file mode 100644
index 0000000..e269a9f
--- /dev/null
+++ b/docs/guide/develop/setup-develop-environment.md
@@ -0,0 +1,37 @@
+# Setup Develop Environment
+
+Using [Weex Online Editor]((http://editor.weex.io/) is a good choice, but if you want to develop locally on your own machine, you will need to set up your develop environment.
+
+## Install
+
+You will need Node.js and the [Weex CLI](https://github.com/weexteam/weex-toolkit).
+
+There are many ways to install Node.js. The easiest way is to download the executable directly from [Node.js official website] (https://nodejs.org/en/).
+
+> For more installation methods, please refer to [Node.js official information] (https://nodejs.org/en/download/).
+
+Run the following commands in a terminal:
+
+```bash
+$ npm install -g weex-toolkit
+$ weex -v
+```
+After the installation is complete, you can use the `weex help` command to verify that the installation is successful. It will display all the commands supported by `weex`. You can also check your local development environment with the `weex doctor` command.
+
+## Generate a new Weex project
+
+Use the weex-toolkit, you can generate a weex project just type the command on your terminal:
+
+```bash
+$ weex create awesome-project
+```
+
+After executing the command, a standard project structure has been generated for us in the `awesome-project` directory.
+
+## Develop
+
+Enter the path of the project. If you choose to install the project automatically when you create the project, you only need to run `npm start` directly after entering the project. You can run the project completely. Otherwise, you need to run `npm in the project beforehand. Install` requires dependencies on the installation project
+
+
+
+For more technical details, please continue to read the next section.
\ No newline at end of file
diff --git a/docs/guide/extend/extend-android.md b/docs/guide/extend/extend-android.md
new file mode 100644
index 0000000..0e23cbb
--- /dev/null
+++ b/docs/guide/extend/extend-android.md
@@ -0,0 +1,455 @@
+---
+title: Extend Android
+type: guide
+group: Extend
+order: 6.3
+version: 2.1
+---
+
+<!-- toc -->
+
+## 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>
+```
+
+## Register module
+
+registerModule(moduleName,moduleClass)
+
+- `return`(_bool_): register success
+- `moduleName`(_String_): module name
+- `moduleClass`(_Class_): the Java class of the module, which provide a constructor with an empty parameter.
+
+使用方式:
+
+```
+WXSDKEngine.registerModule("picker", WXPickersModule.class);
+```
+
+## 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
+### weex_sdk version >= v0.19+
+#### Abstract
+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.
+
+#### Migration guide
+##### 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.
+
+##### 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);
+```
+
+
+##### 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();
+```
+
+### weex_sdk version < 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>
+```
+
+## Register component
+
+### __registerComponent(type,class,appendTree)__
+
+- `return`(_bool_): register success
+- `type`(_String_): component's name,such as `div`
+- `class`(_Class_): ComponentClass，called when init component
+- `appendTree`(_bool_): render option logic，default false
+ - if true，render compoent tree one-time
+ - if false，render component one by one
+
+usage:
+
+```
+WXSDKEngine.registerComponent("video", WXVideo.class, false);
+```
+
+### __registerComponent(holder,appendTree，...names)__
+
+- `return`(_bool_): register success
+- `holder`(_IFComponentHolder_): abstract factory designed for create Component, and __SimpleComponentHolder__ is the a simple way to achieve IFComponentHolder.
+- `appendTree`: see `registerComponent(type,class,appendTree)`
+- `names`(_String ..._): component's name in front end template file
+
+usage:
+
+```
+WXSDKEngine.registerComponent(
+ new SimpleComponentHolder(
+ WXText.class,
+ new WXText.Creator()
+ ),
+ false,
+ "text"
+ );
+```
+
+## 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);
+ }
+}
+```
+
+## Set up various adapters
+
+### 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
+
+* `WXRequest` defines the parameters related to the network request, the request method, the request body, and the timeout time. Weex default timeout is 3s.
+
+#### 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
+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 weex exception.
+- DownLoadException
+- WhiteSceenException
+- JSException
+- DownGradeException
+
+```
+public interface IWXJSExceptionAdapter {
+ void onJSException(WXJSExceptionInfo exception);
+}
+```
+usage：
+
+```
+WXSDKEngine.setJSExcetptionAdapter(new TestExceptionAdapter());
+```
+
+## 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/docs/guide/extend/extend-framework.md b/docs/guide/extend/extend-framework.md
new file mode 100644
index 0000000..530d111
--- /dev/null
+++ b/docs/guide/extend/extend-framework.md
@@ -0,0 +1,144 @@
+这部分扩展能力还在讨论尝试中，可能随时会有调整，请留意。
+
+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 代码
+```js
+// 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
+```js
+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：
+```js
+// { "framework": "Vue" }
+...
+```
+这样 Weex JS 引擎就会识别出这个 JS bundle 需要用 Vue 框架来解析。并分发给 Vue 框架处理。同理，Weex 支持同时多种框架在一个移动应用中共存并各自解析基于不同框架的 JS bundle。
\ No newline at end of file
diff --git a/docs/guide/extend/extend-ios-with-swift.md b/docs/guide/extend/extend-ios-with-swift.md
new file mode 100644
index 0000000..1671a40
--- /dev/null
+++ b/docs/guide/extend/extend-ios-with-swift.md
@@ -0,0 +1,106 @@
+## 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/docs/guide/extend/extend-ios.md b/docs/guide/extend/extend-ios.md
new file mode 100644
index 0000000..36b3319
--- /dev/null
+++ b/docs/guide/extend/extend-ios.md
@@ -0,0 +1,301 @@
+> **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.**
+
+In this section we will talk about how to extend Weex on iOS using Objective-C. For Swift, please refer [Extend using Swift](./extend-ios-with-swift.html)
+
+## Extend 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.
+
+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
+
+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. Export asynchronous method using `WX_EXPORT_METHOD`, you may get result in callback function. Use `WX_EXPORT_METHOD_SYNC` to export synchronous method. You can get result on the left of operand `=`.
+
+## Extend component
+
+1. New a class derived from `WXComponent` class or other subclasses of `WXComponent`. If we do nothing in this class and then register it to WeexSDK engine, its works just like `div`.
+
+2. Override the lifecycle of `WXComponent`
+* `loadView`
+We will load a view for a component. 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.
+```Objective-C
+- (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 css style after layout.
+```Objective-C
+- (void)viewDidLoad {
+ ((MKMapView*)self.view).delegate = self;
+}
+```
+3. Register the component
+```Objective-C
+[WXSDKEngine registerComponent:@"map" withClass:[WXMapComponent class]];
+```
+4. Use the custom component
+```Html
+<template>
+ <div>
+ <map style="width:200px;height:200px"></map>
+ </div>
+</template>
+```
+
+#### Custom events
+
+Weex engine has done some works to support common events and other attributes, if you want support your own attributes, let's continue.
+
+1. Custom events
+Our goal is to support `mapLoaded` event for the component we just implemented. 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>
+```
+
+2. Override add/remove event in Objective-C
+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.
+
+```Objective-C
+- (void)addEvent:(NSString *)eventName {
+ if ([eventName isEqualToString:@"mapLoaded"]) {
+ _mapLoaded = YES;
+ }
+}
+
+- (void)removeEvent:(NSString *)eventName {
+ if ([eventName isEqualToString:@"mapLoaded"]) {
+ _mapLoaded = NO;
+ }
+}
+```
+
+3. Fire event to front-end
+```Objective-C
+- (void)mapViewDidFinishLoadingMap:(MKMapView *)mapView {
+ if (_mapLoaded) {
+ [self fireEvent:@"mapLoaded" params:@{@"customKey":@"customValue"} domChanges:nil];
+ }
+}
+```
+
+#### 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>
+```
+
+1. 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.
+
+```Objective-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;
+}
+```
+
+2. Set property for custom view when it is loaded.
+```Objective-C
+- (void)viewDidLoad {
+ ((MKMapView*)self.view).showsTraffic = _showsTraffic;
+}
+```
+
+3. Handle attribute updates
+```Objective-C
+- (void)updateAttributes:(NSDictionary *)attributes {
+ if (attributes[@"showsTraffic"]) {
+ _showsTraffic = [WXConvert BOOL: attributes[@"showsTraffic"]];
+ ((MKMapView*)self.view).showsTraffic = _showsTraffic;
+ }
+}
+```
+
+#### More life-cycle methods
+
+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. |
+
+#### Add method for component
+
+You can define your component method by macro `WX_EXPORT_METHOD`
+
+```Objective-C
+@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
+```
+
+You can call `focus` in your js file.
+
+```Html
+<template>
+ <mycomponent ref='mycomponent'></mycomponent>
+</template>
+<script>
+ module.exports = {
+ created: function() {
+ this.$refs.mycomponent.focus();
+ }
+ }
+</script>
+```
+
+## Get css style of component
+
+1. Before v0.19, Weex used Yoga layout engine. You can access css styles via cssNode of WXCompoent. Such as
+```Objective-C
+ self.cssNode->style.flex = 1.0;
+ float height = self.cssNode->style.dimensions[CSS_HEIGHT];
+```
+
+2. 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.
+
+3. 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.
+
+```Objective-C
+/**
+ * @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;
+- (WXCoreDirection)getCssDirection;
+```
+
+## Custom handlers
+
+What is the purpose of a handler? 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.
+
+1. 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.
+
+```Objective-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
+```
+
+2. Register handler for a protocol
+
+```Objective-C
+[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];
+```
+
+3. Use the handler
+```Objective-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/docs/guide/extend/extend-web.md b/docs/guide/extend/extend-web.md
new file mode 100644
index 0000000..3f5aa6b
--- /dev/null
+++ b/docs/guide/extend/extend-web.md
@@ -0,0 +1,99 @@
+# 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](http [...]
+
+# 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/docs/guide/front-end-frameworks.md b/docs/guide/front-end-frameworks.md
new file mode 100644
index 0000000..837d08a
--- /dev/null
+++ b/docs/guide/front-end-frameworks.md
@@ -0,0 +1,86 @@
+# 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.
+
+## Framework Type Annotation
+
+Weex only determined which front-end framework is used of a specific page at runtime (just before rendering the page). So you have to mark what type of front-end framework you are using in the js bundle.
+
+### Using Comment
+
+In v0.16 and earlier, Weex is using specific format comments to annotate the framework type, the format is `// { "framework": "Xxx" }`, the `Xxx` in it is the name of front-end framework.
+
+> NOTICE: **The comment type annotation must be placed at the beginning of the code.** Only spaces or blank lines can be put before it.
+
+For example, the comment type annotation of Vue is:
+
+```js
+// { "framework": "Vue" }
+```
+
+The comment type annotation of Rax is:
+
+```js
+// { "framework": "Rax" }
+```
+
+### Using Directive Prologue <badge text="0.17+" type="warn" vertical="middle"/>
+
+Using comments is not a robust way to declare the framework type, because it may be removed during compiling or packaging. Since the v0.17, Weex supports using [Directive Prologue](http://ecma-international.org/ecma-262/5.1/#sec-14.1) to indicate the framework type. The format of directive prologue type annotation is `"use weex:xxx";`, the `Xxx` in it is the name of front-end framework. Both `'` (single quote) and `"` (double quotes) are fine, but must be lower case.
+
+
+> NOTICE: **The directive prologue type annotation must be placed before all runnable codes.** Only spaces, blank lines or comments can be put before it.
+
+For example, the directive prologue type annotation of Vue is:
+
+```js
+"use weex:vue";
+```
+
+The directive prologue type annotation of Rax is:
+
+```js
+"use weex:rax";
+```
+
+### Be Compatible with All Versions of Weex
+
+If you are using v0.17 or higher version of Weex SDK, recommend you to use `"use weex:xxx";` as the type annotation. But if consider to be compatible with all versions of Weex, you can use both comments and directive prologue.
+
+For example, the compatible type annotation of Vue is:
+
+```js
+// { "framework": "Vue" }
+"use weex:vue";
+```
+
+The compatible type annotation of Rax is:
+
+```js
+// { "framework": "Rax" }
+"use weex:rax";
+```
+
+## 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.
+
+::: tip
+Please refer to [Use Vue.js in Weex](./use-vue-in-weex.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/docs/guide/images/different-switch.png b/docs/guide/images/different-switch.png
new file mode 100644
index 0000000..7407743
Binary files /dev/null and b/docs/guide/images/different-switch.png differ
diff --git a/docs/guide/images/flow.png b/docs/guide/images/flow.png
new file mode 100644
index 0000000..c5a1b61
Binary files /dev/null and b/docs/guide/images/flow.png differ
diff --git a/docs/guide/images/native-component.png b/docs/guide/images/native-component.png
new file mode 100644
index 0000000..9dd5550
Binary files /dev/null and b/docs/guide/images/native-component.png differ
diff --git a/docs/guide/images/toolkit-preview.png b/docs/guide/images/toolkit-preview.png
new file mode 100644
index 0000000..5046052
Binary files /dev/null and b/docs/guide/images/toolkit-preview.png differ
diff --git a/docs/guide/images/vue-rax.png b/docs/guide/images/vue-rax.png
new file mode 100644
index 0000000..1e6e57e
Binary files /dev/null and b/docs/guide/images/vue-rax.png differ
diff --git a/docs/guide/images/weex-example-yo.png b/docs/guide/images/weex-example-yo.png
new file mode 100644
index 0000000..81e78c1
Binary files /dev/null and b/docs/guide/images/weex-example-yo.png differ
diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md
new file mode 100644
index 0000000..f271125
--- /dev/null
+++ b/docs/guide/introduction.md
@@ -0,0 +1,81 @@
+# What is Weex?
+
+<!-- toc -->
+
+> **Weex is a framework for building high-performance cross-platform mobile applications with a modern web development experience.**
+
+Weex enables developers to use modern web development skills to build Android, iOS, and Web apps with a single codebase. In practice, you can use JavaScript with modern front-end frameworks to develop mobile apps.
+
+The structure of Weex is decoupled. The render engine is separated from the syntax layer(DSL). This means that Weex does not rely on any specific front-end framework or language. For now, Weex is widely used with the supports of [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/). Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both for web and native. Productivity and performance can coexist in Weex. Write a We [...]
+
+## Overview
+
+To have a glance of the abilities of Weex, it is very simple.
+
+* Install [WeexPlayground](http://weex.apache.org/tools/playground.html). In the playground you can try various demos.
+* Visit [Weex online playground](http://dotwe.org/vue). On this site, you can write and run single page demos using Vue.js. And you can use WeexPlayground app to scan the demo.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js which will give you an overall view of how Weex works:
+
+
+
+In the `<template>` of the source code, you will notice the `<div>` element which is widely used on the web. It is also the generic container in Weex. The `<text>` component, however, is provided by Weex and is a block-level text container. All texts should be placed in `<text>` container and this is a difference from traditional HTML.
+
+Within the `<style>` tag, you can write CSS to describe the styles of a component, and 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 by native views on mobile device.
+
+
+
+Weex implements render engines both on iOS and Android and provides a group of [built-in components](../docs/components/div.html). You can also write your own components wrapping native maps, videos, etc. Visit [Extend-iOS](./extend/extend-ios.html) or [Extend-Android](./extend/extend-android.html) for more details.
+
+Behind the scenes, Weex uses native components and provides maximum uniformity for iOS and Android. But there exists slight differences for different platform. For example, the [`<switch>`](http://dotwe.org/vue/d96943452b6708422197c47920903823) component looks different on Android and iOS.
+
+
+
+### Native Modules
+
+For those features that do not rely on the UI views, Weex wraps them into **modules**, check [Animation Module](../docs/modules/animation.html) for an overview. In your front-end code, just use `weex.requireModule('xxx')` to import a module and you can call methods of it. Weex modules provide native capabilities for JavaScript, such as network, storage, clipboard, and navigator, etc. For example, you can use [`stream`](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b) module to fetc [...]
+
+Similarly, Weex provides a group of [built-in modules](../docs/modules/animation.html) for basic usage, and supports the integration of the existing native modules into the Weex platform. Visit the following documents for more details.
+
+* [Extend Web Render](./extend/extend-web.html)
+* [Extend Android](./extend/extend-android.html)
+* [Extend iOS](./extend/extend-ios.html)
+
+### Write Once, Run Everywhere
+
+Yes, Weex enables developers to build apps for Android, iOS, and Web on a single codebase which dramatically increases development productivity and simplify the testing, building, and publishing processes.
+
+Although a Weex page use single codebase, you can still write platform specific code. Weex provides `WXEnvironment` to get the current runtime environment. Check [Weex Variables](../docs/api/weex-variable.html) for more details.
+
+## Using Front-End Frameworks
+
+Front-end frameworks are the syntax layer of Weex. Weex never restricts to some specific front-end frameworks. For now [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/) are widely used in Weex development.
+
+
+
+- **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.
+
+It is possible to integrate your favorite front-end framework into Weex but it is not easy work. If you have any idea, you could contact us. You can read [Front-End Frameworks](./front-end-frameworks.html) for more details.
+
+## 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 to write your own app now, please read
+
+- [Create a new app](./develop/create-a-new-app.html)
+- [Integrate Weex to iOS](./develop/integrate-to-iOS-app.html)
+- [Integrate Weex to Android](./develop/integrate-to-android-app.html)
+- [Setup Development Environment](./develop/setup-develop-environment.html)
+
+If you want to contribute to Weex code and documents, or commit a bug, please read
+
+- [How to Contribute](./contribute/how-to-contribute.html)
+- [Bug Report Guidelines](./contribute/bug-report-guidelines.html)
diff --git a/docs/guide/platform-difference.md b/docs/guide/platform-difference.md
new file mode 100644
index 0000000..e4b9720
--- /dev/null
+++ b/docs/guide/platform-difference.md
@@ -0,0 +1,63 @@
+# Platform Difference with Web
+
+Weex is a cross-platform solution. The web platform is just one of its runing environments, and it can also run on Android and iOS clients. The differences between the native platform and the web platform have some differences in functionality and development experience.
+
+## No DOM in Weex
+
+DOM (Document Object Model) is a concept in the Web. It is a programming interface for HTML and XML. Weex is a runtime environment that based on native applications, and native components are rendered in Android and iOS environments, not DOM Elements.
+
+### DOM operation is not supported
+
+The Web API is not supported, there are no objects such as `Element`, `Event`, `File`. For a detailed list, please refer to [Web APIs on MDN] (https://developer.mozilla.org/en-US/docs /Web/API). Selected elements are not supported, such as `document.getElementById` , `document.querySelector`; Of course, DOM API-based libraries (such as jQuery) are not supported.
+
+### Limited event type
+
+Weex supports binding events on tags, just like in browsers, but events in Weex are captured and triggered by native components. The behavior is different from the browser. The properties in the event are also difference from web.
+
++ Support for some event types of the web. For details, please refer to [《Common events》](../docs/events/common-events.html)。
+
++ It does not distinguish between the capture phase and the bubbling phase of an event, which is equivalent to a DOM level 0 event.
+
+## No BOM in Weex
+
+BOM (Browser Object Model) is an interface provided by the browser environment for javascript. Weex is not based on the browser runing on the native side and does not support the BOM interface provided by the browser.
+
+### No `window` 、`screen` object
+
+The `window` and `screen` objects in the browser are not provided in Weex and global variables are not supported. If you want to get the screen or environment information of your device, you can use the `WXEnvironment` variable.
+
++ `WXEnvironment`
+ + `weexVersion`: WeexSDK Version.
+ + `appName`: The name of application.
+ + `appVersion`: The verison of application.
+ + `platform`: The value maybe one of `Web` 、`Android` 、`iOS`.
+ + `osName`: The name of OS.
+ + `osVersion`: The version of OS.
+ + `deviceWidth`: The width of device.
+ + `deviceHeight`: The height of device.
+
+### No `document` object
+
+In the browser, `document` indicates the currently active document model. This object is not available in Android and iOS environments, and DOM operations related to it are not supported.
+
+### No `history` 、`location` 、`navigator` object
+
++ `history` The history of the current page is saved and a forward and backward action is provided.
++ `location` Recorded information about the current page URL.
++ `navigator` Recorded information in the current browser.
+
+These interfaces are related to the implementation of the browser itself, which can control the forward and backward of the page and obtain status information. Although there are concepts of "history" and "navigation" in Android and iOS, but it is used for jumps between multiple administrative views. In other words, click "forward" and "backward" in the browser will still be in the same tab. In the native application, "forward" and "back" will actually jump to other pages.
+
+Weex also provides the `navigator` module to manipulate page jumps. For details, please refer to [《navigation control》](../docs/modules/navigator.html).
+
+## Ability to call mobile device native API
+
+The mobile device native API can be called in Weex by using the registration and calling module. Some of these modules are built into Weex, such as clipboard , navigator , storage , and so on.
+
++ [《clipboard》](../docs/modules/clipboard.html)
++ [《navigator control》](../docs/modules/navigator.html)
++ [《storage》](../docs/modules/storage.html)
+
+In order to maintain the versatility of the framework, Weex's built-in native modules are limited, but Weex provides the ability to extend native modules. For specific extension methods, please refer to [《iOS extend》](./extend/extend-ios.html) 和[《Android extend》](./extend/extend-android.html)。
+
+> Some interfaces also exist in the browser environment, but you should pay attention to browser compatibility when using them; for example, the clipboard function, for security reasons, most browsers restrict their use.
diff --git a/docs/guide/use-rax-in-weex.md b/docs/guide/use-rax-in-weex.md
new file mode 100644
index 0000000..81b90b3
--- /dev/null
+++ b/docs/guide/use-rax-in-weex.md
@@ -0,0 +1,5 @@
+# Use Rax in Weex
+
+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/docs/guide/use-vue-in-weex.md b/docs/guide/use-vue-in-weex.md
new file mode 100644
index 0000000..1d9d18c
--- /dev/null
+++ b/docs/guide/use-vue-in-weex.md
@@ -0,0 +1,277 @@
+# Use Vue.js in Weex
+
+[[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 2016/02/17. Vue 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 (according to Vue's official website), 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.
++ Not support [`x-templates`](https://vuejs.org/v2/guide/components.html#X-Templates).
++ Not support [`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 develop native apps based on Weex, there are still many [platform differences between Weex and web](./platform-difference.html).
+
+In short, the key platform differences are running context, DOM API, styles and events.
+
+### Running 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. Although Weex is using the same javascript engine virtual machine for each page, but execution context of them are separated by the **Sandbox** technology of Weex.
+
+> You can use [BroadcastChannel](../docs/api/broadcast-channel.html) to communicate between different pages.
+
+In particular, the `Vue` variable 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](../docs/styles/common-styles.html)* and *[text styles](../docs/styles/text-styles.html)* for more details.
+
+In 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.
+
+::: tip
+It's a good practice to use single file component syntax in Weex.
+
+Because the compiler tools are different between Weex and Vue, you have to handle all these platform differences if you are writing `render` function manually.
+:::
+
+### 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) of 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 (v14)](https://vue-loader-v14.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'
+}
+```
+
+::: tip
+Always use javascript file as the entry file.
+:::
+
+## 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. (See the following tips) |
+| [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+ |
+
+::: warning About the "mounted" lifecycle.
+
+Unlike browsers, the render process of Weex is **asynchronous** by default and the render result are all native views which can't be accessed by javascript directly. So the `mounted` lifecycle will be emitted once the virtual-dom (`VNode` of Vue) is constructed, at that time, the corresponding native views many not rendered finish yet.
+:::
+
+### 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/docs/release-note.md b/docs/release-note.md
new file mode 100644
index 0000000..9a784e3
--- /dev/null
+++ b/docs/release-note.md
@@ -0,0 +1,482 @@
+---
+pageClass: noFooter
+---
+
+## v0.20.0
+### Bug
+* [WEEX-490](https://issues.apache.org/jira/browse/WEEX-490) - [Android] set "type=tel" and "type=number" in input component, but also can input text
+* [WEEX-664](https://issues.apache.org/jira/browse/WEEX-664) - [weex_core] RTL performance is incorrect
+* [WEEX-669](https://issues.apache.org/jira/browse/WEEX-669) - [Android] crash when slider mAdapter null
+* [WEEX-673](https://issues.apache.org/jira/browse/WEEX-673) - [weex_core][iOS][Android] fix crash && advance RTL performance
+### Improvement
+* [WEEX-394](https://issues.apache.org/jira/browse/WEEX-394) - [iOS] Add license for some iOS files
+* [WEEX-553](https://issues.apache.org/jira/browse/WEEX-553) - [Android] Add interceptTouch attribute in component
+
+
+## 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)
... 10467 lines suppressed ...