You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ji...@apache.org on 2017/02/01 07:21:01 UTC
[01/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Repository: incubator-weex-site
Updated Branches:
refs/heads/asf-site [created] 14041490d
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/references/components/a.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/references/components/a.html b/content/cn/v-0.10/references/components/a.html
new file mode 100644
index 0000000..ad52b3f
--- /dev/null
+++ b/content/cn/v-0.10/references/components/a.html
@@ -0,0 +1,1108 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><a> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;a&gt;&lt;a&gt; \u7ec4\u4ef6\u5b9a\u4e49\u4e86\u6307\u5411\u67d0\u4e2a\u9875\u9762\u7684\u4e00\u4e2a\u8d85\u94fe\u63a5. \u6b64\u7ec4\u4ef6\u7684\u4f5c\u7528\u548c\u7528\u6cd5\u4e0eHTML5\u4e2d\u7684 &lt;a&gt; \u975e\u5e38\u7c7b\u4f3c\uff0c\u533a\u522b\u5728\u4e8e Weex \u7684 &lt;a&gt; \u7ec4\u4ef6\u4e0d\u80fd\u76f4\u63a5\u5728\u91cc\u9762\u6dfb\u52a0\u6587\u672c\uff08\u5b57\u7b26\u4e32\uff09\uff0c\u5982\u679c\u8981\u5c55\u793a\u6587\u672c\uff0c\u5e94\u8be5\u6dfb\u52a0 &lt;text&gt; \u7ec4\u4ef6\u3002
+\u4e00\u4e2a\u7b80\u5355\u4f8b\u5b50\uff1a
+&lt;template&gt; &lt;div class="wrapper"&gt; &">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<a>">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/references/components/a.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;a&gt;&lt;a&gt; \u7ec4\u4ef6\u5b9a\u4e49\u4e86\u6307\u5411\u67d0\u4e2a\u9875\u9762\u7684\u4e00\u4e2a\u8d85\u94fe\u63a5. \u6b64\u7ec4\u4ef6\u7684\u4f5c\u7528\u548c\u7528\u6cd5\u4e0eHTML5\u4e2d\u7684 &lt;a&gt; \u975e\u5e38\u7c7b\u4f3c\uff0c\u533a\u522b\u5728\u4e8e Weex \u7684 &lt;a&gt; \u7ec4\u4ef6\u4e0d\u80fd\u76f4\u63a5\u5728\u91cc\u9762\u6dfb\u52a0\u6587\u672c\uff08\u5b57\u7b26\u4e32\uff09\uff0c\u5982\u679c\u8981\u5c55\u793a\u6587\u672c\uff0c\u5e94\u8be5\u6dfb\u52a0 &lt;text&gt; \u7ec4\u4ef6\u3002
+\u4e00\u4e2a\u7b80\u5355\u4f8b\u5b50\uff1a
+&lt;template&gt; &lt;div class="wrapper"&gt; &">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.956Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<a>">
+<meta name="twitter:description" content="&lt;a&gt;&lt;a&gt; \u7ec4\u4ef6\u5b9a\u4e49\u4e86\u6307\u5411\u67d0\u4e2a\u9875\u9762\u7684\u4e00\u4e2a\u8d85\u94fe\u63a5. \u6b64\u7ec4\u4ef6\u7684\u4f5c\u7528\u548c\u7528\u6cd5\u4e0eHTML5\u4e2d\u7684 &lt;a&gt; \u975e\u5e38\u7c7b\u4f3c\uff0c\u533a\u522b\u5728\u4e8e Weex \u7684 &lt;a&gt; \u7ec4\u4ef6\u4e0d\u80fd\u76f4\u63a5\u5728\u91cc\u9762\u6dfb\u52a0\u6587\u672c\uff08\u5b57\u7b26\u4e32\uff09\uff0c\u5982\u679c\u8981\u5c55\u793a\u6587\u672c\uff0c\u5e94\u8be5\u6dfb\u52a0 &lt;text&gt; \u7ec4\u4ef6\u3002
+\u4e00\u4e2a\u7b80\u5355\u4f8b\u5b50\uff1a
+&lt;template&gt; &lt;div class="wrapper"&gt; &">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link current "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link current "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <a>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.956Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-a-gt"><a href="#lt-a-gt" class="headerlink" title="<a>"></a><a></h1><p><code><a></code> \u7ec4\u4ef6\u5b9a\u4e49\u4e86\u6307\u5411\u67d0\u4e2a\u9875\u9762\u7684\u4e00\u4e2a\u8d85\u94fe\u63a5. \u6b64\u7ec4\u4ef6\u7684\u4f5c\u7528\u548c\u7528\u6cd5\u4e0eHTML5\u4e2d\u7684 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_blank" rel="external"><code><a></code></a> \u975e\u5e38\u7c7b\u4f3c\uff0c\u533a\u522b\u5728\u4e8e Weex \u7684 <code><a></code> \u7ec4\u4ef6<strong>\u4e0d\u80fd</strong>\u76f4\u63a5\u5728\u91cc\u9762\u6dfb\u52a0\u6587\u672c\uff08\u5b57\u7b26\u4e32\uff09\uff0c\u5982\u679c\u8981\u5c55\u793a\u6587\u672c\uff0c\u5e94\u8be5\u6dfb\u52a0 <code><text></code> \u7ec4\u4ef6\u3002</p>
+<p>\u4e00\u4e2a\u7b80\u5355\u4f8b\u5b50\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://dotwe.org/raw/dist/a468998152ee680413588c38bd61c29e.js"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>click<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">a</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"
><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"><span class="selector-class">.wrapper</span> {</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/f63c78213ef26c25357ffa851537fff3" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p>\u6b64\u7ec4\u4ef6\u652f\u6301\u9664\u4e86\u81ea\u5df1\u5916\u7684\u6240\u6709 Weex \u7ec4\u4ef6\u4f5c\u4e3a\u5b50\u7ec4\u4ef6\u3002</p>
+<h2 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h2><ul>
+<li><code>href {string}</code>\uff1a\u5b9a\u4e49\u4e86\u8d85\u94fe\u63a5\u7684 URL\u3002</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><p><code><a></code> \u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f\u3002</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a>\u3002</p>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><p><code><a></code> \u652f\u6301\u6240\u6709\u901a\u7528\u4e8b\u4ef6\u3002</p>
+<ul>
+<li><code>click</code><br><strong>\u6ce8\u610f\uff1a</strong>\u6211\u4eec\u4e0d\u80fd\u4fdd\u8bc1 <code>click</code> \u4e8b\u4ef6\u548c <code>href</code> \u8df3\u8f6c\u7684\u6267\u884c\u987a\u5e8f\u3002\u5efa\u8bae\u4e0d\u8981\u4f7f\u7528 <code>click</code> \u4e8b\u4ef6\u6765\u5904\u7406 <code>href</code> \u8df3\u8f6c\u524d\u7684\u903b\u8f91\u5904\u7406\u3002</li>
+<li><code>longpress</code></li>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a>\u3002</p>
+<h2 id="\u7ea6\u675f"><a href="#\u7ea6\u675f" class="headerlink" title="\u7ea6\u675f"></a>\u7ea6\u675f</h2><ol>
+<li><p><strong>\u4e0d\u80fd</strong>\u76f4\u63a5\u5728 <code><a></code> \u4e2d\u6dfb\u52a0\u6587\u672c\u3002<br>\u9519\u8bef\u793a\u4f8b\uff0c\u201cclick\u201d \u65e0\u6cd5\u88ab\u6b63\u5e38\u6e32\u67d3\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://dotwe.org/raw/dist/a468998152ee680413588c38bd61c29e.js"</span>></span></div><div class="line"> click</div><div class="line"> <span class="tag"></<span class="name">a</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"><span class="
selector-class">.wrapper</span> {</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+</li>
+</ol>
+<p><a href="http://dotwe.org/0a22d65138691a208e3fb1f8f6392b38" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<ol>
+<li>\u8bf7\u4e0d\u8981\u4e3a <code><a></code> \u6dfb\u52a0 <code>click</code> \u4e8b\u4ef6\u3002\u6211\u4eec\u4e0d\u80fd\u786e\u4fdd <code>click</code> \u4e8b\u4ef6\u548c <code>href</code> \u8df3\u8f6c\u7684\u6267\u884c\u987a\u5e8f\u3002</li>
+</ol>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">list</span> <span class="attr">class</span>=<span class="string">"list"</span>></span></div><div class="line"> <span class="tag"><<span class="name">header</span> <span class="attr">class</span>=<span class="string">"header"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span>></span>Search Results<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">header</span>></span></div><div class="
line"> <span class="tag"><<span class="name">refresh</span> <span class="attr">style</span>=<span class="string">"width: 750; padding: 30;"</span> <span class="attr">onrefresh</span>=<span class="string">"refreshData"</span> <span class="attr">display</span>=<span class="string">"{{refreshDisplay}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span>></span> \u2193 Pull to refresh <span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">loading-indicator</span> <span class="attr">class</span>=<span class="string">"indicator"</span>></span><span class="tag"></<span class="name">loading-indicator</span>></span></div><div class="line"> <span class="tag"></<span class="name">refresh</span>></span></div><div class="line"> <span class="tag">&l
t;<span class="name">cell</span> <span class="attr">class</span>=<span class="string">"row"</span> <span class="attr">repeat</span>=<span class="string">"item in items"</span> <span class="attr">id</span>=<span class="string">"item-{{$index}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"lines"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"item"</span>></span>Repo name: <span class="tag"></<span class="name">text</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"{{item.repo_url}}"</span>></span><span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"link"</span>></span>{{item.full_name
}}<span class="tag"></<span class="name">text</span>></span><span class="tag"></<span class="name">a</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"item"</span>></span>Repo star: {{item.stargazers_count}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">cell</span>></span></div><div class="line"> <span class="tag"><<span class="name">loading</span> <span class="attr">onloading</span>=<span class="string">"loadingData"</span> <span class="attr">style</span>=<s
pan class="string">"width: 750; padding: 30;"</span> <span class="attr">display</span>=<span class="string">"{{loadingDisplay}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span>></span>{{loadingText}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">loading</span>></span></div><div class="line"> <span class="tag"></<span class="name">list</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"up"</span> <span class="attr">onclick</span>=<span class="string">"goToTop"</span>></span></div><div class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">class</span>=<span class="string">"img"</span> <span
class="attr">src</span>=<span class="string">"https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png"</span>></span><span class="tag"></<span class="name">img</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"><span class="selector-class">.header</span> {</div><div class="line"> <span class="attribute">padding</span>: <span class="number">25</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#efefef</span>;</div><div class="line"> <span class="attribute">border-bottom-color</span>: <span class="number">#eeeeee</span
>;</div><div class="line"> <span class="attribute">border-bottom-width</span>: <span class="number">2</span>;</div><div class="line"> <span class="attribute">border-bottom-style</span>: solid;</div><div class="line">}</div><div class="line"><span class="selector-class">.title</span> {</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line">}</div><div class="line"><span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line">}</div><div class="line"><span class="selector-class">.list</span> {</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#ffffff</span>;</div><div class="line">}</div><div class="line"><span class="selector-class">.row</span> {</div><div class="line"> <span class="attribute">padding</span>: <span class="number">20</span>;</div><div class="line"> <span cla
ss="attribute">border-bottom-color</span>: <span class="number">#eeeeee</span>;</div><div class="line"> <span class="attribute">border-bottom-width</span>: <span class="number">2</span>;</div><div class="line"> <span class="attribute">border-bottom-style</span>: solid;</div><div class="line">}</div><div class="line"><span class="selector-class">.up</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">70</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">70</span>;</div><div class="line"> <span class="attribute">position</span>: fixed;</div><div class="line"> <span class="attribute">right</span>: <span class="number">20</span>;</div><div class="line"> <span class="attribute">bottom</span>: <span class="number">20</span>;</div><div class="line">}</div><div class="line"><span class="selector-class">.img</span> {</div><div class="line"> <span class="attribute">width</span>: <span
class="number">70</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">70</span>;</div><div class="line">}</div><div class="line"><span class="selector-class">.lines</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: row;</div><div class="line">}</div><div class="line"><span class="selector-class">.link</span> {</div><div class="line"> <span class="attribute">color</span>: <span class="number">#008cff</span>;</div><div class="line"> <span class="attribute">text-decoration</span>: underline;</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"><span class="keyword">var</span> dom = <span class="built_in">require</span>(<span class="string">'@weex-module/dom'</span
>) || {}</div><div class="line"><span class="keyword">var</span> stream = <span class="built_in">require</span>(<span class="string">'@weex-module/stream'</span>) || {}</div><div class="line"><span class="keyword">var</span> modal = <span class="built_in">require</span>(<span class="string">'@weex-module/modal'</span>) || {}</div><div class="line"></div><div class="line"><span class="keyword">var</span> SEARCH_URL = <span class="string">'https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc'</span>,</div><div class="line"> PAGE_URL = <span class="string">'http://dotwe.org/raw/dist/f1fa0895d0fa0fd80896e02a589443dd.js'</span></div><div class="line"></div><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">isLoaded</span>: <span class="literal">true</span>,</div><div class="line"> <
span class="attr">page</span>: <span class="number">1</span>,</div><div class="line"> <span class="attr">loadingDisplay</span>: <span class="string">'hide'</span>,</div><div class="line"> <span class="attr">refreshDisplay</span>: <span class="string">'hide'</span>,</div><div class="line"> <span class="attr">loadingText</span>: <span class="string">'Loading...'</span>,</div><div class="line"> <span class="attr">items</span>:[]</div><div class="line"> },</div><div class="line"> <span class="attr">created</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> url = SEARCH_URL + <span class="string">'&page='</span> + <span class="keyword">this</span>.page</div><div class="line"></div><div class="line"> <span class="keyword">this</span>.renderData(url)</div><div class="line"></div><div class="line"> <span class="keyword">this</span>.page++</d
iv><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">renderData</span>: <span class="function"><span class="keyword">function</span> (<span class="params">url</span>) </span>{</div><div class="line"> <span class="keyword">var</span> self = <span class="keyword">this</span></div><div class="line"> </div><div class="line"> stream.fetch({</div><div class="line"> <span class="attr">method</span>: <span class="string">'GET'</span>,</div><div class="line"> <span class="attr">url</span>: url,</div><div class="line"> <span class="attr">type</span>:<span class="string">'json'</span></div><div class="line"> }, <span class="function"><span class="keyword">function</span>(<span class="params">res</span>) </span>{</div><div class="line"> <span class="keyword">try</span> {</div><div class="line"> <span class="keyword">var</spa
n> results = res.data.items || []</div><div class="line"> </div><div class="line"> <span class="keyword">if</span> (<span class="built_in">Array</span>.isArray(results)) {</div><div class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i < results.length; i++) {</div><div class="line"> <span class="keyword">var</span> repo_url = results[i].html_url</div><div class="line"> <span class="keyword">if</span> (repo_url) {</div><div class="line"> results[i].repo_url = self.processUrl(repo_url)</div><div class="line"> }</div><div class="line"> self.items.push(results[i])</div><div class="line"> }</div><div class="line"> }</div><div class="line"> } <span class="keyword">catch</span>(e) {}</div><div class="line"> },<span class="function"><span class="keyw
ord">function</span>(<span class="params">res</span>)</span>{</div><div class="line"> </div><div class="line"> })</div><div class="line"> },</div><div class="line"> <span class="attr">loadingData</span>: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> <span class="keyword">var</span> url = SEARCH_URL + <span class="string">'&page='</span> + <span class="keyword">this</span>.page</div><div class="line"> <span class="keyword">var</span> self = <span class="keyword">this</span></div><div class="line"> </div><div class="line"> <span class="keyword">if</span> (self.isLoaded === <span class="literal">false</span>) <span class="keyword">return</span> </div><div class="line"> </div><div class="line"> self.loadingDisplay = <span class="string">'show'</span></div><div class="line"></div><div class="line"> <span class="keyword">if</span> (
self.page <=<span class="number">10</span> ) {</div><div class="line"> self.renderData(url)</div><div class="line"> self.page++</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> self.loadingDisplay = <span class="string">'hide'</span></div><div class="line"> self.loadingText = <span class="string">'NO MORE!'</span></div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">goToTop</span>: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> dom.scrollToElement(<span class="keyword">this</span>.$el(<span class="string">'item-0'</span>), {</div><div class="line"> <span class="attr">offset</span>: <span class="number">-100</span></div><div class="line"> })</div><div class="line"> },</div><div class="line"> <span class="attr">refr
eshData</span>: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> <span class="keyword">var</span> url = SEARCH_URL + <span class="string">'&page=1'</span></div><div class="line"></div><div class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.isLoaded === <span class="literal">false</span>) <span class="keyword">return</span> </div><div class="line"> </div><div class="line"> <span class="keyword">this</span>.refreshDisplay = <span class="string">'show'</span></div><div class="line"></div><div class="line"> modal.toast({</div><div class="line"> <span class="string">'message'</span>: <span class="string">'Refreshing...'</span>, </div><div class="line"> <span class="string">'duration'</span>: <span class="number">1</span></div><div class="line"> })</div><div class="line"> </div><div class="line"> <span class="ke
yword">this</span>.items = []</div><div class="line"> <span class="keyword">this</span>.page = <span class="number">1</span></div><div class="line"> <span class="keyword">this</span>.renderData(url)</div><div class="line"></div><div class="line"> <span class="keyword">this</span>.refreshDisplay = <span class="string">'hide'</span></div><div class="line"> },</div><div class="line"> <span class="attr">processUrl</span>: <span class="function"><span class="keyword">function</span> (<span class="params">url</span>) </span>{</div><div class="line"> <span class="keyword">var</span> platform = <span class="keyword">this</span>.$getConfig().env.platform.toLowerCase()</div><div class="line"> </div><div class="line"> </div><div class="line"> <span class="keyword">if</span> (url) {</div><div class="line"> <span class="comment">// iOS do not need encode</span></div><div class="line"> <span class="keyword">if</span> (platform
=== <span class="string">'ios'</span>) {</div><div class="line"> <span class="keyword">return</span> PAGE_URL + <span class="string">'?weburl='</span> + url</div><div class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (platform === <span class="string">'web'</span>) {</div><div class="line"> <span class="keyword">return</span> url</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">var</span> encodeUrl = <span class="built_in">encodeURIComponent</span>(url)</div><div class="line"> <span class="keyword">return</span> PAGE_URL + <span class="string">'?weburl='</span> + encodeUrl</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">script</span>>
;</span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/3e8369efb20a169077b5331b45927ed8" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a>\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/references/components/a.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[11/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/integrate-to-html5.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/integrate-to-html5.html b/content/cn/v-0.10/advanced/integrate-to-html5.html
new file mode 100644
index 0000000..c5fb44f
--- /dev/null
+++ b/content/cn/v-0.10/advanced/integrate-to-html5.html
@@ -0,0 +1,381 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u96c6\u6210\u5230 web | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u9879\u76ee\u4e2d\u5f15\u5165 html5 \u7248 Weex\u7b80\u4ecbWeex \u662f\u4e00\u4e2a\u8de8\u5e73\u53f0\u53ef\u6269\u5c55\u7684\u52a8\u6001\u5316\u79fb\u52a8\u6846\u67b6\uff0c\u80fd\u591f\u771f\u6b63\u5e2e\u52a9\u5f00\u53d1\u8005\u5b9e\u73b0\u2019\u4e00\u6b21\u5f00\u53d1\uff0c\u5230\u5904\u8fd0\u884c\u2019\u3002\u7531 Weex \u63d0\u4f9b\u7684\u76f8\u5173\u5de5\u5177\u8fdb\u884c\u6253\u5305\u597d\u7684 bundle \u6587\u4ef6\u53ef\u4ee5\u8fd0\u884c\u5728 android, ios \u4ee5\u53ca web\uff08\u8fd9\u91cc\u6211\u4eec\u4e5f\u79f0\u4e4b\u4e3ahtml5\uff09\u5e73\u53f0\u7684\u6e32\u67d3\u5668\u4e0a\u3002Weex HTML5 \u662f\u4e00\u4e2a\u4e13\u7528\u4e8e\u5728\u79fb\u52a8\u7aef webview \u4ee5\u53ca\u5404\u79cd\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e0a\u6e32\u67d3 weex \u6587\u4ef6\u7684\u6e32\u67d3\u5668\u3002">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u96c6\u6210\u5230 web">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/advanced/integrate-to-html5.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u9879\u76ee\u4e2d\u5f15\u5165 html5 \u7248 Weex\u7b80\u4ecbWeex \u662f\u4e00\u4e2a\u8de8\u5e73\u53f0\u53ef\u6269\u5c55\u7684\u52a8\u6001\u5316\u79fb\u52a8\u6846\u67b6\uff0c\u80fd\u591f\u771f\u6b63\u5e2e\u52a9\u5f00\u53d1\u8005\u5b9e\u73b0\u2019\u4e00\u6b21\u5f00\u53d1\uff0c\u5230\u5904\u8fd0\u884c\u2019\u3002\u7531 Weex \u63d0\u4f9b\u7684\u76f8\u5173\u5de5\u5177\u8fdb\u884c\u6253\u5305\u597d\u7684 bundle \u6587\u4ef6\u53ef\u4ee5\u8fd0\u884c\u5728 android, ios \u4ee5\u53ca web\uff08\u8fd9\u91cc\u6211\u4eec\u4e5f\u79f0\u4e4b\u4e3ahtml5\uff09\u5e73\u53f0\u7684\u6e32\u67d3\u5668\u4e0a\u3002Weex HTML5 \u662f\u4e00\u4e2a\u4e13\u7528\u4e8e\u5728\u79fb\u52a8\u7aef webview \u4ee5\u53ca\u5404\u79cd\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e0a\u6e32\u67d3 weex \u6587\u4ef6\u7684\u6e32\u67d3\u5668\u3002">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.932Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u96c6\u6210\u5230 web">
+<meta name="twitter:description" content="\u9879\u76ee\u4e2d\u5f15\u5165 html5 \u7248 Weex\u7b80\u4ecbWeex \u662f\u4e00\u4e2a\u8de8\u5e73\u53f0\u53ef\u6269\u5c55\u7684\u52a8\u6001\u5316\u79fb\u52a8\u6846\u67b6\uff0c\u80fd\u591f\u771f\u6b63\u5e2e\u52a9\u5f00\u53d1\u8005\u5b9e\u73b0\u2019\u4e00\u6b21\u5f00\u53d1\uff0c\u5230\u5904\u8fd0\u884c\u2019\u3002\u7531 Weex \u63d0\u4f9b\u7684\u76f8\u5173\u5de5\u5177\u8fdb\u884c\u6253\u5305\u597d\u7684 bundle \u6587\u4ef6\u53ef\u4ee5\u8fd0\u884c\u5728 android, ios \u4ee5\u53ca web\uff08\u8fd9\u91cc\u6211\u4eec\u4e5f\u79f0\u4e4b\u4e3ahtml5\uff09\u5e73\u53f0\u7684\u6e32\u67d3\u5668\u4e0a\u3002Weex HTML5 \u662f\u4e00\u4e2a\u4e13\u7528\u4e8e\u5728\u79fb\u52a8\u7aef webview \u4ee5\u53ca\u5404\u79cd\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e0a\u6e32\u67d3 weex \u6587\u4ef6\u7684\u6e32\u67d3\u5668\u3002">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="advanced" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "advanced";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u9ad8\u9636\u77e5\u8bc6
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex \u5de5\u4f5c\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">\u96c6\u6210\u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">\u96c6\u6210\u5230 iOS</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link current ">\u96c6\u6210\u5230 web</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native API</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-advanced">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u96c6\u6210\u5230 web
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.932Z">Updated time: 01/02/2017</time>
+</header>
+ <h2 id="\u9879\u76ee\u4e2d\u5f15\u5165-html5-\u7248-Weex"><a href="#\u9879\u76ee\u4e2d\u5f15\u5165-html5-\u7248-Weex" class="headerlink" title="\u9879\u76ee\u4e2d\u5f15\u5165 html5 \u7248 Weex"></a>\u9879\u76ee\u4e2d\u5f15\u5165 html5 \u7248 Weex</h2><h3 id="\u7b80\u4ecb"><a href="#\u7b80\u4ecb" class="headerlink" title="\u7b80\u4ecb"></a>\u7b80\u4ecb</h3><p>Weex \u662f\u4e00\u4e2a\u8de8\u5e73\u53f0\u53ef\u6269\u5c55\u7684\u52a8\u6001\u5316\u79fb\u52a8\u6846\u67b6\uff0c\u80fd\u591f\u771f\u6b63\u5e2e\u52a9\u5f00\u53d1\u8005\u5b9e\u73b0\u2019\u4e00\u6b21\u5f00\u53d1\uff0c\u5230\u5904\u8fd0\u884c\u2019\u3002\u7531 Weex \u63d0\u4f9b\u7684\u76f8\u5173\u5de5\u5177\u8fdb\u884c\u6253\u5305\u597d\u7684 bundle \u6587\u4ef6\u53ef\u4ee5\u8fd0\u884c\u5728 android, ios \u4ee5\u53ca web\uff08\u8fd9\u91cc\u6211\u4eec\u4e5f\u79f0\u4e4b\u4e3ahtml5\uff09\u5e73\u53f0\u7684\u6e32\u67d3\u5668\u4e0a\u3002Weex HTML5 \u662f\u4e00\u4e2a\u4e13\u7528\u4e8e\u5728\u79fb\u52a8\u7aef webview \u4ee5\u53ca\u5404\u79cd\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e0a\u6e32\u67d3 weex \u6587\u4ef6\u7684\u6e32\u67d3\u5668\u3002</p>
+<h3 id="\u83b7\u53d6-Weex-HTML5"><a href="#\u83b7\u53d6-Weex-HTML5" class="headerlink" title="\u83b7\u53d6 Weex HTML5"></a>\u83b7\u53d6 Weex HTML5</h3><p>\u4f7f\u7528 npm \u5b89\u88c5\u6700\u65b0\u7248\u672c\u7684 Weex HTML5\uff0c\u5e76\u5728\u4f60\u7684\u9879\u76ee\u4e2d require \u8fdb\u6765\u3002</p>
+<h4 id="\u4ece-npm-\u5b89\u88c5"><a href="#\u4ece-npm-\u5b89\u88c5" class="headerlink" title="\u4ece npm \u5b89\u88c5"></a>\u4ece npm \u5b89\u88c5</h4><p>\u8bf7\u786e\u4fdd\u901a\u8fc7 <code>npm install</code> \u6216\u8005 <code>npm update</code> \u83b7\u53d6 Weex HTML5 \u7684\u6700\u65b0\u7248\u672c npm \u5305\u3002\u66f4\u591a\u5173\u4e8e npm \u7684\u4fe1\u606f\u60c5\u67e5\u9605 <a href="https://docs.npmjs.com/" target="_blank" rel="external">npm \u5b98\u65b9\u7f51\u7ad9</a>\u3002</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">npm install weex-html5</div></pre></td></tr></table></figure>
+<p>\u901a\u8fc7 require \u5f15\u5165 weex-html5:</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">var weex = require(<span class="string">'weex-html5'</span>)</div></pre></td></tr></table></figure>
+<p><strong>\u6ce8\u610f:</strong> \u4ecb\u4e8e Weex \u76ee\u524d\u4ecd\u5904\u4e8e\u5f00\u6e90\u5185\u6d4b\u9636\u6bb5\uff0c\u8fd8\u6ca1\u6709\u5b8c\u5168\u5f00\u653e\u6e90\u4ee3\u7801\uff0c\u56e0\u6b64 <code>weex-jsframework</code> \u53ef\u80fd\u8fd8\u6ca1\u6709\u5728 npm \u4e0a\u53d1\u5e03\u3002\u5f53\u524d\u7248\u672c\u7684 <code>weex-html5</code> \u5305\u542b\u4e86 <code>weex-jsframework</code>\uff0c\u4f60\u53ea\u9700\u8981 require <code>weex-html5</code> \u5373\u53ef\u6682\u65f6\u5728 web \u5e73\u53f0\u4e0a\u8fd0\u884c weex \u4ee3\u7801\u3002\u5efa\u8bae\u5173\u6ce8 Weex \u7684\u540e\u7eed\u7248\u672c\u53d1\u5e03\u5e76\u505a\u5fc5\u8981\u7684\u5f15\u7528\u65b9\u5f0f\u8c03\u6574\u3002</p>
+<h3 id="\u521d\u59cb\u5316-Weex"><a href="#\u521d\u59cb\u5316-Weex" class="headerlink" title="\u521d\u59cb\u5316 Weex"></a>\u521d\u59cb\u5316 Weex</h3><p>\u4f60\u53ef\u4ee5\u901a\u8fc7 Weex \u66b4\u9732\u7684 API <code>init</code> \u6765\u521d\u59cb\u5316\u4e00\u4e2a Weex \u5b9e\u4f8b\u3002\u8fd9\u4e2a\u65b9\u6cd5\u9700\u8981\u4f20\u9012\u4e00\u4e9b\u914d\u7f6e\u4fe1\u606f\u5df2\u786e\u5b9a\u4e00\u4e9b\u73af\u5883\u53d8\u91cf\u7b49\u4fe1\u606f\uff0c\u8fd9\u4e9b\u914d\u7f6e\u4fe1\u606f\u4ecb\u7ecd\u5982\u4e0b\uff1a</p>
+<ul>
+<li><code>appId</code>: Weex \u5b9e\u4f8b\u7684 id\uff0c\u53ef\u4ee5\u662f\u4efb\u610f\u5b57\u7b26\u4e32\u6216\u8005\u6570\u5b57\uff0c\u5e76\u6ce8\u610f\u4e0d\u8981\u91cd\u590d.</li>
+<li><code>source</code>: \u8bf7\u6c42\u7684 Weex bundle \u6587\u4ef6\u5730\u5740\uff0c\u6216\u8005 Weex bundle \u6587\u4ef6\u4ee3\u7801\u672c\u8eab\uff0c\u53d6\u51b3\u4e8e\u4e0b\u9762\u7684 loader \u914d\u7f6e.</li>
+<li><code>loader</code>: \u52a0\u8f7d\u5668\u7c7b\u578b\uff0c\u7528\u4e8e\u52a0\u8f7d weex bundle\uff0c\u503c\u53ef\u4ee5\u662f \u2018xhr\u2019, \u2018jsonp\u2019 \u6216\u8005 \u2018source\u2019.<ul>
+<li><code>xhr</code>: \u901a\u8fc7 XMLHttpRequest \u52a0\u8f7d source(\u5373 weex bundle \u7684 url \u5730\u5740).</li>
+<li><code>jsonp</code>: \u901a\u8fc7 JSONP \u52a0\u8f7d weex bundle.</li>
+<li><code>source</code>: \u76f4\u63a5\u63a5\u53d7 weex bundle \u7684\u4ee3\u7801\u4f5c\u4e3a\u53c2\u6570.</li>
+</ul>
+</li>
+<li><code>rootId</code>: root \u5bb9\u5668\u7684 id\uff0c\u9ed8\u8ba4\u5bb9\u5668 id \u662f \u2018weex\u2019.</li>
+</ul>
+<p>\u4ee5\u4e0b\u662f\u4e00\u4e2a Weex \u521d\u59cb\u5316\u7684\u793a\u4f8b:</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">weexInit</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">getUrlParam</span> (<span class="params">key</span>) </span>{</div><div class="line"> <span class="keyword">var</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">'[?|&]'</span> + key + <span class="string">'=([^&]+)'</span>)</div><div class="line"> <span class="keyword">var</span> match = location.search.match(reg)</div><div class="line"> <span class="keyword">return</span> match && match[<span class="number">1</span>]</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">var</span> loader = getUrlParam(<span class="string"
>'loader'</span>) || <span class="string">'xhr'</span></div><div class="line"> <span class="keyword">var</span> page = getUrlParam(<span class="string">'page'</span>)</div><div class="line"></div><div class="line"> <span class="comment">// \u9700\u8981\u6307\u5b9a\u4e00\u4e2ajsonp\u56de\u8c03\u51fd\u6570\u540d\u79f0\uff0c\u5982\u679c\u6ca1\u6709\u5219\u7528\u9ed8\u8ba4\u503c'weexJsonpCallback'</span></div><div class="line"> <span class="keyword">var</span> JSONP_CALLBACK_NAME = <span class="string">'weexJsonpCallback'</span></div><div class="line"></div><div class="line"> <span class="built_in">window</span>.weex.init({</div><div class="line"> <span class="attr">jsonpCallback</span>: JSONP_CALLBACK_NAME,</div><div class="line"> <span class="attr">appId</span>: location.href,</div><div class="line"> <span class="attr">source</span>: page,</div><div class="line"> <span class="attr">loader</span>: loader,</div><div class="line"> <span class="attr">rootId</span>: <span class="string">'weex'</span></div><div class="line"> }
;)</div><div class="line">}</div><div class="line"></div><div class="line">weexInit()</div></pre></td></tr></table></figure>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/advanced/integrate-to-html5.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/integrate-to-html5.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/integrate-to-ios.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/integrate-to-ios.html b/content/cn/v-0.10/advanced/integrate-to-ios.html
new file mode 100644
index 0000000..301314c
--- /dev/null
+++ b/content/cn/v-0.10/advanced/integrate-to-ios.html
@@ -0,0 +1,399 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u96c6\u6210\u5230 iOS | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Weex SDK \u96c6\u6210\u5230 iOScocoaPods \u5f15\u5165 Weex iOS SDK\u5230\u5de5\u7a0b\u53ef\u4ee5\u901a\u8fc7\u6e90\u7801\u7f16\u8bd1\u51fa Weex SDK\uff0c\u53ef\u4ee5\u5728\u65b0\u7684 feature \u6216\u8005 bugfix \u5206\u652f\uff0c\u5c1d\u8bd5\u6700\u65b0\u7684 feature
+cocoaPods\u96c6\u6210 \u5047\u8bbe\u4f60\u5df2\u7ecf\u5b8c\u6210\u4e86\u5b89\u88c5iOS \u5f00\u53d1\u73af\u5883 \u548c CocoaPods
+
+\u4ece github \u4e0a clone \u4e00\u4efd\u4ee3\u7801
+git clone https://github.">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u96c6\u6210\u5230 iOS">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/advanced/integrate-to-ios.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Weex SDK \u96c6\u6210\u5230 iOScocoaPods \u5f15\u5165 Weex iOS SDK\u5230\u5de5\u7a0b\u53ef\u4ee5\u901a\u8fc7\u6e90\u7801\u7f16\u8bd1\u51fa Weex SDK\uff0c\u53ef\u4ee5\u5728\u65b0\u7684 feature \u6216\u8005 bugfix \u5206\u652f\uff0c\u5c1d\u8bd5\u6700\u65b0\u7684 feature
+cocoaPods\u96c6\u6210 \u5047\u8bbe\u4f60\u5df2\u7ecf\u5b8c\u6210\u4e86\u5b89\u88c5iOS \u5f00\u53d1\u73af\u5883 \u548c CocoaPods
+
+\u4ece github \u4e0a clone \u4e00\u4efd\u4ee3\u7801
+git clone https://github.">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.933Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u96c6\u6210\u5230 iOS">
+<meta name="twitter:description" content="Weex SDK \u96c6\u6210\u5230 iOScocoaPods \u5f15\u5165 Weex iOS SDK\u5230\u5de5\u7a0b\u53ef\u4ee5\u901a\u8fc7\u6e90\u7801\u7f16\u8bd1\u51fa Weex SDK\uff0c\u53ef\u4ee5\u5728\u65b0\u7684 feature \u6216\u8005 bugfix \u5206\u652f\uff0c\u5c1d\u8bd5\u6700\u65b0\u7684 feature
+cocoaPods\u96c6\u6210 \u5047\u8bbe\u4f60\u5df2\u7ecf\u5b8c\u6210\u4e86\u5b89\u88c5iOS \u5f00\u53d1\u73af\u5883 \u548c CocoaPods
+
+\u4ece github \u4e0a clone \u4e00\u4efd\u4ee3\u7801
+git clone https://github.">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="advanced" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "advanced";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u9ad8\u9636\u77e5\u8bc6
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex \u5de5\u4f5c\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">\u96c6\u6210\u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link current ">\u96c6\u6210\u5230 iOS</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">\u96c6\u6210\u5230 web</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native API</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-advanced">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u96c6\u6210\u5230 iOS
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.933Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Weex-SDK-\u96c6\u6210\u5230-iOS"><a href="#Weex-SDK-\u96c6\u6210\u5230-iOS" class="headerlink" title="Weex SDK \u96c6\u6210\u5230 iOS"></a>Weex SDK \u96c6\u6210\u5230 iOS</h1><h3 id="cocoaPods-\u5f15\u5165-Weex-iOS-SDK\u5230\u5de5\u7a0b"><a href="#cocoaPods-\u5f15\u5165-Weex-iOS-SDK\u5230\u5de5\u7a0b" class="headerlink" title="cocoaPods \u5f15\u5165 Weex iOS SDK\u5230\u5de5\u7a0b"></a>cocoaPods \u5f15\u5165 Weex iOS SDK\u5230\u5de5\u7a0b</h3><p>\u53ef\u4ee5\u901a\u8fc7\u6e90\u7801\u7f16\u8bd1\u51fa Weex SDK\uff0c\u53ef\u4ee5\u5728\u65b0\u7684 feature \u6216\u8005 bugfix \u5206\u652f\uff0c\u5c1d\u8bd5\u6700\u65b0\u7684 feature</p>
+<h4 id="cocoaPods\u96c6\u6210"><a href="#cocoaPods\u96c6\u6210" class="headerlink" title="cocoaPods\u96c6\u6210"></a>cocoaPods\u96c6\u6210</h4><p> \u5047\u8bbe\u4f60\u5df2\u7ecf\u5b8c\u6210\u4e86\u5b89\u88c5<a href="https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html" target="_blank" rel="external">iOS \u5f00\u53d1\u73af\u5883</a> \u548c <a href="https://guides.cocoapods.org/using/getting-started.html" target="_blank" rel="external">CocoaPods</a></p>
+<ol>
+<li><p>\u4ece github \u4e0a clone \u4e00\u4efd\u4ee3\u7801 </p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">git clone https://github.com/alibaba/weex.git</div></pre></td></tr></table></figure>
+</li>
+<li><p>\u628a WeexSDK \u5bfc\u5165\u5230\u4f60\u5df2\u6709\u7684\u9879\u76ee\uff0c\u5982\u679c\u6ca1\u6709\uff0c\u53ef\u4ee5<a href="https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html" target="_blank" rel="external">\u53c2\u8003</a>\u65b0\u5efa\u9879\u76ee<br>\u62f7\u8d1d <code>ios/sdk</code> \u4e0b\u9762\u76ee\u5f55\u5230\u4f60\u7684\u9879\u76ee\u76ee\u5f55\uff0c\u5728\u6dfb\u52a0\u4f9d\u8d56\u4e4b\u524d\uff0c\u786e\u4fdd\u9879\u76ee\u76ee\u5f55\u6709 <code>Podfile</code>\uff0c\u5982\u679c\u6ca1\u6709\uff0c\u521b\u5efa\u4e00\u4e2a\uff0c\u7528\u6587\u672c\u7f16\u8f91\u5668\u6253\u5f00\uff0c\u6dfb\u52a0\u5982\u4e0b\u4f9d\u8d56</p>
+<p> \u5982\u679c\u4f7f\u7528\u6b63\u5f0f\u7248\u672c\u5982 0.6.1 \u7684\uff0c\u5c31\u4e0d\u9700\u8981\u505a \u62f7\u8d1d <code>ios/sdk</code> \u8fd9\u4e2a\u64cd\u4f5c\uff0c\u76f4\u63a5\u5f15\u7528 cocoaPods \u7684 master repo \u4e0a\u5c31\u53ef\u4ee5\uff0c\u8fd9\u4e2a\u9700\u8981\u5728 Podfile \u6700\u524d\u9762\u6dfb\u52a0</p>
+ <figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">source 'https://github.com/CocoaPods/Specs.git'</div></pre></td></tr></table></figure>
+ <figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">target 'YourTarget' do</div><div class="line"> platform :ios, '7.0' </div><div class="line"> pod 'WeexSDK', :path=>'./sdk/' # pod 'WeexSDK', '0.6.1'</div><div class="line">end</div></pre></td></tr></table></figure>
+<p> \u5728\u547d\u4ee4\u884c\uff08terminal\uff09\u4e2d\uff0c\u5207\u6362\u5230\u5f53\u524d\u76ee\u5f55\uff0c\u8fd0\u884c <code>pod install</code>, \u8fc7\u4e00\u4f1a\uff0c\u9879\u76ee\u7684 .workspace \u7ed3\u5c3e\u7684\u6587\u4ef6\u5c31\u88ab\u521b\u5efa\u51fa\u6765\uff0c\u5230\u8fd9\u6b65\uff0c\u4f9d\u8d56\u5df2\u7ecf\u6dfb\u52a0\u5b8c\u4e86</p>
+</li>
+<li><p>\u521d\u59cb\u5316 Weex \u73af\u5883<br>\u5728 AppDelegate.m \u6587\u4ef6\u4e2d\u505a\u521d\u59cb\u5316\u64cd\u4f5c\uff0c\u4e00\u822c\u4f1a\u5728 <code>didFinishLaunchingWithOptions</code> \u65b9\u6cd5\u4e2d\u5982\u4e0b\u6dfb\u52a0</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">//business configuration</div><div class="line">[WXAppConfiguration setAppGroup:@"AliApp"];</div><div class="line">[WXAppConfiguration setAppName:@"WeexDemo"];</div><div class="line">[WXAppConfiguration setAppVersion:@"1.0.0"];</div><div class="line"></div><div class="line">//init sdk enviroment </div><div class="line">[WXSDKEngine initSDKEnviroment];</div><div class="line"></div><div class="line">//register custom module and component\uff0coptional</div><div class="line">[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];</div><div class="line">[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];</div><div class="line"></div><div class="line">//register the implementation of protocol, optional</div><div class="line">[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationP
rotocol)];</div><div class="line"></div><div class="line">//set the log level </div><div class="line">[WXLog setLogLevel: WXLogLevelAll];</div></pre></td></tr></table></figure>
+</li>
+<li><p>\u6e32\u67d3 weex Instance<br>Weex \u652f\u6301\u6574\u4f53\u9875\u9762\u6e32\u67d3\u548c\u90e8\u5206\u6e32\u67d3\u4e24\u79cd\u6a21\u5f0f\uff0c\u4f60\u9700\u8981\u505a\u7684\u4e8b\u60c5\u662f\u7528\u6307\u5b9a\u7684 URL \u6e32\u67d3 weex \u7684 view\uff0c\u7136\u540e\u6dfb\u52a0\u5230\u5b83\u7684\u7236\u5bb9\u5668\u4e0a\uff0c\u7236\u5bb9\u5668\u4e00\u822c\u90fd\u662f viewController</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">#import <WeexSDK/WXSDKInstance.h></div><div class="line">- (void)viewDidLoad </div><div class="line">{</div><div class="line"> [super viewDidLoad];</div><div class="line"></div><div class="line"> _instance = [[WXSDKInstance alloc] init];</div><div class="line"> _instance.viewController = self;</div><div class="line"> _instance.frame = self.view.frame; </div><div class="line"></div><div class="line"> __weak typeof(self) weakSelf = self;</div><div class="line"> _instance.onCreate = ^(UIView *view) {</div><div class="line"> [weakSelf.weexView removeFromSuperview];</div><div class="line"> [weakSelf.view addSubview:weakSelf.weexView];</div><div class="line"> };</div><div class="line"></div><div class="line"> _instance.onFailed = ^(NSError *error) {</div><div class="line"> //process failure</div><div class="line"> };</div><div cl
ass="line"></div><div class="line"> _instance.renderFinish = ^ (UIView *view) {</div><div class="line"> //process renderFinish</div><div class="line"> };</div><div class="line"> [_instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];</div><div class="line">}</div></pre></td></tr></table></figure>
+</li>
+</ol>
+<p> WXSDKInstance \u662f\u5f88\u91cd\u8981\u7684\u4e00\u4e2a\u7c7b\uff0c\u63d0\u4f9b\u4e86\u57fa\u7840\u7684\u65b9\u6cd5\u548c\u4e00\u4e9b\u56de\u8c03\uff0c\u5982<code>renderWithURL</code>,<code>onCreate</code>,<code>onFailed</code>\u7b49\uff0c\u53ef\u4ee5\u53c2\u89c1 <code>WXSDKInstance.h</code>\u7684 \u58f0\u660e</p>
+<ol>
+<li><p>\u9500\u6bc1 Weex Instance</p>
+<p>\u5728 viewController \u7684 dealloc \u9636\u6bb5 \u9500\u6bc1\u6389 weex instance\uff0c \u91ca\u653e\u5185\u5b58\uff0c\u907f\u514d\u9020\u6210\u5185\u5b58\u6cc4\u9732</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">- (void)dealloc</div><div class="line">{</div><div class="line"> [_instance destroyInstance];</div><div class="line">}</div></pre></td></tr></table></figure>
+</li>
+</ol>
+<h3 id="\u5bfc\u5165-Weex-SDK-framework\u5230\u5de5\u7a0b"><a href="#\u5bfc\u5165-Weex-SDK-framework\u5230\u5de5\u7a0b" class="headerlink" title="\u5bfc\u5165 Weex SDK framework\u5230\u5de5\u7a0b"></a>\u5bfc\u5165 Weex SDK framework\u5230\u5de5\u7a0b</h3><p> \u53c2\u8003<a href="https://open.taobao.com/doc2/detail?spm=a219a.7629140.0.0.tFddsV&&docType=1&articleId=104829" target="_blank" rel="external">\u6b64\u5904</a>\u76f4\u63a5\u5bfc\u5165weexSDK</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/advanced/integrate-to-ios.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/integrate-to-ios.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/blog/index.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/blog/index.html b/content/cn/v-0.10/blog/index.html
new file mode 100644
index 0000000..ff969bb
--- /dev/null
+++ b/content/cn/v-0.10/blog/index.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="website">
+<meta property="og:title" content="Weex">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/blog/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.934Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="blog" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "blog";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="blog-wrapper wrapper">
+ <div class="archives">
+
+
+ <article class="blog-article blog-type-post">
+ <div class="blog-article-inner">
+ <header class="article-header">
+
+
+ <h1 itemprop="name">
+ <a class="article-title" href="/cn/hello/">hello</a>
+ </h1>
+
+
+ <time class="article-date" datetime="2016-12-27T07:54:28.000Z">Updated time: 27/12/2016</time>
+</header>
+
+ </div>
+</article>
+
+
+
+</div>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/blog/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/blog/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/develop-on-your-local-machine.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/develop-on-your-local-machine.html b/content/cn/v-0.10/guide/develop-on-your-local-machine.html
new file mode 100644
index 0000000..859574b
--- /dev/null
+++ b/content/cn/v-0.10/guide/develop-on-your-local-machine.html
@@ -0,0 +1,581 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762\u4f7f\u7528 dotWe \u5bf9 Weex \u5c1d\u9c9c\u662f\u4e00\u4e2a\u4e0d\u9519\u7684\u9009\u62e9\uff0c\u4f46\u5982\u679c\u4f60\u60f3\u66f4\u4e13\u4e1a\u7684\u5f00\u53d1 Weex\uff0c dotWe \u5c31\u4e0d\u600e\u4e48\u591f\u7528\u4e86\u3002\u672c\u7ae0\u4f1a\u6559\u4f60\u5982\u4f55\u642d\u5efa\u672c\u5730\u5f00\u53d1\u73af\u5883\u8fdb\u884c Weex \u5f00\u53d1\u3002
+\u7b2c\u4e00\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56\u9996\u5148\uff0c\u4f60\u9700\u8981 Node.js \u548c weex-toolkit\u3002
+\u5b89\u88c5 Node.js \u65b9\u5f0f\u591a\u79cd\u591a\u6837\uff0c\u6700\u7b80\u5355\u7684\u65b9\u5f0f\u662f\u5728 Node.js \u5b98\u7f51 \u4e0b\u8f7d\u53ef\u6267\u884c\u7a0b\u5e8f\u76f4\u63a5\u5b89\u88c5\u5373\u53ef\u3002
+\u5bf9\u4e8e Mac\uff0c">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/develop-on-your-local-machine.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762\u4f7f\u7528 dotWe \u5bf9 Weex \u5c1d\u9c9c\u662f\u4e00\u4e2a\u4e0d\u9519\u7684\u9009\u62e9\uff0c\u4f46\u5982\u679c\u4f60\u60f3\u66f4\u4e13\u4e1a\u7684\u5f00\u53d1 Weex\uff0c dotWe \u5c31\u4e0d\u600e\u4e48\u591f\u7528\u4e86\u3002\u672c\u7ae0\u4f1a\u6559\u4f60\u5982\u4f55\u642d\u5efa\u672c\u5730\u5f00\u53d1\u73af\u5883\u8fdb\u884c Weex \u5f00\u53d1\u3002
+\u7b2c\u4e00\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56\u9996\u5148\uff0c\u4f60\u9700\u8981 Node.js \u548c weex-toolkit\u3002
+\u5b89\u88c5 Node.js \u65b9\u5f0f\u591a\u79cd\u591a\u6837\uff0c\u6700\u7b80\u5355\u7684\u65b9\u5f0f\u662f\u5728 Node.js \u5b98\u7f51 \u4e0b\u8f7d\u53ef\u6267\u884c\u7a0b\u5e8f\u76f4\u63a5\u5b89\u88c5\u5373\u53ef\u3002
+\u5bf9\u4e8e Mac\uff0c">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1kHFrOFXXXXaYXXXXXXXXXXXX-615-308.jpg">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1fZBpOFXXXXaFXXXXXXXXXXXX-506-1024.jpg">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.935Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762">
+<meta name="twitter:description" content="\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762\u4f7f\u7528 dotWe \u5bf9 Weex \u5c1d\u9c9c\u662f\u4e00\u4e2a\u4e0d\u9519\u7684\u9009\u62e9\uff0c\u4f46\u5982\u679c\u4f60\u60f3\u66f4\u4e13\u4e1a\u7684\u5f00\u53d1 Weex\uff0c dotWe \u5c31\u4e0d\u600e\u4e48\u591f\u7528\u4e86\u3002\u672c\u7ae0\u4f1a\u6559\u4f60\u5982\u4f55\u642d\u5efa\u672c\u5730\u5f00\u53d1\u73af\u5883\u8fdb\u884c Weex \u5f00\u53d1\u3002
+\u7b2c\u4e00\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56\u9996\u5148\uff0c\u4f60\u9700\u8981 Node.js \u548c weex-toolkit\u3002
+\u5b89\u88c5 Node.js \u65b9\u5f0f\u591a\u79cd\u591a\u6837\uff0c\u6700\u7b80\u5355\u7684\u65b9\u5f0f\u662f\u5728 Node.js \u5b98\u7f51 \u4e0b\u8f7d\u53ef\u6267\u884c\u7a0b\u5e8f\u76f4\u63a5\u5b89\u88c5\u5373\u53ef\u3002
+\u5bf9\u4e8e Mac\uff0c">
+<meta name="twitter:image" content="https://img.alicdn.com/tps/TB1kHFrOFXXXXaYXXXXXXXXXXXX-615-308.jpg">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link current ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link current ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.935Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1-Weex-\u9875\u9762"><a href="#\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1-Weex-\u9875\u9762" class="headerlink" title="\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762"></a>\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</h1><p>\u4f7f\u7528 <a href="http://dotwe.org" target="_blank" rel="external">dotWe</a> \u5bf9 Weex \u5c1d\u9c9c\u662f\u4e00\u4e2a\u4e0d\u9519\u7684\u9009\u62e9\uff0c\u4f46\u5982\u679c\u4f60\u60f3\u66f4\u4e13\u4e1a\u7684\u5f00\u53d1 Weex\uff0c <a href="http://dotwe.org" target="_blank" rel="external">dotWe</a> \u5c31\u4e0d\u600e\u4e48\u591f\u7528\u4e86\u3002\u672c\u7ae0\u4f1a\u6559\u4f60\u5982\u4f55\u642d\u5efa\u672c\u5730\u5f00\u53d1\u73af\u5883\u8fdb\u884c Weex \u5f00\u53d1\u3002</p>
+<h2 id="\u7b2c\u4e00\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56"><a href="#\u7b2c\u4e00\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56" class="headerlink" title="\u7b2c\u4e00\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56"></a>\u7b2c\u4e00\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56</h2><p>\u9996\u5148\uff0c\u4f60\u9700\u8981 Node.js \u548c weex-toolkit\u3002</p>
+<p>\u5b89\u88c5 Node.js \u65b9\u5f0f\u591a\u79cd\u591a\u6837\uff0c\u6700\u7b80\u5355\u7684\u65b9\u5f0f\u662f\u5728 <a href="https://nodejs.org/en/" target="_blank" rel="external">Node.js \u5b98\u7f51</a> \u4e0b\u8f7d\u53ef\u6267\u884c\u7a0b\u5e8f\u76f4\u63a5\u5b89\u88c5\u5373\u53ef\u3002</p>
+<p>\u5bf9\u4e8e Mac\uff0c\u53ef\u4ee5\u4f7f\u7528 <a href="http://brew.sh/" target="_blank" rel="external">Homebrew</a> \u8fdb\u884c\u5b89\u88c5\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">brew install node</div></pre></td></tr></table></figure>
+<blockquote>
+<p>\u66f4\u591a\u5b89\u88c5\u65b9\u5f0f\u53ef\u53c2\u8003 <a href="https://nodejs.org/en/download/" target="_blank" rel="external">Node.js \u5b98\u65b9\u4fe1\u606f</a></p>
+</blockquote>
+<p>\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u68c0\u6d4b\u662f\u5426\u5b89\u88c5\u6210\u529f\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ node -v</div><div class="line">v6.3.1</div><div class="line">$ npm -v</div><div class="line">3.10.3</div></pre></td></tr></table></figure>
+<p>\u901a\u5e38\uff0c\u5b89\u88c5\u4e86 Node.js \u73af\u5883\uff0cnpm \u5305\u7ba1\u7406\u5de5\u5177\u4e5f\u968f\u4e4b\u5b89\u88c5\u4e86\u3002\u56e0\u6b64\uff0c\u76f4\u63a5\u4f7f\u7528 npm \u6765\u5b89\u88c5 weex-toolkit\u3002</p>
+<blockquote>
+<p>npm \u662f\u4e00\u4e2a JavaScript \u5305\u7ba1\u7406\u5de5\u5177\uff0c\u5b83\u53ef\u4ee5\u8ba9\u5f00\u53d1\u8005\u8f7b\u677e\u5171\u4eab\u548c\u91cd\u7528\u4ee3\u7801\u3002Weex \u5f88\u591a\u4f9d\u8d56\u6765\u81ea\u793e\u533a\uff0c\u540c\u6837\uff0cWeex \u4e5f\u5c06\u5f88\u591a\u5de5\u5177\u53d1\u5e03\u5230\u793e\u533a\u65b9\u4fbf\u5f00\u53d1\u8005\u4f7f\u7528\u3002</p>
+</blockquote>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ npm install -g weex-toolkit </div><div class="line">``` </div><div class="line"></div><div class="line">\u56fd\u5185\u5f00\u53d1\u8005\u53ef\u4ee5\u8003\u8651\u4f7f\u7528\u6dd8\u5b9d\u7684 npm \u955c\u50cf \u2014\u2014 [cnpm](https://npm.taobao.org/) \u5b89\u88c5 weex-toolkit</div><div class="line"></div><div class="line">```bash</div><div class="line">$ npm install -g cnpm</div><div class="line">$ cnpm install -g weex-toolkit</div></pre></td></tr></table></figure>
+<p><em>\u63d0\u793a\uff1a</em></p>
+<p>\u5982\u679c\u63d0\u793a\u6743\u9650\u9519\u8bef\uff08<em>permission error</em>\uff09\uff0c\u4f7f\u7528 <code>sudo</code> \u5173\u952e\u5b57\u8fdb\u884c\u5b89\u88c5</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ sudo cnpm install -g weex-toolkit</div></pre></td></tr></table></figure>
+<p>\u5b89\u88c5\u7ed3\u675f\u540e\u4f60\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528 <code>weex</code> \u547d\u4ee4\u9a8c\u8bc1\u662f\u5426\u5b89\u88c5\u6210\u529f\uff0c\u5b83\u4f1a\u663e\u793a <code>weex</code> \u547d\u4ee4\u884c\u5de5\u5177\u5404\u53c2\u6570\uff1a</p>
+<p><img src="https://img.alicdn.com/tps/TB1kHFrOFXXXXaYXXXXXXXXXXXX-615-308.jpg" alt=""></p>
+<h2 id="\u7b2c2\u6b65\uff1a\u521b\u5efa\u6587\u4ef6"><a href="#\u7b2c2\u6b65\uff1a\u521b\u5efa\u6587\u4ef6" class="headerlink" title="\u7b2c2\u6b65\uff1a\u521b\u5efa\u6587\u4ef6"></a>\u7b2c2\u6b65\uff1a\u521b\u5efa\u6587\u4ef6</h2><p>\u73b0\u5728\u53ef\u4ee5\u5f00\u59cb\u7f16\u5199\u4ee3\u7801\u4e86\u3002\u9996\u5148\uff0c\u6211\u4eec\u521b\u5efa\u4e00\u4e2a <code>.we</code> \u6587\u4ef6\uff08Weex \u7a0b\u5e8f\u7684\u6587\u4ef6\u540e\u7f00\uff08\u6269\u5c55\u540d\uff09\u662f <code>.we</code>\uff09\u3002</p>
+<p>\u6253\u5f00\u7a7a\u767d\u7684 <code>hello.we</code> \u6587\u4ef6\uff0c\u8f93\u5165\u4e09\u4e2a\u6807\u7b7e\uff0c\u5185\u5bb9\u4e3a\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></div><div class="line"><span class="tag"></<span class="name">script</span>></span> </div><div class="line">``` </div><div class="line"></div><div class="line">\u6211\u4eec\u5728 [Get started](./index.md) \u91cc\u5df2\u7ecf\u4ecb\u7ecd\u8fc7 Weex \u57fa\u672c\u7684\u4ee3\u7801\u7ed3\u6784\uff1a`<span class="tag"><<span class="name">template</span>></span>`\u3001`<span class="tag"><<span class="name">style</spa
n>></span><span class="xml">`\u3001`<span class="tag"><<span class="name">script</span>></span><span class="xml">` \u5206\u522b\u5bf9\u5e94\u4e8e Web \u4e2d\u7684 HTML\uff0cCSS\uff08`<span class="tag"><<span class="name">style</span>></span><span class="xml">` \u6807\u7b7e\uff09\uff0cJavaScript\uff08`<span class="tag"><<span class="name">script</span>></span><span class="javascript"><span class="string">` \u6807\u7b7e\uff09\u3002</span></span></span></span></span></div><div class="line"></div><div class="line">\u5176\u5b9e\uff0c\u4e0a\u9762\u7684\u4ee3\u7801\u5c31\u662f\u6700\u7b80\u5355\u7684 Weex \u7a0b\u5e8f\u3002\u4f46\u662f `.we<span class="string">` \u6587\u4ef6\u662f\u4e0d\u80fd\u76f4\u63a5\u8fd0\u884c\u7684\uff0c\u8fd9\u65f6\u5019\u9700\u8981\u4f7f\u7528\u521a\u624d\u5b89\u88c5\u597d\u7684 weex-toolkit\u3002weex-toolkit \u4f1a\u7f16\u8bd1 `</span>.we<span class="string">` \u6587\u4ef6\uff0c\u5e76\u4e14\u521b\u5efa\u9759\u6001\u670d\u52a1\u5668\u3002</span></div><div class="line"></div><div class="line">\u8fd9\u91cc\uff0c\u4f7f\u7528 `weex hello.we<span class="string">` \u547d\u4ee4\u7f16\u8bd1\u8be5\u7a0b\u5e8f\u3002</span></div><div class="line"></div><div class="line">`<span class="string">``</span>bash</div><div class="li
ne">$ weex hello.we</div></pre></td></tr></table></figure>
+<p>\u8fd9\u65f6\uff0c\u547d\u4ee4\u884c\u4f1a\u505a\u51e0\u4ef6\u4e8b\uff1a </p>
+<ul>
+<li>\u7f16\u8bd1 <code>.we</code> \u6587\u4ef6\uff1b</li>
+<li>\u542f\u52a8\u70ed\u52a0\u8f7d\u670d\u52a1\uff1b</li>
+<li>\u542f\u52a8\u9759\u6001\u670d\u52a1\u5668\uff1b</li>
+<li>\u62c9\u8d77\u6d4f\u89c8\u5668\uff0c\u8bbf\u95ee <code>http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=hello.js&loader=xhr</code></li>
+</ul>
+<p>\u8fd9\u65f6\u5019\uff0c\u5df2\u7ecf\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u9884\u89c8 Weex \u9875\u9762\u4e86\u3002\u4e0d\u8fc7\u6b64\u65f6\u9875\u9762\u662f\u7a7a\u767d\u7684\uff0c\u56e0\u4e3a <code>.we</code> \u6587\u4ef6\u4e2d\u6ca1\u6709\u4efb\u4f55\u5b9e\u8d28\u7684\u5185\u5bb9\u3002</p>
+<h2 id="\u7b2c3\u6b65\uff1a\u6dfb\u52a0\u5185\u5bb9"><a href="#\u7b2c3\u6b65\uff1a\u6dfb\u52a0\u5185\u5bb9" class="headerlink" title="\u7b2c3\u6b65\uff1a\u6dfb\u52a0\u5185\u5bb9"></a>\u7b2c3\u6b65\uff1a\u6dfb\u52a0\u5185\u5bb9</h2><p>\u4fee\u6539 <code>weex.we</code> \u6587\u4ef6\uff0c\u5411 <code><template></code> \u6807\u7b7e\u4e2d\u6dfb\u52a0\u5185\u5bb9\u3002\u5177\u4f53\u4ee3\u7801\u5982\u4e0b\uff1a </p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Hello world<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="undefined"></span><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></
span></div></pre></td></tr></table></figure>
+<p>\u4fdd\u5b58\u4ee3\u7801\u540e\uff0c\u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u5237\u65b0\u9875\u9762\uff0c\u8fd9\u65f6\u4f1a\u770b\u5230\u6d4f\u89c8\u5668\u663e\u793a\u4e86 \u201cHello world\u201d\u3002</p>
+<h2 id="\u7b2c4\u6b65\uff1a\u6dfb\u52a0\u6837\u5f0f"><a href="#\u7b2c4\u6b65\uff1a\u6dfb\u52a0\u6837\u5f0f" class="headerlink" title="\u7b2c4\u6b65\uff1a\u6dfb\u52a0\u6837\u5f0f"></a>\u7b2c4\u6b65\uff1a\u6dfb\u52a0\u6837\u5f0f</h2><p>\u73b0\u5728\uff0c\u5bf9\u5df2\u6709\u7684\u6587\u672c\u5185\u5bb9\u8fdb\u884c\u6837\u5f0f\u4fee\u9970\u3002\u8fd9\u91cc\u5c06\u6587\u672c\u989c\u8272\u8bbe\u7f6e\u4e3a\u7ea2\u8272\uff0c\u5b57\u4f53\u5927\u5c0f\u4e3a 50 \u50cf\u7d20\u3002\u5177\u4f53\u4ee3\u7801\u5982\u4e0b\uff1a </p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span> <span class="attr">style</span>=<span class="string">"color: #FF0000;"</span>></span>Hello world<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.text</span>{</div><div class="line"> <span class="attribute">font-s
ize</span>: <span class="number">50</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p>\u8fd9\u65f6\u5019\uff0c\u6d4f\u89c8\u5668\u5df2\u7ecf\u91cd\u65b0\u8f7d\u5165\u4e86\u9875\u9762\u3002\u5176\u5b9e\uff0c\u662fweex-toolkit\u5f00\u542f\u4e86\u70ed\u52a0\u8f7d\u3002\u53ef\u4ee5\u770b\u5230\u7ea2\u8272\u7684 \u201cHello world\u201d\u3002</p>
+<p><strong>\u6ce8\u610f\uff1a</strong><br>Weex \u652f\u6301\u901a\u8fc7 <code>style</code> \u6807\u7b7e\u6765\u8bbe\u5b9a\u6837\u5f0f\uff0c\u4e5f\u652f\u6301\u5185\u8054\u6837\u5f0f\u98ce\u683c\u3002 \u5bf9\u4e8e\u6570\u503c\uff0c\u65e0\u9700\u6dfb\u52a0\u4efb\u4f55\u5355\u4f4d\uff08\u5305\u62ec px\u3001em\u3001rem \u7b49\uff09\uff0c\u8fd9\u662f\u5efa\u8bae\u7684\u5199\u6cd5\u3002\u5982\u9700\u4e86\u89e3\u6709\u54ea\u4e9b\u901a\u7528\u7684\u6837\u5f0f\uff0c\u53ef\u4ee5\u53c2\u8003 <a href="../references/common-style.md">\u901a\u7528\u6837\u5f0f</a>\u3002</p>
+<h2 id="\u7b2c5\u6b65\uff1a\u9884\u89c8"><a href="#\u7b2c5\u6b65\uff1a\u9884\u89c8" class="headerlink" title="\u7b2c5\u6b65\uff1a\u9884\u89c8"></a>\u7b2c5\u6b65\uff1a\u9884\u89c8</h2><p>\u5df2\u7ecf\u5728\u6d4f\u89c8\u5668\u4e2d\u770b\u5230\u4e86\u521a\u624d\u7684\u4ee3\u7801\u6548\u679c\uff0c\u4e3a\u4e86\u9a8c\u8bc1\u4e09\u7aef\u662f\u5426\u4e00\u81f4\uff0c\u6211\u4eec\u8fd8\u9700 <a href="https://alibaba.github.io/weex/download.html" target="_blank" rel="external">Playground App</a> \u9a8c\u8bc1\u3002</p>
+<p>\u8fd9\u91cc\uff0c\u6211\u4eec\u9700\u8981\u4e3a <code>weex hello.we</code> \u589e\u52a0 <code>--qr</code> \u53c2\u6570\uff0c\u8868\u793a\u751f\u6210\u4e8c\u7ef4\u7801\u3002</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ weex hello.we --qr</div></pre></td></tr></table></figure>
+<p>\u7136\u540e\uff0c\u4f7f\u7528 <a href="https://alibaba.github.io/weex/download.html" target="_blank" rel="external">Playground</a> \u626b\u7801\u5373\u53ef\u3002</p>
+<p><img src="https://img.alicdn.com/tps/TB1fZBpOFXXXXaFXXXXXXXXXXXX-506-1024.jpg" alt="mobile_preview"></p>
+<h2 id="\u7b2c6\u6b65\uff1a\u8c03\u8bd5"><a href="#\u7b2c6\u6b65\uff1a\u8c03\u8bd5" class="headerlink" title="\u7b2c6\u6b65\uff1a\u8c03\u8bd5"></a>\u7b2c6\u6b65\uff1a\u8c03\u8bd5</h2><p>weex-toolkit \u5df2\u7ecf\u96c6\u6210\u4e86 Debugger\uff0c\u53ea\u9700\u8981\u4f7f\u7528\u5982\u4e0b\u547d\u4ee4\u5373\u53ef\u5f00\u542f Debugger \u5f00\u5173\u8c03\u8bd5 <code>hello.we</code>\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ weex debug hello.we</div></pre></td></tr></table></figure>
+<p>\u6211\u4eec\u8f93\u5165\u4ee5\u4e0a\u547d\u4ee4\u5f00\u542f\uff0c\u4f1a\u81ea\u52a8\u6253\u5f00\u6d4f\u89c8\u5668\uff0c\u9875\u9762\u4e0a\u6709\u4e24\u4e2a\u4e8c\u7ef4\u7801\uff0c\u7b2c\u4e00\u4e2a\u662f Debugger Server\uff0c\u7b2c\u4e8c\u4e2a\u662f <code>.we</code> \u6587\u4ef6\u7684\u5730\u5740\u3002\u6211\u4eec\u5728 Playground \u4e2d\u5148\u626b\u7b2c\u4e00\u4e2a\uff0c\u6b64\u65f6\u6d4f\u89c8\u5668\u4f1a\u8fdb\u5165\u4e00\u4e2a\u65b0\u7684\u9875\u9762\uff0c\u8bf7\u4f60\u9009\u62e9\u4f60\u9700\u8981\u7684\u8c03\u8bd5\u6a21\u5f0f\uff1a</p>
+<ul>
+<li>Debugger\uff1a\u5c06\u4f1a\u6253\u5f00 js debugger \u9875\u9762\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7 debugger \u9875\u9762\u8c03\u8bd5 js\uff08\u8bf8\u5982\u6253\u65ad\u70b9 \u67e5\u770bjs log \u548c\u67e5\u770b\u8c03\u7528\u5806\u6808\u7b49\u4fe1\u606f\uff09\uff1b</li>
+<li>Inspector\uff1a\u5c06\u4f1a\u6253\u5f00 inspector \u9875\u9762\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7\u8fd9\u4e2a\u9875\u9762\u67e5\u770b Weex \u9875\u9762\u7684 element \u5c5e\u6027\u7ed3\u6784\uff0c\u5305\u542b\u9ad8\u4eae\u5143\u7d20\uff0c\u5c55\u793a\u6837\u5f0f\u8868\uff0c\u4ee5\u53ca\u663e\u793a native \u7684 log\u3002\u540c\u65f6\u53ef\u4ee5\u6253\u5f00\u4e00\u4e2a\u8fdc\u7a0b\u7684\u624b\u673a\u955c\u50cf\uff0c\u4fbf\u4e8e\u67e5\u770b\u754c\u9762\u3002\u53e6\u5916\u8c03\u8bd5\u65b9\u5757\u4e2d\u7684 ElementMode \u53ef\u4ee5\u7528\u6765\u9009\u62e9 element \u6811\u663e\u793a\u539f\u59cb\u7684 native \u7ec4\u4ef6\u6811\u8fd8\u662f\u663e\u793a\u9762\u5411\u524d\u7aef\u540c\u5b66\u7684 DSL \uff08HTML\uff09\u7ec4\u4ef6\u6811\u3002</li>
+</ul>
+<p>\u9009\u62e9\u4e00\u79cd\u6a21\u5f0f\u540e\u4f1a\u65b0\u5f00\u7a97\u53e3\u8fdb\u5165\u8c03\u8bd5\u9875\u9762\uff0c\u8fd9\u65f6\u6211\u4eec\u518d\u626b\u7b2c\u4e8c\u4e2a\u4e8c\u7ef4\u7801\u5373\u53ef\u8fdb\u5165\u6211\u4eec\u60f3\u8981\u8c03\u8bd5\u7684\u9875\u9762\u8fdb\u884c\u8c03\u8bd5\u4e86\u3002</p>
+<h2 id="\u63a5\u4e0b\u6765\u505a\u4ec0\u4e48\uff1f"><a href="#\u63a5\u4e0b\u6765\u505a\u4ec0\u4e48\uff1f" class="headerlink" title="\u63a5\u4e0b\u6765\u505a\u4ec0\u4e48\uff1f"></a>\u63a5\u4e0b\u6765\u505a\u4ec0\u4e48\uff1f</h2><p>\u5230\u76ee\u524d\u4e3a\u6b62\uff0c\u4f60\u5df2\u7ecf\u53ef\u4ee5\u5728 <a href="http://dotwe.org" target="_blank" rel="external">dotWe</a> \u6216\u8005\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762\u3002\u63a5\u4e0b\u6765\u4f60\u53ef\u4ee5\u53bb\u5b66\u4e60 Weex <a href="./syntax/main.md">\u8bed\u6cd5</a> \u548c <a href="../references/main.md">\u5f00\u53d1\u624b\u518c</a> \u4e86\u89e3 Weex \u66f4\u591a\u7279\u6027\u3002\u8fd9\u4e9b\u8bed\u6cd5\u548c\u7279\u6027\uff0c\u4f60\u5b8c\u5168\u53ef\u4ee5\u7528 <a href="https://alibaba.github.io/weex/download.html" target="_blank" rel="external">Playground</a> \u8fd0\u884c\u8d77\u6765\u3002</p>
+<p>\u5982\u679c\u4f60\u5df2\u7ecf\u719f\u6089 Weex \u5f00\u53d1\uff0c\u4f60\u5e94\u8be5\u8003\u8651\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u652f\u6301 Weex \u9875\u9762\uff0c\u6216\u8005\uff0c\u600e\u6837\u7528 Weex \u5f00\u53d1\u4e00\u4e2a\u5168\u65b0\u7684 App \u5462\uff1f\u5e26\u7740\u8fd9\u4e9b\u95ee\u9898\uff0c\u4f60\u53ef\u4ee5\u9605\u8bfb <a href="./how-to/main.md">\u5f00\u53d1\u8fdb\u9636</a>\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/develop-on-your-local-machine.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/develop-on-your-local-machine.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/how-to/debug-with-html5.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/how-to/debug-with-html5.html b/content/cn/v-0.10/guide/how-to/debug-with-html5.html
new file mode 100644
index 0000000..0c60e29
--- /dev/null
+++ b/content/cn/v-0.10/guide/how-to/debug-with-html5.html
@@ -0,0 +1,539 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5982\u4f55\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5\uff1f\u7531\u4e8e weex-html5 \u53ef\u4ee5\u5728\u73b0\u4ee3\u79fb\u52a8\u6d4f\u89c8\u5668\u4e0a\u8fd0\u884c\uff0c\u56e0\u6b64\u81ea\u7136\u652f\u6301\u5728\u6d4f\u89c8\u5668\u7684\u5f00\u53d1\u5de5\u5177\u4e2d\u8c03\u8bd5 weex-html5 \u4ee3\u7801\u3002\u4e0b\u9762\u5c06\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528\u6d4f\u89c8\u5668\u7684 devTools \u8c03\u8bd5\u548c\u5206\u6790 weex-html5 \u7a0b\u5e8f\u3002\u4ee5chrome\u7684\u8c03\u8bd5\u5de5\u5177\u4e3a\u4f8b\uff1a
+
+Elements\u4f7f\u7528 Elements \u9762\u677f\u6765\u68c0\u67e5 weex-html5 \u9875\u9762\u7684\u5e03\u5c40\u548c\u8bbe\u8ba1\uff0c\u5e76\u64cd\u7eb5 DOM \u548c CSS \u6765\u81ea\u7531\u5730\u505a\u4e00\u4e9b\u5f00\u53d1">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/how-to/debug-with-html5.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5982\u4f55\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5\uff1f\u7531\u4e8e weex-html5 \u53ef\u4ee5\u5728\u73b0\u4ee3\u79fb\u52a8\u6d4f\u89c8\u5668\u4e0a\u8fd0\u884c\uff0c\u56e0\u6b64\u81ea\u7136\u652f\u6301\u5728\u6d4f\u89c8\u5668\u7684\u5f00\u53d1\u5de5\u5177\u4e2d\u8c03\u8bd5 weex-html5 \u4ee3\u7801\u3002\u4e0b\u9762\u5c06\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528\u6d4f\u89c8\u5668\u7684 devTools \u8c03\u8bd5\u548c\u5206\u6790 weex-html5 \u7a0b\u5e8f\u3002\u4ee5chrome\u7684\u8c03\u8bd5\u5de5\u5177\u4e3a\u4f8b\uff1a
+
+Elements\u4f7f\u7528 Elements \u9762\u677f\u6765\u68c0\u67e5 weex-html5 \u9875\u9762\u7684\u5e03\u5c40\u548c\u8bbe\u8ba1\uff0c\u5e76\u64cd\u7eb5 DOM \u548c CSS \u6765\u81ea\u7531\u5730\u505a\u4e00\u4e9b\u5f00\u53d1">
+<meta property="og:image" content="https://gw.alicdn.com/mt/TB1V1hIMpXXXXaHXVXXXXXXXXXX-983-730.png">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.937Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5">
+<meta name="twitter:description" content="\u5982\u4f55\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5\uff1f\u7531\u4e8e weex-html5 \u53ef\u4ee5\u5728\u73b0\u4ee3\u79fb\u52a8\u6d4f\u89c8\u5668\u4e0a\u8fd0\u884c\uff0c\u56e0\u6b64\u81ea\u7136\u652f\u6301\u5728\u6d4f\u89c8\u5668\u7684\u5f00\u53d1\u5de5\u5177\u4e2d\u8c03\u8bd5 weex-html5 \u4ee3\u7801\u3002\u4e0b\u9762\u5c06\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528\u6d4f\u89c8\u5668\u7684 devTools \u8c03\u8bd5\u548c\u5206\u6790 weex-html5 \u7a0b\u5e8f\u3002\u4ee5chrome\u7684\u8c03\u8bd5\u5de5\u5177\u4e3a\u4f8b\uff1a
+
+Elements\u4f7f\u7528 Elements \u9762\u677f\u6765\u68c0\u67e5 weex-html5 \u9875\u9762\u7684\u5e03\u5c40\u548c\u8bbe\u8ba1\uff0c\u5e76\u64cd\u7eb5 DOM \u548c CSS \u6765\u81ea\u7531\u5730\u505a\u4e00\u4e9b\u5f00\u53d1">
+<meta name="twitter:image" content="https://gw.alicdn.com/mt/TB1V1hIMpXXXXaHXVXXXXXXXXXX-983-730.png">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link current ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link current ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.937Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5982\u4f55\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5\uff1f"><a href="#\u5982\u4f55\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5\uff1f" class="headerlink" title="\u5982\u4f55\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5\uff1f"></a>\u5982\u4f55\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5\uff1f</h1><p>\u7531\u4e8e weex-html5 \u53ef\u4ee5\u5728\u73b0\u4ee3\u79fb\u52a8\u6d4f\u89c8\u5668\u4e0a\u8fd0\u884c\uff0c\u56e0\u6b64\u81ea\u7136\u652f\u6301\u5728\u6d4f\u89c8\u5668\u7684\u5f00\u53d1\u5de5\u5177\u4e2d\u8c03\u8bd5 weex-html5 \u4ee3\u7801\u3002\u4e0b\u9762\u5c06\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528\u6d4f\u89c8\u5668\u7684 devTools \u8c03\u8bd5\u548c\u5206\u6790 weex-html5 \u7a0b\u5e8f\u3002\u4ee5chrome\u7684\u8c03\u8bd5\u5de5\u5177\u4e3a\u4f8b\uff1a</p>
+<p><img src="https://gw.alicdn.com/mt/TB1V1hIMpXXXXaHXVXXXXXXXXXX-983-730.png" alt="chrome's debug tool"></p>
+<h2 id="Elements"><a href="#Elements" class="headerlink" title="Elements"></a>Elements</h2><p>\u4f7f\u7528 Elements \u9762\u677f\u6765\u68c0\u67e5 weex-html5 \u9875\u9762\u7684\u5e03\u5c40\u548c\u8bbe\u8ba1\uff0c\u5e76\u64cd\u7eb5 DOM \u548c CSS \u6765\u81ea\u7531\u5730\u505a\u4e00\u4e9b\u5f00\u53d1\u5b9e\u9a8c\u3002</p>
+<h2 id="Console"><a href="#Console" class="headerlink" title="Console"></a>Console</h2><p>\u60a8\u53ef\u4ee5\u4f7f\u7528 <code>console.log</code> \u5728\u63a7\u5236\u53f0\u4e0a\u8bb0\u5f55\u4fe1\u606f\u3002</p>
+<h2 id="\u65ad\u70b9"><a href="#\u65ad\u70b9" class="headerlink" title="\u65ad\u70b9"></a>\u65ad\u70b9</h2><p>\u60a8\u53ef\u4ee5\u8bbe\u7f6e\u65ad\u70b9\u6765\u8c03\u8bd5\u4ee3\u7801\uff0c\u65ad\u70b9\u662f\u8c03\u8bd5\u4ee3\u7801\u7684\u6700\u6709\u6548\u7684\u65b9\u6cd5\u4e4b\u4e00\u3002\u65ad\u70b9\u4f7f\u60a8\u80fd\u591f\u6682\u505c\u811a\u672c\u6267\u884c\uff0c\u7136\u540e\u67e5\u770b\u8be5\u65f6\u523b\u7684\u8c03\u7528\u5806\u6808\u53d8\u91cf\u503c\u3002</p>
+<p>\u624b\u52a8\u65ad\u70b9\u662f\u60a8\u5728\u7279\u5b9a\u4ee3\u7801\u884c\u4e0a\u8bbe\u7f6e\u7684\u5404\u4e2a\u65ad\u70b9\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7 Chrome DevTools GUI \u6216\u5728\u4ee3\u7801\u4e2d\u63d2\u5165 debugger \u5173\u952e\u5b57\u6765\u8bbe\u7f6e\u8fd9\u4e9b\u65ad\u70b9\u3002</p>
+<h2 id="\u627e\u51fa-bug-\u7684\u7cbe\u786e\u4f4d\u7f6e"><a href="#\u627e\u51fa-bug-\u7684\u7cbe\u786e\u4f4d\u7f6e" class="headerlink" title="\u627e\u51fa bug \u7684\u7cbe\u786e\u4f4d\u7f6e"></a>\u627e\u51fa bug \u7684\u7cbe\u786e\u4f4d\u7f6e</h2><p>\u4e00\u822c\u6765\u8bf4\uff0c\u6709\u4e09\u4e2a\u53ef\u80fd\u53d1\u751f\u9519\u8bef\u7684\u5730\u65b9\uff1a\u6e32\u67d3\u5668\uff08weex-html5\uff09\uff0cjs \u6846\u67b6\uff08weex-js\u6846\u67b6\uff09\u548c\u53d8\u538b\u5668\uff08gulp-weex\uff09\u3002</p>
+<p>\u8fd9\u91cc\u6709\u4e00\u4e9b\u65b9\u4fbf\u4ee5\u627e\u51fa\u9519\u8bef\u5efa\u8bae\uff0c\u4ee5\u4fbf\u4f60\u53ef\u4ee5\u5feb\u901f\u8bc6\u522b\u54ea\u4e2a\u662f\u54ea\u4e2a\u5730\u65b9\u7684\u9519\u8bef\uff1a</p>
+<ul>
+<li>\u8bf7\u68c0\u67e5\u63a7\u5236\u53f0\u662f\u5426\u6709\u9519\u8bef\u3002\u5728\u8c03\u8bd5\u6a21\u5f0f\u5982\u679c\u6709\u4e00\u4e2a\u9519\u8bef\u51fa\u73b0\uff0c\u5c06\u4f1a\u5728 console \u4e2d\u6253\u5370\u6709\u5173\u4e8e\u5b83\u7684\u4fe1\u606f\u3002</li>
+<li>\u5728 bridge/receiver.js\uff0c\u67e5\u770b\u662f\u5426\u8c03\u7528\u4e86 <code>callNative</code> \u51fd\u6570\u3002</li>
+<li>\u662f\u5426\u88ab\u8ba4\u4e3a\u662f API \u7684\u65b9\u6cd5\u88ab\u6267\u884c\u3002</li>
+<li>\u662f\u5426\u8c03\u7528\u7528\u4e8e\u4e8b\u4ef6\u89e6\u53d1\u6216\u6267\u884c\u56de\u8c03\u7684 <code>callJS</code> \u65b9\u6cd5\u3002</li>
+</ul>
+<h2 id="\u5176\u4ed6"><a href="#\u5176\u4ed6" class="headerlink" title="\u5176\u4ed6"></a>\u5176\u4ed6</h2><p>\u66f4\u591a\u5173\u4e8e\u5982\u4f55\u8c03\u8bd5 H5 \u9875\u9762\u7684\u4fe1\u606f\u8bf7\u67e5\u770b <a href="https://developers.google.com/web/tools/chrome-devtools/?hl=en" target="_blank" rel="external">chrome\u2019s devTools docs</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/how-to/debug-with-html5.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[08/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/syntax/config-n-data.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/syntax/config-n-data.html b/content/cn/v-0.10/guide/syntax/config-n-data.html
new file mode 100644
index 0000000..bdc495f
--- /dev/null
+++ b/content/cn/v-0.10/guide/syntax/config-n-data.html
@@ -0,0 +1,539 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e\u5728 Weex \u4e2d\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u4e00\u4e9b\u7279\u6b8a\u7684 &lt;script&gt; \u8fdb\u884c\u9875\u9762\u6574\u4f53\u914d\u7f6e\u3002
+\u6ce8\u610f\u4e8b\u9879\uff1a\u8fd9\u4e9b\u914d\u7f6e\u4f1a\u4ee3\u8868\u9875\u9762\u6574\u4f53\uff0c\u6240\u4ee5\u5199\u5728\u81ea\u5b9a\u4e49\u5b50\u7ec4\u4ef6\u4e2d\u662f\u65e0\u6548\u7684\uff0c\u53ea\u6709\u5199\u5728\u9876\u7ea7 ViewModel \u7684 &lt;sctipt&gt; \u4e2d\u624d\u4f1a\u751f\u6548\u3002
+\u5148\u4e3e\u4e2a\u4f8b\u5b50\uff1a
+&lt;!-- definition of sub components --&gt;&lt;element name="sub-">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/syntax/config-n-data.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e\u5728 Weex \u4e2d\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u4e00\u4e9b\u7279\u6b8a\u7684 &lt;script&gt; \u8fdb\u884c\u9875\u9762\u6574\u4f53\u914d\u7f6e\u3002
+\u6ce8\u610f\u4e8b\u9879\uff1a\u8fd9\u4e9b\u914d\u7f6e\u4f1a\u4ee3\u8868\u9875\u9762\u6574\u4f53\uff0c\u6240\u4ee5\u5199\u5728\u81ea\u5b9a\u4e49\u5b50\u7ec4\u4ef6\u4e2d\u662f\u65e0\u6548\u7684\uff0c\u53ea\u6709\u5199\u5728\u9876\u7ea7 ViewModel \u7684 &lt;sctipt&gt; \u4e2d\u624d\u4f1a\u751f\u6548\u3002
+\u5148\u4e3e\u4e2a\u4f8b\u5b50\uff1a
+&lt;!-- definition of sub components --&gt;&lt;element name="sub-">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.943Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e">
+<meta name="twitter:description" content="\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e\u5728 Weex \u4e2d\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u4e00\u4e9b\u7279\u6b8a\u7684 &lt;script&gt; \u8fdb\u884c\u9875\u9762\u6574\u4f53\u914d\u7f6e\u3002
+\u6ce8\u610f\u4e8b\u9879\uff1a\u8fd9\u4e9b\u914d\u7f6e\u4f1a\u4ee3\u8868\u9875\u9762\u6574\u4f53\uff0c\u6240\u4ee5\u5199\u5728\u81ea\u5b9a\u4e49\u5b50\u7ec4\u4ef6\u4e2d\u662f\u65e0\u6548\u7684\uff0c\u53ea\u6709\u5199\u5728\u9876\u7ea7 ViewModel \u7684 &lt;sctipt&gt; \u4e2d\u624d\u4f1a\u751f\u6548\u3002
+\u5148\u4e3e\u4e2a\u4f8b\u5b50\uff1a
+&lt;!-- definition of sub components --&gt;&lt;element name="sub-">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link current ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link current ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.943Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e"><a href="#\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e" class="headerlink" title="\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e"></a>\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</h1><p>\u5728 Weex \u4e2d\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u4e00\u4e9b\u7279\u6b8a\u7684 <code><script></code> \u8fdb\u884c\u9875\u9762\u6574\u4f53\u914d\u7f6e\u3002</p>
+<p><em>\u6ce8\u610f\u4e8b\u9879\uff1a\u8fd9\u4e9b\u914d\u7f6e\u4f1a\u4ee3\u8868\u9875\u9762\u6574\u4f53\uff0c\u6240\u4ee5\u5199\u5728\u81ea\u5b9a\u4e49\u5b50\u7ec4\u4ef6\u4e2d\u662f\u65e0\u6548\u7684\uff0c\u53ea\u6709\u5199\u5728\u9876\u7ea7 ViewModel \u7684 <code><sctipt></code> \u4e2d\u624d\u4f1a\u751f\u6548\u3002</em></p>
+<p>\u5148\u4e3e\u4e2a\u4f8b\u5b50\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment"><!-- definition of sub components --></span></div><div class="line"><span class="tag"><<span class="name">element</span> <span class="attr">name</span>=<span class="string">"sub-component-a"</span>></span>...<span class="tag"></<span class="name">element</span>></span></div><div class="line"><span class="tag"><<span class="name">element</span> <span class="attr">name</span>=<span class="string">"sub-component-b"</span>></span>...<span class="tag"></<span class="name">element</span>></span></div><div class="line"><span class="tag"><<span class="name">element</span> <span class="attr">name</span>=<span class="string">"sub-component-c"</span>></span>...<span class="tag"></<span class="name">element</span>></span></div><div class="line"></div><div class="line"><span class="comment"><!-- definition of top-level component --></span></div><
div class="line"><span class="tag"><<span class="name">template</span>></span>...<span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="undefined"></span><span class="tag"></<span class="name">style</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: { <span class="attr">x</span>: <span class="number">1</span>, <span class="attr">y</span>: <span class="number">2</span> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="comment"><!-- config and data --></span></div><div class="line"><span class="
tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"config"</span>></span><span class="javascript"></span></div><div class="line"> downgrade: {</div><div class="line"> <span class="attr">ios</span>: {</div><div class="line"> <span class="attr">os</span>: <span class="string">'9'</span>, <span class="comment">// all of 9.x.x</span></div><div class="line"> app: <span class="string">'~5.3.2'</span>,</div><div class="line"> <span class="attr">framework</span>: <span class="string">'^1.3'</span>, <span class="comment">// all of 1.3.x</span></div><div class="line"> deviceModel: [<span class="string">'AAAA'</span>, <span class="string">'BBBB'</span>]</div><div class="line"> },</div><div class="line"> <span class="attr">android</span>: {</div><div class="line"> <span class="attr">os</span>: <span class="string">'*'</span>, <span class="comment">// all of version</span></div><div class="line"
> app: <span class="string">'^5'</span>,</div><div class="line"> <span class="attr">framework</span>: <span class="string">''</span>,</div><div class="line"> <span class="attr">deviceModel</span>: <span class="string">''</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"data"</span>></span><span class="undefined"></span></div><div class="line"> { y: 200 }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<h2 id="lt-script-type-quot-config-quot-gt"><a href="#lt-script-type-quot-config-quot-gt" class="headerlink" title="<script type="config">"></a><code><script type="config"></code></h2><p>\u5f00\u53d1\u8005\u53ef\u4ee5\u5728\u9876\u7ea7 ViewModel \u4e2d\u52a0\u5165\u8fd9\u6837\u4e00\u6bb5 <code><script></code>\uff0c\u4ee5 JSON \u683c\u5f0f\u63cf\u8ff0\u9875\u9762\u6574\u4f53\u7684\u914d\u7f6e\u4fe1\u606f\u3002</p>
+<p>\u76ee\u524d\u652f\u6301\u7684\u914d\u7f6e\u4fe1\u606f\u53ea\u6709 <code>downgrade</code>\uff1a\u7528\u6765\u4ece\u5e73\u53f0\u3001\u5e94\u7528\u7b49\u7ef4\u5ea6\u63cf\u8ff0\u9875\u9762\u7684\u964d\u7ea7\u89c4\u5219\u3002\u8fd9\u6837\u8bbe\u8ba1\u5bf9\u4e8e\u4ea7\u54c1\u8fed\u4ee3\u6700\u5927\u7684\u5e2e\u52a9\u662f\u53ef\u4ee5\u5728\u9ad8\u7248\u672c\u4e2d\u4f7f\u7528 Weex\uff0c\u800c\u5728\u4f4e\u7248\u672c\u4e2d\u4f7f\u7528\u4e4b\u524d\u5df2\u6709\u7684\u6e32\u67d3\u65b9\u5f0f\uff0c\u8fd9\u90e8\u5206\u63a7\u5236\u964d\u7ea7\u7684\u7ec6\u8282\u9700\u8981 native \u63a5\u5165\u7684\u65f6\u5019\u8fdb\u884c\u76f8\u5e94\u7684\u8bc6\u522b\u548c\u5177\u4f53\u64cd\u4f5c\u3002</p>
+<p>\u672a\u6765\u8fd9\u91cc\u4f1a\u6709\u66f4\u591a\u7684\u914d\u7f6e\u9879\u51fa\u73b0\u5728\u8fd9\u91cc\u3002</p>
+<h2 id="lt-script-type-quot-data-quot-gt"><a href="#lt-script-type-quot-data-quot-gt" class="headerlink" title="<script type="data">"></a><code><script type="data"></code></h2><p>\u5f00\u53d1\u8005\u53ef\u4ee5\u5728\u9876\u7ea7 ViewModel \u4e2d\u52a0\u5165\u8fd9\u6837\u4e00\u6bb5 <code><script></code>\uff0c\u4ee5 JSON \u683c\u5f0f\u989d\u5916\u914d\u7f6e\u9876\u7ea7 ViewModel \u7684\u6570\u636e\uff0c\u5b83\u4f1a\u8986\u76d6\u9876\u7ea7 ViewModel \u6570\u636e\u4e2d\u76f8\u5e94\u7684\u5b57\u6bb5\u3002\u6bd4\u5982\u4e0a\u8ff0\u4f8b\u5b50\u4e2d\uff0c\u6700\u7ec8\u7684\u9876\u7ea7 ViewModel \u4e2d\u7684\u6570\u636e\u4e3a <code>{ x: 1, y: 200 }</code>\u3002</p>
+<h2 id="\u603b\u7ed3"><a href="#\u603b\u7ed3" class="headerlink" title="\u603b\u7ed3"></a>\u603b\u7ed3</h2><p>\u81f3\u6b64\uff0cWeex \u57fa\u672c\u7684\u8bed\u6cd5\u5df2\u7ecf\u5168\u90e8\u4ecb\u7ecd\u8fc7\u4e86\u3002\u76f8\u4fe1\u60a8\u5bf9 Weex \u7684\u4f7f\u7528\u65b9\u5f0f\u548c\u5f00\u53d1\u65b9\u5f0f\u6709\u4e86\u66f4\u591a\u7684\u4e86\u89e3\u3002</p>
+<p>\u63a5\u4e0b\u6765\u6211\u4eec\u63a8\u8350\u60a8\u9605\u8bfb\uff1a</p>
+<ul>
+<li><a href="../how-to/index.html">\u6700\u4f73\u5b9e\u8df5</a></li>
+<li><a href="../../references/index.html">Weex \u624b\u518c</a></li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/syntax/config-n-data.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/syntax/data-binding.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/syntax/data-binding.html b/content/cn/v-0.10/guide/syntax/data-binding.html
new file mode 100644
index 0000000..d9a40f9
--- /dev/null
+++ b/content/cn/v-0.10/guide/syntax/data-binding.html
@@ -0,0 +1,563 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u6570\u636e\u7ed1\u5b9a | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u6570\u636e\u7ed1\u5b9aWeex\u4f7f\u7528 mustache \u7684\u8bed\u6cd5 ({{...}}) \u6765\u5bf9 &lt;template&gt; \u4e2d\u7684\u6a21\u677f\u548c &lt;script&gt; \u91cc\u7684\u6570\u636e\u8fdb\u884c\u7ed1\u5b9a. \u4e00\u65e6\u6570\u636e\u989d\u6a21\u677f\u7ed1\u5b9a\u4e86, \u6570\u636e\u4e0a\u7684\u4fee\u6539\u4f1a\u5b9e\u65f6\u7684\u5728\u6a21\u677f\u5185\u5bb9\u4e2d\u751f\u6548\u3002
+\u6570\u636e\u7ed1\u5b9a\u8def\u5f84&lt;template&gt; &lt;div&gt; &lt;text style="font-size: &#123;&#123;size&">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u6570\u636e\u7ed1\u5b9a">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/syntax/data-binding.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u6570\u636e\u7ed1\u5b9aWeex\u4f7f\u7528 mustache \u7684\u8bed\u6cd5 ({{...}}) \u6765\u5bf9 &lt;template&gt; \u4e2d\u7684\u6a21\u677f\u548c &lt;script&gt; \u91cc\u7684\u6570\u636e\u8fdb\u884c\u7ed1\u5b9a. \u4e00\u65e6\u6570\u636e\u989d\u6a21\u677f\u7ed1\u5b9a\u4e86, \u6570\u636e\u4e0a\u7684\u4fee\u6539\u4f1a\u5b9e\u65f6\u7684\u5728\u6a21\u677f\u5185\u5bb9\u4e2d\u751f\u6548\u3002
+\u6570\u636e\u7ed1\u5b9a\u8def\u5f84&lt;template&gt; &lt;div&gt; &lt;text style="font-size: &#123;&#123;size&">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.944Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u6570\u636e\u7ed1\u5b9a">
+<meta name="twitter:description" content="\u6570\u636e\u7ed1\u5b9aWeex\u4f7f\u7528 mustache \u7684\u8bed\u6cd5 ({{...}}) \u6765\u5bf9 &lt;template&gt; \u4e2d\u7684\u6a21\u677f\u548c &lt;script&gt; \u91cc\u7684\u6570\u636e\u8fdb\u884c\u7ed1\u5b9a. \u4e00\u65e6\u6570\u636e\u989d\u6a21\u677f\u7ed1\u5b9a\u4e86, \u6570\u636e\u4e0a\u7684\u4fee\u6539\u4f1a\u5b9e\u65f6\u7684\u5728\u6a21\u677f\u5185\u5bb9\u4e2d\u751f\u6548\u3002
+\u6570\u636e\u7ed1\u5b9a\u8def\u5f84&lt;template&gt; &lt;div&gt; &lt;text style="font-size: &#123;&#123;size&">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link current ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link current ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u6570\u636e\u7ed1\u5b9a
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.944Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u6570\u636e\u7ed1\u5b9a"><a href="#\u6570\u636e\u7ed1\u5b9a" class="headerlink" title="\u6570\u636e\u7ed1\u5b9a"></a>\u6570\u636e\u7ed1\u5b9a</h1><p>Weex\u4f7f\u7528 <em>mustache</em> \u7684\u8bed\u6cd5 (<code>{{...}}</code>) \u6765\u5bf9 <code><template></code> \u4e2d\u7684\u6a21\u677f\u548c <code><script></code> \u91cc\u7684\u6570\u636e\u8fdb\u884c\u7ed1\u5b9a. \u4e00\u65e6\u6570\u636e\u989d\u6a21\u677f\u7ed1\u5b9a\u4e86, \u6570\u636e\u4e0a\u7684\u4fee\u6539\u4f1a\u5b9e\u65f6\u7684\u5728\u6a21\u677f\u5185\u5bb9\u4e2d\u751f\u6548\u3002</p>
+<h2 id="\u6570\u636e\u7ed1\u5b9a\u8def\u5f84"><a href="#\u6570\u636e\u7ed1\u5b9a\u8def\u5f84" class="headerlink" title="\u6570\u636e\u7ed1\u5b9a\u8def\u5f84"></a>\u6570\u636e\u7ed1\u5b9a\u8def\u5f84</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size: {{size}}"</span>></span>{{title}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class=
"line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">size</span>: <span class="number">48</span>,</div><div class="line"> <span class="attr">title</span>: <span class="string">'Alibaba Weex Team'</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/6d18c0e696d33705083e34ef387ac529" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u4e0a\u9762\u7684\u4ee3\u7801\u4f1a\u628a <code>title</code> \u548c <code>size</code> \u7684\u6570\u503c\u7ed1\u5b9a\u5230\u6a21\u677f\u5185\u5bb9\u4e0a\u3002</p>
+<p>\u6211\u4eec\u4e5f\u53ef\u4ee5\u901a\u8fc7 <code>.</code> \u7b26\u53f7\u6765\u7ed1\u5b9a\u6570\u636e\u7ed3\u6784\u4e2d\u7684\u5b57\u6bb5\u3002\u770b\u4e00\u4e0b\u4e0b\u9762\u7684\u4ee3\u7801\u7247\u6bb5\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size: {{title.size}}"</span>></span>{{title.value}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span
>: {</div><div class="line"> <span class="attr">title</span>: {</div><div class="line"> <span class="attr">size</span>: <span class="number">48</span>,</div><div class="line"> <span class="attr">value</span>: <span class="string">'Alibaba Weex Team'</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/e291bbe2d5c34fe04db92bc827697a4b" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="\u6570\u636e\u7ed1\u5b9a\u8868\u8fbe\u5f0f"><a href="#\u6570\u636e\u7ed1\u5b9a\u8868\u8fbe\u5f0f" class="headerlink" title="\u6570\u636e\u7ed1\u5b9a\u8868\u8fbe\u5f0f"></a>\u6570\u636e\u7ed1\u5b9a\u8868\u8fbe\u5f0f</h2><p>\u8fdb\u884c\u6570\u636e\u7ed1\u5b9a\u65f6\uff0cWeex \u652f\u6301\u4e00\u4e9b\u7b80\u5355\u7684 JavaScript \u8868\u8fbe\u5f0f\uff0c\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"flex-direction: row;"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{firstName + ' ' + lastName}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {<
/div><div class="line"> <span class="attr">firstName</span>: <span class="string">'John'</span>,</div><div class="line"> <span class="attr">lastName</span>: <span class="string">'Smith'</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/aeef6c2ca9bd9b7c5d039ed84572e1ee" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u8fd9\u4e9b\u8868\u8fbe\u5f0f\u4f1a\u5728\u5f53\u524d\u7684\u4e0a\u4e0b\u6587\u4e2d\u8fdb\u884c\u8fd0\u7b97\u3002</p>
+<h2 id="\u8ba1\u7b97\u5c5e\u6027-v0-5"><a href="#\u8ba1\u7b97\u5c5e\u6027-v0-5" class="headerlink" title="\u8ba1\u7b97\u5c5e\u6027 v0.5+"></a>\u8ba1\u7b97\u5c5e\u6027 <sup>v0.5+</sup></h2><p>\u6570\u636e\u7ed1\u5b9a\u8868\u8fbe\u5f0f\u5df2\u7ecf\u975e\u5e38\u65b9\u4fbf\u4e86\uff0c\u4f46\u5982\u679c\u5e0c\u671b\u5728\u6a21\u677f\u91cc\u5b9e\u73b0\u66f4\u590d\u6742\u7684\u903b\u8f91\u5224\u65ad\uff0c\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528\u8ba1\u7b97\u5c5e\u6027\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"flex-direction: row;"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{fullName}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"changeName"</span> <span class="attr">style</span>=<span class="string">"margin-left: 10;"</span>></span>CHANGE NAME<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>
></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">firstName</span>: <span class="string">'John'</span>,</div><div class="line"> <span class="attr">lastName</span>: <span class="string">'Smith'</span></div><div class="line"> },</div><div class="line"> <span class="attr">computed</span>: {</div><div class="line"> <span class="attr">fullName</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.firstName + <span class="string">' '</span> + <span class="keyword">this</span>.lastName</div><div class="line">
}</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">changeName</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.firstName = <span class="string">'Terry'</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/276e7c42a2d480d669868476e62b326e" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u540c\u6837\u80fd\u591f\u8fbe\u5230\u76f8\u540c\u7684\u6548\u679c\u3002\u8fd9\u91cc\u6211\u4eec\u5f15\u5165\u4e86\u4e00\u4e2a\u53eb\u505a <code>fullName</code> \u7684\u8ba1\u7b97\u5c5e\u6027\uff0c\u7531 <code>firstName</code> \u548c <code>lastName</code> \u8ba1\u7b97\u800c\u6210\uff0c\u5728\u6570\u636e\u7ed1\u5b9a\u7684\u65f6\u5019\uff0c\u5982\u679c <code>firstName</code> \u6216 <code>lastName</code> \u53d1\u751f\u6539\u53d8\uff0c<code>fullName</code> \u90fd\u4f1a\u81ea\u52a8\u91cd\u65b0\u8ba1\u7b97\u5e76\u89e6\u53d1\u6539\u53d8\u3002</p>
+<p>\u53e6\u5916\u8ba1\u7b97\u5c5e\u6027\u8fd8\u652f\u6301\u53e6\u5916\u4e00\u79cd\u5199\u6cd5\uff0c\u5c31\u662f\u540c\u65f6\u5b9a\u4e49\u4e00\u4e2a\u8ba1\u7b97\u5c5e\u6027\u7684 getter \u548c setter\uff0c\u8fd9\u6837\u7684\u8bdd\u5f53\u4e0b\u9762\u4f8b\u5b50\u4e2d\u7684 <code>fullName</code> \u88ab\u8d4b\u503c\u65f6\uff0c<code>data</code> \u91cc\u7684 <code>firstName</code> \u548c <code>lastName</code> \u4f1a\u88ab\u81ea\u52a8\u6539\u53d8\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"flex-direction: row;"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{fullName}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"changeName"</span> <span class="attr">style</span>=<span class="string">"margin-left: 10;"</span>></span>CHANGE NAME<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>
></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">firstName</span>: <span class="string">'John'</span>,</div><div class="line"> <span class="attr">lastName</span>: <span class="string">'Smith'</span></div><div class="line"> },</div><div class="line"> <span class="attr">computed</span>: {</div><div class="line"> <span class="attr">fullName</span>: {</div><div class="line"> <span class="attr">get</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.firstName + <span class="string">' '</span> +
<span class="keyword">this</span>.lastName</div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="attr">set</span>: <span class="function"><span class="keyword">function</span>(<span class="params">v</span>) </span>{</div><div class="line"> <span class="keyword">var</span> s = v.split(<span class="string">' '</span>)</div><div class="line"> <span class="keyword">this</span>.firstName = s[<span class="number">0</span>]</div><div class="line"> <span class="keyword">this</span>.lastName = s[<span class="number">1</span>]</div><div class="line"> }</div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">changeName</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span c
lass="keyword">this</span>.fullName = <span class="string">'Terry King'</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/9f33809592391c566c886029c509c167" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p><strong>\u6ce8\u610f\u4e8b\u9879\uff1a<code>data</code>\u3001<code>methods</code>\u3001<code>computed</code> \u4e2d\u7684\u5b57\u6bb5\u662f\u4e0d\u80fd\u76f8\u4e92\u91cd\u590d\u7684\uff0c\u56e0\u4e3a\u5b83\u4eec\u90fd\u4f1a\u901a\u8fc7\u7ec4\u4ef6\u5b9e\u4f8b\u7684 <code>this</code> \u8bbf\u95ee\u5230\u3002</strong></p>
+<h2 id="\u6570\u636e\u7ed1\u5b9a\u5728-lt-template-gt-\u4e2d\u7684\u7279\u6b8a\u7528\u6cd5"><a href="#\u6570\u636e\u7ed1\u5b9a\u5728-lt-template-gt-\u4e2d\u7684\u7279\u6b8a\u7528\u6cd5" class="headerlink" title="\u6570\u636e\u7ed1\u5b9a\u5728 <template> \u4e2d\u7684\u7279\u6b8a\u7528\u6cd5"></a>\u6570\u636e\u7ed1\u5b9a\u5728 <code><template></code> \u4e2d\u7684\u7279\u6b8a\u7528\u6cd5</h2><h3 id="\u6837\u5f0f-style-\u6216-class"><a href="#\u6837\u5f0f-style-\u6216-class" class="headerlink" title="\u6837\u5f0f: style \u6216 class"></a>\u6837\u5f0f: <code>style</code> \u6216 <code>class</code></h3><p>\u7ec4\u4ef6\u7684\u6837\u5f0f\u80fd\u591f\u901a\u8fc7 <code>style</code> \u7279\u6027\u8fdb\u884c\u7ed1\u5b9a\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size: {{size}}; color: {{color}};"</span>></span>Hello World<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">d
ata</span>: {</div><div class="line"> <span class="attr">size</span>: <span class="number">32</span>,</div><div class="line"> <span class="attr">color</span>: <span class="string">'#ff0000'</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/f53674fa7910d266e0a2d8a5c285d2b1" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u6837\u5f0f\u4e5f\u80fd\u591f\u901a\u8fc7 <code>class</code> \u7279\u6027\u5b9e\u73b0\u6837\u5f0f\u7ed1\u5b9a\uff0c\u591a\u4e2a class \u540d\u901a\u8fc7\u7a7a\u683c\u5206\u9694\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"{{size}}"</span>></span>Hello<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title {{status}}"</span>></span>World<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><
;<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.large</span> { <span class="attribute">font-size</span>: <span class="number">64</span>; }</div><div class="line"> <span class="selector-class">.small</span> { <span class="attribute">font-size</span>: <span class="number">32</span>; }</div><div class="line"> <span class="selector-class">.title</span> { <span class="attribute">font-weight</span>: bold; }</div><div class="line"> <span class="selector-class">.success</span> { <span class="attribute">color</span>: <span class="number">#00ff00</span>; }</div><div class="line"> <span class="selector-class">.error</span> { <span class="attribute">color</span>: <span class="number">#ff0000</span>; }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span clas
s="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">size</span>: <span class="string">'large'</span>,</div><div class="line"> <span class="attr">status</span>: <span class="string">'success'</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/4260897c1526a685672dca95af271493" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u5728\u4e0a\u9762\u7684\u4ee3\u7801\u4e2d\u5982\u679c <code>{{size}}</code> \u548c <code>{{status}}</code> \u662f\u7a7a\u503c, \u5c31\u53ea\u6709 <code>class="title"</code> \u4f1a\u88ab\u89e3\u6790\u3002</p>
+<p>\u5ef6\u4f38\u9605\u8bfb\uff1a<a href="./style-n-class.html">style \u548c class</a></p>
+<h3 id="\u4e8b\u4ef6\u7ed1\u5b9a\uff1aon"><a href="#\u4e8b\u4ef6\u7ed1\u5b9a\uff1aon" class="headerlink" title="\u4e8b\u4ef6\u7ed1\u5b9a\uff1aon..."></a>\u4e8b\u4ef6\u7ed1\u5b9a\uff1a<code>on...</code></h3><p>\u4ee5 <code>on...</code> \u5f00\u5934\u7684\u5c31\u662f\u7528\u4e8e\u7ed1\u5b9a\u4e8b\u4ef6\u7684\u7279\u6027\uff0c\u7279\u6027\u540d\u4e2d <code>on</code> \u4e4b\u540e\u7684\u90e8\u5206\u5c31\u662f\u4e8b\u4ef6\u7684\u7c7b\u578b\uff0c\u7279\u6027\u7684\u503c\u5c31\u662f\u5904\u7406\u8be5\u4e8b\u4ef6\u7684\u51fd\u6570\u540d\u3002<em>\u51fd\u6570\u540d\u5916\u4e0d\u9700\u8981\u6dfb\u52a0 mustache \u8bed\u6cd5\u4e2d\u7684\u5927\u62ec\u53f7</em>\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"toggle"</span>></span>Toggle: {{result}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line">
<span class="attr">result</span>: <span class="literal">true</span></div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">toggle</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.result = !<span class="keyword">this</span>.result</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/2f9f910a60ffc1ed54c797390d6615e1" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u9664\u6b64\u4e4b\u5916 Weex \u8fd8\u652f\u6301\u66f4\u591a\u7684\u4e8b\u4ef6\u5904\u7406\u65b9\u5f0f\u3002</p>
+<p>\u5ef6\u4f38\u9605\u8bfb\uff1a<a href="./events.html">\u4e8b\u4ef6\u5904\u7406</a></p>
+<h3 id="\u5c55\u793a\u903b\u8f91\u63a7\u5236-if-amp-repeat"><a href="#\u5c55\u793a\u903b\u8f91\u63a7\u5236-if-amp-repeat" class="headerlink" title="\u5c55\u793a\u903b\u8f91\u63a7\u5236 if & repeat"></a>\u5c55\u793a\u903b\u8f91\u63a7\u5236 <code>if</code> & <code>repeat</code></h3><p><code>if</code> \u7279\u6027\u80fd\u591f\u901a\u8fc7\u7279\u6027\u503c\u7684\u771f\u5047\u6765\u63a7\u5236\u7ec4\u5efa\u662f\u5426\u663e\u793a\uff0c<em>\u4e14 mustache \u5927\u62ec\u53f7\u53ef\u4ee5\u7701\u7565</em>\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"flex-direction: column;"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"toggle"</span>></span>Toggle<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">if</span>=<span class="string">"{{shown}}"</span> <span class="attr">src</span>=<span class="string">"{{imageUrl}}"</span> <span class="attr">class</span>=<span class="string">"logo"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span clas
s="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.logo</span> { <span class="attribute">width</span>: <span class="number">512</span>; <span class="attribute">height</span>: <span class="number">512</span>; }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">shown</span>: <span class="literal">true</span>,</div><div clas
s="line"> <span class="attr">imageUrl</span>: <span class="string">'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png'</span></div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">toggle</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.shown = !<span class="keyword">this</span>.shown</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/3ec9347e4810f503b641849d214d8c15" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p><code>repeat</code> \u7279\u6027\u53ef\u4ee5\u6839\u636e\u4e00\u7ec4\u6570\u7ec4\u6570\u636e\u91cd\u590d\u751f\u6210\u76f8\u540c\u6216\u76f8\u4f3c\u7684\u987a\u5e8f\u6392\u5217\u7684\u754c\u9762\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">repeat</span>=<span class="string">"(k,v) in list"</span>></span>{{k}} - {{v}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line">
<span class="attr">list</span>: [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>]</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/db40d2341fdbf16d3d806f502189843d" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u5ef6\u4f38\u9605\u8bfb\uff1a<a href="./display-logic.html">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a></p>
+<h3 id="\u9759\u6001\u6a21\u677f\u4f18\u5316-static-v0-9-2"><a href="#\u9759\u6001\u6a21\u677f\u4f18\u5316-static-v0-9-2" class="headerlink" title="\u9759\u6001\u6a21\u677f\u4f18\u5316 static v0.9.2+"></a>\u9759\u6001\u6a21\u677f\u4f18\u5316 <code>static</code> <sup>v0.9.2+</sup></h3><p><code>static</code> \u7279\u6027\u53ef\u4ee5\u4e00\u6b21\u6027\u628a\u6570\u636e\u8bbe\u7f6e\u5230\u6a21\u677f\u76f8\u5e94\u7684\u4f4d\u7f6e\u4e0a\uff0c\u4f46\u662f\u4eca\u540e\u4e0d\u4f1a\u968f\u7740\u6570\u636e\u7684\u53d8\u5316\u800c\u66f4\u65b0\u3002\u8fd9\u6837\u53ef\u4ee5\u51cf\u5c11\u65e0\u8c13\u7684\u6570\u636e\u7ed1\u5b9a\uff0c\u6709\u6548\u63a7\u5236\u548c\u4f18\u5316\u957f\u5217\u8868\u3001\u7eaf\u9759\u6001\u9875\u9762\u5728\u8fd0\u884c\u65f6\u7684\u5f00\u9500\u3002\u4e0d\u8fc7\u4f60\u4e5f\u8981\u5c0f\u5fc3\u4f7f\u7528\u4e0d\u8981\u5bfc\u81f4\u539f\u672c\u9700\u8981\u66f4\u65b0\u7684\u89c6\u56fe\u6ca1\u6709\u89e6\u53d1\u66f4\u65b0\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">static</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{ word }}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">ready</span>: <span class="function"><span class="keyword">function</span>(<span class="pa
rams"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.word = <span class="string">'Data changes'</span> <span class="comment">// UI won't be updated</span></div><div class="line"> },</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">word</span>: <span class="string">'Hello static'</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/dbadfd66463a2c03e3e06d391b0ad8ec" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u5982\u4e0a\u6240\u793a\uff0c\u6dfb\u52a0 <code>static</code> \u5173\u952e\u5b57\uff0c\u6e32\u67d3\u7ed3\u679c\u4f1a\u662f\u201cHello static\u201d\u5b57\u6837\uff0c\u76f8\u5f53\u4e8e\u6e32\u67d3\u4e00\u4e2a\u9759\u6001\u7684\u8282\u70b9\uff0c<code>ready</code> \u51fd\u6570\u4e2d\u5bf9\u6570\u636e <code>word</code> \u7684\u6539\u53d8\u4e0d\u4f1a\u66f4\u65b0\u5230\u89c6\u56fe\u3002</p>
+<p>\u4e0b\u4e00\u7bc7\uff1a<a href="./style-n-class.html">style \u548c class</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/syntax/data-binding.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[28/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/ios-apis.html
----------------------------------------------------------------------
diff --git a/content/cn/references/ios-apis.html b/content/cn/references/ios-apis.html
new file mode 100644
index 0000000..073cce8
--- /dev/null
+++ b/content/cn/references/ios-apis.html
@@ -0,0 +1,1360 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>iOS APIs | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="iOS APIsNative \u5bf9\u5916\u63a5\u53e3
+\u6ce8\u518c SDK \u9ed8\u8ba4\u7684 Module\u3001Handler \u548c Component
+\u6ce8\u518c\u81ea\u5b9a\u4e49 module\u3001Handler \u548c Component
+\u91cd\u7f6e JSFramework
+
+Handler (\u5bf9\u5e94\u4e8e Android \u7684 Adapter) \u4ecb\u7ecd
+WXImgLoaderDefaultImpl \u56fe\u7247\u4e0b\u8f7d handler\u3002Weex \u4f1a\u628a\u9700\u8981\u8bbe\u7f6e\u56fe\u7247\u7684 View \u548c">
+<meta property="og:type" content="website">
+<meta property="og:title" content="iOS APIs">
+<meta property="og:url" content="https://weex.apache.org/cn/references/ios-apis.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="iOS APIsNative \u5bf9\u5916\u63a5\u53e3
+\u6ce8\u518c SDK \u9ed8\u8ba4\u7684 Module\u3001Handler \u548c Component
+\u6ce8\u518c\u81ea\u5b9a\u4e49 module\u3001Handler \u548c Component
+\u91cd\u7f6e JSFramework
+
+Handler (\u5bf9\u5e94\u4e8e Android \u7684 Adapter) \u4ecb\u7ecd
+WXImgLoaderDefaultImpl \u56fe\u7247\u4e0b\u8f7d handler\u3002Weex \u4f1a\u628a\u9700\u8981\u8bbe\u7f6e\u56fe\u7247\u7684 View \u548c">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.896Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="iOS APIs">
+<meta name="twitter:description" content="iOS APIsNative \u5bf9\u5916\u63a5\u53e3
+\u6ce8\u518c SDK \u9ed8\u8ba4\u7684 Module\u3001Handler \u548c Component
+\u6ce8\u518c\u81ea\u5b9a\u4e49 module\u3001Handler \u548c Component
+\u91cd\u7f6e JSFramework
+
+Handler (\u5bf9\u5e94\u4e8e Android \u7684 Adapter) \u4ecb\u7ecd
+WXImgLoaderDefaultImpl \u56fe\u7247\u4e0b\u8f7d handler\u3002Weex \u4f1a\u628a\u9700\u8981\u8bbe\u7f6e\u56fe\u7247\u7684 View \u548c">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link current ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link current ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ iOS APIs
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.896Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="iOS-APIs"><a href="#iOS-APIs" class="headerlink" title="iOS APIs"></a>iOS APIs</h1><h2 id="Native-\u5bf9\u5916\u63a5\u53e3"><a href="#Native-\u5bf9\u5916\u63a5\u53e3" class="headerlink" title="Native \u5bf9\u5916\u63a5\u53e3"></a>Native \u5bf9\u5916\u63a5\u53e3</h2><ul>
+<li>\u6ce8\u518c SDK \u9ed8\u8ba4\u7684 Module\u3001Handler \u548c Component</li>
+<li>\u6ce8\u518c\u81ea\u5b9a\u4e49 module\u3001Handler \u548c Component</li>
+<li>\u91cd\u7f6e JSFramework</li>
+</ul>
+<h2 id="Handler-\u5bf9\u5e94\u4e8e-Android-\u7684-Adapter-\u4ecb\u7ecd"><a href="#Handler-\u5bf9\u5e94\u4e8e-Android-\u7684-Adapter-\u4ecb\u7ecd" class="headerlink" title="Handler (\u5bf9\u5e94\u4e8e Android \u7684 Adapter) \u4ecb\u7ecd"></a>Handler (\u5bf9\u5e94\u4e8e Android \u7684 Adapter) \u4ecb\u7ecd</h2><ul>
+<li><p>WXImgLoaderDefaultImpl \u56fe\u7247\u4e0b\u8f7d handler\u3002Weex \u4f1a\u628a\u9700\u8981\u8bbe\u7f6e\u56fe\u7247\u7684 View \u548c URL \u900f\u9732\u51fa\u6765\uff0cNative \u7aef\u9700\u8981\u5b9e\u73b0\u8fd9\u4e2a\u63a5\u53e3\u8fdb\u884c\u56fe\u7247\u4e0b\u8f7d\u3002WeexSDK kernel \u672c\u8eab\u6ca1\u6709\u63d0\u4f9b\u56fe\u7247\u4e0b\u8f7d\u7684\u9ed8\u8ba4\u5b9e\u73b0\u3002</p>
+<p>\u63a5\u53e3\u5b9a\u4e49\u5982\u4e0b\uff1a</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line"> @protocol WXImgLoaderProtocol <WXModuleProtocol></div><div class="line">/**</div><div class="line"> * @abstract Creates a image download handler with a given URL</div><div class="line"> *</div><div class="line"> * @param imageUrl The URL of the image to download</div><div class="line"> *</div><div class="line"> * @param imageFrame The frame of the image you want to set</div><div class="line"> *</div><div class="line"> * @param options : The options to be used for this download</div><div class="line"> *</div><div class="line"> * @param completedBlock : A block called once the download is completed.</div><div class="line"> * image : the image which has been download to local.</div><div class="line"> * error : the error which has happened in download.</div><div class="line"> * finished : a Boolean value indicating whether download action h
as finished.</div><div class="line"> */</div><div class="line">- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;</div><div class="line">@end</div></pre></td></tr></table></figure>
+</li>
+</ul>
+<h2 id="Native-\u548c-JS-\u901a\u4fe1"><a href="#Native-\u548c-JS-\u901a\u4fe1" class="headerlink" title="Native \u548c JS \u901a\u4fe1"></a>Native \u548c JS \u901a\u4fe1</h2><ul>
+<li><p>\u81ea\u5b9a\u4e49\u901a\u77e5\u4e8b\u4ef6</p>
+<p>\u7528\u4e8e native \u81ea\u5b9a\u4e49\u90e8\u5206\u548c js \u8fdb\u884c\u5b9e\u8df5\u901a\u77e5\uff0c\u6bd4\u5982\u4f20\u9012\u4e0b\u62c9\u4e8b\u4ef6\u5230 js\uff0c\u8fd9\u4e2a\u662f\u5728 component \u57fa\u7c7b\u7684\u65b9\u6cd5\uff0c\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">/**</div><div class="line"> * @abstract Fire an event to the component and tell Javascript which value has been changed. </div><div class="line"> * @param eventName \u4e8b\u4ef6\u540d\u79f0\uff0c\u53ef\u4ee5\u5728weex\u6587\u4ef6\u67d0\u4e2a\u6807\u7b7e\u7ec4\u4ef6\u76d1\u542c\uff0c\u547d\u540d\u89c4\u8303\u4e3a onXXX</div><div class="line"> * @param params \u6570\u636e</div><div class="line"> * @param domChanges \u53d1\u751f\u6539\u53d8\u7684\u6570\u636e</div><div class="line"> **/</div><div class="line">- (void)fireEvent:(NSString *)eventName params:(NSDictionary *)params domChanges:(NSDictionary *)domChanges</div></pre></td></tr></table></figure>
+</li>
+<li><p>\u4e8b\u4ef6\u56de\u8c03</p>
+<p>\u591a\u7528\u4e8e Module \u56de\u8c03\u7ed3\u679c\u7ed9 js\uff0c\u56de\u8c03\u7c7b\u578b\u5206\u4e3a\u4e0b\u9762\u4e24\u79cd\uff1a</p>
+<ol>
+<li><p><code>WXModuleCallback</code> \u4e3a\u4e86\u6027\u80fd\u8003\u8651\uff0c\u8be5\u56de\u8c03\u53ea\u80fd\u56de\u8c03\u901a\u77e5js\u4e00\u6b21\uff0c\u4e4b\u540e\u4f1a\u88ab\u91ca\u653e\uff0c\u591a\u7528\u4e8e\u4e00\u6b21\u7ed3\u679c</p>
+</li>
+<li><p><code>WXModuleKeepAliveCallback</code> \u8be5\u56de\u8c03\u53ef\u4ee5\u8bbe\u7f6e\u662f\u5426\u4e3a\u591a\u6b21\u56de\u8c03\u7c7b\u578b\uff0c\u591a\u6b21\u56de\u8c03\u7684\u573a\u666f\u5982\u6301\u7eed\u76d1\u542c\u4f4d\u7f6e\u7684\u53d8\u5316\uff0c\u5e76\u8fd4\u56de\u7ed9 js\u3002</p>
+</li>
+</ol>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">@implementation WXEchoModule</div><div class="line">@synthesize weexInstance; // \u8ba9\u8be5module \u83b7\u5f97\u5f53\u524dinstance</div><div class="line">WX_EXPORT_METHOD(@selector(echo:))</div><div class="line">- (void)echo:(NSString *)param callback:(WXModuleKeepAliveCallback)callback</div><div class="line">{</div><div class="line"> callback(param,ture);// \u6b64\u5904\u8bbe\u7f6etrue\uff0c\u8be5\u56de\u8c03function \u53ef\u4ee5\u591a\u6b21\u56de\u8c03\u6267\u884c\uff0c\u53ef\u4ee5\u5199\u5faa\u73af\u6d4b\u8bd5.</div><div class="line">}</div></pre></td></tr></table></figure>
+</li>
+</ul>
+<h2 id="\u52a8\u6001\u9002\u914d\u5bb9\u5668"><a href="#\u52a8\u6001\u9002\u914d\u5bb9\u5668" class="headerlink" title="\u52a8\u6001\u9002\u914d\u5bb9\u5668"></a>\u52a8\u6001\u9002\u914d\u5bb9\u5668</h2><p>WeexSDK \u5728 <code>WXSDKInstance</code> \u7c7b\u4e2d\u63d0\u4f9b\u4e86\u65b9\u6cd5 <code>setFrame(CGRect)</code> \u6765\u6539\u53d8\u5bb9\u5668\u7684\u5927\u5c0f\u3002</p>
+<p>\u5982\uff1a\u5728\u5bfc\u822a\u680f\u4ece\u6709\u5230\u65e0\u8fc7\u7a0b\uff0c\u9700\u8981 weexView \u7684\u53d8\u5316\uff0c \u53ef\u4ee5\u5728\u6b64\u65f6 native \u8c03\u7528\u8be5\u65b9\u6cd5\u8bbe\u7f6e</p>
+<h2 id="\u964d\u7ea7\u4f7f\u7528"><a href="#\u964d\u7ea7\u4f7f\u7528" class="headerlink" title="\u964d\u7ea7\u4f7f\u7528"></a>\u964d\u7ea7\u4f7f\u7528</h2><p>Weex \u5904\u4e8e\u53d1\u5c55\u9636\u6bb5\u4f1a\u589e\u52a0\u4e00\u4e9b\u65b0\u7684\u7279\u6027\u548c\u529f\u80fd\uff0c\u4f46\u662f\u8fd9\u4e9b\u65b0\u7684\u7279\u6027\u548c\u529f\u80fd\u90fd\u5fc5\u987b\u5347\u7ea7 SDK \u624d\u80fd\u5b9e\u73b0\uff0c\u5bf9\u4e8e\u6ca1\u6709\u5347\u7ea7\u7684\u5e94\u7528\u5e94\u8be5\u600e\u4e48\u5904\u7406\u5462\uff1f\u53ef\u4ee5\u4f7f\u7528\u964d\u7ea7\u529f\u80fd\u3002</p>
+<p>\u6240\u8c13\u964d\u7ea7\u529f\u80fd\u5c31\u662f Weex \u65e0\u6cd5\u8fd0\u884c\u7684\u7248\u672c\u6216\u8005\u624b\u673a\uff0c\u53ef\u4ee5\u7528 Weex h5 \u6765\u4ee3\u66ff\u3002</p>
+<p>Native \u7aef\u53ef\u4ee5\u901a\u8fc7\u63a5\u53e3 WXSDKInstance \u4e2d\u7684 onFailed \u56de\u8c03\u8fdb\u884c\u5904\u7406\uff0c\u5982\u679c\u662f\u4e3b\u52a8\u964d\u7ea7\u5219\u8fd4\u56de\u7684\u9519\u8bef domain \u4e3a TemplateErrorType \u8868\u793a\u4e3b\u52a8\u964d\u7ea7\uff0cNative \u7aef\u53ef\u4ee5\u8df3\u8f6c\u5230\u5bf9\u5e94\u7684 H5 \u9875\u9762\uff0c\u6216\u8005\u7528\u5176\u4ed6\u7684\u65b9\u5f0f\u63d0\u793a\u7528\u6237\u5f53\u524d\u73af\u5883\u4e0d\u652f\u6301 Weex\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/ios-apis.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/ios-apis.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/jsfm-apis.html
----------------------------------------------------------------------
diff --git a/content/cn/references/jsfm-apis.html b/content/cn/references/jsfm-apis.html
new file mode 100644
index 0000000..80b181f
--- /dev/null
+++ b/content/cn/references/jsfm-apis.html
@@ -0,0 +1,1345 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>JS Framework APIs | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="JS Framework APIsBroadcastChannel v0.9+BroadcastChannel API \u662f Weex \u5b9e\u4f8b\u95f4\u901a\u4fe1\u7684\u89e3\u51b3\u65b9\u6848\u3002
+\u53c2\u8003
+BroadcastChannel specification.
+MessageEvent specification
+
+API
+postMessage(message): \u901a\u8fc7\u6d88\u606f\u901a\u9053\u53d1\u9001\u7279\u5b9a\u6d88\u606f\u7ed9\u5176\u4ed6 BroadcastChannel">
+<meta property="og:type" content="website">
+<meta property="og:title" content="JS Framework APIs">
+<meta property="og:url" content="https://weex.apache.org/cn/references/jsfm-apis.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="JS Framework APIsBroadcastChannel v0.9+BroadcastChannel API \u662f Weex \u5b9e\u4f8b\u95f4\u901a\u4fe1\u7684\u89e3\u51b3\u65b9\u6848\u3002
+\u53c2\u8003
+BroadcastChannel specification.
+MessageEvent specification
+
+API
+postMessage(message): \u901a\u8fc7\u6d88\u606f\u901a\u9053\u53d1\u9001\u7279\u5b9a\u6d88\u606f\u7ed9\u5176\u4ed6 BroadcastChannel">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.896Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="JS Framework APIs">
+<meta name="twitter:description" content="JS Framework APIsBroadcastChannel v0.9+BroadcastChannel API \u662f Weex \u5b9e\u4f8b\u95f4\u901a\u4fe1\u7684\u89e3\u51b3\u65b9\u6848\u3002
+\u53c2\u8003
+BroadcastChannel specification.
+MessageEvent specification
+
+API
+postMessage(message): \u901a\u8fc7\u6d88\u606f\u901a\u9053\u53d1\u9001\u7279\u5b9a\u6d88\u606f\u7ed9\u5176\u4ed6 BroadcastChannel">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link current ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link current ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ JS Framework APIs
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.896Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="JS-Framework-APIs"><a href="#JS-Framework-APIs" class="headerlink" title="JS Framework APIs"></a>JS Framework APIs</h1><h2 id="BroadcastChannel-v0-9"><a href="#BroadcastChannel-v0-9" class="headerlink" title="BroadcastChannel v0.9+"></a>BroadcastChannel <span class="api-version">v0.9+</span></h2><p><code>BroadcastChannel</code> API \u662f Weex \u5b9e\u4f8b\u95f4\u901a\u4fe1\u7684\u89e3\u51b3\u65b9\u6848\u3002</p>
+<h3 id="\u53c2\u8003"><a href="#\u53c2\u8003" class="headerlink" title="\u53c2\u8003"></a>\u53c2\u8003</h3><ul>
+<li><a href="https://html.spec.whatwg.org/multipage/comms.html#broadcasting-to-other-browsing-contexts" target="_blank" rel="external">BroadcastChannel specification</a>.</li>
+<li><a href="https://html.spec.whatwg.org/multipage/comms.html#messageevent" target="_blank" rel="external">MessageEvent specification</a></li>
+</ul>
+<h3 id="API"><a href="#API" class="headerlink" title="API"></a>API</h3><ul>
+<li><code>postMessage(message)</code>: \u901a\u8fc7\u6d88\u606f\u901a\u9053\u53d1\u9001\u7279\u5b9a\u6d88\u606f\u7ed9\u5176\u4ed6 BroadcastChannel \u5bf9\u8c61\u3002</li>
+<li><code>close</code>: \u5173\u95ed BroadcastChannel \u5bf9\u8c61\uff0c\u4ee5\u4fbf\u5783\u573e\u56de\u6536\u3002</li>
+<li><code>onmessage</code>: Event \u5904\u7406\u51fd\u6570, \u5f53 BroadcastChannel \u5bf9\u8c61\u63a5\u6536\u5230\u6d88\u606f\u65f6\u89e6\u53d1\u3002</li>
+</ul>
+<h3 id="\u4f7f\u7528"><a href="#\u4f7f\u7528" class="headerlink" title="\u4f7f\u7528"></a>\u4f7f\u7528</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">const</span> Stack = <span class="keyword">new</span> BroadcastChannel(<span class="string">'Avengers'</span>)</div><div class="line">Stack.onmessage = <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(event.data) <span class="comment">// in this case, it's "Hulk Smash !!!"</span></div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// in another instance</span></div><div class="line"><span class="keyword">const</span> Hulk = <span class="keyword">new</span> BroadcastChannel(<span class="string">'Avengers'</span>)</div><div class="line">Hulk.postMessage(<span class="string">"Hulk Smash !!!"</span>)</div></pre></td></tr></t
able></figure>
+<p>\u8fd0\u884c\u4ee5\u4e0a\u4ee3\u7801\uff0cStack \u53ef\u4ee5\u4ece Hulk \u63a5\u6536\u6d88\u606f\u3002</p>
+<h3 id="\u6ce8\u610f"><a href="#\u6ce8\u610f" class="headerlink" title="\u6ce8\u610f"></a>\u6ce8\u610f</h3><p>\u9700\u8981\u6ce8\u610f\u7684\u662f: <strong> <code>message</code> \u5982\u679c\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u4e0d\u4f1a\u6df1\u62f7\u8d1d\u3002</strong></p>
+<p>\u53c2\u8003\u4ee5\u4e0b\u4f8b\u5b50</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">const</span> a = <span class="keyword">new</span> BroadcastChannel(<span class="string">'app'</span>)</div><div class="line"><span class="keyword">const</span> b = <span class="keyword">new</span> BroadcastChannel(<span class="string">'app'</span>)</div><div class="line"></div><div class="line"><span class="keyword">const</span> message = {</div><div class="line"> <span class="attr">lists</span>: [<span class="string">'A'</span>, <span class="string">'B'</span>]</div><div class="line">}</div><div class="line"></div><div class="line">a.onmessage = <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>{</div><div class="line"></div><div class="line"> <span class="comment">// in this case, event.data is a reference of message</span></div><div class="line"> <span class="built_in">console</span>.assert(event.data
=== message)</div><div class="line"></div><div class="line">}</div><div class="line"></div><div class="line">b.postMessage(message)</div></pre></td></tr></table></figure>
+<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c<code>event.data</code> \u5168\u7b49\u4e8e <code>message</code>\u3002</p>
+<p>\u4e0e\u6df1\u62f7\u8d1d\u76f8\u6bd4\uff0c\u8fd9\u79cd\u65b9\u5f0f\u80fd\u591f\u63d0\u9ad8\u6548\u7387\u5e76\u51cf\u5c11\u5185\u5b58\u6d88\u8017\u3002\u4f46\u662f\uff0c\u4e0d\u5efa\u8bae\u5f00\u53d1\u8005\u5728\u4f7f\u7528\u65f6\u7f13\u5b58\u6216\u4fee\u6539\u4e8b\u4ef6\u5bf9\u8c61 (\u6240\u6709\u7c7b\u578b\u7684\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u90fd\u5e94\u8be5\u6709\u6b64\u9650\u5236)\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/jsfm-apis.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/jsfm-apis.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[17/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/vue/difference-with-web.html
----------------------------------------------------------------------
diff --git a/content/cn/references/vue/difference-with-web.html b/content/cn/references/vue/difference-with-web.html
new file mode 100644
index 0000000..d93893e
--- /dev/null
+++ b/content/cn/references/vue/difference-with-web.html
@@ -0,0 +1,1372 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02\u5e73\u53f0\u5dee\u5f02Vue.js \u6700\u521d\u662f\u4e3a Web \u5e73\u53f0\u8bbe\u8ba1\u7684\uff0c\u867d\u7136\u53ef\u4ee5\u57fa\u4e8e Weex \u5f00\u53d1\u539f\u751f\u5e94\u7528\uff0c\u4f46\u662f Web \u5f00\u53d1\u548c\u539f\u751f\u5f00\u53d1\u6bd5\u7adf\u4e0d\u540c\uff0c\u5728\u529f\u80fd\u548c\u5f00\u53d1\u4f53\u9a8c\u4e0a\u90fd\u6709\u4e00\u4e9b\u5dee\u5f02\uff0c\u8fd9\u4e9b\u5dee\u5f02\u4ece\u672c\u8d28\u4e0a\u8bb2\u662f\u539f\u751f\u5f00\u53d1\u5e73\u53f0\u548c Web \u5e73\u53f0\u4e4b\u95f4\u7684\u5dee\u5f02\uff0c\u53ef\u4ee5\u901a\u8fc7\u300aWeex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02\u300b\u4e86\u89e3\u66f4\u591a\u7ec6\u8282\u548c\u539f\u56e0\u3002
+\u7531\u4e8e\u8fd0\u884c\u5e73\u53f0\u5b58\u5728\u5dee\u5f02\uff0cWeex \u4e0d\u652f\u6301 Vue \u4e2d\u4e0e DOM \u76f8">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02">
+<meta property="og:url" content="https://weex.apache.org/cn/references/vue/difference-with-web.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02\u5e73\u53f0\u5dee\u5f02Vue.js \u6700\u521d\u662f\u4e3a Web \u5e73\u53f0\u8bbe\u8ba1\u7684\uff0c\u867d\u7136\u53ef\u4ee5\u57fa\u4e8e Weex \u5f00\u53d1\u539f\u751f\u5e94\u7528\uff0c\u4f46\u662f Web \u5f00\u53d1\u548c\u539f\u751f\u5f00\u53d1\u6bd5\u7adf\u4e0d\u540c\uff0c\u5728\u529f\u80fd\u548c\u5f00\u53d1\u4f53\u9a8c\u4e0a\u90fd\u6709\u4e00\u4e9b\u5dee\u5f02\uff0c\u8fd9\u4e9b\u5dee\u5f02\u4ece\u672c\u8d28\u4e0a\u8bb2\u662f\u539f\u751f\u5f00\u53d1\u5e73\u53f0\u548c Web \u5e73\u53f0\u4e4b\u95f4\u7684\u5dee\u5f02\uff0c\u53ef\u4ee5\u901a\u8fc7\u300aWeex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02\u300b\u4e86\u89e3\u66f4\u591a\u7ec6\u8282\u548c\u539f\u56e0\u3002
+\u7531\u4e8e\u8fd0\u884c\u5e73\u53f0\u5b58\u5728\u5dee\u5f02\uff0cWeex \u4e0d\u652f\u6301 Vue \u4e2d\u4e0e DOM \u76f8">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.917Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02">
+<meta name="twitter:description" content="Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02\u5e73\u53f0\u5dee\u5f02Vue.js \u6700\u521d\u662f\u4e3a Web \u5e73\u53f0\u8bbe\u8ba1\u7684\uff0c\u867d\u7136\u53ef\u4ee5\u57fa\u4e8e Weex \u5f00\u53d1\u539f\u751f\u5e94\u7528\uff0c\u4f46\u662f Web \u5f00\u53d1\u548c\u539f\u751f\u5f00\u53d1\u6bd5\u7adf\u4e0d\u540c\uff0c\u5728\u529f\u80fd\u548c\u5f00\u53d1\u4f53\u9a8c\u4e0a\u90fd\u6709\u4e00\u4e9b\u5dee\u5f02\uff0c\u8fd9\u4e9b\u5dee\u5f02\u4ece\u672c\u8d28\u4e0a\u8bb2\u662f\u539f\u751f\u5f00\u53d1\u5e73\u53f0\u548c Web \u5e73\u53f0\u4e4b\u95f4\u7684\u5dee\u5f02\uff0c\u53ef\u4ee5\u901a\u8fc7\u300aWeex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02\u300b\u4e86\u89e3\u66f4\u591a\u7ec6\u8282\u548c\u539f\u56e0\u3002
+\u7531\u4e8e\u8fd0\u884c\u5e73\u53f0\u5b58\u5728\u5dee\u5f02\uff0cWeex \u4e0d\u652f\u6301 Vue \u4e2d\u4e0e DOM \u76f8">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link current ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link current ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.917Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Vue-2-x-\u5728-Weex-\u548c-Web-\u4e2d\u7684\u5dee\u5f02"><a href="#Vue-2-x-\u5728-Weex-\u548c-Web-\u4e2d\u7684\u5dee\u5f02" class="headerlink" title="Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02"></a>Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</h1><h2 id="\u5e73\u53f0\u5dee\u5f02"><a href="#\u5e73\u53f0\u5dee\u5f02" class="headerlink" title="\u5e73\u53f0\u5dee\u5f02"></a>\u5e73\u53f0\u5dee\u5f02</h2><p>Vue.js \u6700\u521d\u662f\u4e3a Web \u5e73\u53f0\u8bbe\u8ba1\u7684\uff0c\u867d\u7136\u53ef\u4ee5\u57fa\u4e8e Weex \u5f00\u53d1\u539f\u751f\u5e94\u7528\uff0c\u4f46\u662f Web \u5f00\u53d1\u548c\u539f\u751f\u5f00\u53d1\u6bd5\u7adf\u4e0d\u540c\uff0c\u5728\u529f\u80fd\u548c\u5f00\u53d1\u4f53\u9a8c\u4e0a\u90fd\u6709\u4e00\u4e9b\u5dee\u5f02\uff0c\u8fd9\u4e9b\u5dee\u5f02\u4ece\u672c\u8d28\u4e0a\u8bb2\u662f\u539f\u751f\u5f00\u53d1\u5e73\u53f0\u548c Web \u5e73\u53f0\u4e4b\u95f4\u7684\u5dee\u5f02\uff0c\u53ef\u4ee5\u901a\u8fc7<a href="../platform-difference.html">\u300aWeex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02\u300b</a>\u4e86\u89e3\u66f4\u591a\u7ec6\u8282\u548c\u539f\u56e0\u3002</p>
+<p>\u7531\u4e8e\u8fd0\u884c\u5e73\u53f0\u5b58\u5728\u5dee\u5f02\uff0cWeex \u4e0d\u652f\u6301 Vue \u4e2d\u4e0e DOM \u76f8\u5173\u7684\u529f\u80fd\uff1a</p>
+<ul>
+<li>\u4e0d\u652f\u6301\u4e8b\u4ef6\u5192\u6ce1\u548c\u6355\u83b7\u673a\u5236\uff0c<code>.prevent</code> \u3001<code>.capture</code> \u3001<code>.stop</code> \u3001<code>.self</code> \u7b49\u4e8b\u4ef6\u4fee\u9970\u7b26\u5728\u539f\u751f\u73af\u5883\u4e2d\u65e0\u610f\u4e49\u3002</li>
+<li>\u952e\u76d8\u4e8b\u4ef6\u7684 <code>.{keyCode | keyAlias}</code> \u4fee\u9970\u7b26\u5728\u539f\u751f\u73af\u5883\u4e2d\u65e0\u610f\u4e49\u3002</li>
+<li>\u65e0\u6cd5\u901a\u8fc7 <code>vm.$el</code> \u83b7\u53d6\u754c\u9762\u5143\u7d20\uff0c\u539f\u751f\u73af\u5883\u4e2d\u6ca1\u6709 DOM Element\u3002</li>
+<li>\u65e0\u9700\u81ea\u884c\u8c03\u7528 <code>vm.$mount</code>\uff0c\u9ed8\u8ba4\u4f1a\u5c06\u5165\u53e3\u7ec4\u4ef6\u6302\u8f7d\u5230\u539f\u751f\u5e94\u7528\u7684\u89c6\u56fe\u4e2d\u3002</li>
+<li>\u4e0d\u652f\u6301 <code>v-html</code> \u548c <code>v-text</code> \u6307\u4ee4\u3002</li>
+</ul>
+<h2 id="\u529f\u80fd\u5dee\u5f02"><a href="#\u529f\u80fd\u5dee\u5f02" class="headerlink" title="\u529f\u80fd\u5dee\u5f02"></a>\u529f\u80fd\u5dee\u5f02</h2><h3 id="\u4ec5\u5f15\u5165\u4e86-Vue-Runtime"><a href="#\u4ec5\u5f15\u5165\u4e86-Vue-Runtime" class="headerlink" title="\u4ec5\u5f15\u5165\u4e86 Vue Runtime"></a>\u4ec5\u5f15\u5165\u4e86 Vue Runtime</h3><p>Vue \u9664\u4e86\u63d0\u4f9b\u9ed8\u8ba4\u7684\u5b8c\u6574\u5305\u4ee5\u5916\uff0c\u8fd8\u63d0\u4f9b\u4e00\u4e2a\u66f4\u5c0f\u5de7\u7684 <code>vue.runtime.js</code>\uff0c\u5728\u8fd9\u4e2a\u6587\u4ef6\u4e2d\u79fb\u9664\u4e86\u6a21\u677f\u7f16\u8bd1\u7684\u76f8\u5173\u64cd\u4f5c\uff0cWeex \u4e2d\u4e5f\u4ec5\u5f15\u5165 Vue Runtime \u7684\u529f\u80fd\uff0c\u8fd9\u6837\u505a\u9664\u4e86\u53ef\u4ee5\u51cf\u5c11\u4ee3\u7801\u4f53\u79ef\u4ee5\u5916\uff0c\u8fd8\u80fd\u51cf\u5c11\u8fd0\u884c\u671f\u7f16\u8bd1\u6a21\u677f\u7684\u8d1f\u62c5\uff0c\u63d0\u5347\u6027\u80fd\u3002</p>
+<p>\u5177\u4f53\u7684\u5dee\u5f02\u6709\uff1a</p>
+<ul>
+<li>\u5b9a\u4e49\u7ec4\u4ef6\u65f6\u4e0d\u652f\u6301\u4f7f\u7528 <code>template</code> \u5c5e\u6027\u3002</li>
+<li>\u4e0d\u652f\u6301\u4f7f\u7528 <code>x-templates</code>\u3002</li>
+<li>\u4e0d\u652f\u6301\u4f7f\u7528 <code>Vue.compile</code>\u3002</li>
+</ul>
+<h3 id="\u9694\u79bb\u591a\u9875\u9762\u7684\u4f5c\u7528\u57df"><a href="#\u9694\u79bb\u591a\u9875\u9762\u7684\u4f5c\u7528\u57df" class="headerlink" title="\u9694\u79bb\u591a\u9875\u9762\u7684\u4f5c\u7528\u57df"></a>\u9694\u79bb\u591a\u9875\u9762\u7684\u4f5c\u7528\u57df</h3><p>Weex \u5728\u539f\u751f\u7aef\u4f7f\u7528\u7684\u662f\u201c\u591a\u9875\u201d\u7684\u5b9e\u73b0\uff0c\u4e0d\u540c\u7684 js bundle \u5c06\u4f1a\u5728\u4e0d\u540c\u7684\u539f\u751f\u9875\u9762\u4e2d\u6267\u884c\uff1b\u4e5f\u5c31\u662f\u8bf4\uff0c\u4e0d\u540c\u7684 js bundle \u4e4b\u95f4\u5c06\u4e0d\u540c\u5171\u4eab js \u53d8\u91cf\u3002\u5373\u4f7f\u662f <code>Vue</code> \u8fd9\u4e2a\u53d8\u91cf\uff0c\u5728\u4e0d\u540c\u9875\u9762\u4e2d\u4e5f\u5bf9\u5e94\u4e86\u4e0d\u540c\u7684\u5f15\u7528\u3002</p>
+<p>\u57fa\u4e8e\u8fd9\u4e2a\u7279\u6027\uff0cVue \u4e2d\u5168\u5c40\u529f\u80fd\u5c06\u53ea\u5728\u5f53\u524d\u9875\u9762\u5185\u751f\u6548\uff1a</p>
+<ul>
+<li><code>Vue.config</code></li>
+<li><code>Vue.component</code></li>
+<li><code>Vue.directive</code></li>
+<li><code>Vue.filter</code></li>
+<li><code>Vue.mixin</code></li>
+<li><code>Vue.use</code></li>
+</ul>
+<blockquote>
+<p>\u6ce8\uff1a\u4ee5\u4e0a\u63a5\u53e3\u7684\u529f\u80fd\u5e76\u672a\u53d7\u5f71\u54cd\uff0c\u53ea\u662f\u5176\u751f\u6548\u8303\u56f4\u5c06\u4f1a\u9650\u5236\u5728\u540c\u4e00\u9875\u9762\u5185\u3002</p>
+</blockquote>
+<h2 id="\u6837\u5f0f\u5dee\u5f02"><a href="#\u6837\u5f0f\u5dee\u5f02" class="headerlink" title="\u6837\u5f0f\u5dee\u5f02"></a>\u6837\u5f0f\u5dee\u5f02</h2><p>Web \u4e2d\u7684 CSS \u975e\u5e38\u7684\u7075\u6d3b\uff0c\u79ef\u7d2f\u4e86\u7279\u522b\u591a\u7684\u5c5e\u6027\uff0c\u652f\u6301\u591a\u79cd\u5e03\u5c40\u65b9\u6cd5\uff1b\u8fd9\u662f\u5176\u4f18\u52bf\uff0c\u4e5f\u662f\u6d4f\u89c8\u5668\u6027\u80fd\u4f18\u5316\u7684\u4e00\u4e2a\u74f6\u9888\u3002</p>
+<p>Weex \u4e2d\u7684\u6837\u5f0f\u662f\u7531\u539f\u751f\u6e32\u67d3\u5668\u89e3\u6790\u7684\uff0c\u51fa\u4e8e\u6027\u80fd\u548c\u529f\u80fd\u590d\u6742\u5ea6\u7684\u8003\u8651\uff0cWeex \u5bf9 CSS \u7684\u7279\u6027\u505a\u4e86\u4e00\u4e9b\u53d6\u820d\uff0c\u4f7f\u5176\u66f4\u7b26\u5408\u6700\u4f73\u5b9e\u8df5\u3002</p>
+<h3 id="\u5355\u7c7b\u540d\u9009\u62e9\u5668\u548c\u4f5c\u7528\u57df"><a href="#\u5355\u7c7b\u540d\u9009\u62e9\u5668\u548c\u4f5c\u7528\u57df" class="headerlink" title="\u5355\u7c7b\u540d\u9009\u62e9\u5668\u548c\u4f5c\u7528\u57df"></a>\u5355\u7c7b\u540d\u9009\u62e9\u5668\u548c\u4f5c\u7528\u57df</h3><p>Weex \u4e2d\u53ea\u652f\u6301\u5355\u4e2a\u7c7b\u540d\u9009\u62e9\u5668\uff0c\u4e0d\u652f\u6301\u5173\u7cfb\u9009\u62e9\u5668\uff0c\u4e5f\u4e0d\u652f\u6301\u5c5e\u6027\u9009\u62e9\u5668\u3002</p>
+<figure class="highlight css"><table><tr><td class="code"><pre><div class="line"><span class="comment">/* \u652f\u6301\u5355\u4e2a\u7c7b\u540d\u9009\u62e9\u5668 */</span></div><div class="line"><span class="selector-class">.one-class</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">36px</span>;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">/* \u4e0d\u652f\u6301\u5173\u7cfb\u9009\u62e9\u5668 */</span></div><div class="line"><span class="selector-class">.parent</span> > <span class="selector-class">.child</span> {</div><div class="line"> <span class="attribute">padding-top</span>: <span class="number">10px</span>;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">/* \u4e0d\u652f\u6301\u5c5e\u6027\u9009\u62e9\u5668\uff0c\u4e0d\u652f\u6301 `v-cloak` \u6307\u4ee4 */</span></div><div class="line"><span class="selector-attr">[v-cloak]</span> {</div><div class="line"> <span class="attribute">color</span>: <span cla
ss="number">#FF6600</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u8fd9\u4e2a\u53ea\u662f\u5bf9\u6837\u5f0f\u5b9a\u4e49\u7684\u9650\u5236\uff0c\u4e0d\u5f71\u54cd\u6837\u5f0f\u7c7b\u540d\u7684\u4f7f\u7528\uff0c\u5728\u6807\u7b7e\u4e2d\u53ef\u4ee5\u6dfb\u52a0\u591a\u4e2a\u6837\u5f0f\u7c7b\u540d\uff0c\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"one two three"</span>></span><span class="tag"><<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure>
+<h3 id="\u7ec4\u4ef6\u7ea7\u522b\u7684\u4f5c\u7528\u57df"><a href="#\u7ec4\u4ef6\u7ea7\u522b\u7684\u4f5c\u7528\u57df" class="headerlink" title="\u7ec4\u4ef6\u7ea7\u522b\u7684\u4f5c\u7528\u57df"></a>\u7ec4\u4ef6\u7ea7\u522b\u7684\u4f5c\u7528\u57df</h3><p>\u5728 Weex \u4e2d\uff0c\u5199\u5728\u7ec4\u4ef6 <code><style></code> \u91cc\u7684\u6837\u5f0f\u53ea\u80fd\u7528\u5728\u5f53\u524d\u7ec4\u4ef6\u4e2d\uff0c\u9ed8\u8ba4\u662f <code>scoped</code> \u4f5c\u7528\u57df\u3002\u4e3a\u4e86\u4fdd\u6301\u548c Native \u7684\u4e00\u81f4\u6027\uff0c\u5efa\u8bae\u5728 <code>.vue</code> \u6587\u4ef6\u4e2d\u5199\u6837\u5f0f\u65f6\uff0c\u52a0\u4e0a <code>scoped</code> \u5c5e\u6027\uff0c\u5373\uff1a <code><style scoped></code>\u3002</p>
+<h3 id="\u652f\u6301\u7684\u6837\u5f0f\u5c5e\u6027"><a href="#\u652f\u6301\u7684\u6837\u5f0f\u5c5e\u6027" class="headerlink" title="\u652f\u6301\u7684\u6837\u5f0f\u5c5e\u6027"></a>\u652f\u6301\u7684\u6837\u5f0f\u5c5e\u6027</h3><p>Weex \u652f\u6301\u7684\u6837\u5f0f\u7279\u6027\u662f CSS \u7684\u5b50\u96c6\uff0c\u5e76\u4e14\u4f1a\u4e0d\u65ad\u6269\u5145\uff1b\u5728\u5b9e\u73b0\u8fc7\u7a0b\u4e2d\u6211\u4eec\u53c2\u8003\u4e86 <a href="https://gist.github.com/Jinjiang/ea6b403036b7287cf8b8508729b77ac0#css-properties" target="_blank" rel="external">CSS \u5c5e\u6027\u5728\u6d4f\u89c8\u5668\u4e2d\u7684\u4f7f\u7528\u9891\u7387</a>\uff0c\u4f18\u5148\u5b9e\u73b0\u5176\u4e2d\u9891\u7387\u6700\u9ad8\u7684\u4e00\u4e9b\u5c5e\u6027\u3002</p>
+<p>Weex \u652f\u6301\u4e86\u57fa\u672c\u7684\u76d2\u6a21\u578b\u548c flexbox \u5e03\u5c40\uff0c\u4ee5\u53ca\u5176\u4ed6\u5e38\u7528\u6837\u5f0f\uff0c\u8be6\u60c5\u53ef\u53c2\u8003<a href="../common-style.html">Weex \u901a\u7528\u6837\u5f0f\u6587\u6863</a>\u3002</p>
+<p>\u5728\u7f16\u5199\u6837\u5f0f\u65f6\uff0c\u8fd8\u5e94\u8be5\u6ce8\u610f\u4e00\u4e0b\u51e0\u70b9\uff1a</p>
+<ul>
+<li>\u4e0d\u9700\u8981\u5199\u6837\u5f0f\u524d\u7f00\u3002</li>
+<li>Weex \u4e0d\u652f\u6301 <code>display: none;</code>\uff0c\u56e0\u6b64\u4e5f\u4e0d\u652f\u6301 <code>v-show</code> \u6307\u4ee4\u3002</li>
+<li>\u4e3a\u4e86\u4f18\u5316\u6837\u5f0f\u89e3\u6790\u7684\u6548\u7387\uff0c\u6837\u5f0f\u5c5e\u6027\u6682\u4e0d\u652f\u6301\u7b80\u5199\uff0c\u6d89\u53ca\u4e00\u4e0b\u5c5e\u6027\uff1a<ul>
+<li><code>border</code> \u3001<code>border-(top|bottom|left|right)</code></li>
+<li><code>margin</code></li>
+<li><code>padding</code></li>
+<li><code>flex</code></li>
+</ul>
+</li>
+</ul>
+<h2 id="\u7f16\u8bd1\u73af\u5883\u7684\u5dee\u5f02"><a href="#\u7f16\u8bd1\u73af\u5883\u7684\u5dee\u5f02" class="headerlink" title="\u7f16\u8bd1\u73af\u5883\u7684\u5dee\u5f02"></a>\u7f16\u8bd1\u73af\u5883\u7684\u5dee\u5f02</h2><p>\u5728 Weex \u4e2d\u4f7f\u7528 Vue.js \uff0c\u4f60\u6240\u9700\u8981\u5173\u6ce8\u7684\u8fd0\u884c\u5e73\u53f0\u9664\u4e86 Web \u4e4b\u5916\u8fd8\u6709 Android \u548c iOS \uff0c\u5728\u5f00\u53d1\u548c\u7f16\u8bd1\u73af\u5883\u4e0a\u8fd8\u6709\u4e00\u4e9b\u4e0d\u540c\u70b9\u3002\u9488\u5bf9 Web \u548c\u539f\u751f\u5e73\u53f0\uff0c\u5c06 Vue \u9879\u76ee\u6e90\u6587\u4ef6\u7f16\u8bd1\u6210\u76ee\u6807\u6587\u4ef6\uff0c\u6709\u4e24\u79cd\u4e0d\u540c\u7684\u65b9\u5f0f\uff1a</p>
+<ul>
+<li>\u9488\u5bf9 Web \u5e73\u53f0\uff0c\u548c\u666e\u901a Vue 2.X \u9879\u76ee\u4e00\u6837\uff0c\u53ef\u4ee5\u4f7f\u7528\u4efb\u610f\u5b98\u65b9\u63a8\u8350\u7684\u65b9\u5f0f\u7f16\u8bd1\u6e90\u6587\u4ef6\uff0c\u5982 Webpack + vue-loader \u6216\u8005 Browserify + vueify \u3002</li>
+<li>\u9488\u5bf9 Android \u548c iOS \u5e73\u53f0\uff0c\u6211\u4eec\u63d0\u4f9b\u4e86 <a href="https://github.com/weexteam/weex-loader" target="_blank" rel="external">weex-loader</a> \u5de5\u5177\u652f\u6301\u7f16\u8bd1 <code>.vue</code> \u683c\u5f0f\u7684\u5355\u6587\u4ef6\u7ec4\u4ef6\uff1b\u4e5f\u5c31\u662f\u8bf4\uff0c\u76ee\u524d\u53ea\u80fd\u4f7f\u7528 Webpack + weex-loader \u6765\u751f\u6210\u539f\u751f\u7aef\u53ef\u7528\u7684 js bundle\u3002</li>
+</ul>
+<h3 id="\u4f7f\u7528-weex-loader"><a href="#\u4f7f\u7528-weex-loader" class="headerlink" title="\u4f7f\u7528 weex-loader"></a>\u4f7f\u7528 weex-loader</h3><p>weex-loader \u662f Webpack \u7684\u4e00\u4e2a\u52a0\u8f7d\u5668\uff0c\u4f7f\u7528\u65b9\u6cd5\u53c2\u8003\u5176<a href="http://webpack.github.io/docs/using-loaders.html" target="_blank" rel="external">\u5b98\u65b9\u6587\u6863</a>\u3002\u9700\u8981\u63d0\u9192\u7684\u662f\uff0c\u5982\u679c Webpack \u914d\u7f6e\u7684\u5165\u53e3\u6587\u4ef6\u662f\u4e2a <code>.vue</code> \u683c\u5f0f\u7684\u6587\u4ef6\u7684\u8bdd\uff0c\u8fd8\u9700\u8981\u989d\u5916\u4f20\u9012 <code>entry</code> \u53c2\u6570\uff0c\u901a\u5e38\u8bbe\u7f6e\u4e3a <code>true</code>\uff0c\u8868\u793a\u5c06\u5f53\u524d\u7ec4\u4ef6\u4f5c\u4e3a\u5165\u53e3\u7ec4\u4ef6\u3002\u4e3a\u4e86\u80fd\u6b63\u5e38\u5339\u914d <code>.vue</code> \u6587\u4ef6\uff0cWebpack \u914d\u7f6e\u6587\u4ef6\u4e2d weex-loader \u7684\u5339\u914d\u89c4\u5219\u4e5f\u9700\u8981\u6709\u6240\u8c03\u6574\u3002</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="comment">// \u9488\u5bf9 .vue \u6587\u4ef6\u8981\u6dfb\u52a0 entry \u53c2\u6570</span></div><div class="line"> entry: <span class="string">'./path/to/App.vue?entry=true'</span>,</div><div class="line"></div><div class="line"> <span class="comment">// \u5176\u4ed6\u914d\u7f6e\u9879 ...</span></div><div class="line"></div><div class="line"> <span class="built_in">module</span>: {</div><div class="line"> <span class="attr">loaders</span>: [{</div><div class="line"></div><div class="line"> <span class="comment">// \u5339\u914d\u5305\u542b\u4e86 entry \u53c2\u6570\u7684 .vue \u6587\u4ef6\u8def\u5f84</span></div><div class="line"> test: <span class="regexp">/\.vue(\?[^?]+)?$/</span>,</div><div class="line"> <span class="attr">loaders</span>: [<span class="string">'weex-loader'</span>]</div><div class="line"> }]</div><div class="line"> },</div><div clas
s="line">}</div></pre></td></tr></table></figure>
+<p>\u5982\u679c\u4f7f\u7528 <code>.js</code> \u6587\u4ef6\u4f5c\u4e3a Webpack \u914d\u7f6e\u7684\u5165\u53e3\u6587\u4ef6\uff0c\u5219\u4e0d\u9700\u8981\u989d\u5916\u914d\u7f6e\u8fd9\u4e9b\u53c2\u6570\uff0c\u6211\u4eec\u63a8\u8350\u4f7f\u7528 Javascript \u6587\u4ef6\u4f5c\u4e3a\u7f16\u8bd1\u7684\u5165\u53e3\u6587\u4ef6\u3002</p>
+<h3 id="\u642d\u5efa\u539f\u751f\u5f00\u53d1\u73af\u5883"><a href="#\u642d\u5efa\u539f\u751f\u5f00\u53d1\u73af\u5883" class="headerlink" title="\u642d\u5efa\u539f\u751f\u5f00\u53d1\u73af\u5883"></a>\u642d\u5efa\u539f\u751f\u5f00\u53d1\u73af\u5883</h3><p>Weex \u9879\u76ee\u751f\u6210\u7684\u662f\u539f\u751f\u5e94\u7528\uff0c\u5b66\u4e60\u4e00\u4e9b\u5f00\u53d1\u539f\u751f\u5e94\u7528\u7684\u57fa\u7840\u77e5\u8bc6\uff0c\u4f1a\u5bf9\u4f60\u5f00\u53d1 Weex \u9879\u76ee\u5f88\u6709\u5e2e\u52a9\u3002\u53c2\u8003<a href="../../guide/integrate-to-your-app.html">\u300a\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528\u300b</a>\u4e86\u89e3\u66f4\u591a\u4fe1\u606f\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/vue/difference-with-web.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/vue/index.html
----------------------------------------------------------------------
diff --git a/content/cn/references/vue/index.html b/content/cn/references/vue/index.html
new file mode 100644
index 0000000..280faab
--- /dev/null
+++ b/content/cn/references/vue/index.html
@@ -0,0 +1,1320 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Vue | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Vue
+Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02
+\u4f7f\u7528 Vuex \u548c vue-router">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Vue">
+<meta property="og:url" content="https://weex.apache.org/cn/references/vue/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Vue
+Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02
+\u4f7f\u7528 Vuex \u548c vue-router">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.917Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Vue">
+<meta name="twitter:description" content="Vue
+Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02
+\u4f7f\u7528 Vuex \u548c vue-router">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link current ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link current ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Vue
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.917Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Vue"><a href="#Vue" class="headerlink" title="Vue"></a>Vue</h1><ul>
+<li><a href="./difference-with-web.html">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a></li>
+<li><a href="./difference-of-vuex.html">\u4f7f\u7528 Vuex \u548c vue-router</a></li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/vue/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/vue/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[37/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/div.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/div.html b/content/cn/references/components/div.html
new file mode 100644
index 0000000..cce8eb6
--- /dev/null
+++ b/content/cn/references/components/div.html
@@ -0,0 +1,1355 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><div> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;div&gt;&lt;div&gt; \u7ec4\u4ef6\u662f\u7528\u4e8e\u5305\u88c5\u5176\u5b83\u7ec4\u4ef6\u7684\u6700\u57fa\u672c\u5bb9\u5668\u3002\u652f\u6301\u6240\u6709\u7684\u901a\u7528\u6837\u5f0f\u3001\u7279\u6027\u3001flexbox \u5e03\u5c40\u3002\u5176\u7c7b\u4f3c\u4e8e HTML \u7684 &lt;div&gt; \u5bb9\u5668\uff0c\u4f46\u4e0d\u80fd\u76f4\u63a5\u5728\u91cc\u9762\u6dfb\u52a0\u6587\u672c\uff08\u5b57\u7b26\u4e32\uff09\uff0c\u5982\u679c\u8981\u5c55\u793a\u6587\u672c\uff0c\u5e94\u8be5\u4f7f\u7528 &lt;text&gt; \u7ec4\u4ef6\u3002\u5386\u53f2\u7248\u672c\u4e2d\uff0c&lt;div&gt; \u522b\u540d\u662f &lt;container&gt;\uff0c\u76ee\u524d\u5df2\u7ecf\u5f03\u7528\u3002
+\u6ce8\u610f\uff1a
+&lt;div&g">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<div>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/div.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;div&gt;&lt;div&gt; \u7ec4\u4ef6\u662f\u7528\u4e8e\u5305\u88c5\u5176\u5b83\u7ec4\u4ef6\u7684\u6700\u57fa\u672c\u5bb9\u5668\u3002\u652f\u6301\u6240\u6709\u7684\u901a\u7528\u6837\u5f0f\u3001\u7279\u6027\u3001flexbox \u5e03\u5c40\u3002\u5176\u7c7b\u4f3c\u4e8e HTML \u7684 &lt;div&gt; \u5bb9\u5668\uff0c\u4f46\u4e0d\u80fd\u76f4\u63a5\u5728\u91cc\u9762\u6dfb\u52a0\u6587\u672c\uff08\u5b57\u7b26\u4e32\uff09\uff0c\u5982\u679c\u8981\u5c55\u793a\u6587\u672c\uff0c\u5e94\u8be5\u4f7f\u7528 &lt;text&gt; \u7ec4\u4ef6\u3002\u5386\u53f2\u7248\u672c\u4e2d\uff0c&lt;div&gt; \u522b\u540d\u662f &lt;container&gt;\uff0c\u76ee\u524d\u5df2\u7ecf\u5f03\u7528\u3002
+\u6ce8\u610f\uff1a
+&lt;div&g">
+<meta property="og:image" content="https://weex.apache.org/../images/div_1.jpg">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.844Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<div>">
+<meta name="twitter:description" content="&lt;div&gt;&lt;div&gt; \u7ec4\u4ef6\u662f\u7528\u4e8e\u5305\u88c5\u5176\u5b83\u7ec4\u4ef6\u7684\u6700\u57fa\u672c\u5bb9\u5668\u3002\u652f\u6301\u6240\u6709\u7684\u901a\u7528\u6837\u5f0f\u3001\u7279\u6027\u3001flexbox \u5e03\u5c40\u3002\u5176\u7c7b\u4f3c\u4e8e HTML \u7684 &lt;div&gt; \u5bb9\u5668\uff0c\u4f46\u4e0d\u80fd\u76f4\u63a5\u5728\u91cc\u9762\u6dfb\u52a0\u6587\u672c\uff08\u5b57\u7b26\u4e32\uff09\uff0c\u5982\u679c\u8981\u5c55\u793a\u6587\u672c\uff0c\u5e94\u8be5\u4f7f\u7528 &lt;text&gt; \u7ec4\u4ef6\u3002\u5386\u53f2\u7248\u672c\u4e2d\uff0c&lt;div&gt; \u522b\u540d\u662f &lt;container&gt;\uff0c\u76ee\u524d\u5df2\u7ecf\u5f03\u7528\u3002
+\u6ce8\u610f\uff1a
+&lt;div&g">
+<meta name="twitter:image" content="https://weex.apache.org/../images/div_1.jpg">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link current "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link current "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <div>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.844Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-div-gt"><a href="#lt-div-gt" class="headerlink" title="<div>"></a><div></h1><p><code><div></code> \u7ec4\u4ef6\u662f\u7528\u4e8e\u5305\u88c5\u5176\u5b83\u7ec4\u4ef6\u7684\u6700\u57fa\u672c\u5bb9\u5668\u3002\u652f\u6301\u6240\u6709\u7684\u901a\u7528\u6837\u5f0f\u3001\u7279\u6027\u3001<code>flexbox</code> \u5e03\u5c40\u3002\u5176\u7c7b\u4f3c\u4e8e HTML \u7684 <code><div></code> \u5bb9\u5668\uff0c\u4f46<strong>\u4e0d\u80fd</strong>\u76f4\u63a5\u5728\u91cc\u9762\u6dfb\u52a0\u6587\u672c\uff08\u5b57\u7b26\u4e32\uff09\uff0c\u5982\u679c\u8981\u5c55\u793a\u6587\u672c\uff0c\u5e94\u8be5\u4f7f\u7528 <code><text></code> \u7ec4\u4ef6\u3002\u5386\u53f2\u7248\u672c\u4e2d\uff0c<code><div></code> \u522b\u540d\u662f <code><container></code>\uff0c\u76ee\u524d<strong>\u5df2\u7ecf\u5f03\u7528</strong>\u3002</p>
+<p><strong>\u6ce8\u610f\uff1a</strong></p>
+<p><code><div></code> \u5d4c\u5957\u5c42\u7ea7\u4e0d\u53ef\u8fc7\u6df1\uff0c\u5426\u5219\u5bb9\u6613\u5f15\u8d77\u6027\u80fd\u95ee\u9898\uff0c\u5efa\u8bae\u63a7\u5236\u5728 <strong>10</strong> \u5c42\u4ee5\u5185\u3002</p>
+<p>\u4e00\u4e2a\u7b80\u5355\u4f8b\u5b50\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span>></span>Hello World!<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"><span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">70</span>;</div><div class="line"> <span class
="attribute">color</span>: <span class="number">#ff0000</span></div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/a468998152ee680413588c38bd61c29e" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p><img src="../images/div_1.jpg" alt="mobile_preview"></p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p><code><div></code> \u57fa\u672c\u5bb9\u5668\u7ec4\u4ef6\uff0c\u56e0\u6b64\u652f\u6301\u5305\u62ec <code><div></code> \u5728\u5185\u7684\u4efb\u4f55\u7ec4\u4ef6\u4f5c\u4e3a\u81ea\u5df1\u7684\u5b50\u7ec4\u4ef6\u3002\u56e0\u6b64\uff0c\u5728\u5199\u4e00\u4e2a\u7ec4\u4ef6\u65f6\uff0c\u63a8\u8350\u5916\u5c42\u4f7f\u7528 <code><div></code> \u4f5c\u4e3a\u6839\u5bb9\u5668\u3002</p>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><p><code><div></code> \u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f\uff1a</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><p><code><div></code> \u652f\u6301\u6240\u6709\u901a\u7528\u4e8b\u4ef6\uff1a</p>
+<ul>
+<li><code>click</code></li>
+<li><code>longpress</code></li>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a></p>
+<h2 id="\u7ea6\u675f"><a href="#\u7ea6\u675f" class="headerlink" title="\u7ea6\u675f"></a>\u7ea6\u675f</h2><ol>
+<li><p><strong>\u4e0d\u80fd</strong>\u76f4\u63a5\u5728 <code><div></code> \u4e2d\u6dfb\u52a0\u6587\u672c\u3002</p>
+<p>\u9519\u8bef\u793a\u4f8b\uff0c\u201cHello World!\u201d \u65e0\u6cd5\u88ab\u6b63\u5e38\u6e32\u67d3\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span>Hello World!<span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"><span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">70</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#ff0000</span></div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag">&
lt;<span class="name">script</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/3ef3ba3f0f162b27e24c525250c46a04" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+</li>
+<li><p><code><div></code> \u4e0d\u53ef\u6eda\u52a8\uff0c\u5373\u4f7f\u663e\u5f0f\u8bbe\u7f6e\u9ad8\u5ea6\u4e5f\u4e00\u6837\u3002</p>
+<p><a href="http://dotwe.org/a2cc491c5b9e6f6eb06795e45e725efd" target="_blank" rel="external">\u9519\u8bef\u793a\u4f8b</a></p>
+</li>
+</ol>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.box</span> {</div><div class="line"> <span
class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#BBB</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#EEE</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/div.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/div.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/div.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/image.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/image.html b/content/cn/references/components/image.html
new file mode 100644
index 0000000..bff54ab
--- /dev/null
+++ b/content/cn/references/components/image.html
@@ -0,0 +1,1376 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><image> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;image&gt;&lt;image&gt; \u7ec4\u4ef6\u7528\u4e8e\u6e32\u67d3\u56fe\u7247\uff0c\u5e76\u4e14\u5b83\u4e0d\u80fd\u5305\u542b\u4efb\u4f55\u5b50\u7ec4\u4ef6\u3002\u53ef\u4ee5\u7528 &lt;img&gt; \u4f5c\u7b80\u5199\u3002
+\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u9700\u8981\u660e\u786e\u6307\u5b9a width \u548c height\uff0c\u5426\u5219\u56fe\u7247\u65e0\u6cd5\u663e\u793a\u3002
+\u7b80\u5355\u4f8b\u5b50\uff1a
+&lt;template&gt; &lt;div&gt; &lt;img style="width: 560;height: 560;" src="https:/">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<image>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/image.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;image&gt;&lt;image&gt; \u7ec4\u4ef6\u7528\u4e8e\u6e32\u67d3\u56fe\u7247\uff0c\u5e76\u4e14\u5b83\u4e0d\u80fd\u5305\u542b\u4efb\u4f55\u5b50\u7ec4\u4ef6\u3002\u53ef\u4ee5\u7528 &lt;img&gt; \u4f5c\u7b80\u5199\u3002
+\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u9700\u8981\u660e\u786e\u6307\u5b9a width \u548c height\uff0c\u5426\u5219\u56fe\u7247\u65e0\u6cd5\u663e\u793a\u3002
+\u7b80\u5355\u4f8b\u5b50\uff1a
+&lt;template&gt; &lt;div&gt; &lt;img style="width: 560;height: 560;" src="https:/">
+<meta property="og:image" content="https://weex.apache.org/../images/image_1.jpg">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.844Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<image>">
+<meta name="twitter:description" content="&lt;image&gt;&lt;image&gt; \u7ec4\u4ef6\u7528\u4e8e\u6e32\u67d3\u56fe\u7247\uff0c\u5e76\u4e14\u5b83\u4e0d\u80fd\u5305\u542b\u4efb\u4f55\u5b50\u7ec4\u4ef6\u3002\u53ef\u4ee5\u7528 &lt;img&gt; \u4f5c\u7b80\u5199\u3002
+\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u9700\u8981\u660e\u786e\u6307\u5b9a width \u548c height\uff0c\u5426\u5219\u56fe\u7247\u65e0\u6cd5\u663e\u793a\u3002
+\u7b80\u5355\u4f8b\u5b50\uff1a
+&lt;template&gt; &lt;div&gt; &lt;img style="width: 560;height: 560;" src="https:/">
+<meta name="twitter:image" content="https://weex.apache.org/../images/image_1.jpg">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link current "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link current "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <image>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.844Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-image-gt"><a href="#lt-image-gt" class="headerlink" title="<image>"></a><image></h1><p><code><image></code> \u7ec4\u4ef6\u7528\u4e8e\u6e32\u67d3\u56fe\u7247\uff0c\u5e76\u4e14\u5b83\u4e0d\u80fd\u5305\u542b\u4efb\u4f55\u5b50\u7ec4\u4ef6\u3002\u53ef\u4ee5\u7528 <code><img></code> \u4f5c\u7b80\u5199\u3002</p>
+<p>\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u9700\u8981\u660e\u786e\u6307\u5b9a <code>width</code> \u548c <code>height</code>\uff0c\u5426\u5219\u56fe\u7247\u65e0\u6cd5\u663e\u793a\u3002</p>
+<p>\u7b80\u5355\u4f8b\u5b50\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">style</span>=<span class="string">"width: 560;height: 560;"</span> <span class="attr">src</span>=<span class="string">"https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"</span>></span><span class="tag"></<span class="name">img</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/23b6cf951e6059d2cf7b9a74a9915ace" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p><code><image></code> \u7ec4\u4ef6\u4e0d\u652f\u6301\u4efb\u4f55\u5b50\u7ec4\u4ef6\uff0c\u56e0\u6b64\u4e0d\u8981\u5c1d\u8bd5\u5728 <code><image></code> \u7ec4\u4ef6\u4e2d\u6dfb\u52a0\u4efb\u4f55\u7ec4\u4ef6\u3002\u5982\u679c\u9700\u8981\u5b9e\u73b0 <code>background-image</code> \u7684\u6548\u679c\uff0c\u53ef\u4ee5\u4f7f\u7528 <code><image></code> \u7ec4\u4ef6\u548c <code>position</code> \u5b9a\u4f4d\u6765\u73b0\u5b9e\uff0c\u5982\u4e0b\u9762\u4ee3\u7801\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">style</span>=<span class="string">"width:750; height:750;"</span> <span class="attr">src</span>=<span class="string">"https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"</span>></span><span class="tag"></<span class="name">img</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"title"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size:50; color: #ff0000"</span>></span>\u4f60\u597d\uff0cimage<span class="tag"></<span class="nam
e">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.title</span>{</div><div class="line"> <span class="attribute">position</span>:absolute;</div><div class="line"> <span class="attribute">top</span>:<span class="number">50</span>;</div><div class="line"> <span class="attribute">left</span>:<span class="number">10</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/08dd49aaca8bf289c5fc08f808b9c08c" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h2><p><code><image></code> \u7ec4\u4ef6\uff0c\u5305\u542b <code>src</code> \u548c <code>resize</code> \u4e24\u4e2a\u91cd\u8981\u7279\u6027\u3002</p>
+<ul>
+<li><code>src {string}</code>\uff1a\u5b9a\u4e49\u56fe\u7247\u94fe\u63a5\uff0c\u76ee\u524d\u56fe\u7247\u6682\u4e0d\u652f\u6301\u672c\u5730\u56fe\u7247\u3002</li>
+<li><p><code>resize {string}</code>\uff1a\u53ef\u4ee5\u63a7\u5236\u56fe\u7247\u7684\u62c9\u4f38\u72b6\u6001\uff0c\u503c\u884c\u4e3a\u548c W3C \u6807\u51c6\u4e00\u81f4\u3002</p>
+<p>\u53ef\u9009\u503c\u4e3a\uff1a</p>
+<ul>
+<li><code>stretch</code>\uff1a\u9ed8\u8ba4\u503c\uff0c\u6307\u5b9a\u56fe\u7247\u6309\u7167\u5bb9\u5668\u62c9\u4f38\uff0c\u6709\u53ef\u80fd\u4f7f\u56fe\u7247\u4ea7\u751f\u5f62\u53d8\u3002</li>
+<li><code>cover</code>\uff1a\u6307\u5b9a\u56fe\u7247\u53ef\u4ee5\u88ab\u8c03\u6574\u5230\u5bb9\u5668\uff0c\u4ee5\u4f7f\u56fe\u7247\u5b8c\u5168\u8986\u76d6\u80cc\u666f\u533a\u57df\uff0c\u56fe\u7247\u6709\u53ef\u80fd\u88ab\u526a\u88c1\u3002</li>
+<li><code>contain</code>\uff1a\u6307\u5b9a\u53ef\u4ee5\u4e0d\u7528\u8003\u8651\u5bb9\u5668\u7684\u5927\u5c0f\uff0c\u628a\u56fe\u50cf\u6269\u5c55\u81f3\u6700\u5927\u5c3a\u5bf8\uff0c\u4ee5\u4f7f\u5176\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u5b8c\u5168\u9002\u5e94\u5185\u5bb9\u533a\u57df\u3002</li>
+</ul>
+<p>\u4f8b\u5b50\uff1a</p>
+<p><img src="../images/image_1.jpg" alt="mobile_preview"></p>
+<p><a href="http://dotwe.org/049213ab3364a86637e211c0329cdc50" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><ul>
+<li><p>\u901a\u7528\u6837\u5f0f\uff1a\u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+</li>
+</ul>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><ul>
+<li><p><code>load</code> <sup class="wx-v">v0.8+</sup>\uff1a\u5f53\u56fe\u7247\u52a0\u8f7d\u5b8c\u6210\u65f6\u89e6\u53d1\u3002\u76ee\u524d\u5728 Android\u3001iOS \u4e0a\u652f\u6301\uff0cH5 \u6682\u4e0d\u652f\u6301\u3002</p>
+</li>
+<li><p>\u901a\u7528\u4e8b\u4ef6</p>
+<p>\u652f\u6301\u6240\u6709\u901a\u7528\u4e8b\u4ef6\uff1a</p>
+<ul>
+<li><code>click</code></li>
+<li><code>longpress</code></li>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a></p>
+</li>
+</ul>
+<h2 id="\u7ea6\u675f"><a href="#\u7ea6\u675f" class="headerlink" title="\u7ea6\u675f"></a>\u7ea6\u675f</h2><ol>
+<li>\u9700\u8981\u6307\u5b9a\u5bbd\u9ad8\uff1b</li>
+<li>\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002</li>
+</ol>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">scroller</span> <span class="attr">class</span>=<span class="string">"wrapper"</span> ></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page-head"</span> ></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">class</span>=<span class="string">"title-bg"</span> <span class="attr">resize</span>=<span class="string">"cover"</span> <span class="attr">src</span>=<span class="string">"https://img.alicdn.com/tps/TB1dX5NOFXXXXc6XFXXXXXXXXXX-750-202.png"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div c
lass="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"title-box"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span>></span>Alan Mathison Turing<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"article"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"paragraph"</span>></span>Alan Mathison Turing ( 23 June 1912 \u2013 7 June 1954) was an English computer scientist, m
athematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"paragraph"</span>></span>During the Second World War, Turing worked for the Government Code and Cypher School (GC&CS) at Bletchley Park, Britain's codebreaking centre. For a time he led Hut 8, the section responsible for German naval cryptanalysis. He devised a number of techniques for speeding the breaking of German ciphers, including improvements to the pre-war Polish bombe metho
d, an electromechanical machine that could find settings for the Enigma machine. Turing played a pivotal role in cracking intercepted coded messages that enabled the Allies to defeat the Nazis in many crucial engagements, including the Battle of the Atlantic; it has been estimated that this work shortened the war in Europe by more than two years and saved over fourteen million lives.<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"paragraph"</span>></span>After the war, he worked at the National Physical Laboratory, where he designed the ACE, among the first designs for a stored-program computer. In 1948 Turing joined Max Newman's Computing Machine Laboratory at the Victoria University of Manchester, where he helped develop the Manchester computers and became interested in mathematical biology. He wrote a paper on the chemical bas
is of morphogenesis, and predicted oscillating chemical reactions such as the Belousov\u2013Zhabotinsky reaction, first observed in the 1960s.<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"paragraph"</span>></span>Turing was prosecuted in 1952 for homosexual acts, when by the Labouchere Amendment, "gross indecency" was still criminal in the UK. He accepted chemical castration treatment, with DES, as an alternative to prison. Turing died in 1954, 16 days before his 42nd birthday, from cyanide poisoning. An inquest determined his death as suicide, but it has been noted that the known evidence is also consistent with accidental poisoning. In 2009, following an Internet campaign, British Prime Minister Gordon Brown made an official public apology on behalf of the British government for "the appalling way he was treated." Queen Elizabet
h II granted him a posthumous pardon in 2013.<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">scroller</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.page-head</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">750px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.title-bg</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="numbe
r">750px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.title-box</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">750px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">align-items</span>: center;</div><div class="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</div><div class="line"> <span class="
attribute">left</span>: <span class="number">0</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.title</span> {</div><div class="line"> <span class="attribute">color</span>: <span class="number">#ffffff</span>;</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">32px</span>;</div><div class="line"> <span class="attribute">font-weight</span>: bold;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.article</span> {</div><div class="line"> <span class="attribute">padding</span>: <span class="number">20px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.paragraph</span>{</div><div class="line"> <span class="attribute">margin-bottom</span>: <span class="number">15px</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div>
</pre></td></tr></table></figure>
+<p><a href="../../../examples/image.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/image.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/image.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[50/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/blog/index.html
----------------------------------------------------------------------
diff --git a/content/cn/blog/index.html b/content/cn/blog/index.html
new file mode 100644
index 0000000..37c9b58
--- /dev/null
+++ b/content/cn/blog/index.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="website">
+<meta property="og:title" content="Weex">
+<meta property="og:url" content="https://weex.apache.org/cn/blog/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.801Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="blog" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "blog";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="blog-wrapper wrapper">
+ <div class="archives">
+
+
+ <article class="blog-article blog-type-post">
+ <div class="blog-article-inner">
+ <header class="article-header">
+
+
+ <h1 itemprop="name">
+ <a class="article-title" href="/cn/hello/">hello</a>
+ </h1>
+
+
+ <time class="article-date" datetime="2016-12-27T07:54:28.000Z">Updated time: 27/12/2016</time>
+</header>
+
+ </div>
+</article>
+
+
+
+</div>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/blog/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/blog/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/advanced/extend-to-android.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/advanced/extend-to-android.html b/content/cn/doc/advanced/extend-to-android.html
new file mode 100644
index 0000000..1112675
--- /dev/null
+++ b/content/cn/doc/advanced/extend-to-android.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/advanced/extend-to-android.html"><meta http-equiv="refresh" content="0; url=/cn/references/advanced/extend-to-android.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/advanced/extend-to-html5.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/advanced/extend-to-html5.html b/content/cn/doc/advanced/extend-to-html5.html
new file mode 100644
index 0000000..47ec039
--- /dev/null
+++ b/content/cn/doc/advanced/extend-to-html5.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/advanced/extend-to-html5.html"><meta http-equiv="refresh" content="0; url=/cn/references/advanced/extend-to-html5.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/advanced/extend-to-ios.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/advanced/extend-to-ios.html b/content/cn/doc/advanced/extend-to-ios.html
new file mode 100644
index 0000000..8e6bce6
--- /dev/null
+++ b/content/cn/doc/advanced/extend-to-ios.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/advanced/extend-to-ios.html"><meta http-equiv="refresh" content="0; url=/cn/references/advanced/extend-to-ios.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/advanced/how-data-binding-works.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/advanced/how-data-binding-works.html b/content/cn/doc/advanced/how-data-binding-works.html
new file mode 100644
index 0000000..100f5e3
--- /dev/null
+++ b/content/cn/doc/advanced/how-data-binding-works.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/advanced/"><meta http-equiv="refresh" content="0; url=/cn/references/advanced/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/advanced/how-it-works.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/advanced/how-it-works.html b/content/cn/doc/advanced/how-it-works.html
new file mode 100644
index 0000000..321c31b
--- /dev/null
+++ b/content/cn/doc/advanced/how-it-works.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/intro/"><meta http-equiv="refresh" content="0; url=/cn/guide/intro/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/advanced/integrate-to-android.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/advanced/integrate-to-android.html b/content/cn/doc/advanced/integrate-to-android.html
new file mode 100644
index 0000000..100f5e3
--- /dev/null
+++ b/content/cn/doc/advanced/integrate-to-android.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/advanced/"><meta http-equiv="refresh" content="0; url=/cn/references/advanced/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/advanced/integrate-to-html5.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/advanced/integrate-to-html5.html b/content/cn/doc/advanced/integrate-to-html5.html
new file mode 100644
index 0000000..100f5e3
--- /dev/null
+++ b/content/cn/doc/advanced/integrate-to-html5.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/advanced/"><meta http-equiv="refresh" content="0; url=/cn/references/advanced/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/advanced/integrate-to-ios.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/advanced/integrate-to-ios.html b/content/cn/doc/advanced/integrate-to-ios.html
new file mode 100644
index 0000000..100f5e3
--- /dev/null
+++ b/content/cn/doc/advanced/integrate-to-ios.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/advanced/"><meta http-equiv="refresh" content="0; url=/cn/references/advanced/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/advanced/main.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/advanced/main.html b/content/cn/doc/advanced/main.html
new file mode 100644
index 0000000..100f5e3
--- /dev/null
+++ b/content/cn/doc/advanced/main.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/advanced/"><meta http-equiv="refresh" content="0; url=/cn/references/advanced/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/a.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/a.html b/content/cn/doc/components/a.html
new file mode 100644
index 0000000..b94ce5e
--- /dev/null
+++ b/content/cn/doc/components/a.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/"><meta http-equiv="refresh" content="0; url=/cn/references/components/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/cell.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/cell.html b/content/cn/doc/components/cell.html
new file mode 100644
index 0000000..2366f0d
--- /dev/null
+++ b/content/cn/doc/components/cell.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/cell.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/cell.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/div.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/div.html b/content/cn/doc/components/div.html
new file mode 100644
index 0000000..ffbf8c7
--- /dev/null
+++ b/content/cn/doc/components/div.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/div.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/div.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/image.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/image.html b/content/cn/doc/components/image.html
new file mode 100644
index 0000000..fbd89f9
--- /dev/null
+++ b/content/cn/doc/components/image.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/image.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/image.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/indicator.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/indicator.html b/content/cn/doc/components/indicator.html
new file mode 100644
index 0000000..7d7593d
--- /dev/null
+++ b/content/cn/doc/components/indicator.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/indicator.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/indicator.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/input.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/input.html b/content/cn/doc/components/input.html
new file mode 100644
index 0000000..48ae27a
--- /dev/null
+++ b/content/cn/doc/components/input.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/input.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/input.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/list.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/list.html b/content/cn/doc/components/list.html
new file mode 100644
index 0000000..6341f01
--- /dev/null
+++ b/content/cn/doc/components/list.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/list.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/list.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/loading.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/loading.html b/content/cn/doc/components/loading.html
new file mode 100644
index 0000000..c09761a
--- /dev/null
+++ b/content/cn/doc/components/loading.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/loading.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/loading.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/main.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/main.html b/content/cn/doc/components/main.html
new file mode 100644
index 0000000..b94ce5e
--- /dev/null
+++ b/content/cn/doc/components/main.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/"><meta http-equiv="refresh" content="0; url=/cn/references/components/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/refresh.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/refresh.html b/content/cn/doc/components/refresh.html
new file mode 100644
index 0000000..2a702a3
--- /dev/null
+++ b/content/cn/doc/components/refresh.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/refresh.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/refresh.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/scroller.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/scroller.html b/content/cn/doc/components/scroller.html
new file mode 100644
index 0000000..f9f4127
--- /dev/null
+++ b/content/cn/doc/components/scroller.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/scroller.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/scroller.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/slider.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/slider.html b/content/cn/doc/components/slider.html
new file mode 100644
index 0000000..3de085c
--- /dev/null
+++ b/content/cn/doc/components/slider.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/slider.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/slider.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/special-element.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/special-element.html b/content/cn/doc/components/special-element.html
new file mode 100644
index 0000000..b94ce5e
--- /dev/null
+++ b/content/cn/doc/components/special-element.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/"><meta http-equiv="refresh" content="0; url=/cn/references/components/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/switch.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/switch.html b/content/cn/doc/components/switch.html
new file mode 100644
index 0000000..ee836cf
--- /dev/null
+++ b/content/cn/doc/components/switch.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/switch.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/switch.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/text.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/text.html b/content/cn/doc/components/text.html
new file mode 100644
index 0000000..719ef39
--- /dev/null
+++ b/content/cn/doc/components/text.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/text.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/text.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/textarea.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/textarea.html b/content/cn/doc/components/textarea.html
new file mode 100644
index 0000000..e17b548
--- /dev/null
+++ b/content/cn/doc/components/textarea.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/textarea.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/textarea.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/video.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/video.html b/content/cn/doc/components/video.html
new file mode 100644
index 0000000..efe1807
--- /dev/null
+++ b/content/cn/doc/components/video.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/video.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/video.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/web.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/web.html b/content/cn/doc/components/web.html
new file mode 100644
index 0000000..24ebad2
--- /dev/null
+++ b/content/cn/doc/components/web.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/web.html"><meta http-equiv="refresh" content="0; url=/cn/references/components/web.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/wxc-navpage.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/wxc-navpage.html b/content/cn/doc/components/wxc-navpage.html
new file mode 100644
index 0000000..b94ce5e
--- /dev/null
+++ b/content/cn/doc/components/wxc-navpage.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/"><meta http-equiv="refresh" content="0; url=/cn/references/components/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/components/wxc-tabbar.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/components/wxc-tabbar.html b/content/cn/doc/components/wxc-tabbar.html
new file mode 100644
index 0000000..b94ce5e
--- /dev/null
+++ b/content/cn/doc/components/wxc-tabbar.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/components/"><meta http-equiv="refresh" content="0; url=/cn/references/components/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/demo/animation.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/demo/animation.html b/content/cn/doc/demo/animation.html
new file mode 100644
index 0000000..2fc9051
--- /dev/null
+++ b/content/cn/doc/demo/animation.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/"><meta http-equiv="refresh" content="0; url=/cn/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/demo/clipboard.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/demo/clipboard.html b/content/cn/doc/demo/clipboard.html
new file mode 100644
index 0000000..2fc9051
--- /dev/null
+++ b/content/cn/doc/demo/clipboard.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/"><meta http-equiv="refresh" content="0; url=/cn/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/demo/hello-world.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/demo/hello-world.html b/content/cn/doc/demo/hello-world.html
new file mode 100644
index 0000000..2fc9051
--- /dev/null
+++ b/content/cn/doc/demo/hello-world.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/"><meta http-equiv="refresh" content="0; url=/cn/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/demo/list.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/demo/list.html b/content/cn/doc/demo/list.html
new file mode 100644
index 0000000..2fc9051
--- /dev/null
+++ b/content/cn/doc/demo/list.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/"><meta http-equiv="refresh" content="0; url=/cn/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/demo/modal.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/demo/modal.html b/content/cn/doc/demo/modal.html
new file mode 100644
index 0000000..2fc9051
--- /dev/null
+++ b/content/cn/doc/demo/modal.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/"><meta http-equiv="refresh" content="0; url=/cn/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/demo/slider.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/demo/slider.html b/content/cn/doc/demo/slider.html
new file mode 100644
index 0000000..2fc9051
--- /dev/null
+++ b/content/cn/doc/demo/slider.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/"><meta http-equiv="refresh" content="0; url=/cn/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/develop-on-your-local-machine.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/develop-on-your-local-machine.html b/content/cn/doc/develop-on-your-local-machine.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/develop-on-your-local-machine.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/faq.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/faq.html b/content/cn/doc/faq.html
new file mode 100644
index 0000000..55c9dd4
--- /dev/null
+++ b/content/cn/doc/faq.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/faq.html"><meta http-equiv="refresh" content="0; url=/cn/faq.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/get-started.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/get-started.html b/content/cn/doc/get-started.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/get-started.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/guide.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/guide.html b/content/cn/doc/guide.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/guide.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/how-to/customize-a-native-component.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/how-to/customize-a-native-component.html b/content/cn/doc/how-to/customize-a-native-component.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/how-to/customize-a-native-component.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/how-to/cuszomize-native-apis.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/how-to/cuszomize-native-apis.html b/content/cn/doc/how-to/cuszomize-native-apis.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/how-to/cuszomize-native-apis.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/how-to/debug-with-devtools.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/how-to/debug-with-devtools.html b/content/cn/doc/how-to/debug-with-devtools.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/how-to/debug-with-devtools.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/how-to/debug-with-html5.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/how-to/debug-with-html5.html b/content/cn/doc/how-to/debug-with-html5.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/how-to/debug-with-html5.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/how-to/main.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/how-to/main.html b/content/cn/doc/how-to/main.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/how-to/main.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/how-to/preview-in-browser.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/how-to/preview-in-browser.html b/content/cn/doc/how-to/preview-in-browser.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/how-to/preview-in-browser.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/how-to/preview-in-playground-app.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/how-to/preview-in-playground-app.html b/content/cn/doc/how-to/preview-in-playground-app.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/how-to/preview-in-playground-app.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/how-to/require-3rd-party-libs.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/how-to/require-3rd-party-libs.html b/content/cn/doc/how-to/require-3rd-party-libs.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/how-to/require-3rd-party-libs.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/how-to/transform-code-into-js-bundle.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/how-to/transform-code-into-js-bundle.html b/content/cn/doc/how-to/transform-code-into-js-bundle.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/how-to/transform-code-into-js-bundle.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/index.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/index.html b/content/cn/doc/index.html
new file mode 100644
index 0000000..2fc9051
--- /dev/null
+++ b/content/cn/doc/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/"><meta http-equiv="refresh" content="0; url=/cn/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/modules/animation.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/modules/animation.html b/content/cn/doc/modules/animation.html
new file mode 100644
index 0000000..6854bdd
--- /dev/null
+++ b/content/cn/doc/modules/animation.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/modules/animation.html"><meta http-equiv="refresh" content="0; url=/cn/references/modules/animation.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/modules/clipboard.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/modules/clipboard.html b/content/cn/doc/modules/clipboard.html
new file mode 100644
index 0000000..ee6d2d8
--- /dev/null
+++ b/content/cn/doc/modules/clipboard.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/modules/clipboard.html"><meta http-equiv="refresh" content="0; url=/cn/references/modules/clipboard.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/modules/dom.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/modules/dom.html b/content/cn/doc/modules/dom.html
new file mode 100644
index 0000000..92131b0
--- /dev/null
+++ b/content/cn/doc/modules/dom.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/modules/dom.html"><meta http-equiv="refresh" content="0; url=/cn/references/modules/dom.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/modules/globalevent.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/modules/globalevent.html b/content/cn/doc/modules/globalevent.html
new file mode 100644
index 0000000..cedc1b6
--- /dev/null
+++ b/content/cn/doc/modules/globalevent.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/modules/globalevent.html"><meta http-equiv="refresh" content="0; url=/cn/references/modules/globalevent.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/modules/main.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/modules/main.html b/content/cn/doc/modules/main.html
new file mode 100644
index 0000000..ca536b5
--- /dev/null
+++ b/content/cn/doc/modules/main.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/modules/"><meta http-equiv="refresh" content="0; url=/cn/references/modules/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/modules/modal.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/modules/modal.html b/content/cn/doc/modules/modal.html
new file mode 100644
index 0000000..d612fc9
--- /dev/null
+++ b/content/cn/doc/modules/modal.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/modules/modal.html"><meta http-equiv="refresh" content="0; url=/cn/references/modules/modal.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/modules/navigator.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/modules/navigator.html b/content/cn/doc/modules/navigator.html
new file mode 100644
index 0000000..3e1c4f2
--- /dev/null
+++ b/content/cn/doc/modules/navigator.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/modules/navigator.html"><meta http-equiv="refresh" content="0; url=/cn/references/modules/navigator.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/modules/picker.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/modules/picker.html b/content/cn/doc/modules/picker.html
new file mode 100644
index 0000000..d89c678
--- /dev/null
+++ b/content/cn/doc/modules/picker.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/modules/picker.html"><meta http-equiv="refresh" content="0; url=/cn/references/modules/picker.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/modules/storage.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/modules/storage.html b/content/cn/doc/modules/storage.html
new file mode 100644
index 0000000..f9f4e97
--- /dev/null
+++ b/content/cn/doc/modules/storage.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/modules/storage.html"><meta http-equiv="refresh" content="0; url=/cn/references/modules/storage.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/modules/stream.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/modules/stream.html b/content/cn/doc/modules/stream.html
new file mode 100644
index 0000000..7e78749
--- /dev/null
+++ b/content/cn/doc/modules/stream.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/modules/stream.html"><meta http-equiv="refresh" content="0; url=/cn/references/modules/stream.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/modules/timer.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/modules/timer.html b/content/cn/doc/modules/timer.html
new file mode 100644
index 0000000..ca536b5
--- /dev/null
+++ b/content/cn/doc/modules/timer.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/modules/"><meta http-equiv="refresh" content="0; url=/cn/references/modules/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/modules/webview.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/modules/webview.html b/content/cn/doc/modules/webview.html
new file mode 100644
index 0000000..e01df78
--- /dev/null
+++ b/content/cn/doc/modules/webview.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/modules/webview.html"><meta http-equiv="refresh" content="0; url=/cn/references/modules/webview.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/api.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/api.html b/content/cn/doc/references/api.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/api.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/bootstrap.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/bootstrap.html b/content/cn/doc/references/bootstrap.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/bootstrap.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/cheatsheet.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/cheatsheet.html b/content/cn/doc/references/cheatsheet.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/cheatsheet.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/color-names.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/color-names.html b/content/cn/doc/references/color-names.html
new file mode 100644
index 0000000..1a25f1a
--- /dev/null
+++ b/content/cn/doc/references/color-names.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/color-names.html"><meta http-equiv="refresh" content="0; url=/cn/references/color-names.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/common-attrs.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/common-attrs.html b/content/cn/doc/references/common-attrs.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/common-attrs.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/common-event.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/common-event.html b/content/cn/doc/references/common-event.html
new file mode 100644
index 0000000..ad8d156
--- /dev/null
+++ b/content/cn/doc/references/common-event.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/common-event.html"><meta http-equiv="refresh" content="0; url=/cn/references/common-event.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/common-style.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/common-style.html b/content/cn/doc/references/common-style.html
new file mode 100644
index 0000000..6133fed
--- /dev/null
+++ b/content/cn/doc/references/common-style.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/common-style.html"><meta http-equiv="refresh" content="0; url=/cn/references/common-style.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/component-defs.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/component-defs.html b/content/cn/doc/references/component-defs.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/component-defs.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/events/appear.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/events/appear.html b/content/cn/doc/references/events/appear.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/events/appear.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/events/blur.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/events/blur.html b/content/cn/doc/references/events/blur.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/events/blur.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/events/change.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/events/change.html b/content/cn/doc/references/events/change.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/events/change.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/events/focus.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/events/focus.html b/content/cn/doc/references/events/focus.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/events/focus.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/events/input.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/events/input.html b/content/cn/doc/references/events/input.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/events/input.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/gesture.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/gesture.html b/content/cn/doc/references/gesture.html
new file mode 100644
index 0000000..6a3b7d4
--- /dev/null
+++ b/content/cn/doc/references/gesture.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/gesture.html"><meta http-equiv="refresh" content="0; url=/cn/references/gesture.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/main.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/main.html b/content/cn/doc/references/main.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/main.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/background-color.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/background-color.html b/content/cn/doc/references/styles/background-color.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/styles/background-color.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/color.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/color.html b/content/cn/doc/references/styles/color.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/styles/color.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/font-family.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/font-family.html b/content/cn/doc/references/styles/font-family.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/styles/font-family.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/font-size.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/font-size.html b/content/cn/doc/references/styles/font-size.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/styles/font-size.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/font-style.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/font-style.html b/content/cn/doc/references/styles/font-style.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/styles/font-style.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/font-weight.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/font-weight.html b/content/cn/doc/references/styles/font-weight.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/styles/font-weight.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/line-height.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/line-height.html b/content/cn/doc/references/styles/line-height.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/styles/line-height.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/lines.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/lines.html b/content/cn/doc/references/styles/lines.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/styles/lines.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/opacity.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/opacity.html b/content/cn/doc/references/styles/opacity.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/styles/opacity.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/position.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/position.html b/content/cn/doc/references/styles/position.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/styles/position.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/text-align.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/text-align.html b/content/cn/doc/references/styles/text-align.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/styles/text-align.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/text-decoration.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/text-decoration.html b/content/cn/doc/references/styles/text-decoration.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/styles/text-decoration.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/text-overflow.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/text-overflow.html b/content/cn/doc/references/styles/text-overflow.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/references/styles/text-overflow.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/styles/units.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/styles/units.html b/content/cn/doc/references/styles/units.html
new file mode 100644
index 0000000..c2ae159
--- /dev/null
+++ b/content/cn/doc/references/styles/units.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/unit.html"><meta http-equiv="refresh" content="0; url=/cn/references/unit.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/references/text-style.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/references/text-style.html b/content/cn/doc/references/text-style.html
new file mode 100644
index 0000000..2d590fb
--- /dev/null
+++ b/content/cn/doc/references/text-style.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/text-style.html"><meta http-equiv="refresh" content="0; url=/cn/references/text-style.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/specs/js-bundle-format.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/specs/js-bundle-format.html b/content/cn/doc/specs/js-bundle-format.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/specs/js-bundle-format.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/specs/js-framework-apis.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/specs/js-framework-apis.html b/content/cn/doc/specs/js-framework-apis.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/specs/js-framework-apis.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/specs/virtual-dom-apis.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/specs/virtual-dom-apis.html b/content/cn/doc/specs/virtual-dom-apis.html
new file mode 100644
index 0000000..07da84a
--- /dev/null
+++ b/content/cn/doc/specs/virtual-dom-apis.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/references/"><meta http-equiv="refresh" content="0; url=/cn/references/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/syntax/comm.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/syntax/comm.html b/content/cn/doc/syntax/comm.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/syntax/comm.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/syntax/composed-component.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/syntax/composed-component.html b/content/cn/doc/syntax/composed-component.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/syntax/composed-component.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/syntax/config-n-data.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/syntax/config-n-data.html b/content/cn/doc/syntax/config-n-data.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/syntax/config-n-data.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/syntax/data-binding.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/syntax/data-binding.html b/content/cn/doc/syntax/data-binding.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/syntax/data-binding.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/syntax/display-logic.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/syntax/display-logic.html b/content/cn/doc/syntax/display-logic.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/syntax/display-logic.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/syntax/events.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/syntax/events.html b/content/cn/doc/syntax/events.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/syntax/events.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/syntax/id.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/syntax/id.html b/content/cn/doc/syntax/id.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/syntax/id.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/syntax/main.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/syntax/main.html b/content/cn/doc/syntax/main.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/syntax/main.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/syntax/path.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/syntax/path.html b/content/cn/doc/syntax/path.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/syntax/path.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/syntax/render-logic.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/syntax/render-logic.html b/content/cn/doc/syntax/render-logic.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/syntax/render-logic.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/syntax/style-n-class.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/syntax/style-n-class.html b/content/cn/doc/syntax/style-n-class.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/syntax/style-n-class.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/tools/cli.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/tools/cli.html b/content/cn/doc/tools/cli.html
new file mode 100644
index 0000000..2fc9051
--- /dev/null
+++ b/content/cn/doc/tools/cli.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/"><meta http-equiv="refresh" content="0; url=/cn/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/tools/devtools-android.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/tools/devtools-android.html b/content/cn/doc/tools/devtools-android.html
new file mode 100644
index 0000000..2fc9051
--- /dev/null
+++ b/content/cn/doc/tools/devtools-android.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/"><meta http-equiv="refresh" content="0; url=/cn/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/tools/devtools-ios.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/tools/devtools-ios.html b/content/cn/doc/tools/devtools-ios.html
new file mode 100644
index 0000000..2fc9051
--- /dev/null
+++ b/content/cn/doc/tools/devtools-ios.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/"><meta http-equiv="refresh" content="0; url=/cn/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/tools/devtools.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/tools/devtools.html b/content/cn/doc/tools/devtools.html
new file mode 100644
index 0000000..2fc9051
--- /dev/null
+++ b/content/cn/doc/tools/devtools.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/"><meta http-equiv="refresh" content="0; url=/cn/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/tools/playground-app.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/tools/playground-app.html b/content/cn/doc/tools/playground-app.html
new file mode 100644
index 0000000..d75239e
--- /dev/null
+++ b/content/cn/doc/tools/playground-app.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/playground.html"><meta http-equiv="refresh" content="0; url=/cn/playground.html"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/tools/transformer.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/tools/transformer.html b/content/cn/doc/tools/transformer.html
new file mode 100644
index 0000000..2fc9051
--- /dev/null
+++ b/content/cn/doc/tools/transformer.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/"><meta http-equiv="refresh" content="0; url=/cn/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/doc/tutorial.html
----------------------------------------------------------------------
diff --git a/content/cn/doc/tutorial.html b/content/cn/doc/tutorial.html
new file mode 100644
index 0000000..e29a46f
--- /dev/null
+++ b/content/cn/doc/tutorial.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>Redirecting...</title><link rel="canonical" href="/cn/guide/"><meta http-equiv="refresh" content="0; url=/cn/guide/"></head></html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/download.html
----------------------------------------------------------------------
diff --git a/content/cn/download.html b/content/cn/download.html
new file mode 100644
index 0000000..f5f13af
--- /dev/null
+++ b/content/cn/download.html
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="website">
+<meta property="og:title" content="Weex">
+<meta property="og:url" content="https://weex.apache.org/cn/download.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.803Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="download" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "download";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <script src="/js/mobile-detect.js"></script>
+<script>
+ function parseWeexVersion(data){
+ window.androidURL = data.androidDownload;
+ window.iosURL = data.iosDownload;
+ }
+ window.parseWeexVersion = parseWeexVersion;
+</script>
+<script src="https://h5.m.taobao.com/js/weex/playground/app/info.js"></script>
+
+<h5 style="text-align:center;margin-top: 100px;">please open this link in system browser</h5>
+
+<script>
+ var md = new MobileDetect(window.navigator.userAgent);
+ if ( md.is("iPhone") ) {
+ location = window.iosURL;
+ }else{
+ location = window.androidURL;
+ }
+</script>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/download.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/download.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[02/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/references/common-style.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/references/common-style.html b/content/cn/v-0.10/references/common-style.html
new file mode 100644
index 0000000..5685c08
--- /dev/null
+++ b/content/cn/v-0.10/references/common-style.html
@@ -0,0 +1,1243 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u901a\u7528\u6837\u5f0f | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u901a\u7528\u6837\u5f0f\u6240\u6709 Weex \u7ec4\u4ef6\u90fd\u652f\u6301\u4ee5\u4e0b\u901a\u7528\u6837\u5f0f\u89c4\u5219\u3002
+\u76d2\u6a21\u578b
+Weex \u76d2\u6a21\u578b\u57fa\u4e8e CSS \u76d2\u6a21\u578b\uff0c\u6bcf\u4e2a Weex \u5143\u7d20\u90fd\u53ef\u89c6\u4f5c\u4e00\u4e2a\u76d2\u5b50\u3002\u6211\u4eec\u4e00\u822c\u5728\u8ba8\u8bba\u8bbe\u8ba1\u6216\u5e03\u5c40\u65f6\uff0c\u4f1a\u63d0\u5230\u300c\u76d2\u6a21\u578b\u300d\u8fd9\u4e2a\u6982\u5ff5\u3002
+\u76d2\u6a21\u578b\u63cf\u8ff0\u4e86\u4e00\u4e2a\u5143\u7d20\u6240\u5360\u7528\u7684\u7a7a\u95f4\u3002\u6bcf\u4e00\u4e2a\u76d2\u5b50\u6709\u56db\u6761\u8fb9\u754c\uff1a\u5916\u8fb9\u8ddd\u8fb9\u754c margin edge, \u8fb9\u6846\u8fb9\u754c border edge, \u5185\u8fb9\u8ddd\u8fb9\u754c padding edge \u4e0e\u5185\u5bb9\u8fb9\u754c content edge\u3002">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u901a\u7528\u6837\u5f0f">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/references/common-style.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u901a\u7528\u6837\u5f0f\u6240\u6709 Weex \u7ec4\u4ef6\u90fd\u652f\u6301\u4ee5\u4e0b\u901a\u7528\u6837\u5f0f\u89c4\u5219\u3002
+\u76d2\u6a21\u578b
+Weex \u76d2\u6a21\u578b\u57fa\u4e8e CSS \u76d2\u6a21\u578b\uff0c\u6bcf\u4e2a Weex \u5143\u7d20\u90fd\u53ef\u89c6\u4f5c\u4e00\u4e2a\u76d2\u5b50\u3002\u6211\u4eec\u4e00\u822c\u5728\u8ba8\u8bba\u8bbe\u8ba1\u6216\u5e03\u5c40\u65f6\uff0c\u4f1a\u63d0\u5230\u300c\u76d2\u6a21\u578b\u300d\u8fd9\u4e2a\u6982\u5ff5\u3002
+\u76d2\u6a21\u578b\u63cf\u8ff0\u4e86\u4e00\u4e2a\u5143\u7d20\u6240\u5360\u7528\u7684\u7a7a\u95f4\u3002\u6bcf\u4e00\u4e2a\u76d2\u5b50\u6709\u56db\u6761\u8fb9\u754c\uff1a\u5916\u8fb9\u8ddd\u8fb9\u754c margin edge, \u8fb9\u6846\u8fb9\u754c border edge, \u5185\u8fb9\u8ddd\u8fb9\u754c padding edge \u4e0e\u5185\u5bb9\u8fb9\u754c content edge\u3002">
+<meta property="og:image" content="http://alibaba.github.io/weex/doc/images/css-boxmodel.png">
+<meta property="og:image" content="http://alibaba.github.io/weex/doc/images/css-flexbox-justify.svg">
+<meta property="og:image" content="http://alibaba.github.io/weex/doc/images/css-flexbox-align.jpg">
+<meta property="og:image" content="https://weex.apache.org/images/style_1.jpg">
+<meta property="og:image" content="https://weex.apache.org/images/style_2.jpg">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.955Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u901a\u7528\u6837\u5f0f">
+<meta name="twitter:description" content="\u901a\u7528\u6837\u5f0f\u6240\u6709 Weex \u7ec4\u4ef6\u90fd\u652f\u6301\u4ee5\u4e0b\u901a\u7528\u6837\u5f0f\u89c4\u5219\u3002
+\u76d2\u6a21\u578b
+Weex \u76d2\u6a21\u578b\u57fa\u4e8e CSS \u76d2\u6a21\u578b\uff0c\u6bcf\u4e2a Weex \u5143\u7d20\u90fd\u53ef\u89c6\u4f5c\u4e00\u4e2a\u76d2\u5b50\u3002\u6211\u4eec\u4e00\u822c\u5728\u8ba8\u8bba\u8bbe\u8ba1\u6216\u5e03\u5c40\u65f6\uff0c\u4f1a\u63d0\u5230\u300c\u76d2\u6a21\u578b\u300d\u8fd9\u4e2a\u6982\u5ff5\u3002
+\u76d2\u6a21\u578b\u63cf\u8ff0\u4e86\u4e00\u4e2a\u5143\u7d20\u6240\u5360\u7528\u7684\u7a7a\u95f4\u3002\u6bcf\u4e00\u4e2a\u76d2\u5b50\u6709\u56db\u6761\u8fb9\u754c\uff1a\u5916\u8fb9\u8ddd\u8fb9\u754c margin edge, \u8fb9\u6846\u8fb9\u754c border edge, \u5185\u8fb9\u8ddd\u8fb9\u754c padding edge \u4e0e\u5185\u5bb9\u8fb9\u754c content edge\u3002">
+<meta name="twitter:image" content="http://alibaba.github.io/weex/doc/images/css-boxmodel.png">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link current ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link current ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u901a\u7528\u6837\u5f0f
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.955Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u901a\u7528\u6837\u5f0f"><a href="#\u901a\u7528\u6837\u5f0f" class="headerlink" title="\u901a\u7528\u6837\u5f0f"></a>\u901a\u7528\u6837\u5f0f</h1><p>\u6240\u6709 Weex \u7ec4\u4ef6\u90fd\u652f\u6301\u4ee5\u4e0b\u901a\u7528\u6837\u5f0f\u89c4\u5219\u3002</p>
+<h2 id="\u76d2\u6a21\u578b"><a href="#\u76d2\u6a21\u578b" class="headerlink" title="\u76d2\u6a21\u578b"></a>\u76d2\u6a21\u578b</h2><p><img src="http://alibaba.github.io/weex/doc/images/css-boxmodel.png" alt="box model @300*"></p>
+<p>Weex \u76d2\u6a21\u578b\u57fa\u4e8e <a href="https://www.w3.org/TR/css3-box/" target="_blank" rel="external">CSS \u76d2\u6a21\u578b</a>\uff0c\u6bcf\u4e2a Weex \u5143\u7d20\u90fd\u53ef\u89c6\u4f5c\u4e00\u4e2a\u76d2\u5b50\u3002\u6211\u4eec\u4e00\u822c\u5728\u8ba8\u8bba\u8bbe\u8ba1\u6216\u5e03\u5c40\u65f6\uff0c\u4f1a\u63d0\u5230\u300c\u76d2\u6a21\u578b\u300d\u8fd9\u4e2a\u6982\u5ff5\u3002</p>
+<p>\u76d2\u6a21\u578b\u63cf\u8ff0\u4e86\u4e00\u4e2a\u5143\u7d20\u6240\u5360\u7528\u7684\u7a7a\u95f4\u3002\u6bcf\u4e00\u4e2a\u76d2\u5b50\u6709\u56db\u6761\u8fb9\u754c\uff1a\u5916\u8fb9\u8ddd\u8fb9\u754c margin edge, \u8fb9\u6846\u8fb9\u754c border edge, \u5185\u8fb9\u8ddd\u8fb9\u754c padding edge \u4e0e\u5185\u5bb9\u8fb9\u754c content edge\u3002\u8fd9\u56db\u5c42\u8fb9\u754c\uff0c\u5f62\u6210\u4e00\u5c42\u5c42\u7684\u76d2\u5b50\u5305\u88f9\u8d77\u6765\uff0c\u8fd9\u5c31\u662f\u76d2\u6a21\u578b\u5927\u4f53\u4e0a\u7684\u542b\u4e49\u3002</p>
+<p><strong>\u6ce8\u610f\uff1a</strong><br>Weex \u5bf9\u4e8e\u957f\u5ea6\u503c\u76ee\u524d\u53ea\u652f\u6301<em>\u50cf\u7d20</em>\u503c\uff0c\u5355\u4f4d\u53ef\u7701\u7565\uff0c\u4e0d\u652f\u6301\u76f8\u5bf9\u5355\u4f4d\uff08<code>em</code>\u3001<code>rem</code>\uff09\u3002</p>
+<ul>
+<li><code>width {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>height {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><p><code>padding {length}</code>\uff1a\u5185\u8fb9\u8ddd\uff0c\u5185\u5bb9\u548c\u8fb9\u6846\u4e4b\u95f4\u7684\u8ddd\u79bb\u3002\u9ed8\u8ba4\u503c 0</p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><code>padding-left {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>padding-right {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>padding-top {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>padding-bottom {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+</ul>
+</li>
+<li><p><code>margin</code>\uff1a</p>
+<p>\u5916\u8fb9\u8ddd\uff0c\u5143\u7d20\u548c\u5143\u7d20\u4e4b\u95f4\u7684\u7a7a\u767d\u8ddd\u79bb\u3002\u503c\u7c7b\u578b\u4e3a length\uff0c\u9ed8\u8ba4\u503c 0</p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><code>margin-left {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>margin-right {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>margin-top {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>margin-bottom {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+</ul>
+</li>
+<li><p>border\uff1a</p>
+<p>\u8bbe\u5b9a\u8fb9\u6846\uff0c<code>border</code> \u76ee\u524d\u4e0d\u652f\u6301\u7c7b\u4f3c\u8fd9\u6837 <code>border: 1 solid #ff0000;</code> \u7684\u7ec4\u5408\u5199\u6cd5\u3002</p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><p><code>border-style</code>\uff1a</p>
+<p>\u8bbe\u5b9a\u8fb9\u6846\u6837\u5f0f\uff0c\u503c\u7c7b\u578b\u4e3a string\uff0c\u53ef\u9009\u503c\u4e3a <code>solid</code> | <code>dashed</code> | <code>dotted</code>\uff0c\u9ed8\u8ba4\u503c <code>solid</code></p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><code>border-left-style {string}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>solid</code> | <code>dashed</code> | <code>dotted</code>\uff0c\u9ed8\u8ba4\u503c <code>solid</code></li>
+<li><code>border-top-style {string}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>solid</code> | <code>dashed</code> | <code>dotted</code>\uff0c\u9ed8\u8ba4\u503c <code>solid</code></li>
+<li><code>border-right-style {string}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>solid</code> | <code>dashed</code> | <code>dotted</code>\uff0c\u9ed8\u8ba4\u503c <code>solid</code></li>
+<li><code>border-bottom-style {string}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>solid</code> | <code>dashed</code> | <code>dotted</code>\uff0c\u9ed8\u8ba4\u503c <code>solid</code></li>
+</ul>
+</li>
+<li><p><code>border-width {length}</code>\uff1a</p>
+<p>\u8bbe\u5b9a\u8fb9\u6846\u5bbd\u5ea6\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><code>border-left-width {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+<li><code>border-top-width {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+<li><code>border-right-width {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+<li><code>border-bottom-width {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+</ul>
+</li>
+<li><p><code>border-color {color}</code>\uff1a</p>
+<p>\u8bbe\u5b9a\u8fb9\u6846\u989c\u8272\uff0c\u9ed8\u8ba4\u503c <code>#000000</code></p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><code>border-left-color {color}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c <code>#000000</code></li>
+<li><code>border-top-color {color}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c <code>#000000</code></li>
+<li><code>border-right-color {color}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c <code>#000000</code></li>
+<li><code>border-bottom-color {color}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c <code>#000000</code></li>
+</ul>
+</li>
+<li><p><code>border-radius {length}</code>\uff1a</p>
+<p>\u8bbe\u5b9a\u5706\u89d2\uff0c\u9ed8\u8ba4\u503c 0</p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><code>border-bottom-left-radius {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+<li><code>border-bottom-right-radius {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+<li><code>border-top-left-radius {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+<li><code>border-top-right-radius {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+<p>\u6ce8\u610f\uff1a\u76ee\u524d\u5728 <code><image></code> \u548c <code><text></code> \u7ec4\u4ef6\u4e0a\u5c1a\u65e0\u6cd5\u53ea\u5b9a\u4e49\u4e00\u4e2a\u6216\u51e0\u4e2a\u89d2\u7684 <code>border-radius</code>\u3002\u6bd4\u5982\u4f60\u65e0\u6cd5\u5728\u8fd9\u4e24\u4e2a\u7ec4\u4ef6\u4e0a\u4f7f\u7528 <code>border-top-left-radius</code>\u3002</p>
+<p>Weex \u76d2\u6a21\u578b\u7684 <code>box-sizing</code> \u9ed8\u8ba4\u4e3a <code>border-box</code>\uff0c\u5373\u76d2\u5b50\u7684\u5bbd\u9ad8\u5305\u542b\u5185\u5bb9\u3001\u5185\u8fb9\u8ddd\u548c\u8fb9\u6846\u7684\u5bbd\u5ea6\uff0c\u4e0d\u5305\u542b\u5916\u8fb9\u8ddd\u7684\u5bbd\u5ea6\u3002</p>
+<h3 id="\u793a\u4f8b\uff1a"><a href="#\u793a\u4f8b\uff1a" class="headerlink" title="\u793a\u4f8b\uff1a"></a>\u793a\u4f8b\uff1a</h3><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">style</span>=<span class="string">"width: 400; height: 200; margin-left: 20;"</span> <span class="attr">src</span>=<span class="string">"https://g.alicdn.com/mtb/lab-zikuan/0.0.18/weex/weex_logo_blue@3x.png"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure>
+<h2 id="Flexbox"><a href="#Flexbox" class="headerlink" title="Flexbox"></a>Flexbox</h2><p>Weex \u5e03\u5c40\u6a21\u578b\u57fa\u4e8e CSS <a href="http://www.w3.org/TR/css3-flexbox/" target="_blank" rel="external"><code>Flexbox</code></a>\uff0c\u4ee5\u4fbf\u6240\u6709\u9875\u9762\u5143\u7d20\u7684\u6392\u7248\u80fd\u591f\u4e00\u81f4\u53ef\u9884\u6d4b\uff0c\u540c\u65f6\u9875\u9762\u5e03\u5c40\u80fd\u9002\u5e94\u5404\u79cd\u8bbe\u5907\u6216\u8005\u5c4f\u5e55\u5c3a\u5bf8\u3002</p>
+<p>Flexbox \u5305\u542b flex \u5bb9\u5668\u548c flex \u6210\u5458\u9879\u3002\u5982\u679c\u4e00\u4e2a Weex \u5143\u7d20\u53ef\u4ee5\u5bb9\u7eb3\u5176\u4ed6\u5143\u7d20\uff0c\u90a3\u4e48\u5b83\u5c31\u6210\u4e3a flex \u5bb9\u5668\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0cflexbox \u7684\u8001\u7248\u89c4\u8303\u76f8\u8f83\u65b0\u7248\u6709\u4e9b\u51fa\u5165\uff0c\u6bd4\u5982\u662f\u5426\u80fd\u652f\u6301 wrapping\u3002\u8fd9\u4e9b\u90fd\u63cf\u8ff0\u5728 W3C \u7684\u5de5\u4f5c\u8349\u6848\u4e2d\u4e86\uff0c\u4f60\u9700\u8981\u6ce8\u610f\u4e0b\u65b0\u8001\u7248\u672c\u4e4b\u95f4\u7684\u4e0d\u540c\u3002\u53e6\u5916\uff0c\u8001\u7248\u672c\u53ea\u5728\u5b89\u5353 4.4 \u7248\u4ee5\u4e0b\u5f97\u5230\u652f\u6301\u3002</p>
+<h3 id="Flex-\u5bb9\u5668"><a href="#Flex-\u5bb9\u5668" class="headerlink" title="Flex \u5bb9\u5668"></a>Flex \u5bb9\u5668</h3><p>\u5728 Weex \u4e2d\uff0cFlexbox \u662f\u9ed8\u8ba4\u4e14\u552f\u4e00\u7684\u5e03\u5c40\u6a21\u578b\uff0c\u6240\u4ee5\u4f60\u4e0d\u9700\u8981\u624b\u52a8\u4e3a\u5143\u7d20\u6dfb\u52a0 <code>display: flex;</code> \u5c5e\u6027\u3002</p>
+<ul>
+<li><p><code>flex-direction</code>\uff1a</p>
+<p>\u5b9a\u4e49\u4e86 flex \u5bb9\u5668\u4e2d flex \u6210\u5458\u9879\u7684\u6392\u5217\u65b9\u5411\u3002\u53ef\u9009\u503c\u4e3a <code>row</code> | <code>column</code>\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>column</code></p>
+<ul>
+<li><code>column</code>\uff1a\u4ece\u4e0a\u5230\u4e0b\u6392\u5217\u3002</li>
+<li><code>row</code>\uff1a\u4ece\u5de6\u5230\u53f3\u6392\u5217\u3002</li>
+</ul>
+</li>
+<li><p><code>justify-content</code>\uff1a</p>
+<p>\u5b9a\u4e49\u4e86 flex \u5bb9\u5668\u4e2d flex \u6210\u5458\u9879\u5728\u4e3b\u8f74\u65b9\u5411\u4e0a\u5982\u4f55\u6392\u5217\u4ee5\u5904\u7406\u7a7a\u767d\u90e8\u5206\u3002\u53ef\u9009\u503c\u4e3a <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code>\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>flex-start</code>\u3002</p>
+<ul>
+<li><code>flex-start</code>\uff1a\u662f\u9ed8\u8ba4\u503c\uff0c\u6240\u6709\u7684 flex \u6210\u5458\u9879\u90fd\u6392\u5217\u5728\u5bb9\u5668\u7684\u524d\u90e8\uff1b</li>
+<li><code>flex-end</code>\uff1a\u5219\u610f\u5473\u7740\u6210\u5458\u9879\u6392\u5217\u5728\u5bb9\u5668\u7684\u540e\u90e8\uff1b</li>
+<li><code>center</code>\uff1a\u5373\u4e2d\u95f4\u5bf9\u9f50\uff0c\u6210\u5458\u9879\u6392\u5217\u5728\u5bb9\u5668\u4e2d\u95f4\u3001\u4e24\u8fb9\u7559\u767d\uff1b</li>
+<li><code>space-between</code>\uff1a\u8868\u793a\u4e24\u7aef\u5bf9\u9f50\uff0c\u7a7a\u767d\u5747\u5300\u5730\u586b\u5145\u5230 flex \u6210\u5458\u9879\u4e4b\u95f4\u3002</li>
+</ul>
+<p><img src="http://alibaba.github.io/weex/doc/images/css-flexbox-justify.svg" alt="justify-content @400*"></p>
+</li>
+<li><p><code>align-items</code>\uff1a</p>
+<p>\u5b9a\u4e49\u4e86 flex \u5bb9\u5668\u4e2d flex \u6210\u5458\u9879\u5728\u7eb5\u8f74\u65b9\u5411\u4e0a\u5982\u4f55\u6392\u5217\u4ee5\u5904\u7406\u7a7a\u767d\u90e8\u5206\u3002\u53ef\u9009\u503c\u4e3a <code>stretch</code> | <code>flex-start</code> | <code>center</code> | <code>flex-end</code>\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>stretch</code>\u3002</p>
+<ul>
+<li><code>stretch</code> \u662f\u9ed8\u8ba4\u503c\uff0c\u5373\u62c9\u4f38\u9ad8\u5ea6\u81f3 flex \u5bb9\u5668\u7684\u5927\u5c0f\uff1b</li>
+<li><code>flex-start</code> \u5219\u662f\u4e0a\u5bf9\u9f50\uff0c\u6240\u6709\u7684\u6210\u5458\u9879\u6392\u5217\u5728\u5bb9\u5668\u9876\u90e8\uff1b</li>
+<li><code>flex-end</code> \u662f\u4e0b\u5bf9\u9f50\uff0c\u6240\u6709\u7684\u6210\u5458\u9879\u6392\u5217\u5728\u5bb9\u5668\u5e95\u90e8\uff1b</li>
+<li><code>center</code> \u662f\u4e2d\u95f4\u5bf9\u9f50\uff0c\u6240\u6709\u6210\u5458\u9879\u90fd\u5782\u76f4\u5730\u5c45\u4e2d\u663e\u793a\u3002</li>
+</ul>
+<p><img src="http://alibaba.github.io/weex/doc/images/css-flexbox-align.jpg" alt="align-items @400*"></p>
+</li>
+</ul>
+<h3 id="Flex-\u6210\u5458\u9879"><a href="#Flex-\u6210\u5458\u9879" class="headerlink" title="Flex \u6210\u5458\u9879"></a>Flex \u6210\u5458\u9879</h3><p>flex \u5c5e\u6027\u5b9a\u4e49\u4e86 flex \u6210\u5458\u9879\u53ef\u4ee5\u5360\u7528\u5bb9\u5668\u4e2d\u5269\u4f59\u7a7a\u95f4\u7684\u5927\u5c0f\u3002\u5982\u679c\u6240\u6709\u7684\u6210\u5458\u9879\u8bbe\u7f6e\u76f8\u540c\u7684\u503c <code>flex: 1</code>\uff0c\u5b83\u4eec\u5c06\u5e73\u5747\u5206\u914d\u5269\u4f59\u7a7a\u95f4. \u5982\u679c\u4e00\u4e2a\u6210\u5458\u9879\u8bbe\u7f6e\u7684\u503c\u4e3a <code>flex: 2</code>\uff0c\u5176\u5b83\u7684\u6210\u5458\u9879\u8bbe\u7f6e\u7684\u503c\u4e3a <code>flex: 1</code>\uff0c\u90a3\u4e48\u8fd9\u4e2a\u6210\u5458\u9879\u6240\u5360\u7528\u7684\u5269\u4f59\u7a7a\u95f4\u662f\u5176\u5b83\u6210\u5458\u9879\u76842\u500d\u3002</p>
+<ul>
+<li><code>flex {number}</code>\uff1a\u503c\u4e3a number \u7c7b\u578b\u3002</li>
+</ul>
+<h3 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h3><p>\u4e00\u4e2a\u7b80\u5355\u7684\u7f51\u683c\u5e03\u5c40\u3002</p>
+<p><img src="images/style_1.jpg" alt="mobile_preview"></p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">repeat</span>=<span class="string">"(i, v) in list"</span> <span class="attr">class</span>=<span class="string">"row"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">repeat</span>=<span class="string">"(k, text) in v"</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{text}}<span class="tag"></<span class="name">text</span>></span></div>
<div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.item</span>{</div><div class="line"> <span class="attribute">flex</span>:<span class="number">1</span>;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">align-items</span>:center;</div><div class="line"> <span class="attribute">border-width</span>:<span class="number">1</span>;
</div><div class="line"> }</div><div class="line"> <span class="selector-class">.row</span>{</div><div class="line"> <span class="attribute">flex-direction</span>: row;</div><div class="line"> <span class="attribute">height</span>:<span class="number">80</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">list</span>:[</div><div class="line"> [<span class="string">'A'</span>, <span class="string">'B'</s
pan>, <span class="string">'C'</span>],</div><div class="line"> [<span class="string">'D'</span>, <span class="string">'E'</span>, <span class="string">'F'</span>],</div><div class="line"> [<span class="string">'G'</span>, <span class="string">'H'</span>, <span class="string">'I'</span>]</div><div class="line"> ]</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/ee6a898fcac2242308c24fe5882c52ac" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u4e00\u4e2a\u5728\u76f8\u5bf9\u4e8e\u5c4f\u5e55\u6c34\u5e73\u5c45\u4e2d\uff0c\u5168\u5c4f\u5c45\u4e2d\u7684 <code><div></code>\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> {</div><div class="line"> <span class="attribu
te">position</span>: absolute;</div><div class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#cccccc</span>;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">align-items</span>: center;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.box</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">200</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">200</span>;</div><d
iv class="line"> <span class="attribute">background-color</span>: <span class="number">#fc0000</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/a76cd89b37c72d308ed576131830e877" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="\u5b9a\u4f4d"><a href="#\u5b9a\u4f4d" class="headerlink" title="\u5b9a\u4f4d"></a>\u5b9a\u4f4d</h2><p>Weex \u652f\u6301 <code>position</code> \u5b9a\u4f4d\uff0c\u7528\u6cd5\u4e0e CSS position \u7c7b\u4f3c\u3002\u4e3a\u5143\u7d20\u8bbe\u7f6e <code>position</code> \u540e\uff0c\u53ef\u901a\u8fc7 <code>top</code>\u3001<code>right</code>\u3001<code>bottom</code>\u3001<code>left</code> \u56db\u4e2a\u5c5e\u6027\u8bbe\u7f6e\u5143\u7d20\u5750\u6807\u3002</p>
+<ul>
+<li><p><code>position {string}</code>\uff1a</p>
+<p>\u8bbe\u7f6e\u5b9a\u4f4d\u7c7b\u578b\u3002\u53ef\u9009\u503c\u4e3a <code>relative</code> | <code>absolute</code> | <code>fixed</code> | <code>sticky</code>\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>relative</code>\u3002</p>
+<ul>
+<li><code>relative</code> \u662f\u9ed8\u8ba4\u503c\uff0c\u6307\u7684\u662f\u76f8\u5bf9\u5b9a\u4f4d\uff1b</li>
+<li><code>absolute</code> \u662f\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u4ee5\u5143\u7d20\u7684\u5bb9\u5668\u4f5c\u4e3a\u53c2\u8003\u7cfb\uff1b</li>
+<li><code>fixed</code> \u4fdd\u8bc1\u5143\u7d20\u5728\u9875\u9762\u7a97\u53e3\u4e2d\u7684\u5bf9\u5e94\u4f4d\u7f6e\u663e\u793a\uff1b</li>
+<li><code>sticky</code> \u6307\u7684\u662f\u4ec5\u5f53\u5143\u7d20\u6eda\u52a8\u5230\u9875\u9762\u4e4b\u5916\u65f6\uff0c\u5143\u7d20\u4f1a\u56fa\u5b9a\u5728\u9875\u9762\u7a97\u53e3\u7684\u9876\u90e8\u3002</li>
+</ul>
+</li>
+<li><code>top {number}</code>\uff1a\u8ddd\u79bb\u4e0a\u65b9\u7684\u504f\u79fb\u91cf\uff0c\u9ed8\u8ba4\u4e3a 0\u3002</li>
+<li><code>bottom {number}</code>\uff1a\u8ddd\u79bb\u4e0b\u65b9\u7684\u504f\u79fb\u91cf\uff0c\u9ed8\u8ba4\u4e3a 0\u3002</li>
+<li><code>left {number}</code>\uff1a\u8ddd\u79bb\u5de6\u65b9\u7684\u504f\u79fb\u91cf\uff0c\u9ed8\u8ba4\u4e3a 0\u3002</li>
+<li><code>right {number}</code>\uff1a\u8ddd\u79bb\u53f3\u65b9\u7684\u504f\u79fb\u91cf\uff0c\u9ed8\u8ba4\u4e3a 0\u3002</li>
+</ul>
+<p><strong>\u6ce8\u610f\uff1a</strong></p>
+<ol>
+<li>Weex \u76ee\u524d\u4e0d\u652f\u6301 <code>z-index</code> \u8bbe\u7f6e\u5143\u7d20\u5c42\u7ea7\u5173\u7cfb\uff0c\u4f46\u9760\u540e\u7684\u5143\u7d20\u5c42\u7ea7\u66f4\u9ad8\uff0c\u56e0\u6b64\uff0c\u5bf9\u4e8e\u5c42\u7ea7\u9ad8\u7684\u5143\u7d20\uff0c\u53ef\u5c06\u5176\u6392\u5217\u5728\u540e\u9762\u3002</li>
+<li>\u5982\u679c\u5b9a\u4f4d\u5143\u7d20\u8d85\u8fc7\u5bb9\u5668\u8fb9\u754c\uff0c\u5728 Android \u4e0b\uff0c\u8d85\u51fa\u90e8\u5206\u5c06<strong>\u4e0d\u53ef\u89c1</strong>\uff0c\u539f\u56e0\u5728\u4e8e Android \u7aef\u5143\u7d20 <code>overflow</code> \u9ed8\u8ba4\u503c\u4e3a <code>hidden</code>\uff0c\u4f46\u76ee\u524d Android \u6682\u4e0d\u652f\u6301\u8bbe\u7f6e <code>overflow: visible</code>\u3002 </li>
+</ol>
+<h3 id="\u793a\u4f8b-1"><a href="#\u793a\u4f8b-1" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h3><p><img src="images/style_2.jpg" alt="mobile_preview"></p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box box1"</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box box2"</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box box3"</span>></span></div><div class="line">
<span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> {</div><div class="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">background-color</span>:
<span class="number">#cccccc</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.box</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">400</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">400</span>;</div><div class="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.box1</span> {</div><div class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#ff0000</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.box2</span> {</div><div class="line"> <span class="attribute">top</span>: <s
pan class="number">150</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">150</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#0055dd</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.box3</span> {</div><div class="line"> <span class="attribute">top</span>: <span class="number">300</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">300</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#00ff49</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/b04339de27cfabf0710e045c0079e56a" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="\u5176\u4ed6\u57fa\u672c\u6837\u5f0f"><a href="#\u5176\u4ed6\u57fa\u672c\u6837\u5f0f" class="headerlink" title="\u5176\u4ed6\u57fa\u672c\u6837\u5f0f"></a>\u5176\u4ed6\u57fa\u672c\u6837\u5f0f</h2><ul>
+<li><code>opacity {number}</code>\uff1a\u53d6\u503c\u8303\u56f4\u4e3a [0, 1] \u533a\u95f4\u3002\u9ed8\u8ba4\u503c\u662f 1\uff0c\u5373\u5b8c\u5168\u4e0d\u900f\u660e\uff1b0 \u662f\u5b8c\u5168\u900f\u660e\uff1b0.5 \u662f 50% \u7684\u900f\u660e\u5ea6\u3002</li>
+<li><code>background-color {color}</code>\uff1a\u8bbe\u5b9a\u5143\u7d20\u7684\u80cc\u666f\u8272\uff0c\u53ef\u9009\u503c\u4e3a\u8272\u503c\uff0c\u652f\u6301RGB\uff08 <code>rgb(255, 0, 0)</code> \uff09\uff1bRGBA\uff08 <code>rgba(255, 0, 0, 0.5)</code> \uff09\uff1b\u5341\u516d\u8fdb\u5236\uff08 <code>#ff0000</code> \uff09\uff1b\u7cbe\u7b80\u5199\u6cd5\u7684\u5341\u516d\u8fdb\u5236\uff08 <code>#f00</code> \uff09\uff1b\u8272\u503c\u5173\u952e\u5b57\uff08<code>red</code>\uff09\uff0c\u9ed8\u8ba4\u503c\u662f <code>transparent</code> \u3002</li>
+</ul>
+<p><strong>\u6ce8\u610f\uff1a</strong> <a href="./color-names.md">\u8272\u503c\u7684\u5173\u952e\u5b57\u5217\u8868</a>\u3002</p>
+<h2 id="\u4e0a\u624b\u6837\u5f0f"><a href="#\u4e0a\u624b\u6837\u5f0f" class="headerlink" title="\u4e0a\u624b\u6837\u5f0f"></a>\u4e0a\u624b\u6837\u5f0f</h2><p>\u5982\u679c\u5bf9\u4e8e\u6837\u5f0f\u5199\u6cd5\u9700\u8981\u66f4\u591a\u4e0a\u624b\u53c2\u8003\uff0c\u53ef\u53c2\u8003</p>
+<ul>
+<li><a href="">\u5982\u4f55\u505a\u51fa\u9ad8\u6027\u80fd\u957f\u5217\u8868</a></li>
+<li><a href="">\u5982\u4f55\u5e03\u5c40</a></li>
+<li>\u4ee5\u53ca\u6bcf\u4e2a\u7ec4\u4ef6\u7684\u6587\u6863\u4e2d\uff0c\u90fd\u6709\u5e38\u89c1\u7684\u4f8b\u5b50\u53ef\u4f9b\u53c2\u8003\u3002</li>
+</ul>
+<p>\u4f60\u53ef\u4ee5\u6309\u7167\u4ee5\u4e0b\u6b65\u9aa4\u6765\u89c4\u5212 Weex \u9875\u9762\u7684\u6837\u5f0f\u3002</p>
+<ol>
+<li>\u5168\u5c40\u6837\u5f0f\u89c4\u5212\uff1a\u5c06\u6574\u4e2a\u9875\u9762\u5206\u5272\u6210\u5408\u9002\u7684\u6a21\u5757\u3002</li>
+<li>flex \u5e03\u5c40\uff1a\u6392\u5217\u548c\u5bf9\u9f50\u9875\u9762\u6a21\u5757\u3002</li>
+<li>\u5b9a\u4f4d\u76d2\u5b50\uff1a\u5b9a\u4f4d\u5e76\u8bbe\u7f6e\u504f\u79fb\u91cf\u3002</li>
+<li>\u7ec6\u8282\u6837\u5f0f\u5904\u7406\uff1a\u589e\u52a0\u7279\u5b9a\u7684\u5177\u4f53\u6837\u5f0f\u3002</li>
+</ol>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/references/common-style.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/references/component-defs.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/references/component-defs.html b/content/cn/v-0.10/references/component-defs.html
new file mode 100644
index 0000000..8a5073f
--- /dev/null
+++ b/content/cn/v-0.10/references/component-defs.html
@@ -0,0 +1,1091 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>ViewModel \u9009\u9879 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u7ec4\u4ef6\u5b9a\u4e49\u5b9a\u4e49\u7ec4\u4ef6\u662f\u901a\u8fc7\u4e00\u7ec4\u9009\u9879\u6765\u63cf\u8ff0\u4e00\u4e2a\u7ec4\u4ef6\u3002\u8fd9\u7ec4\u9009\u9879\u603b\u662f\u88ab\u8d4b\u503c\u7ed9 &lt;script&gt; \u6807\u7b7e\u4e2d\u7684 module.exports \u3002
+module.exports = &#123; // a set of options here&#125;
+\u6570\u636e\u548c\u65b9\u6cd5module.exports = &#123; data: function () &#123; return &#123;x:">
+<meta property="og:type" content="website">
+<meta property="og:title" content="ViewModel \u9009\u9879">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/references/component-defs.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u7ec4\u4ef6\u5b9a\u4e49\u5b9a\u4e49\u7ec4\u4ef6\u662f\u901a\u8fc7\u4e00\u7ec4\u9009\u9879\u6765\u63cf\u8ff0\u4e00\u4e2a\u7ec4\u4ef6\u3002\u8fd9\u7ec4\u9009\u9879\u603b\u662f\u88ab\u8d4b\u503c\u7ed9 &lt;script&gt; \u6807\u7b7e\u4e2d\u7684 module.exports \u3002
+module.exports = &#123; // a set of options here&#125;
+\u6570\u636e\u548c\u65b9\u6cd5module.exports = &#123; data: function () &#123; return &#123;x:">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.955Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="ViewModel \u9009\u9879">
+<meta name="twitter:description" content="\u7ec4\u4ef6\u5b9a\u4e49\u5b9a\u4e49\u7ec4\u4ef6\u662f\u901a\u8fc7\u4e00\u7ec4\u9009\u9879\u6765\u63cf\u8ff0\u4e00\u4e2a\u7ec4\u4ef6\u3002\u8fd9\u7ec4\u9009\u9879\u603b\u662f\u88ab\u8d4b\u503c\u7ed9 &lt;script&gt; \u6807\u7b7e\u4e2d\u7684 module.exports \u3002
+module.exports = &#123; // a set of options here&#125;
+\u6570\u636e\u548c\u65b9\u6cd5module.exports = &#123; data: function () &#123; return &#123;x:">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link current ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link current ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ ViewModel \u9009\u9879
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.955Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u7ec4\u4ef6\u5b9a\u4e49"><a href="#\u7ec4\u4ef6\u5b9a\u4e49" class="headerlink" title="\u7ec4\u4ef6\u5b9a\u4e49"></a>\u7ec4\u4ef6\u5b9a\u4e49</h1><p>\u5b9a\u4e49\u7ec4\u4ef6\u662f\u901a\u8fc7\u4e00\u7ec4\u9009\u9879\u6765\u63cf\u8ff0\u4e00\u4e2a\u7ec4\u4ef6\u3002\u8fd9\u7ec4\u9009\u9879\u603b\u662f\u88ab\u8d4b\u503c\u7ed9 <code><script></code> \u6807\u7b7e\u4e2d\u7684 <code>module.exports</code> \u3002</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="comment">// a set of options here</span></div><div class="line">}</div></pre></td></tr></table></figure>
+<h2 id="\u6570\u636e\u548c\u65b9\u6cd5"><a href="#\u6570\u636e\u548c\u65b9\u6cd5" class="headerlink" title="\u6570\u636e\u548c\u65b9\u6cd5"></a>\u6570\u636e\u548c\u65b9\u6cd5</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> {<span class="attr">x</span>: <span class="number">1</span>, <span class="attr">y</span>: <span class="number">2</span>}</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">doThis</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{...},</div><div class="line"> <span class="attr">doThat</span>: <span class="function"><span class="keywo
rd">function</span> (<span class="params"></span>) </span>{...}</div><div class="line"> },</div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure>
+<p><code>data</code> \u9009\u9879\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u5b83\u8fd4\u56de\u8fd9\u4e2a\u89c6\u56fe\u6a21\u578b\u53ef\u76d1\u542c\u7684\u6570\u636e\u5bf9\u8c61\u3002\u800c <code>methods</code> \u662f\u4e00\u4e2a\u6620\u5c04\uff0c\u5176\u4e2d\u5305\u542b\u6240\u6709\u89c6\u56fe\u6a21\u578b\u7684\u65b9\u6cd5\u3002</p>
+<p>\u6bcf\u4e2a <code>data</code> \u6216 <code>method</code> \u5c5e\u6027\u5c06\u88ab\u4ee3\u7406\u5230\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u4e2d\u3002\u6240\u4ee5\uff0c\u4f60\u80fd\u901a\u8fc7 <code>this.x</code> \u8bfb\u5199\u6570\u636e\uff0c\u6216\u8005\u901a\u8fc7 <code>this.doThis()</code> \u8c03\u7528\u65b9\u6cd5\u3002</p>
+<p>\u4e00\u4e2a\u5b8c\u6574\u7684\u4f8b\u5b50\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: {{w}}; height: {{h}}; background-color: red;"</span> <span class="attr">onclick</span>=<span class="string">"update"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div clas
s="line"> <span class="keyword">return</span> {<span class="attr">w</span>: <span class="number">750</span>, <span class="attr">h</span>: <span class="number">200</span>}</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">update</span>: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.h += <span class="number">200</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: ...,</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">foo</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> ...</div><div class="line"> this.$emit(<span class="string">'customtype1'</span>, data)</div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">events</span>: {</div><div class="line"> <span class="attr">customtype1</span>: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> <span class="built_in"
>console</span>.log(e.type, e.detail)</div><div class="line"> }</div><div class="line"> },</div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure>
+<p><code>events</code> \u9009\u9879\u5141\u8bb8\u4f60\u5728\u89c6\u56fe\u6a21\u578b\u88ab\u521b\u5efa\u65f6\u6ce8\u518c\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002\u7136\u540e\uff0c\u5b83\u4f1a\u76d1\u542c\u8fd9\u4e9b\u7c7b\u578b\u7684\u4e8b\u4ef6\uff0c\u5e76\u901a\u8fc7\u51fd\u6570\u7c7b\u578b\u7684\u503c\u5904\u7406\u5b83\u4eec\u3002</p>
+<p>Weex \u4f1a\u628a\u4e00\u4e2a\u4e8b\u4ef6\u5bf9\u8c61\u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\u4f20\u9012\u7ed9\u5176\u7ed1\u5b9a\u7684\u4e8b\u4ef6\uff0c\u8fd9\u4e2a\u4e8b\u4ef6\u5bf9\u8c61\u5728 <code>e.detail</code> \u4e2d\u5305\u542b\u4e8b\u4ef6\u6570\u636e\u3002</p>
+<h2 id="\u751f\u547d\u5468\u671f"><a href="#\u751f\u547d\u5468\u671f" class="headerlink" title="\u751f\u547d\u5468\u671f"></a>\u751f\u547d\u5468\u671f</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: ...,</div><div class="line"> <span class="attr">methods</span>: ...,</div><div class="line"> <span class="attr">init</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'ViewModel constructor begins'</span>)</div><div class="line"> },</div><div class="line"> <span class="attr">created</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'Data observation finished'</span>)</div
><div class="line"> },</div><div class="line"> <span class="attr">ready</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'Virtual DOM finished'</span>)</div><div class="line"> },</div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>Weex \u89c6\u56fe\u6a21\u578b\u73b0\u5728\u652f\u6301\u751f\u547d\u5468\u671f\u5185\u7684\u94a9\u5b50\u51fd\u6570\uff0c\u8fd9\u4e9b\u94a9\u5b50\u51fd\u6570\u80fd\u88ab\u5199\u4e3a\u7ec4\u4ef6\u9009\u9879\uff1a</p>
+<ul>
+<li><code>init</code>: \u5728\u89c6\u56fe\u6a21\u578b\u7684\u6784\u9020\u51fd\u6570\u5f00\u59cb\u8c03\u7528\u65f6\u6fc0\u6d3b\uff1b</li>
+<li><code>created</code>: \u5f53\u89c6\u56fe\u6a21\u578b\u76d1\u542c\u9ed8\u8ba4\u6570\u636e\uff0c\u4f46\u8fd8\u672a\u7f16\u8bd1\u6a21\u677f\u65f6\u6fc0\u6d3b\uff1b</li>
+<li><code>ready</code>: \u5f53\u89c6\u56fe\u6a21\u578b\u76d1\u542c\u9ed8\u8ba4\u6570\u636e\u5e76\u4e14\u7f16\u8bd1\u6a21\u677f\u751f\u6210\u865a\u62dfDOM\u540e\u88ab\u6fc0\u6d3b\u3002</li>
+</ul>
+<p><strong>\u6ce8\u610f\uff1a\u5f53 <code>methods</code>\u3001<code>events</code> \u6216\u751f\u547d\u5468\u671f\u65b9\u6cd5\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u7ed9\u522b\u7684\u51fd\u6570\u65f6\uff0c\u52a1\u5fc5\u786e\u8ba4\u51fd\u6570\u6267\u884c\u65f6\u7684\u4e0a\u4e0b\u6587\u7b26\u5408\u60a8\u7684\u9884\u671f\uff0c\u4f8b\u5982\uff1a</strong></p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> {<span class="attr">x</span>: <span class="number">1</span>, <span class="attr">y</span>: <span class="number">2</span>}</div><div class="line"> },</div><div class="line"> <span class="attr">ready</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="comment">// `undefined`</span></div><div class="line"> <span class="comment">// \u56e0\u4e3a\u4e0a\u4e0b\u6587\u53d1\u751f\u4e86\u53d8\u5316</span></div><div class="line"> <span class="keyword">this</span>.foo(<span class="keyword">this</span>.bar)</div><div class="line"> <span cla
ss="comment">// `1`</span></div><div class="line"> <span class="comment">// \u6b63\u786e\u7ed1\u5b9a\u4e0a\u4e0b\u6587\u4e4b\u540e\u53ef\u4ee5\u5f97\u5230\u9884\u671f\u7684\u503c</span></div><div class="line"> <span class="keyword">this</span>.foo(<span class="keyword">this</span>.bar.bind(<span class="keyword">this</span>))</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">foo</span>: <span class="function"><span class="keyword">function</span> (<span class="params">fn</span>) </span>{</div><div class="line"> <span class="keyword">return</span> fn()</div><div class="line"> },</div><div class="line"> <span class="attr">bar</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.x</div><div class="line"> }</div><div class="line"> }</div><div cla
ss="line">}</div></pre></td></tr></table></figure>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/references/component-defs.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[13/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/extend-to-ios.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/extend-to-ios.html b/content/cn/v-0.10/advanced/extend-to-ios.html
new file mode 100644
index 0000000..31c40cd
--- /dev/null
+++ b/content/cn/v-0.10/advanced/extend-to-ios.html
@@ -0,0 +1,415 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>iOS \u6269\u5c55 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="iOS \u6269\u5c55Module \u6269\u5c55swift \u6269\u5c55 module
+Weex SDK \u53ea\u63d0\u4f9b\u6e32\u67d3\uff0c\u800c\u4e0d\u662f\u5176\u4ed6\u7684\u80fd\u529b\uff0c\u5982\u679c\u4f60\u9700\u8981 \u50cf\u7f51\u7edc\uff0c\u56fe\u7247\uff0cURL\u8df3\u8f6c\u8fd9\u4e9b\u7279\u6027\uff0c\u9700\u8981\u81ea\u5df1\u52a8\u624b\u5b9e\u73b0\u4ed6\u4eec\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u60f3\u5b9e\u73b0\u4e00\u4e2aurl\u5730\u5740\u8df3\u8f6c\u51fd\u6570\uff0c\u4f60\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u6b65\u9aa4\u5b9e\u73b0\u4e00\u4e2a Module
+
+\u81ea\u5b9a\u4e49module\u7684\u6b65\u9aa4
+
+\u81ea\u5b9a\u4e49\u7684module\u7c7b \u5fc5\u987b\u5b9e\u73b0 WXModuleProtocol
+\u5fc5\u987b\u6dfb\u52a0\u5b8fWX_EXPORT_METHO">
+<meta property="og:type" content="website">
+<meta property="og:title" content="iOS \u6269\u5c55">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/advanced/extend-to-ios.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="iOS \u6269\u5c55Module \u6269\u5c55swift \u6269\u5c55 module
+Weex SDK \u53ea\u63d0\u4f9b\u6e32\u67d3\uff0c\u800c\u4e0d\u662f\u5176\u4ed6\u7684\u80fd\u529b\uff0c\u5982\u679c\u4f60\u9700\u8981 \u50cf\u7f51\u7edc\uff0c\u56fe\u7247\uff0cURL\u8df3\u8f6c\u8fd9\u4e9b\u7279\u6027\uff0c\u9700\u8981\u81ea\u5df1\u52a8\u624b\u5b9e\u73b0\u4ed6\u4eec\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u60f3\u5b9e\u73b0\u4e00\u4e2aurl\u5730\u5740\u8df3\u8f6c\u51fd\u6570\uff0c\u4f60\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u6b65\u9aa4\u5b9e\u73b0\u4e00\u4e2a Module
+
+\u81ea\u5b9a\u4e49module\u7684\u6b65\u9aa4
+
+\u81ea\u5b9a\u4e49\u7684module\u7c7b \u5fc5\u987b\u5b9e\u73b0 WXModuleProtocol
+\u5fc5\u987b\u6dfb\u52a0\u5b8fWX_EXPORT_METHO">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.925Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="iOS \u6269\u5c55">
+<meta name="twitter:description" content="iOS \u6269\u5c55Module \u6269\u5c55swift \u6269\u5c55 module
+Weex SDK \u53ea\u63d0\u4f9b\u6e32\u67d3\uff0c\u800c\u4e0d\u662f\u5176\u4ed6\u7684\u80fd\u529b\uff0c\u5982\u679c\u4f60\u9700\u8981 \u50cf\u7f51\u7edc\uff0c\u56fe\u7247\uff0cURL\u8df3\u8f6c\u8fd9\u4e9b\u7279\u6027\uff0c\u9700\u8981\u81ea\u5df1\u52a8\u624b\u5b9e\u73b0\u4ed6\u4eec\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u60f3\u5b9e\u73b0\u4e00\u4e2aurl\u5730\u5740\u8df3\u8f6c\u51fd\u6570\uff0c\u4f60\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u6b65\u9aa4\u5b9e\u73b0\u4e00\u4e2a Module
+
+\u81ea\u5b9a\u4e49module\u7684\u6b65\u9aa4
+
+\u81ea\u5b9a\u4e49\u7684module\u7c7b \u5fc5\u987b\u5b9e\u73b0 WXModuleProtocol
+\u5fc5\u987b\u6dfb\u52a0\u5b8fWX_EXPORT_METHO">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="advanced" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "advanced";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u9ad8\u9636\u77e5\u8bc6
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex \u5de5\u4f5c\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">\u96c6\u6210\u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">\u96c6\u6210\u5230 iOS</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">\u96c6\u6210\u5230 web</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native API</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link current ">iOS \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-advanced">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ iOS \u6269\u5c55
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.925Z">Updated time: 01/02/2017</time>
+</header>
+ <h2 id="iOS-\u6269\u5c55"><a href="#iOS-\u6269\u5c55" class="headerlink" title="iOS \u6269\u5c55"></a>iOS \u6269\u5c55</h2><h3 id="Module-\u6269\u5c55"><a href="#Module-\u6269\u5c55" class="headerlink" title="Module \u6269\u5c55"></a>Module \u6269\u5c55</h3><p><a href="https://github.com/weexteam/article/issues/55" target="_blank" rel="external">swift</a> \u6269\u5c55 module </p>
+<p>Weex SDK \u53ea\u63d0\u4f9b\u6e32\u67d3\uff0c\u800c\u4e0d\u662f\u5176\u4ed6\u7684\u80fd\u529b\uff0c\u5982\u679c\u4f60\u9700\u8981 \u50cf\u7f51\u7edc\uff0c\u56fe\u7247\uff0cURL\u8df3\u8f6c\u8fd9\u4e9b\u7279\u6027\uff0c\u9700\u8981\u81ea\u5df1\u52a8\u624b\u5b9e\u73b0\u4ed6\u4eec<br>\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u60f3\u5b9e\u73b0\u4e00\u4e2aurl\u5730\u5740\u8df3\u8f6c\u51fd\u6570\uff0c\u4f60\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u6b65\u9aa4\u5b9e\u73b0\u4e00\u4e2a Module</p>
+<ol>
+<li><p><strong>\u81ea\u5b9a\u4e49module\u7684\u6b65\u9aa4</strong></p>
+<ol>
+<li>\u81ea\u5b9a\u4e49\u7684module\u7c7b \u5fc5\u987b\u5b9e\u73b0 <code>WXModuleProtocol</code></li>
+<li>\u5fc5\u987b\u6dfb\u52a0\u5b8f<code>WX_EXPORT_METHOD</code>, \u5b83\u53ef\u4ee5\u88abweex\u8bc6\u522b\uff0c\u5b83\u7684\u53c2\u6570\u662f JavaScript\u8c03\u7528 module\u6307\u5b9a\u65b9\u6cd5\u7684\u53c2\u6570</li>
+<li>\u6dfb\u52a0<code>@synthesized weexInstance</code>\uff0c\u6bcf\u4e2amoudle\u5bf9\u8c61\u88ab\u7ed1\u5b9a\u5230\u4e00\u4e2a\u6307\u5b9a\u7684\u5b9e\u4f8b\u4e0a</li>
+<li>Module \u65b9\u6cd5\u4f1a\u5728UI\u7ebf\u7a0b\u4e2d\u88ab\u8c03\u7528\uff0c\u6240\u4ee5\u4e0d\u8981\u505a\u592a\u591a\u8017\u65f6\u7684\u4efb\u52a1\u5728\u8fd9\u91cc\uff0c\u5982\u679c\u8981\u5728\u5176\u4ed6\u7ebf\u7a0b\u6267\u884c\u6574\u4e2amodule \u65b9\u6cd5\uff0c\u9700\u8981\u5b9e\u73b0<code>WXModuleProtocol</code>\u4e2d<code>- (NSThread *)targetExecuteThread</code>\u7684\u65b9\u6cd5\uff0c\u8fd9\u6837\uff0c\u5206\u53d1\u5230\u8fd9\u4e2amodule\u7684\u4efb\u52a1\u4f1a\u5728\u6307\u5b9a\u7684\u7ebf\u7a0b\u4e2d\u8fd0\u884c</li>
+<li>Weex \u7684\u53c2\u6570\u53ef\u4ee5\u662f String \u6216\u8005Map</li>
+<li><p>Module \u652f\u6301\u8fd4\u56de\u503c\u7ed9 JavaScript\u4e2d\u7684\u56de\u8c03\uff0c\u56de\u8c03\u7684\u7c7b\u578b\u662f<code>WXModuleCallback</code>,\u56de\u8c03\u7684\u53c2\u6570\u53ef\u4ee5\u662fString\u6216\u8005Map</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">@implementation WXEventModule</div><div class="line">@synthesize weexInstance;</div><div class="line"> WX_EXPORT_METHOD(@selector(openURL:callback))</div><div class="line">- (void)openURL:(NSString *)url callback:(WXModuleCallback)callback</div><div class="line">{</div><div class="line"> NSString *newURL = url;</div><div class="line"> if ([url hasPrefix:@"//"]) {</div><div class="line"> newURL = [NSString stringWithFormat:@"http:%@", url];</div><div class="line"> } else if (![url hasPrefix:@"http"]) {</div><div class="line"> newURL = [NSURL URLWithString:url relativeToURL:weexInstance.scriptURL].absoluteString;</div><div class="line"> }</div><div class="line"></div><div class="line"> UIViewController *controller = [[WXDemoViewController alloc] init];</div><div class="line"> ((WXDemoViewController *)controller).url
= [NSURL URLWithString:newURL];</div><div class="line"></div><div class="line"> [[weexInstance.viewController navigationController] pushViewController:controller animated:YES];</div><div class="line"> callback(@{@"result":@"success"});</div><div class="line">}</div><div class="line"></div><div class="line">@end</div></pre></td></tr></table></figure>
+</li>
+</ol>
+</li>
+<li><p><strong>Register the module</strong><br>\u901a\u8fc7\u8c03\u7528 WXSDKEngine \u4e2d\u7684 <code>registerModule:withClass</code>\u65b9\u6cd5\u6765\u6ce8\u518c\u81ea\u5df1\u7684module</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">WXSDKEngine.h</div><div class="line">/**</div><div class="line">* @abstract Registers a module for a given name</div><div class="line">* @param name The module name to register</div><div class="line">* @param clazz The module class to register</div><div class="line">**/</div><div class="line">+ (void)registerModule:(NSString *)name withClass:(Class)clazz;</div><div class="line">[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];</div></pre></td></tr></table></figure>
+</li>
+<li><p><strong>\u4f7f\u7528\u81ea\u5df1\u7684module</strong><br> \u8fd9\u91cc\u7684 require \u91cc\u9762\u7684event \u5c31\u662f\u5728 \u4e0a\u4e00\u6b65\u8c03\u7528<code>registerModule:</code> \u6ce8\u518cmodule \u65f6\u5019\u7684name</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> eventModule = <span class="built_in">require</span>(<span class="string">'@weex-module/event'</span>); </div><div class="line">eventModule.openURL(<span class="string">'url'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">ret</span>) </span>{ </div><div class="line"> nativeLog(ret);</div><div class="line">});</div></pre></td></tr></table></figure>
+</li>
+</ol>
+<p> Weex SDK\u6ca1\u6709 \u56fe\u7247\u4e0b\u8f7d\uff0cnavigation \u64cd\u4f5c\u7684\u80fd\u529b\uff0c\u8bf7\u5927\u5bb6\u81ea\u5df1\u5b9e\u73b0\u8fd9\u4e9b protocol</p>
+<ol>
+<li><p><strong>WXImgLoaderProtocol</strong> </p>
+<p>weexSDK \u6ca1\u6709\u56fe\u7247\u4e0b\u8f7d\u7684\u80fd\u529b\uff0c\u9700\u8981\u5b9e\u73b0 WXImgLoaderProtocol,\u53c2\u8003\u4e0b\u9762\u7684\u4f8b\u5b50</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">WXImageLoaderProtocol.h</div><div class="line">@protocol WXImgLoaderProtocol <WXModuleProtocol></div><div class="line">/**</div><div class="line"> * @abstract Creates a image download handler with a given URL</div><div class="line"> * @param imageUrl The URL of the image to download</div><div class="line"> * @param imageFrame The frame of the image you want to set</div><div class="line"> * @param options : The options to be used for this download</div><div class="line"> * @param completedBlock : A block called once the download is completed.</div><div class="line"> image : the image which has been download to local.</div><div class="line"> error : the error which has happened in download.</div><div class="line"> finished : a Boolean value indicating whether download action has finished.</div><div class="line">*/</div><div class="line">-(id<WXImageOperationProtocol>)downloadImageWith
URL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;</div><div class="line">@end</div></pre></td></tr></table></figure>
+</li>
+</ol>
+<p> \u5b9e\u73b0\u4e0a\u8ff0\u534f\u8bae </p>
+ <figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">@implementation WXImgLoaderDefaultImpl</div><div class="line">#pragma mark -</div><div class="line">#pragma mark WXImgLoaderProtocol</div><div class="line"></div><div class="line">- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock</div><div class="line">{</div><div class="line"> if ([url hasPrefix:@"//"]) {</div><div class="line"> url = [@"http:" stringByAppendingString:url];</div><div class="line"> }</div><div class="line"> return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) { </div><div class="line"> } completed:^(UIImage *
image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {</div><div class="line"> if (completedBlock) {</div><div class="line"> completedBlock(image, error, finished);</div><div class="line"> }</div><div class="line"> }];</div><div class="line">}</div><div class="line">@end</div></pre></td></tr></table></figure>
+<ol>
+<li><p><strong>handler\u6ce8\u518c</strong> </p>
+<p>\u4f60\u53ef\u4ee5\u901a\u8fc7WXSDKEngine \u4e2d\u7684 <code>registerHandler:withProtocol</code>\u6ce8\u518chandler</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">WXSDKEngine.h</div><div class="line">/**</div><div class="line">* @abstract Registers a handler for a given handler instance and specific protocol</div><div class="line">* @param handler The handler instance to register</div><div class="line">* @param protocol The protocol to confirm</div><div class="line">*/</div><div class="line">+ (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;</div><div class="line"></div><div class="line">[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)]</div></pre></td></tr></table></figure>
+</li>
+</ol>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/advanced/extend-to-ios.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/extend-to-ios.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/how-data-binding-works.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/how-data-binding-works.html b/content/cn/v-0.10/advanced/how-data-binding-works.html
new file mode 100644
index 0000000..91b2d3f
--- /dev/null
+++ b/content/cn/v-0.10/advanced/how-data-binding-works.html
@@ -0,0 +1,377 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u6570\u636e\u7ed1\u5b9a\u539f\u7406 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u6570\u636e\u7ed1\u5b9a\u5b9e\u73b0\u539f\u7406Weex \u7684 JS Framework \u662f\u4e00\u4e2a MVVM\uff0c\u5373 Model-View-ViewModel \u6846\u67b6\u3002\u4ed6\u4f1a\u81ea\u52a8\u76d1\u542c\u6570\u636e\u7684\u53d8\u5316\uff0c\u5e76\u901a\u8fc7 {{\u5b57\u6bb5\u540d}} \u7684\u8bed\u6cd5\u628a\u6570\u636e\u548c\u89c6\u56fe\u4e2d\u6240\u5c55\u793a\u7684\u5185\u5bb9\u81ea\u52a8\u7ed1\u5b9a\u8d77\u6765\u3002\u5f53\u6570\u636e\u88ab\u6539\u5199\u7684\u65f6\u5019\uff0c\u89c6\u56fe\u4f1a\u81ea\u52a8\u6839\u636e\u6570\u636e\u7684\u53d8\u5316\u800c\u53d1\u751f\u76f8\u5e94\u7684\u53d8\u5316\u3002
+\u6bd4\u5982\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50\uff0c&lt;text&gt; \u7684\u5185\u5bb9\u88ab\u7ed1\u5b9a\u5728\u4e86 notes \u6570\u636e\u5b57\u6bb5\u4e0a\uff1a
+&lt;template&g">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u6570\u636e\u7ed1\u5b9a\u539f\u7406">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/advanced/how-data-binding-works.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u6570\u636e\u7ed1\u5b9a\u5b9e\u73b0\u539f\u7406Weex \u7684 JS Framework \u662f\u4e00\u4e2a MVVM\uff0c\u5373 Model-View-ViewModel \u6846\u67b6\u3002\u4ed6\u4f1a\u81ea\u52a8\u76d1\u542c\u6570\u636e\u7684\u53d8\u5316\uff0c\u5e76\u901a\u8fc7 {{\u5b57\u6bb5\u540d}} \u7684\u8bed\u6cd5\u628a\u6570\u636e\u548c\u89c6\u56fe\u4e2d\u6240\u5c55\u793a\u7684\u5185\u5bb9\u81ea\u52a8\u7ed1\u5b9a\u8d77\u6765\u3002\u5f53\u6570\u636e\u88ab\u6539\u5199\u7684\u65f6\u5019\uff0c\u89c6\u56fe\u4f1a\u81ea\u52a8\u6839\u636e\u6570\u636e\u7684\u53d8\u5316\u800c\u53d1\u751f\u76f8\u5e94\u7684\u53d8\u5316\u3002
+\u6bd4\u5982\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50\uff0c&lt;text&gt; \u7684\u5185\u5bb9\u88ab\u7ed1\u5b9a\u5728\u4e86 notes \u6570\u636e\u5b57\u6bb5\u4e0a\uff1a
+&lt;template&g">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.926Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u6570\u636e\u7ed1\u5b9a\u539f\u7406">
+<meta name="twitter:description" content="\u6570\u636e\u7ed1\u5b9a\u5b9e\u73b0\u539f\u7406Weex \u7684 JS Framework \u662f\u4e00\u4e2a MVVM\uff0c\u5373 Model-View-ViewModel \u6846\u67b6\u3002\u4ed6\u4f1a\u81ea\u52a8\u76d1\u542c\u6570\u636e\u7684\u53d8\u5316\uff0c\u5e76\u901a\u8fc7 {{\u5b57\u6bb5\u540d}} \u7684\u8bed\u6cd5\u628a\u6570\u636e\u548c\u89c6\u56fe\u4e2d\u6240\u5c55\u793a\u7684\u5185\u5bb9\u81ea\u52a8\u7ed1\u5b9a\u8d77\u6765\u3002\u5f53\u6570\u636e\u88ab\u6539\u5199\u7684\u65f6\u5019\uff0c\u89c6\u56fe\u4f1a\u81ea\u52a8\u6839\u636e\u6570\u636e\u7684\u53d8\u5316\u800c\u53d1\u751f\u76f8\u5e94\u7684\u53d8\u5316\u3002
+\u6bd4\u5982\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50\uff0c&lt;text&gt; \u7684\u5185\u5bb9\u88ab\u7ed1\u5b9a\u5728\u4e86 notes \u6570\u636e\u5b57\u6bb5\u4e0a\uff1a
+&lt;template&g">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="advanced" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "advanced";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u9ad8\u9636\u77e5\u8bc6
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex \u5de5\u4f5c\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link current ">\u6570\u636e\u7ed1\u5b9a\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">\u96c6\u6210\u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">\u96c6\u6210\u5230 iOS</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">\u96c6\u6210\u5230 web</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native API</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-advanced">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u6570\u636e\u7ed1\u5b9a\u539f\u7406
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.926Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u6570\u636e\u7ed1\u5b9a\u5b9e\u73b0\u539f\u7406"><a href="#\u6570\u636e\u7ed1\u5b9a\u5b9e\u73b0\u539f\u7406" class="headerlink" title="\u6570\u636e\u7ed1\u5b9a\u5b9e\u73b0\u539f\u7406"></a>\u6570\u636e\u7ed1\u5b9a\u5b9e\u73b0\u539f\u7406</h1><p>Weex \u7684 JS Framework \u662f\u4e00\u4e2a MVVM\uff0c\u5373 Model-View-ViewModel \u6846\u67b6\u3002\u4ed6\u4f1a\u81ea\u52a8\u76d1\u542c\u6570\u636e\u7684\u53d8\u5316\uff0c\u5e76\u901a\u8fc7 <code>{{\u5b57\u6bb5\u540d}}</code> \u7684\u8bed\u6cd5\u628a\u6570\u636e\u548c\u89c6\u56fe\u4e2d\u6240\u5c55\u793a\u7684\u5185\u5bb9\u81ea\u52a8\u7ed1\u5b9a\u8d77\u6765\u3002\u5f53\u6570\u636e\u88ab\u6539\u5199\u7684\u65f6\u5019\uff0c\u89c6\u56fe\u4f1a\u81ea\u52a8\u6839\u636e\u6570\u636e\u7684\u53d8\u5316\u800c\u53d1\u751f\u76f8\u5e94\u7684\u53d8\u5316\u3002</p>
+<p>\u6bd4\u5982\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50\uff0c<code><text></code> \u7684\u5185\u5bb9\u88ab\u7ed1\u5b9a\u5728\u4e86 <code>notes</code> \u6570\u636e\u5b57\u6bb5\u4e0a\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{notes}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">notes</span>: <span class="string">'Hello'</span></div><d
iv class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p>Weex \u7684 JS Framework \u4f1a\u9996\u5148\u5bf9 <code>data</code> \u91cc\u7684\u6570\u636e\u8fdb\u884c\u76d1\u542c\uff0c\u8fd9\u6837\u672a\u6765\u7684\u6570\u636e\u53d8\u5316\u90fd\u80fd\u591f\u88ab\u76d1\u542c\u5230\u3002\u7136\u540e\u6211\u4eec\u4f1a\u7f16\u8bd1\u6574\u4e2a <code><template></code> \u6807\u7b7e\u91cc\u7684\u5185\u5bb9\u3002\u5f53\u6211\u4eec\u627e\u5230 <code><text></code> \u6807\u7b7e\u91cc\u7684 <code>{{notes}}</code> \u65f6\uff0cJS Framework \u4f1a\u8ddf\u8e2a <code>data.notes</code> \u7684\u53d8\u5316\u5e76\u5728\u5176\u53d1\u751f\u53d8\u5316\u65f6\u89e6\u53d1\u4e00\u4e2a\u53e5\u67c4\uff0c\u5c06 <code><text></code> \u7684\u5185\u5bb9\u8bbe\u7f6e\u4e3a <code>data.notes</code> \u6700\u65b0\u7684\u503c\u3002\u8fd9\u6837\u7684\u8bdd\u5f00\u53d1\u8005\u5c31\u4e0d\u5fc5\u624b\u52a8\u5173\u5fc3\u6570\u636e\u548c\u89c6\u56fe\u4e4b\u95f4\u7684\u6570\u636e\u540c\u6b65\u95ee\u9898\u4e86\u3002</p>
+<p>\u5728\u8fd9\u4e2a\u57fa\u7840\u4e0a\u6211\u4eec\u8fd8\u8bbe\u8ba1\u4e86\u4e00\u4e9b\u7279\u6b8a\u7684\u8bed\u6cd5\uff1a</p>
+<ul>
+<li><code><foo if="..."></code> \u4ee3\u8868\u4e00\u4e2a\u6761\u4ef6\u76d1\u542c\uff0c\u5f53\u5176\u503c\u4e3a <code>true</code> \u65f6\uff0c<code><foo></code> \u5143\u7d20\u5c06\u4f1a\u88ab\u521b\u5efa\u548c\u8f7d\u5165\uff0c\u53cd\u4e4b\u5219\u4e0d\u4f1a\u88ab\u521b\u5efa\u6216\u88ab\u79fb\u9664\u6389\u3002</li>
+<li><code><foo repeat="..."></code> \u4ee3\u8868\u4e00\u4e2a\u5217\u8868\u76d1\u542c\uff0c\u7b2c\u4e00\u6b21\u52a0\u8f7d\u7684\u65f6\u5019 <code><foo></code> \u5143\u7d20\u4f1a\u88ab\u6309\u7167\u6570\u7ec4\u91cc\u7684\u6570\u636e\u9010\u6761 clone \u5e76\u8d4b\u503c\u3002\u800c\u5f53\u6709\u5217\u8868\u9879\u589e\u52a0\u3001\u79fb\u52a8\u6216\u79fb\u9664\u65f6\uff0c\u89c6\u56fe\u5c42\u4e5f\u4f1a\u81ea\u52a8\u89e6\u53d1\u76f8\u5e94\u7684\u6539\u53d8\uff0c\u5e76\u4e14\u667a\u80fd\u4f18\u5316\u81f3\u6700\u5c0f\u53d8\u66f4\u7b56\u7565</li>
+<li><code><foo if="..." repeat="..."></code> \u4e24\u4e2a\u7279\u6b8a\u8bed\u6cd5\u5171\u7528\u65f6\uff0c\u5c06\u4f1a\u4f18\u5148\u5c55\u5f00 <code>repeat</code> \u7136\u540e\u9010\u6761\u5224\u65ad <code>if</code>\u3002</li>
+</ul>
+<p>\u76f8\u6bd4\u4e8e\u4e00\u4e9b virtual-DOM \u7684 diff \u8ba1\u7b97\u673a\u5236\uff0c\u6211\u4eec\u4f1a\u76f4\u63a5\u5bf9\u6570\u636e\u8fdb\u884c diff\uff0c\u800c\u4e14\u53ea\u4f1a diff \u7531\u4e8e\u7528\u6237\u64cd\u4f5c\u6216\u6570\u636e\u64cd\u4f5c\u53d1\u751f\u6539\u53d8\u7684\u90a3\u90e8\u5206\u6570\u636e\u548c\u89c6\u56fe\uff0c\u8fd9\u662f\u4e00\u79cd\u66f4\u5c0f\u8303\u56f4\u7684\u8ba1\u7b97\u65b9\u5f0f\u3002\u5c24\u5176\u5728\u8ffd\u6c42\u8f7b\u91cf\u5feb\u901f\u7684\u79fb\u52a8\u7aef\u754c\u9762\u4e0a\uff0c\u8fd9\u79cd\u66f4\u65b0\u673a\u5236\u66f4\u52a0\u663e\u5f97\u5177\u6709\u4f18\u52bf\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/advanced/how-data-binding-works.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/how-data-binding-works.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/images/how-arch.png
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/images/how-arch.png b/content/cn/v-0.10/advanced/images/how-arch.png
new file mode 100644
index 0000000..a13df7a
Binary files /dev/null and b/content/cn/v-0.10/advanced/images/how-arch.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/images/how-render.png
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/images/how-render.png b/content/cn/v-0.10/advanced/images/how-render.png
new file mode 100644
index 0000000..db9b0f4
Binary files /dev/null and b/content/cn/v-0.10/advanced/images/how-render.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/index.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/index.html b/content/cn/v-0.10/advanced/index.html
new file mode 100644
index 0000000..865f2e7
--- /dev/null
+++ b/content/cn/v-0.10/advanced/index.html
@@ -0,0 +1,410 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex \u5de5\u4f5c\u539f\u7406 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Weex \u5de5\u4f5c\u539f\u7406\u6982\u8ff0\u603b\u89c8Weex\u662f\u8de8\u5e73\u53f0\uff0c\u53ef\u6269\u5c55\u7684\u52a8\u6001\u5316\u6280\u672f. \u4f60\u80fd\u901a\u8fc7\u5728Weex\u6e90\u7801\u4e2d\u5199&lt;template&gt;, &lt;style&gt; \u548c &lt;script&gt;\u6807\u7b7e\uff0c\u7136\u540e\u628a\u8fd9\u4e9b\u6807\u7b7e\u8f6c\u6362\u4e3aJS Bundle\u7528\u4e8e\u90e8\u7f72, \u5728\u670d\u52a1\u7aef\u4ee5\u8fd9\u4e9bJS Bundle\u54cd\u5e94\u8bf7\u6c42. \u5f53\u5ba2\u6237\u7aef\u63a5\u6536\u5230JS Bundle\u65f6\uff0c\u5b83\u80fd\u7528\u88ab\u5ba2\u6237\u7aef\u4e2d\u7684JS\u5f15\u64ce\u7528\u4e8e\u7ba1\u7406Native\u6e32\u67d3;API\u8c03\u7528\u548c\u7528\u6237\u4ea4\u4e92.">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Weex \u5de5\u4f5c\u539f\u7406">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/advanced/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Weex \u5de5\u4f5c\u539f\u7406\u6982\u8ff0\u603b\u89c8Weex\u662f\u8de8\u5e73\u53f0\uff0c\u53ef\u6269\u5c55\u7684\u52a8\u6001\u5316\u6280\u672f. \u4f60\u80fd\u901a\u8fc7\u5728Weex\u6e90\u7801\u4e2d\u5199&lt;template&gt;, &lt;style&gt; \u548c &lt;script&gt;\u6807\u7b7e\uff0c\u7136\u540e\u628a\u8fd9\u4e9b\u6807\u7b7e\u8f6c\u6362\u4e3aJS Bundle\u7528\u4e8e\u90e8\u7f72, \u5728\u670d\u52a1\u7aef\u4ee5\u8fd9\u4e9bJS Bundle\u54cd\u5e94\u8bf7\u6c42. \u5f53\u5ba2\u6237\u7aef\u63a5\u6536\u5230JS Bundle\u65f6\uff0c\u5b83\u80fd\u7528\u88ab\u5ba2\u6237\u7aef\u4e2d\u7684JS\u5f15\u64ce\u7528\u4e8e\u7ba1\u7406Native\u6e32\u67d3;API\u8c03\u7528\u548c\u7528\u6237\u4ea4\u4e92.">
+<meta property="og:image" content="http://gtms02.alicdn.com/tps/i2/TB1ootBMpXXXXXrXXXXwi60UVXX-596-397.png">
+<meta property="og:image" content="http://gtms03.alicdn.com/tps/i3/TB1_SA4MXXXXXXGaXXXpZ8UVXXX-519-337.png">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.930Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex \u5de5\u4f5c\u539f\u7406">
+<meta name="twitter:description" content="Weex \u5de5\u4f5c\u539f\u7406\u6982\u8ff0\u603b\u89c8Weex\u662f\u8de8\u5e73\u53f0\uff0c\u53ef\u6269\u5c55\u7684\u52a8\u6001\u5316\u6280\u672f. \u4f60\u80fd\u901a\u8fc7\u5728Weex\u6e90\u7801\u4e2d\u5199&lt;template&gt;, &lt;style&gt; \u548c &lt;script&gt;\u6807\u7b7e\uff0c\u7136\u540e\u628a\u8fd9\u4e9b\u6807\u7b7e\u8f6c\u6362\u4e3aJS Bundle\u7528\u4e8e\u90e8\u7f72, \u5728\u670d\u52a1\u7aef\u4ee5\u8fd9\u4e9bJS Bundle\u54cd\u5e94\u8bf7\u6c42. \u5f53\u5ba2\u6237\u7aef\u63a5\u6536\u5230JS Bundle\u65f6\uff0c\u5b83\u80fd\u7528\u88ab\u5ba2\u6237\u7aef\u4e2d\u7684JS\u5f15\u64ce\u7528\u4e8e\u7ba1\u7406Native\u6e32\u67d3;API\u8c03\u7528\u548c\u7528\u6237\u4ea4\u4e92.">
+<meta name="twitter:image" content="http://gtms02.alicdn.com/tps/i2/TB1ootBMpXXXXXrXXXXwi60UVXX-596-397.png">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="advanced" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "advanced";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u9ad8\u9636\u77e5\u8bc6
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link current ">Weex \u5de5\u4f5c\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">\u96c6\u6210\u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">\u96c6\u6210\u5230 iOS</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">\u96c6\u6210\u5230 web</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native API</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-advanced">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Weex \u5de5\u4f5c\u539f\u7406
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.930Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Weex-\u5de5\u4f5c\u539f\u7406\u6982\u8ff0"><a href="#Weex-\u5de5\u4f5c\u539f\u7406\u6982\u8ff0" class="headerlink" title="Weex \u5de5\u4f5c\u539f\u7406\u6982\u8ff0"></a>Weex \u5de5\u4f5c\u539f\u7406\u6982\u8ff0</h1><h2 id="\u603b\u89c8"><a href="#\u603b\u89c8" class="headerlink" title="\u603b\u89c8"></a>\u603b\u89c8</h2><p>Weex\u662f\u8de8\u5e73\u53f0\uff0c\u53ef\u6269\u5c55\u7684\u52a8\u6001\u5316\u6280\u672f. \u4f60\u80fd\u901a\u8fc7\u5728Weex\u6e90\u7801\u4e2d\u5199<code><template></code>, <code><style></code> \u548c <code><script></code>\u6807\u7b7e\uff0c\u7136\u540e\u628a\u8fd9\u4e9b\u6807\u7b7e\u8f6c\u6362\u4e3aJS Bundle\u7528\u4e8e\u90e8\u7f72, \u5728\u670d\u52a1\u7aef\u4ee5\u8fd9\u4e9bJS Bundle\u54cd\u5e94\u8bf7\u6c42. \u5f53\u5ba2\u6237\u7aef\u63a5\u6536\u5230JS Bundle\u65f6\uff0c\u5b83\u80fd\u7528\u88ab\u5ba2\u6237\u7aef\u4e2d\u7684JS\u5f15\u64ce\u7528\u4e8e\u7ba1\u7406Native\u6e32\u67d3;API\u8c03\u7528\u548c\u7528\u6237\u4ea4\u4e92.</p>
+<h3 id="\u5de5\u4f5c\u6d41"><a href="#\u5de5\u4f5c\u6d41" class="headerlink" title="\u5de5\u4f5c\u6d41"></a>\u5de5\u4f5c\u6d41</h3><figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">Weex we \u6587\u4ef6 --------------\u524d\u7aef(we\u6e90\u7801)</div><div class="line">\u2193 (\u8f6c\u6362) ------------------\u524d\u7aef(\u6784\u5efa\u8fc7\u7a0b)</div><div class="line">JS Bundle -----------------\u524d\u7aef(JS Bundle\u4ee3\u7801)</div><div class="line">\u2193 (\u90e8\u7f72) ------------------\u670d\u52a1\u5668</div><div class="line">\u5728\u670d\u52a1\u5668\u4e0a\u7684JS bundle ----\u670d\u52a1\u5668</div><div class="line">\u2193 (\u7f16\u8bd1) ------------------ \u5ba2\u6237\u7aef(JS\u5f15\u64ce)</div><div class="line">\u865a\u62df DOM \u6811 --------------- \u5ba2\u6237\u7aef(Weex JS Framework)</div><div class="line">\u2193 (\u6e32\u67d3) ------------------ \u5ba2\u6237\u7aef(\u6e32\u67d3\u5f15\u64ce)</div><div class="line">Native\u89c6\u56fe --------------- \u5ba2\u6237\u7aef(\u6e32\u67d3\u5f15\u64ce)</div></pre></td></tr></table></figure>
+<p>\u5728\u4e0a\u9762\u7684\u5de5\u4f5c\u6d41\u4e2d\uff0c\u6211\u4eec\u63d0\u5230:</p>
+<ul>
+<li>Transformer\uff08\u8f6c\u6362\u5668): \u4e00\u4e2aNode JS\u5de5\u5177\uff0c \u8f6c\u6362Weex\u6e90\u7801\u4e3aJS Bundle </li>
+<li>Weex JS Framework(JS\u6846\u67b6): \u8fd0\u884c\u4e8e\u5ba2\u6237\u7aef\u7684\u7684JS\u6846\u67b6\uff0c\u7ba1\u7406\u7740Weex\u5b9e\u4f8b\u7684\u8fd0\u884c\u3002Weex\u5b9e\u4f8b\u7531JS Bundle\u521b\u5efa\u5e76\u6784\u5efa\u8d77\u865a\u62dfDOM\u6811. \u53e6\u5916\uff0c\u5b83\u53d1\u9001/\u63a5\u53d7 Native \u6e32\u67d3\u5c42\u4ea7\u751f\u7684\u7cfb\u7edf\u8c03\u7528\uff0c\u4ece\u800c\u95f4\u63a5\u7684\u54cd\u5e94\u7528\u6237\u4ea4\u4e92\u3002</li>
+<li>Native\u5f15\u64ce: \u5728\u4e0d\u540c\u7684\u7aef\u4e0a\uff0c\u6709\u7740\u4e0d\u540c\u7684\u5b9e\u73b0: iOS/Android/HTML5. \u4ed6\u4eec\u6709\u7740\u5171\u540c\u7684\u7ec4\u4ef6\u8bbe\u8ba1, \u6a21\u5757API \u548c\u6e32\u67d3\u6548\u679c. \u6240\u4ee5\u4ed6\u4eec\u80fd\u914d\u5408\u540c\u6837\u7684 JS Framework \u548c JS Bundle\u5de5\u4f5c\u3002</li>
+</ul>
+<h2 id="\u8f6c\u6362\u5668"><a href="#\u8f6c\u6362\u5668" class="headerlink" title="\u8f6c\u6362\u5668"></a>\u8f6c\u6362\u5668</h2><p>\u8f6c\u6362\u5668\u8f6c\u6362Weex\u6e90\u7801\u4e3aJS Bundle. \u6574\u4f53\u5de5\u4f5c\u53ef\u4ee5\u5206\u4e3a\u4e09\u4e2a\u90e8\u5206:</p>
+<ul>
+<li>\u8f6c\u6362 <code><template></code> \u4e3a\u7c7bJSON\u7684\u6811\u72b6\u6570\u636e\u7ed3\u6784, \u8f6c\u6362\u6570\u636e\u7ed1\u5b9a\u4e3a\u8fd4\u56de\u6570\u636e\u7684\u51fd\u6570\u539f\u578b.\u4f8b\u5982. For example: <code><foo a="{{x}}" b="1" /></code> \u5c06\u8f6c\u6362\u4e3a <code>{type: "foo", attr: {a: function () {return this.x}, b: 1}}</code>.</li>
+<li>\u8f6c\u6362 <code><style></code> \u4e3a\u7c7bJSON\u7684\u6811\u72b6\u6570\u636e\u7ed3\u6784. \u4f8b\u5982: <code>.classname {name: value;}</code> \u5c06\u8f6c\u6362\u4e3a <code>{classname: {name: value}}</code>.</li>
+<li>\u628a\u4e0a\u9762\u4e24\u90e8\u5206\u7684\u5185\u5bb9\u548c <code><script></code> \u4e2d\u7684\u5185\u5bb9\u7ed3\u5408. \u4e0a\u9762\u7684\u4e09\u4e2a\u90e8\u5206\u5c06\u7ed3\u5408\u6210\u4e00\u4e2aJavaScript AMD \u6a21\u5757.</li>
+</ul>
+<p>\u4e00\u4e2a\u5b8c\u6574\u7684\u4f8b\u5b50:</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">foo</span> <span class="attr">a</span>=<span class="string">"{{x}}"</span> <span class="attr">b</span>=<span class="string">"1"</span> <span class="attr">class</span>=<span class="string">"bar"</span>></span><span class="tag"></<span class="name">foo</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.bar</span> {<span class="attribute">width</span>: <span class="number">200</span>; <span class="attribute">height</span>: <span class="number">200</span>}</div><div class="line"><span class="tag"></<span class="na
me">style</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> {<span class="attr">x</span>: <span class="number">100</span>}</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p>\u5c06\u8f6c\u6362\u4e3a:</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line">define(<span class="string">'@weex-component/main'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> {<span class="attr">x</span>: <span class="number">100</span>}</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="built_in">module</span>.template = {</div><div class="line"> <span class="attr">type</span>: <span class="string">"foo"</span>,</div><div class="line"> <span class="attr">attr</span>: {</div><div class="line"> <span class="attr">a</span>
: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{<span class="keyword">return</span> <span class="keyword">this</span>.x},</div><div class="line"> <span class="attr">b</span>: <span class="number">1</span>,</div><div class="line"> <span class="attr">classname</span>: [<span class="string">'bar'</span>]</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="built_in">module</span>.style = {</div><div class="line"> <span class="attr">bar</span>: {<span class="attr">width</span>: <span class="number">200</span>, <span class="attr">height</span>: <span class="number">200</span>}</div><div class="line"> }</div><div class="line">})</div><div class="line">bootstrap(<span class="string">'@weex-component/main'</span>)</div></pre></td></tr></table></figure>
+<p>\u9664\u6b64\u4e4b\u5916,\u8f6c\u6362\u5668\u8fd8\u4f1a\u505a\u4e00\u4e9b\u989d\u5916\u7684\u4e8b\u60c5: \u5408\u5e76Bundle ,\u6dfb\u52a0\u5f15\u5bfc\u51fd\u6570\uff0c\u914d\u7f6e\u5916\u90e8\u6570\u636e\u7b49\u7b49\uff0c\u66f4\u8be6\u7ec6\u7684\uff0c\u8bf7\u53c2\u9605<a href="../references/specs/js-bundle-format.html">Synatax</a>\u7ae0\u8282.</p>
+<h2 id="\u6ce8\u610f"><a href="#\u6ce8\u610f" class="headerlink" title="\u6ce8\u610f"></a>\u6ce8\u610f</h2><p>\u5f53\u524d\u5927\u90e8\u5206Weex\u5de5\u5177\u6700\u7ec8\u8f93\u51fa\u7684JS Bundle\u683c\u5f0f\u90fd\u7ecf\u8fc7\u4e86<a href="https://webpack.github.io/" target="_blank" rel="external">Webpack</a>\u7684\u4e8c\u6b21\u5904\u7406\uff0c\u6240\u4ee5\u4f60\u5b9e\u9645\u4f7f\u7528\u5de5\u5177\u8f93\u51fa\u7684JS Bundle\u4f1a\u548c\u4e0a\u9762\u7684\u6709\u6240\u533a\u522b.</p>
+<h2 id="JS-Framework"><a href="#JS-Framework" class="headerlink" title="JS Framework"></a>JS Framework</h2><p>JS Framework \u5728\u521d\u59cb\u5316\u9636\u6bb5\u88ab\u539f\u751f JavaScript \u5f15\u64ce\u8fd0\u884c. \u5b83\u63d0\u4f9b\u88ab\u6bcf\u4e2aJS Bundle\u8c03\u7528\u7684 <code>define()</code> \u548c <code>bootstrap()</code> \u51fd\u6570. \u4e00\u65e6JS Bundle\u4ece\u670d\u52a1\u5668\u4e0b\u8f7d\u540e\uff0c\u8fd9\u4e9b\u51fd\u6570\u5c31\u4f1a\u6267\u884c. <code>define()</code> \u51fd\u6570\u4ee5\u6ce8\u518c\u6a21\u5757;<code>bootstrap()</code>\u4f1a\u7f16\u8bd1\u4e3b\u8981\u7684\u6a21\u5757\u4e3a\u865a\u62dfDOM\uff0c\u5e76\u53d1\u9001\u6e32\u67d3\u6307\u4ee4\u7ed9Native .</p>
+<p>JS \u548c Native \u7684\u6c9f\u901a\u4e3b\u8981\u901a\u8fc7\u4e24\u4e2a\u5173\u952e\u65b9\u6cd5\u8fdb\u884c:</p>
+<ul>
+<li><code>callNative</code> \u662f\u4e00\u4e2a\u7531native\u4ee3\u7801\u5b9e\u73b0\u7684\u51fd\u6570, \u5b83\u88abJS\u4ee3\u7801\u8c03\u7528\u5e76\u5411native\u53d1\u9001\u6307\u4ee4,\u4f8b\u5982 <code>rendering</code>, <code>networking</code>, <code>authorizing</code>\u548c\u5176\u4ed6\u5ba2\u6237\u7aef\u4fa7\u7684 <code>toast</code> \u7b49API.</li>
+<li><code>callJS</code> \u662f\u4e00\u4e2a\u7531JS\u5b9e\u73b0\u7684\u51fd\u6570, \u5b83\u7528\u4e8eNative\u5411JS\u53d1\u9001\u6307\u4ee4. \u76ee\u524d\u8fd9\u4e9b\u6307\u4ee4\u7531\u7528\u6237\u4ea4\u4e92\u548cNative\u7684\u56de\u8c03\u51fd\u6570\u7ec4\u6210.<h2 id="Native-\u6e32\u67d3\u5f15\u64ce"><a href="#Native-\u6e32\u67d3\u5f15\u64ce" class="headerlink" title="Native \u6e32\u67d3\u5f15\u64ce"></a>Native \u6e32\u67d3\u5f15\u64ce</h2></li>
+</ul>
+<p>Native \u6e32\u67d3\u5f15\u64ce\u63d0\u4f9b\u5ba2\u6237\u7aef\u7ec4\u4ef6\u548c\u6a21\u5757.</p>
+<p><strong>Component(\u7ec4\u4ef6)</strong> \u5728\u5c4f\u5e55\u5185\u53ef\u89c1\uff0c\u6709\u7279\u5b9a\u884c\u4e3a. \u80fd\u88ab\u914d\u7f6e\u4e0d\u540c\u7684\u5c5e\u6027\u548c\u6837\u5f0f,\u80fd\u54cd\u5e94\u7528\u6237\u4ea4\u4e92. \u5e38\u89c1\u7684\u7ec4\u4ef6\u6709: <code><div></code>, <code><text></code>, <code><image></code>.</p>
+<p><strong>Module(\u6a21\u5757)</strong> \u662f\u4e00\u7ec4\u80fd\u88abJS Framework\u8c03\u7528\u7684API. \u5176\u4e2d\u7684\u4e00\u4e9b\u80fd\u4ee5\u5f02\u6b65\u7684\u65b9\u5f0f\u8c03\u7528JS Framework, \u4f8b\u5982: \u53d1\u9001HTTP\u8bf7\u6c42.</p>
+<p>\u5728Weex\u5b9e\u4f8b\u8fd0\u884c\u671f\u95f4,Native\u6e32\u67d3\u5f15\u64ce\u5c06\u63a5\u6536\u5404\u79cd\u5404\u6837\u4e0d\u540c\u6a21\u5757\u7684API\u8c03\u7528\u3002\u8fd9\u4e9b\u8c03\u7528\u521b\u5efa\u6216\u66f4\u65b0\u7ec4\u4ef6\u5916\u89c2\uff0c\u8fd0\u884c\u5982<code>toast</code>\u7684Native API.\u5f53\u7528\u6237\u4ea4\u4e92\u6216\u6a21\u5757\u56de\u8c03\u65f6\uff0c<code>callJS()</code>\u4f1a\u7531JS Framework\u8c03\u7528. \u8fd9\u6837\u7684\u5faa\u73af\u5f80\u590d\u5c06\u4eceWeex\u5b9e\u4f8b\u521d\u59cb\u5316\u5230\u9500\u6bc1\u4e00\u76f4\u6301\u7eed. \u5982\u4e0b\u9762\u7684\u67b6\u6784\u56fe\u6240\u793a, HTML5\u6e32\u67d3\u5f15\u64ce\u63d0\u4f9b\u548cNative\u6e32\u67d3\u5f15\u64ce\u51e0\u4e4e\u4e00\u81f4\u7684\u529f\u80fd\u3002 </p>
+<p><img src="http://gtms02.alicdn.com/tps/i2/TB1ootBMpXXXXXrXXXXwi60UVXX-596-397.png" alt="arch"></p>
+<p>Weex\u67b6\u6784\u56fe</p>
+<h3 id="\u4eceJavascript\u4e2d\u8c03\u7528Native"><a href="#\u4eceJavascript\u4e2d\u8c03\u7528Native" class="headerlink" title="\u4eceJavascript\u4e2d\u8c03\u7528Native"></a>\u4eceJavascript\u4e2d\u8c03\u7528Native</h3><figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">[JS Framework]</div><div class="line">\u2193 callNative</div><div class="line">\u6a21\u5757 APIs</div><div class="line"> \u6e32\u67d3 -> \u6a21\u5757\u663e\u793a</div><div class="line"> \u5176\u4ed6\u529f\u80fd</div><div class="line">[Native \u6e32\u67d3\u5f15\u64ce]</div></pre></td></tr></table></figure>
+<h3 id="\u4eceNative\u4e2d\u8c03\u7528Javascript"><a href="#\u4eceNative\u4e2d\u8c03\u7528Javascript" class="headerlink" title="\u4eceNative\u4e2d\u8c03\u7528Javascript"></a>\u4eceNative\u4e2d\u8c03\u7528Javascript</h3><figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">[Native \u6e32\u67d3\u5f15\u64ce]</div><div class="line">\u6a21\u5757 APIs \u56de\u8c03</div><div class="line">\u7528\u6237\u4ea4\u4e92</div><div class="line">\u2193 callJS</div><div class="line">[JS Framework]</div></pre></td></tr></table></figure>
+<h3 id="\u6e32\u67d3\u6d41\u7a0b"><a href="#\u6e32\u67d3\u6d41\u7a0b" class="headerlink" title="\u6e32\u67d3\u6d41\u7a0b"></a>\u6e32\u67d3\u6d41\u7a0b</h3><p><img src="http://gtms03.alicdn.com/tps/i3/TB1_SA4MXXXXXXGaXXXpZ8UVXXX-519-337.png" alt="render flow"> </p>
+<p>Weex \u6e32\u67d3\u6d41\u7a0b</p>
+<ol>
+<li>\u865a\u62dfDOM.</li>
+<li><strong>\u6784\u9020\u6811\u7ed3\u6784</strong>. \u5206\u6790\u865a\u62dfDOM JSON\u6570\u636e\u4ee5\u6784\u9020\u6e32\u67d3\u6811(RT).</li>
+<li><strong>\u6dfb\u52a0\u6837\u5f0f</strong>. \u4e3a\u6e32\u67d3\u6811\u7684\u5404\u4e2a\u8282\u70b9\u6dfb\u52a0\u6837\u5f0f.</li>
+<li><strong>\u521b\u5efa\u89c6\u56fe</strong>. \u4e3a\u6e32\u67d3\u6811\u5404\u4e2a\u8282\u70b9\u521b\u5efaNative\u89c6\u56fe.</li>
+<li><strong>\u7ed1\u5b9a\u4e8b\u4ef6</strong>. \u4e3aNative\u89c6\u56fe\u7ed1\u5b9a\u4e8b\u4ef6.</li>
+<li><strong>CSS\u5e03\u5c40</strong>. \u4f7f\u7528 <a href="https://github.com/facebook/css-layout" target="_blank" rel="external">css-layout</a> \u6765\u8ba1\u7b97\u5404\u4e2a\u89c6\u56fe\u7684\u5e03\u5c40.</li>
+<li><strong>\u66f4\u65b0\u89c6\u7a97(Frame)</strong>. \u91c7\u7528\u4e0a\u4e00\u6b65\u7684\u8ba1\u7b97\u7ed3\u679c\u6765\u66f4\u65b0\u89c6\u7a97\u4e2d\u5404\u4e2a\u89c6\u56fe\u7684\u6700\u7ec8\u5e03\u5c40\u4f4d\u7f6e.</li>
+<li>\u6700\u7ec8\u9875\u9762\u5448\u73b0.</li>
+</ol>
+<p>\u5728Weex HTML5\u73af\u5883\u4e0b <code>CSS \u5e03\u5c40</code> and <code>\u66f4\u65b0\u89c6\u7a97</code> \u7531\u6d4f\u89c8\u5668\u5f15\u64ce(\u4f8b\u5982webkit)\u5b9e\u73b0.</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/advanced/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[29/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/html5-apis.html
----------------------------------------------------------------------
diff --git a/content/cn/references/html5-apis.html b/content/cn/references/html5-apis.html
new file mode 100644
index 0000000..439df1d
--- /dev/null
+++ b/content/cn/references/html5-apis.html
@@ -0,0 +1,1311 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>HTML5 APIs | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="HTML5 APIsWeex HTML5 APIs \u4e0e Vue APIs \u4fdd\u6301\u4e00\u81f4\uff0c\u8bf7\u76f4\u63a5\u53c2\u8003 Vue APIs\u3002">
+<meta property="og:type" content="website">
+<meta property="og:title" content="HTML5 APIs">
+<meta property="og:url" content="https://weex.apache.org/cn/references/html5-apis.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="HTML5 APIsWeex HTML5 APIs \u4e0e Vue APIs \u4fdd\u6301\u4e00\u81f4\uff0c\u8bf7\u76f4\u63a5\u53c2\u8003 Vue APIs\u3002">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.855Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="HTML5 APIs">
+<meta name="twitter:description" content="HTML5 APIsWeex HTML5 APIs \u4e0e Vue APIs \u4fdd\u6301\u4e00\u81f4\uff0c\u8bf7\u76f4\u63a5\u53c2\u8003 Vue APIs\u3002">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link current ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link current ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ HTML5 APIs
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.855Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="HTML5-APIs"><a href="#HTML5-APIs" class="headerlink" title="HTML5 APIs"></a>HTML5 APIs</h1><p>Weex HTML5 APIs \u4e0e <a href="https://vuejs.org/v2/api/" target="_blank" rel="external">Vue APIs</a> \u4fdd\u6301\u4e00\u81f4\uff0c\u8bf7\u76f4\u63a5\u53c2\u8003 <a href="https://vuejs.org/v2/api/" target="_blank" rel="external">Vue APIs</a>\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/html5-apis.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/html5-apis.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/Artboard.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/Artboard.jpg b/content/cn/references/images/Artboard.jpg
new file mode 100644
index 0000000..2f6bb95
Binary files /dev/null and b/content/cn/references/images/Artboard.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/coding_weex_1.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/coding_weex_1.jpg b/content/cn/references/images/coding_weex_1.jpg
new file mode 100644
index 0000000..8080578
Binary files /dev/null and b/content/cn/references/images/coding_weex_1.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/css-boxmodel.png
----------------------------------------------------------------------
diff --git a/content/cn/references/images/css-boxmodel.png b/content/cn/references/images/css-boxmodel.png
new file mode 100644
index 0000000..a2063e2
Binary files /dev/null and b/content/cn/references/images/css-boxmodel.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/css-flexbox-align.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/css-flexbox-align.jpg b/content/cn/references/images/css-flexbox-align.jpg
new file mode 100644
index 0000000..8a7f731
Binary files /dev/null and b/content/cn/references/images/css-flexbox-align.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/css-flexbox-justify.svg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/css-flexbox-justify.svg b/content/cn/references/images/css-flexbox-justify.svg
new file mode 100644
index 0000000..33e742b
--- /dev/null
+++ b/content/cn/references/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
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/css-flexbox-sample.png
----------------------------------------------------------------------
diff --git a/content/cn/references/images/css-flexbox-sample.png b/content/cn/references/images/css-flexbox-sample.png
new file mode 100644
index 0000000..0f1236d
Binary files /dev/null and b/content/cn/references/images/css-flexbox-sample.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/div_1.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/div_1.jpg b/content/cn/references/images/div_1.jpg
new file mode 100644
index 0000000..3c89773
Binary files /dev/null and b/content/cn/references/images/div_1.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/div_2.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/div_2.jpg b/content/cn/references/images/div_2.jpg
new file mode 100644
index 0000000..67395bb
Binary files /dev/null and b/content/cn/references/images/div_2.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/div_3.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/div_3.jpg b/content/cn/references/images/div_3.jpg
new file mode 100644
index 0000000..b10f69e
Binary files /dev/null and b/content/cn/references/images/div_3.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/div_4.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/div_4.jpg b/content/cn/references/images/div_4.jpg
new file mode 100644
index 0000000..acc2518
Binary files /dev/null and b/content/cn/references/images/div_4.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/image_1.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/image_1.jpg b/content/cn/references/images/image_1.jpg
new file mode 100644
index 0000000..b87de15
Binary files /dev/null and b/content/cn/references/images/image_1.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/image_2.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/image_2.jpg b/content/cn/references/images/image_2.jpg
new file mode 100644
index 0000000..598a242
Binary files /dev/null and b/content/cn/references/images/image_2.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/list_2.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/list_2.jpg b/content/cn/references/images/list_2.jpg
new file mode 100644
index 0000000..8c2cc55
Binary files /dev/null and b/content/cn/references/images/list_2.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/list_3.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/list_3.jpg b/content/cn/references/images/list_3.jpg
new file mode 100644
index 0000000..f2968c7
Binary files /dev/null and b/content/cn/references/images/list_3.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/list_4.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/list_4.jpg b/content/cn/references/images/list_4.jpg
new file mode 100644
index 0000000..0123171
Binary files /dev/null and b/content/cn/references/images/list_4.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/nav.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/nav.jpg b/content/cn/references/images/nav.jpg
new file mode 100644
index 0000000..8c6ed03
Binary files /dev/null and b/content/cn/references/images/nav.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/nav.png
----------------------------------------------------------------------
diff --git a/content/cn/references/images/nav.png b/content/cn/references/images/nav.png
new file mode 100644
index 0000000..7081ca7
Binary files /dev/null and b/content/cn/references/images/nav.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/scroller_1.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/scroller_1.jpg b/content/cn/references/images/scroller_1.jpg
new file mode 100644
index 0000000..3e995cb
Binary files /dev/null and b/content/cn/references/images/scroller_1.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/style_1.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/style_1.jpg b/content/cn/references/images/style_1.jpg
new file mode 100644
index 0000000..2482710
Binary files /dev/null and b/content/cn/references/images/style_1.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/images/style_2.jpg
----------------------------------------------------------------------
diff --git a/content/cn/references/images/style_2.jpg b/content/cn/references/images/style_2.jpg
new file mode 100644
index 0000000..6b6f2e1
Binary files /dev/null and b/content/cn/references/images/style_2.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/index.html
----------------------------------------------------------------------
diff --git a/content/cn/references/index.html b/content/cn/references/index.html
new file mode 100644
index 0000000..1e32622
--- /dev/null
+++ b/content/cn/references/index.html
@@ -0,0 +1,1344 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u901a\u7528\u7279\u6027 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u901a\u7528\u7279\u6027
+iOS APIs
+Android APIs
+HTML5 APIs
+\u901a\u7528\u6837\u5f0f
+\u6587\u672c\u6837\u5f0f
+\u989c\u8272\u540d\u79f0
+\u624b\u52bf
+\u8def\u5f84">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u901a\u7528\u7279\u6027">
+<meta property="og:url" content="https://weex.apache.org/cn/references/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u901a\u7528\u7279\u6027
+iOS APIs
+Android APIs
+HTML5 APIs
+\u901a\u7528\u6837\u5f0f
+\u6587\u672c\u6837\u5f0f
+\u989c\u8272\u540d\u79f0
+\u624b\u52bf
+\u8def\u5f84">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.895Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u901a\u7528\u7279\u6027">
+<meta name="twitter:description" content="\u901a\u7528\u7279\u6027
+iOS APIs
+Android APIs
+HTML5 APIs
+\u901a\u7528\u6837\u5f0f
+\u6587\u672c\u6837\u5f0f
+\u989c\u8272\u540d\u79f0
+\u624b\u52bf
+\u8def\u5f84">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link current ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link current ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u901a\u7528\u7279\u6027
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.895Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u901a\u7528\u7279\u6027"><a href="#\u901a\u7528\u7279\u6027" class="headerlink" title="\u901a\u7528\u7279\u6027"></a>\u901a\u7528\u7279\u6027</h1><ul>
+<li><a href="./ios-apis.html">iOS APIs</a></li>
+<li><a href="./android-apis.html">Android APIs</a></li>
+<li><a href="./html5-apis.html">HTML5 APIs</a></li>
+<li><a href="./common-style.html">\u901a\u7528\u6837\u5f0f</a></li>
+<li><a href="./text-style.html">\u6587\u672c\u6837\u5f0f</a></li>
+<li><a href="./color-names.html">\u989c\u8272\u540d\u79f0</a></li>
+<li><a href="./gesture.html">\u624b\u52bf</a></li>
+<li><a href="./path.html">\u8def\u5f84</a></li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[23/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/modules/modal.html
----------------------------------------------------------------------
diff --git a/content/cn/references/modules/modal.html b/content/cn/references/modules/modal.html
new file mode 100644
index 0000000..fea3502
--- /dev/null
+++ b/content/cn/references/modules/modal.html
@@ -0,0 +1,1363 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>modal | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="modal \u6a21\u6001modal \u6a21\u5757\u63d0\u4f9b\u4e86\u4ee5\u4e0b\u5c55\u793a\u6d88\u606f\u6846\u7684 API\uff1atoast\u3001alert\u3001confirm \u548c prompt\u3002
+APItoast(options)toast() \u4f1a\u5728\u4e00\u4e2a\u5c0f\u6d6e\u5c42\u91cc\u5c55\u793a\u5173\u4e8e\u67d0\u4e2a\u64cd\u4f5c\u7684\u7b80\u5355\u53cd\u9988\u3002\u4f8b\u5982\uff0c\u5728\u90ae\u4ef6\u53d1\u9001\u524d\u79bb\u5f00\u90ae\u7f16\u7f16\u8f91\u754c\u9762\uff0c\u53ef\u4ee5\u89e6\u53d1\u4e00\u4e2a\u201c\u8349\u7a3f\u5df2\u4fdd\u5b58\u201d\u7684 toast\uff0c\u544a\u77e5\u7528\u6237\u4ee5\u540e\u53ef\u4ee5\u7ee7\u7eed\u7f16\u8f91\u3002toast \u4f1a\u5728\u663e\u793a\u4e00\u6bb5\u65f6\u95f4\u4e4b\u540e\u81ea\u52a8\u6d88\u5931\u3002
+\u53c2\u6570
+options {Objec">
+<meta property="og:type" content="website">
+<meta property="og:title" content="modal">
+<meta property="og:url" content="https://weex.apache.org/cn/references/modules/modal.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="modal \u6a21\u6001modal \u6a21\u5757\u63d0\u4f9b\u4e86\u4ee5\u4e0b\u5c55\u793a\u6d88\u606f\u6846\u7684 API\uff1atoast\u3001alert\u3001confirm \u548c prompt\u3002
+APItoast(options)toast() \u4f1a\u5728\u4e00\u4e2a\u5c0f\u6d6e\u5c42\u91cc\u5c55\u793a\u5173\u4e8e\u67d0\u4e2a\u64cd\u4f5c\u7684\u7b80\u5355\u53cd\u9988\u3002\u4f8b\u5982\uff0c\u5728\u90ae\u4ef6\u53d1\u9001\u524d\u79bb\u5f00\u90ae\u7f16\u7f16\u8f91\u754c\u9762\uff0c\u53ef\u4ee5\u89e6\u53d1\u4e00\u4e2a\u201c\u8349\u7a3f\u5df2\u4fdd\u5b58\u201d\u7684 toast\uff0c\u544a\u77e5\u7528\u6237\u4ee5\u540e\u53ef\u4ee5\u7ee7\u7eed\u7f16\u8f91\u3002toast \u4f1a\u5728\u663e\u793a\u4e00\u6bb5\u65f6\u95f4\u4e4b\u540e\u81ea\u52a8\u6d88\u5931\u3002
+\u53c2\u6570
+options {Objec">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.906Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="modal">
+<meta name="twitter:description" content="modal \u6a21\u6001modal \u6a21\u5757\u63d0\u4f9b\u4e86\u4ee5\u4e0b\u5c55\u793a\u6d88\u606f\u6846\u7684 API\uff1atoast\u3001alert\u3001confirm \u548c prompt\u3002
+APItoast(options)toast() \u4f1a\u5728\u4e00\u4e2a\u5c0f\u6d6e\u5c42\u91cc\u5c55\u793a\u5173\u4e8e\u67d0\u4e2a\u64cd\u4f5c\u7684\u7b80\u5355\u53cd\u9988\u3002\u4f8b\u5982\uff0c\u5728\u90ae\u4ef6\u53d1\u9001\u524d\u79bb\u5f00\u90ae\u7f16\u7f16\u8f91\u754c\u9762\uff0c\u53ef\u4ee5\u89e6\u53d1\u4e00\u4e2a\u201c\u8349\u7a3f\u5df2\u4fdd\u5b58\u201d\u7684 toast\uff0c\u544a\u77e5\u7528\u6237\u4ee5\u540e\u53ef\u4ee5\u7ee7\u7eed\u7f16\u8f91\u3002toast \u4f1a\u5728\u663e\u793a\u4e00\u6bb5\u65f6\u95f4\u4e4b\u540e\u81ea\u52a8\u6d88\u5931\u3002
+\u53c2\u6570
+options {Objec">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link current ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link current ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ modal
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.906Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="modal-\u6a21\u6001"><a href="#modal-\u6a21\u6001" class="headerlink" title="modal \u6a21\u6001"></a><code>modal</code> \u6a21\u6001</h1><p><code>modal</code> \u6a21\u5757\u63d0\u4f9b\u4e86\u4ee5\u4e0b\u5c55\u793a\u6d88\u606f\u6846\u7684 API\uff1a<code>toast</code>\u3001<code>alert</code>\u3001<code>confirm</code> \u548c <code>prompt</code>\u3002</p>
+<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><h3 id="toast-options"><a href="#toast-options" class="headerlink" title="toast(options)"></a><code>toast(options)</code></h3><p><code>toast()</code> \u4f1a\u5728\u4e00\u4e2a\u5c0f\u6d6e\u5c42\u91cc\u5c55\u793a\u5173\u4e8e\u67d0\u4e2a\u64cd\u4f5c\u7684\u7b80\u5355\u53cd\u9988\u3002\u4f8b\u5982\uff0c\u5728\u90ae\u4ef6\u53d1\u9001\u524d\u79bb\u5f00\u90ae\u7f16\u7f16\u8f91\u754c\u9762\uff0c\u53ef\u4ee5\u89e6\u53d1\u4e00\u4e2a\u201c\u8349\u7a3f\u5df2\u4fdd\u5b58\u201d\u7684 toast\uff0c\u544a\u77e5\u7528\u6237\u4ee5\u540e\u53ef\u4ee5\u7ee7\u7eed\u7f16\u8f91\u3002toast \u4f1a\u5728\u663e\u793a\u4e00\u6bb5\u65f6\u95f4\u4e4b\u540e\u81ea\u52a8\u6d88\u5931\u3002</p>
+<h4 id="\u53c2\u6570"><a href="#\u53c2\u6570" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>options {Object}</code>\uff1a\u76f8\u5173\u9009\u9879<ul>
+<li><code>message {string}</code>\uff1a\u5c55\u793a\u7684\u5185\u5bb9</li>
+<li><code>duration {number}</code>\uff1a\u5c55\u793a\u7684\u6301\u7eed\u65f6\u95f4\uff08\u4ee5\u79d2\u4e3a\u5355\u4f4d\uff09</li>
+</ul>
+</li>
+</ul>
+<h3 id="alert-options-callback"><a href="#alert-options-callback" class="headerlink" title="alert(options, callback)"></a><code>alert(options, callback)</code></h3><p>\u8b66\u544a\u6846\u7ecf\u5e38\u7528\u4e8e\u786e\u4fdd\u7528\u6237\u53ef\u4ee5\u5f97\u5230\u67d0\u4e9b\u4fe1\u606f\u3002\u5f53\u8b66\u544a\u6846\u51fa\u73b0\u540e\uff0c\u7528\u6237\u9700\u8981\u70b9\u51fb\u786e\u5b9a\u6309\u94ae\u624d\u80fd\u7ee7\u7eed\u8fdb\u884c\u64cd\u4f5c\u3002</p>
+<h4 id="\u53c2\u6570-1"><a href="#\u53c2\u6570-1" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>options {Object}</code>\uff1aalert\u9009\u9879<ul>
+<li><code>message {string}</code>\uff1a\u8b66\u544a\u6846\u5185\u663e\u793a\u7684\u6587\u5b57\u4fe1\u606f</li>
+<li><code>okTitle {string}</code>\uff1a\u786e\u5b9a\u6309\u94ae\u4e0a\u663e\u793a\u7684\u6587\u5b57\u4fe1\u606f\uff0c\u9ed8\u8ba4\u662f\u201cOK\u201d</li>
+<li><code>callback {Function}</code>\uff1a\u7528\u6237\u64cd\u4f5c\u5b8c\u6210\u540e\u7684\u56de\u8c03</li>
+</ul>
+</li>
+</ul>
+<h3 id="confirm-options-callback"><a href="#confirm-options-callback" class="headerlink" title="confirm(options, callback)"></a><code>confirm(options, callback)</code></h3><p>\u786e\u8ba4\u6846\u7528\u4e8e\u4f7f\u7528\u6237\u53ef\u4ee5\u9a8c\u8bc1\u6216\u8005\u63a5\u53d7\u67d0\u4e9b\u4fe1\u606f\u3002\u5f53\u786e\u8ba4\u6846\u51fa\u73b0\u540e\uff0c\u7528\u6237\u9700\u8981\u70b9\u51fb\u786e\u5b9a\u6216\u8005\u53d6\u6d88\u6309\u94ae\u624d\u80fd\u7ee7\u7eed\u8fdb\u884c\u64cd\u4f5c\u3002</p>
+<h4 id="\u53c2\u6570-2"><a href="#\u53c2\u6570-2" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>options {object}</code>\uff1aconfirm \u9009\u9879<ul>
+<li><code>message {string}</code>\uff1a\u786e\u8ba4\u6846\u5185\u663e\u793a\u7684\u6587\u5b57\u4fe1\u606f</li>
+<li><code>okTitle {string}</code>\uff1a\u786e\u8ba4\u6309\u94ae\u4e0a\u663e\u793a\u7684\u6587\u5b57\u4fe1\u606f\uff0c\u9ed8\u8ba4\u662f <code>OK</code></li>
+<li><code>cancelTitle {string}</code>\uff1a\u53d6\u6d88\u6309\u94ae\u4e0a\u663e\u793a\u7684\u6587\u5b57\u4fe1\u606f\uff0c\u9ed8\u8ba4\u662f <code>Cancel</code></li>
+</ul>
+</li>
+<li><code>callback {function (result)}</code>\uff1a\u7528\u6237\u64cd\u4f5c\u5b8c\u6210\u540e\u7684\u56de\u8c03\uff0c\u56de\u8c03\u51fd\u6570\u7684\u53c2\u6570 <code>result</code> \u662f\u786e\u5b9a\u6309\u94ae\u4e0a\u7684\u6587\u5b57\u4fe1\u606f\u5b57\u7b26\u4e32</li>
+</ul>
+<h3 id="prompt-options-callback"><a href="#prompt-options-callback" class="headerlink" title="prompt(options, callback)"></a><code>prompt(options, callback)</code></h3><p>\u63d0\u793a\u6846\u7ecf\u5e38\u7528\u4e8e\u63d0\u793a\u7528\u6237\u5728\u8fdb\u5165\u9875\u9762\u524d\u8f93\u5165\u67d0\u4e2a\u503c\u3002\u5f53\u63d0\u793a\u6846\u51fa\u73b0\u540e\uff0c\u7528\u6237\u9700\u8981\u8f93\u5165\u67d0\u4e2a\u503c\uff0c\u7136\u540e\u70b9\u51fb\u786e\u8ba4\u6216\u53d6\u6d88\u6309\u94ae\u624d\u80fd\u7ee7\u7eed\u64cd\u4f5c\u3002</p>
+<h4 id="\u53c2\u6570-3"><a href="#\u53c2\u6570-3" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>options {object}</code>\uff1aprompt \u9009\u9879<ul>
+<li><code>message {string}</code>\uff1a\u63d0\u793a\u6846\u5185\u8981\u663e\u793a\u7684\u6587\u5b57\u4fe1\u606f</li>
+<li><code>okTitle {string}</code>\uff1a\u786e\u8ba4\u6309\u94ae\u4e0a\u663e\u793a\u7684\u6587\u5b57\u4fe1\u606f\uff0c\u9ed8\u8ba4\u662f <code>OK</code></li>
+<li><code>cancelTitle {string}</code>\uff1a\u53d6\u6d88\u6309\u94ae\u4e0a\u663e\u793a\u7684\u6587\u5b57\u4fe1\u606f\uff0c\u9ed8\u8ba4\u662f <code>Cancel</code></li>
+</ul>
+</li>
+<li><code>callback {function (ret)}</code>\uff1a\u7528\u6237\u64cd\u4f5c\u5b8c\u6210\u540e\u7684\u56de\u8c03\uff0c\u56de\u8c03\u51fd\u6570\u7684\u53c2\u6570 <code>ret</code> \u683c\u5f0f\u5f62\u5982 <code>{ result: 'OK', data: 'hello world' }</code>\uff0c\u5982\u4e0b<ul>
+<li><code>result {string}</code>\uff1a\u7528\u6237\u6309\u4e0b\u7684\u6309\u94ae\u4e0a\u7684\u6587\u5b57\u4fe1\u606f</li>
+<li><code>data {string}</code>\uff1a\u7528\u6237\u8f93\u5165\u7684\u6587\u5b57\u4fe1\u606f</li>
+</ul>
+</li>
+</ul>
+<h2 id="Example"><a href="#Example" class="headerlink" title="Example"></a>Example</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"showToast"</span>></span>Toast<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"showAlert"</span>></span>Alert<span class="tag"></<span class="name">text</span>></span
></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"showConfirm"</span>></span>Confirm<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"showPrompt"</span>></span>Prompt<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> m
odal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> showToast (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'will show toast'</span>)</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">'This is a toast'</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.3</span></div><div class="line"> })</div><div class="line"> },</div><div class="line"> showAlert (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'will show alert'</span>)</div><div class="line"> modal.alert(
23;</div><div class="line"> <span class="attr">message</span>: <span class="string">'This is a alert'</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.3</span></div><div class="line"> }, <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'alert callback'</span>, value)</div><div class="line"> })</div><div class="line"> },</div><div class="line"> showConfirm (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'will show confirm'</span>)</div><div class="line"> modal.confirm({</div><div class="line"> <span class="attr">message</span>: <span class="string">'Do you confirm ?'</span>,</div><div class="line"> <span class="attr">duration</span>: <span cl
ass="number">0.3</span></div><div class="line"> }, <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'confirm callback'</span>, value)</div><div class="line"> })</div><div class="line"> },</div><div class="line"> showPrompt (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'will show prompt'</span>)</div><div class="line"> modal.prompt({</div><div class="line"> <span class="attr">message</span>: <span class="string">'This is a prompt'</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.3</span></div><div class="line"> }, <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>{</div><div class="line">
<span class="built_in">console</span>.log(<span class="string">'prompt callback'</span>, value)</div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> };</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.button</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">60px</span>;</div><div class="line"> <span cla
ss="attribute">width</span>: <span class="number">450px</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">150px</span>;</div><div class="line"> <span class="attribute">padding-top</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">padding-bottom</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#666666</span>;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#DDDDDD</span>;</div><div class="line"> <span clas
s="attribute">background-color</span>: <span class="number">#F5F5F5</span></div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/modal.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/modules/modal.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/modules/modal.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/modules/navigator.html
----------------------------------------------------------------------
diff --git a/content/cn/references/modules/navigator.html b/content/cn/references/modules/navigator.html
new file mode 100644
index 0000000..d0e7c8b
--- /dev/null
+++ b/content/cn/references/modules/navigator.html
@@ -0,0 +1,1338 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>navigator | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="navigator \u5bfc\u822a\u63a7\u5236v0.6.1+
+\u4f17\u6240\u5468\u77e5\uff0c\u5728\u6d4f\u89c8\u5668\u91cc\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u524d\u8fdb\u6216\u8005\u56de\u9000\u6309\u94ae\u6765\u5207\u6362\u9875\u9762\uff0ciOS/Android \u7684 navigator \u6a21\u5757\u5c31\u662f\u7528\u6765\u5b9e\u73b0\u7c7b\u4f3c\u7684\u6548\u679c\u7684\u3002\u9664\u4e86\u524d\u8fdb\u3001\u56de\u9000\u529f\u80fd\uff0c\u8be5\u6a21\u5757\u8fd8\u5141\u8bb8\u6211\u4eec\u6307\u5b9a\u5728\u5207\u6362\u9875\u9762\u7684\u65f6\u5019\u662f\u5426\u5e94\u7528\u52a8\u753b\u6548\u679c\u3002
+APIpush(options, callback)\u628a\u4e00\u4e2aweex\u9875\u9762URL\u538b\u5165\u5bfc\u822a\u5806\u6808\u4e2d\uff0c\u53ef\u6307\u5b9a\u5728\u9875\u9762\u8df3\u8f6c\u65f6\u662f\u5426\u9700\u8981\u52a8\u753b\uff0c\u4ee5\u53ca\u64cd\u4f5c\u5b8c\u6210\u540e\u9700">
+<meta property="og:type" content="website">
+<meta property="og:title" content="navigator">
+<meta property="og:url" content="https://weex.apache.org/cn/references/modules/navigator.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="navigator \u5bfc\u822a\u63a7\u5236v0.6.1+
+\u4f17\u6240\u5468\u77e5\uff0c\u5728\u6d4f\u89c8\u5668\u91cc\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u524d\u8fdb\u6216\u8005\u56de\u9000\u6309\u94ae\u6765\u5207\u6362\u9875\u9762\uff0ciOS/Android \u7684 navigator \u6a21\u5757\u5c31\u662f\u7528\u6765\u5b9e\u73b0\u7c7b\u4f3c\u7684\u6548\u679c\u7684\u3002\u9664\u4e86\u524d\u8fdb\u3001\u56de\u9000\u529f\u80fd\uff0c\u8be5\u6a21\u5757\u8fd8\u5141\u8bb8\u6211\u4eec\u6307\u5b9a\u5728\u5207\u6362\u9875\u9762\u7684\u65f6\u5019\u662f\u5426\u5e94\u7528\u52a8\u753b\u6548\u679c\u3002
+APIpush(options, callback)\u628a\u4e00\u4e2aweex\u9875\u9762URL\u538b\u5165\u5bfc\u822a\u5806\u6808\u4e2d\uff0c\u53ef\u6307\u5b9a\u5728\u9875\u9762\u8df3\u8f6c\u65f6\u662f\u5426\u9700\u8981\u52a8\u753b\uff0c\u4ee5\u53ca\u64cd\u4f5c\u5b8c\u6210\u540e\u9700">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.906Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="navigator">
+<meta name="twitter:description" content="navigator \u5bfc\u822a\u63a7\u5236v0.6.1+
+\u4f17\u6240\u5468\u77e5\uff0c\u5728\u6d4f\u89c8\u5668\u91cc\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u524d\u8fdb\u6216\u8005\u56de\u9000\u6309\u94ae\u6765\u5207\u6362\u9875\u9762\uff0ciOS/Android \u7684 navigator \u6a21\u5757\u5c31\u662f\u7528\u6765\u5b9e\u73b0\u7c7b\u4f3c\u7684\u6548\u679c\u7684\u3002\u9664\u4e86\u524d\u8fdb\u3001\u56de\u9000\u529f\u80fd\uff0c\u8be5\u6a21\u5757\u8fd8\u5141\u8bb8\u6211\u4eec\u6307\u5b9a\u5728\u5207\u6362\u9875\u9762\u7684\u65f6\u5019\u662f\u5426\u5e94\u7528\u52a8\u753b\u6548\u679c\u3002
+APIpush(options, callback)\u628a\u4e00\u4e2aweex\u9875\u9762URL\u538b\u5165\u5bfc\u822a\u5806\u6808\u4e2d\uff0c\u53ef\u6307\u5b9a\u5728\u9875\u9762\u8df3\u8f6c\u65f6\u662f\u5426\u9700\u8981\u52a8\u753b\uff0c\u4ee5\u53ca\u64cd\u4f5c\u5b8c\u6210\u540e\u9700">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link current ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link current ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ navigator
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.906Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="navigator-\u5bfc\u822a\u63a7\u5236"><a href="#navigator-\u5bfc\u822a\u63a7\u5236" class="headerlink" title="navigator \u5bfc\u822a\u63a7\u5236"></a><code>navigator</code> \u5bfc\u822a\u63a7\u5236</h1><p><span class="weex-version">v0.6.1+</span></p>
+<p>\u4f17\u6240\u5468\u77e5\uff0c\u5728\u6d4f\u89c8\u5668\u91cc\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u524d\u8fdb\u6216\u8005\u56de\u9000\u6309\u94ae\u6765\u5207\u6362\u9875\u9762\uff0ciOS/Android \u7684 <code>navigator</code> \u6a21\u5757\u5c31\u662f\u7528\u6765\u5b9e\u73b0\u7c7b\u4f3c\u7684\u6548\u679c\u7684\u3002\u9664\u4e86\u524d\u8fdb\u3001\u56de\u9000\u529f\u80fd\uff0c\u8be5\u6a21\u5757\u8fd8\u5141\u8bb8\u6211\u4eec\u6307\u5b9a\u5728\u5207\u6362\u9875\u9762\u7684\u65f6\u5019\u662f\u5426\u5e94\u7528\u52a8\u753b\u6548\u679c\u3002</p>
+<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><h3 id="push-options-callback"><a href="#push-options-callback" class="headerlink" title="push(options, callback)"></a><code>push(options, callback)</code></h3><p>\u628a\u4e00\u4e2aweex\u9875\u9762URL\u538b\u5165\u5bfc\u822a\u5806\u6808\u4e2d\uff0c\u53ef\u6307\u5b9a\u5728\u9875\u9762\u8df3\u8f6c\u65f6\u662f\u5426\u9700\u8981\u52a8\u753b\uff0c\u4ee5\u53ca\u64cd\u4f5c\u5b8c\u6210\u540e\u9700\u8981\u6267\u884c\u7684\u56de\u8c03\u51fd\u6570</p>
+<h4 id="\u53c2\u6570"><a href="#\u53c2\u6570" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>options {Object}</code>\uff1a\u9009\u9879\u53c2\u6570<ul>
+<li><code>url {stirng}</code>\uff1a\u8981\u538b\u5165\u7684 Weex \u9875\u9762\u7684 URL</li>
+<li><code>animated {string}</code>\uff1a<code>"true"</code> \u793a\u610f\u4e3a\u9875\u9762\u538b\u5165\u65f6\u9700\u8981\u52a8\u753b\u6548\u679c\uff0c<code>"false"</code> \u5219\u4e0d\u9700\u8981\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>"true"</code></li>
+</ul>
+</li>
+<li><code>callback {Function}</code>\uff1a\u6267\u884c\u5b8c\u8be5\u64cd\u4f5c\u540e\u7684\u56de\u8c03\u51fd\u6570</li>
+</ul>
+<h3 id="pop-options-callback"><a href="#pop-options-callback" class="headerlink" title="pop(options, callback)"></a><code>pop(options, callback)</code></h3><p>\u628a\u4e00\u4e2a Weex \u9875\u9762 URL \u5f39\u51fa\u5bfc\u822a\u5806\u6808\u4e2d\uff0c\u53ef\u6307\u5b9a\u5728\u9875\u9762\u5f39\u51fa\u65f6\u662f\u5426\u9700\u8981\u52a8\u753b\uff0c\u4ee5\u53ca\u64cd\u4f5c\u5b8c\u6210\u540e\u9700\u8981\u6267\u884c\u7684\u56de\u8c03\u51fd\u6570\u3002</p>
+<h4 id="\u53c2\u6570-1"><a href="#\u53c2\u6570-1" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>options {object}</code>\uff1a\u9009\u9879\u53c2\u6570\u5bf9\u8c61<ul>
+<li><code>animated {string}</code>\uff1a<code>"true"</code> \u793a\u610f\u4e3a\u5f39\u51fa\u9875\u9762\u65f6\u9700\u8981\u52a8\u753b\u6548\u679c\uff0c<code>"false"</code> \u5219\u4e0d\u9700\u8981\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>"true"</code></li>
+</ul>
+</li>
+<li><code>callback {function}</code>\uff1a\u6267\u884c\u5b8c\u8be5\u64cd\u4f5c\u540e\u7684\u56de\u8c03\u51fd\u6570</li>
+</ul>
+<p><em>\u6ce8\u610f\u4e8b\u9879\uff1a<code>animated</code> \u4e8c\u7ea7\u53c2\u6570\u76ee\u524d\u4ec5\u652f\u6301\u5b57\u7b26\u4e32\u7684 <code>"true"</code> \u548c <code>"false"</code>\uff0c\u4f20\u5165\u5e03\u5c14\u503c\u7c7b\u578b\u4f1a\u5bfc\u81f4\u7a0b\u5e8f\u5d29\u6e83\uff0c\u672a\u6765\u7248\u672c\u4f1a\u4fee\u590d\u8fd9\u4e2a\u95ee\u9898</em></p>
+<h2 id="Example"><a href="#Example" class="headerlink" title="Example"></a>Example</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"jump"</span>></span>Jump<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="
javascript"></span></div><div class="line"> <span class="keyword">var</span> navigator = weex.requireModule(<span class="string">'navigator'</span>)</div><div class="line"> <span class="keyword">var</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> jump (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'will jump'</span>)</div><div class="line"> navigator.push({</div><div class="line"> <span class="attr">url</span>: <span class="string">'http://dotwe.org/raw/dist/519962541fcf6acd911986357ad9c2ed.js'</span>,</div><div class="line"> <span class="attr">animated</span>: <span class="string">"true"</span></div><div class="line"> }, event =>
{</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'callback: '</span> + event })</div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> };</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.button</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">60p
x</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">450px</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">150px</span>;</div><div class="line"> <span class="attribute">padding-top</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">padding-bottom</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#666666</span>;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#DDDDDD
</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#F5F5F5</span></div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/navigator.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/modules/navigator.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/modules/navigator.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[51/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
Site updated: 2017-02-01 15:00:00
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/14041490
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/14041490
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/14041490
Branch: refs/heads/asf-site
Commit: 14041490d2fa932533eaf2adba631213eb81df6a
Parents: 733a6b2
Author: \u52fe\u4e09\u80a1\u56db <zh...@yahoo.com.cn>
Authored: Wed Feb 1 14:59:29 2017 +0800
Committer: \u52fe\u4e09\u80a1\u56db <zh...@yahoo.com.cn>
Committed: Wed Feb 1 15:10:59 2017 +0800
----------------------------------------------------------------------
content/archives/2016/12/index.html | 209 +
content/archives/2016/index.html | 209 +
content/archives/2017/02/index.html | 209 +
content/archives/2017/index.html | 209 +
content/archives/index.html | 209 +
content/blog/index.html | 210 +
content/cn/blog/index.html | 210 +
content/cn/doc/advanced/extend-to-android.html | 1 +
content/cn/doc/advanced/extend-to-html5.html | 1 +
content/cn/doc/advanced/extend-to-ios.html | 1 +
.../cn/doc/advanced/how-data-binding-works.html | 1 +
content/cn/doc/advanced/how-it-works.html | 1 +
.../cn/doc/advanced/integrate-to-android.html | 1 +
content/cn/doc/advanced/integrate-to-html5.html | 1 +
content/cn/doc/advanced/integrate-to-ios.html | 1 +
content/cn/doc/advanced/main.html | 1 +
content/cn/doc/components/a.html | 1 +
content/cn/doc/components/cell.html | 1 +
content/cn/doc/components/div.html | 1 +
content/cn/doc/components/image.html | 1 +
content/cn/doc/components/indicator.html | 1 +
content/cn/doc/components/input.html | 1 +
content/cn/doc/components/list.html | 1 +
content/cn/doc/components/loading.html | 1 +
content/cn/doc/components/main.html | 1 +
content/cn/doc/components/refresh.html | 1 +
content/cn/doc/components/scroller.html | 1 +
content/cn/doc/components/slider.html | 1 +
content/cn/doc/components/special-element.html | 1 +
content/cn/doc/components/switch.html | 1 +
content/cn/doc/components/text.html | 1 +
content/cn/doc/components/textarea.html | 1 +
content/cn/doc/components/video.html | 1 +
content/cn/doc/components/web.html | 1 +
content/cn/doc/components/wxc-navpage.html | 1 +
content/cn/doc/components/wxc-tabbar.html | 1 +
content/cn/doc/demo/animation.html | 1 +
content/cn/doc/demo/clipboard.html | 1 +
content/cn/doc/demo/hello-world.html | 1 +
content/cn/doc/demo/list.html | 1 +
content/cn/doc/demo/modal.html | 1 +
content/cn/doc/demo/slider.html | 1 +
.../cn/doc/develop-on-your-local-machine.html | 1 +
content/cn/doc/faq.html | 1 +
content/cn/doc/get-started.html | 1 +
content/cn/doc/guide.html | 1 +
.../how-to/customize-a-native-component.html | 1 +
.../cn/doc/how-to/cuszomize-native-apis.html | 1 +
content/cn/doc/how-to/debug-with-devtools.html | 1 +
content/cn/doc/how-to/debug-with-html5.html | 1 +
content/cn/doc/how-to/main.html | 1 +
content/cn/doc/how-to/preview-in-browser.html | 1 +
.../doc/how-to/preview-in-playground-app.html | 1 +
.../cn/doc/how-to/require-3rd-party-libs.html | 1 +
.../how-to/transform-code-into-js-bundle.html | 1 +
content/cn/doc/index.html | 1 +
content/cn/doc/modules/animation.html | 1 +
content/cn/doc/modules/clipboard.html | 1 +
content/cn/doc/modules/dom.html | 1 +
content/cn/doc/modules/globalevent.html | 1 +
content/cn/doc/modules/main.html | 1 +
content/cn/doc/modules/modal.html | 1 +
content/cn/doc/modules/navigator.html | 1 +
content/cn/doc/modules/picker.html | 1 +
content/cn/doc/modules/storage.html | 1 +
content/cn/doc/modules/stream.html | 1 +
content/cn/doc/modules/timer.html | 1 +
content/cn/doc/modules/webview.html | 1 +
content/cn/doc/references/api.html | 1 +
content/cn/doc/references/bootstrap.html | 1 +
content/cn/doc/references/cheatsheet.html | 1 +
content/cn/doc/references/color-names.html | 1 +
content/cn/doc/references/common-attrs.html | 1 +
content/cn/doc/references/common-event.html | 1 +
content/cn/doc/references/common-style.html | 1 +
content/cn/doc/references/component-defs.html | 1 +
content/cn/doc/references/events/appear.html | 1 +
content/cn/doc/references/events/blur.html | 1 +
content/cn/doc/references/events/change.html | 1 +
content/cn/doc/references/events/focus.html | 1 +
content/cn/doc/references/events/input.html | 1 +
content/cn/doc/references/gesture.html | 1 +
content/cn/doc/references/main.html | 1 +
.../doc/references/styles/background-color.html | 1 +
content/cn/doc/references/styles/color.html | 1 +
.../cn/doc/references/styles/font-family.html | 1 +
content/cn/doc/references/styles/font-size.html | 1 +
.../cn/doc/references/styles/font-style.html | 1 +
.../cn/doc/references/styles/font-weight.html | 1 +
.../cn/doc/references/styles/line-height.html | 1 +
content/cn/doc/references/styles/lines.html | 1 +
content/cn/doc/references/styles/opacity.html | 1 +
content/cn/doc/references/styles/position.html | 1 +
.../cn/doc/references/styles/text-align.html | 1 +
.../doc/references/styles/text-decoration.html | 1 +
.../cn/doc/references/styles/text-overflow.html | 1 +
content/cn/doc/references/styles/units.html | 1 +
content/cn/doc/references/text-style.html | 1 +
content/cn/doc/specs/js-bundle-format.html | 1 +
content/cn/doc/specs/js-framework-apis.html | 1 +
content/cn/doc/specs/virtual-dom-apis.html | 1 +
content/cn/doc/syntax/comm.html | 1 +
content/cn/doc/syntax/composed-component.html | 1 +
content/cn/doc/syntax/config-n-data.html | 1 +
content/cn/doc/syntax/data-binding.html | 1 +
content/cn/doc/syntax/display-logic.html | 1 +
content/cn/doc/syntax/events.html | 1 +
content/cn/doc/syntax/id.html | 1 +
content/cn/doc/syntax/main.html | 1 +
content/cn/doc/syntax/path.html | 1 +
content/cn/doc/syntax/render-logic.html | 1 +
content/cn/doc/syntax/style-n-class.html | 1 +
content/cn/doc/tools/cli.html | 1 +
content/cn/doc/tools/devtools-android.html | 1 +
content/cn/doc/tools/devtools-ios.html | 1 +
content/cn/doc/tools/devtools.html | 1 +
content/cn/doc/tools/playground-app.html | 1 +
content/cn/doc/tools/transformer.html | 1 +
content/cn/doc/tutorial.html | 1 +
content/cn/download.html | 206 +
content/cn/faq.html | 288 ++
content/cn/guide/dev-with-weexpack.html | 409 ++
content/cn/guide/images/flow.png | Bin 0 -> 57741 bytes
content/cn/guide/images/tut-cli-qrcode.png | Bin 0 -> 45480 bytes
content/cn/guide/images/tut-first.png | Bin 0 -> 51434 bytes
content/cn/guide/images/tut-second.png | Bin 0 -> 78519 bytes
content/cn/guide/images/tut1.jpg | Bin 0 -> 47442 bytes
content/cn/guide/images/tut2.jpg | Bin 0 -> 52428 bytes
content/cn/guide/images/tut3.png | Bin 0 -> 52198 bytes
content/cn/guide/images/tut4.gif | Bin 0 -> 218245 bytes
content/cn/guide/index.html | 453 +++
content/cn/guide/integrate-to-your-app.html | 496 +++
content/cn/guide/intro/app-architecture.html | 435 ++
content/cn/guide/intro/how-it-works.html | 431 ++
content/cn/guide/intro/index.html | 434 ++
content/cn/guide/intro/page-architecture.html | 427 ++
content/cn/guide/intro/using-vue.html | 458 +++
content/cn/guide/intro/web-dev-experience.html | 432 ++
content/cn/guide/intro/write-once.html | 450 +++
content/cn/hello/index.html | 206 +
content/cn/index.html | 413 ++
content/cn/playground.html | 216 +
content/cn/references/advanced/extend-jsfm.html | 1427 +++++++
.../references/advanced/extend-to-android.html | 1356 +++++++
.../cn/references/advanced/extend-to-html5.html | 1339 ++++++
.../cn/references/advanced/extend-to-ios.html | 1435 +++++++
content/cn/references/advanced/index.html | 1336 ++++++
.../advanced/integrate-devtool-to-android.html | 1458 +++++++
.../advanced/integrate-devtool-to-ios.html | 1395 +++++++
content/cn/references/android-apis.html | 1382 +++++++
content/cn/references/color-names.html | 2105 ++++++++++
content/cn/references/common-event.html | 1370 +++++++
content/cn/references/common-style.html | 1479 +++++++
content/cn/references/components/a.html | 1352 +++++++
content/cn/references/components/cell.html | 1349 +++++++
content/cn/references/components/div.html | 1355 +++++++
content/cn/references/components/image.html | 1376 +++++++
content/cn/references/components/index.html | 1366 +++++++
content/cn/references/components/indicator.html | 1360 +++++++
content/cn/references/components/input.html | 1405 +++++++
content/cn/references/components/list.html | 1394 +++++++
content/cn/references/components/loading.html | 1351 +++++++
content/cn/references/components/refresh.html | 1354 +++++++
content/cn/references/components/scroller.html | 1387 +++++++
content/cn/references/components/slider.html | 1372 +++++++
content/cn/references/components/switch.html | 1376 +++++++
content/cn/references/components/text.html | 1375 +++++++
content/cn/references/components/textarea.html | 1403 +++++++
content/cn/references/components/video.html | 1364 +++++++
content/cn/references/components/web.html | 1374 +++++++
content/cn/references/gesture.html | 1364 +++++++
content/cn/references/html5-apis.html | 1311 ++++++
content/cn/references/images/Artboard.jpg | Bin 0 -> 36223 bytes
content/cn/references/images/coding_weex_1.jpg | Bin 0 -> 56225 bytes
content/cn/references/images/css-boxmodel.png | Bin 0 -> 12581 bytes
.../cn/references/images/css-flexbox-align.jpg | Bin 0 -> 35005 bytes
.../references/images/css-flexbox-justify.svg | 59 +
.../cn/references/images/css-flexbox-sample.png | Bin 0 -> 3210 bytes
content/cn/references/images/div_1.jpg | Bin 0 -> 59561 bytes
content/cn/references/images/div_2.jpg | Bin 0 -> 62574 bytes
content/cn/references/images/div_3.jpg | Bin 0 -> 82345 bytes
content/cn/references/images/div_4.jpg | Bin 0 -> 200642 bytes
content/cn/references/images/image_1.jpg | Bin 0 -> 163705 bytes
content/cn/references/images/image_2.jpg | Bin 0 -> 255560 bytes
content/cn/references/images/list_2.jpg | Bin 0 -> 56635 bytes
content/cn/references/images/list_3.jpg | Bin 0 -> 128082 bytes
content/cn/references/images/list_4.jpg | Bin 0 -> 339799 bytes
content/cn/references/images/nav.jpg | Bin 0 -> 124441 bytes
content/cn/references/images/nav.png | Bin 0 -> 83497 bytes
content/cn/references/images/scroller_1.jpg | Bin 0 -> 344783 bytes
content/cn/references/images/style_1.jpg | Bin 0 -> 59366 bytes
content/cn/references/images/style_2.jpg | Bin 0 -> 59696 bytes
content/cn/references/index.html | 1344 +++++++
content/cn/references/ios-apis.html | 1360 +++++++
content/cn/references/jsfm-apis.html | 1345 +++++++
content/cn/references/migration/difference.html | 1634 ++++++++
content/cn/references/migration/index.html | 1320 ++++++
.../migration/migration-from-weex.html | 1433 +++++++
content/cn/references/modules/animation.html | 1443 +++++++
content/cn/references/modules/clipboard.html | 1350 +++++++
content/cn/references/modules/dom.html | 1341 +++++++
content/cn/references/modules/globalevent.html | 1352 +++++++
content/cn/references/modules/index.html | 1315 ++++++
content/cn/references/modules/modal.html | 1363 +++++++
content/cn/references/modules/navigator.html | 1338 ++++++
content/cn/references/modules/picker.html | 1388 +++++++
content/cn/references/modules/storage.html | 1372 +++++++
content/cn/references/modules/stream.html | 1373 +++++++
content/cn/references/modules/webview.html | 1339 ++++++
content/cn/references/native-dom-api.html | 1474 +++++++
content/cn/references/path.html | 1335 ++++++
content/cn/references/platform-difference.html | 1354 +++++++
content/cn/references/text-style.html | 1362 +++++++
content/cn/references/unit.html | 1330 ++++++
.../cn/references/vue/difference-of-vuex.html | 1349 +++++++
.../cn/references/vue/difference-with-web.html | 1372 +++++++
content/cn/references/vue/index.html | 1320 ++++++
content/cn/references/web-standards.html | 3794 ++++++++++++++++++
content/cn/references/weex-variable.html | 1344 +++++++
.../v-0.10/advanced/create-a-weex-project.html | 483 +++
.../advanced/customize-a-native-component.html | 439 ++
.../v-0.10/advanced/cuszomize-native-apis.html | 385 ++
.../cn/v-0.10/advanced/extend-to-android.html | 406 ++
content/cn/v-0.10/advanced/extend-to-html5.html | 415 ++
content/cn/v-0.10/advanced/extend-to-ios.html | 415 ++
.../v-0.10/advanced/how-data-binding-works.html | 377 ++
content/cn/v-0.10/advanced/images/how-arch.png | Bin 0 -> 62303 bytes
.../cn/v-0.10/advanced/images/how-render.png | Bin 0 -> 42957 bytes
content/cn/v-0.10/advanced/index.html | 410 ++
.../advanced/integrate-devtools-to-android.html | 509 +++
.../advanced/integrate-devtools-to-ios.html | 445 ++
.../v-0.10/advanced/integrate-to-android.html | 422 ++
.../cn/v-0.10/advanced/integrate-to-html5.html | 381 ++
.../cn/v-0.10/advanced/integrate-to-ios.html | 399 ++
content/cn/v-0.10/blog/index.html | 210 +
.../guide/develop-on-your-local-machine.html | 581 +++
.../v-0.10/guide/how-to/debug-with-html5.html | 539 +++
content/cn/v-0.10/guide/how-to/index.html | 634 +++
.../guide/how-to/require-3rd-party-libs.html | 530 +++
.../how-to/transform-code-into-js-bundle.html | 564 +++
content/cn/v-0.10/guide/index.html | 538 +++
content/cn/v-0.10/guide/syntax/comm.html | 533 +++
.../v-0.10/guide/syntax/composed-component.html | 548 +++
.../cn/v-0.10/guide/syntax/config-n-data.html | 539 +++
.../cn/v-0.10/guide/syntax/data-binding.html | 563 +++
.../cn/v-0.10/guide/syntax/display-logic.html | 574 +++
content/cn/v-0.10/guide/syntax/events.html | 540 +++
content/cn/v-0.10/guide/syntax/id.html | 535 +++
content/cn/v-0.10/guide/syntax/index.html | 566 +++
.../cn/v-0.10/guide/syntax/render-logic.html | 542 +++
.../cn/v-0.10/guide/syntax/style-n-class.html | 553 +++
content/cn/v-0.10/index.html | 413 ++
content/cn/v-0.10/references/api.html | 1111 +++++
content/cn/v-0.10/references/cheatsheet.html | 1367 +++++++
content/cn/v-0.10/references/color-names.html | 1861 +++++++++
content/cn/v-0.10/references/common-attrs.html | 1098 +++++
content/cn/v-0.10/references/common-event.html | 1140 ++++++
content/cn/v-0.10/references/common-style.html | 1243 ++++++
.../cn/v-0.10/references/component-defs.html | 1091 +++++
content/cn/v-0.10/references/components/a.html | 1108 +++++
.../cn/v-0.10/references/components/cell.html | 1108 +++++
.../cn/v-0.10/references/components/div.html | 1113 +++++
.../cn/v-0.10/references/components/image.html | 1136 ++++++
.../cn/v-0.10/references/components/index.html | 1122 ++++++
.../v-0.10/references/components/indicator.html | 1116 ++++++
.../cn/v-0.10/references/components/input.html | 1153 ++++++
.../cn/v-0.10/references/components/list.html | 1153 ++++++
.../v-0.10/references/components/loading.html | 1109 +++++
.../v-0.10/references/components/refresh.html | 1113 +++++
.../v-0.10/references/components/scroller.html | 1147 ++++++
.../cn/v-0.10/references/components/slider.html | 1128 ++++++
.../cn/v-0.10/references/components/switch.html | 1132 ++++++
.../cn/v-0.10/references/components/text.html | 1133 ++++++
.../v-0.10/references/components/textarea.html | 1159 ++++++
.../cn/v-0.10/references/components/video.html | 1120 ++++++
.../cn/v-0.10/references/components/web.html | 1130 ++++++
content/cn/v-0.10/references/gesture.html | 1122 ++++++
.../cn/v-0.10/references/images/Artboard.jpg | Bin 0 -> 36223 bytes
.../v-0.10/references/images/coding_weex_1.jpg | Bin 0 -> 56225 bytes
.../v-0.10/references/images/css-boxmodel.png | Bin 0 -> 12581 bytes
.../references/images/css-flexbox-align.jpg | Bin 0 -> 35005 bytes
.../references/images/css-flexbox-justify.svg | 59 +
content/cn/v-0.10/references/images/div_1.jpg | Bin 0 -> 59561 bytes
content/cn/v-0.10/references/images/div_2.jpg | Bin 0 -> 62574 bytes
content/cn/v-0.10/references/images/div_3.jpg | Bin 0 -> 82345 bytes
content/cn/v-0.10/references/images/div_4.jpg | Bin 0 -> 200642 bytes
content/cn/v-0.10/references/images/image_1.jpg | Bin 0 -> 163705 bytes
content/cn/v-0.10/references/images/image_2.jpg | Bin 0 -> 255560 bytes
content/cn/v-0.10/references/images/list_2.jpg | Bin 0 -> 56635 bytes
content/cn/v-0.10/references/images/list_3.jpg | Bin 0 -> 128082 bytes
content/cn/v-0.10/references/images/list_4.jpg | Bin 0 -> 339799 bytes
content/cn/v-0.10/references/images/nav.jpg | Bin 0 -> 124441 bytes
.../cn/v-0.10/references/images/scroller_1.jpg | Bin 0 -> 344783 bytes
content/cn/v-0.10/references/images/style_1.jpg | Bin 0 -> 59366 bytes
content/cn/v-0.10/references/images/style_2.jpg | Bin 0 -> 59696 bytes
content/cn/v-0.10/references/index.html | 1097 +++++
.../cn/v-0.10/references/modules/animation.html | 1214 ++++++
.../cn/v-0.10/references/modules/clipboard.html | 1099 +++++
content/cn/v-0.10/references/modules/dom.html | 1091 +++++
.../v-0.10/references/modules/globalevent.html | 1108 +++++
content/cn/v-0.10/references/modules/index.html | 1071 +++++
content/cn/v-0.10/references/modules/modal.html | 1125 ++++++
.../cn/v-0.10/references/modules/navigator.html | 1096 +++++
.../cn/v-0.10/references/modules/storage.html | 1135 ++++++
.../cn/v-0.10/references/modules/stream.html | 1125 ++++++
.../cn/v-0.10/references/modules/webview.html | 1096 +++++
content/cn/v-0.10/references/replace.html | 232 ++
.../cn/v-0.10/references/special-element.html | 1080 +++++
content/cn/v-0.10/references/specs/index.html | 1175 ++++++
.../references/specs/js-framework-apis.html | 1135 ++++++
.../references/specs/virtual-dom-apis.html | 1088 +++++
content/cn/v-0.10/references/text-style.html | 1111 +++++
content/cn/v-0.10/references/units.html | 1087 +++++
content/cn/v-0.10/references/wxc/index.html | 1104 +++++
.../cn/v-0.10/references/wxc/wxc-navpage.html | 1133 ++++++
.../cn/v-0.10/references/wxc/wxc-tabbar.html | 1125 ++++++
content/cn/v-0.10/tools/devtools-android.html | 375 ++
content/cn/v-0.10/tools/devtools-ios.html | 372 ++
content/cn/v-0.10/tools/devtools.html | 341 ++
content/cn/v-0.10/tools/index.html | 323 ++
content/cn/v-0.10/tools/playground.html | 300 ++
content/cn/v-0.10/tools/transformer.html | 309 ++
content/content.json | 1 +
content/css/animation.css | 196 +
content/css/atom-one-dark.css | 83 +
content/css/blog.css | 26 +
content/css/common.css | 215 +
content/css/example.css | 95 +
content/css/index.css | 492 +++
content/css/media-queries.css | 136 +
content/css/partial/article-title.css | 23 +
content/css/partial/article.css | 50 +
content/css/partial/footer.css | 50 +
content/css/partial/header.css | 86 +
content/css/partial/highlight.css | 87 +
content/css/partial/search-form.css | 64 +
content/css/partial/sidebar.css | 59 +
content/css/partial/summary.css | 35 +
content/css/playground.css | 46 +
content/css/post.css | 54 +
content/css/style.css | 1621 ++++++++
content/css/swiper.min.css | 15 +
content/css/variable.css | 6 +
content/doc/advanced/extend-to-android.html | 1 +
content/doc/advanced/extend-to-html5.html | 1 +
content/doc/advanced/extend-to-ios.html | 1 +
.../doc/advanced/how-data-binding-works.html | 1 +
content/doc/advanced/how-it-works.html | 1 +
content/doc/advanced/integrate-to-android.html | 1 +
content/doc/advanced/integrate-to-html5.html | 1 +
content/doc/advanced/integrate-to-ios.html | 1 +
content/doc/advanced/main.html | 1 +
content/doc/components/a.html | 1 +
content/doc/components/cell.html | 1 +
content/doc/components/div.html | 1 +
content/doc/components/image.html | 1 +
content/doc/components/indicator.html | 1 +
content/doc/components/input.html | 1 +
content/doc/components/list.html | 1 +
content/doc/components/main.html | 1 +
content/doc/components/refresh-loading.html | 1 +
content/doc/components/scroller.html | 1 +
content/doc/components/slider.html | 1 +
content/doc/components/special-element.html | 1 +
content/doc/components/switch.html | 1 +
content/doc/components/text.html | 1 +
content/doc/components/textarea.html | 1 +
content/doc/components/video.html | 1 +
content/doc/components/web.html | 1 +
content/doc/components/wxc-navpage.html | 1 +
content/doc/components/wxc-tabbar.html | 1 +
content/doc/demo/animation.html | 1 +
content/doc/demo/clipboard.html | 1 +
content/doc/demo/hello-world.html | 1 +
content/doc/demo/list.html | 1 +
content/doc/demo/modal.html | 1 +
content/doc/demo/slider.html | 1 +
content/doc/faq.html | 1 +
content/doc/guide.html | 1 +
.../how-to/customize-a-native-component.html | 1 +
content/doc/how-to/cuszomize-native-apis.html | 1 +
content/doc/how-to/debug-with-html5.html | 1 +
content/doc/how-to/main.html | 1 +
content/doc/how-to/preview-in-browser.html | 1 +
.../doc/how-to/preview-in-playground-app.html | 1 +
content/doc/how-to/require-3rd-party-libs.html | 1 +
.../how-to/transform-code-into-js-bundle.html | 1 +
content/doc/index.html | 1 +
content/doc/modules/animation.html | 1 +
content/doc/modules/clipboard.html | 1 +
content/doc/modules/dom.html | 1 +
content/doc/modules/globalevent.html | 1 +
content/doc/modules/main.html | 1 +
content/doc/modules/modal.html | 1 +
content/doc/modules/navigator.html | 1 +
content/doc/modules/picker.html | 1 +
content/doc/modules/storage.html | 1 +
content/doc/modules/stream.html | 1 +
content/doc/modules/timer.html | 1 +
content/doc/modules/webview.html | 1 +
content/doc/references/api.html | 1 +
content/doc/references/bootstrap.html | 1 +
content/doc/references/color-names.html | 1 +
content/doc/references/common-attrs.html | 1 +
content/doc/references/common-event.html | 1 +
content/doc/references/common-style.html | 1 +
content/doc/references/component-defs.html | 1 +
content/doc/references/gesture.html | 1 +
content/doc/references/main.html | 1 +
content/doc/references/text-style.html | 1 +
content/doc/specs/js-bundle-format.html | 1 +
content/doc/specs/js-framework-apis.html | 1 +
content/doc/specs/virtual-dom-apis.html | 1 +
content/doc/syntax/comm.html | 1 +
content/doc/syntax/composed-component.html | 1 +
content/doc/syntax/config-n-data.html | 1 +
content/doc/syntax/data-binding.html | 1 +
content/doc/syntax/display-logic.html | 1 +
content/doc/syntax/events.html | 1 +
content/doc/syntax/id.html | 1 +
content/doc/syntax/main.html | 1 +
content/doc/syntax/path.html | 1 +
content/doc/syntax/render-logic.html | 1 +
content/doc/syntax/style-n-class.html | 1 +
content/doc/tools/cli.html | 1 +
content/doc/tools/devtools-android.html | 1 +
content/doc/tools/devtools-ios.html | 1 +
content/doc/tools/devtools.html | 1 +
content/doc/tools/playground-app.html | 1 +
content/doc/tools/transformer.html | 1 +
content/doc/tutorial.html | 1 +
content/download.html | 206 +
content/en/hello-world/index.html | 209 +
content/examples/a.html | 230 ++
content/examples/animation.html | 230 ++
content/examples/clipboard.html | 230 ++
content/examples/div.html | 230 ++
content/examples/dom-rect.html | 230 ++
content/examples/dom-scroll.html | 230 ++
content/examples/image.html | 230 ++
content/examples/indicator.html | 230 ++
content/examples/input.html | 230 ++
content/examples/list.html | 230 ++
content/examples/modal.html | 230 ++
content/examples/navigator.html | 230 ++
content/examples/refresh.html | 230 ++
content/examples/scroller.html | 230 ++
content/examples/slider.html | 230 ++
content/examples/storage.html | 230 ++
content/examples/stream.html | 231 ++
content/examples/switch.html | 230 ++
content/examples/text.html | 231 ++
content/examples/textarea.html | 231 ++
content/examples/video.html | 230 ++
content/examples/web.html | 230 ++
content/faq.html | 277 ++
content/guide/dev-with-weexpack.html | 409 ++
content/guide/images/flow.png | Bin 0 -> 57741 bytes
content/guide/images/tut-cli-qrcode.png | Bin 0 -> 45480 bytes
content/guide/images/tut-first.png | Bin 0 -> 51434 bytes
content/guide/images/tut-second.png | Bin 0 -> 78519 bytes
content/guide/images/tut1.jpg | Bin 0 -> 47442 bytes
content/guide/images/tut2.jpg | Bin 0 -> 52428 bytes
content/guide/images/tut3.png | Bin 0 -> 52198 bytes
content/guide/images/tut4.gif | Bin 0 -> 218245 bytes
content/guide/index.html | 409 ++
content/guide/integrate-to-your-app.html | 409 ++
content/guide/intro/app-architecture.html | 409 ++
content/guide/intro/how-it-works.html | 409 ++
content/guide/intro/index.html | 434 ++
content/guide/intro/page-architecture.html | 409 ++
content/guide/intro/using-vue.html | 409 ++
content/guide/intro/web-dev-experience.html | 409 ++
content/guide/intro/write-once.html | 409 ++
content/images/ali-open-source.png | Bin 0 -> 2193 bytes
content/images/alibaba.png | Bin 0 -> 2107 bytes
content/images/aliyun.png | Bin 0 -> 1292 bytes
content/images/android.png | Bin 0 -> 5973 bytes
content/images/avatar.png | Bin 0 -> 32736 bytes
content/images/cainiao.png | Bin 0 -> 3353 bytes
content/images/ding.png | Bin 0 -> 5929 bytes
content/images/extendable.svg | 51 +
content/images/feature.png | Bin 0 -> 1090905 bytes
content/images/feizhu.jpg | Bin 0 -> 5988 bytes
content/images/flow.png | Bin 0 -> 14440 bytes
content/images/galaxy_1.svg | 53 +
content/images/galaxy_2.svg | 53 +
content/images/ios.png | Bin 0 -> 6272 bytes
content/images/level1.png | Bin 0 -> 14951 bytes
content/images/level2.png | Bin 0 -> 101449 bytes
content/images/level3.png | Bin 0 -> 101212 bytes
content/images/level4.png | Bin 0 -> 339831 bytes
content/images/lightweight.svg | 31 +
content/images/logo.png | Bin 0 -> 5398 bytes
content/images/logo.svg | 29 +
content/images/performance.svg | 29 +
content/images/playground.png | Bin 0 -> 12659 bytes
content/images/qr.png | Bin 0 -> 1801 bytes
content/images/slide1.png | Bin 0 -> 226303 bytes
content/images/taobao.png | Bin 0 -> 3074 bytes
content/images/tmall.png | Bin 0 -> 8562 bytes
content/images/vue-logo.png | Bin 0 -> 5346 bytes
content/images/vue.png | Bin 0 -> 16582 bytes
content/images/web.png | Bin 0 -> 9297 bytes
content/images/xiami.png | Bin 0 -> 2615 bytes
content/images/youku.png | Bin 0 -> 2178 bytes
content/index.html | 412 ++
content/js/common.js | 522 +++
content/js/example.js | 37 +
content/js/examples/a.web.js | 528 +++
content/js/examples/a.weex.js | 198 +
content/js/examples/animation.web.js | 569 +++
content/js/examples/animation.weex.js | 225 ++
content/js/examples/clipboard.web.js | 583 +++
content/js/examples/clipboard.weex.js | 249 ++
content/js/examples/div.web.js | 523 +++
content/js/examples/div.weex.js | 183 +
content/js/examples/dom-rect.web.js | 589 +++
content/js/examples/dom-rect.weex.js | 254 ++
content/js/examples/dom-scroll.web.js | 598 +++
content/js/examples/dom-scroll.weex.js | 288 ++
content/js/examples/image.web.js | 542 +++
content/js/examples/image.weex.js | 225 ++
content/js/examples/indicator.web.js | 618 +++
content/js/examples/indicator.weex.js | 307 ++
content/js/examples/input.web.js | 586 +++
content/js/examples/input.weex.js | 251 ++
content/js/examples/list.web.js | 584 +++
content/js/examples/list.weex.js | 252 ++
content/js/examples/modal.web.js | 604 +++
content/js/examples/modal.weex.js | 272 ++
content/js/examples/navigator.web.js | 562 +++
content/js/examples/navigator.weex.js | 230 ++
content/js/examples/refresh.web.js | 594 +++
content/js/examples/refresh.weex.js | 267 ++
content/js/examples/scroller.web.js | 598 +++
content/js/examples/scroller.weex.js | 288 ++
content/js/examples/slider.web.js | 587 +++
content/js/examples/slider.weex.js | 255 ++
content/js/examples/storage.web.js | 634 +++
content/js/examples/storage.weex.js | 317 ++
content/js/examples/stream.web.js | 590 +++
content/js/examples/stream.weex.js | 259 ++
content/js/examples/switch.web.js | 605 +++
content/js/examples/switch.weex.js | 280 ++
content/js/examples/text.web.js | 535 +++
content/js/examples/text.weex.js | 208 +
content/js/examples/textarea.web.js | 582 +++
content/js/examples/textarea.weex.js | 247 ++
content/js/examples/video.web.js | 593 +++
content/js/examples/video.weex.js | 254 ++
content/js/examples/web.web.js | 923 +++++
content/js/examples/web.weex.js | 600 +++
content/js/highlight.pack.js | 2 +
content/js/mobile-detect.js | 3 +
content/js/qrcode.min.js | 1 +
content/js/reqwest.js | 7 +
content/js/swiper.min.js | 18 +
content/js/velocity.js | 5 +
content/playground.html | 216 +
content/references/advanced/extend-jsfm.html | 1273 ++++++
.../references/advanced/extend-to-android.html | 1307 ++++++
.../references/advanced/extend-to-html5.html | 1273 ++++++
content/references/advanced/extend-to-ios.html | 1369 +++++++
content/references/advanced/index.html | 1298 ++++++
.../advanced/integrate-devtool-to-android.html | 1273 ++++++
.../advanced/integrate-devtool-to-ios.html | 1273 ++++++
content/references/android-apis.html | 1273 ++++++
content/references/color-names.html | 2058 ++++++++++
content/references/common-event.html | 1305 ++++++
content/references/common-style.html | 1402 +++++++
content/references/components/a.html | 1285 ++++++
content/references/components/cell.html | 1292 ++++++
content/references/components/div.html | 1293 ++++++
content/references/components/image.html | 1302 ++++++
content/references/components/index.html | 1328 ++++++
content/references/components/indicator.html | 1301 ++++++
content/references/components/input.html | 1335 ++++++
content/references/components/list.html | 1316 ++++++
content/references/components/refresh.html | 1319 ++++++
content/references/components/scroller.html | 1307 ++++++
content/references/components/slider.html | 1300 ++++++
content/references/components/switch.html | 1309 ++++++
content/references/components/text.html | 1308 ++++++
content/references/components/textarea.html | 1329 ++++++
content/references/components/video.html | 1316 ++++++
content/references/components/web.html | 1291 ++++++
content/references/gesture.html | 1325 ++++++
content/references/html5-apis.html | 1273 ++++++
content/references/images/css-boxmodel.png | Bin 0 -> 12581 bytes
content/references/images/css-flexbox-align.jpg | Bin 0 -> 35005 bytes
.../references/images/css-flexbox-justify.svg | 59 +
.../references/images/css-flexbox-sample.png | Bin 0 -> 3210 bytes
content/references/images/nav.png | Bin 0 -> 83497 bytes
content/references/index.html | 1306 ++++++
content/references/ios-apis.html | 1273 ++++++
content/references/jsfm-apis.html | 1307 ++++++
content/references/migration/difference.html | 1273 ++++++
content/references/migration/index.html | 1282 ++++++
.../migration/migration-from-weex.html | 1273 ++++++
content/references/modules/animation.html | 1400 +++++++
content/references/modules/clipboard.html | 1291 ++++++
content/references/modules/dom.html | 1291 ++++++
content/references/modules/globalevent.html | 1299 ++++++
content/references/modules/index.html | 1276 ++++++
content/references/modules/modal.html | 1326 ++++++
content/references/modules/navigator.html | 1300 ++++++
content/references/modules/picker.html | 1337 ++++++
content/references/modules/storage.html | 1307 ++++++
content/references/modules/stream.html | 1337 ++++++
content/references/modules/webview.html | 1299 ++++++
content/references/native-dom-api.html | 1273 ++++++
content/references/path.html | 1297 ++++++
content/references/text-style.html | 1308 ++++++
content/references/unit.html | 1273 ++++++
content/references/vue/difference-of-vuex.html | 1273 ++++++
content/references/vue/difference-with-web.html | 1273 ++++++
content/references/vue/index.html | 1282 ++++++
content/references/web-standards.html | 3756 +++++++++++++++++
content/references/weex-variable.html | 1273 ++++++
content/v-0.10/advanced/extend-to-android.html | 345 ++
content/v-0.10/advanced/extend-to-html5.html | 362 ++
content/v-0.10/advanced/extend-to-ios.html | 408 ++
.../v-0.10/advanced/how-data-binding-works.html | 321 ++
content/v-0.10/advanced/images/how-arch.png | Bin 0 -> 62303 bytes
content/v-0.10/advanced/images/how-render.png | Bin 0 -> 42957 bytes
content/v-0.10/advanced/index.html | 362 ++
.../v-0.10/advanced/integrate-to-android.html | 364 ++
content/v-0.10/advanced/integrate-to-html5.html | 331 ++
content/v-0.10/advanced/integrate-to-ios.html | 338 ++
.../how-to/customize-a-native-component.html | 563 +++
.../guide/how-to/cuszomize-native-apis.html | 565 +++
.../v-0.10/guide/how-to/debug-with-html5.html | 567 +++
content/v-0.10/guide/how-to/index.html | 560 +++
.../guide/how-to/preview-in-playground-app.html | 575 +++
.../guide/how-to/require-3rd-party-libs.html | 560 +++
.../how-to/transform-code-into-js-bundle.html | 591 +++
content/v-0.10/guide/images/tut-cli-qrcode.png | Bin 0 -> 45480 bytes
content/v-0.10/guide/images/tut-first.png | Bin 0 -> 51434 bytes
content/v-0.10/guide/images/tut-second.png | Bin 0 -> 78519 bytes
content/v-0.10/guide/images/tut1.jpg | Bin 0 -> 47442 bytes
content/v-0.10/guide/images/tut2.jpg | Bin 0 -> 52428 bytes
content/v-0.10/guide/images/tut3.png | Bin 0 -> 52198 bytes
content/v-0.10/guide/images/tut4.gif | Bin 0 -> 218245 bytes
content/v-0.10/guide/index.html | 596 +++
content/v-0.10/guide/syntax/comm.html | 562 +++
.../v-0.10/guide/syntax/composed-component.html | 571 +++
content/v-0.10/guide/syntax/config-n-data.html | 569 +++
content/v-0.10/guide/syntax/data-binding.html | 591 +++
content/v-0.10/guide/syntax/display-logic.html | 580 +++
content/v-0.10/guide/syntax/events.html | 562 +++
content/v-0.10/guide/syntax/id.html | 560 +++
content/v-0.10/guide/syntax/index.html | 590 +++
content/v-0.10/guide/syntax/render-logic.html | 557 +++
content/v-0.10/guide/syntax/style-n-class.html | 582 +++
content/v-0.10/references/api.html | 1068 +++++
content/v-0.10/references/cheatsheet.html | 493 +++
content/v-0.10/references/color-names.html | 1804 +++++++++
content/v-0.10/references/common-attrs.html | 1048 +++++
content/v-0.10/references/common-event.html | 1093 +++++
content/v-0.10/references/common-style.html | 1148 ++++++
content/v-0.10/references/component-defs.html | 1040 +++++
content/v-0.10/references/components/a.html | 1032 +++++
content/v-0.10/references/components/cell.html | 1038 +++++
content/v-0.10/references/components/div.html | 1038 +++++
content/v-0.10/references/components/image.html | 1047 +++++
content/v-0.10/references/components/index.html | 1074 +++++
.../v-0.10/references/components/indicator.html | 1046 +++++
content/v-0.10/references/components/input.html | 1074 +++++
content/v-0.10/references/components/list.html | 1067 +++++
.../references/components/refresh-loading.html | 1073 +++++
.../v-0.10/references/components/scroller.html | 1057 +++++
.../v-0.10/references/components/slider.html | 1045 +++++
.../v-0.10/references/components/switch.html | 1056 +++++
content/v-0.10/references/components/text.html | 1054 +++++
.../v-0.10/references/components/textarea.html | 1074 +++++
content/v-0.10/references/components/video.html | 1054 +++++
content/v-0.10/references/components/web.html | 1037 +++++
.../references/components/wxc-navpage.html | 1050 +++++
.../references/components/wxc-tabbar.html | 1052 +++++
content/v-0.10/references/gesture.html | 1074 +++++
.../v-0.10/references/images/css-boxmodel.png | Bin 0 -> 12581 bytes
.../references/images/css-flexbox-align.jpg | Bin 0 -> 35005 bytes
.../references/images/css-flexbox-justify.svg | 59 +
.../references/images/css-flexbox-sample.png | Bin 0 -> 3210 bytes
content/v-0.10/references/images/nav.png | Bin 0 -> 83497 bytes
content/v-0.10/references/index.html | 1040 +++++
.../v-0.10/references/modules/animation.html | 1160 ++++++
.../v-0.10/references/modules/clipboard.html | 1038 +++++
content/v-0.10/references/modules/dom.html | 1071 +++++
.../v-0.10/references/modules/globalevent.html | 1045 +++++
content/v-0.10/references/modules/index.html | 1022 +++++
content/v-0.10/references/modules/modal.html | 1047 +++++
.../v-0.10/references/modules/navigator.html | 1129 ++++++
content/v-0.10/references/modules/storage.html | 1055 +++++
content/v-0.10/references/modules/stream.html | 1079 +++++
content/v-0.10/references/modules/timer.html | 1041 +++++
content/v-0.10/references/modules/webview.html | 1045 +++++
content/v-0.10/references/special-element.html | 1028 +++++
content/v-0.10/references/specs/index.html | 1127 ++++++
.../references/specs/js-bundle-format.html | 1127 ++++++
.../references/specs/js-framework-apis.html | 1091 +++++
.../references/specs/virtual-dom-apis.html | 1043 +++++
content/v-0.10/references/text-style.html | 1048 +++++
content/v-0.10/tools/devtools-android.html | 375 ++
content/v-0.10/tools/devtools-ios.html | 366 ++
content/v-0.10/tools/devtools.html | 334 ++
content/v-0.10/tools/index.html | 323 ++
content/v-0.10/tools/playground.html | 299 ++
content/v-0.10/tools/transformer.html | 309 ++
710 files changed, 328660 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/archives/2016/12/index.html
----------------------------------------------------------------------
diff --git a/content/archives/2016/12/index.html b/content/archives/2016/12/index.html
new file mode 100644
index 0000000..94a234d
--- /dev/null
+++ b/content/archives/2016/12/index.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Archives: 2016/12 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="website">
+<meta property="og:title" content="Weex">
+<meta property="og:url" content="https://weex.apache.org/archives/2016/12/index.html">
+<meta property="og:site_name" content="Weex">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="archives/2016/12/index" class="lang-en">
+
+ <script>
+ window.PAGE_TYPE = "archives/2016/12/index";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/guide">Guide</a></li>
+ <li><a href="/references">References</a></li>
+ <li><a href="/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">Download</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/guide">
+ Guide
+ </a>
+ </li>
+ <li>
+ <a class="" href="/references">
+ References
+ </a>
+ </li>
+ <li>
+ <a href="/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>Download</p>
+ <ul class="subnav">
+ <li>
+ <a href="/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="blog-wrapper">
+ <div class="archives">
+
+
+ <article class="blog-article blog-type-post">
+ <div class="blog-article-inner">
+ <header class="article-header">
+
+
+ <h1 itemprop="name">
+ <a class="article-title" href="/en/hello-world/">Hello World</a>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.798Z">Updated time: 01/02/2017</time>
+</header>
+
+ </div>
+</article>
+
+
+
+</div>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/archives/2016/12/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/archives/2016/12/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/archives/2016/index.html
----------------------------------------------------------------------
diff --git a/content/archives/2016/index.html b/content/archives/2016/index.html
new file mode 100644
index 0000000..f2efce3
--- /dev/null
+++ b/content/archives/2016/index.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Archives: 2016 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="website">
+<meta property="og:title" content="Weex">
+<meta property="og:url" content="https://weex.apache.org/archives/2016/index.html">
+<meta property="og:site_name" content="Weex">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="archives/2016/index" class="lang-en">
+
+ <script>
+ window.PAGE_TYPE = "archives/2016/index";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/guide">Guide</a></li>
+ <li><a href="/references">References</a></li>
+ <li><a href="/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">Download</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/guide">
+ Guide
+ </a>
+ </li>
+ <li>
+ <a class="" href="/references">
+ References
+ </a>
+ </li>
+ <li>
+ <a href="/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>Download</p>
+ <ul class="subnav">
+ <li>
+ <a href="/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="blog-wrapper">
+ <div class="archives">
+
+
+ <article class="blog-article blog-type-post">
+ <div class="blog-article-inner">
+ <header class="article-header">
+
+
+ <h1 itemprop="name">
+ <a class="article-title" href="/en/hello-world/">Hello World</a>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.798Z">Updated time: 01/02/2017</time>
+</header>
+
+ </div>
+</article>
+
+
+
+</div>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/archives/2016/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/archives/2016/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/archives/2017/02/index.html
----------------------------------------------------------------------
diff --git a/content/archives/2017/02/index.html b/content/archives/2017/02/index.html
new file mode 100644
index 0000000..d3f2c54
--- /dev/null
+++ b/content/archives/2017/02/index.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Archives: 2017/2 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="website">
+<meta property="og:title" content="Weex">
+<meta property="og:url" content="https://weex.apache.org/archives/2017/02/index.html">
+<meta property="og:site_name" content="Weex">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="archives/2017/02/index" class="lang-en">
+
+ <script>
+ window.PAGE_TYPE = "archives/2017/02/index";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/guide">Guide</a></li>
+ <li><a href="/references">References</a></li>
+ <li><a href="/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">Download</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/guide">
+ Guide
+ </a>
+ </li>
+ <li>
+ <a class="" href="/references">
+ References
+ </a>
+ </li>
+ <li>
+ <a href="/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>Download</p>
+ <ul class="subnav">
+ <li>
+ <a href="/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="blog-wrapper">
+ <div class="archives">
+
+
+ <article class="blog-article blog-type-post">
+ <div class="blog-article-inner">
+ <header class="article-header">
+
+
+ <h1 itemprop="name">
+ <a class="article-title" href="/en/hello-world/">Hello World</a>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.798Z">Updated time: 01/02/2017</time>
+</header>
+
+ </div>
+</article>
+
+
+
+</div>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/archives/2017/02/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/archives/2017/02/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/archives/2017/index.html
----------------------------------------------------------------------
diff --git a/content/archives/2017/index.html b/content/archives/2017/index.html
new file mode 100644
index 0000000..593f7d0
--- /dev/null
+++ b/content/archives/2017/index.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Archives: 2017 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="website">
+<meta property="og:title" content="Weex">
+<meta property="og:url" content="https://weex.apache.org/archives/2017/index.html">
+<meta property="og:site_name" content="Weex">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="archives/2017/index" class="lang-en">
+
+ <script>
+ window.PAGE_TYPE = "archives/2017/index";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/guide">Guide</a></li>
+ <li><a href="/references">References</a></li>
+ <li><a href="/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">Download</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/guide">
+ Guide
+ </a>
+ </li>
+ <li>
+ <a class="" href="/references">
+ References
+ </a>
+ </li>
+ <li>
+ <a href="/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>Download</p>
+ <ul class="subnav">
+ <li>
+ <a href="/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="blog-wrapper">
+ <div class="archives">
+
+
+ <article class="blog-article blog-type-post">
+ <div class="blog-article-inner">
+ <header class="article-header">
+
+
+ <h1 itemprop="name">
+ <a class="article-title" href="/en/hello-world/">Hello World</a>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.798Z">Updated time: 01/02/2017</time>
+</header>
+
+ </div>
+</article>
+
+
+
+</div>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/archives/2017/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/archives/2017/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/archives/index.html
----------------------------------------------------------------------
diff --git a/content/archives/index.html b/content/archives/index.html
new file mode 100644
index 0000000..dfbe7f0
--- /dev/null
+++ b/content/archives/index.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Archives | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="website">
+<meta property="og:title" content="Weex">
+<meta property="og:url" content="https://weex.apache.org/archives/index.html">
+<meta property="og:site_name" content="Weex">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="archives/index" class="lang-en">
+
+ <script>
+ window.PAGE_TYPE = "archives/index";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/guide">Guide</a></li>
+ <li><a href="/references">References</a></li>
+ <li><a href="/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">Download</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/guide">
+ Guide
+ </a>
+ </li>
+ <li>
+ <a class="" href="/references">
+ References
+ </a>
+ </li>
+ <li>
+ <a href="/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>Download</p>
+ <ul class="subnav">
+ <li>
+ <a href="/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="blog-wrapper">
+ <div class="archives">
+
+
+ <article class="blog-article blog-type-post">
+ <div class="blog-article-inner">
+ <header class="article-header">
+
+
+ <h1 itemprop="name">
+ <a class="article-title" href="/en/hello-world/">Hello World</a>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.798Z">Updated time: 01/02/2017</time>
+</header>
+
+ </div>
+</article>
+
+
+
+</div>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/archives/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/archives/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/blog/index.html
----------------------------------------------------------------------
diff --git a/content/blog/index.html b/content/blog/index.html
new file mode 100644
index 0000000..d1c1095
--- /dev/null
+++ b/content/blog/index.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="website">
+<meta property="og:title" content="Weex">
+<meta property="og:url" content="https://weex.apache.org/blog/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.799Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="blog" class="lang-en">
+
+ <script>
+ window.PAGE_TYPE = "blog";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/guide">Guide</a></li>
+ <li><a href="/references">References</a></li>
+ <li><a href="/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">Download</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/guide">
+ Guide
+ </a>
+ </li>
+ <li>
+ <a class="" href="/references">
+ References
+ </a>
+ </li>
+ <li>
+ <a href="/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>Download</p>
+ <ul class="subnav">
+ <li>
+ <a href="/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="blog-wrapper wrapper">
+ <div class="archives">
+
+
+ <article class="blog-article blog-type-post">
+ <div class="blog-article-inner">
+ <header class="article-header">
+
+
+ <h1 itemprop="name">
+ <a class="article-title" href="/en/hello-world/">Hello World</a>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.798Z">Updated time: 01/02/2017</time>
+</header>
+
+ </div>
+</article>
+
+
+
+</div>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/blog/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/blog/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[27/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/migration/difference.html
----------------------------------------------------------------------
diff --git a/content/cn/references/migration/difference.html b/content/cn/references/migration/difference.html
new file mode 100644
index 0000000..42e01a1
--- /dev/null
+++ b/content/cn/references/migration/difference.html
@@ -0,0 +1,1634 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02Overview
+
+
+
+Weex
+Vue
+
+
+
+
+\u751f\u547d\u5468\u671f
+ready: function() {}
+mounted: function() {}
+
+
+\u6761\u4ef6\u6307\u4ee4
+if=&quot;{{!foo}}&quot;
+v-if=&quot;!foo&quot;
+
+
+\u5faa\u73af\u6307\u4ee4
+repeat=&quot;{{item in list}}&quot;
+v-for=&quo">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02">
+<meta property="og:url" content="https://weex.apache.org/cn/references/migration/difference.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02Overview
+
+
+
+Weex
+Vue
+
+
+
+
+\u751f\u547d\u5468\u671f
+ready: function() {}
+mounted: function() {}
+
+
+\u6761\u4ef6\u6307\u4ee4
+if=&quot;{{!foo}}&quot;
+v-if=&quot;!foo&quot;
+
+
+\u5faa\u73af\u6307\u4ee4
+repeat=&quot;{{item in list}}&quot;
+v-for=&quo">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.898Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02">
+<meta name="twitter:description" content="Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02Overview
+
+
+
+Weex
+Vue
+
+
+
+
+\u751f\u547d\u5468\u671f
+ready: function() {}
+mounted: function() {}
+
+
+\u6761\u4ef6\u6307\u4ee4
+if=&quot;{{!foo}}&quot;
+v-if=&quot;!foo&quot;
+
+
+\u5faa\u73af\u6307\u4ee4
+repeat=&quot;{{item in list}}&quot;
+v-for=&quo">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link current ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link current ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.898Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Weex-\u548c-Vue-2-x-\u7684\u8bed\u6cd5\u5dee\u5f02"><a href="#Weex-\u548c-Vue-2-x-\u7684\u8bed\u6cd5\u5dee\u5f02" class="headerlink" title="Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02"></a>Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</h1><h2 id="Overview"><a href="#Overview" class="headerlink" title="Overview"></a>Overview</h2><table>
+<thead>
+<tr>
+<th></th>
+<th>Weex</th>
+<th>Vue</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>\u751f\u547d\u5468\u671f</td>
+<td><code>ready: function() {}</code></td>
+<td><code>mounted: function() {}</code></td>
+</tr>
+<tr>
+<td>\u6761\u4ef6\u6307\u4ee4</td>
+<td><code>if="{{!foo}}"</code></td>
+<td><code>v-if="!foo"</code></td>
+</tr>
+<tr>
+<td>\u5faa\u73af\u6307\u4ee4</td>
+<td><code>repeat="{{item in list}}"</code></td>
+<td><code>v-for="item in list"</code></td>
+</tr>
+<tr>
+<td>\u6837\u5f0f\u7c7b\u540d</td>
+<td><code>class="btn btn-{{type}}"</code></td>
+<td><code>:class="['btn', 'btn-' + type]"</code></td>
+</tr>
+<tr>
+<td>\u5185\u8054\u6837\u5f0f</td>
+<td><code>style="color:{{textColor}}"</code></td>
+<td><code>:style="{ color: textColor }"</code></td>
+</tr>
+<tr>
+<td>\u4e8b\u4ef6\u7ed1\u5b9a</td>
+<td><code>onclick="handler"</code></td>
+<td><code>@click="handler"</code></td>
+</tr>
+<tr>
+<td>\u539f\u751f\u4e8b\u4ef6</td>
+<td><code>onclick="xxx"</code></td>
+<td><code>@click.native="xxx"</code></td>
+</tr>
+<tr>
+<td>\u6570\u636e\u7ed1\u5b9a</td>
+<td><code>src="{{rightItemSrc}}"</code></td>
+<td><code>:src="rightItemSrc"</code></td>
+</tr>
+<tr>
+<td>\u5185\u5bb9/\u69fd</td>
+<td><code><content></content></code></td>
+<td><code><slot></slot></code></td>
+</tr>
+<tr>
+<td>\u6570\u636e\u521d\u59cb\u5316</td>
+<td><code>data: { value: 'x' }</code></td>
+<td><code>data: function() { return { value: 'x' } }</code></td>
+</tr>
+<tr>
+<td>\u6807\u7b7e ID</td>
+<td><code>id="xxx"</code></td>
+<td><code>ref="xxx"</code></td>
+</tr>
+<tr>
+<td>\u83b7\u53d6\u8282\u70b9</td>
+<td><code>this.$el('xxx')</code></td>
+<td><code>this.$refs.xxx</code></td>
+</tr>
+</tbody>
+</table>
+<h2 id="Reference"><a href="#Reference" class="headerlink" title="Reference"></a>Reference</h2><p>See the source code of <code>weex-vue-migration</code> for more details:</p>
+<ul>
+<li><a href="https://github.com/songsiqi/weex-vue-migration/blob/master/src/template-rewriter/rewriter.js" target="_blank" rel="external">template-rewriter</a></li>
+<li><a href="https://github.com/songsiqi/weex-vue-migration/blob/master/src/script-rewriter/rewriter.js" target="_blank" rel="external">script-rewriter</a></li>
+</ul>
+<h2 id="LifeCycle-Hooks-\u751f\u547d\u5468\u671f\u94a9\u5b50"><a href="#LifeCycle-Hooks-\u751f\u547d\u5468\u671f\u94a9\u5b50" class="headerlink" title="LifeCycle Hooks \u751f\u547d\u5468\u671f\u94a9\u5b50"></a>LifeCycle Hooks \u751f\u547d\u5468\u671f\u94a9\u5b50</h2><table>
+<thead>
+<tr>
+<th>weex</th>
+<th>vue</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>init</td>
+<td>beforeCreate</td>
+<td>\u7ec4\u4ef6\u5b9e\u4f8b\u521a\u521a\u88ab\u521b\u5efa\uff0c\u7ec4\u4ef6\u5c5e\u6027\u5982data\u8ba1\u7b97\u4e4b\u524d</td>
+</tr>
+<tr>
+<td>created</td>
+<td>created</td>
+<td>\u7ec4\u4ef6\u5b9e\u4f8b\u521b\u5efa\u5b8c\u6210\uff0c\u5c5e\u6027\u5df2\u7ed1\u5b9a\uff0c\u4f46DOM\u8fd8\u672a\u751f\u6210</td>
+</tr>
+<tr>
+<td></td>
+<td>beforeMount</td>
+<td>\u6a21\u677f\u7f16\u8bd1/\u6302\u8f7d\u4e4b\u524d</td>
+</tr>
+<tr>
+<td>ready</td>
+<td>mounted</td>
+<td>\u6a21\u677f\u7f16\u8bd1/\u6302\u8f7d\u4e4b\u540e</td>
+</tr>
+<tr>
+<td></td>
+<td>beforeUpdate</td>
+<td>\u7ec4\u4ef6\u66f4\u65b0\u4e4b\u524d</td>
+</tr>
+<tr>
+<td></td>
+<td>updated</td>
+<td>\u7ec4\u4ef6\u66f4\u65b0\u4e4b\u540e</td>
+</tr>
+<tr>
+<td></td>
+<td>activated</td>
+<td>for<code>keep-alive</code>, \u7ec4\u4ef6\u88ab\u6fc0\u6d3b\u65f6\u8c03\u7528</td>
+</tr>
+<tr>
+<td></td>
+<td>deactivated</td>
+<td>for<code>keep-alive</code>, \u7ec4\u4ef6\u88ab\u79fb\u9664\u65f6\u8c03\u7528</td>
+</tr>
+<tr>
+<td></td>
+<td>beforeDestroy</td>
+<td>\u7ec4\u4ef6\u88ab\u9500\u6bc1\u524d\u8c03\u7528</td>
+</tr>
+<tr>
+<td>destroyed</td>
+<td>destroyed</td>
+<td>\u7ec4\u4ef6\u88ab\u9500\u6bc1\u540e\u8c03\u7528</td>
+</tr>
+</tbody>
+</table>
+<h1 id="Data-Binding-\u6570\u636e\u7ed1\u5b9a"><a href="#Data-Binding-\u6570\u636e\u7ed1\u5b9a" class="headerlink" title="Data Binding \u6570\u636e\u7ed1\u5b9a"></a>Data Binding \u6570\u636e\u7ed1\u5b9a</h1><p>\u5728weex\u4e2d\uff0c\u4f7f\u7528{{\u2026}}\u5728<code><template></code>\u4e2d\u7ed1\u5b9a\u5728<code><script></code>\u91cc\u5b9a\u4e49\u7684\u6570\u636e\uff1b\u5728vue\u4e2d\uff0c\u9700\u8981\u5728\u8981\u7ed1\u5b9a\u7684\u5c5e\u6027\u524d\u52a0 <code>:</code> \u3002\u5982\u4ee5\u4e0b\u793a\u4f8b\u3002</p>
+<ul>
+<li><p>\u7c7b\u540d</p>
+<ul>
+<li>weex</li>
+</ul>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"btn btn-{{type}}"</span>></span><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+<ul>
+<li>vue</li>
+</ul>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"['btn', 'btn-' + type]"</span>></span><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+</li>
+<li><p>\u6837\u5f0f\u7ed1\u5b9a</p>
+<ul>
+<li><p>weex</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"color:{{textColor}}"</span>></span><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+</li>
+<li><p>vue</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">:style</span>=<span class="string">"{color: textColor}"</span>></span><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+</li>
+</ul>
+</li>
+</ul>
+<h1 id="if\u6307\u4ee4"><a href="#if\u6307\u4ee4" class="headerlink" title="if\u6307\u4ee4"></a>if\u6307\u4ee4</h1><ul>
+<li><p>weex</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">image</span> <span class="attr">src</span>=<span class="string">"..."</span> <span class="attr">if</span>=<span class="string">"{{shown}}"</span>></span><span class="tag"></<span class="name">image</span>></span></div></pre></td></tr></table></figure>
+<p>or</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">image</span> <span class="attr">src</span>=<span class="string">"..."</span> <span class="attr">if</span>=<span class="string">"shown"</span>></span><span class="tag"></<span class="name">image</span>></span></div></pre></td></tr></table></figure>
+</li>
+<li><p>vue</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">image</span> <span class="attr">src</span>=<span class="string">"..."</span> <span class="attr">v-if</span>=<span class="string">"shown"</span>></span><span class="tag"></<span class="name">image</span>></span></div></pre></td></tr></table></figure>
+</li>
+</ul>
+<h1 id="\u5faa\u73af\u6307\u4ee4"><a href="#\u5faa\u73af\u6307\u4ee4" class="headerlink" title="\u5faa\u73af\u6307\u4ee4"></a>\u5faa\u73af\u6307\u4ee4</h1><ul>
+<li><p>weex: repeat</p>
+<ul>
+<li><p><code>$index</code>\u4e3a\u7d22\u5f15</p>
+ <figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">repeat</span>=<span class="string">"{{list}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>No. {{$index + 1}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"><span class="tag"><<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+<p>or</p>
+ <figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">repeat</span>=<span class="string">"{{v in list}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>No. {{$index + 1}}, {{v.nickname}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+</li>
+<li><p>\u5bf9\u8c61\u53c2\u6570\u7684\u987a\u5e8f</p>
+ <figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">repeat</span>=<span class="string">"{{(key, value) in list}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>No. {{key + 1}}, {{value.nickname}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+</li>
+<li><p><code>track-by</code></p>
+ <figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">repeat</span>=<span class="string">"{{item in items}}"</span> <span class="attr">track-by</span>=<span class="string">"item.id"</span> <span class="attr">class</span>=<span class="string">"{{gender}}"</span>></span><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+</li>
+</ul>
+</li>
+<li><p>vue: v-for</p>
+<ul>
+<li><p>\u79fb\u9664<code>$index</code>\u7d22\u5f15</p>
+</li>
+<li><p>\u5bf9\u8c61\u53c2\u6570\u7684\u6539\u53d8\uff1a\u6539\u4e3a(value, key), \u4e0e\u901a\u7528\u7684\u5bf9\u8c61\u8fed\u4ee3\u5668\u4fdd\u6301\u4e00\u81f4</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">repeat</span>=<span class="string">"{{(value, key) in list}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>No. {{key + 1}}, {{value.nickname}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+</li>
+<li><p><code>track-by</code> \u66ff\u6362\u4e3a<code>v-bind</code></p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in items"</span> <span class="attr">v-bind:key</span>=<span class="string">"item.id"</span>></span></div></pre></td></tr></table></figure>
+</li>
+</ul>
+</li>
+</ul>
+<h1 id="\u521d\u59cb\u5316\u6570\u636e"><a href="#\u521d\u59cb\u5316\u6570\u636e" class="headerlink" title="\u521d\u59cb\u5316\u6570\u636e"></a>\u521d\u59cb\u5316\u6570\u636e</h1><ul>
+<li><p>weex</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line">data: { <span class="attr">value</span>: <span class="string">'x'</span> }</div></pre></td></tr></table></figure>
+</li>
+<li><p>vue</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line">props: { <span class="attr">value</span>: { <span class="attr">default</span>: <span class="string">'x'</span> } }</div></pre></td></tr></table></figure>
+<p>\u52a8\u6001\u6570\u636e</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line">data: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ <span class="keyword">return</span> { <span class="attr">value</span>: <span class="string">'x'</span> } }</div></pre></td></tr></table></figure>
+</li>
+</ul>
+<h1 id="\u56f4\u7ed5DOM\u7684\u5b9e\u4f8b\u65b9\u6cd5"><a href="#\u56f4\u7ed5DOM\u7684\u5b9e\u4f8b\u65b9\u6cd5" class="headerlink" title="\u56f4\u7ed5DOM\u7684\u5b9e\u4f8b\u65b9\u6cd5"></a>\u56f4\u7ed5DOM\u7684\u5b9e\u4f8b\u65b9\u6cd5</h1><ul>
+<li><p>\u83b7\u53d6\u8282\u70b9</p>
+<ul>
+<li><p>weex: <code>this.$el('xxx')</code></p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">container</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">id</span>=<span class="string">"top"</span>></span>Top<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">container</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">toTop</span>: <span class="function"><
span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> top = <span class="keyword">this</span>.$el(<span class="string">'top'</span>)</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+</li>
+<li><p>vue</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">this</span>.$refs.xxx</div></pre></td></tr></table></figure>
+<p>\u200b</p>
+</li>
+</ul>
+</li>
+</ul>
+<h1 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h1><ul>
+<li><p>\u4e8b\u4ef6\u7ed1\u5b9a</p>
+<ul>
+<li><p>weex</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">onclick</span>=<span class="string">"handler"</span>></span><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+</li>
+<li><p>vue</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> @<span class="attr">click</span>=<span class="string">"handler"</span>></span><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+</li>
+</ul>
+</li>
+<li><p>\u4e8b\u4ef6\u89e6\u53d1</p>
+<ul>
+<li><p>weex: dispatch\u548cbroadcast</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">this</span>.$dispatch()</div></pre></td></tr></table></figure>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">this</span>.$broadcast()</div></pre></td></tr></table></figure>
+</li>
+<li><p>vue: emit</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">this</span>.$emit()</div></pre></td></tr></table></figure>
+</li>
+</ul>
+<blockquote>
+<p>\u6ce8\uff1aWeex \u7684 <code>$dispatch</code> \u4e0e\u7ec4\u4ef6\u65e0\u5173\uff0c\u5728\u4efb\u610f\u7ec4\u4ef6\u4e2d\u90fd\u53ef\u4ee5\u901a\u8fc7 <code>$on</code> \u6355\u83b7\u5230\uff0cVue \u7684<code>$emit</code> \u7528\u4e8e\u89e6\u53d1\u7ec4\u4ef6(\u6807\u7b7e)\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002</p>
+</blockquote>
+</li>
+<li><p>\u539f\u751f\u4e8b\u4ef6</p>
+<ul>
+<li><p>weex</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line">onclick=<span class="string">"xxx"</span></div></pre></td></tr></table></figure>
+</li>
+<li><p>vue</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line">@click.native=<span class="string">"xxx"</span></div></pre></td></tr></table></figure>
+</li>
+</ul>
+</li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/migration/difference.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/migration/difference.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/migration/index.html
----------------------------------------------------------------------
diff --git a/content/cn/references/migration/index.html b/content/cn/references/migration/index.html
new file mode 100644
index 0000000..a27d900
--- /dev/null
+++ b/content/cn/references/migration/index.html
@@ -0,0 +1,1320 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u8fc1\u79fb | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u8fc1\u79fb
+\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c
+Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u8fc1\u79fb">
+<meta property="og:url" content="https://weex.apache.org/cn/references/migration/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u8fc1\u79fb
+\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c
+Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.898Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u8fc1\u79fb">
+<meta name="twitter:description" content="\u8fc1\u79fb
+\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c
+Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link current ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link current ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u8fc1\u79fb
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.898Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u8fc1\u79fb"><a href="#\u8fc1\u79fb" class="headerlink" title="\u8fc1\u79fb"></a>\u8fc1\u79fb</h1><ul>
+<li><a href="./migration-from-weex.html">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a></li>
+<li><a href="./difference.html">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a></li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/migration/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/migration/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[35/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/input.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/input.html b/content/cn/references/components/input.html
new file mode 100644
index 0000000..cb70c43
--- /dev/null
+++ b/content/cn/references/components/input.html
@@ -0,0 +1,1405 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><input> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;input&gt;Weex \u5185\u7f6e\u7684 &lt;input&gt; \u7ec4\u4ef6\u7528\u6765\u521b\u5efa\u63a5\u6536\u7528\u6237\u8f93\u5165\u5b57\u7b26\u7684\u8f93\u5165\u7ec4\u4ef6\u3002 &lt;input&gt; \u7ec4\u4ef6\u7684\u5de5\u4f5c\u65b9\u5f0f\u56e0 type \u5c5e\u6027\u7684\u503c\u800c\u5f02\uff0c\u6bd4\u5982 &lt;text&gt;\uff0c password\uff0curl\uff0cemail\uff0ctel \u7b49\u3002
+\u6ce8\u610f\uff1a
+\u6b64\u7ec4\u4ef6\u4e0d\u652f\u6301 click \u4e8b\u4ef6\u3002\u8bf7\u76d1\u542c &lt;input&gt; \u6216 change \u6765\u4ee3\u66ff click \u4e8b\u4ef6\u3002
+\u5b50\u7ec4\u4ef6">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<input>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/input.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;input&gt;Weex \u5185\u7f6e\u7684 &lt;input&gt; \u7ec4\u4ef6\u7528\u6765\u521b\u5efa\u63a5\u6536\u7528\u6237\u8f93\u5165\u5b57\u7b26\u7684\u8f93\u5165\u7ec4\u4ef6\u3002 &lt;input&gt; \u7ec4\u4ef6\u7684\u5de5\u4f5c\u65b9\u5f0f\u56e0 type \u5c5e\u6027\u7684\u503c\u800c\u5f02\uff0c\u6bd4\u5982 &lt;text&gt;\uff0c password\uff0curl\uff0cemail\uff0ctel \u7b49\u3002
+\u6ce8\u610f\uff1a
+\u6b64\u7ec4\u4ef6\u4e0d\u652f\u6301 click \u4e8b\u4ef6\u3002\u8bf7\u76d1\u542c &lt;input&gt; \u6216 change \u6765\u4ee3\u66ff click \u4e8b\u4ef6\u3002
+\u5b50\u7ec4\u4ef6">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.847Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<input>">
+<meta name="twitter:description" content="&lt;input&gt;Weex \u5185\u7f6e\u7684 &lt;input&gt; \u7ec4\u4ef6\u7528\u6765\u521b\u5efa\u63a5\u6536\u7528\u6237\u8f93\u5165\u5b57\u7b26\u7684\u8f93\u5165\u7ec4\u4ef6\u3002 &lt;input&gt; \u7ec4\u4ef6\u7684\u5de5\u4f5c\u65b9\u5f0f\u56e0 type \u5c5e\u6027\u7684\u503c\u800c\u5f02\uff0c\u6bd4\u5982 &lt;text&gt;\uff0c password\uff0curl\uff0cemail\uff0ctel \u7b49\u3002
+\u6ce8\u610f\uff1a
+\u6b64\u7ec4\u4ef6\u4e0d\u652f\u6301 click \u4e8b\u4ef6\u3002\u8bf7\u76d1\u542c &lt;input&gt; \u6216 change \u6765\u4ee3\u66ff click \u4e8b\u4ef6\u3002
+\u5b50\u7ec4\u4ef6">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link current "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link current "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <input>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.847Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-input-gt"><a href="#lt-input-gt" class="headerlink" title="<input>"></a><input></h1><p>Weex \u5185\u7f6e\u7684 <code><input></code> \u7ec4\u4ef6\u7528\u6765\u521b\u5efa\u63a5\u6536\u7528\u6237\u8f93\u5165\u5b57\u7b26\u7684\u8f93\u5165\u7ec4\u4ef6\u3002 <code><input></code> \u7ec4\u4ef6\u7684\u5de5\u4f5c\u65b9\u5f0f\u56e0 <code>type</code> \u5c5e\u6027\u7684\u503c\u800c\u5f02\uff0c\u6bd4\u5982 <code><text></code>\uff0c <code>password</code>\uff0c<code>url</code>\uff0c<code>email</code>\uff0c<code>tel</code> \u7b49\u3002</p>
+<p><strong>\u6ce8\u610f\uff1a</strong> </p>
+<p>\u6b64\u7ec4\u4ef6\u4e0d\u652f\u6301 <code>click</code> \u4e8b\u4ef6\u3002\u8bf7\u76d1\u542c <code><input></code> \u6216 <code>change</code> \u6765\u4ee3\u66ff <code>click</code> \u4e8b\u4ef6\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p>\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002</p>
+<h2 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h2><ul>
+<li><code>type {string}</code>\uff1a\u63a7\u4ef6\u7684\u7c7b\u578b\uff0c\u9ed8\u8ba4\u503c\u662f <code><text></code>\u3002<code>type</code> \u503c\u53ef\u4ee5\u662f <code>text</code>\uff0c<code>password</code>\uff0c<code>url</code>\uff0c<code>email</code>\uff0c<code>tel</code> \u3002\u6bcf\u4e2a <code>type</code> \u503c\u90fd\u7b26\u5408 W3C \u6807\u51c6\u3002</li>
+<li><code>value {string}</code>\uff1a\u7ec4\u4ef6\u7684\u63a5\u6536\u5230\u7684\u8f93\u5165\u5b57\u7b26\u3002</li>
+<li><code>placeholder {string}</code>\uff1a\u63d0\u793a\u7528\u6237\u53ef\u4ee5\u8f93\u5165\u4ec0\u4e48\u3002 \u63d0\u793a\u6587\u672c\u4e0d\u80fd\u6709\u56de\u8f66\u6216\u6362\u884c\u3002</li>
+<li><code>disabled {boolean}</code>\uff1a\u5e03\u5c14\u7c7b\u578b\u7684\u6570\u636e\uff0c\u8868\u793a\u662f\u5426\u652f\u6301\u8f93\u5165\u3002\u901a\u5e38 <code>click</code> \u4e8b\u4ef6\u5728 <code>disabled</code> \u63a7\u4ef6\u4e0a\u662f\u5931\u6548\u7684\u3002</li>
+<li><code>autofocus {boolean}</code>\uff1a\u5e03\u5c14\u7c7b\u578b\u7684\u6570\u636e\uff0c\u8868\u793a\u662f\u5426\u5728\u9875\u9762\u52a0\u8f7d\u65f6\u63a7\u4ef6\u81ea\u52a8\u83b7\u5f97\u8f93\u5165\u7126\u70b9\u3002</li>
+<li><code>maxlength {nubmer}</code>\uff1a<sup class="wx-v">v0.7</sup>\u4e00\u4e2a\u6570\u503c\u7c7b\u578b\u7684\u503c\uff0c\u8868\u793a\u8f93\u5165\u7684\u6700\u5927\u957f\u5ea6\u3002</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><ul>
+<li><code>placeholder-color {color}</code>\uff1aplaceholder \u5b57\u7b26\u989c\u8272\u3002\u9ed8\u8ba4\u503c\u662f <code>#999999</code>\u3002</li>
+<li><p>text styles</p>
+<ul>
+<li>\u652f\u6301 <code>color</code></li>
+<li>\u652f\u6301 <code>font-size</code></li>
+<li>\u652f\u6301 <code>font-style</code></li>
+<li>\u652f\u6301 <code>font-weight</code></li>
+<li>\u652f\u6301 <code>text-align</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../text-style.html">\u6587\u672c\u6837\u5f0f</a></p>
+</li>
+<li><p>\u901a\u7528\u6837\u5f0f\uff1a\u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+</li>
+</ul>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><ul>
+<li><p><code>input</code>: \u8f93\u5165\u5b57\u7b26\u7684\u503c\u66f4\u6539\u3002</p>
+<p>\u4e8b\u4ef6\u4e2d event \u5bf9\u8c61\u5c5e\u6027\uff1a</p>
+<ul>
+<li><code>value</code>: \u89e6\u53d1\u4e8b\u4ef6\u7684\u7ec4\u4ef6\uff1b</li>
+<li><code>timestamp</code>: \u4e8b\u4ef6\u53d1\u751f\u65f6\u7684\u65f6\u95f4\u6233\u3002</li>
+</ul>
+</li>
+<li><p><code>change</code>: \u5f53\u7528\u6237\u8f93\u5165\u5b8c\u6210\u65f6\u89e6\u53d1\u3002\u901a\u5e38\u5728 <code>blur</code> \u4e8b\u4ef6\u4e4b\u540e\u3002</p>
+<p>\u4e8b\u4ef6\u4e2d event \u5bf9\u8c61\u5c5e\u6027\uff1a</p>
+<ul>
+<li><p><code>value</code>: \u89e6\u53d1\u4e8b\u4ef6\u7684\u7ec4\u4ef6\uff1b</p>
+</li>
+<li><p><code>timestamp</code>: \u4e8b\u4ef6\u53d1\u751f\u65f6\u7684\u65f6\u95f4\u6233\u3002</p>
+</li>
+</ul>
+</li>
+<li><p><code>focus</code>: \u7ec4\u4ef6\u83b7\u5f97\u8f93\u5165\u7126\u70b9\u3002</p>
+<p>\u4e8b\u4ef6\u4e2d event \u5bf9\u8c61\u5c5e\u6027\uff1a</p>
+<ul>
+<li><code>timestamp</code>: \u4e8b\u4ef6\u53d1\u751f\u65f6\u7684\u65f6\u95f4\u6233\u3002</li>
+</ul>
+</li>
+<li><p><code>blur</code>: \u7ec4\u4ef6\u5931\u53bb\u8f93\u5165\u7126\u70b9\u3002</p>
+<p>\u4e8b\u4ef6\u4e2d event \u5bf9\u8c61\u5c5e\u6027\uff1a</p>
+<ul>
+<li><code>timestamp</code>: \u4e8b\u4ef6\u53d1\u751f\u65f6\u7684\u65f6\u95f4\u6233\u3002</li>
+</ul>
+</li>
+<li><p>\u901a\u7528\u4e8b\u4ef6</p>
+<p><strong>\u6ce8\u610f\uff1a</strong><br>\u4e0d\u652f\u6301 <code>click</code> \u4e8b\u4ef6\u3002 \u8bf7\u76d1\u542c <code>input</code> \u6216 <code>change</code> \u4e8b\u4ef6\u4ee3\u66ff\u3002</p>
+<p>\u652f\u6301\u4ee5\u4e0b\u901a\u7528\u4e8b\u4ef6\uff1a</p>
+<ul>
+<li><code>longpress</code></li>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a></p>
+</li>
+</ul>
+<h2 id="Methods"><a href="#Methods" class="headerlink" title="Methods"></a>Methods</h2><ul>
+<li><p><code>focus()</code> <span class="api-version">v0.9+</span></p>
+<p><code>focus()</code> \u65b9\u6cd5\u7528\u4e8e\u5c06 <code>input</code> \u7ec4\u4ef6\u805a\u7126\u3002</p>
+</li>
+<li><p><code>blur()</code> <span class="api-version">v0.9+</span></p>
+<p><code>blur()</code> \u65b9\u6cd5\u7528\u4e8e\u4ece <code>input</code> \u7ec4\u4ef6\u4e2d\u79fb\u9664\u7126\u70b9\u5e76\u5173\u95ed\u8f6f\u952e\u76d8\uff08\u5982\u679c\u5b83\u5177\u6709\u7126\u70b9\uff09\u3002</p>
+</li>
+</ul>
+<h2 id="\u7ea6\u675f"><a href="#\u7ea6\u675f" class="headerlink" title="\u7ea6\u675f"></a>\u7ea6\u675f</h2><p>\u76ee\u524d\u4e0d\u652f\u6301 <code>this.$el(id).value = ''</code> \u8fd9\u79cd\u65b9\u5f0f\u6539\u5199 input value\u3002\u53ea\u652f\u6301\u5728 <code><input></code> \u7ec4\u4ef6\u7684 <code>input</code>\u3001<code>change</code> \u4e8b\u4ef6\u4e2d\u6539\u5199\u3002</p>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">ref</span>=<span class="string">"input"</span> <span class="attr">class</span>=<span class="string">"input"</span> <span class="attr">type</span>=<span class="string">"text"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">focus</span>=<span class="string">"onfocus"</span> @<span class="attr">blur</span>=<span class="string">"onblur"</span>></span></div><div class="line"> <span
class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> oninput (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'oninput:'</span>, event.value)</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">`oninput: <span class="subst">${event.value}</span>`
</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.8</span></div><div class="line"> })</div><div class="line"> },</div><div class="line"> onchange (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'onchange:'</span>, event.value)</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">`onchange: <span class="subst">${event.value}</span>`</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.8</span></div><div class="line"> })</div><div class="line"> },</div><div class="line"> onfocus (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'onfocus:'</span>, event.value)</div><div class="line"> modal.toast({</div><div class
="line"> <span class="attr">message</span>: <span class="string">`onfocus: <span class="subst">${event.value}</span>`</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.8</span></div><div class="line"> })</div><div class="line"> },</div><div class="line"> onblur (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'onblur:'</span>, event.value)</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">`input blur: <span class="subst">${event.value}</span>`</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.8</span></div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"><
;/<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.input</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">50px</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">650px</span>;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">50px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">50px</span>;</div><div class="line"> <span class="attribute">padding-top</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">padding-bottom</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">padding-left</span>: <span class="number">20px</span>;</div><di
v class="line"> <span class="attribute">padding-right</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#666666</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/input.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/input.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/input.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/list.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/list.html b/content/cn/references/components/list.html
new file mode 100644
index 0000000..dc9976f
--- /dev/null
+++ b/content/cn/references/components/list.html
@@ -0,0 +1,1394 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><list> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;list&gt;&lt;list&gt; \u7ec4\u4ef6\u662f\u63d0\u4f9b\u5782\u76f4\u5217\u8868\u529f\u80fd\u7684\u6838\u5fc3\u7ec4\u4ef6\uff0c\u62e5\u6709\u5e73\u6ed1\u7684\u6eda\u52a8\u548c\u9ad8\u6548\u7684\u5185\u5b58\u7ba1\u7406\uff0c\u975e\u5e38\u9002\u5408\u7528\u4e8e\u957f\u5217\u8868\u7684\u5c55\u793a\u3002\u6700\u7b80\u5355\u7684\u4f7f\u7528\u65b9\u6cd5\u662f\u5728 &lt;list&gt; \u6807\u7b7e\u5185\u4f7f\u7528\u4e00\u7ec4\u7531\u7b80\u5355\u6570\u7ec4 repeat \u751f\u6210\u7684 &lt;cell&gt; \u6807\u7b7e\u586b\u5145\u3002
+\u5b50\u7ec4\u4ef6&lt;list&gt; \u7ec4\u4ef6\u652f\u6301\u66f4\u591a\u9ad8\u7ea7\u529f\u80fd\uff0c\u7531\u4ee5\u4e0b\u5b50\u7ec4\u4ef6\u63d0\u4f9b\uff1a
+
+&lt;cell&gt;
+\u7528\u4e8e\u5b9a\u4e49\u5217\u8868\u4e2d\u7684\u5b50\u5217\u8868">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<list>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/list.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;list&gt;&lt;list&gt; \u7ec4\u4ef6\u662f\u63d0\u4f9b\u5782\u76f4\u5217\u8868\u529f\u80fd\u7684\u6838\u5fc3\u7ec4\u4ef6\uff0c\u62e5\u6709\u5e73\u6ed1\u7684\u6eda\u52a8\u548c\u9ad8\u6548\u7684\u5185\u5b58\u7ba1\u7406\uff0c\u975e\u5e38\u9002\u5408\u7528\u4e8e\u957f\u5217\u8868\u7684\u5c55\u793a\u3002\u6700\u7b80\u5355\u7684\u4f7f\u7528\u65b9\u6cd5\u662f\u5728 &lt;list&gt; \u6807\u7b7e\u5185\u4f7f\u7528\u4e00\u7ec4\u7531\u7b80\u5355\u6570\u7ec4 repeat \u751f\u6210\u7684 &lt;cell&gt; \u6807\u7b7e\u586b\u5145\u3002
+\u5b50\u7ec4\u4ef6&lt;list&gt; \u7ec4\u4ef6\u652f\u6301\u66f4\u591a\u9ad8\u7ea7\u529f\u80fd\uff0c\u7531\u4ee5\u4e0b\u5b50\u7ec4\u4ef6\u63d0\u4f9b\uff1a
+
+&lt;cell&gt;
+\u7528\u4e8e\u5b9a\u4e49\u5217\u8868\u4e2d\u7684\u5b50\u5217\u8868">
+<meta property="og:image" content="https://weex.apache.org/../images/list_4.jpg">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.847Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<list>">
+<meta name="twitter:description" content="&lt;list&gt;&lt;list&gt; \u7ec4\u4ef6\u662f\u63d0\u4f9b\u5782\u76f4\u5217\u8868\u529f\u80fd\u7684\u6838\u5fc3\u7ec4\u4ef6\uff0c\u62e5\u6709\u5e73\u6ed1\u7684\u6eda\u52a8\u548c\u9ad8\u6548\u7684\u5185\u5b58\u7ba1\u7406\uff0c\u975e\u5e38\u9002\u5408\u7528\u4e8e\u957f\u5217\u8868\u7684\u5c55\u793a\u3002\u6700\u7b80\u5355\u7684\u4f7f\u7528\u65b9\u6cd5\u662f\u5728 &lt;list&gt; \u6807\u7b7e\u5185\u4f7f\u7528\u4e00\u7ec4\u7531\u7b80\u5355\u6570\u7ec4 repeat \u751f\u6210\u7684 &lt;cell&gt; \u6807\u7b7e\u586b\u5145\u3002
+\u5b50\u7ec4\u4ef6&lt;list&gt; \u7ec4\u4ef6\u652f\u6301\u66f4\u591a\u9ad8\u7ea7\u529f\u80fd\uff0c\u7531\u4ee5\u4e0b\u5b50\u7ec4\u4ef6\u63d0\u4f9b\uff1a
+
+&lt;cell&gt;
+\u7528\u4e8e\u5b9a\u4e49\u5217\u8868\u4e2d\u7684\u5b50\u5217\u8868">
+<meta name="twitter:image" content="https://weex.apache.org/../images/list_4.jpg">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link current "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link current "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <list>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.847Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-list-gt"><a href="#lt-list-gt" class="headerlink" title="<list>"></a><list></h1><p><code><list></code> \u7ec4\u4ef6\u662f\u63d0\u4f9b\u5782\u76f4\u5217\u8868\u529f\u80fd\u7684\u6838\u5fc3\u7ec4\u4ef6\uff0c\u62e5\u6709\u5e73\u6ed1\u7684\u6eda\u52a8\u548c\u9ad8\u6548\u7684\u5185\u5b58\u7ba1\u7406\uff0c\u975e\u5e38\u9002\u5408\u7528\u4e8e\u957f\u5217\u8868\u7684\u5c55\u793a\u3002\u6700\u7b80\u5355\u7684\u4f7f\u7528\u65b9\u6cd5\u662f\u5728 <code><list></code> \u6807\u7b7e\u5185\u4f7f\u7528\u4e00\u7ec4\u7531\u7b80\u5355\u6570\u7ec4 <code>repeat</code> \u751f\u6210\u7684 <code><cell></code> \u6807\u7b7e\u586b\u5145\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p><code><list></code> \u7ec4\u4ef6\u652f\u6301\u66f4\u591a\u9ad8\u7ea7\u529f\u80fd\uff0c\u7531\u4ee5\u4e0b\u5b50\u7ec4\u4ef6\u63d0\u4f9b\uff1a</p>
+<ul>
+<li><p><code><cell></code></p>
+<p>\u7528\u4e8e\u5b9a\u4e49\u5217\u8868\u4e2d\u7684\u5b50\u5217\u8868\u9879\uff0c\u7c7b\u4f3c\u4e8e HTML \u4e2d\u7684 <code>ul</code> \u4e4b\u4e8e <code>li</code>\u3002Weex \u4f1a\u5bf9 <code><cell></code> \u8fdb\u884c\u9ad8\u6548\u7684\u5185\u5b58\u56de\u6536\u4ee5\u8fbe\u5230\u66f4\u597d\u7684\u6027\u80fd\u3002</p>
+<p>\u4f7f\u7528\u6587\u6863\u8bf7\u67e5\u770b <a href="./cell.html"><code><cell></code></a>\u3002</p>
+</li>
+<li><p><code>header</code> <sup class="wx-v">0.6.1+</sup></p>
+<p>\u5f53 <code><header></code> \u5230\u8fbe\u5c4f\u5e55\u9876\u90e8\u65f6\uff0c\u5438\u9644\u5728\u5c4f\u5e55\u9876\u90e8\u3002</p>
+</li>
+<li><p><code><refresh></code></p>
+<p>\u7528\u4e8e\u7ed9\u5217\u8868\u6dfb\u52a0\u4e0b\u62c9\u5237\u65b0\u7684\u529f\u80fd\u3002</p>
+<p>\u4f7f\u7528\u6587\u6863\u8bf7\u67e5\u770b <a href="./refresh.html"><code><refresh></code></a></p>
+</li>
+<li><p><code><loading></code></p>
+<p><code><loading></code> \u7528\u6cd5\u4e0e\u7279\u6027\u548c <code><refresh></code> \u7c7b\u4f3c\uff0c\u7528\u4e8e\u7ed9\u5217\u8868\u6dfb\u52a0\u4e0a\u62c9\u52a0\u8f7d\u66f4\u591a\u7684\u529f\u80fd\u3002</p>
+<p>\u4f7f\u7528\u6587\u6863\u8bf7\u67e5\u770b <a href="./loading.html"><code><loading></code></a></p>
+</li>
+</ul>
+<p><strong>\u6ce8\u610f\uff1a</strong></p>
+<p><code><list></code> \u7684\u5b50\u7ec4\u4ef6\u53ea\u80fd\u5305\u62ec\u4ee5\u4e0a\u56db\u79cd\u7ec4\u4ef6\u6216\u662f <code>fix</code> \u5b9a\u4f4d\u7684\u7ec4\u4ef6\uff0c\u5176\u4ed6\u5f62\u5f0f\u7684\u7ec4\u4ef6\u5c06\u4e0d\u80fd\u88ab\u6b63\u786e\u7684\u6e32\u67d3\u3002</p>
+<h2 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h2><ul>
+<li><p><code>loadmoreoffset {number}</code>\uff1a\u9ed8\u8ba4\u503c\u4e3a 0\uff0c\u89e6\u53d1 <code>loadmore</code> \u4e8b\u4ef6\u6240\u9700\u8981\u7684\u5782\u76f4\u504f\u79fb\u8ddd\u79bb\uff08\u8bbe\u5907\u5c4f\u5e55\u5e95\u90e8\u4e0e <code><list></code> \u5e95\u90e8\u4e4b\u95f4\u7684\u8ddd\u79bb\uff09\u3002\u5f53 <code><list></code> \u7684\u6eda\u52a8\u6761\u6eda\u52a8\u5230\u8db3\u591f\u63a5\u8fd1 <code><list></code> \u5e95\u90e8\u65f6\u5c06\u4f1a\u89e6\u53d1 <code>loadmore</code> \u8fd9\u4e2a\u4e8b\u4ef6\u3002</p>
+<p><img src="../images/list_4.jpg" alt="mobile_preview"></p>
+</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><ul>
+<li><p>\u901a\u7528\u6837\u5f0f\uff1a\u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+</li>
+</ul>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><ul>
+<li><p><code>loadmore</code> <sup class="wx-v">0.5+</sup>\uff1a\u5982\u679c\u5217\u8868\u6eda\u52a8\u5230\u5e95\u90e8\u5c06\u4f1a\u7acb\u5373\u89e6\u53d1\u8fd9\u4e2a\u4e8b\u4ef6\uff0c\u4f60\u53ef\u4ee5\u5728\u8fd9\u4e2a\u4e8b\u4ef6\u7684\u5904\u7406\u51fd\u6570\u4e2d\u52a0\u8f7d\u4e0b\u4e00\u9875\u7684\u5217\u8868\u9879\u3002</p>
+<p><a href="http://dotwe.org/bc445ede8746a31360e3607d210304c5" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+</li>
+<li><p>\u901a\u7528\u4e8b\u4ef6</p>
+<p>\u652f\u6301\u6240\u6709\u901a\u7528\u4e8b\u4ef6\uff1a</p>
+<ul>
+<li><code>click</code></li>
+<li><code>longpress</code></li>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a></p>
+</li>
+</ul>
+<h2 id="\u6269\u5c55"><a href="#\u6269\u5c55" class="headerlink" title="\u6269\u5c55"></a>\u6269\u5c55</h2><h3 id="scrollToElement-node-options"><a href="#scrollToElement-node-options" class="headerlink" title="scrollToElement(node, options)"></a>scrollToElement(node, options)</h3><p>\u6eda\u52a8\u5230\u5217\u8868\u67d0\u4e2a\u6307\u5b9a\u9879\u662f\u5e38\u89c1\u9700\u6c42\uff0c<code><list></code> \u62d3\u5c55\u4e86\u8be5\u529f\u80fd\u652f\u6301\u6eda\u52a8\u5230\u6307\u5b9a <code><cell></code>\u3002\u901a\u8fc7 <code>dom</code> module \u8bbf\u95ee\uff0c\u66f4\u591a\u4fe1\u606f\u53ef\u53c2\u8003 <a href="../modules/dom.html">dom module</a> \u3002</p>
+<h4 id="\u53c2\u6570"><a href="#\u53c2\u6570" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>node {node}</code>\uff1a\u6307\u5b9a\u76ee\u6807\u8282\u70b9\u3002</li>
+<li><code>options {Object}</code>\uff1a<ul>
+<li><code>offset {number}</code>\uff1a\u4e00\u4e2a\u5230\u5176\u53ef\u89c1\u4f4d\u7f6e\u7684\u504f\u79fb\u8ddd\u79bb\uff0c\u9ed8\u8ba4\u662f 0</li>
+</ul>
+</li>
+</ul>
+<h2 id="\u7ea6\u675f"><a href="#\u7ea6\u675f" class="headerlink" title="\u7ea6\u675f"></a>\u7ea6\u675f</h2><ol>
+<li><p><strong>\u4e0d\u5141\u8bb8</strong>\u76f8\u540c\u65b9\u5411\u7684 <code><list></code> \u6216\u8005 <code><scroller></code> \u4e92\u76f8\u5d4c\u5957\uff0c\u6362\u53e5\u8bdd\u8bf4\u5c31\u662f\u5d4c\u5957\u7684 <code><list></code>/<code><scroller></code> \u5fc5\u987b\u662f\u4e0d\u540c\u7684\u65b9\u5411\u3002</p>
+<p>\u4e3e\u4e2a\u4f8b\u5b50\uff0c<strong>\u4e0d\u5141\u8bb8</strong>\u4e00\u4e2a\u5782\u76f4\u65b9\u5411\u7684 <code><list></code> \u5d4c\u5957\u7684\u4e00\u4e2a\u5782\u76f4\u65b9\u5411\u7684 <code><scroller></code> \u4e2d\uff0c\u4f46\u662f\u4e00\u4e2a\u5782\u76f4\u65b9\u5411\u7684 <code><list></code> \u662f\u53ef\u4ee5\u5d4c\u5957\u7684\u4e00\u4e2a\u6c34\u5e73\u65b9\u5411\u7684 list \u6216\u8005 <code><scroller></code> \u4e2d\u7684\u3002</p>
+</li>
+<li><p><code><list></code> \u4e3a\u6839\u8282\u70b9\u65f6\u65e0\u9700\u8bbe\u7f6e\u9ad8\u5ea6\uff0c\u4f46\u662f\u5185\u5d4c <code><list></code> \u9ad8\u5ea6<strong>\u5fc5\u987b\u53ef\u8ba1\u7b97</strong>\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 <code>flex</code> \u6216 <code>postion</code> \u5c06 <code><list></code> \u8bbe\u4e3a\u4e00\u4e2a\u54cd\u5e94\u5f0f\u9ad8\u5ea6\uff08\u4f8b\u5982\u5168\u5c4f\u663e\u793a\uff09, \u4e5f\u53ef\u4ee5\u663e\u5f0f\u8bbe\u7f6e <code><list></code> \u7ec4\u4ef6\u7684 <code>height</code> \u6837\u5f0f\u3002</p>
+</li>
+</ol>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">list</span> <span class="attr">class</span>=<span class="string">"list"</span> @<span class="attr">loadmore</span>=<span class="string">"fetch"</span> <span class="attr">loadmoreoffset</span>=<span class="string">"10"</span>></span></div><div class="line"> <span class="tag"><<span class="name">cell</span> <span class="attr">class</span>=<span class="string">"cell"</span> <span class="attr">v-for</span>=<span class="string">"num in lists"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel"</span>></span></div><div class="line"> <span class="tag"><<span class="nam
e">text</span> <span class="attr">class</span>=<span class="string">"text"</span>></span>{{num}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">cell</span>></span></div><div class="line"> <span class="tag"></<span class="name">list</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"> <span class="keyword">const</span> LOADMORE_COUNT = <span class="number">4</span></div><div class="line"></div><div class="line"> <span class="keyword"
>export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">lists</span>: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>]</div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> fetch (event) {</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'loadmore'</span>, <span class="attr">duration</span>: <span class="number">1</span> })</div><div class="line"></div><div class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</div><div class="line"> <span class="keyword">const</span> length
= <span class="keyword">this</span>.lists.length</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = length; i < length + LOADMORE_COUNT; ++i) {</div><div class="line"> <span class="keyword">this</span>.lists.push(i + <span class="number">1</span>)</div><div class="line"> }</div><div class="line"> }, <span class="number">800</span>)</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.panel</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">600px</span>;</div><div class="line"> <
span class="attribute">height</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">75px</span>;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">35px</span>;</div><div class="line"> <span class="attribute">margin-bottom</span>: <span class="number">35px</span>;</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="built_in">rgb</span>(162, 217, 192);</div><div class="line"> <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(162, 217, 192, 0.2);</div>
<div class="line"> }</div><div class="line"> <span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">50px</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/list.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/list.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/list.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[42/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/advanced/integrate-devtool-to-ios.html
----------------------------------------------------------------------
diff --git a/content/cn/references/advanced/integrate-devtool-to-ios.html b/content/cn/references/advanced/integrate-devtool-to-ios.html
new file mode 100644
index 0000000..fb55d39
--- /dev/null
+++ b/content/cn/references/advanced/integrate-devtool-to-ios.html
@@ -0,0 +1,1395 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u96c6\u6210 Devtools \u5230 iOS | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u96c6\u6210 Devtools \u5230 iOSWeex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e iOS \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002
+iOS \u5e94\u7528\u63a5\u5165\u6dfb\u52a0\u4f9d\u8d56\u65b9\u6cd5\u4e00\uff1acocoapods \u4f9d\u8d56\u5728\u5de5\u7a0b\u76ee\u5f55\u7684 podfile \u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801
+source https://github.com/C">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u96c6\u6210 Devtools \u5230 iOS">
+<meta property="og:url" content="https://weex.apache.org/cn/references/advanced/integrate-devtool-to-ios.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u96c6\u6210 Devtools \u5230 iOSWeex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e iOS \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002
+iOS \u5e94\u7528\u63a5\u5165\u6dfb\u52a0\u4f9d\u8d56\u65b9\u6cd5\u4e00\uff1acocoapods \u4f9d\u8d56\u5728\u5de5\u7a0b\u76ee\u5f55\u7684 podfile \u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801
+source https://github.com/C">
+<meta property="og:image" content="https://weex.apache.org//img.alicdn.com/tps/TB1MXjjNXXXXXXlXpXXXXXXXXXX-795-326.png">
+<meta property="og:image" content="https://weex.apache.org//img.alicdn.com/tps/TB1A518NXXXXXbZXFXXXXXXXXXX-642-154.png">
+<meta property="og:image" content="https://weex.apache.org//img.alicdn.com/tps/TB1xRHhNXXXXXakXpXXXXXXXXXX-1498-668.png">
+<meta property="og:image" content="https://weex.apache.org//img.alicdn.com/tps/TB1F8WONXXXXXa_apXXXXXXXXXX-1706-674.png">
+<meta property="og:image" content="https://weex.apache.org//img.alicdn.com/tps/TB19Yq5NXXXXXXVXVXXXXXXXXXX-343-344.png">
+<meta property="og:image" content="https://weex.apache.org//img.alicdn.com/tps/TB1vomVNXXXXXcXaXXXXXXXXXXX-2072-1202.png">
+<meta property="og:image" content="https://weex.apache.org//img.alicdn.com/tps/TB116y0NXXXXXXNaXXXXXXXXXXX-1448-668.png">
+<meta property="og:image" content="https://weex.apache.org//img.alicdn.com/tps/TB16frmNXXXXXa7XXXXXXXXXXXX-2106-1254.png">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.837Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u96c6\u6210 Devtools \u5230 iOS">
+<meta name="twitter:description" content="\u96c6\u6210 Devtools \u5230 iOSWeex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e iOS \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002
+iOS \u5e94\u7528\u63a5\u5165\u6dfb\u52a0\u4f9d\u8d56\u65b9\u6cd5\u4e00\uff1acocoapods \u4f9d\u8d56\u5728\u5de5\u7a0b\u76ee\u5f55\u7684 podfile \u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801
+source https://github.com/C">
+<meta name="twitter:image" content="https://weex.apache.org//img.alicdn.com/tps/TB1MXjjNXXXXXXlXpXXXXXXXXXX-795-326.png">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link current ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link current ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u96c6\u6210 Devtools \u5230 iOS
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.837Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u96c6\u6210-Devtools-\u5230-iOS"><a href="#\u96c6\u6210-Devtools-\u5230-iOS" class="headerlink" title="\u96c6\u6210 Devtools \u5230 iOS"></a>\u96c6\u6210 Devtools \u5230 iOS</h1><p>Weex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e iOS \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002</p>
+<h2 id="iOS-\u5e94\u7528\u63a5\u5165"><a href="#iOS-\u5e94\u7528\u63a5\u5165" class="headerlink" title="iOS \u5e94\u7528\u63a5\u5165"></a>iOS \u5e94\u7528\u63a5\u5165</h2><h3 id="\u6dfb\u52a0\u4f9d\u8d56"><a href="#\u6dfb\u52a0\u4f9d\u8d56" class="headerlink" title="\u6dfb\u52a0\u4f9d\u8d56"></a>\u6dfb\u52a0\u4f9d\u8d56</h3><h4 id="\u65b9\u6cd5\u4e00\uff1acocoapods-\u4f9d\u8d56"><a href="#\u65b9\u6cd5\u4e00\uff1acocoapods-\u4f9d\u8d56" class="headerlink" title="\u65b9\u6cd5\u4e00\uff1acocoapods \u4f9d\u8d56"></a>\u65b9\u6cd5\u4e00\uff1acocoapods \u4f9d\u8d56</h4><p>\u5728\u5de5\u7a0b\u76ee\u5f55\u7684 podfile \u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">source https://github.com/CocoaPods/Specs.git\uff0c</div><div class="line">pod 'WXDevtool', '0.7.0', :configurations => ['Debug']\uff0c</div></pre></td></tr></table></figure>
+<p>\u76ee\u524d\u6709\u5982\u4e0b\u51e0\u4e2a\u7248\u672c\uff1a</p>
+<p>0.7.0, 0.6.1, 0.1.1, 0.1.0 [master repo]</p>
+<hr>
+<p>\u53ef\u4ee5\u901a\u8fc7\u66f4\u65b0\u672c\u5730 podspec repo\uff0cpod search \u6765\u67e5\u8be2\u6700\u65b0\u7248\u672c\uff0c\u5728 podfile \u6587\u4ef6\u6dfb\u52a0\u4f9d\u8d56\u3002</p>
+<p><strong><em> \u63a8\u8350\u5728DEBUG\u6a21\u5f0f\u4e0b\u4f9d\u8d56\u3002 </em></strong></p>
+<h4 id="\u65b9\u6cd5\u4e8c\uff1agithub-\u6e90\u7801\u4f9d\u8d56"><a href="#\u65b9\u6cd5\u4e8c\uff1agithub-\u6e90\u7801\u4f9d\u8d56" class="headerlink" title="\u65b9\u6cd5\u4e8c\uff1agithub \u6e90\u7801\u4f9d\u8d56"></a>\u65b9\u6cd5\u4e8c\uff1agithub \u6e90\u7801\u4f9d\u8d56</h4><ol>
+<li><p><a href="https://github.com/weexteam/weex-devtool-iOS" target="_blank" rel="external">\u62c9\u53d6</a>\u6700\u65b0\u7684WXDevtool\u4ee3\u7801\u3002</p>
+</li>
+<li><p>\u6309\u7167\u5982\u4e0b\u56fe\u793a\uff1a\u76f4\u63a5\u62d6\u52a8source\u76ee\u5f55\u6e90\u6587\u4ef6\u5230\u76ee\u6807\u5de5\u7a0b\u4e2d</p>
+<p><img src="//img.alicdn.com/tps/TB1MXjjNXXXXXXlXpXXXXXXXXXX-795-326.png" alt="drag"></p>
+</li>
+<li><p>\u6309\u7167\u7ea2\u6846\u4e2d\u914d\u7f6e\u52fe\u9009</p>
+<p><img src="//img.alicdn.com/tps/TB1A518NXXXXXbZXFXXXXXXXXXX-642-154.png" alt="_"></p>
+</li>
+</ol>
+<p> \u5728\u76f8\u5bf9\u8f83\u5927\u7684\u4e92\u8054\u7f51App\u7814\u53d1\u4e2d, framework \u9759\u6001\u5e93\u88ab\u5e7f\u6cdb\u5e94\u7528\uff0c\u6240\u4ee5\u63a8\u8350\u4f7f\u7528\u65b9\u6cd5\u4e00\u63a5\u5165\u3002</p>
+<h3 id="\u96c6\u6210\u529f\u80fd"><a href="#\u96c6\u6210\u529f\u80fd" class="headerlink" title="\u96c6\u6210\u529f\u80fd"></a>\u96c6\u6210\u529f\u80fd</h3><p>\u5982\u679c\u6309\u7167\u65b9\u6cd5\u4e00\u63a5\u5165\uff1apodfile \u7684\u65b9\u5f0f\uff0c\u6dfb\u52a0\u5934\u6587\u4ef6\u5305\u542b\uff1a</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">#import <TBWXDevtool/WXDevtool.h></div></pre></td></tr></table></figure>
+<p>\u5982\u679c\u6309\u7167\u65b9\u6cd5\u4e8c\u63a5\u5165\uff1a\u6e90\u7801\u4f9d\u8d56\u7684\u65b9\u5f0f\uff0c\u6dfb\u52a0\u5934\u6587\u4ef6\u5305\u542b\uff1a</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">#import "WXDevtool.h"</div><div class="line">``` </div><div class="line"></div><div class="line">\u67e5\u770b WXDevtool \u5934\u6587\u4ef6\u5982\u4e0b\uff1a</div><div class="line"> </div><div class="line">```object-c</div><div class="line">#import <Foundation/Foundation.h></div><div class="line"></div><div class="line">@interface WXDevTool : NSObject</div><div class="line">/**</div><div class="line">* set debug status</div><div class="line">* @param isDebug : YES:open debug model and inspect model;</div><div class="line">* default is NO,if isDebug is NO, open inspect only;</div><div class="line">* */</div><div class="line">+ (void)setDebug:(BOOL)isDebug;</div><div class="line"></div><div class="line"></div><div class="line">/**</div><div class="line">* get debug status</div><div class="line">* */ </div><div class="line">+ (BOOL)isDebug;</div><div class="line"></div><div class="
line"></div><div class="line">/**</div><div class="line">* launch weex debug</div><div class="line">* @param url : ws://ip:port/debugProxy/native, ip and port is your devtool server address</div><div class="line">* eg:@"ws://30.30.29.242:8088/debugProxy/native"</div><div class="line">* */</div><div class="line">+ (void)launchDevToolDebugWithUrl:(NSString *)url;</div><div class="line"></div><div class="line">@end</div><div class="line">``` </div><div class="line"></div><div class="line">`setDebug`\uff1a\u53c2\u6570\u4e3a `YES` \u65f6\uff0c\u76f4\u63a5\u5f00\u542f debug \u6a21\u5f0f\uff0c\u53cd\u4e4b\u5173\u95ed\uff0c\u4f7f\u7528\u573a\u666f\u5982\u4e0b\u6240\u8ff0</div><div class="line"></div><div class="line">\u5728\u4f60\u81ea\u5df1\u7684\u7a0b\u5e8f\u4e2d\u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801\uff1a</div><div class="line"></div><div class="line">```object-c </div><div class="line">[WXDevTool launchDevToolDebugWithUrl:@"ws://30.30.31.7:8088/debugProxy/native"];</div></pre></td></tr></table></figure>
+<p>\u5176\u4e2d\u7684 ws \u5730\u5740\u6b63\u662f Weex debug \u63a7\u5236\u53f0\u4e2d\u51fa\u73b0\u7684\u5730\u5740\uff0c\u76f4\u63a5 copy \u5230 <code>launchDevToolDebugWithUrl</code> \u63a5\u53e3\u4e2d\u3002</p>
+<p>\u5982\u679c\u7a0b\u5e8f\u4e00\u542f\u52a8\u5c31\u5f00\u542f Weex \u8c03\u8bd5\uff0c<strong>\u9700\u8981\u5728 WeexSDK \u5f15\u64ce\u521d\u59cb\u5316\u4e4b\u524d</strong>\u6dfb\u52a0\u4ee3\u7801\uff1a</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">[WXDevTool setDebug:YES];</div><div class="line">[WXDevTool launchDevToolDebugWithUrl:@"ws://30.30.31.7:8088/debugProxy/native"];</div></pre></td></tr></table></figure>
+<h4 id="\u9644\u52a0\u9875\u9762\u5237\u65b0\u529f\u80fd"><a href="#\u9644\u52a0\u9875\u9762\u5237\u65b0\u529f\u80fd" class="headerlink" title="\u9644\u52a0\u9875\u9762\u5237\u65b0\u529f\u80fd"></a>\u9644\u52a0\u9875\u9762\u5237\u65b0\u529f\u80fd</h4><ul>
+<li><p>\u4e3a\u4ec0\u4e48\u9700\u8981\u9875\u9762\u5237\u65b0\u529f\u80fd\uff1f</p>
+<p>\u5982\u4e0b\u56fe\u6240\u793a\uff0c\u5f53\u70b9\u51fb debug \u6309\u94ae\u65f6\uff0cjs \u7684\u8fd0\u884c\u73af\u5883\u4f1a\u4ece\u624b\u673a\u7aef\uff08JavaScriptCore\uff09\u5207\u6362\u5230 Chrome\uff08V8\uff09\uff0c\u8fd9\u65f6\u9700\u8981\u91cd\u65b0\u521d\u59cb\u5316 Weex \u73af\u5883\uff0c\u91cd\u65b0\u6e32\u67d3\u9875\u9762\u3002\u9875\u9762\u6e32\u67d3\u662f\u9700\u8981\u63a5\u5165\u65b9\u5728\u81ea\u5df1\u7684\u9875\u9762\u6dfb\u52a0\u3002</p>
+<p><img src="//img.alicdn.com/tps/TB1xRHhNXXXXXakXpXXXXXXXXXX-1498-668.png" alt="_debug"></p>
+</li>
+<li><p>\u4ec0\u4e48\u573a\u666f\u4e0b\u9700\u8981\u6dfb\u52a0\u9875\u9762\u5237\u65b0\u529f\u80fd? </p>
+<ul>
+<li>\u70b9\u51fb debug \u6309\u94ae\u8c03\u8bd5</li>
+<li>\u5207\u6362 RemoteDebug \u5f00\u5173</li>
+<li>\u5237\u65b0 Chrome \u9875\u9762\uff08command+R\uff09</li>
+</ul>
+</li>
+<li><p>\u5982\u4f55\u6dfb\u52a0\u5237\u65b0 </p>
+<p>\u5728 Weex \u9875\u9762\u521d\u59cb\u5316\u6216 <code>viewDidLoad</code> \u65b9\u6cd5\u65f6\u6dfb\u52a0\u6ce8\u518c\u901a\u77e5\uff0c\u4e3e\u4f8b\u5982\u4e0b\uff1a</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">[[NSNotificationCenter defaultCenter] addObserver:self selector:notificationRefreshInstance: name:@"RefreshInstance" object:nil];</div></pre></td></tr></table></figure>
+</li>
+</ul>
+<p> \u6700\u540e<strong>\u5343\u4e07\u8bb0\u5f97</strong>\u5728 <code>dealloc</code> \u65b9\u6cd5\u4e2d\u53d6\u6d88\u901a\u77e5\uff0c\u5982\u4e0b\u6240\u793a</p>
+ <figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">- (void)dealloc</div><div class="line">{</div><div class="line"> [[NSNotificationCenter defaultCenter] removeObserver:self];</div><div class="line">}</div></pre></td></tr></table></figure>
+<p> \u9875\u9762\u5237\u65b0\u5b9e\u73b0\uff0c\u5148\u9500\u6bc1\u5f53\u524d instance\uff0c\u7136\u540e\u91cd\u65b0\u521b\u5efa instance\uff0c\u4e3e\u4f8b\u5982\u4e0b:</p>
+ <figure class="highlight plain"><table><tr><td class="code"><pre><div class="line"> - (void)render</div><div class="line"> {</div><div class="line"> CGFloat width = self.view.frame.size.width;</div><div class="line"> [_instance destroyInstance];</div><div class="line"> _instance = [[WXSDKInstance alloc] init];</div><div class="line"> _instance.viewController = self;</div><div class="line"> _instance.frame = CGRectMake(self.view.frame.size.width-width, 0, width, _weexHeight);</div><div class="line"> </div><div class="line"> __weak typeof(self) weakSelf = self;</div><div class="line"> _instance.onCreate = ^(UIView *view) {</div><div class="line"> [weakSelf.weexView removeFromSuperview];</div><div class="line"> weakSelf.weexView = view;</div><div class="line"> [weakSelf.view addSubview:weakSelf.weexView];</div><div class="line"> UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, weakSelf.weexView);
</div><div class="line"> };</div><div class="line"> _instance.onFailed = ^(NSError *error) {</div><div class="line"> </div><div class="line"> };</div><div class="line"> </div><div class="line"> _instance.renderFinish = ^(UIView *view) {</div><div class="line"> [weakSelf updateInstanceState:WeexInstanceAppear];</div><div class="line"> };</div><div class="line"> </div><div class="line"> _instance.updateFinish = ^(UIView *view) {</div><div class="line"> };</div><div class="line"> if (!self.url) {</div><div class="line"> return;</div><div class="line"> }</div><div class="line"> NSURL *URL = [self testURL: [self.url absoluteString]];</div><div class="line"> NSString *randomURL = [NSString stringWithFormat:@"%@?random=%d",URL.absoluteString,arc4random()];</div><div class="line"> [_instance renderWithURL:[NSURL URLWithString:randomURL] options:@{@"bundleUrl":
URL.absoluteString} data:nil];</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u5177\u4f53\u5b9e\u73b0\u53ef\u53c2\u8003 <a href="https://github.com/weexteam/weex-devtool-iOS/blob/master/Devtools/playground/WeexDemo/WXDemoViewController.m" target="_blank" rel="external">playground</a> <code>WXDemoViewController.m</code> \u6587\u4ef6</p>
+<p><em>\u8bf4\u660e\uff1a\u76ee\u524d\u7248\u672c\u9700\u8981\u6ce8\u518c\u7684\u901a\u77e5\u540d\u79f0\u4e3a\u56fa\u5b9a\u7684 \u201cRefreshInstance\u201d\uff0c\u4e0b\u4e2a\u7248\u672c\u4f1a\u6dfb\u52a0\u7528\u6237\u81ea\u5b9a\u4e49 name \u3002</em></p>
+<h2 id="\u4f7f\u7528"><a href="#\u4f7f\u7528" class="headerlink" title="\u4f7f\u7528"></a>\u4f7f\u7528</h2><p>\u5982\u679c\u672a\u5b89\u88c5 Debugger Server\uff0c\u5728\u547d\u4ee4\u884c\u6267\u884c <code>npm install -g weex-toolkit</code> \u65e2\u53ef\u4ee5\u5b89\u88c5\u8c03\u8bd5\u670d\u52a1\u5668\uff0c\u8fd0\u884c\u547d\u4ee4 <code>weex debug</code> \u5c31\u4f1a\u542f\u52a8 DebugServer \u5e76\u6253\u5f00\u4e00\u4e2a\u8c03\u8bd5\u9875\u9762\uff08\u8be6\u60c5\u8bf7\u67e5\u770b <a href="../../guide/index.html">\u300aGet started\u300b</a>\uff09\u3002\u9875\u9762\u4e0b\u65b9\u4f1a\u5c55\u793a\u4e00\u4e2a\u4e8c\u7ef4\u7801\uff0c\u8fd9\u4e2a\u4e8c\u7ef4\u7801\u7528\u4e8e\u5411 App \u4f20\u9012 Server \u7aef\u7684\u5730\u5740\u5efa\u7acb\u8fde\u63a5\u3002</p>
+<ol>
+<li><p>\u65e5\u5fd7\u7ea7\u522b\u63a7\u5236</p>
+<p><img src="//img.alicdn.com/tps/TB1F8WONXXXXXa_apXXXXXXXXXX-1706-674.png" alt="_"><br>\u65e5\u5fd7\u7ea7\u522b\u53ef\u4ee5\u63a7\u5236native\u7aef\u5173\u4e8eweex\u7684\u65e5\u5fd7\u3002</p>
+<p>\u65e5\u8bb0\u7ea7\u522b\u63cf\u8ff0\u5982\u4e0b\uff1a</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">Off = 0, </div><div class="line">Error = Error</div><div class="line">Warning = Error | Warning,</div><div class="line">Info = Warning | Info,</div><div class="line">Log = Log | Info,</div><div class="line">Debug = Log | Debug, </div><div class="line">All = NSUIntegerMax</div></pre></td></tr></table></figure>
+<p>\u89e3\u91ca\uff1aoff \u5173\u95ed\u65e5\u5fd7\uff0cWarning \u5305\u542b Error\u3001Warning\uff0cInfo \u5305\u542b Warning\u3001Info\uff0cLog \u5305\u542b Info\u3001Log\uff0cDebug \u5305\u542b Log\u3001Debug\uff0cAll \u5305\u542b\u6240\u6709\u3002</p>
+</li>
+<li><p>Vdom/Native tree\u9009\u62e9</p>
+<p><img src="//img.alicdn.com/tps/TB19Yq5NXXXXXXVXVXXXXXXXXXX-343-344.png" alt=""></p>
+<p><em>\u56fe\u4e00</em></p>
+<p><img src="//img.alicdn.com/tps/TB1vomVNXXXXXcXaXXXXXXXXXXX-2072-1202.png" alt="\u56fe\u4e8c"> </p>
+<p><em>\u56fe\u4e8c</em></p>
+<p>\u70b9\u51fb\u56fe\u4e00\u6240\u793anative\u9009\u9879\u4f1a\u6253\u5f00\u56fe\u4e8c\uff0c\u65b9\u4fbf\u67e5\u770bnative tree\u4ee5\u53caview property</p>
+<p><img src="//img.alicdn.com/tps/TB116y0NXXXXXXNaXXXXXXXXXXX-1448-668.png" alt="vdom"></p>
+<p><em>\u56fe\u4e09</em></p>
+<p><img src="//img.alicdn.com/tps/TB16frmNXXXXXa7XXXXXXXXXXXX-2106-1254.png" alt="vdom_tree"> </p>
+<p><em>\u56fe\u56db</em></p>
+<p>\u70b9\u51fb\u56fe\u4e09\u6240\u793a vdom \u9009\u9879\u4f1a\u6253\u5f00\u56fe\u56db\uff0c\u65b9\u4fbf\u67e5\u770b vdom tree \u4ee5\u53ca component property\u3002 </p>
+</li>
+</ol>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/advanced/integrate-devtool-to-ios.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[32/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/switch.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/switch.html b/content/cn/references/components/switch.html
new file mode 100644
index 0000000..682e01f
--- /dev/null
+++ b/content/cn/references/components/switch.html
@@ -0,0 +1,1376 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><switch> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;switch&gt;v0.6.1+
+&lt;switch&gt; \u662f Weex \u7684\u5185\u7f6e\u7ec4\u4ef6\uff0c\u7528\u6765\u521b\u5efa\u4e0e iOS \u4e00\u81f4\u6837\u5f0f\u7684\u6309\u94ae\u3002\u4f8b\u5982\uff0c\u5728 iPhone \u4e2d\u7684\u8bbe\u7f6e\u5e94\u7528\u4e2d\u7684\u98de\u884c\u6a21\u5f0f\u6309\u94ae\u5c31\u662f\u4e00\u4e2a switch \u6309\u94ae\u3002
+\u5b50\u7ec4\u4ef6&lt;switch&gt; \u7ec4\u4ef6\u4e0d\u652f\u6301\u4efb\u4f55\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+checked {boolean}\uff1a\u9ed8\u8ba4\u503c\u4e3a false\uff0c\u8868\u660e\u6309\u94ae\u662f\u5426\u5f00\u542f is on or not.
+disab">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<switch>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/switch.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;switch&gt;v0.6.1+
+&lt;switch&gt; \u662f Weex \u7684\u5185\u7f6e\u7ec4\u4ef6\uff0c\u7528\u6765\u521b\u5efa\u4e0e iOS \u4e00\u81f4\u6837\u5f0f\u7684\u6309\u94ae\u3002\u4f8b\u5982\uff0c\u5728 iPhone \u4e2d\u7684\u8bbe\u7f6e\u5e94\u7528\u4e2d\u7684\u98de\u884c\u6a21\u5f0f\u6309\u94ae\u5c31\u662f\u4e00\u4e2a switch \u6309\u94ae\u3002
+\u5b50\u7ec4\u4ef6&lt;switch&gt; \u7ec4\u4ef6\u4e0d\u652f\u6301\u4efb\u4f55\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+checked {boolean}\uff1a\u9ed8\u8ba4\u503c\u4e3a false\uff0c\u8868\u660e\u6309\u94ae\u662f\u5426\u5f00\u542f is on or not.
+disab">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.851Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<switch>">
+<meta name="twitter:description" content="&lt;switch&gt;v0.6.1+
+&lt;switch&gt; \u662f Weex \u7684\u5185\u7f6e\u7ec4\u4ef6\uff0c\u7528\u6765\u521b\u5efa\u4e0e iOS \u4e00\u81f4\u6837\u5f0f\u7684\u6309\u94ae\u3002\u4f8b\u5982\uff0c\u5728 iPhone \u4e2d\u7684\u8bbe\u7f6e\u5e94\u7528\u4e2d\u7684\u98de\u884c\u6a21\u5f0f\u6309\u94ae\u5c31\u662f\u4e00\u4e2a switch \u6309\u94ae\u3002
+\u5b50\u7ec4\u4ef6&lt;switch&gt; \u7ec4\u4ef6\u4e0d\u652f\u6301\u4efb\u4f55\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+checked {boolean}\uff1a\u9ed8\u8ba4\u503c\u4e3a false\uff0c\u8868\u660e\u6309\u94ae\u662f\u5426\u5f00\u542f is on or not.
+disab">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link current "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link current "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <switch>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.851Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-switch-gt"><a href="#lt-switch-gt" class="headerlink" title="<switch>"></a><switch></h1><p><span class="weex-version">v0.6.1+</span></p>
+<p><code><switch></code> \u662f Weex \u7684\u5185\u7f6e\u7ec4\u4ef6\uff0c\u7528\u6765\u521b\u5efa\u4e0e iOS \u4e00\u81f4\u6837\u5f0f\u7684\u6309\u94ae\u3002\u4f8b\u5982\uff0c\u5728 iPhone \u4e2d\u7684\u8bbe\u7f6e\u5e94\u7528\u4e2d\u7684\u98de\u884c\u6a21\u5f0f\u6309\u94ae\u5c31\u662f\u4e00\u4e2a switch \u6309\u94ae\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p><code><switch></code> \u7ec4\u4ef6<strong>\u4e0d\u652f\u6301</strong>\u4efb\u4f55\u5b50\u7ec4\u4ef6\u3002</p>
+<h2 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h2><ul>
+<li><code>checked {boolean}</code>\uff1a\u9ed8\u8ba4\u503c\u4e3a <code>false</code>\uff0c\u8868\u660e\u6309\u94ae\u662f\u5426\u5f00\u542f is on or not.</li>
+<li><code>disabled {boolean}</code>\uff1a\u9ed8\u8ba4\u503c\u4e3a <code>false</code>\uff0c\u8868\u660e\u662f\u5426\u6fc0\u6d3b\u6309\u94ae</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><p>\u503c\u5f97\u6ce8\u610f\u7684\u662f\uff0c\u5728\u8fd9\u4e2a\u7ec4\u4ef6\u4e0a\uff0c\u6709\u4e9b\u6837\u5f0f\u7ec4\u4ef6\u5c5e\u6027<strong>\u4e0d\u80fd\u4f7f\u7528</strong>\uff0c\u5b83\u4eec\u662f\uff1a</p>
+<ul>
+<li><code>width</code></li>
+<li><code>height</code></li>
+<li><code>min-width</code></li>
+<li><code>min-height</code></li>
+<li><code>margin</code></li>
+<li><code>padding</code></li>
+<li><code>border</code></li>
+</ul>
+<p><strong>\u6ce8\u610f\uff1a</strong></p>
+<p>\u5982\u679c <code><switch></code> \u7684\u5bb9\u5668\u6ca1\u6709\u8bbe\u7f6e\u4e3a <code>align-items\uff1aflex-start</code>\uff0c\u5219 Android \u4e2d\u7684\u5f00\u5173\u5c06\u88ab\u62c9\u4f38\u3002</p>
+<ul>
+<li><p>\u901a\u7528\u6837\u5f0f</p>
+<ul>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+</li>
+</ul>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><ul>
+<li><p><code>change</code>\uff1a\u6539\u53d8\u5f00\u5173\u72b6\u6001\u65f6\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002</p>
+<p>\u4e8b\u4ef6\u4e2d event \u5bf9\u8c61\u5c5e\u6027\uff1a</p>
+<ul>
+<li><code>value</code>: \u7ec4\u4ef6\u5e03\u5c14\u503c\u771f\u6216\u5047\u3002</li>
+<li><code>timestamp</code>: \u4e8b\u4ef6\u7684\u65f6\u95f4\u6233\u3002</li>
+</ul>
+</li>
+<li><p>\u901a\u7528\u4e8b\u4ef6</p>
+<p>\u652f\u6301\u6240\u6709\u901a\u7528\u4e8b\u4ef6\uff1a</p>
+<ul>
+<li><code>click</code></li>
+<li><code>longpress</code></li>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a></p>
+</li>
+</ul>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"example"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"label"</span>></span>normal<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">switch</span>></span><span class="tag"></<span class="name">switch</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"example"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"label"</span>></span>checked<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">switch</span> <span class="attr">checked</span>=<span class="string">"true"</span>></span><span class="tag"></<span class="name">switch</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"example"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"label"</span>></sp
an>disabled<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">switch</span> <span class="attr">disabled</span>=<span class="string">"true"</span> <span class="attr">checked</span>=<span class="string">"true"</span>></span><span class="tag"></<span class="name">switch</span>></span></div><div class="line"> <span class="tag"><<span class="name">switch</span> <span class="attr">disabled</span>=<span class="string">"true"</span>></span><span class="tag"></<span class="name">switch</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"example"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"lab
el"</span>></span>onchange<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">switch</span> @<span class="attr">change</span>=<span class="string">"onchange"</span>></span><span class="tag"></<span class="name">switch</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"info"</span>></span>{{checked}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></spa
n></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">checked</span>: <span class="literal">false</span></div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> onchange (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">`onchage, value: <span class="subst">${event.value}</span>`</span>)</div><div class="line"> <span class="keyword">this</span>.checked = event.value</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><
div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.example</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: row;</div><div class="line"> <span class="attribute">justify-content</span>: flex-start;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">60px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.label</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">40px</span>;</div><div class="line"> <span class="attribute">line-height</span>: <span class="number">60px</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">350px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#666</spa
n>;</div><div class="line"> <span class="attribute">text-align</span>: right;</div><div class="line"> <span class="attribute">margin-right</span>: <span class="number">20px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.info</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">line-height</span>: <span class="number">60px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#BBB</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">10px</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/switch.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/switch.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/switch.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/text.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/text.html b/content/cn/references/components/text.html
new file mode 100644
index 0000000..69622ed
--- /dev/null
+++ b/content/cn/references/components/text.html
@@ -0,0 +1,1375 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><text> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;text&gt;&lt;text&gt; \u662f Weex \u5185\u7f6e\u7684\u7ec4\u4ef6\uff0c\u7528\u6765\u5c06\u6587\u672c\u6309\u7167\u6307\u5b9a\u7684\u6837\u5f0f\u6e32\u67d3\u51fa\u6765\u3002&lt;text&gt; \u53ea\u80fd\u5305\u542b\u6587\u672c\u503c\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 {{}} \u6807\u8bb0\u63d2\u5165\u53d8\u91cf\u503c\u4f5c\u4e3a\u6587\u672c\u5185\u5bb9\u3002
+\u5b50\u7ec4\u4ef6\u6b64\u7ec4\u4ef6\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+value {string}: \u7ec4\u4ef6\u7684\u503c\uff0c\u4e0e &lt;text&gt; \u6807\u7b7e\u4e2d\u7684\u6587\u672c\u5185\u5bb9\u76f8\u540c\u3002
+
+\u6837\u5f0f
+lines {number}: \u6307\u5b9a\u6587\u672c\u884c\u6570\u3002\u9ed8\u8ba4\u503c\u662f 0">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<text>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/text.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;text&gt;&lt;text&gt; \u662f Weex \u5185\u7f6e\u7684\u7ec4\u4ef6\uff0c\u7528\u6765\u5c06\u6587\u672c\u6309\u7167\u6307\u5b9a\u7684\u6837\u5f0f\u6e32\u67d3\u51fa\u6765\u3002&lt;text&gt; \u53ea\u80fd\u5305\u542b\u6587\u672c\u503c\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 {{}} \u6807\u8bb0\u63d2\u5165\u53d8\u91cf\u503c\u4f5c\u4e3a\u6587\u672c\u5185\u5bb9\u3002
+\u5b50\u7ec4\u4ef6\u6b64\u7ec4\u4ef6\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+value {string}: \u7ec4\u4ef6\u7684\u503c\uff0c\u4e0e &lt;text&gt; \u6807\u7b7e\u4e2d\u7684\u6587\u672c\u5185\u5bb9\u76f8\u540c\u3002
+
+\u6837\u5f0f
+lines {number}: \u6307\u5b9a\u6587\u672c\u884c\u6570\u3002\u9ed8\u8ba4\u503c\u662f 0">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.852Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<text>">
+<meta name="twitter:description" content="&lt;text&gt;&lt;text&gt; \u662f Weex \u5185\u7f6e\u7684\u7ec4\u4ef6\uff0c\u7528\u6765\u5c06\u6587\u672c\u6309\u7167\u6307\u5b9a\u7684\u6837\u5f0f\u6e32\u67d3\u51fa\u6765\u3002&lt;text&gt; \u53ea\u80fd\u5305\u542b\u6587\u672c\u503c\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 {{}} \u6807\u8bb0\u63d2\u5165\u53d8\u91cf\u503c\u4f5c\u4e3a\u6587\u672c\u5185\u5bb9\u3002
+\u5b50\u7ec4\u4ef6\u6b64\u7ec4\u4ef6\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+value {string}: \u7ec4\u4ef6\u7684\u503c\uff0c\u4e0e &lt;text&gt; \u6807\u7b7e\u4e2d\u7684\u6587\u672c\u5185\u5bb9\u76f8\u540c\u3002
+
+\u6837\u5f0f
+lines {number}: \u6307\u5b9a\u6587\u672c\u884c\u6570\u3002\u9ed8\u8ba4\u503c\u662f 0">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link current "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link current "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <text>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.852Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-text-gt"><a href="#lt-text-gt" class="headerlink" title="<text>"></a><text></h1><p><code><text></code> \u662f Weex \u5185\u7f6e\u7684\u7ec4\u4ef6\uff0c\u7528\u6765\u5c06\u6587\u672c\u6309\u7167\u6307\u5b9a\u7684\u6837\u5f0f\u6e32\u67d3\u51fa\u6765\u3002<code><text></code> \u53ea\u80fd\u5305\u542b\u6587\u672c\u503c\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 <code>{{}}</code> \u6807\u8bb0\u63d2\u5165\u53d8\u91cf\u503c\u4f5c\u4e3a\u6587\u672c\u5185\u5bb9\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p>\u6b64\u7ec4\u4ef6\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002</p>
+<h2 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h2><ul>
+<li><code>value {string}</code>: \u7ec4\u4ef6\u7684\u503c\uff0c\u4e0e <code><text></code> \u6807\u7b7e\u4e2d\u7684\u6587\u672c\u5185\u5bb9\u76f8\u540c\u3002</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><ul>
+<li><code>lines {number}</code>: \u6307\u5b9a\u6587\u672c\u884c\u6570\u3002\u9ed8\u8ba4\u503c\u662f <code>0</code> \u4ee3\u8868\u4e0d\u9650\u5236\u884c\u6570\u3002</li>
+<li><p>text styles: \u67e5\u770b <a href="../text-style.html">\u6587\u672c\u6837\u5f0f</a></p>
+<ul>
+<li>\u652f\u6301 <code>color</code> \u6837\u5f0f.</li>
+<li>\u652f\u6301 <code>font-size</code> \u6837\u5f0f. iOS\u9ed8\u8ba4\u503c\uff1a<code>32</code>\uff0cAndroid\uff1a\u4e0d\u540c\u8bbe\u5907\u4e0d\u540c\uff0cH5 \u9ed8\u8ba4\u503c\uff1a<code>32</code>.</li>
+<li>\u652f\u6301 <code>font-style</code> \u6837\u5f0f.</li>
+<li>\u652f\u6301 <code>font-weight</code> \u6837\u5f0f.</li>
+<li>\u652f\u6301 <code>text-align</code> \u6837\u5f0f.</li>
+<li>\u652f\u6301 <code>text-decoration</code> \u6837\u5f0f.</li>
+<li>\u652f\u6301 <code>text-overflow</code> \u6837\u5f0f.</li>
+<li>\u652f\u6301 <code>line-height</code>\u6837\u5f0f<sup class="wx-v">0.6.1+</sup> \u3002<code>line-height</code> \u5728 iOS \u4e2d\u4e0e H5 \u548c Android \u4e2d\u4e0d\u540c\uff0c \u6587\u672c\u503c\u5c06\u653e\u7f6e\u5728\u6846\u7684\u5e95\u90e8\u3002</li>
+<li>\u4e0d\u652f\u6301 <code>flex-direction</code>, <code>justify-content</code>, <code>align-items</code> \u8fd9\u4e9b\u4e3a\u5b50\u8282\u70b9\u8bbe\u7f6e\u7684\u5c5e\u6027\uff0c\u5e76\u4e14<code><text></code>\u6ca1\u6709\u5b50\u8282\u70b9\u3002</li>
+</ul>
+</li>
+<li><p>\u901a\u7528\u6837\u5f0f\uff1a\u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+</li>
+</ul>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><ul>
+<li><p>\u901a\u7528\u4e8b\u4ef6<br>\u652f\u6301\u6240\u6709\u901a\u7528\u4e8b\u4ef6\uff1a</p>
+<ul>
+<li><code>click</code></li>
+<li><code>longpress</code></li>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a></p>
+</li>
+</ul>
+<h2 id="\u7ea6\u675f"><a href="#\u7ea6\u675f" class="headerlink" title="\u7ea6\u675f"></a>\u7ea6\u675f</h2><ol>
+<li><code><text></code> \u91cc\u76f4\u63a5\u5199\u6587\u672c\u5934\u5c3e\u7a7a\u767d\u4f1a\u88ab\u8fc7\u6ee4\uff0c\u5982\u679c\u9700\u8981\u4fdd\u7559\u5934\u5c3e\u7a7a\u767d\uff0c\u6682\u65f6\u53ea\u80fd\u901a\u8fc7\u6570\u636e\u7ed1\u5b9a\u5199\u5934\u5c3e\u7a7a\u683c\u3002</li>
+</ol>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span> <span class="attr">lines</span>=<span class="string">"3"</span>></span>Weex \u662f\u4e00\u5957\u7b80\u5355\u6613\u7528\u7684\u8de8\u5e73\u53f0\u5f00\u53d1\u65b9\u6848\uff0c\u80fd\u4ee5 Web \u7684\u5f00\u53d1\u4f53\u9a8c\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684\u539f\u751f\u5e94\u7528\u3002Vue \u662f\u4e00\u4e2a\u8f7b\u91cf\u5e76\u4e14\u529f\u80fd\u5f3a\u5927\u7684\u6e10\u8fdb\u5f0f\u524d\u7aef\u6846\u67b6\u3002<span class="tag"></<span class="n
ame">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span> <span class="attr">lines</span>=<span class="string">"3"</span>></span>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. <span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"><
;/<span class="name">template</span>></span></div><div class="line"></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.panel</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">600px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">75px</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="
line"> <span class="attribute">border-color</span>: <span class="number">#BBB</span>;</div><div class="line"> <span class="attribute">padding-top</span>: <span class="number">15px</span>;</div><div class="line"> <span class="attribute">padding-bottom</span>: <span class="number">15px</span>;</div><div class="line"> <span class="attribute">padding-left</span>: <span class="number">15px</span>;</div><div class="line"> <span class="attribute">padding-right</span>: <span class="number">15px</span>;</div><div class="line"> <span class="attribute">margin-bottom</span>: <span class="number">30px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">lines</span>: <span class="number">3</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#666666</span>;</div><div class="line"> <span class="attribute">font-size</span>: <s
pan class="number">32px</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/text.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/text.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/text.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[10/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/how-to/index.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/how-to/index.html b/content/cn/v-0.10/guide/how-to/index.html
new file mode 100644
index 0000000..eba395d
--- /dev/null
+++ b/content/cn/v-0.10/guide/how-to/index.html
@@ -0,0 +1,634 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5982\u4f55\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762Weex Devtools \u662f\u4e3a Weex \u5f00\u53d1\u8005\u670d\u52a1\u7684\u4e00\u6b3e\u8c03\u8bd5\u5de5\u5177\uff0c\u80fd\u591f\u5ba1\u67e5 Weex app \u8fd0\u884c\u65f6\u5c5e\u6027\uff0c\u53ef\u5bf9 .we \u4ee3\u7801\u53ca JavaScript \u4ee3\u7801\u65ad\u70b9\u8c03\u8bd5\uff0c\u652f\u6301 iOS \u548c Android \u4e24\u4e2a\u5e73\u53f0\u3002
+Weex Devtools \u57fa\u4e8e Chrome devtools \u5b9e\u73b0\u4e86 Chrome Debugging Protocol\uff0c\u80fd\u591f\u4f7f\u7528 C">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/how-to/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5982\u4f55\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762Weex Devtools \u662f\u4e3a Weex \u5f00\u53d1\u8005\u670d\u52a1\u7684\u4e00\u6b3e\u8c03\u8bd5\u5de5\u5177\uff0c\u80fd\u591f\u5ba1\u67e5 Weex app \u8fd0\u884c\u65f6\u5c5e\u6027\uff0c\u53ef\u5bf9 .we \u4ee3\u7801\u53ca JavaScript \u4ee3\u7801\u65ad\u70b9\u8c03\u8bd5\uff0c\u652f\u6301 iOS \u548c Android \u4e24\u4e2a\u5e73\u53f0\u3002
+Weex Devtools \u57fa\u4e8e Chrome devtools \u5b9e\u73b0\u4e86 Chrome Debugging Protocol\uff0c\u80fd\u591f\u4f7f\u7528 C">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1aPTEKFXXXXXaXXXXXXXXXXXX-1436-813.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1_trbKFXXXXc0XVXXXXXXXXXX-2880-1800.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1O.nwKFXXXXX8XpXXXXXXXXXX-1436-811.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1_.20OpXXXXX4XVXXXXXXXXXX-1314-787.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB16L3ENXXXXXcsXVXXXXXXXXXX-2878-1798.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1TsMuNXXXXXcsaXXXXXXXXXXX-2450-1460.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1NjO_KFXXXXcaaXXXXXXXXXXX-2880-1800.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1ck6lKFXXXXbZXFXXXXXXXXXX-2880-1800.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1a7HqKFXXXXXMXFXXXXXXXXXX-2880-1800.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1oY6cKFXXXXXQaXXXXXXXXXXX-2880-1800.png">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.937Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762">
+<meta name="twitter:description" content="\u5982\u4f55\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762Weex Devtools \u662f\u4e3a Weex \u5f00\u53d1\u8005\u670d\u52a1\u7684\u4e00\u6b3e\u8c03\u8bd5\u5de5\u5177\uff0c\u80fd\u591f\u5ba1\u67e5 Weex app \u8fd0\u884c\u65f6\u5c5e\u6027\uff0c\u53ef\u5bf9 .we \u4ee3\u7801\u53ca JavaScript \u4ee3\u7801\u65ad\u70b9\u8c03\u8bd5\uff0c\u652f\u6301 iOS \u548c Android \u4e24\u4e2a\u5e73\u53f0\u3002
+Weex Devtools \u57fa\u4e8e Chrome devtools \u5b9e\u73b0\u4e86 Chrome Debugging Protocol\uff0c\u80fd\u591f\u4f7f\u7528 C">
+<meta name="twitter:image" content="https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link current ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link current ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.937Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5982\u4f55\u4f7f\u7528-Devtools-\u8c03\u8bd5-Weex-\u9875\u9762"><a href="#\u5982\u4f55\u4f7f\u7528-Devtools-\u8c03\u8bd5-Weex-\u9875\u9762" class="headerlink" title="\u5982\u4f55\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762"></a>\u5982\u4f55\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</h1><p>Weex Devtools \u662f\u4e3a Weex \u5f00\u53d1\u8005\u670d\u52a1\u7684\u4e00\u6b3e\u8c03\u8bd5\u5de5\u5177\uff0c\u80fd\u591f\u5ba1\u67e5 Weex app \u8fd0\u884c\u65f6\u5c5e\u6027\uff0c\u53ef\u5bf9 <code>.we</code> \u4ee3\u7801\u53ca JavaScript \u4ee3\u7801\u65ad\u70b9\u8c03\u8bd5\uff0c\u652f\u6301 iOS \u548c Android \u4e24\u4e2a\u5e73\u53f0\u3002</p>
+<p>Weex Devtools \u57fa\u4e8e Chrome devtools \u5b9e\u73b0\u4e86 <a href="https://developer.chrome.com/devtools/docs/debugger-protocol" target="_blank" rel="external">Chrome Debugging Protocol</a>\uff0c\u80fd\u591f\u4f7f\u7528 Chrome devtools \u8c03\u8bd5 Weex \u9879\u76ee\uff0c\u5176\u4e3b\u8981\u529f\u80fd\u5206\u4e3a\u4e24\u5927\u90e8\u5206\u2014\u2014 Debugger \u548c Inspector\u3002</p>
+<h2 id="Devtools-\u4e3b\u8981\u529f\u80fd\u4e00\u89c8"><a href="#Devtools-\u4e3b\u8981\u529f\u80fd\u4e00\u89c8" class="headerlink" title="Devtools \u4e3b\u8981\u529f\u80fd\u4e00\u89c8"></a>Devtools \u4e3b\u8981\u529f\u80fd\u4e00\u89c8</h2><h3 id="\u8fde\u63a5\u8bbe\u5907"><a href="#\u8fde\u63a5\u8bbe\u5907" class="headerlink" title="\u8fde\u63a5\u8bbe\u5907"></a>\u8fde\u63a5\u8bbe\u5907</h3><p>devtools \u53ef\u4ee5\u52a8\u6001\u68c0\u6d4b\u5ba2\u6237\u7aef\u7684\u8fde\u63a5\u7ed1\u5b9a\u8bf7\u6c42\uff0c\u540c\u65f6\u8fde\u63a5\uff0f\u8c03\u8bd5\u591a\u4e2a device\uff08\u6216\u8005\u6a21\u62df\u5668\uff09\u662f\u5f88\u5bb9\u6613\u7684\u4e8b\u60c5\uff0c\u8fde\u63a5\u5230 Devtools \u7684\u5ba2\u6237\u7aef\u663e\u793a\u5728 \u201cDevice List\u201d \u754c\u9762\u3002\u5982\u4e0b\u56fe\u6240\u793a\u3002</p>
+<p><img src="https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png" alt="devtools-main"></p>
+<p>\u70b9\u51fb\u5bf9\u5e94\u8bbe\u5907\u7684 Debugger \u6309\u94ae\u5373\u5f00\u59cb\u8c03\u8bd5\u6d41\u7a0b\uff0c\u5e76\u5f39\u51faJS\u65ad\u70b9\u8c03\u8bd5\u7684\u9875\u9762\uff1b\u968f\u540e\u70b9\u51fb Inspector \u6309\u94ae\u53ef\u5f39\u51fa\u8c03\u8bd5 DOM \u7684\u9875\u9762\u3002</p>
+<h3 id="Debugger"><a href="#Debugger" class="headerlink" title="Debugger"></a>Debugger</h3><p>\u8fd9\u4e2a\u662f\u7528\u6765\u8c03\u8bd5 Weex \u7684 JSBundle \u4ee3\u7801\u7684\u9875\u9762\uff0c\u201cSources\u201d tab \u80fd\u591f\u663e\u793a\u6240\u6709 JS \u6e90\u7801\uff0c\u5305\u62ec Weex JSFramework \u548c JSBundle \u4ee3\u7801\u3002\u53ef\u4ee5\u8bbe\u7f6e\u65ad\u70b9\u3001\u67e5\u770b\u8c03\u7528\u6808\uff0c\u4e0e Chrome \u6d4f\u89c8\u5668\u8c03\u8bd5\u7c7b\u4f3c\u3002\u201cConsole\u201d \u63a7\u5236\u53f0\u663e\u793a\u524d\u7aef\u7684 Log \u4fe1\u606f\uff0c\u5e76\u80fd\u6839\u636e\u7ea7\u522b\uff08info/warn/error\u7b49\uff09\u548c\u5173\u952e\u5b57\u8fc7\u6ee4\u3002</p>
+<p><img src="https://img.alicdn.com/tps/TB1aPTEKFXXXXXaXXXXXXXXXXXX-1436-813.png" alt="devtools-debugger"></p>
+<h3 id="\u65ad\u70b9\u8c03\u8bd5"><a href="#\u65ad\u70b9\u8c03\u8bd5" class="headerlink" title="\u65ad\u70b9\u8c03\u8bd5"></a>\u65ad\u70b9\u8c03\u8bd5</h3><p><img src="https://img.alicdn.com/tps/TB1_trbKFXXXXc0XVXXXXXXXXXX-2880-1800.png" alt="debugger-breakpoint"></p>
+<h3 id="Inspector"><a href="#Inspector" class="headerlink" title="Inspector"></a>Inspector</h3><p>Inspector \u529f\u80fd\u4e30\u5bcc\uff0c\u80fd\u591f\u7528\u6765\u67e5\u770b <code>Element</code> \ <code>Network</code> \ <code>Console log</code> \ <code>Screencast</code> \ <code>BoxModel</code> \ <code>Native View</code> \u7b49\u3002</p>
+<p><img src="https://img.alicdn.com/tps/TB1O.nwKFXXXXX8XpXXXXXXXXXX-1436-811.png" alt="devtools-inspector"></p>
+<h3 id="Device-Screencast-amp-View-Inspect"><a href="#Device-Screencast-amp-View-Inspect" class="headerlink" title="Device Screencast & View Inspect"></a>Device Screencast & View Inspect</h3><p>\u5982\u4e0b\u56fe\u6240\u793a\uff0c\u901a\u8fc7 Inspector \u9875\u9762\u7684\u4e24\u4e2a\u5f00\u5173\uff0c\u70b9\u51fb\u53f3\u4fa7 Icon \u53ef\u4ee5\u6253\u5f00\u8bbe\u5907\u6295\u5c4f\uff0c\u7136\u540e\u70b9\u51fb\u5de6\u4fa7 Icon \u518d\u5728\u6295\u5c4f\u4e0a\u70b9\u9009\u5143\u7d20\u5219\u53ef\u4ee5\u81ea\u52a8\u5728 DOM tree \u4e2d\u5b9a\u4f4d\u5e76\u5ba1\u67e5\u8be5\u5143\u7d20\u3002</p>
+<p><img src="https://img.alicdn.com/tps/TB1_.20OpXXXXX4XVXXXXXXXXXX-1314-787.png" alt="screencast-inspect"></p>
+<h3 id="Elements"><a href="#Elements" class="headerlink" title="Elements"></a>Elements</h3><p>\u8fd9\u91cc\u5c55\u793a\u7684\u662f\u5728 Android\uff0fiOS \u4e0a\u7684 native DOM \u6811\uff0c\u53ca\u5176 style \u5c5e\u6027\u548c layout \u56fe\u3002\u9f20\u6807\u5728 DOM \u6811\u79fb\u52a8\u65f6\uff0c\u5728 device\uff08\u6216\u6a21\u62df\u5668\uff09\u4e0a\u5bf9\u5e94\u8282\u70b9\u4f1a\u9ad8\u4eae\u663e\u793a\uff0c\u6709\u52a9\u4e8e native \u5f00\u53d1\u8005\u5b9a\u4f4d\u548c\u53d1\u73b0\u8282\u70b9\u3002</p>
+<p><strong>\u6ce8\u610f\uff1a</strong><br>screencast \u53ea\u662f\u5bf9\u5c4f\u5e55\u56fe\u50cf\u62f7\u8d1d\uff0c\u5728\u8fdc\u7a0b\u8c03\u8bd5\u65f6\u80fd\u770b\u5230\u8fdc\u7a0b\u8bbe\u5907\u754c\u9762\uff0c\u6570\u636e\u7f51\u7edc\u4e0b screencast \u4e5f\u5c06\u6709\u8f83\u5927\u6d41\u91cf\u82b1\u9500\uff0c\u5982\u679c\u8bbe\u5907\u5c31\u5728\u624b\u5934\u513f\u5219\u5efa\u8bae\u5173\u6389\u3002</p>
+<p>Elements \u5ba1\u67e5\u6709\u4e24\u79cd\u6a21\u5f0f\u5206\u522b\u662f\uff1anative \u548c vdom\u3002\u5176\u4e2d\uff0cnative \u6a21\u5f0f\u4e0b\u5c55\u793a\u7684\u662f Weex \u6240\u6620\u5c04\u7684 native view \u7684\u7ed3\u6784\uff0c\u5b83\u66f4\u63a5\u8fd1\u5b9e\u73b0\u672c\u8d28\uff1bvdom \u6a21\u5f0f\u5219\u5bf9\u5e94 <code>.we</code> \u6587\u4ef6\u4e2d\u5b9a\u4e49\u7684 dom \u7ed3\u6784\uff0c\u4e3b\u8981\u7528\u6765\u5ba1\u67e5 <code>.we</code> \u6587\u4ef6\u7f16\u8bd1\u4e3a JSBundle \u4e4b\u540e\u5bf9\u5e94\u7684 dom tree \u7684\u903b\u8f91\u6784\u6210\u3002</p>
+<h4 id="native-view-element"><a href="#native-view-element" class="headerlink" title="native view element"></a>native view element</h4><p><img src="https://img.alicdn.com/tps/TB16L3ENXXXXXcsXVXXXXXXXXXX-2878-1798.png" alt="native-element"></p>
+<h4 id="weex-dom-element"><a href="#weex-dom-element" class="headerlink" title="weex dom element"></a>weex dom element</h4><p><img src="https://img.alicdn.com/tps/TB1TsMuNXXXXXcsaXXXXXXXXXXX-2450-1460.png" alt="dom-element"></p>
+<h3 id="Network"><a href="#Network" class="headerlink" title="Network"></a>Network</h3><p>\u8fd9\u91cc\u5c55\u793a\u7684\u662f JSBundle \u8d44\u6e90\u52a0\u8f7d\u7f51\u7edc\u8bbf\u95ee\u7684\u6027\u80fd\u3002\u6240\u4ee5\u5982\u679c JSBundle \u8d44\u6e90\u5728\u8bbe\u5907\u672c\u5730\uff0cNetwork \u662f\u6ca1\u6709\u6570\u636e\u7684\u3002</p>
+<h4 id="\u67e5\u770b\u7f51\u7edc\u8bf7\u6c42\u7684\u603b\u8017\u65f6\u548c\u5ef6\u65f6"><a href="#\u67e5\u770b\u7f51\u7edc\u8bf7\u6c42\u7684\u603b\u8017\u65f6\u548c\u5ef6\u65f6" class="headerlink" title="\u67e5\u770b\u7f51\u7edc\u8bf7\u6c42\u7684\u603b\u8017\u65f6\u548c\u5ef6\u65f6"></a>\u67e5\u770b\u7f51\u7edc\u8bf7\u6c42\u7684\u603b\u8017\u65f6\u548c\u5ef6\u65f6</h4><p><img src="https://img.alicdn.com/tps/TB1NjO_KFXXXXcaaXXXXXXXXXXX-2880-1800.png" alt="inspector-network"></p>
+<h4 id="\u67e5\u770b\u7f51\u7edc\u8bf7\u6c42\u7684header\u548cresponse"><a href="#\u67e5\u770b\u7f51\u7edc\u8bf7\u6c42\u7684header\u548cresponse" class="headerlink" title="\u67e5\u770b\u7f51\u7edc\u8bf7\u6c42\u7684header\u548cresponse"></a>\u67e5\u770b\u7f51\u7edc\u8bf7\u6c42\u7684header\u548cresponse</h4><p><img src="https://img.alicdn.com/tps/TB1ck6lKFXXXXbZXFXXXXXXXXXX-2880-1800.png" alt="inspector-network"></p>
+<h3 id="\u63a7\u5236\u53f0"><a href="#\u63a7\u5236\u53f0" class="headerlink" title="\u63a7\u5236\u53f0"></a>\u63a7\u5236\u53f0</h3><p>\u8fd9\u91cc\u663e\u793a\u7684\u662f Android\uff0fiOS \u4e0a\u7684 native log\uff0c\u5e76\u4e0d\u662f JS log\uff08JS log \u663e\u793a\u5728 Debugger \u9875\u9762\uff09\u3002\u540c\u6837 native log \u4e5f\u6709\u5bf9\u5e94\u7ea7\u522b\u2013warn/error \u7b49\u548c\u5173\u952e\u5b57\u8fc7\u6ee4\uff0cnative \u5f00\u53d1\u67e5\u8be2\u5f88\u65b9\u4fbf\u3002</p>
+<p><img src="https://img.alicdn.com/tps/TB1a7HqKFXXXXXMXFXXXXXXXXXX-2880-1800.png" alt="inspector-console"></p>
+<h3 id="\u8d44\u6e90\uff08Android-Only\uff09"><a href="#\u8d44\u6e90\uff08Android-Only\uff09" class="headerlink" title="\u8d44\u6e90\uff08Android Only\uff09"></a>\u8d44\u6e90\uff08Android Only\uff09</h3><p>\u8fdc\u7aef\u8bbf\u95ee\u7684\u8d44\u6e90\u6587\u4ef6\u4f1a\u663e\u793a\u5728\u8fd9\u91cc\uff0c\u8fd9\u91cc\u4e0d\u662f\u67e5\u770b\u6e90\u7801\u7684\u6700\u4f73\u65b9\u5f0f\u3002\u5728 Debugger \u9875\u9762\uff0c\u201cSources\u201d \u91cc\u5df2\u7ecf\u6709\u6e90\u7801\u5e76\u53ef\u4ee5\u65ad\u70b9\u8c03\u8bd5\u3002\u5982\u679c\u4f60\u7684\u5e94\u7528\u91cc\u6709 SQLITE \u6570\u636e\u5e93\u6587\u4ef6\uff0c\u5728\u8fd9\u91cc\u65e0\u9700 root \u4fbf\u53ef\u4ee5\u67e5\u770b\u548c\u66f4\u65b0\uff0c\u5bf9\u4e8e mock \u6570\u636e\u6765\u8bf4\u6bd4\u8f83\u4fbf\u5229\u3002</p>
+<p><img src="https://img.alicdn.com/tps/TB1oY6cKFXXXXXQaXXXXXXXXXXX-2880-1800.png" alt="inspector-resource"></p>
+<h3 id="\u8fdc\u7a0b\u63a7\u5236-Android-Only"><a href="#\u8fdc\u7a0b\u63a7\u5236-Android-Only" class="headerlink" title="\u8fdc\u7a0b\u63a7\u5236 (Android Only)"></a>\u8fdc\u7a0b\u63a7\u5236 (Android Only)</h3><p>Android \u7248\u672c\u652f\u6301\u5728 screencast \u4e0a\u8fdb\u884c\u8fdc\u7a0b\u63a7\u5236\uff0c\u80fd\u591f\u901a\u8fc7\u9f20\u6807\u6a21\u62df\u5728\u624b\u673a\u7684\u8f93\u5165\u4e8b\u4ef6\uff0c\u65b9\u4fbf\u624b\u673a\u4e0d\u5728\u672c\u5730\u7684\u7528\u6237\u8fdb\u884c\u8fdc\u7a0b\u8c03\u8bd5\u3002</p>
+<h2 id="\u5982\u4f55\u5b89\u88c5\u548c\u542f\u52a8devtools"><a href="#\u5982\u4f55\u5b89\u88c5\u548c\u542f\u52a8devtools" class="headerlink" title="\u5982\u4f55\u5b89\u88c5\u548c\u542f\u52a8devtools"></a>\u5982\u4f55\u5b89\u88c5\u548c\u542f\u52a8devtools</h2><p>\u65e0\u8bba\u662f\u8dd1\u5728 iOS \u6216\u8005 Android \u7aef\uff0c<a href="https://github.com/weexteam/weex-devtool" target="_blank" rel="external">weex-devtool</a> \u90fd\u662f\u5fc5\u9700\u7684\uff0c\u7528\u6765\u542f\u52a8\u670d\u52a1\u5668\u548c Chrome \u9875\u9762\u3002</p>
+<h3 id="\u5b89\u88c5"><a href="#\u5b89\u88c5" class="headerlink" title="\u5b89\u88c5"></a>\u5b89\u88c5</h3><p>\u5982\u679c\u4f60\u5df2\u7ecf\u5728\u524d\u9762\u7684\u6559\u7a0b\u4e2d\u5b89\u88c5\u8fc7 weex-toolkit\uff0c\u5c31\u65e0\u9700\u518d\u6b21\u5b89\u88c5\u4e86\u3002</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ npm install -g weex-toolkit</div></pre></td></tr></table></figure>
+<h4 id="\u7528\u6cd5"><a href="#\u7528\u6cd5" class="headerlink" title="\u7528\u6cd5"></a>\u7528\u6cd5</h4><p> weex debug [options] [we_file|bundles_dir]</p>
+<p> \u9009\u9879:</p>
+<pre><code>-h, --help \u663e\u793a\u5e2e\u52a9
+-V, --verbose \u663e\u793adebug\u670d\u52a1\u5668\u8fd0\u884c\u65f6\u7684\u5404\u79cdlog
+-v, --version \u663e\u793a\u7248\u672c
+-p, --port [port] \u8bbe\u7f6edebug\u670d\u52a1\u5668\u7aef\u53e3\u53f7 \u9ed8\u8ba4\u4e3a8088
+-e, --entry [entry] debug\u4e00\u4e2a\u76ee\u5f55\u65f6,\u8fd9\u4e2a\u53c2\u6570\u6307\u5b9a\u6574\u4e2a\u76ee\u5f55\u7684\u5165\u53e3bundle\u6587\u4ef6,\u8fd9\u4e2abundle\u6587\u4ef6\u7684\u5730\u5740\u4f1a\u663e\u793a\u5728debug\u4e3b\u9875\u4e0a(\u4f5c\u4e3a\u4e8c\u7ef4\u7801)
+-m, --mode [mode] \u8bbe\u7f6e\u6784\u5efawe\u6587\u4ef6\u7684\u65b9\u5f0f,transformer \u6700\u57fa\u7840\u7684\u98ce\u683c\u9002\u5408\u5355\u6587\u4ef6,loader:wepack\u98ce\u683c \u9002\u5408\u6a21\u5757\u5316\u7684\u591a\u6587\u4ef6.\u9ed8\u8ba4\u4e3atransformer
+</code></pre><h2 id="\u5982\u4f55\u5728\u8bbe\u5907\u6216\u8005\u6a21\u62df\u5668\u4e0a\u8c03\u8bd5"><a href="#\u5982\u4f55\u5728\u8bbe\u5907\u6216\u8005\u6a21\u62df\u5668\u4e0a\u8c03\u8bd5" class="headerlink" title="\u5982\u4f55\u5728\u8bbe\u5907\u6216\u8005\u6a21\u62df\u5668\u4e0a\u8c03\u8bd5"></a>\u5982\u4f55\u5728\u8bbe\u5907\u6216\u8005\u6a21\u62df\u5668\u4e0a\u8c03\u8bd5</h2><h3 id="weex\u8c03\u8bd5\u521d\u4f53\u9a8c\u4e4bplayground"><a href="#weex\u8c03\u8bd5\u521d\u4f53\u9a8c\u4e4bplayground" class="headerlink" title="weex\u8c03\u8bd5\u521d\u4f53\u9a8c\u4e4bplayground"></a>weex\u8c03\u8bd5\u521d\u4f53\u9a8c\u4e4bplayground</h3><p>\u5982\u679c\u4f60\u662f\u4e00\u540d Weex \u8c03\u8bd5\u7684\u65b0\u624b\uff0c\u90a3\u4e48\u63a8\u8350\u4f60\u5148\u4e0b\u8f7d <a href="http://alibaba.github.io/weex/download.html" target="_blank" rel="external">Playground</a> \u4f53\u9a8c\u4e00\u4e0b Devtools \u8c03\u8bd5 JSBundle \u7684\u57fa\u7840\u6d41\u7a0b.</p>
+<ul>
+<li><p>\u524d\u63d0: </p>
+<ul>
+<li>\u5b89\u88c5 <code>weex-toolkit</code>\uff0c\u5185\u542b\u8c03\u8bd5\u547d\u4ee4 <code>weex debug</code></li>
+<li>android\uff0fiOS \u8bbe\u5907\u4e0e PC \u5728\u540c\u4e00\u5c40\u57df\u7f51\uff0c\u82e5\u4f4d\u4e8e\u4e0d\u540c\u7f51\u6bb5\u8bf7\u786e\u4fdd\u9632\u706b\u5899\u53ef\u8bbf\u95ee\u6027</li>
+</ul>
+</li>
+<li><p>Inspector \u529f\u80fd\u6f14\u793a</p>
+</li>
+</ul>
+<embed src="//cloud.video.taobao.com/play/u/1955166971/p/2/e/1/t/1/45803002.swf" quality="high" width="100%" height="500px" align="middle" allowscriptaccess="never" allowfullscreen="true" type="application/x-shockwave-flash">
+
+<ul>
+<li>Debugger\u529f\u80fd\u6f14\u793a</li>
+</ul>
+<embed src="//cloud.video.taobao.com/play/u/1955166971/p/2/e/1/t/1/45803641.swf" quality="high" width="100%" height="500px" align="middle" allowscriptaccess="never" allowfullscreen="true" type="application/x-shockwave-flash">
+
+<ul>
+<li><p>\u8c03\u8bd5\u6b65\u9aa4:</p>
+<ul>
+<li><strong>\u542f\u52a8 debug server</strong></li>
+</ul>
+<p>\u6267\u884c\u547d\u4ee4 <code>weex debug</code> \u5c06\u542f\u52a8 debug server\u3002\u5982\u679c\u542f\u52a8\u6210\u529f\u5c06\u4f1a\u5728 Chrome \u6253\u5f00\u4e00\u4e2a welcome \u9875\u9762\uff0c\u5728\u7f51\u9875\u4e0b\u65b9\u6709\u4e00\u4e2a\u4e8c\u7ef4\u7801\u3002</p>
+<ul>
+<li><strong>\u542f\u52a8 Playground \u5e76\u626b\u7801</strong></li>
+</ul>
+<p>\u70b9\u51fb\u542f\u9996\u9875\u5de6\u4e0a\u89d2\u7684\u626b\u7801\u6309\u94ae\u626b\u7801\u4e0a\u4e00\u6b65\u4e2d\u7f51\u9875\u4e0b\u65b9\u7684\u4e8c\u7ef4\u7801\u3002\u6b64\u65f6 welcome \u9875\u9762\u5c06\u4f1a\u51fa\u73b0\u4f60\u7684\u8bbe\u5907\u4fe1\u606f\u3002Playground \u8fdb\u5165 loading \u9875\u9762\uff0c\u7b49\u5f85\u4f60\u7684\u4e0b\u4e00\u6b65\u64cd\u4f5c\u3002</p>
+<ul>
+<li><strong>\u70b9\u51fb\u7f51\u9875\u4e0a\u7684 Debugger \u6309\u94ae</strong></li>
+</ul>
+<p>app \u7ed3\u675f loading \u8fdb\u5165 debugging \u72b6\u6001\u3002\u540c\u65f6 Chrome \u5c06\u4f1a\u6253\u5f00 Debugger \u9875\u9762\u3002\u6309\u7167\u9875\u9762\u63d0\u793a\u6253\u5f00\u8be5\u9875\u7684 JavaScript \u63a7\u5236\u53f0\u5e76\u8fdb\u5165 source tab\u3002</p>
+<ul>
+<li><strong>\u8bbe\u7f6e\u65ad\u70b9\u5237\u65b0\u5f53\u524d\u9875</strong></li>
+</ul>
+<p>\u70b9\u51fb Playground \u9996\u9875 list \u4e2d\u7684\u4efb\u610f\u9879\u5c06\u6253\u5f00\u4e00\u4e2a Weex \u9875\u9762\uff0c\u6b64\u65f6\u5728 Sources \u91cc\u4f1a\u51fa\u73b0\u76f8\u5e94\u7684 JSBundle \u6587\u4ef6\uff0c\u8bbe\u7f6e\u65ad\u70b9\u5e76\u5237\u65b0 Playground \u5373\u53ef\u8c03\u8bd5\u3002</p>
+<ul>
+<li><strong>\u70b9\u51fb\u7f51\u9875\u4e0a\u7684 Inspector \u6309\u94ae</strong></li>
+</ul>
+<p>Chrome \u4f1a\u6253\u5f00 inspector\u9875\u9762\uff0c\u53ef\u4ee5\u67e5\u770bElement\uff0c Console\uff0c Network\u72b6\u6001\u3002</p>
+</li>
+</ul>
+<h3 id="Weex\u8c03\u8bd5\u521d\u4f53\u9a8c\u4e4b\u5e94\u7528"><a href="#Weex\u8c03\u8bd5\u521d\u4f53\u9a8c\u4e4b\u5e94\u7528" class="headerlink" title="Weex\u8c03\u8bd5\u521d\u4f53\u9a8c\u4e4b\u5e94\u7528"></a>Weex\u8c03\u8bd5\u521d\u4f53\u9a8c\u4e4b\u5e94\u7528</h3><p>\u5982\u679c\u662f\u63a5\u5165 Weex \u7684\u5e94\u7528\u60f3\u8c03\u8bd5\u81ea\u5df1\u7684 Weex \u4ee3\u7801\uff0c\u6709\u4ee5\u4e0b\u51e0\u4e2a\u65b9\u5f0f\uff1a</p>
+<ol>
+<li><p>\u501f\u52a9 Playground \u626b\u7801\u8c03\u8bd5</p>
+<ul>
+<li>\u5148\u786e\u5b9a Playground \u5df2\u7ecf\u662f\u53ef\u8c03\u8bd5\u72b6\u6001</li>
+<li>\u4f7f\u7528\u547d\u4ee4\u884c\u5de5\u5177\u6253\u5f00\u8c03\u8bd5\u529f\u80fd <code>weex debug</code>\uff0c\u7528 Playground \u626b\u6d4f\u89c8\u5668\u6253\u5f00\u7684\u9875\u9762\u4e2d\u7684\u4e8c\u7ef4\u7801 </li>
+<li>\u7528 Playground \u626b\u63cf JSBundle \u4e8c\u7ef4\u7801</li>
+<li>\u624b\u673a\u4e0a\u5373\u663e\u793a Weex \u9875\u9762\u7684\u7ed3\u679c\u3002\u76f8\u5e94\u5728 \u201cDebugger\u201d \u548c \u201cInspector\u201d \u9875\u9762\u8c03\u8bd5\u3002</li>
+</ul>
+</li>
+<li><p>\u4e3a\u5e94\u7528\u63a5\u5165 Devtools \u63a5\u53e3</p>
+<ul>
+<li><a href="https://github.com/weexteam/weex_devtools_android/blob/master/README-zh.html" target="_blank" rel="external">Android sdk\u63a5\u5165\u6307\u5357</a></li>
+<li><a href="https://github.com/weexteam/weex-devtool-iOS/blob/master/README-zh.html" target="_blank" rel="external">iOS sdk\u63a5\u5165\u6307\u5357</a></li>
+</ul>
+</li>
+</ol>
+<p>\u6709\u4efb\u4f55\u95ee\u9898\u6216\u8005\u5efa\u8bae\uff0c\u8bf7\u63d0\u4ea4<a href="https://github.com/weexteam/weex-devtool/issues" target="_blank" rel="external">\u8fd9\u91cc</a>\uff0c\u4f1a\u5f88\u5feb\u5f97\u5230\u89e3\u7b54\u3002</p>
+<h2 id="\u66f4\u8be6\u7ec6\u7684\u89c6\u9891\u8bb2\u89e3"><a href="#\u66f4\u8be6\u7ec6\u7684\u89c6\u9891\u8bb2\u89e3" class="headerlink" title="\u66f4\u8be6\u7ec6\u7684\u89c6\u9891\u8bb2\u89e3"></a>\u66f4\u8be6\u7ec6\u7684\u89c6\u9891\u8bb2\u89e3</h2><ul>
+<li>\u7b2c\u4e00\u96c6 devtools\u7b80\u4ecb<br><a href="http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45796387.swf" target="_blank" rel="external">http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45796387.swf</a></li>
+<li>\u7b2c\u4e8c\u96c6 inspector\u529f\u80fd\u6f14\u793a<br><a href="http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45803002.swf" target="_blank" rel="external">http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45803002.swf</a></li>
+<li>\u7b2c\u4e09\u96c6 debugger\u529f\u80fd\u6f14\u793a<br><a href="http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45803641.swf" target="_blank" rel="external">http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45803641.swf</a></li>
+<li>\u7b2c\u56db\u96c6 native \u4e0e weex \u8054\u8c03<br><a href="http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45804472.swf" target="_blank" rel="external">http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45804472.swf</a></li>
+<li>\u7b2c\u4e94\u96c6 \u7b2c\u4e09\u65b9App\u63a5\u5165\u6307\u5357<br><a href="http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45805276.swf" target="_blank" rel="external">http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45805276.swf</a></li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/how-to/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/how-to/require-3rd-party-libs.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/how-to/require-3rd-party-libs.html b/content/cn/v-0.10/guide/how-to/require-3rd-party-libs.html
new file mode 100644
index 0000000..b582646
--- /dev/null
+++ b/content/cn/v-0.10/guide/how-to/require-3rd-party-libs.html
@@ -0,0 +1,530 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e930.4
+\u5728 Get started \u4e2d\uff0c\u6211\u4eec\u5b66\u4e60\u4e86\u77e5\u9053\u53ef\u4ee5\u5728 &lt;script&gt; \u6807\u7b7e\u4e2d\u7f16\u5199 JavaScript \u4ee3\u7801\u3002\u4f46\u662f\u5728\u9879\u76ee\u4e2d\u5e38\u7528\u7684\u529f\u80fd\u6216\u6a21\u5757\uff0c\u4f8b\u5982\u89e3\u6790url\u53c2\u6570\uff0c\u5c06\u5c5e\u6027\u4ece\u4e00\u4e9b\u5bf9\u8c61\u6269\u5c55\u5230\u53e6\u4e00\u4e2a\u5bf9\u8c61\u7b49\u7b49\uff0c\u5728\u6bcf\u4e2a\u7ec4\u4ef6\u4e2d\u590d\u5236\u548c\u7c98\u8d34\u8fd9\u4e9b\u4ee3\u7801\u662f\u4e00\u4e2a\u7cdf\u7cd5\u7684\u505a\u6cd5\uff0c\u56e0\u6b64\u8feb\u5207\u9700\u8981\u901a\u8fc7 require \u7684\u65b9\u5f0f\u5bf9\u53ef\u590d\u7528\u7684\u4ee3\u7801\u8fdb\u884c\u7ba1\u7406\u3002Weex \u4e3a\u5f00\u53d1\u4eba\u5458\u63d0\u4f9b\u4e86 CommonJS \u98ce\u683c\u7684">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/how-to/require-3rd-party-libs.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e930.4
+\u5728 Get started \u4e2d\uff0c\u6211\u4eec\u5b66\u4e60\u4e86\u77e5\u9053\u53ef\u4ee5\u5728 &lt;script&gt; \u6807\u7b7e\u4e2d\u7f16\u5199 JavaScript \u4ee3\u7801\u3002\u4f46\u662f\u5728\u9879\u76ee\u4e2d\u5e38\u7528\u7684\u529f\u80fd\u6216\u6a21\u5757\uff0c\u4f8b\u5982\u89e3\u6790url\u53c2\u6570\uff0c\u5c06\u5c5e\u6027\u4ece\u4e00\u4e9b\u5bf9\u8c61\u6269\u5c55\u5230\u53e6\u4e00\u4e2a\u5bf9\u8c61\u7b49\u7b49\uff0c\u5728\u6bcf\u4e2a\u7ec4\u4ef6\u4e2d\u590d\u5236\u548c\u7c98\u8d34\u8fd9\u4e9b\u4ee3\u7801\u662f\u4e00\u4e2a\u7cdf\u7cd5\u7684\u505a\u6cd5\uff0c\u56e0\u6b64\u8feb\u5207\u9700\u8981\u901a\u8fc7 require \u7684\u65b9\u5f0f\u5bf9\u53ef\u590d\u7528\u7684\u4ee3\u7801\u8fdb\u884c\u7ba1\u7406\u3002Weex \u4e3a\u5f00\u53d1\u4eba\u5458\u63d0\u4f9b\u4e86 CommonJS \u98ce\u683c\u7684">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.938Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93">
+<meta name="twitter:description" content="\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e930.4
+\u5728 Get started \u4e2d\uff0c\u6211\u4eec\u5b66\u4e60\u4e86\u77e5\u9053\u53ef\u4ee5\u5728 &lt;script&gt; \u6807\u7b7e\u4e2d\u7f16\u5199 JavaScript \u4ee3\u7801\u3002\u4f46\u662f\u5728\u9879\u76ee\u4e2d\u5e38\u7528\u7684\u529f\u80fd\u6216\u6a21\u5757\uff0c\u4f8b\u5982\u89e3\u6790url\u53c2\u6570\uff0c\u5c06\u5c5e\u6027\u4ece\u4e00\u4e9b\u5bf9\u8c61\u6269\u5c55\u5230\u53e6\u4e00\u4e2a\u5bf9\u8c61\u7b49\u7b49\uff0c\u5728\u6bcf\u4e2a\u7ec4\u4ef6\u4e2d\u590d\u5236\u548c\u7c98\u8d34\u8fd9\u4e9b\u4ee3\u7801\u662f\u4e00\u4e2a\u7cdf\u7cd5\u7684\u505a\u6cd5\uff0c\u56e0\u6b64\u8feb\u5207\u9700\u8981\u901a\u8fc7 require \u7684\u65b9\u5f0f\u5bf9\u53ef\u590d\u7528\u7684\u4ee3\u7801\u8fdb\u884c\u7ba1\u7406\u3002Weex \u4e3a\u5f00\u53d1\u4eba\u5458\u63d0\u4f9b\u4e86 CommonJS \u98ce\u683c\u7684">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link current ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link current ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.938Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93"><a href="#\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93" class="headerlink" title="\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93"></a>\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</h1><p><span class="weex-version">0.4</span></p>
+<p>\u5728 <a href="../index.html">Get started</a> \u4e2d\uff0c\u6211\u4eec\u5b66\u4e60\u4e86\u77e5\u9053\u53ef\u4ee5\u5728 <code><script></code> \u6807\u7b7e\u4e2d\u7f16\u5199 JavaScript \u4ee3\u7801\u3002\u4f46\u662f\u5728\u9879\u76ee\u4e2d\u5e38\u7528\u7684\u529f\u80fd\u6216\u6a21\u5757\uff0c\u4f8b\u5982\u89e3\u6790url\u53c2\u6570\uff0c\u5c06\u5c5e\u6027\u4ece\u4e00\u4e9b\u5bf9\u8c61\u6269\u5c55\u5230\u53e6\u4e00\u4e2a\u5bf9\u8c61\u7b49\u7b49\uff0c\u5728\u6bcf\u4e2a\u7ec4\u4ef6\u4e2d\u590d\u5236\u548c\u7c98\u8d34\u8fd9\u4e9b\u4ee3\u7801\u662f\u4e00\u4e2a\u7cdf\u7cd5\u7684\u505a\u6cd5\uff0c\u56e0\u6b64\u8feb\u5207\u9700\u8981\u901a\u8fc7 <code>require</code> \u7684\u65b9\u5f0f\u5bf9\u53ef\u590d\u7528\u7684\u4ee3\u7801\u8fdb\u884c\u7ba1\u7406\u3002Weex \u4e3a\u5f00\u53d1\u4eba\u5458\u63d0\u4f9b\u4e86 CommonJS \u98ce\u683c\u7684 require \u8bed\u6cd5\u3002</p>
+<p>\u6211\u4eec\u4ee5 <code>extend</code> \u4f5c\u4e3a\u4f8b\u5b50\u3002</p>
+<h2 id="\u5f15\u5165\u672c\u5730-JS-Modules"><a href="#\u5f15\u5165\u672c\u5730-JS-Modules" class="headerlink" title="\u5f15\u5165\u672c\u5730 JS Modules"></a>\u5f15\u5165\u672c\u5730 JS Modules</h2><p>\u4e0b\u9762\u662f <code>extend</code> \u6700\u7b80\u5355\u7684\u5b9e\u73b0\uff0c\u5e76\u5c06\u5176\u653e\u5728 <code>./common/utils.js</code> \u8def\u5f84\u4e2d\u3002</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">extend</span>(<span class="params">dest, src</span>) </span>{</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> src) {</div><div class="line"> dest[key] = src[key]</div><div class="line"> }</div><div class="line">}</div><div class="line">exports.extend = extend</div></pre></td></tr></table></figure>
+<p>\u5728 <code>.we</code> \u6587\u4ef6\u4e2d\uff0c<code>extend</code> \u53ef\u4ee5\u4e0e<code>require</code>\u4e00\u8d77\u4f7f\u7528\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> utils = <span class="built_in">require</span>(<span class="string">'./common/utils'</span>)</div><div class="line"> <span class="keyword">var</span> obj1 = {<span class="attr">a</span>: <span class="number">1</span>}</div><div class="line"> <span class="keyword">var</span> obj2 = {<span class="attr">b</span>: <span class="number">2</span>}</div><div class="line"> utils.extend(obj1, obj2) <span class="comment">// obj1 => {a: 1, b: 2}</span></div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<h2 id="\u5f15\u5165\u5df2\u7ecf\u5b89\u88c5\u7684-Node-js-Modules"><a href="#\u5f15\u5165\u5df2\u7ecf\u5b89\u88c5\u7684-Node-js-Modules" class="headerlink" title="\u5f15\u5165\u5df2\u7ecf\u5b89\u88c5\u7684 Node.js Modules"></a>\u5f15\u5165\u5df2\u7ecf\u5b89\u88c5\u7684 Node.js Modules</h2><p><a href="http://underscorejs.org" target="_blank" rel="external">underscore</a> \u662f\u4e00\u4e2a JavaScript \u5e93\uff0c\u5b83\u63d0\u4f9b\u4e86\u4e00\u6574\u5957\u51fd\u6570\u5f0f\u7f16\u7a0b\u7684\u5b9e\u7528\u529f\u80fd\uff0c\u800c\u4e0d\u6269\u5c55\u4efb\u4f55 JavaScript \u5185\u7f6e\u5bf9\u8c61\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u66f4\u5177\u7a33\u5065\u6027\u7684 <a href="http://underscorejs.org/#extend" target="_blank" rel="external"><code>extend</code></a>\u3002</p>
+<p>\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528 underscore \u7684 <code>extend</code>\uff0c\u800c\u4e0d\u662f\u6211\u4eec\u81ea\u5df1\u5b9e\u73b0\u7684\u7248\u672c\u3002\u9996\u5148\uff0c\u5728\u9879\u76ee\u4e2d\u5b89\u88c5 underscore\uff0c\u7136\u540e\u6211\u4eec\u4fbf\u53ef\u4ee5\u5c06 underscore <code>reuqire</code> \u8fdb\u6765\u5e76\u4f7f\u7528\u5b83\u3002</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">npm install underscore</div></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> _ = <span class="built_in">require</span>(<span class="string">'underscore'</span>)</div><div class="line"> <span class="keyword">var</span> obj1 = {<span class="attr">a</span>: <span class="number">1</span>}</div><div class="line"> <span class="keyword">var</span> obj2 = {<span class="attr">b</span>: <span class="number">2</span>}</div><div class="line"> <span class="keyword">var</span> obj3 = {<span class="attr">c</span>: <span class="number">3</span>}</div><div class="line"> <span class="keyword">var</span> ret = _.extend(obj1, obj2, obj3) <span class="comment">// ret => {a: 1, b: 2, c: 3}</span></div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td
></tr></table></figure>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/how-to/require-3rd-party-libs.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html b/content/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html
new file mode 100644
index 0000000..05aa525
--- /dev/null
+++ b/content/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html
@@ -0,0 +1,564 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5c06 .we \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle0.4
+\u5728\u524d\u9762\u7684\u7ae0\u8282\u4e2d\u4f60\u5df2\u7ecf\u4e86\u89e3\u5230\u5982\u4f55\u7f16\u5199\u53ca\u7ec4\u7ec7 Weex \u4ee3\u7801\uff0c\u5982\u679c\u4f60\u8fd8\u6709\u7591\u95ee\uff0c\u53ef\u53c2\u8003 \u8bed\u6cd5 \u53ca \u624b\u518c\u3002 \u4f46\u662f\uff0cWeex \u8bed\u6cd5\u7684\u4ee3\u7801\u5fc5\u987b\u8f6c\u6362\u4e3a JSBundle\uff0c\u4ee5\u4fbf Weex JSFramework \u53ef\u4ee5\u5728 iOS\uff0cAndroid \u548c\u6d4f\u89c8\u5668\u7aef\u89e3\u6790\u548c\u6267\u884c\u3002\u4e86\u89e3\u66f4\u591a\u4fe1\u606f\uff0c\u53ef\u53c2\u8003 Weex \u5de5\u4f5c\u539f\u7406 \u548c JS Bundle \u683c\u5f0f
+\u73b0\u5728\uff0c\u56de\u5230\u5c06 .we \u6e90\u4ee3">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5c06 .we \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle0.4
+\u5728\u524d\u9762\u7684\u7ae0\u8282\u4e2d\u4f60\u5df2\u7ecf\u4e86\u89e3\u5230\u5982\u4f55\u7f16\u5199\u53ca\u7ec4\u7ec7 Weex \u4ee3\u7801\uff0c\u5982\u679c\u4f60\u8fd8\u6709\u7591\u95ee\uff0c\u53ef\u53c2\u8003 \u8bed\u6cd5 \u53ca \u624b\u518c\u3002 \u4f46\u662f\uff0cWeex \u8bed\u6cd5\u7684\u4ee3\u7801\u5fc5\u987b\u8f6c\u6362\u4e3a JSBundle\uff0c\u4ee5\u4fbf Weex JSFramework \u53ef\u4ee5\u5728 iOS\uff0cAndroid \u548c\u6d4f\u89c8\u5668\u7aef\u89e3\u6790\u548c\u6267\u884c\u3002\u4e86\u89e3\u66f4\u591a\u4fe1\u606f\uff0c\u53ef\u53c2\u8003 Weex \u5de5\u4f5c\u539f\u7406 \u548c JS Bundle \u683c\u5f0f
+\u73b0\u5728\uff0c\u56de\u5230\u5c06 .we \u6e90\u4ee3">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.939Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle">
+<meta name="twitter:description" content="\u5c06 .we \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle0.4
+\u5728\u524d\u9762\u7684\u7ae0\u8282\u4e2d\u4f60\u5df2\u7ecf\u4e86\u89e3\u5230\u5982\u4f55\u7f16\u5199\u53ca\u7ec4\u7ec7 Weex \u4ee3\u7801\uff0c\u5982\u679c\u4f60\u8fd8\u6709\u7591\u95ee\uff0c\u53ef\u53c2\u8003 \u8bed\u6cd5 \u53ca \u624b\u518c\u3002 \u4f46\u662f\uff0cWeex \u8bed\u6cd5\u7684\u4ee3\u7801\u5fc5\u987b\u8f6c\u6362\u4e3a JSBundle\uff0c\u4ee5\u4fbf Weex JSFramework \u53ef\u4ee5\u5728 iOS\uff0cAndroid \u548c\u6d4f\u89c8\u5668\u7aef\u89e3\u6790\u548c\u6267\u884c\u3002\u4e86\u89e3\u66f4\u591a\u4fe1\u606f\uff0c\u53ef\u53c2\u8003 Weex \u5de5\u4f5c\u539f\u7406 \u548c JS Bundle \u683c\u5f0f
+\u73b0\u5728\uff0c\u56de\u5230\u5c06 .we \u6e90\u4ee3">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link current ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link current ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.939Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5c06-we-\u6e90\u4ee3\u7801\u8f6c\u6362\u6210-JS-Bundle"><a href="#\u5c06-we-\u6e90\u4ee3\u7801\u8f6c\u6362\u6210-JS-Bundle" class="headerlink" title="\u5c06 .we \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle"></a>\u5c06 <code>.we</code> \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</h1><p><span class="weex-version">0.4</span></p>
+<p>\u5728\u524d\u9762\u7684\u7ae0\u8282\u4e2d\u4f60\u5df2\u7ecf\u4e86\u89e3\u5230\u5982\u4f55\u7f16\u5199\u53ca\u7ec4\u7ec7 Weex \u4ee3\u7801\uff0c\u5982\u679c\u4f60\u8fd8\u6709\u7591\u95ee\uff0c\u53ef\u53c2\u8003 <a href="../syntax/main.html">\u8bed\u6cd5</a> \u53ca <a href="../../references/main.html">\u624b\u518c</a>\u3002 \u4f46\u662f\uff0cWeex \u8bed\u6cd5\u7684\u4ee3\u7801\u5fc5\u987b\u8f6c\u6362\u4e3a JSBundle\uff0c\u4ee5\u4fbf Weex JSFramework \u53ef\u4ee5\u5728 iOS\uff0cAndroid \u548c\u6d4f\u89c8\u5668\u7aef\u89e3\u6790\u548c\u6267\u884c\u3002\u4e86\u89e3\u66f4\u591a\u4fe1\u606f\uff0c\u53ef\u53c2\u8003 <a href="../../advanced/how-it-works.html">Weex \u5de5\u4f5c\u539f\u7406</a> \u548c <a href="../../references/specs/js-bundle-format.html">JS Bundle \u683c\u5f0f</a></p>
+<p>\u73b0\u5728\uff0c\u56de\u5230\u5c06 <code>.we</code> \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle \u7684\u4e3b\u9898\u3002\u6709\u51e0\u79cd\u65b9\u6cd5\u6765\u5b9e\u73b0\u8fd9\u4e00\u76ee\u6807\u3002</p>
+<h2 id="\u4f7f\u7528-weex-toolkit"><a href="#\u4f7f\u7528-weex-toolkit" class="headerlink" title="\u4f7f\u7528 weex-toolkit"></a>\u4f7f\u7528 weex-toolkit</h2><p>\u5982\u679c\u4f60\u5df2\u7ecf\u6709\u4e86 node.js \u5f00\u53d1\u73af\u5883\uff0c\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u3002\u5173\u4e8e node.js \u53ca\u5176\u4ed6\u4f9d\u8d56\u5b89\u88c5\u53ef\u53c2\u8003<a href="../develop-on-your-local-machine.html#\u7b2c\u4e00\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56">\u5b89\u88c5\u4f9d\u8d56</a><br><figure class="highlight bash"><table><tr><td class="code"><pre><div class="line"><span class="variable">$npm</span> install -g weex-toolkit</div></pre></td></tr></table></figure></p>
+<h3 id="\u5c06-we-\u6587\u4ef6\u8f6c\u6362\u4e3a-JS-Bundle"><a href="#\u5c06-we-\u6587\u4ef6\u8f6c\u6362\u4e3a-JS-Bundle" class="headerlink" title="\u5c06 .we \u6587\u4ef6\u8f6c\u6362\u4e3a JS Bundle"></a>\u5c06 <code>.we</code> \u6587\u4ef6\u8f6c\u6362\u4e3a JS Bundle</h3><figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ weex your_best_weex.we -o .</div></pre></td></tr></table></figure>
+<p><code>your_best_weex.we</code> \u5c06\u4f1a\u88ab\u8f6c\u6362\u4e3a <code>your_best_weex.js</code> \u5e76\u4fdd\u5b58\u5728\u5f53\u524d\u76ee\u5f55\u3002</p>
+<h3 id="\u5c06-we-\u6587\u4ef6\u8f6c\u6362\u4e3a-JS-Bundle-\u5e76\u5f00\u542f-watch-\u529f\u80fd\uff0c\u5b9e\u65f6\u81ea\u52a8\u8f6c\u6362"><a href="#\u5c06-we-\u6587\u4ef6\u8f6c\u6362\u4e3a-JS-Bundle-\u5e76\u5f00\u542f-watch-\u529f\u80fd\uff0c\u5b9e\u65f6\u81ea\u52a8\u8f6c\u6362" class="headerlink" title="\u5c06 .we \u6587\u4ef6\u8f6c\u6362\u4e3a JS Bundle \u5e76\u5f00\u542f watch \u529f\u80fd\uff0c\u5b9e\u65f6\u81ea\u52a8\u8f6c\u6362"></a>\u5c06 <code>.we</code> \u6587\u4ef6\u8f6c\u6362\u4e3a JS Bundle \u5e76\u5f00\u542f watch \u529f\u80fd\uff0c\u5b9e\u65f6\u81ea\u52a8\u8f6c\u6362</h3><figure class="highlight bash"><table><tr><td class="code"><pre><div class="line"></div><div class="line">$ weex your_best_weex.we -o . --watch</div></pre></td></tr></table></figure>
+<h3 id="\u5c06\u6240\u6709-we-\u6587\u4ef6\u8f6c\u6362\u5230\u4e00\u4e2a\u76ee\u5f55\u4e2d"><a href="#\u5c06\u6240\u6709-we-\u6587\u4ef6\u8f6c\u6362\u5230\u4e00\u4e2a\u76ee\u5f55\u4e2d" class="headerlink" title="\u5c06\u6240\u6709 .we \u6587\u4ef6\u8f6c\u6362\u5230\u4e00\u4e2a\u76ee\u5f55\u4e2d"></a>\u5c06\u6240\u6709 <code>.we</code> \u6587\u4ef6\u8f6c\u6362\u5230\u4e00\u4e2a\u76ee\u5f55\u4e2d</h3><figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ weex we/file/storage/path -o outputpath</div></pre></td></tr></table></figure>
+<p> <code>we/file/storage/path</code> \u76ee\u5f55\u4e0b\u7684\u6bcf\u4e2a <code>.we</code> \u6587\u4ef6\u90fd\u4f1a\u88ab\u8f6c\u6362\u4e3a JS Bundle \u5e76\u4fdd\u5b58\u5230 <code>outputpath</code> \u76ee\u5f55\u3002</p>
+<p>\u8bf7\u8bbf\u95ee <a href="https://www.npmjs.com/package/weex-toolkit" target="_blank" rel="external">npmjs.com</a> \u4e86\u89e3\u66f4\u591a\u5173\u4e8e <code>weex-toolkit</code>\u3002</p>
+<h2 id="transformer"><a href="#transformer" class="headerlink" title="transformer"></a>transformer</h2><figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">npm install weex-transformer</div></pre></td></tr></table></figure>
+<h3 id="CLI-Tool"><a href="#CLI-Tool" class="headerlink" title="CLI Tool"></a>CLI Tool</h3><figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">Usage: transformer [options] <file...></div><div class="line"></div><div class="line">Options:</div><div class="line"></div><div class="line"> -h, --help output usage information</div><div class="line"> -V, --version output the version number</div><div class="line"> -l, --oldFormat [value] whether to transform to old format (default: false)</div><div class="line"> -e, --isEntry [value] whether is an entry module which has `bootstrap` (default: true)</div><div class="line"> -o, --output [path] the output file dirname</div></pre></td></tr></table></figure>
+<h3 id="API"><a href="#API" class="headerlink" title="API"></a>API</h3><p><strong> transform(name, code, path, elements, config) </strong></p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> transformer = <span class="built_in">require</span>(<span class="string">'weex-transformer'</span>)</div><div class="line"><span class="keyword">var</span> output = transformer.transform(<span class="string">'foo'</span>, <span class="string">'/* code here */'</span>, <span class="string">'.'</span>, {})</div></pre></td></tr></table></figure>
+<p>\u53c2\u6570\uff1a</p>
+<ul>
+<li><code>name {string}</code>\uff1a\u5f53\u524d bundle \u6587\u4ef6\u540d</li>
+<li><code>code {string}</code>\uff1a\u6e90\u7801</li>
+<li><code>path {string}</code>\uff1a <em>\u53ef\u9009</em>\uff0c\u5f53\u5728\u67d0\u4e2a\u8def\u5f84\u4e2d\u67e5\u627e\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u65f6\u5f88\u6709\u7528</li>
+<li><code>elements {Object}</code>\uff1a<em>\u53ef\u9009</em>\uff0c\u5b58\u5728\u7684\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u6620\u5c04</li>
+<li><p><code>config {Object}</code>\uff1a<em>\u53ef\u9009</em></p>
+<ul>
+<li><code>oldFormat {boolean}</code>\uff1a\u662f\u5426\u8f6c\u6362\u4e3a\u65e7\u683c\u5f0f \uff08\u9ed8\u8ba4\uff1a<code>false</code>\uff09</li>
+<li><code>isEntry {boolean}</code>\uff1a\u662f\u5426\u662f\u5177\u6709 <code>bootstrap</code> \u7684\u5165\u53e3\u6a21\u5757 \uff08\u9ed8\u8ba4\uff1a<code>true</code>\uff09</li>
+</ul>
+</li>
+</ul>
+<p>\u8fd4\u56de\u503c:</p>
+<ul>
+<li>\u4e00\u4e2a\u5bf9\u8c61\uff1a<ul>
+<li><code>result {string}</code>\uff1a\u6240\u6709\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u7684 <code>define()</code> \u65b9\u6cd5\u548c\u6700\u7ec8\u7684 <code>bootstrap()</code></li>
+<li><code>logs {Array}</code>\uff1a\u76f8\u5e94\u7684\u8b66\u544a\u548c\u9519\u8bef\u65e5\u5fd7</li>
+</ul>
+</li>
+</ul>
+<h2 id="gulp-weex"><a href="#gulp-weex" class="headerlink" title="gulp weex"></a>gulp weex</h2><figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">npm install gulp-weex</div></pre></td></tr></table></figure>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>)</div><div class="line"><span class="keyword">var</span> weex = <span class="built_in">require</span>(<span class="string">'gulp-weex'</span>)</div><div class="line"></div><div class="line">gulp.task(<span class="string">'default'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> gulp.src(<span class="string">'src/*.html'</span>)</div><div class="line"> .pipe(weex({}))</div><div class="line"> .pipe(gulp.dest(<span class="string">'./dest'</span>))</div><div class="line">})</div></pre></td></tr></table></figure>
+<p>\u53c2\u6570:</p>
+<ul>
+<li><code>oldFormat {boolean}</code>\uff1a\u662f\u5426\u8f6c\u6362\u4e3a\u65e7\u683c\u5f0f \uff08\u9ed8\u8ba4\uff1a<code>false</code>\uff09</li>
+<li><code>isEntry {boolean}</code>\uff1a\u662f\u5426\u662f\u5177\u6709 <code>bootstrap</code> \u7684\u5165\u53e3\u6a21\u5757 \uff08\u9ed8\u8ba4\uff1a<code>true</code>\uff09</li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/how-to/transform-code-into-js-bundle.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[31/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/textarea.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/textarea.html b/content/cn/references/components/textarea.html
new file mode 100644
index 0000000..e3aac1c
--- /dev/null
+++ b/content/cn/references/components/textarea.html
@@ -0,0 +1,1403 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><textarea> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;textarea&gt;v0.8+
+textarea \u662f Weex \u5185\u7f6e\u7684\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u7528\u4e8e\u7528\u6237\u4ea4\u4e92\uff0c\u63a5\u53d7\u7528\u6237\u8f93\u5165\u6570\u636e\u3002 \u53ef\u4ee5\u8ba4\u4e3a\u662f\u5141\u8bb8\u591a\u884c\u7684 &lt;input&gt;
+Notes: &lt;textarea&gt;\u652f\u6301 &lt;input&gt; \u652f\u6301\u7684\u6240\u6709\u7684\u4e8b\u4ef6\u3002
+\u5b50\u7ec4\u4ef6textarea \u7ec4\u4ef6\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+value {string}\uff1a\u7ec4\u4ef6\u7684\u63a5\u6536\u5230\u7684\u8f93\u5165\u5b57\u7b26\u3002
+placehold">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<textarea>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/textarea.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;textarea&gt;v0.8+
+textarea \u662f Weex \u5185\u7f6e\u7684\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u7528\u4e8e\u7528\u6237\u4ea4\u4e92\uff0c\u63a5\u53d7\u7528\u6237\u8f93\u5165\u6570\u636e\u3002 \u53ef\u4ee5\u8ba4\u4e3a\u662f\u5141\u8bb8\u591a\u884c\u7684 &lt;input&gt;
+Notes: &lt;textarea&gt;\u652f\u6301 &lt;input&gt; \u652f\u6301\u7684\u6240\u6709\u7684\u4e8b\u4ef6\u3002
+\u5b50\u7ec4\u4ef6textarea \u7ec4\u4ef6\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+value {string}\uff1a\u7ec4\u4ef6\u7684\u63a5\u6536\u5230\u7684\u8f93\u5165\u5b57\u7b26\u3002
+placehold">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.853Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<textarea>">
+<meta name="twitter:description" content="&lt;textarea&gt;v0.8+
+textarea \u662f Weex \u5185\u7f6e\u7684\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u7528\u4e8e\u7528\u6237\u4ea4\u4e92\uff0c\u63a5\u53d7\u7528\u6237\u8f93\u5165\u6570\u636e\u3002 \u53ef\u4ee5\u8ba4\u4e3a\u662f\u5141\u8bb8\u591a\u884c\u7684 &lt;input&gt;
+Notes: &lt;textarea&gt;\u652f\u6301 &lt;input&gt; \u652f\u6301\u7684\u6240\u6709\u7684\u4e8b\u4ef6\u3002
+\u5b50\u7ec4\u4ef6textarea \u7ec4\u4ef6\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+value {string}\uff1a\u7ec4\u4ef6\u7684\u63a5\u6536\u5230\u7684\u8f93\u5165\u5b57\u7b26\u3002
+placehold">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link current "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link current "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <textarea>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.853Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-textarea-gt"><a href="#lt-textarea-gt" class="headerlink" title="<textarea>"></a><textarea></h1><p><span class="weex-version">v0.8+</span></p>
+<p><code>textarea</code> \u662f Weex \u5185\u7f6e\u7684\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u7528\u4e8e\u7528\u6237\u4ea4\u4e92\uff0c\u63a5\u53d7\u7528\u6237\u8f93\u5165\u6570\u636e\u3002 \u53ef\u4ee5\u8ba4\u4e3a\u662f\u5141\u8bb8\u591a\u884c\u7684 <code><input></code></p>
+<p><strong>Notes:</strong> <code><textarea></code>\u652f\u6301 <code><input></code> \u652f\u6301\u7684\u6240\u6709\u7684\u4e8b\u4ef6\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p><code>textarea</code> \u7ec4\u4ef6\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002</p>
+<h2 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h2><ul>
+<li><code>value {string}</code>\uff1a\u7ec4\u4ef6\u7684\u63a5\u6536\u5230\u7684\u8f93\u5165\u5b57\u7b26\u3002</li>
+<li><code>placeholder {string}</code>\uff1a\u63d0\u793a\u7528\u6237\u53ef\u4ee5\u8f93\u5165\u4ec0\u4e48\u3002 \u63d0\u793a\u6587\u672c\u4e0d\u80fd\u6709\u56de\u8f66\u6216\u6362\u884c\u3002</li>
+<li><code>disabled {boolean}</code>\uff1a\u8868\u793a\u662f\u5426\u652f\u6301\u8f93\u5165\u3002\u901a\u5e38 <code>click</code> \u4e8b\u4ef6\u5728 <code>disabled</code> \u63a7\u4ef6\u4e0a\u662f\u5931\u6548\u7684\u3002</li>
+<li><code>autofocus {boolean}</code>\uff1a\u8868\u793a\u662f\u5426\u5728\u9875\u9762\u52a0\u8f7d\u65f6\u63a7\u4ef6\u81ea\u52a8\u83b7\u5f97\u8f93\u5165\u7126\u70b9\u3002</li>
+<li><code>rows {number}</code>\uff1a\u63a5\u6536 number \u7c7b\u578b\u7684\u6570\u636e\uff0c\u6307\u5b9a\u7ec4\u4ef6\u7684\u9ad8\u5ea6\uff0c\u9ed8\u8ba4\u503c\u662f 2</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><ul>
+<li><p>text styles</p>
+<ul>
+<li>\u652f\u6301 <code>color</code></li>
+<li>\u652f\u6301 <code>font-size</code></li>
+<li>\u652f\u6301 <code>font-style</code></li>
+<li>\u652f\u6301 <code>font-weight</code></li>
+<li>\u652f\u6301 <code>text-align</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../text-style.html">\u6587\u672c\u6837\u5f0f</a></p>
+</li>
+<li><p>\u901a\u7528\u6837\u5f0f\uff1a\u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+</li>
+</ul>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><ul>
+<li><p><code>input</code>: \u8f93\u5165\u5b57\u7b26\u7684\u503c\u66f4\u6539\u3002</p>
+<p>\u4e8b\u4ef6\u4e2d event \u5bf9\u8c61\u5c5e\u6027\uff1a</p>
+<ul>
+<li><code>value</code>: \u89e6\u53d1\u4e8b\u4ef6\u7684\u7ec4\u4ef6\uff1b</li>
+<li><code>timestamp</code>: \u4e8b\u4ef6\u53d1\u751f\u65f6\u7684\u65f6\u95f4\u6233\u3002</li>
+</ul>
+</li>
+<li><p><code>change</code>: \u5f53\u7528\u6237\u8f93\u5165\u5b8c\u6210\u65f6\u89e6\u53d1\u3002\u901a\u5e38\u5728 <code>blur</code> \u4e8b\u4ef6\u4e4b\u540e\u3002</p>
+<p>\u4e8b\u4ef6\u4e2d event \u5bf9\u8c61\u5c5e\u6027\uff1a</p>
+<ul>
+<li><p><code>value</code>: \u89e6\u53d1\u4e8b\u4ef6\u7684\u7ec4\u4ef6\uff1b</p>
+</li>
+<li><p><code>timestamp</code>: \u4e8b\u4ef6\u53d1\u751f\u65f6\u7684\u65f6\u95f4\u6233\u3002</p>
+</li>
+</ul>
+</li>
+<li><p><code>focus</code>: \u7ec4\u4ef6\u83b7\u5f97\u8f93\u5165\u7126\u70b9\u3002</p>
+<p>\u4e8b\u4ef6\u4e2d event \u5bf9\u8c61\u5c5e\u6027\uff1a</p>
+<ul>
+<li><code>timestamp</code>: \u4e8b\u4ef6\u53d1\u751f\u65f6\u7684\u65f6\u95f4\u6233\u3002</li>
+</ul>
+</li>
+<li><p><code>blur</code>: \u7ec4\u4ef6\u5931\u53bb\u8f93\u5165\u7126\u70b9\u3002</p>
+<p>\u4e8b\u4ef6\u4e2d event \u5bf9\u8c61\u5c5e\u6027\uff1a</p>
+<ul>
+<li><code>timestamp</code>: \u4e8b\u4ef6\u53d1\u751f\u65f6\u7684\u65f6\u95f4\u6233\u3002</li>
+</ul>
+</li>
+<li><p>\u901a\u7528\u4e8b\u4ef6</p>
+<p><strong>\u6ce8\u610f\uff1a</strong><br>\u4e0d\u652f\u6301 <code>click</code> \u4e8b\u4ef6\u3002 \u8bf7\u76d1\u542c <code>input</code> \u6216 <code>change</code> \u4e8b\u4ef6\u4ee3\u66ff\u3002</p>
+<p>\u652f\u6301\u4ee5\u4e0b\u901a\u7528\u4e8b\u4ef6\uff1a</p>
+<ul>
+<li><code>longpress</code></li>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a></p>
+</li>
+</ul>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">textarea</span> <span class="attr">class</span>=<span class="string">"textarea"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">focus</span>=<span class="string">"onfocus"</span> @<span class="attr">blur</span>=<span class="string">"onblur"</span>></span><span class="tag"></<span class="name">textarea</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span>
</div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> oninput (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'oninput:'</span>, event.value)</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">`oninput: <span class="subst">${event.value}</span>`</span>,</div><div class="line"> <span class="att
r">duration</span>: <span class="number">0.8</span></div><div class="line"> })</div><div class="line"> },</div><div class="line"> onchange (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'onchange:'</span>, event.value)</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">`onchange: <span class="subst">${event.value}</span>`</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.8</span></div><div class="line"> })</div><div class="line"> },</div><div class="line"> onfocus (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'onfocus:'</span>, event.value)</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span
class="string">`onfocus: <span class="subst">${event.value}</span>`</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.8</span></div><div class="line"> })</div><div class="line"> },</div><div class="line"> onblur (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'onblur:'</span>, event.value)</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">`input blur: <span class="subst">${event.value}</span>`</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.8</span></div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div cl
ass="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.textarea</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">50px</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">650px</span>;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">50px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">50px</span>;</div><div class="line"> <span class="attribute">padding-top</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">padding-bottom</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">padding-left</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">padding-righ
t</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#666666</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/textarea.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/textarea.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/textarea.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/video.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/video.html b/content/cn/references/components/video.html
new file mode 100644
index 0000000..b9fbf06
--- /dev/null
+++ b/content/cn/references/components/video.html
@@ -0,0 +1,1364 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><video> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;video&gt;v0.6.1+
+&lt;video&gt; \u7ec4\u4ef6\u53ef\u4ee5\u8ba9\u6211\u4eec\u5728 Weex \u9875\u9762\u4e2d\u5d4c\u5165\u89c6\u9891\u5185\u5bb9\u3002
+\u5b50\u7ec4\u4ef6
+&lt;text&gt; \u662f\u552f\u4e00\u5408\u6cd5\u7684\u5b50\u7ec4\u4ef6\u3002
+
+\u7279\u6027
+src {string}\uff1a\u5185\u5d4c\u7684\u89c6\u9891\u6307\u5411\u7684URL
+play-status {string}\uff1a\u53ef\u9009\u503c\u4e3a play | pause\uff0c\u7528\u6765\u63a7\u5236\u89c6\u9891\u7684\u64ad\u653e\u72b6\u6001\uff0cplay \u6216\u8005 pause\uff0c\u9ed8\u8ba4\u503c\u662f pause\u3002
+auto-p">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<video>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/video.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;video&gt;v0.6.1+
+&lt;video&gt; \u7ec4\u4ef6\u53ef\u4ee5\u8ba9\u6211\u4eec\u5728 Weex \u9875\u9762\u4e2d\u5d4c\u5165\u89c6\u9891\u5185\u5bb9\u3002
+\u5b50\u7ec4\u4ef6
+&lt;text&gt; \u662f\u552f\u4e00\u5408\u6cd5\u7684\u5b50\u7ec4\u4ef6\u3002
+
+\u7279\u6027
+src {string}\uff1a\u5185\u5d4c\u7684\u89c6\u9891\u6307\u5411\u7684URL
+play-status {string}\uff1a\u53ef\u9009\u503c\u4e3a play | pause\uff0c\u7528\u6765\u63a7\u5236\u89c6\u9891\u7684\u64ad\u653e\u72b6\u6001\uff0cplay \u6216\u8005 pause\uff0c\u9ed8\u8ba4\u503c\u662f pause\u3002
+auto-p">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.853Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<video>">
+<meta name="twitter:description" content="&lt;video&gt;v0.6.1+
+&lt;video&gt; \u7ec4\u4ef6\u53ef\u4ee5\u8ba9\u6211\u4eec\u5728 Weex \u9875\u9762\u4e2d\u5d4c\u5165\u89c6\u9891\u5185\u5bb9\u3002
+\u5b50\u7ec4\u4ef6
+&lt;text&gt; \u662f\u552f\u4e00\u5408\u6cd5\u7684\u5b50\u7ec4\u4ef6\u3002
+
+\u7279\u6027
+src {string}\uff1a\u5185\u5d4c\u7684\u89c6\u9891\u6307\u5411\u7684URL
+play-status {string}\uff1a\u53ef\u9009\u503c\u4e3a play | pause\uff0c\u7528\u6765\u63a7\u5236\u89c6\u9891\u7684\u64ad\u653e\u72b6\u6001\uff0cplay \u6216\u8005 pause\uff0c\u9ed8\u8ba4\u503c\u662f pause\u3002
+auto-p">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link current "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link current "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <video>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.853Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-video-gt"><a href="#lt-video-gt" class="headerlink" title="<video>"></a><video></h1><p><span class="weex-version">v0.6.1+</span></p>
+<p><code><video></code> \u7ec4\u4ef6\u53ef\u4ee5\u8ba9\u6211\u4eec\u5728 Weex \u9875\u9762\u4e2d\u5d4c\u5165\u89c6\u9891\u5185\u5bb9\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><ul>
+<li><code><text></code> \u662f\u552f\u4e00\u5408\u6cd5\u7684\u5b50\u7ec4\u4ef6\u3002</li>
+</ul>
+<h3 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h3><ul>
+<li><code>src {string}</code>\uff1a\u5185\u5d4c\u7684\u89c6\u9891\u6307\u5411\u7684URL</li>
+<li><code>play-status {string}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>play</code> | <code>pause</code>\uff0c\u7528\u6765\u63a7\u5236\u89c6\u9891\u7684\u64ad\u653e\u72b6\u6001\uff0c<code>play</code> \u6216\u8005 <code>pause</code>\uff0c\u9ed8\u8ba4\u503c\u662f <code>pause</code>\u3002</li>
+<li><code>auto-play {boolean}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>true</code> | <code>false</code>\uff0c\u5f53\u9875\u9762\u52a0\u8f7d\u521d\u59cb\u5316\u5b8c\u6210\u540e\uff0c\u7528\u6765\u63a7\u5236\u89c6\u9891\u662f\u5426\u7acb\u5373\u64ad\u653e\uff0c\u9ed8\u8ba4\u503c\u662f <code>false</code>\u3002</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><ul>
+<li><p>\u901a\u7528\u6837\u5f0f\uff1a\u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+</li>
+</ul>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><ul>
+<li><code>start</code>\uff1a\u5f53 playback \u7684\u72b6\u6001\u662f Playing \u65f6\u89e6\u53d1</li>
+<li><code>pause</code>\uff1a\u5f53 playback \u7684\u72b6\u6001\u662f Paused \u65f6\u89e6\u53d1</li>
+<li><code>finish</code>\uff1a\u5f53 playback \u7684\u72b6\u6001\u662f Finished \u65f6\u89e6\u53d1</li>
+<li><code>fail</code>\uff1a\u5f53 playback \u72b6\u6001\u662f Failed \u65f6\u89e6\u53d1</li>
+</ul>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">video</span> <span class="attr">class</span>=<span class="string">"video"</span> <span class="attr">:src</span>=<span class="string">"src"</span> <span class="attr">autoplay</span> <span class="attr">controls</span></span></div><div class="line"> @<span class="attr">start</span>=<span class="string">"onstart"</span> @<span class="attr">pause</span>=<span class="string">"onpause"</span> @<span class="attr">finish</span>=<span class="string">"onfinish"</span> @<span class="attr">fail</span>=<span class="string">"onfail"</span>><span class="tag"></<span class="name">video</span>></span></di
v><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"info"</span>></span>state: {{state}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.video</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">630px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">350px</span>;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">60px</span>;</div><div c
lass="line"> <span class="attribute">margin-left</span>: <span class="number">60px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.info</span> {</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">40px</span>;</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">40px</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line">
<span class="attr">state</span>: <span class="string">'----'</span>,</div><div class="line"> <span class="attr">src</span>:<span class="string">'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'</span></div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>:{</div><div class="line"> onstart (event) {</div><div class="line"> <span class="keyword">this</span>.state = <span class="string">'onstart'</span></div><div class="line"> },</div><div class="line"> onpause (event) {</div><div class="line"> <span class="keyword">this</span>.state = <span class="string">'onpause'</span></div><div class="line"> },</div><div class="line"> onfinish (event) {</div><div class="line"> <span class="keyword">this</span>.state = <span class="string">'onfinish'</span></div><div class="line"> },</div><div cla
ss="line"> onfail (event) {</div><div class="line"> <span class="keyword">this</span>.state = <span class="string">'onfinish'</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/video.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/video.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/video.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[19/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/platform-difference.html
----------------------------------------------------------------------
diff --git a/content/cn/references/platform-difference.html b/content/cn/references/platform-difference.html
new file mode 100644
index 0000000..fd31225
--- /dev/null
+++ b/content/cn/references/platform-difference.html
@@ -0,0 +1,1354 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02Weex \u662f\u4e00\u4e2a\u8de8\u5e73\u53f0\u89e3\u51b3\u65b9\u6848\uff0cWeb \u5e73\u53f0\u53ea\u662f\u5176\u4e00\u79cd\u8fd0\u884c\u73af\u5883\uff0c\u9664\u6b64\u4e4b\u5916\u8fd8\u53ef\u4ee5\u5728 Android \u548c iOS \u5ba2\u6237\u7aef\u4e2d\u8fd0\u884c\u3002\u539f\u751f\u5f00\u53d1\u5e73\u53f0\u548c Web \u5e73\u53f0\u4e4b\u95f4\u7684\u5dee\u5f02\uff0c\u5728\u529f\u80fd\u548c\u5f00\u53d1\u4f53\u9a8c\u4e0a\u90fd\u6709\u4e00\u4e9b\u5dee\u5f02\u3002
+Weex \u73af\u5883\u4e2d\u6ca1\u6709 DOMDOM\uff08Document Object Model\uff09\uff0c\u5373\u6587\u6863\u5bf9\u8c61\u6a21\u578b\uff0c\u662f HTML \u548c XML \u6587\u6863\u7684\u7f16\u7a0b\u63a5\u53e3\uff0c\u662f Web \u4e2d\u7684\u6982\u5ff5\u3002Weex">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02">
+<meta property="og:url" content="https://weex.apache.org/cn/references/platform-difference.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02Weex \u662f\u4e00\u4e2a\u8de8\u5e73\u53f0\u89e3\u51b3\u65b9\u6848\uff0cWeb \u5e73\u53f0\u53ea\u662f\u5176\u4e00\u79cd\u8fd0\u884c\u73af\u5883\uff0c\u9664\u6b64\u4e4b\u5916\u8fd8\u53ef\u4ee5\u5728 Android \u548c iOS \u5ba2\u6237\u7aef\u4e2d\u8fd0\u884c\u3002\u539f\u751f\u5f00\u53d1\u5e73\u53f0\u548c Web \u5e73\u53f0\u4e4b\u95f4\u7684\u5dee\u5f02\uff0c\u5728\u529f\u80fd\u548c\u5f00\u53d1\u4f53\u9a8c\u4e0a\u90fd\u6709\u4e00\u4e9b\u5dee\u5f02\u3002
+Weex \u73af\u5883\u4e2d\u6ca1\u6709 DOMDOM\uff08Document Object Model\uff09\uff0c\u5373\u6587\u6863\u5bf9\u8c61\u6a21\u578b\uff0c\u662f HTML \u548c XML \u6587\u6863\u7684\u7f16\u7a0b\u63a5\u53e3\uff0c\u662f Web \u4e2d\u7684\u6982\u5ff5\u3002Weex">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.912Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02">
+<meta name="twitter:description" content="Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02Weex \u662f\u4e00\u4e2a\u8de8\u5e73\u53f0\u89e3\u51b3\u65b9\u6848\uff0cWeb \u5e73\u53f0\u53ea\u662f\u5176\u4e00\u79cd\u8fd0\u884c\u73af\u5883\uff0c\u9664\u6b64\u4e4b\u5916\u8fd8\u53ef\u4ee5\u5728 Android \u548c iOS \u5ba2\u6237\u7aef\u4e2d\u8fd0\u884c\u3002\u539f\u751f\u5f00\u53d1\u5e73\u53f0\u548c Web \u5e73\u53f0\u4e4b\u95f4\u7684\u5dee\u5f02\uff0c\u5728\u529f\u80fd\u548c\u5f00\u53d1\u4f53\u9a8c\u4e0a\u90fd\u6709\u4e00\u4e9b\u5dee\u5f02\u3002
+Weex \u73af\u5883\u4e2d\u6ca1\u6709 DOMDOM\uff08Document Object Model\uff09\uff0c\u5373\u6587\u6863\u5bf9\u8c61\u6a21\u578b\uff0c\u662f HTML \u548c XML \u6587\u6863\u7684\u7f16\u7a0b\u63a5\u53e3\uff0c\u662f Web \u4e2d\u7684\u6982\u5ff5\u3002Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link current ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link current ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.912Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Weex-\u548c-Web-\u5e73\u53f0\u7684\u5dee\u5f02"><a href="#Weex-\u548c-Web-\u5e73\u53f0\u7684\u5dee\u5f02" class="headerlink" title="Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02"></a>Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</h1><p>Weex \u662f\u4e00\u4e2a\u8de8\u5e73\u53f0\u89e3\u51b3\u65b9\u6848\uff0cWeb \u5e73\u53f0\u53ea\u662f\u5176\u4e00\u79cd\u8fd0\u884c\u73af\u5883\uff0c\u9664\u6b64\u4e4b\u5916\u8fd8\u53ef\u4ee5\u5728 Android \u548c iOS \u5ba2\u6237\u7aef\u4e2d\u8fd0\u884c\u3002\u539f\u751f\u5f00\u53d1\u5e73\u53f0\u548c Web \u5e73\u53f0\u4e4b\u95f4\u7684\u5dee\u5f02\uff0c\u5728\u529f\u80fd\u548c\u5f00\u53d1\u4f53\u9a8c\u4e0a\u90fd\u6709\u4e00\u4e9b\u5dee\u5f02\u3002</p>
+<h2 id="Weex-\u73af\u5883\u4e2d\u6ca1\u6709-DOM"><a href="#Weex-\u73af\u5883\u4e2d\u6ca1\u6709-DOM" class="headerlink" title="Weex \u73af\u5883\u4e2d\u6ca1\u6709 DOM"></a>Weex \u73af\u5883\u4e2d\u6ca1\u6709 DOM</h2><p>DOM\uff08Document Object Model\uff09\uff0c\u5373\u6587\u6863\u5bf9\u8c61\u6a21\u578b\uff0c\u662f HTML \u548c XML \u6587\u6863\u7684\u7f16\u7a0b\u63a5\u53e3\uff0c\u662f Web \u4e2d\u7684\u6982\u5ff5\u3002Weex \u7684\u8fd0\u884c\u73af\u5883\u4ee5\u539f\u751f\u5e94\u7528\u4e3a\u4e3b\uff0c\u5728 Android \u548c iOS \u73af\u5883\u4e2d\u6e32\u67d3\u51fa\u6765\u7684\u662f\u539f\u751f\u7684\u7ec4\u4ef6\uff0c\u4e0d\u662f DOM Element\u3002</p>
+<h3 id="\u4e0d\u652f\u6301-DOM-\u64cd\u4f5c"><a href="#\u4e0d\u652f\u6301-DOM-\u64cd\u4f5c" class="headerlink" title="\u4e0d\u652f\u6301 DOM \u64cd\u4f5c"></a>\u4e0d\u652f\u6301 DOM \u64cd\u4f5c</h3><p>\u65e2\u7136\u539f\u751f\u73af\u5883\u4e2d\u4e0d\u652f\u6301 Web API\uff0c\u6ca1\u6709 <code>Element</code> \u3001<code>Event</code> \u3001<code>File</code> \u7b49\u5bf9\u8c61\uff0c\u8be6\u7ec6\u5217\u8868\u53ef\u4ee5\u53c2\u8003 <a href="https://developer.mozilla.org/en-US/docs/Web/API" target="_blank" rel="external">Web APIs on MDN</a>\u3002\u4e0d\u652f\u6301\u9009\u4e2d\u5143\u7d20\uff0c\u5982 <code>document.getElementById</code> \u3001 <code>document.querySelector</code> \u7b49\uff1b\u5f53\u7136\u4e5f\u4e0d\u652f\u6301\u57fa\u4e8e DOM API \u7684\u7a0b\u5e8f\u5e93\uff08\u5982 jQuery\uff09\u3002</p>
+<h3 id="\u6709\u9650\u7684\u4e8b\u4ef6\u7c7b\u578b"><a href="#\u6709\u9650\u7684\u4e8b\u4ef6\u7c7b\u578b" class="headerlink" title="\u6709\u9650\u7684\u4e8b\u4ef6\u7c7b\u578b"></a>\u6709\u9650\u7684\u4e8b\u4ef6\u7c7b\u578b</h3><p>Weex \u652f\u6301\u5728\u6807\u7b7e\u4e0a\u7ed1\u5b9a\u4e8b\u4ef6\uff0c\u548c\u5728\u6d4f\u89c8\u5668\u4e2d\u7684\u5199\u6cd5\u4e00\u6837\uff0c\u4f46\u662f Weex \u4e2d\u7684\u4e8b\u4ef6\u662f\u7531\u539f\u751f\u7ec4\u4ef6\u6355\u83b7\u5e76\u89e6\u53d1\u7684\uff0c\u884c\u4e3a\u548c\u6d4f\u89c8\u5668\u4e2d\u6709\u6240\u4e0d\u540c\uff0c\u4e8b\u4ef6\u4e2d\u7684\u5c5e\u6027\u4e5f\u548c Web \u4e2d\u6709\u5dee\u5f02\u3002</p>
+<ul>
+<li>\u5e76\u4e0d\u652f\u6301 Web \u4e2d\u6240\u6709\u7684\u4e8b\u4ef6\u7c7b\u578b\uff0c\u8be6\u60c5\u8bf7\u53c2\u8003<a href="./common-event.html">\u300a\u901a\u7528\u4e8b\u4ef6\u300b</a>\u3002</li>
+<li>\u4e0d\u533a\u5206\u4e8b\u4ef6\u7684\u6355\u83b7\u9636\u6bb5\u548c\u5192\u6ce1\u9636\u6bb5\uff0c\u76f8\u5f53\u4e8e DOM 0 \u7ea7\u4e8b\u4ef6\u3002</li>
+</ul>
+<h2 id="Weex-\u73af\u5883\u4e2d\u6ca1\u6709-BOM"><a href="#Weex-\u73af\u5883\u4e2d\u6ca1\u6709-BOM" class="headerlink" title="Weex \u73af\u5883\u4e2d\u6ca1\u6709 BOM"></a>Weex \u73af\u5883\u4e2d\u6ca1\u6709 BOM</h2><p>BOM\uff08Browser Object Model\uff09\uff0c\u5373\u6d4f\u89c8\u5668\u5bf9\u8c61\u6a21\u578b\uff0c\u662f\u6d4f\u89c8\u5668\u73af\u5883\u4e3a javascript \u63d0\u4f9b\u7684\u63a5\u53e3\u3002Weex \u5728\u539f\u751f\u7aef\u6ca1\u6709\u5e76\u4e0d\u57fa\u4e8e\u6d4f\u89c8\u5668\u8fd0\u884c\uff0c\u4e0d\u652f\u6301\u6d4f\u89c8\u5668\u63d0\u4f9b\u7684 BOM \u63a5\u53e3\u3002</p>
+<h3 id="\u6ca1\u6709-window-\u3001screen-\u5bf9\u8c61"><a href="#\u6ca1\u6709-window-\u3001screen-\u5bf9\u8c61" class="headerlink" title="\u6ca1\u6709 window \u3001screen \u5bf9\u8c61"></a>\u6ca1\u6709 <code>window</code> \u3001<code>screen</code> \u5bf9\u8c61</h3><p>Weex \u4e2d\u5e76\u672a\u63d0\u4f9b\u6d4f\u89c8\u5668\u4e2d\u7684 <code>window</code> \u548c <code>screen</code> \u5bf9\u8c61\uff0c\u4e0d\u652f\u6301\u4f7f\u7528\u5168\u5c40\u53d8\u91cf\u3002\u5982\u679c\u662f\u60f3\u8981\u83b7\u53d6\u8bbe\u5907\u7684\u5c4f\u5e55\u6216\u73af\u5883\u4fe1\u606f\uff0c\u53ef\u4ee5\u4f7f\u7528 <code>WXEnvironment</code> \u53d8\u91cf\u3002</p>
+<ul>
+<li><code>WXEnvironment</code><ul>
+<li><code>weexVersion</code>: WeexSDK \u7684\u7248\u672c\u3002</li>
+<li><code>appName</code>: \u5e94\u7528\u7684\u540d\u79f0\u3002</li>
+<li><code>appVersion</code>: \u5e94\u7528\u7684\u7248\u672c\u3002</li>
+<li><code>platform</code>: \u8fd0\u884c\u5e73\u53f0\uff0c\u53ef\u80fd\u7684\u503c\u662f <code>Web</code> \u3001<code>Android</code> \u3001<code>iOS</code> \u4e4b\u4e00\u3002</li>
+<li><code>osName</code>: \u7cfb\u7edf\u7684\u540d\u79f0\u3002</li>
+<li><code>osVersion</code>: \u7cfb\u7edf\u7248\u672c\u3002</li>
+<li><code>deviceWidth</code>: \u8bbe\u5907\u5bbd\u5ea6\u3002</li>
+<li><code>deviceHeight</code>: \u8bbe\u5907\u9ad8\u5ea6\u3002</li>
+</ul>
+</li>
+</ul>
+<h3 id="\u6ca1\u6709-document-\u5bf9\u8c61"><a href="#\u6ca1\u6709-document-\u5bf9\u8c61" class="headerlink" title="\u6ca1\u6709 document \u5bf9\u8c61"></a>\u6ca1\u6709 <code>document</code> \u5bf9\u8c61</h3><p>\u5728\u6d4f\u89c8\u5668\u4e2d <code>document</code> \u8868\u793a\u4e86\u5f53\u524d\u6d3b\u52a8\u7684\u6587\u6863\u6a21\u578b\uff0c\u5728 Android \u548c iOS \u73af\u5883\u4e2d\u5e76\u6ca1\u6709\u8fd9\u4e2a\u5bf9\u8c61\uff0c\u4e5f\u4e0d\u652f\u6301\u4e0e\u5176\u76f8\u5173\u7684 DOM \u64cd\u4f5c\u3002</p>
+<h3 id="\u6ca1\u6709-history-\u3001location-\u3001navigator-\u5bf9\u8c61"><a href="#\u6ca1\u6709-history-\u3001location-\u3001navigator-\u5bf9\u8c61" class="headerlink" title="\u6ca1\u6709 history \u3001location \u3001navigator \u5bf9\u8c61"></a>\u6ca1\u6709 <code>history</code> \u3001<code>location</code> \u3001<code>navigator</code> \u5bf9\u8c61</h3><ul>
+<li><code>history</code> \u4fdd\u5b58\u4e86\u5f53\u524d\u9875\u9762\u7684\u5386\u53f2\u8bb0\u5f55\uff0c\u5e76\u4e14\u63d0\u4f9b\u4e86\u524d\u8fdb\u540e\u9000\u64cd\u4f5c\u3002</li>
+<li><code>location</code> \u8bb0\u5f55\u4e86\u5f53\u524d\u9875\u9762 URL \u76f8\u5173\u7684\u4fe1\u606f\u3002</li>
+<li><code>navigator</code> \u8bb0\u5f55\u4e86\u5f53\u524d\u6d4f\u89c8\u5668\u4e2d\u7684\u4fe1\u606f\u3002</li>
+</ul>
+<p>\u8fd9\u4e9b\u63a5\u53e3\u4e0e\u6d4f\u89c8\u5668\u81ea\u8eab\u7684\u5b9e\u73b0\u6709\u5173\uff0c\u53ef\u4ee5\u63a7\u5236\u9875\u9762\u7684\u524d\u8fdb\u540e\u9000\u5e76\u4e14\u83b7\u53d6\u72b6\u6001\u4fe1\u606f\u3002\u867d\u7136\u5728 Android \u548c iOS \u4e2d\u4e5f\u6709\u201c\u5386\u53f2\u201d\u548c\u201c\u5bfc\u822a\u201d\u7684\u6982\u5ff5\uff0c\u4f46\u662f\u5b83\u662f\u7528\u4e8e\u591a\u4e2a\u7ba1\u7406\u89c6\u56fe\u4e4b\u95f4\u7684\u8df3\u8f6c\u7684\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c\u5728\u6d4f\u89c8\u5668\u4e2d\u6267\u884c\u201c\u524d\u8fdb\u201d\u3001\u201c\u540e\u9000\u201d\u4ecd\u7136\u4f1a\u5904\u4e8e\u540c\u4e00\u4e2a\u9875\u7b7e\u4e2d\uff0c\u5728\u539f\u751f\u5e94\u7528\u4e2d\u201c\u524d\u8fdb\u201d\u3001\u201c\u540e\u9000\u201d\u5219\u4f1a\u771f\u5b9e\u7684\u8df3\u8f6c\u5230\u5176\u4ed6\u9875\u9762\u3002</p>
+<p>\u6b64\u5916 Weex \u4e5f\u63d0\u4f9b\u4e86 <code>navigator</code> \u6a21\u5757\u6765\u64cd\u4f5c\u9875\u9762\u7684\u8df3\u8f6c\uff0c\u4f7f\u7528\u65b9\u6cd5\u53c2\u8003<a href="./modules/navigator.html">\u300anavigator \u5bfc\u822a\u63a7\u5236\u300b</a>\u3002</p>
+<h2 id="\u80fd\u591f\u8c03\u7528\u79fb\u52a8\u8bbe\u5907\u539f\u751f-API"><a href="#\u80fd\u591f\u8c03\u7528\u79fb\u52a8\u8bbe\u5907\u539f\u751f-API" class="headerlink" title="\u80fd\u591f\u8c03\u7528\u79fb\u52a8\u8bbe\u5907\u539f\u751f API"></a>\u80fd\u591f\u8c03\u7528\u79fb\u52a8\u8bbe\u5907\u539f\u751f API</h2><p>\u5728 Weex \u4e2d\u80fd\u591f\u8c03\u7528\u79fb\u52a8\u8bbe\u5907\u539f\u751f API\uff0c\u4f7f\u7528\u65b9\u6cd5\u662f\u901a\u8fc7\u6ce8\u518c\u3001\u8c03\u7528\u6a21\u5757\u6765\u5b9e\u73b0\u3002\u5176\u4e2d\u6709\u4e00\u4e9b\u6a21\u5757\u662f Weex \u5185\u7f6e\u7684\uff0c\u5982 clipboard \u3001 navigator \u3001storage \u7b49\u3002</p>
+<ul>
+<li><a href="./modules/clipboard.html">\u300aclipboard \u526a\u5207\u677f\u300b</a></li>
+<li><a href="./modules/navigator.html">\u300anavigator \u5bfc\u822a\u63a7\u5236\u300b</a></li>
+<li><a href="./modules/storage.html">\u300astorage \u672c\u5730\u5b58\u50a8 \u300b</a></li>
+</ul>
+<p>\u4e3a\u4e86\u4fdd\u6301\u6846\u67b6\u7684\u901a\u7528\u6027\uff0cWeex \u5185\u7f6e\u7684\u539f\u751f\u6a21\u5757\u6709\u9650\uff0c\u4e0d\u8fc7 Weex \u63d0\u4f9b\u4e86\u6a2a\u5411\u6269\u5c55\u7684\u80fd\u529b\uff0c\u53ef\u4ee5\u6269\u5c55\u539f\u751f\u6a21\u5757\uff0c\u5177\u4f53\u7684\u6269\u5c55\u65b9\u6cd5\u8bf7\u53c2\u8003<a href="./advanced/index.html">\u300aiOS \u6269\u5c55\u300b</a> \u548c<a href="./advanced/extend-to-android.html">\u300aAndroid \u6269\u5c55\u300b</a>\u3002</p>
+<blockquote>
+<p>\u6709\u4e9b\u63a5\u53e3\u5728\u6d4f\u89c8\u5668\u73af\u5883\u4e2d\u4e5f\u5b58\u5728\uff0c\u4e0d\u8fc7\u5728\u4f7f\u7528\u65f6\u5e94\u8be5\u6ce8\u610f\u6d4f\u89c8\u5668\u7684\u517c\u5bb9\u6027\uff1b\u5982\u526a\u8d34\u677f\u529f\u80fd\uff0c\u51fa\u4e8e\u5b89\u5168\u6027\u8003\u8651\uff0c\u7edd\u5927\u591a\u6570\u6d4f\u89c8\u5668\u90fd\u9650\u5236\u5176\u4f7f\u7528\u3002</p>
+</blockquote>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/platform-difference.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/platform-difference.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/text-style.html
----------------------------------------------------------------------
diff --git a/content/cn/references/text-style.html b/content/cn/references/text-style.html
new file mode 100644
index 0000000..fc371be
--- /dev/null
+++ b/content/cn/references/text-style.html
@@ -0,0 +1,1362 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u6587\u672c\u6837\u5f0f | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u6587\u672c\u6837\u5f0fv0.5+
+\u6587\u672c\u7c7b\u7ec4\u4ef6\u5171\u4eab\u4e00\u4e9b\u901a\u7528\u6837\u5f0f, \u8fd9\u7c7b\u7ec4\u4ef6\u76ee\u524d\u5305\u62ec &lt;text&gt; \u548c &lt;input&gt;\u3002
+\u5c5e\u6027
+color {color}\uff1a\u6587\u5b57\u989c\u8272\u3002
+\u53ef\u9009\u503c\u4e3a\u8272\u503c\uff0c\u652f\u6301 RGB\uff08 rgb(255, 0, 0) \uff09\uff1bRGBA\uff08 rgba(255, 0, 0, 0.5) \uff09\uff1b\u5341\u516d\u8fdb\u5236\uff08 #ff0000 \uff09\uff1b\u7cbe\u7b80\u5199\u6cd5\u7684\u5341\u516d\u8fdb\u5236\uff08 #f00 \uff09\uff1b\u8272\u503c\u5173\u952e\u5b57\uff08red\uff09\u3002
+
+lines">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u6587\u672c\u6837\u5f0f">
+<meta property="og:url" content="https://weex.apache.org/cn/references/text-style.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u6587\u672c\u6837\u5f0fv0.5+
+\u6587\u672c\u7c7b\u7ec4\u4ef6\u5171\u4eab\u4e00\u4e9b\u901a\u7528\u6837\u5f0f, \u8fd9\u7c7b\u7ec4\u4ef6\u76ee\u524d\u5305\u62ec &lt;text&gt; \u548c &lt;input&gt;\u3002
+\u5c5e\u6027
+color {color}\uff1a\u6587\u5b57\u989c\u8272\u3002
+\u53ef\u9009\u503c\u4e3a\u8272\u503c\uff0c\u652f\u6301 RGB\uff08 rgb(255, 0, 0) \uff09\uff1bRGBA\uff08 rgba(255, 0, 0, 0.5) \uff09\uff1b\u5341\u516d\u8fdb\u5236\uff08 #ff0000 \uff09\uff1b\u7cbe\u7b80\u5199\u6cd5\u7684\u5341\u516d\u8fdb\u5236\uff08 #f00 \uff09\uff1b\u8272\u503c\u5173\u952e\u5b57\uff08red\uff09\u3002
+
+lines">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.913Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u6587\u672c\u6837\u5f0f">
+<meta name="twitter:description" content="\u6587\u672c\u6837\u5f0fv0.5+
+\u6587\u672c\u7c7b\u7ec4\u4ef6\u5171\u4eab\u4e00\u4e9b\u901a\u7528\u6837\u5f0f, \u8fd9\u7c7b\u7ec4\u4ef6\u76ee\u524d\u5305\u62ec &lt;text&gt; \u548c &lt;input&gt;\u3002
+\u5c5e\u6027
+color {color}\uff1a\u6587\u5b57\u989c\u8272\u3002
+\u53ef\u9009\u503c\u4e3a\u8272\u503c\uff0c\u652f\u6301 RGB\uff08 rgb(255, 0, 0) \uff09\uff1bRGBA\uff08 rgba(255, 0, 0, 0.5) \uff09\uff1b\u5341\u516d\u8fdb\u5236\uff08 #ff0000 \uff09\uff1b\u7cbe\u7b80\u5199\u6cd5\u7684\u5341\u516d\u8fdb\u5236\uff08 #f00 \uff09\uff1b\u8272\u503c\u5173\u952e\u5b57\uff08red\uff09\u3002
+
+lines">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link current ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link current ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u6587\u672c\u6837\u5f0f
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.913Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u6587\u672c\u6837\u5f0f"><a href="#\u6587\u672c\u6837\u5f0f" class="headerlink" title="\u6587\u672c\u6837\u5f0f"></a>\u6587\u672c\u6837\u5f0f</h1><p><span class="weex-version">v0.5+</span></p>
+<p>\u6587\u672c\u7c7b\u7ec4\u4ef6\u5171\u4eab\u4e00\u4e9b\u901a\u7528\u6837\u5f0f, \u8fd9\u7c7b\u7ec4\u4ef6\u76ee\u524d\u5305\u62ec <a href="./components/text.html"><code><text></code></a> \u548c <a href="./components/input.html"><code><input></code></a>\u3002</p>
+<h2 id="\u5c5e\u6027"><a href="#\u5c5e\u6027" class="headerlink" title="\u5c5e\u6027"></a>\u5c5e\u6027</h2><ul>
+<li><p><code>color {color}</code>\uff1a\u6587\u5b57\u989c\u8272\u3002</p>
+<p>\u53ef\u9009\u503c\u4e3a\u8272\u503c\uff0c\u652f\u6301 RGB\uff08 <code>rgb(255, 0, 0)</code> \uff09\uff1bRGBA\uff08 <code>rgba(255, 0, 0, 0.5)</code> \uff09\uff1b\u5341\u516d\u8fdb\u5236\uff08 <code>#ff0000</code> \uff09\uff1b\u7cbe\u7b80\u5199\u6cd5\u7684\u5341\u516d\u8fdb\u5236\uff08 <code>#f00</code> \uff09\uff1b\u8272\u503c\u5173\u952e\u5b57\uff08<code>red</code>\uff09\u3002</p>
+</li>
+<li><p><code>lines {number}</code>: \u6307\u5b9a\u6587\u672c\u884c\u6570\u3002\u4ec5\u5728 <code><text></code> \u7ec4\u4ef6\u4e2d\u652f\u6301\u3002\u9ed8\u8ba4\u503c\u662f <code>0</code> \u4ee3\u8868\u4e0d\u9650\u5236\u884c\u6570\u3002</p>
+</li>
+<li><p><code>font-size {number}</code>\uff1a\u6587\u5b57\u5927\u5c0f\u3002</p>
+</li>
+<li><p><code>font-style {string}</code>\uff1a\u5b57\u4f53\u7c7b\u522b\u3002\u53ef\u9009\u503c <code>normal</code> | <code>italic</code>\uff0c\u9ed8\u8ba4\u4e3a <code>normal</code>\u3002</p>
+</li>
+<li><p><code>font-weight {string}</code><span class="api-version">v0.9+</span>\uff1a\u5b57\u4f53\u7c97\u7ec6\u7a0b\u5ea6</p>
+<ul>
+<li>\u53ef\u9009\u503c: <code>normal</code>, <code>bold</code>, <code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></li>
+<li>normal \u7b49\u540c\u4e8e 400, bold \u7b49\u540c\u4e8e 700\uff1b</li>
+<li>\u9ed8\u8ba4\u503c: <code>normal</code>\uff1b</li>
+<li>iOS \u652f\u6301 9 \u79cd font-weight\u503c\uff1bAndroid \u4ec5\u652f\u6301 400 \u548c 700, \u5176\u4ed6\u503c\u4f1a\u8bbe\u4e3a 400 \u6216 700</li>
+<li>\u7c7b\u4f3c <code>lighter</code>, <code>bolder</code> \u8fd9\u6837\u7684\u503c\u6682\u65f6\u4e0d\u652f\u6301</li>
+</ul>
+</li>
+<li><p><code>text-decoration {string}</code>\uff1a\u5b57\u4f53\u88c5\u9970\uff0c\u53ef\u9009\u503c <code>none</code> | <code>underline</code> | <code>line-through</code>\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>none</code>\u3002</p>
+</li>
+<li><p><code>text-align {string}</code>\uff1a\u5bf9\u9f50\u65b9\u5f0f\u3002\u53ef\u9009\u503c <code>left</code> | <code>center</code> | <code>right</code>\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>left</code>\u3002\u76ee\u524d\u6682\u4e0d\u652f\u6301 <code>justify</code>, <code>justify-all</code>\u3002</p>
+</li>
+<li><p><code>font-family {string}</code>\uff1a\u8bbe\u7f6e\u5b57\u4f53\u3002</p>
+<p>\u8fd9\u4e2a\u8bbe\u7f6e <strong>\u4e0d\u4fdd\u8bc1</strong> \u5728\u4e0d\u540c\u5e73\u53f0\uff0c\u8bbe\u5907\u95f4\u7684\u4e00\u81f4\u6027\u3002\u5982\u6240\u9009\u8bbe\u7f6e\u5728\u5e73\u53f0\u4e0a\u4e0d\u53ef\u7528\uff0c\u5c06\u4f1a\u964d\u7ea7\u5230\u5e73\u53f0\u9ed8\u8ba4\u5b57\u4f53\u3002</p>
+</li>
+<li><p><code>text-overflow {string}</code>\uff1a\u8bbe\u7f6e\u5185\u5bb9\u8d85\u957f\u65f6\u7684\u7701\u7565\u6837\u5f0f\u3002\u53ef\u9009\u503c <code>clip</code> | <code>ellipsis</code></p>
+</li>
+</ul>
+<h2 id="\u5176\u5b83\u53c2\u8003"><a href="#\u5176\u5b83\u53c2\u8003" class="headerlink" title="\u5176\u5b83\u53c2\u8003"></a>\u5176\u5b83\u53c2\u8003</h2><ul>
+<li><a href="./color-names.html">\u989c\u8272\u5173\u952e\u5b57\u5217\u8868</a>\u3002</li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/text-style.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/text-style.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[36/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/index.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/index.html b/content/cn/references/components/index.html
new file mode 100644
index 0000000..041c360
--- /dev/null
+++ b/content/cn/references/components/index.html
@@ -0,0 +1,1366 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u5185\u5efa\u7ec4\u4ef6 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5185\u5efa\u7ec4\u4ef6
+&lt;a&gt;
+&lt;indicator&gt;
+&lt;switch&gt;
+&lt;text&gt;
+&lt;textarea&gt;
+&lt;video&gt;
+&lt;web&gt;
+&lt;div&gt;
+&lt;image&gt;
+&lt;input&gt;
+&lt;list&gt;
+&lt;cell&gt;
+&lt;refresh&gt; &amp; &lt;load">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u5185\u5efa\u7ec4\u4ef6">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5185\u5efa\u7ec4\u4ef6
+&lt;a&gt;
+&lt;indicator&gt;
+&lt;switch&gt;
+&lt;text&gt;
+&lt;textarea&gt;
+&lt;video&gt;
+&lt;web&gt;
+&lt;div&gt;
+&lt;image&gt;
+&lt;input&gt;
+&lt;list&gt;
+&lt;cell&gt;
+&lt;refresh&gt; &amp; &lt;load">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.845Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u5185\u5efa\u7ec4\u4ef6">
+<meta name="twitter:description" content="\u5185\u5efa\u7ec4\u4ef6
+&lt;a&gt;
+&lt;indicator&gt;
+&lt;switch&gt;
+&lt;text&gt;
+&lt;textarea&gt;
+&lt;video&gt;
+&lt;web&gt;
+&lt;div&gt;
+&lt;image&gt;
+&lt;input&gt;
+&lt;list&gt;
+&lt;cell&gt;
+&lt;refresh&gt; &amp; &lt;load">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link current ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link current ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u5185\u5efa\u7ec4\u4ef6
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.845Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5185\u5efa\u7ec4\u4ef6"><a href="#\u5185\u5efa\u7ec4\u4ef6" class="headerlink" title="\u5185\u5efa\u7ec4\u4ef6"></a>\u5185\u5efa\u7ec4\u4ef6</h1><ul>
+<li><a href="./a.html"><a></a></li>
+<li><a href="./indicator.html"><indicator></a></li>
+<li><a href="./switch.html"><switch></a></li>
+<li><a href="./text.html"><text></a></li>
+<li><a href="./textarea.html"><textarea></a></li>
+<li><a href="./video.html"><video></a></li>
+<li><a href="./web.html"><web></a></li>
+<li><a href="./div.html"><div></a></li>
+<li><a href="./image.html"><image></a></li>
+<li><a href="./input.html"><input></a></li>
+<li><a href="./list.html"><list></a></li>
+<li><a href="./cell.html"><cell></a></li>
+<li><a href="./refresh.html"><refresh> & <loading></a></li>
+<li><a href="./scroller.html"><scroller></a></li>
+<li><a href="./slider.html"><slider></a></li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/indicator.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/indicator.html b/content/cn/references/components/indicator.html
new file mode 100644
index 0000000..f3f28bb
--- /dev/null
+++ b/content/cn/references/components/indicator.html
@@ -0,0 +1,1360 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><indicator> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;indicator&gt;&lt;indicator&gt; \u7ec4\u4ef6\u7528\u4e8e\u663e\u793a\u8f6e\u64ad\u56fe\u6307\u793a\u5668\u6548\u679c\uff0c\u5fc5\u987b\u5145\u5f53 &lt;slider&gt; \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\u4f7f\u7528\u3002
+\u5b50\u7ec4\u4ef6&lt;indicator&gt; \u7ec4\u4ef6\u6ca1\u6709\u4efb\u4f55\u5b50\u7ec4\u4ef6\u3002
+\u6837\u5f0f&lt;indicator&gt; \u7ec4\u4ef6\u6709\u4e00\u4e9b\u79c1\u6709\u6837\u5f0f\uff0c\u5982\u4e0b\uff1a
+
+item-color {color}\uff1a\u8bbe\u7f6e\u9879\u7684\u989c\u8272\uff0c\u53ef\u4ee5\u662f\u989c\u8272\u7684\u540d\u79f0\uff0c\u4f8b\u5982 red\uff1b\u4e5f\u53ef\u4ee5\u662f 16 \u8fdb\u5236\u7684">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<indicator>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/indicator.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;indicator&gt;&lt;indicator&gt; \u7ec4\u4ef6\u7528\u4e8e\u663e\u793a\u8f6e\u64ad\u56fe\u6307\u793a\u5668\u6548\u679c\uff0c\u5fc5\u987b\u5145\u5f53 &lt;slider&gt; \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\u4f7f\u7528\u3002
+\u5b50\u7ec4\u4ef6&lt;indicator&gt; \u7ec4\u4ef6\u6ca1\u6709\u4efb\u4f55\u5b50\u7ec4\u4ef6\u3002
+\u6837\u5f0f&lt;indicator&gt; \u7ec4\u4ef6\u6709\u4e00\u4e9b\u79c1\u6709\u6837\u5f0f\uff0c\u5982\u4e0b\uff1a
+
+item-color {color}\uff1a\u8bbe\u7f6e\u9879\u7684\u989c\u8272\uff0c\u53ef\u4ee5\u662f\u989c\u8272\u7684\u540d\u79f0\uff0c\u4f8b\u5982 red\uff1b\u4e5f\u53ef\u4ee5\u662f 16 \u8fdb\u5236\u7684">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.846Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<indicator>">
+<meta name="twitter:description" content="&lt;indicator&gt;&lt;indicator&gt; \u7ec4\u4ef6\u7528\u4e8e\u663e\u793a\u8f6e\u64ad\u56fe\u6307\u793a\u5668\u6548\u679c\uff0c\u5fc5\u987b\u5145\u5f53 &lt;slider&gt; \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\u4f7f\u7528\u3002
+\u5b50\u7ec4\u4ef6&lt;indicator&gt; \u7ec4\u4ef6\u6ca1\u6709\u4efb\u4f55\u5b50\u7ec4\u4ef6\u3002
+\u6837\u5f0f&lt;indicator&gt; \u7ec4\u4ef6\u6709\u4e00\u4e9b\u79c1\u6709\u6837\u5f0f\uff0c\u5982\u4e0b\uff1a
+
+item-color {color}\uff1a\u8bbe\u7f6e\u9879\u7684\u989c\u8272\uff0c\u53ef\u4ee5\u662f\u989c\u8272\u7684\u540d\u79f0\uff0c\u4f8b\u5982 red\uff1b\u4e5f\u53ef\u4ee5\u662f 16 \u8fdb\u5236\u7684">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link current "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link current "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <indicator>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.846Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-indicator-gt"><a href="#lt-indicator-gt" class="headerlink" title="<indicator>"></a><indicator></h1><p><code><indicator></code> \u7ec4\u4ef6\u7528\u4e8e\u663e\u793a\u8f6e\u64ad\u56fe\u6307\u793a\u5668\u6548\u679c\uff0c\u5fc5\u987b\u5145\u5f53 <a href="./slider.html"><code><slider></code></a> \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\u4f7f\u7528\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p><code><indicator></code> \u7ec4\u4ef6\u6ca1\u6709\u4efb\u4f55\u5b50\u7ec4\u4ef6\u3002</p>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><p><code><indicator></code> \u7ec4\u4ef6\u6709\u4e00\u4e9b\u79c1\u6709\u6837\u5f0f\uff0c\u5982\u4e0b\uff1a</p>
+<ul>
+<li><p><code>item-color {color}</code>\uff1a\u8bbe\u7f6e\u9879\u7684\u989c\u8272\uff0c\u53ef\u4ee5\u662f\u989c\u8272\u7684\u540d\u79f0\uff0c\u4f8b\u5982 <code>red</code>\uff1b\u4e5f\u53ef\u4ee5\u662f 16 \u8fdb\u5236\u7684\u989c\u8272\uff0c\u4f8b\u5982 <code>#RRGGBB</code>\u3002</p>
+</li>
+<li><p><code>item-selected-color {color}</code>\uff1a\u88ab\u9009\u4e2d\u65f6\u7684\u989c\u8272\uff0c\u53ef\u4ee5\u662f\u989c\u8272\u7684\u540d\u79f0\uff0c<code>red</code>\uff1b\u4e5f\u53ef\u4ee5\u662f 16 \u8fdb\u5236\u7684\u989c\u8272\uff0c\u4f8b\u5982 <code>#RRGGBB</code>\u3002</p>
+</li>
+<li><p><code>item-size {number}</code>\uff1a\u5143\u7d20\u7684\u4e2a\u6570\u3002</p>
+</li>
+<li><p>\u901a\u7528\u6837\u5f0f</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+</li>
+</ul>
+<p><strong>\u6ce8\u610f 1\uff1a</strong></p>
+<p>\u8fd9\u91cc\u9700\u8981\u6ce8\u610f\u4e00\u70b9\uff0c<code><indicator></code> \u7684 <code>position</code> \u4e0d\u4ec5\u4f9d\u8d56 <code>top</code>\u3001<code>left</code>\u3001<code>bottom</code> \u548c <code>right</code> \u6837\u5f0f\uff0c\u540c\u65f6\u4f1a\u53c2\u8003 <code>width</code>\u548c <code>height</code> \u6837\u5f0f\u3002<code><indicator></code> \u9ed8\u8ba4\u7684\u5bbd\u9ad8\u7ee7\u627f\u4e8e <code><slider></code>\uff0c\u5982\u679c <code><slider></code> \u672a\u8bbe\u7f6e\u5bbd\u9ad8\uff0c\u9700\u8981\u663e\u5f0f\u7684\u7ed9 <code><indicator></code> \u8bbe\u7f6e\u5bbd\u9ad8\u503c\u3002</p>
+<p><strong>\u6ce8\u610f 2\uff1a</strong></p>
+<p><code>background-color</code> \u4e0d\u63a8\u8350\u4f7f\u7528\uff0c\u5efa\u8bae\u4f7f\u7528 <code>item-color</code> \u548c <code>item-selected-color</code> \u4ee3\u66ff\u3002</p>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><p>\u652f\u6301\u6240\u6709\u901a\u7528\u4e8b\u4ef6\u3002</p>
+<ul>
+<li><code>click</code></li>
+<li><code>longpress</code></li>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a></p>
+<h2 id="\u7ea6\u675f"><a href="#\u7ea6\u675f" class="headerlink" title="\u7ea6\u675f"></a>\u7ea6\u675f</h2><ol>
+<li>\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002</li>
+</ol>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">slider</span> <span class="attr">class</span>=<span class="string">"slider"</span> <span class="attr">interval</span>=<span class="string">"4500"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"frame"</span> <span class="attr">v-for</span>=<span class="string">"img in imageList"</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">class</span>=<span class="st
ring">"image"</span> <span class="attr">resize</span>=<span class="string">"cover"</span> <span class="attr">:src</span>=<span class="string">"img.src"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span>></span>{{img.title}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">indicator</span> <span class="attr">class</span>=<span class="string">"indicator"</span>></span><span class="tag"></<span class="name">indicator</span>></span></div><div class="line"> <span class="tag"></<span class="name">slider</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span
>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.image</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">700px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.slider</span> {</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">25px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">25px</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">height</spa
n>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.title</span> {</div><div class="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> <span class="attribute">top</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">padding-left</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="n
umber">#FFFFFF</span>;</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">36px</span>;</div><div class="line"> <span class="attribute">line-height</span>: <span class="number">60px</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(0, 0, 0, 0.3);</div><div class="line"> }</div><div class="line"> <span class="selector-class">.frame</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">position</span>: relative;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.indicator</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">700px</span>;</div><div class="line"> <span class="att
ribute">height</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">item-color</span>: green;</div><div class="line"> <span class="attribute">item-selected-color</span>: red;</div><div class="line"> <span class="attribute">item-size</span>: <span class="number">50px</span>;</div><div class="line"> <span class="attribute">top</span>: <span class="number">200px</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">200px</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span>
{</div><div class="line"> <span class="attr">imageList</span>: [</div><div class="line"> { <span class="attr">title</span>: <span class="string">'item A'</span>, <span class="attr">src</span>: <span class="string">'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'</span>},</div><div class="line"> { <span class="attr">title</span>: <span class="string">'item B'</span>, <span class="attr">src</span>: <span class="string">'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'</span>},</div><div class="line"> { <span class="attr">title</span>: <span class="string">'item C'</span>, <span class="attr">src</span>: <span class="string">'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'</span>}</div><div class="line"> ]</div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span clas
s="attr">methods</span>: {</div><div class="line"> onchange (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'changed:'</span>, event.index)</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/indicator.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/indicator.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/indicator.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[41/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/android-apis.html
----------------------------------------------------------------------
diff --git a/content/cn/references/android-apis.html b/content/cn/references/android-apis.html
new file mode 100644
index 0000000..10c2e3a
--- /dev/null
+++ b/content/cn/references/android-apis.html
@@ -0,0 +1,1382 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Android APIs | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Android APIsWeex \u521d\u6b65\u63a5\u5165\u8bf7\u53c2\u8003\uff1ahttps://github.com/weexteam/article/issues/25
+WXSDKEngine \u662f Weex \u5bf9\u5916\u7684\u603b\u5165\u53e3\u3002\u4e3b\u8981\u63d0\u4f9b\u4e86\u4e00\u4e0b\u529f\u80fd\uff1a
+
+\u8bbe\u7f6e\u76f8\u5173 Adapter \u548c\u83b7\u53d6 adapter\u3002
+\u6ce8\u518c\u81ea\u5b9a\u4e49 module \u548c component
+\u91cd\u7f6e JSFramework
+
+Adapter \u4ecb\u7ecdWeex \u4e3a\u4e86\u91cd\u7528 Nati">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Android APIs">
+<meta property="og:url" content="https://weex.apache.org/cn/references/android-apis.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Android APIsWeex \u521d\u6b65\u63a5\u5165\u8bf7\u53c2\u8003\uff1ahttps://github.com/weexteam/article/issues/25
+WXSDKEngine \u662f Weex \u5bf9\u5916\u7684\u603b\u5165\u53e3\u3002\u4e3b\u8981\u63d0\u4f9b\u4e86\u4e00\u4e0b\u529f\u80fd\uff1a
+
+\u8bbe\u7f6e\u76f8\u5173 Adapter \u548c\u83b7\u53d6 adapter\u3002
+\u6ce8\u518c\u81ea\u5b9a\u4e49 module \u548c component
+\u91cd\u7f6e JSFramework
+
+Adapter \u4ecb\u7ecdWeex \u4e3a\u4e86\u91cd\u7528 Nati">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.838Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Android APIs">
+<meta name="twitter:description" content="Android APIsWeex \u521d\u6b65\u63a5\u5165\u8bf7\u53c2\u8003\uff1ahttps://github.com/weexteam/article/issues/25
+WXSDKEngine \u662f Weex \u5bf9\u5916\u7684\u603b\u5165\u53e3\u3002\u4e3b\u8981\u63d0\u4f9b\u4e86\u4e00\u4e0b\u529f\u80fd\uff1a
+
+\u8bbe\u7f6e\u76f8\u5173 Adapter \u548c\u83b7\u53d6 adapter\u3002
+\u6ce8\u518c\u81ea\u5b9a\u4e49 module \u548c component
+\u91cd\u7f6e JSFramework
+
+Adapter \u4ecb\u7ecdWeex \u4e3a\u4e86\u91cd\u7528 Nati">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link current ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link current ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Android APIs
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.838Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Android-APIs"><a href="#Android-APIs" class="headerlink" title="Android APIs"></a>Android APIs</h1><p>Weex \u521d\u6b65\u63a5\u5165\u8bf7\u53c2\u8003\uff1a<a href="https://github.com/weexteam/article/issues/25" target="_blank" rel="external">https://github.com/weexteam/article/issues/25</a></p>
+<h2 id="WXSDKEngine-\u662f-Weex-\u5bf9\u5916\u7684\u603b\u5165\u53e3\u3002"><a href="#WXSDKEngine-\u662f-Weex-\u5bf9\u5916\u7684\u603b\u5165\u53e3\u3002" class="headerlink" title="WXSDKEngine \u662f Weex \u5bf9\u5916\u7684\u603b\u5165\u53e3\u3002"></a>WXSDKEngine \u662f Weex \u5bf9\u5916\u7684\u603b\u5165\u53e3\u3002</h2><p>\u4e3b\u8981\u63d0\u4f9b\u4e86\u4e00\u4e0b\u529f\u80fd\uff1a</p>
+<ol>
+<li>\u8bbe\u7f6e\u76f8\u5173 Adapter \u548c\u83b7\u53d6 adapter\u3002</li>
+<li>\u6ce8\u518c\u81ea\u5b9a\u4e49 module \u548c component</li>
+<li>\u91cd\u7f6e JSFramework</li>
+</ol>
+<h2 id="Adapter-\u4ecb\u7ecd"><a href="#Adapter-\u4ecb\u7ecd" class="headerlink" title="Adapter \u4ecb\u7ecd"></a>Adapter \u4ecb\u7ecd</h2><p>Weex \u4e3a\u4e86\u91cd\u7528 Native \u901a\u7528\u5e93\u63d0\u4f9b\u4e86\u5bf9\u5e94\u7684\u63a5\u53e3\u8fdb\u884c\u8bbe\u7f6e\u3002</p>
+<ol>
+<li><p>IWXImgLoaderAdapter \u56fe\u7247\u9002\u914d\u5668\u3002Weex \u4f1a\u628a\u9700\u8981\u8bbe\u7f6e\u56fe\u7247\u7684 View \u548c URL \u900f\u9732\u51fa\u6765\uff0cNative \u7aef\u9700\u8981\u5b9e\u73b0\u8fd9\u4e2a\u63a5\u53e3\u8fdb\u884c\u56fe\u7247\u4e0b\u8f7d\u3002 Weex \u6ca1\u6709\u63d0\u4f9b\u56fe\u7247\u9ed8\u8ba4\u5b9e\u73b0\u3002</p>
+<p>\u63a5\u53e3\u5b9a\u4e49\u5982\u4e0b\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">interface</span> <span class="title">IWXImgLoaderAdapter</span> </span>{</div><div class="line"> <span class="function"><span class="keyword">void</span> <span class="title">setImage</span><span class="params">(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy)</span></span>;</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>WXImageQuality \u8868\u793a\u56fe\u7247\u7684\u8d28\u91cf\uff0cWXImageQuality \u53d6\u5982\u4e0b\u503c LOW, NORMAL, HIGH, ORIGINAL \u56fe\u7247\u8d28\u91cf\u4f9d\u6b21\u53d8\u9ad8\u3002\u9ed8\u8ba4\u4e3a LOW\u3002WXImageStrategy \u4e3a\u6269\u5c55\u7c7b\uff0c\u8868\u793a\u4e86\u56fe\u7247\u662f\u5426\u53ef\u4ee5\u88c1\u526a (isClipping) \u9510\u5316 (isSharpen) \u5360\u4f4d\u7b26 (placeHolder) \u7b49\u3002</p>
+</li>
+<li><p>IWXHttpAdapter \u7f51\u7edc\u4e0b\u8f7d\u9002\u914d\u5668\u3002Weex \u81ea\u5b9a\u4e49\u4e86 WXRequest \u548c OnHttpListener\uff0cNative \u91cd\u8f7d\u63a5\u53e3\u540e\u53ef\u4ee5\u4ece Request \u4e2d\u83b7\u53d6URL\uff0cHeader \u7b49\u53c2\u6570\uff0c\u7f51\u7edc\u8bf7\u6c42\u5b8c\u6210\u540e\u53ef\u4ee5\u901a\u8fc7 OnHttpListener \u8fdb\u884c\u56de\u8c03\u901a\u77e5\u3002Weex \u63d0\u4f9b\u4e86\u9ed8\u8ba4\u7f51\u7edc\u8bf7\u6c42\uff1aDefaultWXHttpAdapter\uff0c \u4f7f\u7528\u7684\u662f HttpURLConnection \u8fdb\u884c\u7f51\u7edc\u8bf7\u6c42\u3002</p>
+<p>\u63a5\u53e3\u5b9a\u4e49\u5982\u4e0b\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">interface</span> <span class="title">IWXHttpAdapter</span> </span>{</div><div class="line"> <span class="function"><span class="keyword">void</span> <span class="title">sendRequest</span><span class="params">(WXRequest request, OnHttpListener listener)</span></span>;</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>WXRequest \u5b9a\u4e49\u4e86\u7f51\u7edc\u8bf7\u6c42\u76f8\u5173\u7684\u53c2\u6570\uff0c\u8bf7\u6c42\u65b9\u6cd5\uff0c\u8bf7\u6c42\u4e3b\u4f53\uff0c\u8d85\u65f6\u65f6\u95f4\u3002Weex\u9ed8\u8ba4\u8d85\u65f6\u65f6\u95f4\u662f3000.</p>
+<p>OnHttpListener \u5b9a\u4e49\u4e86\u7f51\u7edc\u8bf7\u6c42\u7ed3\u675f\u540e\u5bf9\u5e94\u65b9\u6cd5\u3002\u5b9a\u4e49\u5982\u4e0b\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="class"><span class="keyword">interface</span> <span class="title">OnHttpListener</span> </span>{</div><div class="line"> <span class="comment">/**</span></div><div class="line"> * start request</div><div class="line"> */</div><div class="line"> <span class="function"><span class="keyword">void</span> <span class="title">onHttpStart</span><span class="params">()</span></span>;</div><div class="line"></div><div class="line"> <span class="comment">/**</span></div><div class="line"> * headers received</div><div class="line"> */</div><div class="line"> <span class="function"><span class="keyword">void</span> <span class="title">onHeadersReceived</span><span class="params">(<span class="keyword">int</span> statusCode,Map<String,List<String>> headers)</span></span>;</div><div class="line"></div><div class="line"> <span class="comment">/**</span></div><div class="line">
* post progress</div><div class="line"> * <span class="doctag">@param</span> uploadProgress</div><div class="line"> */</div><div class="line"> <span class="function"><span class="keyword">void</span> <span class="title">onHttpUploadProgress</span><span class="params">(<span class="keyword">int</span> uploadProgress)</span></span>;</div><div class="line"></div><div class="line"> <span class="comment">/**</span></div><div class="line"> * response loaded length (bytes), full length should read from headers (content-length)</div><div class="line"> * <span class="doctag">@param</span> loadedLength</div><div class="line"> */</div><div class="line"> <span class="function"><span class="keyword">void</span> <span class="title">onHttpResponseProgress</span><span class="params">(<span class="keyword">int</span> loadedLength)</span></span>;</div><div class="line"></div><div class="line"> <span class="comment">/**</span></div><div class="line"> * http response finish</div><div class="l
ine"> * <span class="doctag">@param</span> response</div><div class="line"> */</div><div class="line"> <span class="function"><span class="keyword">void</span> <span class="title">onHttpFinish</span><span class="params">(WXResponse response)</span></span>;</div><div class="line">}</div></pre></td></tr></table></figure>
+</li>
+<li><p>IWXUserTrackAdapter Weex \u76f8\u5173\u6027\u80fd\u6570\u636e (\u9996\u5c4f\u52a0\u8f7d\u65f6\u95f4\u3001JS-Native \u901a\u4fe1\u65f6\u95f4\u3001dom \u66f4\u65b0\u65f6\u95f4\u7b49) \u548c\u5176\u4ed6\u901a\u7528\u4fe1\u606f (JSLib \u6587\u4ef6\u5927\u5c0f, Weex SDK \u7248\u672c\u53f7\u7b49)\u3002</p>
+<p>\u63a5\u53e3\u5b9a\u4e49\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">interface</span> <span class="title">IWXUserTrackAdapter</span> </span>{</div><div class="line"> <span class="function"><span class="keyword">void</span> <span class="title">commit</span><span class="params">(Context context, String eventId, String type, WXPerformance perf, Map<String, Serializable> params)</span></span>;</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>Native \u5b9e\u73b0\u63a5\u53e3\u540e\u53ef\u4ee5\u901a\u8fc7 WXPerformance \u548c params \u83b7\u53d6\u5bf9\u5e94\u7684\u4fe1\u606f\u3002<br>WXPerformane \u5bf9\u5e94\u5b57\u6bb5\u8868\u793a\u542b\u4e49\u8bf7\u53c2\u8003\u6587\u6863\uff1a<a href="https://github.com/weexteam/article/issues/124" target="_blank" rel="external">https://github.com/weexteam/article/issues/124</a></p>
+<p>\u540e\u7eed\u968f\u7740\u5f00\u53d1 Weex \u8fd8\u4f1a\u5b9a\u4e49\u66f4\u591a\u7684 Adapter\uff0c\u6b64\u6587\u6863\u4e5f\u4f1a\u5b9a\u65f6\u66f4\u65b0\u3002</p>
+</li>
+</ol>
+<h2 id="Native-\u548c-JS-\u901a\u4fe1"><a href="#Native-\u548c-JS-\u901a\u4fe1" class="headerlink" title="Native \u548c JS \u901a\u4fe1"></a>Native \u548c JS \u901a\u4fe1</h2><ol>
+<li><p>\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u901a\u77e5</p>
+<p>\u591a\u7528\u4e8e\u67d0\u4e2a\u81ea\u5b9a\u4e49\u63a7\u4ef6\u8fdb\u884c\u4e8b\u4ef6\u901a\u77e5\uff0c\u4f8b\u5982\u81ea\u5b9a\u4e49\u70b9\u51fb\u4e8b\u4ef6\uff0c\u54cd\u5e94\u4e0b\u62c9\u4e8b\u4ef6\u7b49\u3002</p>
+<p>WXSDKInstance.java </p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">fireEvent</span><span class="params">(String elementRef,<span class="keyword">final</span> String type, <span class="keyword">final</span> Map<String, Object> data,<span class="keyword">final</span> Map<String, Object> domChanges)</span></span>{ }</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">fireEvent</span><span class="params">(String elementRef,<span class="keyword">final</span> String type, <span class="keyword">final</span> Map<String, Object> data)</span></span>{</div><div class="line"> fireEvent(elementRef,type,data,<span class="keyword">null</span>);</div><div class="line">}</div><div class="line"></div><div class="line"><span class
="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">fireEvent</span><span class="params">(String elementRef, String type)</span></span>{</div><div class="line"> fireEvent(ref,type,<span class="keyword">new</span> HashMap<String, Object>());</div><div class="line">}</div></pre></td></tr></table></figure>
+<p><code>elementRef</code>\uff1a\u4e8b\u4ef6\u53d1\u751f\u7684\u63a7\u4ef6 ID\u3002<br><code>type</code>: \u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0cWeex \u9ed8\u8ba4\u4ee5 onXxxxx \u5f00\u5934\u4e3a\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002onPullDown (\u4e0b\u62c9\u4e8b\u4ef6)\u3002<br><code>data</code>: \u9700\u8981\u900f\u51fa\u7684\u53c2\u6570\uff0c\u4f8b\u5982\u5f53\u524d\u63a7\u4ef6\u7684\u5927\u5c0f\uff0c\u5750\u6807\u7b49\u5176\u4ed6\u4fe1\u606f\u3002<br><code>domChanges</code>\uff1a\u66f4\u65b0 ref \u5bf9\u5e94\u63a7\u4ef6\u7684 Attribute \u548c Style\u3002</p>
+</li>
+<li><p>\u4e8b\u4ef6\u56de\u8c03 </p>
+<p>\u591a\u7528\u4e8e Module \u56de\u8c03\uff0c\u4f8b\u5982\u5b9a\u4f4d Module \u5b8c\u6210\u540e\u9700\u8981\u901a\u77e5 JS\u3002\u4f7f\u7528\u65b9\u6cd5\u5982\u4e0b\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">WXLocation</span> <span class="keyword">extends</span> <span class="title">WXModule</span> </span>{</div><div class="line"></div><div class="line"> <span class="meta">@JSMethod</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">getLocation</span><span class="params">(JSCallback callback)</span></span>{</div><div class="line"> <span class="comment">//\u83b7\u53d6\u5b9a\u4f4d\u4ee3\u7801.....</span></div><div class="line"> Map<String,String> data=<span class="keyword">new</span> HashMap<>();</div><div class="line"> data.put(<span class="string">"x"</span>,<span class="string">"x"</span>);</div><div class="line"> data.put(<span class="string">"y"</span>,<span class="string">"y"</span>);<
/div><div class="line"> <span class="comment">//\u901a\u77e5\u4e00\u6b21</span></div><div class="line"> callback.invoke(data);</div><div class="line"> <span class="comment">//\u6301\u7eed\u901a\u77e5</span></div><div class="line"> callback.invokeAndKeepAlive(data);</div><div class="line"> </div><div class="line"> <span class="comment">//invoke\u65b9\u6cd5\u548cinvokeAndKeepAlive\u4e24\u4e2a\u65b9\u6cd5\u4e8c\u9009\u4e00</span></div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+</li>
+</ol>
+<h2 id="\u6ce8\u518c\u6ed1\u52a8\u4e8b\u4ef6"><a href="#\u6ce8\u518c\u6ed1\u52a8\u4e8b\u4ef6" class="headerlink" title="\u6ce8\u518c\u6ed1\u52a8\u4e8b\u4ef6"></a>\u6ce8\u518c\u6ed1\u52a8\u4e8b\u4ef6</h2><p>Weex \u83b7\u53d6\u6ed1\u52a8\u4e8b\u4ef6\u53ef\u4ee5\u901a\u8fc7 WXSDKInstance \u6ce8\u518c registerOnWXScrollListener \u76d1\u542c</p>
+<p>\u63a5\u53e3\u5b9a\u4e49\u5982\u4e0b\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">interface</span> <span class="title">OnWXScrollListener</span> </span>{</div><div class="line"></div><div class="line"> <span class="comment">/**</span></div><div class="line"> * The view is not currently scrolling.</div><div class="line"> */</div><div class="line"> <span class="keyword">int</span> IDLE = RecyclerView.SCROLL_STATE_IDLE;</div><div class="line"> <span class="comment">/**</span></div><div class="line"> * The view is currently being dragged by outside input such as user touch input.</div><div class="line"> */</div><div class="line"> <span class="keyword">int</span> DRAGGING = RecyclerView.SCROLL_STATE_DRAGGING;</div><div class="line"> <span class="comment">/**</span></div><div class="line"> * The view is currently animating to a final position while not under</div><div class="line"> * outsi
de control.</div><div class="line"> */</div><div class="line"> <span class="keyword">int</span> SETTLING = RecyclerView.SCROLL_STATE_SETTLING;</div><div class="line"></div><div class="line"> <span class="comment">/**</span></div><div class="line"> * Callback method to be invoked when the view has been scrolled. This will be</div><div class="line"> * called after the scroll has completed.</div><div class="line"> * <p></div><div class="line"> * This callback will also be called if visible item range changes after a layout</div><div class="line"> * calculation. In that case, dx and dy will be 0.</div><div class="line"> *</div><div class="line"> */</div><div class="line"> <span class="function"><span class="keyword">void</span> <span class="title">onScrolled</span><span class="params">(View view, <span class="keyword">int</span> x, <span class="keyword">int</span> y)</span></span>;</div><div class="line"></div><div class="line"> <span class="comment">/**</span>
</div><div class="line"> * Callback method to be invoked when view's scroll state changes.</div><div class="line"> *</div><div class="line"> */</div><div class="line"> <span class="function"><span class="keyword">void</span> <span class="title">onScrollStateChanged</span><span class="params">(View view, <span class="keyword">int</span> x, <span class="keyword">int</span> y, <span class="keyword">int</span> newState)</span></span>;</div><div class="line">}</div></pre></td></tr></table></figure>
+<h2 id="\u81ea\u5b9a\u4e49NavBar"><a href="#\u81ea\u5b9a\u4e49NavBar" class="headerlink" title="\u81ea\u5b9a\u4e49NavBar"></a>\u81ea\u5b9a\u4e49NavBar</h2><p>Weex \u63d0\u4f9b\u4e86 WXNavigatorModule \u8fdb\u884c\u5bfc\u822a\u63a7\u5236\uff0c\u5bf9\u5e94\u7684\u65b9\u6cd5\u53ef\u4ee5\u901a\u8fc7\u8bbe\u7f6e IActivityNavBarSetter \u63a5\u53e3\u8fdb\u884c\u5b9a\u5236\u3002</p>
+<p>\u4f7f\u7528\u65b9\u6cd5:</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line">WXSDKEngine.setActivityNavBarSetter(<span class="keyword">new</span> IActivityNavBarSetter(){</div><div class="line">});</div></pre></td></tr></table></figure>
+<h2 id="\u5176\u4ed6\u4ecb\u7ecd"><a href="#\u5176\u4ed6\u4ecb\u7ecd" class="headerlink" title="\u5176\u4ed6\u4ecb\u7ecd"></a>\u5176\u4ed6\u4ecb\u7ecd</h2><h3 id="\u52a8\u6001\u9002\u914d\u5bb9\u5668"><a href="#\u52a8\u6001\u9002\u914d\u5bb9\u5668" class="headerlink" title="\u52a8\u6001\u9002\u914d\u5bb9\u5668"></a>\u52a8\u6001\u9002\u914d\u5bb9\u5668</h3><p>\u56e0\u4e3a Android \u624b\u673a\u7684\u788e\u7247\u5316\u5bfc\u81f4\u5c4f\u5e55\u9002\u914d\u5f88\u56f0\u96be\u3002Weex \u5bf9\u5916\u63d0\u4f9b\u7684\u63a5\u53e3 render \u9700\u8981\u52a8\u6001\u4f20\u5165\u5bb9\u5668\u7684\u5bbd\u9ad8\uff0c\u4f46\u662f\u4f20\u5165\u7684\u5bbd\u9ad8\u6709\u65f6\u4f1a\u53d1\u751f\u53d8\u5316\uff0c\u4f8b\u5982 ActionBar \u9690\u85cf\u7b49\uff0c\u8fd9\u662f\u4f20\u5165\u7684 Weex \u5bb9\u5668\u4e5f\u8981\u8fdb\u884c\u5bf9\u5e94\u7684\u53d8\u5316\u3002<br>\u4e3a\u4e86\u9002\u5e94\u8fd9\u79cd\u53d8\u5316\uff0cWeex \u63d0\u4f9b\u4e86\u63a5\u53e3 <code>WXSDKInstance.setSize(int width, int height)</code> \u6765\u6539\u53d8\u5bb9\u5668\u7684\u5927\u5c0f\u3002</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"> * </div><div class="line"> * <span class="doctag">@param</span> width \u5bb9\u5668\u5bbd\u5ea6</div><div class="line"> * <span class="doctag">@param</span> height \u5bb9\u5668\u9ad8\u5ea6</div><div class="line"> */</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setSize</span><span class="params">(<span class="keyword">int</span> width, <span class="keyword">int</span> height)</span></span>{};</div></pre></td></tr></table></figure>
+<h3 id="\u964d\u7ea7\u4f7f\u7528"><a href="#\u964d\u7ea7\u4f7f\u7528" class="headerlink" title="\u964d\u7ea7\u4f7f\u7528"></a>\u964d\u7ea7\u4f7f\u7528</h3><p>Weex \u5904\u4e8e\u53d1\u5c55\u9636\u6bb5\u4f1a\u589e\u52a0\u4e00\u4e9b\u65b0\u7684\u7279\u6027\u548c\u529f\u80fd\uff0c\u4f46\u662f\u8fd9\u4e9b\u65b0\u7684\u7279\u6027\u548c\u529f\u80fd\u90fd\u5fc5\u987b\u5347\u7ea7 SDK \u624d\u80fd\u5b9e\u73b0\uff0c\u5bf9\u4e8e\u6ca1\u6709\u5347\u7ea7\u7684\u5e94\u7528\u5e94\u8be5\u600e\u4e48\u5904\u7406\u5462\uff1f\u53ef\u4ee5\u4f7f\u7528\u964d\u7ea7\u529f\u80fd\u3002</p>
+<p>\u6240\u8c13\u964d\u7ea7\u529f\u80fd\u5c31\u662f Weex \u65e0\u6cd5\u8fd0\u884c\u7684\u7248\u672c\u6216\u8005\u624b\u673a\uff0c\u53ef\u4ee5\u7528 Weex h5 \u6765\u4ee3\u66ff\u3002</p>
+<p>Native \u7aef\u53ef\u4ee5\u901a\u8fc7\u63a5\u53e3 IWXRenderListener \u4e2d\u7684 onException \u65b9\u6cd5\u8fdb\u884c\u5904\u7406\uff0c\u5982\u679c\u662f\u4e3b\u52a8\u964d\u7ea7 errCode \u662f\u4ee5\u201c|\u201d\u5206\u5272\u7684\u5b57\u7b26\u3002\u201c|\u201d\u524d\u9762\u7684\u5b57\u7b26\u4e3a1\u8868\u793a\u4e3b\u52a8\u964d\u7ea7\uff0cNative \u7aef\u53ef\u4ee5\u8df3\u8f6c\u5230\u5bf9\u5e94\u7684 H5 \u9875\u9762\u3002\u6216\u8005\u7528\u5176\u4ed6\u7684\u65b9\u5f0f\u63d0\u793a\u7528\u6237\u5f53\u524d\u73af\u5883\u4e0d\u652f\u6301 Weex\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/android-apis.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/android-apis.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/color-names.html
----------------------------------------------------------------------
diff --git a/content/cn/references/color-names.html b/content/cn/references/color-names.html
new file mode 100644
index 0000000..2077ce9
--- /dev/null
+++ b/content/cn/references/color-names.html
@@ -0,0 +1,2105 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u989c\u8272\u540d\u79f0\u5217\u8868 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Weex \u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd:
+
+
+\u989c\u8272\u540d
+\u5341\u516d\u8fdb\u5236RGB\u503c
+
+
+
+
+black(\u9ed1)
+#000000
+
+
+silver(\u94f6)
+#C0C0C0
+
+
+gray(\u7070)
+#808080
+
+
+white(\u767d)
+#FFFFFF
+
+
+maroon(\u8910\u7d2b\u7ea2)
+#800000
+
+
+red(\u7ea2)
+#FF0000
+
+
+purple(\u7d2b)
+#800080
+
+
+fuchsia(\u665a\u6a31)
+#FF00FF
+
+
+g">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u989c\u8272\u540d\u79f0\u5217\u8868">
+<meta property="og:url" content="https://weex.apache.org/cn/references/color-names.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Weex \u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd:
+
+
+\u989c\u8272\u540d
+\u5341\u516d\u8fdb\u5236RGB\u503c
+
+
+
+
+black(\u9ed1)
+#000000
+
+
+silver(\u94f6)
+#C0C0C0
+
+
+gray(\u7070)
+#808080
+
+
+white(\u767d)
+#FFFFFF
+
+
+maroon(\u8910\u7d2b\u7ea2)
+#800000
+
+
+red(\u7ea2)
+#FF0000
+
+
+purple(\u7d2b)
+#800080
+
+
+fuchsia(\u665a\u6a31)
+#FF00FF
+
+
+g">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.839Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u989c\u8272\u540d\u79f0\u5217\u8868">
+<meta name="twitter:description" content="Weex \u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd:
+
+
+\u989c\u8272\u540d
+\u5341\u516d\u8fdb\u5236RGB\u503c
+
+
+
+
+black(\u9ed1)
+#000000
+
+
+silver(\u94f6)
+#C0C0C0
+
+
+gray(\u7070)
+#808080
+
+
+white(\u767d)
+#FFFFFF
+
+
+maroon(\u8910\u7d2b\u7ea2)
+#800000
+
+
+red(\u7ea2)
+#FF0000
+
+
+purple(\u7d2b)
+#800080
+
+
+fuchsia(\u665a\u6a31)
+#FF00FF
+
+
+g">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link current ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link current ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u989c\u8272\u540d\u79f0\u5217\u8868
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.839Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Weex-\u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0"><a href="#Weex-\u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0" class="headerlink" title="Weex \u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0"></a>Weex \u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0</h1><h3 id="\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd"><a href="#\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd" class="headerlink" title="\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd:"></a>\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd:</h3><table>
+<thead>
+<tr>
+<th>\u989c\u8272\u540d</th>
+<th>\u5341\u516d\u8fdb\u5236RGB\u503c</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>black(\u9ed1)</td>
+<td>#000000</td>
+</tr>
+<tr>
+<td>silver(\u94f6)</td>
+<td>#C0C0C0</td>
+</tr>
+<tr>
+<td>gray(\u7070)</td>
+<td>#808080</td>
+</tr>
+<tr>
+<td>white(\u767d)</td>
+<td>#FFFFFF</td>
+</tr>
+<tr>
+<td>maroon(\u8910\u7d2b\u7ea2)</td>
+<td>#800000</td>
+</tr>
+<tr>
+<td>red(\u7ea2)</td>
+<td>#FF0000</td>
+</tr>
+<tr>
+<td>purple(\u7d2b)</td>
+<td>#800080</td>
+</tr>
+<tr>
+<td>fuchsia(\u665a\u6a31)</td>
+<td>#FF00FF</td>
+</tr>
+<tr>
+<td>green(\u7eff)</td>
+<td>#008000</td>
+</tr>
+<tr>
+<td>lime(\u77f3\u7070)</td>
+<td>#00FF00</td>
+</tr>
+<tr>
+<td>olive(\u6a44\u6984)</td>
+<td>#808000</td>
+</tr>
+<tr>
+<td>yellow(\u9ec4)</td>
+<td>#FFFF00</td>
+</tr>
+<tr>
+<td>navy(\u6d77\u519b\u84dd)</td>
+<td>#000080</td>
+</tr>
+<tr>
+<td>blue(\u84dd)</td>
+<td>#0000FF</td>
+</tr>
+<tr>
+<td>teal(\u6c34\u9e2d)</td>
+<td>#008080</td>
+</tr>
+<tr>
+<td>aqua(\u6c34\u84dd)</td>
+<td>#00FFFF</td>
+</tr>
+</tbody>
+</table>
+<h3 id="\u6269\u5c55\u989c\u8272\u5173\u952e\u8bcd"><a href="#\u6269\u5c55\u989c\u8272\u5173\u952e\u8bcd" class="headerlink" title="\u6269\u5c55\u989c\u8272\u5173\u952e\u8bcd:"></a>\u6269\u5c55\u989c\u8272\u5173\u952e\u8bcd:</h3><table>
+<thead>
+<tr>
+<th>\u989c\u8272\u540d</th>
+<th>\u5341\u516d\u8fdb\u5236RGB\u503c</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>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/color-names.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/color-names.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[25/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/modules/clipboard.html
----------------------------------------------------------------------
diff --git a/content/cn/references/modules/clipboard.html b/content/cn/references/modules/clipboard.html
new file mode 100644
index 0000000..c131276
--- /dev/null
+++ b/content/cn/references/modules/clipboard.html
@@ -0,0 +1,1350 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>clipboard | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="clipboard \u526a\u5207\u677fv0.8+
+\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 clipboard \u6a21\u5757\u7684 getString()\u3001setString() \u63a5\u53e3\u4ece\u7cfb\u7edf\u7684\u7c98\u8d34\u677f\u83b7\u53d6\u5185\u5bb9\u6216\u8005\u8bbe\u7f6e\u5185\u5bb9\u3002
+\u4ee5\u524d\u5f53\u6211\u4eec\u6536\u5230\u4e00\u6761\u77ed\u4fe1\u9a8c\u8bc1\u7801\u4fe1\u606f\u65f6\uff0c\u9664\u4e86\u4eba\u8089\u62f7\u8d1d\uff0c\u6211\u4eec\u65e0\u6cd5\u83b7\u53d6\u62f7\u8d1d\u77ed\u4fe1\u7684\u5185\u5bb9\u3002\u8fd9\u662f\u975e\u5e38\u82e6\u607c\u7684\u3002\u4f46\u662f\u73b0\u5728\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u7b80\u5355\u7684\u8c03\u7528 clipboard.getString() \u63a5\u53e3\u6765\u83b7\u53d6\u77ed\u4fe1\u5185\u5bb9\u4e86\u3002
+\u6ce8\u610f
+
+\u4ec5\u652f\u6301\u6587\u672c\u62f7\u8d1d
+\u51fa\u4e8e\u5b89\u5168\u8003\u8651">
+<meta property="og:type" content="website">
+<meta property="og:title" content="clipboard">
+<meta property="og:url" content="https://weex.apache.org/cn/references/modules/clipboard.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="clipboard \u526a\u5207\u677fv0.8+
+\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 clipboard \u6a21\u5757\u7684 getString()\u3001setString() \u63a5\u53e3\u4ece\u7cfb\u7edf\u7684\u7c98\u8d34\u677f\u83b7\u53d6\u5185\u5bb9\u6216\u8005\u8bbe\u7f6e\u5185\u5bb9\u3002
+\u4ee5\u524d\u5f53\u6211\u4eec\u6536\u5230\u4e00\u6761\u77ed\u4fe1\u9a8c\u8bc1\u7801\u4fe1\u606f\u65f6\uff0c\u9664\u4e86\u4eba\u8089\u62f7\u8d1d\uff0c\u6211\u4eec\u65e0\u6cd5\u83b7\u53d6\u62f7\u8d1d\u77ed\u4fe1\u7684\u5185\u5bb9\u3002\u8fd9\u662f\u975e\u5e38\u82e6\u607c\u7684\u3002\u4f46\u662f\u73b0\u5728\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u7b80\u5355\u7684\u8c03\u7528 clipboard.getString() \u63a5\u53e3\u6765\u83b7\u53d6\u77ed\u4fe1\u5185\u5bb9\u4e86\u3002
+\u6ce8\u610f
+
+\u4ec5\u652f\u6301\u6587\u672c\u62f7\u8d1d
+\u51fa\u4e8e\u5b89\u5168\u8003\u8651">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.902Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="clipboard">
+<meta name="twitter:description" content="clipboard \u526a\u5207\u677fv0.8+
+\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 clipboard \u6a21\u5757\u7684 getString()\u3001setString() \u63a5\u53e3\u4ece\u7cfb\u7edf\u7684\u7c98\u8d34\u677f\u83b7\u53d6\u5185\u5bb9\u6216\u8005\u8bbe\u7f6e\u5185\u5bb9\u3002
+\u4ee5\u524d\u5f53\u6211\u4eec\u6536\u5230\u4e00\u6761\u77ed\u4fe1\u9a8c\u8bc1\u7801\u4fe1\u606f\u65f6\uff0c\u9664\u4e86\u4eba\u8089\u62f7\u8d1d\uff0c\u6211\u4eec\u65e0\u6cd5\u83b7\u53d6\u62f7\u8d1d\u77ed\u4fe1\u7684\u5185\u5bb9\u3002\u8fd9\u662f\u975e\u5e38\u82e6\u607c\u7684\u3002\u4f46\u662f\u73b0\u5728\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u7b80\u5355\u7684\u8c03\u7528 clipboard.getString() \u63a5\u53e3\u6765\u83b7\u53d6\u77ed\u4fe1\u5185\u5bb9\u4e86\u3002
+\u6ce8\u610f
+
+\u4ec5\u652f\u6301\u6587\u672c\u62f7\u8d1d
+\u51fa\u4e8e\u5b89\u5168\u8003\u8651">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link current ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link current ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ clipboard
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.902Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="clipboard-\u526a\u5207\u677f"><a href="#clipboard-\u526a\u5207\u677f" class="headerlink" title="clipboard \u526a\u5207\u677f"></a><code>clipboard</code> \u526a\u5207\u677f</h1><p><span class="weex-version">v0.8+</span></p>
+<p>\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 <code>clipboard</code> \u6a21\u5757\u7684 <code>getString()</code>\u3001<code>setString()</code> \u63a5\u53e3\u4ece\u7cfb\u7edf\u7684\u7c98\u8d34\u677f\u83b7\u53d6\u5185\u5bb9\u6216\u8005\u8bbe\u7f6e\u5185\u5bb9\u3002</p>
+<p>\u4ee5\u524d\u5f53\u6211\u4eec\u6536\u5230\u4e00\u6761\u77ed\u4fe1\u9a8c\u8bc1\u7801\u4fe1\u606f\u65f6\uff0c\u9664\u4e86\u4eba\u8089\u62f7\u8d1d\uff0c\u6211\u4eec\u65e0\u6cd5\u83b7\u53d6\u62f7\u8d1d\u77ed\u4fe1\u7684\u5185\u5bb9\u3002\u8fd9\u662f\u975e\u5e38\u82e6\u607c\u7684\u3002\u4f46\u662f\u73b0\u5728\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u7b80\u5355\u7684\u8c03\u7528 <code>clipboard.getString()</code> \u63a5\u53e3\u6765\u83b7\u53d6\u77ed\u4fe1\u5185\u5bb9\u4e86\u3002</p>
+<p><strong>\u6ce8\u610f</strong></p>
+<ul>
+<li>\u4ec5\u652f\u6301\u6587\u672c\u62f7\u8d1d</li>
+<li>\u51fa\u4e8e\u5b89\u5168\u8003\u8651\u548c\u5e73\u53f0\u9650\u5236\uff0c\u53ea\u652f\u6301 Android \u548c iOS\uff0c\u4e0d\u652f\u6301 html5\u3002</li>
+</ul>
+<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><h3 id="getString-callback"><a href="#getString-callback" class="headerlink" title="getString(callback)"></a><code>getString(callback)</code></h3><p>\u4ece\u7cfb\u7edf\u7c98\u8d34\u677f\u8bfb\u53d6\u5185\u5bb9\u3002</p>
+<h4 id="\u53c2\u6570"><a href="#\u53c2\u6570" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>callback {function (ret)}</code>\uff1a\u6267\u884c\u5b8c\u8bfb\u53d6\u64cd\u4f5c\u540e\u7684\u56de\u8c03\u51fd\u6570\u3002<code>ret {Object}</code> \u4e3a <code>callback</code> \u51fd\u6570\u7684\u53c2\u6570\uff0c\u6709\u4e24\u4e2a\u5c5e\u6027\uff1a<ul>
+<li><code>ret.data</code>\uff1a\u83b7\u53d6\u5230\u7684\u6587\u672c\u5185\u5bb9\uff1b</li>
+<li><code>ret.result</code>\uff1a\u8fd4\u56de\u72b6\u6001\uff0c\u53ef\u80fd\u4e3a <code>success</code> \u6216 <code>fail</code>\u3002</li>
+</ul>
+</li>
+</ul>
+<h3 id="setString-text"><a href="#setString-text" class="headerlink" title="setString(text)"></a><code>setString(text)</code></h3><p>\u5c06\u4e00\u6bb5\u6587\u672c\u590d\u5236\u5230\u526a\u5207\u677f\uff0c\u76f8\u5f53\u4e8e\u624b\u52a8\u590d\u5236\u6587\u672c\u3002</p>
+<h4 id="\u53c2\u6570-1"><a href="#\u53c2\u6570-1" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>text {string}</code>\uff1a\u8981\u590d\u5236\u5230\u526a\u5207\u677f\u7684\u5b57\u7b26\u4e32\u3002</li>
+</ul>
+<h3 id="Example"><a href="#Example" class="headerlink" title="Example"></a>Example</h3><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"div"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span> @<span class="attr">click</span>=<span class="string">"onItemClick"</span>></span>{{message}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="att
r">class</span>=<span class="string">"div"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span> @<span class="attr">click</span>=<span class="string">"setContent"</span>></span>Click to copy: {{tobecopied}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> clipboard = weex.requireModule(<span class="string">'clipboard'</span>)</div><div class="line"></div><div class=
"line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">tobecopied</span>: <span class="string">'yay!'</span>,</div><div class="line"> <span class="attr">message</span>: <span class="string">'nothing.'</span></div><div class="line"> }</div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> setContent () {</div><div class="line"> clipboard.setString(<span class="keyword">this</span>.tobecopied)</div><div class="line"> },</div><div class="line"> onItemClick () {</div><div class="line"> <span class="keyword">this</span>.message = <span class="string">'clicked! '</span></div><div class="line"> clipboard.getString(<span class="functi
on"><span class="params">ret</span> =></span> {</div><div class="line"> <span class="keyword">this</span>.message = <span class="string">'text from clipboard:'</span> + ret.data</div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.div</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: row;</div><div class="line"> <span class="attribute">justify-content</span>: space-between;</div><div class="line"> <span class="attribute">align-items</span>: center;</div><div class="line"> <span class="attribute">width</span>: <span class="nu
mber">750px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">90px</span>;</div><div class="line"> <span class="attribute">padding-left</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">padding-right</span>: <span class="number">30px</span>;</div><div class="line"></div><div class="line"> <span class="attribute">border-bottom-width</span>: <span class="number">1px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#DDDDDD</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">750px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">90px</span>;</div><div class="line"> }</d
iv><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/clipboard.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/modules/clipboard.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/modules/clipboard.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/modules/dom.html
----------------------------------------------------------------------
diff --git a/content/cn/references/modules/dom.html b/content/cn/references/modules/dom.html
new file mode 100644
index 0000000..c8cd557
--- /dev/null
+++ b/content/cn/references/modules/dom.html
@@ -0,0 +1,1341 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>dom | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="dom\u5305\u542b\u5982\u4e0b\u53ef\u4ee5\u66f4\u65b0 dom \u6811\u7684 dom API\u3002
+\u8fd9\u90e8\u5206API\u662f\u901a\u8fc7\u628a virtual-dom \u7684\u6d88\u606f\u53d1\u9001\u5230 native \u6e32\u67d3\u5668\u6765\u505a\u5230\u7684\u3002
+\u5f00\u53d1\u8005\u5728\u65e5\u5e38\u5f00\u53d1\u4e2d\uff0c\u552f\u4e00\u53ef\u5728 .we \u6587\u4ef6\u4e2d\u4f7f\u7528\u7684\u662f scrollToElement\u3002\u4f60\u4e5f\u53ef\u4ee5\u8c03\u7528 $scrollTo \u65b9\u6cd5\u6765\u4f7f\u7528\u5b83
+\u8fd9\u4e2a\u9875\u9762\u63d0\u53ca\u7684\u5176\u4ed6\u7684 API\uff0c\u53ea\u5728 callNative \u8fdb\u7a0b\u4e2d\u7684 native \u6e32\u67d3\u5668\u7528\u3002\uff08\u5173\u4e8e callNativ">
+<meta property="og:type" content="website">
+<meta property="og:title" content="dom">
+<meta property="og:url" content="https://weex.apache.org/cn/references/modules/dom.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="dom\u5305\u542b\u5982\u4e0b\u53ef\u4ee5\u66f4\u65b0 dom \u6811\u7684 dom API\u3002
+\u8fd9\u90e8\u5206API\u662f\u901a\u8fc7\u628a virtual-dom \u7684\u6d88\u606f\u53d1\u9001\u5230 native \u6e32\u67d3\u5668\u6765\u505a\u5230\u7684\u3002
+\u5f00\u53d1\u8005\u5728\u65e5\u5e38\u5f00\u53d1\u4e2d\uff0c\u552f\u4e00\u53ef\u5728 .we \u6587\u4ef6\u4e2d\u4f7f\u7528\u7684\u662f scrollToElement\u3002\u4f60\u4e5f\u53ef\u4ee5\u8c03\u7528 $scrollTo \u65b9\u6cd5\u6765\u4f7f\u7528\u5b83
+\u8fd9\u4e2a\u9875\u9762\u63d0\u53ca\u7684\u5176\u4ed6\u7684 API\uff0c\u53ea\u5728 callNative \u8fdb\u7a0b\u4e2d\u7684 native \u6e32\u67d3\u5668\u7528\u3002\uff08\u5173\u4e8e callNativ">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.902Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="dom">
+<meta name="twitter:description" content="dom\u5305\u542b\u5982\u4e0b\u53ef\u4ee5\u66f4\u65b0 dom \u6811\u7684 dom API\u3002
+\u8fd9\u90e8\u5206API\u662f\u901a\u8fc7\u628a virtual-dom \u7684\u6d88\u606f\u53d1\u9001\u5230 native \u6e32\u67d3\u5668\u6765\u505a\u5230\u7684\u3002
+\u5f00\u53d1\u8005\u5728\u65e5\u5e38\u5f00\u53d1\u4e2d\uff0c\u552f\u4e00\u53ef\u5728 .we \u6587\u4ef6\u4e2d\u4f7f\u7528\u7684\u662f scrollToElement\u3002\u4f60\u4e5f\u53ef\u4ee5\u8c03\u7528 $scrollTo \u65b9\u6cd5\u6765\u4f7f\u7528\u5b83
+\u8fd9\u4e2a\u9875\u9762\u63d0\u53ca\u7684\u5176\u4ed6\u7684 API\uff0c\u53ea\u5728 callNative \u8fdb\u7a0b\u4e2d\u7684 native \u6e32\u67d3\u5668\u7528\u3002\uff08\u5173\u4e8e callNativ">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link current ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link current ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ dom
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.902Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="dom"><a href="#dom" class="headerlink" title="dom"></a>dom</h1><p>\u5305\u542b\u5982\u4e0b\u53ef\u4ee5\u66f4\u65b0 dom \u6811\u7684 dom API\u3002</p>
+<p>\u8fd9\u90e8\u5206API\u662f\u901a\u8fc7\u628a virtual-dom \u7684\u6d88\u606f\u53d1\u9001\u5230 native \u6e32\u67d3\u5668\u6765\u505a\u5230\u7684\u3002</p>
+<p>\u5f00\u53d1\u8005\u5728\u65e5\u5e38\u5f00\u53d1\u4e2d\uff0c\u552f\u4e00\u53ef\u5728 <code>.we</code> \u6587\u4ef6\u4e2d\u4f7f\u7528\u7684\u662f <code>scrollToElement</code>\u3002<br><del>\u4f60\u4e5f\u53ef\u4ee5\u8c03\u7528 <code>$scrollTo</code> \u65b9\u6cd5\u6765\u4f7f\u7528\u5b83</del></p>
+<p>\u8fd9\u4e2a\u9875\u9762\u63d0\u53ca\u7684\u5176\u4ed6\u7684 API\uff0c\u53ea\u5728 <code>callNative</code> \u8fdb\u7a0b\u4e2d\u7684 native \u6e32\u67d3\u5668\u7528\u3002<br>\uff08\u5173\u4e8e <code>callNative</code> \u8fdb\u7a0b\u7684\u8fdb\u4e00\u6b65\u4ecb\u7ecd\uff0c\u53ef\u4ee5\u5728 <a href="../../advanced/how-it-works.html">How it works</a>\u4e2d\u7684 JS Framework \u90e8\u5206\u770b\u5230 \uff09</p>
+<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><h3 id="scrollToElement-node-options"><a href="#scrollToElement-node-options" class="headerlink" title="scrollToElement(node, options)"></a>scrollToElement(node, options)</h3><p>\u8ba9\u9875\u9762\u6eda\u52a8\u5230\u90a3\u4e2a\u5bf9\u5e94\u7684\u8282\u70b9\uff0c\u8fd9\u4e2aAPI\u53ea\u80fd\u5728 <code><scroller></code> \u548c <code><list></code> \u7ec4\u4ef6\u4e2d\u7528\u3002</p>
+<p><del>\u8fd9\u4e2aAPI\u4e5f\u80fd\u901a\u8fc7\u8c03\u7528VM\u7684\u65b9\u6cd5 <code>$scrollTo</code> \u6765\u4f7f\u7528\uff08\u5df2\u5f03\u7528\uff09</del></p>
+<p>\u8981\u5728\u4f60\u7684 <code>.we</code> \u6587\u4ef6\u4e2d\u4f7f\u7528\u8fd9\u4e2a API\uff0c\u53ef\u4ee5\u4f7f\u7528 <code>require('@weex-module/dom').scrollToElement</code>\u3002</p>
+<h4 id="\u53c2\u6570"><a href="#\u53c2\u6570" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>node {Node}</code>\uff1a\u4f60\u8981\u6eda\u52a8\u5230\u7684\u90a3\u4e2a\u8282\u70b9</li>
+<li><code>options {Object}</code>\uff1a\u5982\u4e0b\u9009\u9879<ul>
+<li><code>offset {number}</code>\uff1a\u4e00\u4e2a\u5230\u5176\u53ef\u89c1\u4f4d\u7f6e\u7684\u504f\u79fb\u8ddd\u79bb\uff0c\u9ed8\u8ba4\u662f <code>0</code></li>
+</ul>
+</li>
+</ul>
+<h4 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h4><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">scroller</span> <span class="attr">class</span>=<span class="string">"scroller"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span> <span class="attr">v-for</span>=<span class="string">"(name, index) in rows"</span> <span class="attr">:ref</span>=<span class="string">"'item'+index"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span cl
ass="string">"text"</span> <span class="attr">:ref</span>=<span class="string">"'text'+index"</span>></span>{{name}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">scroller</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"group"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> @<span class="attr">click</span>=<span class="string">"goto10"</span> <span class="attr">class</span>=<span class="string">"button"</span>></span>Go to 10<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> @<span class="attr">click</span>=<span class="string">"goto2
0"</span> <span class="attr">class</span>=<span class="string">"button"</span>></span>Go to 20<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> dom = weex.requireModule(<span class="string">'dom'</span>)</div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">rows<
/span>: []</div><div class="line"> }</div><div class="line"> },</div><div class="line"> created () {</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < <span class="number">30</span>; i++) {</div><div class="line"> <span class="keyword">this</span>.rows.push(<span class="string">'row '</span> + i)</div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> goto10 (count) {</div><div class="line"> <span class="keyword">const</span> el = <span class="keyword">this</span>.$refs.item10[<span class="number">0</span>]</div><div class="line"> dom.scrollToElement(el, {})</div><div class="line"> },</div><div class="line"> goto20 (count) {</div><div class="line"> <span class="keyword">const</span> el = <span
class="keyword">this</span>.$refs.item20[<span class="number">0</span>]</div><div class="line"> dom.scrollToElement(el, { <span class="attr">offset</span>: <span class="number">0</span> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.scroller</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">3px</span>;</div><div class="line"> <span class="attr
ibute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="built_in">rgb</span>(162, 217, 192);</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">25px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.row</span> {</div><div class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">padding-left</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">border-bottom-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-bottom-style</span>: solid;</div><div class="line"> <span class="attribute">border-bo
ttom-color</span>: <span class="number">#DDDDDD</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">45px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#666666</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.group</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: row;</div><div class="line"> <span class="comment">/*justify-content: space-around;*/</span></div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">60px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.button</span> {</div><div class="line"> <span class="attribute">width</
span>: <span class="number">200px</span>;</div><div class="line"> <span class="attribute">padding-top</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">padding-bottom</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">40px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">margin-right</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color<
/span>: <span class="built_in">rgb</span>(162, 217, 192);</div><div class="line"> <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(162, 217, 192, 0.2);</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/dom-scroll.html">try it</a></p>
+<h3 id="getComponentRect-ref-callback-v0-9-4"><a href="#getComponentRect-ref-callback-v0-9-4" class="headerlink" title="getComponentRect(ref, callback)v0.9.4+"></a>getComponentRect(ref, callback)<sup>v0.9.4+</sup></h3><p>\u901a\u8fc7\u6807\u7b7e\u7684 <code>ref</code> \u83b7\u5f97\u5176\u5e03\u5c40\u4fe1\u606f\uff0c\u8fd4\u56de\u7684\u4fe1\u606f\u5728 <code>callBack</code> \u4e2d\uff0c\u683c\u5f0f\u53c2\u8003\u5982\u4e0b\uff1a</p>
+<figure class="highlight"><table><tr><td class="code"><pre><div class="line">{</div><div class="line"> result: true,</div><div class="line"> size: {</div><div class="line"> bottom: 60,</div><div class="line"> height: 15,</div><div class="line"> left: 0,</div><div class="line"> right: 353,</div><div class="line"> top: 45,</div><div class="line"> width: 353</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u5982\u679c\u60f3\u8981\u83b7\u53d6\u5230 Weex \u5bb9\u5668\u7684\u5e03\u5c40\u4fe1\u606f\uff0c\u53ef\u4ee5\u6307\u5b9a <code>ref='viewport'</code>\uff0c\u8c03\u7528\u4f8b\u5b50\u5982\u4e0b\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">ref</span>=<span class="string">"box"</span> <span class="attr">class</span>=<span class="string">"box"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"info"</span>></span>Width: {{size.width}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"info"</span>></span>Height: {{size.height}}<s
pan class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"info"</span>></span>Top: {{size.top}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"info"</span>></span>Bottom: {{size.bottom}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"info"</span>></span>Left: {{size.left}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"info"</
span>></span>Right: {{size.right}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> dom = weex.requireModule(<span class="string">'dom'</span>)</div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">size</span>: {</div><div class="line">
<span class="attr">width</span>: <span class="number">0</span>,</div><div class="line"> <span class="attr">height</span>: <span class="number">0</span>,</div><div class="line"> <span class="attr">top</span>: <span class="number">0</span>,</div><div class="line"> <span class="attr">bottom</span>: <span class="number">0</span>,</div><div class="line"> <span class="attr">left</span>: <span class="number">0</span>,</div><div class="line"> <span class="attr">right</span>: <span class="number">0</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"> },</div><div class="line"> mounted () {</div><div class="line"> <span class="keyword">const</span> result = dom.getComponentRect(<span class="keyword">this</span>.$refs.box, option => {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'getComponentRect:'</span>, option)
</div><div class="line"> <span class="keyword">this</span>.size = option.size</div><div class="line"> })</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'return value:'</span>, result)</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'viewport:'</span>, dom.getComponentRect(<span class="string">'viewport'</span>))</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.box</span> {</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">200px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <s
pan class="number">150px</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">450px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">450px</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#DDD</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="built_in">rgb</span>(162, 217, 192);</div><div class="line"> <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(162, 217, 192, 0.2);</div><div class="line"> }</div><div class="line"> <span class="selector-class">.info</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">40px</span>;</div><
div class="line"> <span class="attribute">font-family</span>: Consolas, <span class="string">"Liberation Mono"</span>, Menlo, Courier, monospace;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/dom-rect.html">try it</a></p>
+<h2 id="\u5176\u4ed6"><a href="#\u5176\u4ed6" class="headerlink" title="\u5176\u4ed6"></a>\u5176\u4ed6</h2><p>dom \u8fd8\u6709\u4e00\u4e9b\u5e95\u5c42\u63a5\u53e3\u7528\u4e8e\u521b\u5efa Weex \u5b9e\u4f8b\u65f6\u8c03\u7528\uff0c\u6bd4\u5982 <code>createBody</code>\u3001<code>updateAttrs</code> \u7b49\uff0c\u4f46\u5e76\u672a\u5f00\u653e\u4f9b\u5916\u90e8\u4f7f\u7528\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/modules/dom.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/modules/dom.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[48/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/integrate-to-your-app.html
----------------------------------------------------------------------
diff --git a/content/cn/guide/integrate-to-your-app.html b/content/cn/guide/integrate-to-your-app.html
new file mode 100644
index 0000000..88ddb53
--- /dev/null
+++ b/content/cn/guide/integrate-to-your-app.html
@@ -0,0 +1,496 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528\u96c6\u6210\u5230 Android\u6ce8\uff1a\u4ee5\u4e0b\u6587\u6863\u90fd\u662f\u5047\u8bbe\u60a8\u5df2\u7ecf\u5177\u5907\u4e00\u5b9a\u7684Android\u5f00\u53d1\u7ecf\u9a8c\u3002
+Android \u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f
+\u6e90\u7801\u4f9d\u8d56\uff1a\u80fd\u591f\u5feb\u901f\u4f7f\u7528WEEX\u6700\u65b0\u529f\u80fd\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u9879\u76ee\u7684\u7279\u6027\u8fdb\u884c\u76f8\u5173\u6539\u8fdb\u3002
+SDK\u4f9d\u8d56\uff1aWEEX \u4f1a\u5728jcenter \u5b9a\u671f\u53d1\u5e03\u7a33\u5b9a\u7248\u672c\u3002jcenter\u6ce8:\u56fd\u5185\u53ef\u80fd\u9700\u8981\u7ffb\u5899
+
+\u524d\u671f\u51c6\u5907
+\u5df2\u7ecf\u5b89\u88c5\u4e86JDK version&gt;=1.7 \u5e76\u914d\u7f6e\u4e86\u73af\u5883\u53d8\u91cf
+\u5df2\u7ecf">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528">
+<meta property="og:url" content="https://weex.apache.org/cn/guide/integrate-to-your-app.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528\u96c6\u6210\u5230 Android\u6ce8\uff1a\u4ee5\u4e0b\u6587\u6863\u90fd\u662f\u5047\u8bbe\u60a8\u5df2\u7ecf\u5177\u5907\u4e00\u5b9a\u7684Android\u5f00\u53d1\u7ecf\u9a8c\u3002
+Android \u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f
+\u6e90\u7801\u4f9d\u8d56\uff1a\u80fd\u591f\u5feb\u901f\u4f7f\u7528WEEX\u6700\u65b0\u529f\u80fd\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u9879\u76ee\u7684\u7279\u6027\u8fdb\u884c\u76f8\u5173\u6539\u8fdb\u3002
+SDK\u4f9d\u8d56\uff1aWEEX \u4f1a\u5728jcenter \u5b9a\u671f\u53d1\u5e03\u7a33\u5b9a\u7248\u672c\u3002jcenter\u6ce8:\u56fd\u5185\u53ef\u80fd\u9700\u8981\u7ffb\u5899
+
+\u524d\u671f\u51c6\u5907
+\u5df2\u7ecf\u5b89\u88c5\u4e86JDK version&gt;=1.7 \u5e76\u914d\u7f6e\u4e86\u73af\u5883\u53d8\u91cf
+\u5df2\u7ecf">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.821Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528">
+<meta name="twitter:description" content="\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528\u96c6\u6210\u5230 Android\u6ce8\uff1a\u4ee5\u4e0b\u6587\u6863\u90fd\u662f\u5047\u8bbe\u60a8\u5df2\u7ecf\u5177\u5907\u4e00\u5b9a\u7684Android\u5f00\u53d1\u7ecf\u9a8c\u3002
+Android \u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f
+\u6e90\u7801\u4f9d\u8d56\uff1a\u80fd\u591f\u5feb\u901f\u4f7f\u7528WEEX\u6700\u65b0\u529f\u80fd\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u9879\u76ee\u7684\u7279\u6027\u8fdb\u884c\u76f8\u5173\u6539\u8fdb\u3002
+SDK\u4f9d\u8d56\uff1aWEEX \u4f1a\u5728jcenter \u5b9a\u671f\u53d1\u5e03\u7a33\u5b9a\u7248\u672c\u3002jcenter\u6ce8:\u56fd\u5185\u53ef\u80fd\u9700\u8981\u7ffb\u5899
+
+\u524d\u671f\u51c6\u5907
+\u5df2\u7ecf\u5b89\u88c5\u4e86JDK version&gt;=1.7 \u5e76\u914d\u7f6e\u4e86\u73af\u5883\u53d8\u91cf
+\u5df2\u7ecf">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link current ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link current ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.821Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u96c6\u6210-Weex-\u5230\u5df2\u6709\u5e94\u7528"><a href="#\u96c6\u6210-Weex-\u5230\u5df2\u6709\u5e94\u7528" class="headerlink" title="\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528"></a>\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</h1><h2 id="\u96c6\u6210\u5230-Android"><a href="#\u96c6\u6210\u5230-Android" class="headerlink" title="\u96c6\u6210\u5230 Android"></a>\u96c6\u6210\u5230 Android</h2><p>\u6ce8\uff1a\u4ee5\u4e0b\u6587\u6863\u90fd\u662f\u5047\u8bbe\u60a8\u5df2\u7ecf\u5177\u5907\u4e00\u5b9a\u7684Android\u5f00\u53d1\u7ecf\u9a8c\u3002</p>
+<h3 id="Android-\u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f"><a href="#Android-\u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f" class="headerlink" title="Android \u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f"></a>Android \u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f</h3><ol>
+<li>\u6e90\u7801\u4f9d\u8d56\uff1a\u80fd\u591f\u5feb\u901f\u4f7f\u7528WEEX\u6700\u65b0\u529f\u80fd\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u9879\u76ee\u7684\u7279\u6027\u8fdb\u884c\u76f8\u5173\u6539\u8fdb\u3002</li>
+<li>SDK\u4f9d\u8d56\uff1aWEEX \u4f1a\u5728jcenter \u5b9a\u671f\u53d1\u5e03\u7a33\u5b9a\u7248\u672c\u3002<a href="https://bintray.com/alibabaweex/maven/weex_sdk/view" target="_blank" rel="external">jcenter</a><br>\u6ce8:\u56fd\u5185\u53ef\u80fd\u9700\u8981\u7ffb\u5899</li>
+</ol>
+<h3 id="\u524d\u671f\u51c6\u5907"><a href="#\u524d\u671f\u51c6\u5907" class="headerlink" title="\u524d\u671f\u51c6\u5907"></a>\u524d\u671f\u51c6\u5907</h3><ul>
+<li>\u5df2\u7ecf\u5b89\u88c5\u4e86<a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank" rel="external">JDK</a> version>=1.7 \u5e76\u914d\u7f6e\u4e86\u73af\u5883\u53d8\u91cf</li>
+<li>\u5df2\u7ecf\u5b89\u88c5<a href="https://developer.android.com/studio/index.html" target="_blank" rel="external">Android SDK</a> \u5e76\u914d\u7f6e\u73af\u5883\u53d8\u91cf\u3002</li>
+<li>Android SDK version 23 (compileSdkVersion in <a href="https://github.com/alibaba/weex/blob/master/android/sdk/build.gradle" target="_blank" rel="external"><code>build.gradle</code></a>)</li>
+<li>SDK build tools version 23.0.1 (buildToolsVersion in <a href="https://github.com/alibaba/weex/blob/master/android/sdk/build.gradle" target="_blank" rel="external"><code>build.gradle</code></a>)</li>
+<li>Android Support Repository >= 17 (for Android Support Library)</li>
+</ul>
+<h3 id="\u5feb\u901f\u63a5\u5165"><a href="#\u5feb\u901f\u63a5\u5165" class="headerlink" title="\u5feb\u901f\u63a5\u5165"></a>\u5feb\u901f\u63a5\u5165</h3><p>\u5982\u679c\u4f60\u662f\u5c1d\u9c9c\u6216\u8005\u5bf9\u7a33\u5b9a\u6027\u8981\u6c42\u6bd4\u8f83\u9ad8\u53ef\u4ee5\u4f7f\u7528\u4f9d\u8d56SDK\u7684\u65b9\u5f0f\u3002<br>\u6b65\u9aa4\u5982\u4e0b\uff1a </p>
+<ol>
+<li>\u521b\u5efaAndroid\u5de5\u7a0b\uff0c\u6ca1\u6709\u4ec0\u4e48\u8981\u7279\u522b\u8bf4\u660e\u7684\uff0c\u6309\u7167\u4f60\u7684\u4e60\u60ef\u6765\u3002</li>
+<li><p>\u4fee\u6539build.gradle \u52a0\u5165\u5982\u4e0b\u57fa\u7840\u4f9d\u8d56 </p>
+<figure class="highlight gradle"><table><tr><td class="code"><pre><div class="line"><span class="keyword">compile</span> <span class="string">'com.android.support:recyclerview-v7:23.1.1'</span></div><div class="line"><span class="keyword">compile</span> <span class="string">'com.android.support:support-v4:23.1.1'</span></div><div class="line"><span class="keyword">compile</span> <span class="string">'com.android.support:appcompat-v7:23.1.1'</span></div><div class="line"><span class="keyword">compile</span> <span class="string">'com.alibaba:fastjson:1.1.46.android'</span></div><div class="line"><span class="keyword">compile</span> <span class="string">'com.taobao.android:weex_sdk:0.5.1@aar'</span></div></pre></td></tr></table></figure>
+</li>
+</ol>
+<p> \u6ce8:\u7248\u672c\u53ef\u4ee5\u9ad8\u4e0d\u53ef\u4ee5\u4f4e\u3002 </p>
+<h4 id="\u4ee3\u7801\u5b9e\u73b0"><a href="#\u4ee3\u7801\u5b9e\u73b0" class="headerlink" title="\u4ee3\u7801\u5b9e\u73b0"></a>\u4ee3\u7801\u5b9e\u73b0</h4><p>\u6ce8:\u9644\u5f55\u4e2d\u6709\u5b8c\u6574\u4ee3\u7801\u5730\u5740</p>
+<ul>
+<li>\u5b9e\u73b0\u56fe\u7247\u4e0b\u8f7d\u63a5\u53e3\uff0c\u521d\u59cb\u5316\u65f6\u8bbe\u7f6e\u3002</li>
+</ul>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">package</span> com.weex.sample;</div><div class="line"></div><div class="line"><span class="keyword">import</span> android.widget.ImageView;</div><div class="line"></div><div class="line"><span class="keyword">import</span> com.taobao.weex.adapter.IWXImgLoaderAdapter;</div><div class="line"><span class="keyword">import</span> com.taobao.weex.common.WXImageStrategy;</div><div class="line"><span class="keyword">import</span> com.taobao.weex.dom.WXImageQuality;</div><div class="line"></div><div class="line"><span class="comment">/**</span></div><div class="line"> * Created by lixinke on 16/6/1.</div><div class="line"> */</div><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">ImageAdapter</span> <span class="keyword">implements</span> <span class="title">IWXImgLoaderAdapter</span> </span>{</div><div cl
ass="line"></div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setImage</span><span class="params">(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy)</span> </span>{</div><div class="line"> <span class="comment">//\u5b9e\u73b0\u4f60\u81ea\u5df1\u7684\u56fe\u7247\u4e0b\u8f7d\uff0c\u5426\u5219\u56fe\u7247\u65e0\u6cd5\u663e\u793a\u3002</span></div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<ul>
+<li>\u521d\u59cb\u5316</li>
+</ul>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">package</span> com.weex.sample;</div><div class="line"></div><div class="line"><span class="keyword">import</span> android.app.Application;</div><div class="line"></div><div class="line"><span class="keyword">import</span> com.taobao.weex.InitConfig;</div><div class="line"><span class="keyword">import</span> com.taobao.weex.WXSDKEngine;</div><div class="line"></div><div class="line"><span class="comment">/**</span></div><div class="line"> * \u6ce8\u610f\u8981\u5728Manifest\u4e2d\u8bbe\u7f6eandroid:name=".WXApplication"</div><div class="line"> * \u8981\u5b9e\u73b0ImageAdapter \u5426\u5219\u56fe\u7247\u4e0d\u80fd\u4e0b\u8f7d</div><div class="line"> * gradle \u4e2d\u4e00\u5b9a\u8981\u6dfb\u52a0\u4e00\u4e9b\u4f9d\u8d56\uff0c\u5426\u5219\u521d\u59cb\u5316\u4f1a\u5931\u8d25\u3002</div><div class="line"> * compile 'com.android.support:recyclerview-v7:23.1.1'</div><div class="line"> * compile 'com.android.support:support-v4:23.1.1'</div><div class="line"> * compile 'com.android.support:appcompat-v7:2
3.1.1'</div><div class="line"> * compile 'com.alibaba:fastjson:1.1.45'</div><div class="line"> */</div><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">WXApplication</span> <span class="keyword">extends</span> <span class="title">Application</span> </span>{</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onCreate</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">super</span>.onCreate();</div><div class="line"> InitConfig config=<span class="keyword">new</span> InitConfig.Builder().setImgAdapter(<span class="keyword">new</span> ImageAdapter()).build();</div><div class="line"> WXSDKEngine.initialize(<span class="keyword">this</span>,config);</div><div class="line"> }</
div><div class="line">}</div></pre></td></tr></table></figure>
+<ul>
+<li>\u5f00\u59cb\u6e32\u67d3</li>
+</ul>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">package</span> com.weex.sample;</div><div class="line"></div><div class="line"><span class="keyword">import</span> android.os.Bundle;</div><div class="line"><span class="keyword">import</span> android.support.v7.app.AppCompatActivity;</div><div class="line"><span class="keyword">import</span> android.view.View;</div><div class="line"></div><div class="line"><span class="keyword">import</span> com.taobao.weex.IWXRenderListener;</div><div class="line"><span class="keyword">import</span> com.taobao.weex.WXSDKInstance;</div><div class="line"><span class="keyword">import</span> com.taobao.weex.common.WXRenderStrategy;</div><div class="line"><span class="keyword">import</span> com.taobao.weex.utils.WXFileUtils;</div><div class="line"></div><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MainActivity</span>
<span class="keyword">extends</span> <span class="title">AppCompatActivity</span> <span class="keyword">implements</span> <span class="title">IWXRenderListener</span> </span>{</div><div class="line"></div><div class="line"> WXSDKInstance mWXSDKInstance;</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onCreate</span><span class="params">(Bundle savedInstanceState)</span> </span>{</div><div class="line"> <span class="keyword">super</span>.onCreate(savedInstanceState);</div><div class="line"> setContentView(R.layout.activity_main);</div><div class="line"></div><div class="line"> mWXSDKInstance = <span class="keyword">new</span> WXSDKInstance(<span class="keyword">this</span>);</div><div class="line"> mWXSDKInstance.registerRenderListener(<span class="keyword">this</span>);</div><div class
="line"> <span class="comment">/**</span></div><div class="line"> * WXSample \u53ef\u4ee5\u66ff\u6362\u6210\u81ea\u5b9a\u4e49\u7684\u5b57\u7b26\u4e32\uff0c\u9488\u5bf9\u57cb\u70b9\u6709\u6548\u3002</div><div class="line"> * template \u662f.we transform \u540e\u7684 js\u6587\u4ef6\u3002</div><div class="line"> * option \u53ef\u4ee5\u4e3a\u7a7a\uff0c\u6216\u8005\u901a\u8fc7option\u4f20\u5165 js\u9700\u8981\u7684\u53c2\u6570\u3002\u4f8b\u5982bundle js\u7684\u5730\u5740\u7b49\u3002</div><div class="line"> * jsonInitData \u53ef\u4ee5\u4e3a\u7a7a\u3002</div><div class="line"> * width \u4e3a-1 \u9ed8\u8ba4\u5168\u5c4f\uff0c\u53ef\u4ee5\u81ea\u5df1\u5b9a\u5236\u3002</div><div class="line"> * height =-1 \u9ed8\u8ba4\u5168\u5c4f\uff0c\u53ef\u4ee5\u81ea\u5df1\u5b9a\u5236\u3002</div><div class="line"> */</div><div class="line"> mWXSDKInstance.render(<span class="string">"WXSample"</span>, WXFileUtils.loadFileContent(<span class="string">"hello.js"</span>, <span class="keyword">this</span>), <span class="keyword">null</span>, <span class="keyword">null</span>, -<span class="number">1</span>, -<span class="number">1</span>, WXRenderStrategy.APPEND_ASYNC);</div><div class="line"> }</div><div c
lass="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onViewCreated</span><span class="params">(WXSDKInstance instance, View view)</span> </span>{</div><div class="line"> setContentView(view);</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onRenderSuccess</span><span class="params">(WXSDKInstance instance, <span class="keyword">int</span> width, <span class="keyword">int</span> height)</span> </span>{</div><div class="line"></div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">pu
blic</span> <span class="keyword">void</span> <span class="title">onRefreshSuccess</span><span class="params">(WXSDKInstance instance, <span class="keyword">int</span> width, <span class="keyword">int</span> height)</span> </span>{</div><div class="line"></div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onException</span><span class="params">(WXSDKInstance instance, String errCode, String msg)</span> </span>{</div><div class="line"></div><div class="line"> }</div><div class="line"></div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onResume</span><span class="params">()</span> </span>{</d
iv><div class="line"> <span class="keyword">super</span>.onResume();</div><div class="line"> <span class="keyword">if</span>(mWXSDKInstance!=<span class="keyword">null</span>){</div><div class="line"> mWXSDKInstance.onActivityResume();</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onPause</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">super</span>.onPause();</div><div class="line"> <span class="keyword">if</span>(mWXSDKInstance!=<span class="keyword">null</span>){</div><div class="line"> mWXSDKInstance.onActivityPause();</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Overrid
e</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onStop</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">super</span>.onStop();</div><div class="line"> <span class="keyword">if</span>(mWXSDKInstance!=<span class="keyword">null</span>){</div><div class="line"> mWXSDKInstance.onActivityStop();</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onDestroy</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">super</span>.onDestroy();</div><div class="line"> <span class="keyword">if</span>(mWXSDKInstance!=<span class="keyword">null</span>)&#
123;</div><div class="line"> mWXSDKInstance.onActivityDestroy();</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<h3 id="\u6e90\u7801\u4f9d\u8d56-IDE-Android-Studio"><a href="#\u6e90\u7801\u4f9d\u8d56-IDE-Android-Studio" class="headerlink" title="\u6e90\u7801\u4f9d\u8d56(IDE Android Studio)"></a>\u6e90\u7801\u4f9d\u8d56(IDE Android Studio)</h3><ol>
+<li>\u4e0b\u8f7d\u6e90\u7801 <code>git clone https://github.com/alibaba/weex</code></li>
+<li>\u521b\u5efa Android \u5de5\u7a0b\u3002</li>
+<li>\u901a\u8fc7\u4ee5\u4e0b\u8def\u5f84\u5f15\u5165 SDK Module<br>File->New-Import Module-> \u9009\u62e9 WEEX SDK Module(weex/android/sdk) -> Finish </li>
+<li>app \u7684 build.gradle \u4e2d\u6dfb\u52a0\u5982\u4e0b\u4f9d\u8d56:<code>compile project(':weex_sdk')</code></li>
+<li>\u5176\u4ed6\u8bbe\u7f6e\u8bf7\u53c2\u8003\u4e0a\u9762\u5feb\u901f\u63a5\u5165</li>
+</ol>
+<h4 id="\u9644\u5f55"><a href="#\u9644\u5f55" class="headerlink" title="\u9644\u5f55"></a>\u9644\u5f55</h4><p>WXSample\u5730\u5740</p>
+<p><code>https://github.com/xkli/WXSample.git</code></p>
+<h2 id="\u96c6\u6210\u5230-iOS"><a href="#\u96c6\u6210\u5230-iOS" class="headerlink" title="\u96c6\u6210\u5230 iOS"></a>\u96c6\u6210\u5230 iOS</h2><h3 id="\u901a\u8fc7cocoaPods-\u96c6\u6210-Weex-iOS-SDK\u5230\u4f60\u7684\u9879\u76ee"><a href="#\u901a\u8fc7cocoaPods-\u96c6\u6210-Weex-iOS-SDK\u5230\u4f60\u7684\u9879\u76ee" class="headerlink" title="\u901a\u8fc7cocoaPods \u96c6\u6210 Weex iOS SDK\u5230\u4f60\u7684\u9879\u76ee"></a>\u901a\u8fc7cocoaPods \u96c6\u6210 Weex iOS SDK\u5230\u4f60\u7684\u9879\u76ee</h3><p>\u9996\u5148\u5047\u8bbe\u4f60\u5df2\u7ecf\u5b8c\u6210\u4e86\u5b89\u88c5 <a href="https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html" target="_blank" rel="external">iOS \u5f00\u53d1\u73af\u5883</a> \u548c <a href="https://guides.cocoapods.org/using/getting-started.html" target="_blank" rel="external">CocoaPods</a></p>
+<h4 id="\u7b2c\u4e00\u6b65\uff1a\u6dfb\u52a0\u4f9d\u8d56"><a href="#\u7b2c\u4e00\u6b65\uff1a\u6dfb\u52a0\u4f9d\u8d56" class="headerlink" title="\u7b2c\u4e00\u6b65\uff1a\u6dfb\u52a0\u4f9d\u8d56"></a>\u7b2c\u4e00\u6b65\uff1a\u6dfb\u52a0\u4f9d\u8d56</h4><p>\u5bfc\u5165 Weex iOS SDK \u5230\u4f60\u5df2\u6709\u7684\u9879\u76ee, \u5982\u679c\u6ca1\u6709\uff0c\u53ef\u4ee5<a href="https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html" target="_blank" rel="external">\u53c2\u8003</a>\u65b0\u5efa\u9879\u76ee<br>\u5728\u7ee7\u7eed\u4e0b\u9762\u5185\u5bb9\u4e4b\u524d\uff0c\u786e\u4fdd\u4f60\u5df2\u6709\u7684\u9879\u76ee\u76ee\u5f55\u6709\u540d\u79f0\u4e3a <code>Podfile</code> \u6587\u4ef6\uff0c\u5982\u679c\u6ca1\u6709\uff0c\u521b\u5efa\u4e00\u4e2a\uff0c\u7528\u6587\u672c\u7f16\u8f91\u5668\u6253\u5f00</p>
+<ul>
+<li><p>\u96c6\u6210 framework </p>
+<p>WeexSDK \u5728 cocoaPods \u4e0a\u6700\u65b0\u7248\u672c \u53ef\u4ee5\u5728<a href="https://cocoapods.org/pods/WeexSDK" target="_blank" rel="external">\u8fd9</a>\u83b7\u53d6 </p>
+<p>\u5728 <code>Podfile</code> \u6587\u4ef6\u4e2d\u6dfb\u52a0\u5982\u4e0b\u5185\u5bb9</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">source 'git@github.com:CocoaPods/Specs.git' </div><div class="line">target 'YourTarget' do</div><div class="line"> platform :ios, '7.0' </div><div class="line"> pod 'WeexSDK', '0.9.5' ## \u5efa\u8bae\u4f7f\u7528WeexSDK\u65b0\u7248\u672c </div><div class="line">end</div></pre></td></tr></table></figure>
+</li>
+</ul>
+<ul>
+<li><p>\u6e90\u7801\u96c6\u6210</p>
+<p>\u9996\u5148 \u62f7\u8d1d <code>ios/sdk</code> \u76ee\u5f55\u5230\u4f60\u5df2\u6709\u9879\u76ee\u76ee\u5f55 (\u6b64\u5904\u4ee5\u62f7\u8d1d\u5230\u4f60\u5df2\u6709\u9879\u76ee\u7684\u6839\u76ee\u5f55\u4e3a\u4f8b\u5b50)\uff0c\u7136\u540e\u5728 <code>Podfile</code> \u6587\u4ef6\u4e2d\u6dfb\u52a0</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">source 'git@github.com:CocoaPods/Specs.git' </div><div class="line">target 'YourTarget' do</div><div class="line"> platform :ios, '7.0' </div><div class="line"> pod 'WeexSDK', :path=>'./sdk/' </div><div class="line">end</div></pre></td></tr></table></figure>
+</li>
+</ul>
+<h4 id="\u7b2c\u4e8c\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56"><a href="#\u7b2c\u4e8c\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56" class="headerlink" title="\u7b2c\u4e8c\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56"></a>\u7b2c\u4e8c\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56</h4><p>\u6253\u5f00\u547d\u4ee4\u884c\uff0c\u5207\u6362\u5230\u4f60\u5df2\u6709\u9879\u76ee <code>Podfile</code> \u8fd9\u4e2a\u6587\u4ef6\u5b58\u5728\u7684\u76ee\u5f55\uff0c\u6267\u884c <code>pod install</code>\uff0c\u6ca1\u6709\u51fa\u73b0\u4efb\u4f55\u9519\u8bef\u8868\u793a\u5df2\u7ecf\u5b8c\u6210\u73af\u5883\u914d\u7f6e\u3002</p>
+<h4 id="\u7b2c\u4e09\u6b65\uff1a\u521d\u59cb\u5316-Weex-\u73af\u5883"><a href="#\u7b2c\u4e09\u6b65\uff1a\u521d\u59cb\u5316-Weex-\u73af\u5883" class="headerlink" title="\u7b2c\u4e09\u6b65\uff1a\u521d\u59cb\u5316 Weex \u73af\u5883"></a>\u7b2c\u4e09\u6b65\uff1a\u521d\u59cb\u5316 Weex \u73af\u5883</h4><p>\u5728 <code>AppDelegate.m</code> \u6587\u4ef6\u4e2d\u505a\u521d\u59cb\u5316\u64cd\u4f5c\uff0c\u4e00\u822c\u4f1a\u5728 <code>didFinishLaunchingWithOptions</code> \u65b9\u6cd5\u4e2d\u5982\u4e0b\u6dfb\u52a0\u3002</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">//business configuration</div><div class="line">[WXAppConfiguration setAppGroup:@"AliApp"];</div><div class="line">[WXAppConfiguration setAppName:@"WeexDemo"];</div><div class="line">[WXAppConfiguration setAppVersion:@"1.0.0"];</div><div class="line"></div><div class="line">//init sdk enviroment </div><div class="line">[WXSDKEngine initSDKEnviroment];</div><div class="line"></div><div class="line">//register custom module and component\uff0coptional</div><div class="line">[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];</div><div class="line">[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];</div><div class="line"></div><div class="line">//register the implementation of protocol, optional</div><div class="line">[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationP
rotocol)];</div><div class="line"></div><div class="line">//set the log level </div><div class="line">[WXLog setLogLevel: WXLogLevelAll];</div></pre></td></tr></table></figure>
+<h4 id="\u7b2c\u56db\u6b65\uff1a\u6e32\u67d3-weex-Instance"><a href="#\u7b2c\u56db\u6b65\uff1a\u6e32\u67d3-weex-Instance" class="headerlink" title="\u7b2c\u56db\u6b65\uff1a\u6e32\u67d3 weex Instance"></a>\u7b2c\u56db\u6b65\uff1a\u6e32\u67d3 weex Instance</h4><p>Weex \u652f\u6301\u6574\u4f53\u9875\u9762\u6e32\u67d3\u548c\u90e8\u5206\u6e32\u67d3\u4e24\u79cd\u6a21\u5f0f\uff0c\u4f60\u9700\u8981\u505a\u7684\u4e8b\u60c5\u662f\u7528\u6307\u5b9a\u7684 URL \u6e32\u67d3 Weex \u7684 view\uff0c\u7136\u540e\u6dfb\u52a0\u5230\u5b83\u7684\u7236\u5bb9\u5668\u4e0a\uff0c\u7236\u5bb9\u5668\u4e00\u822c\u90fd\u662f viewController\u3002</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">#import <WeexSDK/WXSDKInstance.h></div><div class="line">- (void)viewDidLoad </div><div class="line">{</div><div class="line"> [super viewDidLoad];</div><div class="line"></div><div class="line"> _instance = [[WXSDKInstance alloc] init];</div><div class="line"> _instance.viewController = self;</div><div class="line"> _instance.frame = self.view.frame; </div><div class="line"></div><div class="line"> __weak typeof(self) weakSelf = self;</div><div class="line"> _instance.onCreate = ^(UIView *view) {</div><div class="line"> [weakSelf.weexView removeFromSuperview];</div><div class="line"> [weakSelf.view addSubview:weakSelf.weexView];</div><div class="line"> };</div><div class="line"></div><div class="line"> _instance.onFailed = ^(NSError *error) {</div><div class="line"> //process failure</div><div class="line"> };</div><div cl
ass="line"></div><div class="line"> _instance.renderFinish = ^ (UIView *view) {</div><div class="line"> //process renderFinish</div><div class="line"> };</div><div class="line"> [_instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>WXSDKInstance \u662f\u5f88\u91cd\u8981\u7684\u4e00\u4e2a\u7c7b\uff0c\u63d0\u4f9b\u4e86\u57fa\u7840\u7684\u65b9\u6cd5\u548c\u4e00\u4e9b\u56de\u8c03\uff0c\u5982 <code>renderWithURL</code>, <code>onCreate</code>, <code>onFailed</code> \u7b49\uff0c\u53ef\u4ee5\u53c2\u89c1 <code>WXSDKInstance.h</code> \u7684\u58f0\u660e\u3002</p>
+<h4 id="\u7b2c\u4e94\u6b65\uff1a\u9500\u6bc1-Weex-Instance"><a href="#\u7b2c\u4e94\u6b65\uff1a\u9500\u6bc1-Weex-Instance" class="headerlink" title="\u7b2c\u4e94\u6b65\uff1a\u9500\u6bc1 Weex Instance"></a>\u7b2c\u4e94\u6b65\uff1a\u9500\u6bc1 Weex Instance</h4><p> \u5728 viewController \u7684 dealloc \u9636\u6bb5 \u9500\u6bc1\u6389 Weex instance\uff0c\u91ca\u653e\u5185\u5b58\uff0c\u907f\u514d\u9020\u6210\u5185\u5b58\u6cc4\u9732\u3002</p>
+ <figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">- (void)dealloc</div><div class="line">{</div><div class="line"> [_instance destroyInstance];</div><div class="line">}</div></pre></td></tr></table></figure>
+<h3 id="\u5bfc\u5165-Weex-SDK-framework-\u5230\u5de5\u7a0b"><a href="#\u5bfc\u5165-Weex-SDK-framework-\u5230\u5de5\u7a0b" class="headerlink" title="\u5bfc\u5165 Weex SDK framework \u5230\u5de5\u7a0b"></a>\u5bfc\u5165 Weex SDK framework \u5230\u5de5\u7a0b</h3><p> \u53ef\u4ee5\u901a\u8fc7\u6e90\u7801\u7f16\u8bd1\u51fa Weex SDK\uff0c\u53ef\u4ee5\u5728\u65b0\u7684 feature \u6216\u8005 bugfix \u5206\u652f\uff0c\u5c1d\u8bd5\u6700\u65b0\u7684 feature\u3002</p>
+<p> \u53c2\u8003<a href="https://open.taobao.com/doc2/detail?spm=a219a.7629140.0.0.tFddsV&&docType=1&articleId=104829" target="_blank" rel="external">\u6b64\u5904</a>\u76f4\u63a5\u5bfc\u5165 weexSDK\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/guide/integrate-to-your-app.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/guide/integrate-to-your-app.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/intro/app-architecture.html
----------------------------------------------------------------------
diff --git a/content/cn/guide/intro/app-architecture.html b/content/cn/guide/intro/app-architecture.html
new file mode 100644
index 0000000..2c5aa70
--- /dev/null
+++ b/content/cn/guide/intro/app-architecture.html
@@ -0,0 +1,435 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528\u4eca\u5929\u7684\u79fb\u52a8\u5e94\u7528\u8fd9\u91cc\u8c08\u4e00\u8c08 Weex \u5bf9\u79fb\u52a8\u5e94\u7528\u7684\u7406\u89e3\u3002
+\u79fb\u52a8\u5e94\u7528\u9700\u8981\u652f\u6491\u5e76\u884c\u7814\u53d1\u5982\u4eca\u79fb\u52a8\u5e94\u7528\u7684\u5f00\u53d1\u9700\u8981\u5e76\u884c\u7814\u53d1\u7684\u80fd\u529b\uff0c\u5f53\u4e00\u4e2a\u79fb\u52a8\u5e94\u7528\u53d1\u5c55\u5230\u4e00\u5b9a\u89c4\u6a21\u7684\u65f6\u5019\uff0c\u80fd\u5426\u652f\u6491\u5927\u89c4\u6a21\u7684\u5e76\u884c\u7814\u53d1\u5c31\u6210\u4e3a\u4e86\u4e00\u4ef6\u975e\u5e38\u5173\u952e\u800c\u53c8\u91cd\u8981\u7684\u4e8b\u60c5\u3002\u5426\u5219\u5f88\u5bb9\u6613\u53d8\u6210\u5de5\u7a0b\u74f6\u9888\u3002
+\u79fb\u52a8\u5e94\u7528\u9700\u8981\u52a8\u6001\u6027\u5982\u4eca\u79fb\u52a8\u5e94\u7528\u4e0d\u8bba\u4ece\u7814\u53d1\u8282\u594f\u3001\u90e8\u7f72\u7684\u7075\u6d3b\u6027\u548c\u65f6\u6548\u6027\u3001\u5305\u5927\u5c0f\u3001\u8fd8\u662f\u4ece\u7814\u53d1\u5230\u53d1\u5e03\u518d\u5230\u53cd\u9988\u7684\u8fed\u4ee3\u5468\u671f\u4e0a\uff0c\u90fd\u548c\u79fb\u52a8\u4e92\u8054\u7f51\u7684\u53d1\u5c55">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528">
+<meta property="og:url" content="https://weex.apache.org/cn/guide/intro/app-architecture.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528\u4eca\u5929\u7684\u79fb\u52a8\u5e94\u7528\u8fd9\u91cc\u8c08\u4e00\u8c08 Weex \u5bf9\u79fb\u52a8\u5e94\u7528\u7684\u7406\u89e3\u3002
+\u79fb\u52a8\u5e94\u7528\u9700\u8981\u652f\u6491\u5e76\u884c\u7814\u53d1\u5982\u4eca\u79fb\u52a8\u5e94\u7528\u7684\u5f00\u53d1\u9700\u8981\u5e76\u884c\u7814\u53d1\u7684\u80fd\u529b\uff0c\u5f53\u4e00\u4e2a\u79fb\u52a8\u5e94\u7528\u53d1\u5c55\u5230\u4e00\u5b9a\u89c4\u6a21\u7684\u65f6\u5019\uff0c\u80fd\u5426\u652f\u6491\u5927\u89c4\u6a21\u7684\u5e76\u884c\u7814\u53d1\u5c31\u6210\u4e3a\u4e86\u4e00\u4ef6\u975e\u5e38\u5173\u952e\u800c\u53c8\u91cd\u8981\u7684\u4e8b\u60c5\u3002\u5426\u5219\u5f88\u5bb9\u6613\u53d8\u6210\u5de5\u7a0b\u74f6\u9888\u3002
+\u79fb\u52a8\u5e94\u7528\u9700\u8981\u52a8\u6001\u6027\u5982\u4eca\u79fb\u52a8\u5e94\u7528\u4e0d\u8bba\u4ece\u7814\u53d1\u8282\u594f\u3001\u90e8\u7f72\u7684\u7075\u6d3b\u6027\u548c\u65f6\u6548\u6027\u3001\u5305\u5927\u5c0f\u3001\u8fd8\u662f\u4ece\u7814\u53d1\u5230\u53d1\u5e03\u518d\u5230\u53cd\u9988\u7684\u8fed\u4ee3\u5468\u671f\u4e0a\uff0c\u90fd\u548c\u79fb\u52a8\u4e92\u8054\u7f51\u7684\u53d1\u5c55">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.823Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528">
+<meta name="twitter:description" content="\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528\u4eca\u5929\u7684\u79fb\u52a8\u5e94\u7528\u8fd9\u91cc\u8c08\u4e00\u8c08 Weex \u5bf9\u79fb\u52a8\u5e94\u7528\u7684\u7406\u89e3\u3002
+\u79fb\u52a8\u5e94\u7528\u9700\u8981\u652f\u6491\u5e76\u884c\u7814\u53d1\u5982\u4eca\u79fb\u52a8\u5e94\u7528\u7684\u5f00\u53d1\u9700\u8981\u5e76\u884c\u7814\u53d1\u7684\u80fd\u529b\uff0c\u5f53\u4e00\u4e2a\u79fb\u52a8\u5e94\u7528\u53d1\u5c55\u5230\u4e00\u5b9a\u89c4\u6a21\u7684\u65f6\u5019\uff0c\u80fd\u5426\u652f\u6491\u5927\u89c4\u6a21\u7684\u5e76\u884c\u7814\u53d1\u5c31\u6210\u4e3a\u4e86\u4e00\u4ef6\u975e\u5e38\u5173\u952e\u800c\u53c8\u91cd\u8981\u7684\u4e8b\u60c5\u3002\u5426\u5219\u5f88\u5bb9\u6613\u53d8\u6210\u5de5\u7a0b\u74f6\u9888\u3002
+\u79fb\u52a8\u5e94\u7528\u9700\u8981\u52a8\u6001\u6027\u5982\u4eca\u79fb\u52a8\u5e94\u7528\u4e0d\u8bba\u4ece\u7814\u53d1\u8282\u594f\u3001\u90e8\u7f72\u7684\u7075\u6d3b\u6027\u548c\u65f6\u6548\u6027\u3001\u5305\u5927\u5c0f\u3001\u8fd8\u662f\u4ece\u7814\u53d1\u5230\u53d1\u5e03\u518d\u5230\u53cd\u9988\u7684\u8fed\u4ee3\u5468\u671f\u4e0a\uff0c\u90fd\u548c\u79fb\u52a8\u4e92\u8054\u7f51\u7684\u53d1\u5c55">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link current ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link current ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.823Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u7528-Weex-\u6784\u5efa\u79fb\u52a8\u5e94\u7528"><a href="#\u7528-Weex-\u6784\u5efa\u79fb\u52a8\u5e94\u7528" class="headerlink" title="\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528"></a>\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</h1><h2 id="\u4eca\u5929\u7684\u79fb\u52a8\u5e94\u7528"><a href="#\u4eca\u5929\u7684\u79fb\u52a8\u5e94\u7528" class="headerlink" title="\u4eca\u5929\u7684\u79fb\u52a8\u5e94\u7528"></a>\u4eca\u5929\u7684\u79fb\u52a8\u5e94\u7528</h2><p>\u8fd9\u91cc\u8c08\u4e00\u8c08 Weex \u5bf9\u79fb\u52a8\u5e94\u7528\u7684\u7406\u89e3\u3002</p>
+<h3 id="\u79fb\u52a8\u5e94\u7528\u9700\u8981\u652f\u6491\u5e76\u884c\u7814\u53d1"><a href="#\u79fb\u52a8\u5e94\u7528\u9700\u8981\u652f\u6491\u5e76\u884c\u7814\u53d1" class="headerlink" title="\u79fb\u52a8\u5e94\u7528\u9700\u8981\u652f\u6491\u5e76\u884c\u7814\u53d1"></a>\u79fb\u52a8\u5e94\u7528\u9700\u8981\u652f\u6491\u5e76\u884c\u7814\u53d1</h3><p>\u5982\u4eca\u79fb\u52a8\u5e94\u7528\u7684\u5f00\u53d1\u9700\u8981\u5e76\u884c\u7814\u53d1\u7684\u80fd\u529b\uff0c\u5f53\u4e00\u4e2a\u79fb\u52a8\u5e94\u7528\u53d1\u5c55\u5230\u4e00\u5b9a\u89c4\u6a21\u7684\u65f6\u5019\uff0c\u80fd\u5426\u652f\u6491\u5927\u89c4\u6a21\u7684\u5e76\u884c\u7814\u53d1\u5c31\u6210\u4e3a\u4e86\u4e00\u4ef6\u975e\u5e38\u5173\u952e\u800c\u53c8\u91cd\u8981\u7684\u4e8b\u60c5\u3002\u5426\u5219\u5f88\u5bb9\u6613\u53d8\u6210\u5de5\u7a0b\u74f6\u9888\u3002</p>
+<h3 id="\u79fb\u52a8\u5e94\u7528\u9700\u8981\u52a8\u6001\u6027"><a href="#\u79fb\u52a8\u5e94\u7528\u9700\u8981\u52a8\u6001\u6027" class="headerlink" title="\u79fb\u52a8\u5e94\u7528\u9700\u8981\u52a8\u6001\u6027"></a>\u79fb\u52a8\u5e94\u7528\u9700\u8981\u52a8\u6001\u6027</h3><p>\u5982\u4eca\u79fb\u52a8\u5e94\u7528\u4e0d\u8bba\u4ece\u7814\u53d1\u8282\u594f\u3001\u90e8\u7f72\u7684\u7075\u6d3b\u6027\u548c\u65f6\u6548\u6027\u3001\u5305\u5927\u5c0f\u3001\u8fd8\u662f\u4ece\u7814\u53d1\u5230\u53d1\u5e03\u518d\u5230\u53cd\u9988\u7684\u8fed\u4ee3\u5468\u671f\u4e0a\uff0c\u90fd\u548c\u79fb\u52a8\u4e92\u8054\u7f51\u7684\u53d1\u5c55\u901f\u5ea6\u6781\u4e0d\u76f8\u7b26\u3002\u79fb\u52a8\u5e94\u7528\u9700\u8981\u66f4\u7b80\u5355\u8f7b\u91cf\u7684\u7814\u53d1\u6a21\u578b\uff0c\u9700\u8981\u6446\u8131\u7248\u672c\u90e8\u7f72\u548c\u5206\u53d1\u7684\u7b28\u91cd\u8fc7\u7a0b\u3002</p>
+<h3 id="\u79fb\u52a8\u5e94\u7528\u9700\u8981\u5f00\u653e\u4e92\u8054"><a href="#\u79fb\u52a8\u5e94\u7528\u9700\u8981\u5f00\u653e\u4e92\u8054" class="headerlink" title="\u79fb\u52a8\u5e94\u7528\u9700\u8981\u5f00\u653e\u4e92\u8054"></a>\u79fb\u52a8\u5e94\u7528\u9700\u8981\u5f00\u653e\u4e92\u8054</h3><p>\u5982\u4eca\u79fb\u52a8\u5e94\u7528\u7684\u5185\u5bb9\u548c\u4fe1\u606f\u90fd\u662f\u76f8\u4e92\u5b64\u7acb\u7684\uff0c\u5e94\u7528\u4e4b\u95f4\u7684\u4ea4\u6d41\u53d8\u5f97\u975e\u5e38\u590d\u6742\u548c\u56f0\u96be\uff0c\u4e5f\u7f3a\u4e4f\u4e00\u5b9a\u7684\u6807\u51c6\u548c\u89c4\u8303\u5316\u7684\u5bb9\u5668\u6765\u627f\u8f7d\u3002</p>
+<h2 id="\u6574\u4f53\u7ed3\u6784\u8bbe\u8ba1"><a href="#\u6574\u4f53\u7ed3\u6784\u8bbe\u8ba1" class="headerlink" title="\u6574\u4f53\u7ed3\u6784\u8bbe\u8ba1"></a>\u6574\u4f53\u7ed3\u6784\u8bbe\u8ba1</h2><p>\u6211\u4eec\u8ba4\u4e3a\u4e00\u4e2a\u5177\u6709\u9ad8\u5e76\u884c\u7814\u53d1\u80fd\u529b\u3001\u52a8\u6001\u5316\u548c\u6807\u51c6\u5316\u89c4\u8303\u5316\u7684\u79fb\u52a8\u5e94\u7528\u5e94\u8be5\u7531\u4ee5\u4e0b\u51e0\u4e2a\u65b9\u9762\u6784\u6210\uff1a</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">|------|------|------|------| |-----|</div><div class="line">| page | page | page | page | | api |</div><div class="line">|------|------|------|------| | api |</div><div class="line">|------|------|------|------| | api |</div><div class="line">| page | page | page | page | | api |</div><div class="line">|------|------|------|------| | api |</div><div class="line"> | api |</div><div class="line">|---------------------------| | api |</div><div class="line">| router | | api |</div><div class="line">|---------------------------| |-----|</div></pre></td></tr></table></figure>
+<ul>
+<li>\u9875\u9762\uff1a\u9996\u5148\u79fb\u52a8\u5e94\u7528\u5e94\u8be5\u53ef\u4ee5\u88ab\u62c6\u89e3\u6210\u82e5\u5e72\u4e2a\u9875\u9762\uff0c\u6bcf\u4e2a\u9875\u9762\u76f8\u5bf9\u89e3\u8026\u72ec\u7acb\uff0c\u540c\u65f6\u6bcf\u4e2a\u9875\u9762\u90fd\u6709\u4e00\u4e2a URL \u8fdb\u884c\u552f\u4e00\u6807\u8bc6\u3002</li>
+<li>\u8def\u7531\uff1a\u8fd9\u4e9b\u9875\u9762\u5c06\u4f1a\u901a\u8fc7\u8def\u7531\u673a\u5236\u6709\u673a\u7684\u4e32\u8054\u8d77\u6765\uff0c\u9875\u9762\u4e4b\u95f4\u7684\u5173\u7cfb\u662f\u901a\u8fc7\u8def\u7531\u6765\u8fdb\u884c\u8c03\u5ea6\u7684\u3002\u5e38\u89c1\u7684\u79fb\u52a8\u5e94\u7528\u8def\u7531\u5305\u62ec\u5bfc\u822a\u680f\u3001tab \u5207\u6362\u7b49\u3002</li>
+<li>\u8bbe\u5907\u80fd\u529b\uff1a\u4ee5\u5404\u79cd API \u6216\u670d\u52a1\u7684\u65b9\u5f0f\u63d0\u4f9b\u51fa\u6765\uff0c\u4f9b\u9875\u9762\u81ea\u7531\u4f7f\u7528\u3002</li>
+</ul>
+<h2 id="\u5de5\u4f5c\u5206\u89e3"><a href="#\u5de5\u4f5c\u5206\u89e3" class="headerlink" title="\u5de5\u4f5c\u5206\u89e3"></a>\u5de5\u4f5c\u5206\u89e3</h2><h3 id="\u524d\u671f\u8bbe\u8ba1"><a href="#\u524d\u671f\u8bbe\u8ba1" class="headerlink" title="\u524d\u671f\u8bbe\u8ba1"></a>\u524d\u671f\u8bbe\u8ba1</h3><p>\u786e\u5b9a\u4e00\u4e2a\u79fb\u52a8\u5e94\u7528\u6709\u591a\u5c11\u9875\u9762\uff0c\u6bcf\u4e2a\u9875\u9762\u5206\u522b\u662f\u4ec0\u4e48 URL\uff0c\u9875\u9762\u4e4b\u95f4\u7684\u5173\u8054\u548c\u8df3\u8f6c\u903b\u8f91\u662f\u600e\u6837\u7684\uff0c\u7136\u540e\u68b3\u7406\u6574\u4e2a\u79fb\u52a8\u5e94\u7528\u9700\u8981\u7684\u6240\u6709 API \u548c\u670d\u52a1\u3002</p>
+<h3 id="\u811a\u624b\u67b6"><a href="#\u811a\u624b\u67b6" class="headerlink" title="\u811a\u624b\u67b6"></a>\u811a\u624b\u67b6</h3><p>\u9996\u5148\u6211\u4eec\u9700\u8981\u4e00\u4e2a Weex \u79fb\u52a8\u5e94\u7528\u7684\u811a\u624b\u67b6\uff0c\u901a\u8fc7\u8fd9\u4e2a\u811a\u624b\u67b6\u6211\u4eec\u80fd\u591f\u521d\u59cb\u5316\u4e00\u4e2a iOS \u5de5\u7a0b\u3001\u4e00\u4e2a Android \u5de5\u7a0b\u6216\u4e00\u4e2a web \u5de5\u7a0b\u3002\u5e76\u5728\u5176\u4e2d\u5b9a\u4e49\u4e00\u4e9b\u57fa\u672c\u7684\u914d\u7f6e\u4fe1\u606f\u548c\u8def\u7531\u89c4\u5219\u3002</p>
+<!-- weex-pack -->
+<h3 id="\u9875\u9762"><a href="#\u9875\u9762" class="headerlink" title="\u9875\u9762"></a>\u9875\u9762</h3><p>\u7136\u540e\u6211\u4eec\u901a\u8fc7 Weex \u9875\u9762\u811a\u624b\u67b6\u6765\u521b\u5efa\u4e00\u4e2a\u4e2a\u72ec\u7acb\u7684 Weex \u9875\u9762\uff0c\u5e76\u5206\u522b\u8fdb\u884c\u5f00\u53d1\u3001\u8c03\u8bd5\u548c\u53d1\u5e03\u3002</p>
+<!-- \u9875\u9762\u7ed3\u6784 -->
+<h3 id="\u6269\u5c55"><a href="#\u6269\u5c55" class="headerlink" title="\u6269\u5c55"></a>\u6269\u5c55</h3><p>\u5982\u679c\u9700\u8981 WeexSDK \u989d\u5916\u7684\u7ec4\u4ef6\u3001\u6a21\u5757\u6216\u5176\u5b83\u529f\u80fd\uff0c\u53ef\u4ee5\u901a\u8fc7 Weex \u7684\u6269\u5c55\u673a\u5236\u8fdb\u884c\u6269\u5c55\u3002\u8fd9\u90e8\u5206\u5de5\u4f5c\u9700\u8981 native \u7684\u7814\u53d1\u77e5\u8bc6\uff0c\u4f46\u662f\u968f\u7740 Weex \u7ec4\u4ef6\u548c\u6a21\u5757\u7684\u4e30\u5bcc\u4ee5\u53ca\u4e1a\u52a1\u8fed\u4ee3\u7684\u6df1\u5165\uff0c\u8fd9\u90e8\u5206\u6210\u672c\u4f1a\u627f\u4e0b\u964d\u548c\u6536\u655b\u7684\u8d8b\u52bf\u3002</p>
+<!-- \u6269\u5c55 iOS -->
+<!-- \u6269\u5c55 Android -->
+<h3 id="\u4e91\u7aef"><a href="#\u4e91\u7aef" class="headerlink" title="\u4e91\u7aef"></a>\u4e91\u7aef</h3><p>\u5728\u4e91\u7aef\u90e8\u7f72\u76f8\u5e94\u7684 JS bundle\uff0c\u540c\u65f6\u901a\u8fc7\u7f13\u5b58\u6216\u9884\u52a0\u8f7d\u7b49\u65b9\u5f0f\u52a0\u901f Weex \u9875\u9762\u7684\u52a0\u8f7d\u65f6\u95f4\u548c\u9996\u5c4f\u6e32\u67d3\u65f6\u95f4\u3002</p>
+<p>\u8fd9\u6837\uff0c\u4ece\u79fb\u52a8\u5e94\u7528\u6574\u4f53\u67b6\u6784\u3001\u5230\u9875\u9762\u5f00\u53d1\u548c\u529f\u80fd\u6269\u5c55\uff0c\u518d\u5230\u4e91\u7aef\u7684\u90e8\u7f72\u548c\u5206\u53d1\uff0c\u4e00\u4e2a\u5b8c\u6574\u7684 Weex \u5e94\u7528\u5c31\u53ef\u4ee5\u6784\u5efa\u51fa\u6765\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/guide/intro/app-architecture.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/intro/how-it-works.html
----------------------------------------------------------------------
diff --git a/content/cn/guide/intro/how-it-works.html b/content/cn/guide/intro/how-it-works.html
new file mode 100644
index 0000000..4fec7aa
--- /dev/null
+++ b/content/cn/guide/intro/how-it-works.html
@@ -0,0 +1,431 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u5de5\u4f5c\u539f\u7406 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5de5\u4f5c\u539f\u7406\u6574\u4f53\u67b6\u6784Weex \u8868\u9762\u4e0a\u662f\u4e00\u4e2a\u5ba2\u6237\u7aef\u6280\u672f\uff0c\u4f46\u5b9e\u9645\u4e0a\u5b83\u4e32\u8054\u8d77\u4e86\u4ece\u672c\u5730\u5f00\u53d1\u73af\u5883\u5230\u4e91\u7aef\u90e8\u7f72\u548c\u5206\u53d1\u7684\u6574\u4e2a\u94fe\u8def\u3002\u5f00\u53d1\u8005\u9996\u5148\u53ef\u4ee5\u5728\u672c\u5730\u60f3\u64b0\u5199 web \u9875\u9762\u4e00\u6837\u64b0\u5199\u4e00\u4e2a app \u7684\u9875\u9762\uff0c\u7136\u540e\u7f16\u8bd1\u6210\u4e00\u6bb5 JavaScript \u4ee3\u7801\uff0c\u5f62\u6210 Weex \u7684\u4e00\u4e2a JS bundle\uff1b\u5728\u4e91\u7aef\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u628a\u751f\u6210\u7684 JS bundle \u90e8\u7f72\u4e0a\u53bb\uff0c\u7136\u540e\u901a\u8fc7\u7f51\u7edc\u8bf7\u6c42\u6216\u9884\u4e0b\u53d1\u7684\u65b9\u5f0f\u4f20\u9012\u5230\u7528\u6237\u7684\u79fb\u52a8\u5e94\u7528\u5ba2\u6237\u7aef\uff1b\u5728\u79fb\u52a8\u5e94\u7528\u5ba2\u6237\u7aef">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u5de5\u4f5c\u539f\u7406">
+<meta property="og:url" content="https://weex.apache.org/cn/guide/intro/how-it-works.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5de5\u4f5c\u539f\u7406\u6574\u4f53\u67b6\u6784Weex \u8868\u9762\u4e0a\u662f\u4e00\u4e2a\u5ba2\u6237\u7aef\u6280\u672f\uff0c\u4f46\u5b9e\u9645\u4e0a\u5b83\u4e32\u8054\u8d77\u4e86\u4ece\u672c\u5730\u5f00\u53d1\u73af\u5883\u5230\u4e91\u7aef\u90e8\u7f72\u548c\u5206\u53d1\u7684\u6574\u4e2a\u94fe\u8def\u3002\u5f00\u53d1\u8005\u9996\u5148\u53ef\u4ee5\u5728\u672c\u5730\u60f3\u64b0\u5199 web \u9875\u9762\u4e00\u6837\u64b0\u5199\u4e00\u4e2a app \u7684\u9875\u9762\uff0c\u7136\u540e\u7f16\u8bd1\u6210\u4e00\u6bb5 JavaScript \u4ee3\u7801\uff0c\u5f62\u6210 Weex \u7684\u4e00\u4e2a JS bundle\uff1b\u5728\u4e91\u7aef\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u628a\u751f\u6210\u7684 JS bundle \u90e8\u7f72\u4e0a\u53bb\uff0c\u7136\u540e\u901a\u8fc7\u7f51\u7edc\u8bf7\u6c42\u6216\u9884\u4e0b\u53d1\u7684\u65b9\u5f0f\u4f20\u9012\u5230\u7528\u6237\u7684\u79fb\u52a8\u5e94\u7528\u5ba2\u6237\u7aef\uff1b\u5728\u79fb\u52a8\u5e94\u7528\u5ba2\u6237\u7aef">
+<meta property="og:image" content="https://weex.apache.org/../images/flow.png">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.824Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u5de5\u4f5c\u539f\u7406">
+<meta name="twitter:description" content="\u5de5\u4f5c\u539f\u7406\u6574\u4f53\u67b6\u6784Weex \u8868\u9762\u4e0a\u662f\u4e00\u4e2a\u5ba2\u6237\u7aef\u6280\u672f\uff0c\u4f46\u5b9e\u9645\u4e0a\u5b83\u4e32\u8054\u8d77\u4e86\u4ece\u672c\u5730\u5f00\u53d1\u73af\u5883\u5230\u4e91\u7aef\u90e8\u7f72\u548c\u5206\u53d1\u7684\u6574\u4e2a\u94fe\u8def\u3002\u5f00\u53d1\u8005\u9996\u5148\u53ef\u4ee5\u5728\u672c\u5730\u60f3\u64b0\u5199 web \u9875\u9762\u4e00\u6837\u64b0\u5199\u4e00\u4e2a app \u7684\u9875\u9762\uff0c\u7136\u540e\u7f16\u8bd1\u6210\u4e00\u6bb5 JavaScript \u4ee3\u7801\uff0c\u5f62\u6210 Weex \u7684\u4e00\u4e2a JS bundle\uff1b\u5728\u4e91\u7aef\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u628a\u751f\u6210\u7684 JS bundle \u90e8\u7f72\u4e0a\u53bb\uff0c\u7136\u540e\u901a\u8fc7\u7f51\u7edc\u8bf7\u6c42\u6216\u9884\u4e0b\u53d1\u7684\u65b9\u5f0f\u4f20\u9012\u5230\u7528\u6237\u7684\u79fb\u52a8\u5e94\u7528\u5ba2\u6237\u7aef\uff1b\u5728\u79fb\u52a8\u5e94\u7528\u5ba2\u6237\u7aef">
+<meta name="twitter:image" content="https://weex.apache.org/../images/flow.png">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link current ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link current ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u5de5\u4f5c\u539f\u7406
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.824Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5de5\u4f5c\u539f\u7406"><a href="#\u5de5\u4f5c\u539f\u7406" class="headerlink" title="\u5de5\u4f5c\u539f\u7406"></a>\u5de5\u4f5c\u539f\u7406</h1><h2 id="\u6574\u4f53\u67b6\u6784"><a href="#\u6574\u4f53\u67b6\u6784" class="headerlink" title="\u6574\u4f53\u67b6\u6784"></a>\u6574\u4f53\u67b6\u6784</h2><p>Weex \u8868\u9762\u4e0a\u662f\u4e00\u4e2a\u5ba2\u6237\u7aef\u6280\u672f\uff0c\u4f46\u5b9e\u9645\u4e0a\u5b83\u4e32\u8054\u8d77\u4e86\u4ece\u672c\u5730\u5f00\u53d1\u73af\u5883\u5230\u4e91\u7aef\u90e8\u7f72\u548c\u5206\u53d1\u7684\u6574\u4e2a\u94fe\u8def\u3002\u5f00\u53d1\u8005\u9996\u5148\u53ef\u4ee5\u5728\u672c\u5730\u60f3\u64b0\u5199 web \u9875\u9762\u4e00\u6837\u64b0\u5199\u4e00\u4e2a app \u7684\u9875\u9762\uff0c\u7136\u540e\u7f16\u8bd1\u6210\u4e00\u6bb5 JavaScript \u4ee3\u7801\uff0c\u5f62\u6210 Weex \u7684\u4e00\u4e2a JS bundle\uff1b\u5728\u4e91\u7aef\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u628a\u751f\u6210\u7684 JS bundle \u90e8\u7f72\u4e0a\u53bb\uff0c\u7136\u540e\u901a\u8fc7\u7f51\u7edc\u8bf7\u6c42\u6216\u9884\u4e0b\u53d1\u7684\u65b9\u5f0f\u4f20\u9012\u5230\u7528\u6237\u7684\u79fb\u52a8\u5e94\u7528\u5ba2\u6237\u7aef\uff1b\u5728\u79fb\u52a8\u5e94\u7528\u5ba2\u6237\u7aef\u91cc\uff0cWeexSDK \u4f1a\u51c6\u5907\u597d\u4e00\u4e2a JavaScript \u5f15\u64ce\uff0c\u5e76\u4e14\u5728\u7528\u6237\u6253\u5f00\u4e00\u4e2a Weex \u9875\u9762\u65f6\u6267\u884c\u76f8\u5e94\u7684 JS bundle\uff0c\u5e76\u5728\u6267\u884c\u8fc7\u7a0b\u4e2d\u4ea7\u751f\u5404\u79cd\u547d\u4ee4\u53d1\u9001\u5230 native \u7aef\u8fdb\u884c\u7684\u754c\u9762\u6e32\u67d3\u6216\u6570\u636e\u5b58\u50a8\u3001\u7f51\u7edc\u901a\u4fe1\u3001\u8c03\u7528\u8bbe\u5907\u529f\u80fd\u3001\u7528\u6237\u4ea4\u4e92\u54cd\u5e94\u7b49\u79fb\u52a8\u5e94\u7528\u7684\u573a\u666f\u5b9e\u8df5\uff1b
\u540c\u65f6\uff0c\u5982\u679c\u7528\u6237\u6ca1\u6709\u5b89\u88c5\u79fb\u52a8\u5e94\u7528\uff0c\u4ed6\u4ecd\u7136\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u91cc\u6253\u5f00\u4e00\u4e2a\u76f8\u540c\u7684 web \u9875\u9762\uff0c\u8fd9\u4e2a\u9875\u9762\u662f\u4f7f\u7528\u76f8\u540c\u7684\u9875\u9762\u6e90\u4ee3\u7801\uff0c\u901a\u8fc7\u6d4f\u89c8\u5668\u91cc\u7684 JavaScript \u5f15\u64ce\u8fd0\u884c\u8d77\u6765\u7684\u3002</p>
+<p><img src="../images/flow.png" alt="How it works"></p>
+<h2 id="\u672c\u5730\u5f00\u53d1\u73af\u5883"><a href="#\u672c\u5730\u5f00\u53d1\u73af\u5883" class="headerlink" title="\u672c\u5730\u5f00\u53d1\u73af\u5883"></a>\u672c\u5730\u5f00\u53d1\u73af\u5883</h2><p>Weex \u7684\u672c\u5730\u5f00\u53d1\u73af\u5883\u57fa\u4e8e web \u5f00\u53d1\u4f53\u9a8c\u800c\u8bbe\u8ba1\uff0cweb \u5f00\u53d1\u8005\u53ef\u4ee5\u901a\u8fc7\u81ea\u5df1\u719f\u6089\u7684 HTML/CSS/JavaScript \u6280\u672f\u548c\u8bed\u6cd5\u5b9e\u73b0\u79fb\u52a8\u5e94\u7528\u7684\u754c\u9762\u3002\u540c\u65f6 Weex \u4e5f\u5bf9 Vue.js \u8fd9\u4e00\u975e\u5e38\u4f18\u79c0\u7684\u524d\u7aef\u6846\u67b6\u505a\u4e86\u5b98\u65b9\u7684\u652f\u6301\u3002</p>
+<p>\u9664\u6b64\u4e4b\u5916\uff0cWeex \u7684\u5de5\u7a0b\u8bbe\u8ba1\u4e5f\u662f web \u5f00\u53d1\u8005\u975e\u5e38\u719f\u6089\u7684\uff0c\u9996\u5148 web \u5f00\u53d1\u8005\u53ef\u4ee5\u4f7f\u7528\u81ea\u5df1\u719f\u6089\u7684 npm \u8fdb\u884c\u4f9d\u8d56\u7ba1\u7406\uff1b\u5176\u6b21 web \u5f00\u53d1\u8005\u5728\u901a\u8fc7\u9879\u76ee\u811a\u624b\u67b6\u521d\u59cb\u5316\u5de5\u7a0b\u3001\u5f00\u53d1\u3001\u8c03\u8bd5\u3001\u8d28\u91cf\u63a7\u5236\u7b49\u5404\u4e2a\u73af\u8282\uff0c\u90fd\u53ef\u4ee5\u53c2\u8003 web \u5f00\u53d1\u5df2\u6709\u7684\u6700\u4f73\u5b9e\u8df5\u3002</p>
+<p>\u548c\u5982\u4eca web \u5f00\u53d1\u7684\u6700\u4f73\u5b9e\u8df5\u4e00\u6837\uff0cWeex \u4f1a\u628a\u4e00\u4e2a\u9875\u9762\u7684\u6e90\u4ee3\u7801\u5168\u90e8\u7f16\u8bd1\u6253\u5305\u6210\u4e00\u4e2a JS bundle\uff0c\u5728\u6d4f\u89c8\u5668\u4e2d\uff0c\u6211\u4eec\u9700\u8981\u628a\u8fd9\u4e2a JS bundle \u4f5c\u4e3a\u4e00\u6bb5 <code><script></code> \u8f7d\u5165\u7f51\u9875\uff0c\u5728\u5ba2\u6237\u7aef\u91cc\uff0c\u6211\u4eec\u628a\u8fd9\u6bb5 JS bundle \u8f7d\u5165\u672c\u5730\uff0c\u5e76\u901a\u8fc7 WeexSDK \u76f4\u63a5\u6267\u884c\u3002</p>
+<!-- \u548c web \u5f00\u53d1\u7684\u5f02\u540c -->
+<!-- \u548c vue \u5f00\u53d1\u7684\u5f02\u540c -->
+<!-- \u5982\u4f55\u521b\u5efa\u4e00\u4e2a\u65b0\u9879\u76ee -->
+<!-- \u5982\u4f55\u5728 native \u91cc debug -->
+<!-- \u5982\u4f55\u5728 html5 \u91cc debug -->
+<h2 id="\u4e91\u7aef\u90e8\u7f72\u548c\u5206\u53d1"><a href="#\u4e91\u7aef\u90e8\u7f72\u548c\u5206\u53d1" class="headerlink" title="\u4e91\u7aef\u90e8\u7f72\u548c\u5206\u53d1"></a>\u4e91\u7aef\u90e8\u7f72\u548c\u5206\u53d1</h2><p>Weex \u7684 JS bundle \u53ef\u4ee5\u4f5c\u4e3a web \u5f00\u53d1\u4e2d\u7684\u4e00\u6bb5\u9759\u6001\u8d44\u6e90\u8fdb\u884c\u90e8\u7f72\u548c\u4e0b\u53d1\u3002\u51e0\u4e4e\u53ef\u4ee5\u590d\u7528 HTML5 \u6240\u6709\u7684\u5de5\u7a0b\u4f53\u7cfb\u548c\u6700\u4f73\u5b9e\u8df5\u3002\u6bd4\u5982\u5728\u672c\u5730\u5f00\u53d1\u73af\u5883\u901a\u8fc7\u90e8\u7f72\u5de5\u5177\u5c06 JS bundle \u90e8\u7f72\u5230 CDN\u3001\u901a\u8fc7 CMS \u6216\u642d\u5efa\u5e73\u53f0\u628a\u4e1a\u52a1\u6570\u636e\u548c\u6a21\u5757\u5316\u7684\u524d\u7aef\u7ec4\u4ef6\u81ea\u52a8\u5316\u62fc\u63a5\u751f\u6210 JS bundle\u3001\u901a\u8fc7\u670d\u52a1\u7aef JS bundle \u7684\u6d41\u91cf\u548c\u65e5\u5fd7\u7edf\u8ba1\u9875\u9762\u7684\u8bbf\u95ee\u60c5\u51b5\u3001\u901a\u8fc7 AppCache \u6216\u7c7b\u4f3c\u7684\u65b9\u5f0f\u5bf9 JS bundle \u5728\u5ba2\u6237\u7aef\u8fdb\u884c\u7f13\u5b58\u6216\u9884\u52a0\u8f7d\u4ee5\u964d\u4f4e\u7f51\u7edc\u901a\u4fe1\u7684\u6210\u672c\u7b49\u3002</p>
+<h2 id="\u5ba2\u6237\u7aef-JavaScript-\u5f15\u64ce"><a href="#\u5ba2\u6237\u7aef-JavaScript-\u5f15\u64ce" class="headerlink" title="\u5ba2\u6237\u7aef JavaScript \u5f15\u64ce"></a>\u5ba2\u6237\u7aef JavaScript \u5f15\u64ce</h2><p>Weex \u7684 iOS \u548c Android \u5ba2\u6237\u7aef\u4e2d\u90fd\u4f1a\u8fd0\u884c\u4e00\u4e2a JavaScript \u5f15\u64ce\uff0c\u6765\u6267\u884c JS bundle\uff0c\u540c\u65f6\u5411\u5404\u7aef\u7684\u6e32\u67d3\u5c42\u53d1\u9001\u89c4\u8303\u5316\u7684\u6307\u4ee4\uff0c\u8c03\u5ea6\u5ba2\u6237\u7aef\u7684\u6e32\u67d3\u548c\u5176\u5b83\u5404\u79cd\u80fd\u529b\u3002\u6211\u4eec\u5728 iOS \u4e0b\u9009\u62e9\u4e86 JavaScriptCore \u5185\u6838\uff0c\u800c\u5728 Android \u4e0b\u9009\u62e9\u4e86 UC \u63d0\u4f9b\u7684 v8 \u5185\u6838\u3002\u65e0\u8bba\u662f\u4ece\u6027\u80fd\u8fd8\u662f\u7a33\u5b9a\u6027\u65b9\u9762\u90fd\u63d0\u4f9b\u4e86\u5f3a\u6709\u529b\u7684\u4fdd\u969c\u3002</p>
+<p>\u4e3a\u4e86\u8ba9\u6574\u4e2a\u79fb\u52a8\u5e94\u7528\u7684\u8d44\u6e90\u5229\u7528\u5f97\u66f4\u597d\uff0c\u6211\u4eec\u5728\u5ba2\u6237\u7aef\u63d0\u4f9b\u7684 JavaScript \u5f15\u64ce\u662f\u5355\u4f8b\u7684\uff0c\u5373\u6240\u6709 JS bundle \u516c\u7528\u4e00\u4e2a JavaScript \u5185\u6838\u5b9e\u4f8b\uff0c\u540c\u65f6\u5bf9\u6bcf\u4e2a JS bundle \u5728\u8fd0\u884c\u65f6\u8fdb\u884c\u4e86\u4e0a\u4e0b\u6587\u7684\u9694\u79bb\uff0c\u4f7f\u5f97\u6bcf\u4e2a JS bundle \u90fd\u80fd\u591f\u9ad8\u6548\u5b89\u5168\u7684\u5de5\u4f5c\u3002\u6211\u4eec\u8fd8\u628a Vue 2.0 \u8fd9\u6837\u7684 JS Framework \u505a\u4e86\u9884\u7f6e\uff0c\u5f00\u53d1\u8005\u4e0d\u5fc5\u628a JS Framework \u6253\u5305\u5728\u6bcf\u4e2a JS bundle \u91cc\uff0c\u4ece\u800c\u5927\u5927\u51cf\u5c11\u4e86 JS bundle \u7684\u4f53\u79ef\uff0c\u4e5f\u5c31\u8fdb\u4e00\u6b65\u4fdd\u969c\u4e86\u9875\u9762\u6253\u5f00\u7684\u901f\u5ea6\u3002</p>
+<h2 id="\u5ba2\u6237\u7aef\u6e32\u67d3\u5c42"><a href="#\u5ba2\u6237\u7aef\u6e32\u67d3\u5c42" class="headerlink" title="\u5ba2\u6237\u7aef\u6e32\u67d3\u5c42"></a>\u5ba2\u6237\u7aef\u6e32\u67d3\u5c42</h2><p>Weex \u76ee\u524d\u63d0\u4f9b\u4e86 iOS \u548c Android \u4e24\u4e2a\u5ba2\u6237\u7aef\u7684 native \u6e32\u67d3\u5c42\u3002\u6bcf\u4e2a\u7aef\u90fd\u57fa\u4e8e DOM \u6a21\u578b\u8bbe\u8ba1\u5e76\u5b9e\u73b0\u4e86\u6807\u51c6\u7684\u754c\u9762\u6e32\u67d3\u63a5\u53e3\u4f9b JavaScript \u5f15\u64ce\u8c03\u7528\u3002\u5e76\u4e14\u7ed3\u5408 web \u6807\u51c6\u548c native \u7684\u7279\u70b9\u548c\u4f18\u52bf\u5b9e\u73b0\u4e86\u4e00\u5957\u7edf\u4e00\u7684\u7ec4\u4ef6\u548c\u6a21\u5757\u3002\u5c24\u5176\u662f\u5728\u754c\u9762\u9996\u5c4f\u52a0\u8f7d\u65f6\u95f4\u3001native \u4e0b\u957f\u5217\u8868\u7684\u8d44\u6e90\u5f00\u9500\u548c\u590d\u7528\u60c5\u51b5\u3001CPU\u3001\u5185\u5b58\u3001\u5e27\u7387 \u7b49\u5173\u952e\u6307\u6807\u4e0a\uff0c\u90fd\u6709\u975e\u5e38\u4f18\u79c0\u7684\u8868\u73b0\u3002Weex \u5b98\u65b9\u5df2\u7ecf\u63d0\u4f9b\u4e86\u4e00\u7ec4\u5f00\u53d1\u8005\u6700\u5e38\u7528\u7684\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u4f46\u9762\u5bf9\u4e30\u5bcc\u591a\u6837\u7684\u79fb\u52a8\u5e94\u7528\u7814\u53d1\u9700\u6c42\uff0c\u56e2\u961f\u4e5f\u96be\u514d\u4f1a\u529b\u4e0d\u4ece\u5fc3\uff0c\u4e3a\u6b64\u6211\u4eec\u63d0\u4f9b\u4e86\u7075\u6d3b\u81ea\u7531\u7684\u6a2a\u5411\u6269\u5c55\u80fd\u529b\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u6839\u636e\u81ea\u8eab\u7684\u60c5\u51b5\u5b9a\u5236\u5c5e\u4e8e\u81ea\u5df1\u7684\u5ba2\u6237\u7aef\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u8fdb\u4e00\u6b65\u4e30\u5bcc Weex \u5728\u5ba2\u6237\u7aef\u4e0a\u7684\u80fd\u529b\u3002</p>
+<!-- \u7ec4\u4ef6\u548c\u6a21\u5757\u548c web \u6807\u51c6\u7684\u533a\u522b -->
+<!-- \u5982\u4f55\u63a5\u5165 iOS -->
+<!-- \u5982\u4f55\u63a5\u5165 Android -->
+<!-- \u5982\u4f55\u6269\u5c55 iOS -->
+<!-- \u5982\u4f55\u6269\u5c55 Android -->
+<h2 id="\u6d4f\u89c8\u5668\u6e32\u67d3"><a href="#\u6d4f\u89c8\u5668\u6e32\u67d3" class="headerlink" title="\u6d4f\u89c8\u5668\u6e32\u67d3"></a>\u6d4f\u89c8\u5668\u6e32\u67d3</h2><p>Weex \u9664\u4e86\u63d0\u4f9b iOS \u548c Android \u7684\u5ba2\u6237\u7aef\u6e32\u67d3\u5c42\u4e4b\u5916\uff0c\u8fd8\u57fa\u4e8e Vue 2.0 \u5bf9\u5b98\u65b9\u7684\u6240\u6709\u7ec4\u4ef6\u548c\u6a21\u5757\u8fdb\u884c\u4e86\u5c01\u88c5\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u57fa\u4e8e Vue 2.0 \u7528\u540c\u4e00\u5957\u6e90\u4ee3\u7801\u6784\u5efa\u51fa\u5728\u6d4f\u89c8\u5668\u4e2d\u76f8\u540c\u6548\u679c\u7684\u9875\u9762\u3002\u5e76\u4e14\u540c\u6837\u53ef\u4ee5\u6a2a\u5411\u6269\u5c55\u3002</p>
+<!-- \u5982\u4f55\u4f7f\u7528 HTML5 \u7248\u672c -->
+<!-- \u5982\u4f55\u6269\u5c55 HTML5 -->
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/guide/intro/how-it-works.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/intro/index.html
----------------------------------------------------------------------
diff --git a/content/cn/guide/intro/index.html b/content/cn/guide/intro/index.html
new file mode 100644
index 0000000..c3eb227
--- /dev/null
+++ b/content/cn/guide/intro/index.html
@@ -0,0 +1,434 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u4ecb\u7ecd | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Intro
+\u5de5\u4f5c\u539f\u7406
+Web \u5f00\u53d1\u4f53\u9a8c
+\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762
+\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c
+\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528
+Weex \u9875\u9762\u7ed3\u6784">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u4ecb\u7ecd">
+<meta property="og:url" content="https://weex.apache.org/cn/guide/intro/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Intro
+\u5de5\u4f5c\u539f\u7406
+Web \u5f00\u53d1\u4f53\u9a8c
+\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762
+\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c
+\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528
+Weex \u9875\u9762\u7ed3\u6784">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.825Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u4ecb\u7ecd">
+<meta name="twitter:description" content="Intro
+\u5de5\u4f5c\u539f\u7406
+Web \u5f00\u53d1\u4f53\u9a8c
+\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762
+\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c
+\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528
+Weex \u9875\u9762\u7ed3\u6784">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link current ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link current ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u4ecb\u7ecd
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.825Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Intro"><a href="#Intro" class="headerlink" title="Intro"></a>Intro</h1><ul>
+<li><a href="./how-it-works.html">\u5de5\u4f5c\u539f\u7406</a></li>
+<li><a href="./web-dev-experience.html">Web \u5f00\u53d1\u4f53\u9a8c</a></li>
+<li><a href="./using-vue.html">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a></li>
+<li><a href="./write-once.html">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a></li>
+<li><a href="./app-architecture.html">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a></li>
+<li><a href="./page-architecture.html">Weex \u9875\u9762\u7ed3\u6784</a></li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/guide/intro/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/guide/intro/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[03/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/references/common-event.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/references/common-event.html b/content/cn/v-0.10/references/common-event.html
new file mode 100644
index 0000000..5a28496
--- /dev/null
+++ b/content/cn/v-0.10/references/common-event.html
@@ -0,0 +1,1140 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u901a\u7528\u4e8b\u4ef6 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u901a\u7528\u4e8b\u4ef6Weex \u63d0\u4f9b\u4e86\u901a\u8fc7\u4e8b\u4ef6\u89e6\u53d1\u52a8\u4f5c\u7684\u80fd\u529b\uff0c\u4f8b\u5982\u5728\u7528\u6237\u70b9\u51fb\u7ec4\u4ef6\u65f6\u6267\u884c JavaScript\u3002\u4e0b\u9762\u5217\u51fa\u4e86\u53ef\u88ab\u6dfb\u52a0\u5230 Weex \u7ec4\u4ef6\u4e0a\u4ee5\u5b9a\u4e49\u4e8b\u4ef6\u52a8\u4f5c\u7684\u5c5e\u6027\uff1a
+click\u5f53\u7ec4\u4ef6\u4e0a\u53d1\u751f\u70b9\u51fb\u624b\u52bf\u65f6\u88ab\u89e6\u53d1\u3002
+\u6ce8\u610f\uff1a
+&lt;input&gt; \u548c &lt;switch&gt; \u7ec4\u4ef6\u76ee\u524d\u4e0d\u652f\u6301 click \u4e8b\u4ef6\uff0c\u8bf7\u4f7f\u7528 change \u6216 input \u4e8b\u4ef6\u6765\u4ee3\u66ff\u3002
+\u4e8b\u4ef6\u5bf9\u8c61
+type: click
+targe">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u901a\u7528\u4e8b\u4ef6">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/references/common-event.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u901a\u7528\u4e8b\u4ef6Weex \u63d0\u4f9b\u4e86\u901a\u8fc7\u4e8b\u4ef6\u89e6\u53d1\u52a8\u4f5c\u7684\u80fd\u529b\uff0c\u4f8b\u5982\u5728\u7528\u6237\u70b9\u51fb\u7ec4\u4ef6\u65f6\u6267\u884c JavaScript\u3002\u4e0b\u9762\u5217\u51fa\u4e86\u53ef\u88ab\u6dfb\u52a0\u5230 Weex \u7ec4\u4ef6\u4e0a\u4ee5\u5b9a\u4e49\u4e8b\u4ef6\u52a8\u4f5c\u7684\u5c5e\u6027\uff1a
+click\u5f53\u7ec4\u4ef6\u4e0a\u53d1\u751f\u70b9\u51fb\u624b\u52bf\u65f6\u88ab\u89e6\u53d1\u3002
+\u6ce8\u610f\uff1a
+&lt;input&gt; \u548c &lt;switch&gt; \u7ec4\u4ef6\u76ee\u524d\u4e0d\u652f\u6301 click \u4e8b\u4ef6\uff0c\u8bf7\u4f7f\u7528 change \u6216 input \u4e8b\u4ef6\u6765\u4ee3\u66ff\u3002
+\u4e8b\u4ef6\u5bf9\u8c61
+type: click
+targe">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.954Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u901a\u7528\u4e8b\u4ef6">
+<meta name="twitter:description" content="\u901a\u7528\u4e8b\u4ef6Weex \u63d0\u4f9b\u4e86\u901a\u8fc7\u4e8b\u4ef6\u89e6\u53d1\u52a8\u4f5c\u7684\u80fd\u529b\uff0c\u4f8b\u5982\u5728\u7528\u6237\u70b9\u51fb\u7ec4\u4ef6\u65f6\u6267\u884c JavaScript\u3002\u4e0b\u9762\u5217\u51fa\u4e86\u53ef\u88ab\u6dfb\u52a0\u5230 Weex \u7ec4\u4ef6\u4e0a\u4ee5\u5b9a\u4e49\u4e8b\u4ef6\u52a8\u4f5c\u7684\u5c5e\u6027\uff1a
+click\u5f53\u7ec4\u4ef6\u4e0a\u53d1\u751f\u70b9\u51fb\u624b\u52bf\u65f6\u88ab\u89e6\u53d1\u3002
+\u6ce8\u610f\uff1a
+&lt;input&gt; \u548c &lt;switch&gt; \u7ec4\u4ef6\u76ee\u524d\u4e0d\u652f\u6301 click \u4e8b\u4ef6\uff0c\u8bf7\u4f7f\u7528 change \u6216 input \u4e8b\u4ef6\u6765\u4ee3\u66ff\u3002
+\u4e8b\u4ef6\u5bf9\u8c61
+type: click
+targe">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link current ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link current ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u901a\u7528\u4e8b\u4ef6
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.954Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u901a\u7528\u4e8b\u4ef6"><a href="#\u901a\u7528\u4e8b\u4ef6" class="headerlink" title="\u901a\u7528\u4e8b\u4ef6"></a>\u901a\u7528\u4e8b\u4ef6</h1><p>Weex \u63d0\u4f9b\u4e86\u901a\u8fc7\u4e8b\u4ef6\u89e6\u53d1\u52a8\u4f5c\u7684\u80fd\u529b\uff0c\u4f8b\u5982\u5728\u7528\u6237\u70b9\u51fb\u7ec4\u4ef6\u65f6\u6267\u884c JavaScript\u3002\u4e0b\u9762\u5217\u51fa\u4e86\u53ef\u88ab\u6dfb\u52a0\u5230 Weex \u7ec4\u4ef6\u4e0a\u4ee5\u5b9a\u4e49\u4e8b\u4ef6\u52a8\u4f5c\u7684\u5c5e\u6027\uff1a</p>
+<h2 id="click"><a href="#click" class="headerlink" title="click"></a><code>click</code></h2><p>\u5f53\u7ec4\u4ef6\u4e0a\u53d1\u751f\u70b9\u51fb\u624b\u52bf\u65f6\u88ab\u89e6\u53d1\u3002</p>
+<p><strong>\u6ce8\u610f\uff1a</strong></p>
+<p><code><input></code> \u548c <code><switch></code> \u7ec4\u4ef6\u76ee\u524d\u4e0d\u652f\u6301 <code>click</code> \u4e8b\u4ef6\uff0c\u8bf7\u4f7f\u7528 <code>change</code> \u6216 <code>input</code> \u4e8b\u4ef6\u6765\u4ee3\u66ff\u3002</p>
+<h3 id="\u4e8b\u4ef6\u5bf9\u8c61"><a href="#\u4e8b\u4ef6\u5bf9\u8c61" class="headerlink" title="\u4e8b\u4ef6\u5bf9\u8c61"></a>\u4e8b\u4ef6\u5bf9\u8c61</h3><ul>
+<li><code>type</code>: <code>click</code></li>
+<li><code>target</code>: \u89e6\u53d1\u70b9\u51fb\u4e8b\u4ef6\u7684\u76ee\u6807\u7ec4\u4ef6</li>
+<li><code>timestamp</code>: \u89e6\u53d1\u70b9\u51fb\u4e8b\u4ef6\u65f6\u7684\u65f6\u95f4\u6233</li>
+</ul>
+<h3 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h3><p>\u70b9\u51fb\u6309\u94ae\uff0c\u5c06\u5f39\u51fa\u5f39\u6846\uff0c\u518d\u70b9\u51fb\u5f39\u6846 <code>�</code>\uff0c\u5173\u95ed\u5f39\u6846\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"btn"</span> <span class="attr">onclick</span>=<span class="string">"openDialog"</span>></span>Show Dialog<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"dialog"</span> <span class="attr">class</span>=<span class="string">"dialog"</span> <span class="attr">if</span>=<s
pan class="string">"{{isShowDialog}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"dialog-backdrop"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"dialog-content"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"dialog-header"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"dialog-title"</span>></span>{{dialogTitle}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text
</span> <span class="attr">class</span>=<span class="string">"close"</span> <span class="attr">onclick</span>=<span class="string">"closeDialog"</span>></span>�<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"dialog-body"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{dialogBody}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span
class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"><span class="selector-class">.dialog-backdrop</span> {</div><div class="line"> <span class="attribute">opacity</span>: .<span class="number">5</span>;</div><div class="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span
class="number">#000000</span>;</div><div class="line">}</div><div class="line"><span class="selector-class">.dialog</span> {</div><div class="line"> <span class="attribute">position</span>: fixed;</div><div class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">align-items</span>: center;</div><div class="line">}</div><div class="line"><span class="selector-class">.dialog-content</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">450</span>;</div><div class="line"> <span class="attribute">
background-color</span>: <span class="number">#ffffff</span>;</div><div class="line">}</div><div class="line"><span class="selector-class">.dialog-header</span> {</div><div class="line"> <span class="attribute">padding</span>: <span class="number">20</span>;</div><div class="line"> <span class="attribute">border-bottom-width</span>: <span class="number">1</span>;</div><div class="line"> <span class="attribute">border-bottom-style</span>: solid;</div><div class="line"> <span class="attribute">border-bottom-color</span>: <span class="number">#efefef</span>;</div><div class="line">}</div><div class="line"><span class="selector-class">.dialog-body</span> {</div><div class="line"> <span class="attribute">padding</span>: <span class="number">20</span>;</div><div class="line">}</div><div class="line"><span class="selector-class">.close</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">50</span>;</div><div cla
ss="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> <span class="attribute">right</span>: <span class="number">10</span>;</div><div class="line"> <span class="attribute">top</span>: <span class="number">10</span>;</div><div class="line">}</div><div class="line"><span class="selector-class">.btn</span> {</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#ffffff</span>;</div><div class="line"> <span class="attribute">padding</span>: <span class="number">12</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#3071a9</span>;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#285e8e</span>;</div><div class="line"> <span class="attribute">border-radius</span>: <span class="number">4</span>;</div><div class="line">}</div><div class="line"
><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">isShowDialog</span>: <span class="literal">false</span>,</div><div class="line"> <span class="attr">dialogTitle</span>: <span class="string">'HELLO'</span>,</div><div class="line"> <span class="attr">dialogBody</span>: <span class="string">'Weex is best!'</span></div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">openDialog</span>: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> <span clas
s="keyword">this</span>.isShowDialog = <span class="literal">true</span></div><div class="line"> },</div><div class="line"> <span class="attr">closeDialog</span>: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.isShowDialog = <span class="literal">false</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/6c1dd48b419e614f92581930f42fd366" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="longpress"><a href="#longpress" class="headerlink" title="longpress"></a><code>longpress</code></h2><p>\u5982\u679c\u4e00\u4e2a\u7ec4\u4ef6\u88ab\u7ed1\u5b9a\u4e86 <code>longpress</code> \u4e8b\u4ef6\uff0c\u90a3\u4e48\u5f53\u7528\u6237\u957f\u6309\u8fd9\u4e2a\u7ec4\u4ef6\u65f6\uff0c\u8be5\u4e8b\u4ef6\u5c06\u4f1a\u88ab\u89e6\u53d1\u3002</p>
+<p><strong>\u6ce8\u610f\uff1a</strong></p>
+<p><code><input></code> \u548c <code><switch></code> \u7ec4\u4ef6\u76ee\u524d\u4e0d\u652f\u6301 <code>click</code> \u4e8b\u4ef6\uff0c\u8bf7\u4f7f\u7528 <code>change</code> \u6216 <code>input</code> \u4e8b\u4ef6\u6765\u4ee3\u66ff\u3002</p>
+<h3 id="\u4e8b\u4ef6\u5bf9\u8c61-1"><a href="#\u4e8b\u4ef6\u5bf9\u8c61-1" class="headerlink" title="\u4e8b\u4ef6\u5bf9\u8c61"></a>\u4e8b\u4ef6\u5bf9\u8c61</h3><ul>
+<li><code>type</code> : <code>longpress</code></li>
+<li><code>target</code> : \u89e6\u53d1\u957f\u6309\u4e8b\u4ef6\u7684\u76ee\u6807\u7ec4\u4ef6</li>
+<li><code>timestamp</code> : \u957f\u6309\u4e8b\u4ef6\u89e6\u53d1\u65f6\u7684\u65f6\u95f4\u6233</li>
+</ul>
+<h3 id="\u793a\u4f8b-1"><a href="#\u793a\u4f8b-1" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h3><p>\u957f\u6309\u6309\u94ae\uff0c\u53d8\u6362\u80cc\u666f\u8272\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 400; height: 200; background-color: {{bg}};</span></span></div><div class="line"> justify-content: center; align-items: center;" <span class="attr">onlongpress</span>=<span class="string">"{{update}}"</span>></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size: 60"</span>></span>Press me<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div
class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">bg</span>: <span class="string">'#FF0000'</span></div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">update</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.bg = <span class="keyword">this</span>.bg === <span class="string">'#FF0000'</span> ? <span class="string">'#00FF00'</span> : <span class="string">'#FF0000'</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"
></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/14a646ea3d7d5e1de5baaca9061a48b3" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="Appear-\u4e8b\u4ef6"><a href="#Appear-\u4e8b\u4ef6" class="headerlink" title="Appear \u4e8b\u4ef6"></a>Appear \u4e8b\u4ef6</h2><p>\u5982\u679c\u4e00\u4e2a\u4f4d\u4e8e\u67d0\u4e2a\u53ef\u6eda\u52a8\u533a\u57df\u5185\u7684\u7ec4\u4ef6\u88ab\u7ed1\u5b9a\u4e86 <code>appear</code> \u4e8b\u4ef6\uff0c\u90a3\u4e48\u5f53\u8fd9\u4e2a\u7ec4\u4ef6\u7684\u72b6\u6001\u53d8\u4e3a\u5728\u5c4f\u5e55\u4e0a\u53ef\u89c1\u65f6\uff0c\u8be5\u4e8b\u4ef6\u5c06\u88ab\u89e6\u53d1\u3002</p>
+<h3 id="\u4e8b\u4ef6\u5bf9\u8c61-2"><a href="#\u4e8b\u4ef6\u5bf9\u8c61-2" class="headerlink" title="\u4e8b\u4ef6\u5bf9\u8c61"></a>\u4e8b\u4ef6\u5bf9\u8c61</h3><ul>
+<li><code>type</code> : <code>appear</code></li>
+<li><code>target</code> : \u89e6\u53d1 Appear \u4e8b\u4ef6\u7684\u7ec4\u4ef6\u5bf9\u8c61</li>
+<li><code>timestamp</code> : \u4e8b\u4ef6\u88ab\u89e6\u53d1\u65f6\u7684\u65f6\u95f4\u6233</li>
+<li><code>direction</code> : \u89e6\u53d1\u4e8b\u4ef6\u65f6\u5c4f\u5e55\u7684\u6eda\u52a8\u65b9\u5411\uff0c<code>up</code> \u6216 <code>down</code></li>
+</ul>
+<h3 id="\u793a\u4f8b-2"><a href="#\u793a\u4f8b-2" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h3><p>\u5f53\u6eda\u5230\u6700\u4e0b\u65b9\u65f6\uff0c\u6700\u540e\u4e00\u4e2a <code>item</code> \u51fa\u73b0\uff0c\u5c06\u4f1a\u5f39\u51fa\u5f39\u6846\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">scroller</span> <span class="attr">onviewappear</span>=<span class="string">"{{viewappear}}"</span> <span class="attr">onviewdisappear</span>=<span class="string">"{{viewdisappear}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 1<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="str
ing">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 2<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 3<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 4<span class="tag"></<span class="name"
>text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 5<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 6<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span c
lass="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 7<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 8<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">
text</span>></span>scroll 9<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 10<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span> <span class="attr">onappear</span>=<span class="string">"alertMsg"</span> ></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>I will alert a message when I appeared.<span class="tag"></<span class
="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">scroller</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.list</span> {</div><div class="line"> <span class="attribute">height</span>: <span class="number">850</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="selector-class">.count</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">48</span>;</div><div class="line"> <span class="attribute">margin</span>: <span class="number">10</span>;</div><div class="line"> }</div><div class="
line"></div><div class="line"> <span class="selector-class">.indicator</span> {</div><div class="line"> <span class="attribute">height</span>: <span class="number">40</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">40</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#45b5f0</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="selector-class">.row</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">750</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="selector-class">.item</span> {</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">border-bottom-width</span>: <span class="number">2</span>;</div><div class="line"> <span class="attribute">border-bottom
-color</span>: <span class="number">#c0c0c0</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">200</span>;</div><div class="line"> <span class="attribute">padding</span>: <span class="number">20</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> modal = <span class="built_in">require</span>(<span class="string">'@weex-module/modal'</span>)</div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {},</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">alertMsg</span>: <span class="function"><span class=
"keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> modal.alert({</div><div class="line"> <span class="attr">message</span>: <span class="string">'I am appeared.'</span>,</div><div class="line"> <span class="attr">okTitle</span>: <span class="string">'Appear'</span></div><div class="line"> }, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> })</div><div class="line"> },</div><div class="line"> <span class="attr">viewappear</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> nativeLog(<span class="string">'>>>>>'</span>, <span class="string">'viewappear'</span>)</div><div class="line"> },</div><div class="line"> <span class="attr">viewdisappear</span>: <
span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> nativeLog(<span class="string">'>>>>>'</span>, <span class="string">'viewdisappear'</span>)</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/4d5335f086dfc9964caed5b1fe4b1aa7" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="Disappear-\u4e8b\u4ef6"><a href="#Disappear-\u4e8b\u4ef6" class="headerlink" title="Disappear \u4e8b\u4ef6"></a>Disappear \u4e8b\u4ef6</h2><p>\u5982\u679c\u4e00\u4e2a\u4f4d\u4e8e\u67d0\u4e2a\u53ef\u6eda\u52a8\u533a\u57df\u5185\u7684\u7ec4\u4ef6\u88ab\u7ed1\u5b9a\u4e86 <code>disappear</code> \u4e8b\u4ef6\uff0c\u90a3\u4e48\u5f53\u8fd9\u4e2a\u7ec4\u4ef6\u88ab\u6ed1\u51fa\u5c4f\u5e55\u53d8\u4e3a\u4e0d\u53ef\u89c1\u72b6\u6001\u65f6\uff0c\u8be5\u4e8b\u4ef6\u5c06\u88ab\u89e6\u53d1\u3002</p>
+<h3 id="\u4e8b\u4ef6\u5bf9\u8c61-3"><a href="#\u4e8b\u4ef6\u5bf9\u8c61-3" class="headerlink" title="\u4e8b\u4ef6\u5bf9\u8c61"></a>\u4e8b\u4ef6\u5bf9\u8c61</h3><ul>
+<li><code>type</code> : <code>disappear</code></li>
+<li><code>target</code> : \u89e6\u53d1 Disappear \u4e8b\u4ef6\u7684\u7ec4\u4ef6\u5bf9\u8c61</li>
+<li><code>timestamp</code> : \u4e8b\u4ef6\u88ab\u89e6\u53d1\u65f6\u7684\u65f6\u95f4\u6233</li>
+<li><code>direction</code> : \u89e6\u53d1\u4e8b\u4ef6\u65f6\u5c4f\u5e55\u7684\u6eda\u52a8\u65b9\u5411\uff0c<code>up</code> \u6216 <code>down</code></li>
+</ul>
+<h3 id="\u793a\u4f8b-3"><a href="#\u793a\u4f8b-3" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h3><p>\u5f53\u5411\u4e0b\u6eda\u52a8\u5230\u7b2c\u4e00\u4e2a <code>item</code> \u6d88\u5931\u540e\uff0c\u5c06\u4f1a\u5f39\u51fa\u5f39\u6846\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">scroller</span> <span class="attr">onviewappear</span>=<span class="string">"{{viewappear}}"</span> <span class="attr">onviewdisappear</span>=<span class="string">"{{viewdisappear}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span> <span class="attr">ondisappear</span>=<span class="string">"alertMsg"</span> ></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>I will alert a message when I disappeared.<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class
="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 1<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 2<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line">
<span class="tag"><<span class="name">text</span>></span>scroll 3<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 4<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 5<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span cl
ass="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 6<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 7<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<spa
n class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 8<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 9<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 10<span class="tag"></<span
class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">scroller</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.list</span> {</div><div class="line"> <span class="attribute">height</span>: <span class="number">850</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="selector-class">.count</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">48</span>;</div><div class="line"> <span class="attribute">margin</span>: <span class="number">10</span>;</div><div class="line"> }</div><div c
lass="line"></div><div class="line"> <span class="selector-class">.indicator</span> {</div><div class="line"> <span class="attribute">height</span>: <span class="number">40</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">40</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#45b5f0</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="selector-class">.row</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">750</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="selector-class">.item</span> {</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">border-bottom-width</span>: <span class="number">2</span>;</div><div class="line"> <span class="attribute">border-
bottom-color</span>: <span class="number">#c0c0c0</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">200</span>;</div><div class="line"> <span class="attribute">padding</span>: <span class="number">20</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> modal = <span class="built_in">require</span>(<span class="string">'@weex-module/modal'</span>)</div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {},</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">alertMsg</span>: <span class="function"><span
class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> modal.alert({</div><div class="line"> <span class="attr">message</span>: <span class="string">'I am disappeared.'</span>,</div><div class="line"> <span class="attr">okTitle</span>: <span class="string">'Disappear'</span></div><div class="line"> }, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> })</div><div class="line"> },</div><div class="line"> <span class="attr">viewappear</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> nativeLog(<span class="string">'>>>>>'</span>, <span class="string">'viewappear'</span>)</div><div class="line"> },</div><div class="line"> <span class="attr">viewdisappe
ar</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> nativeLog(<span class="string">'>>>>>'</span>, <span class="string">'viewdisappear'</span>)</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/eefa176009207a429bbaf475f6ee92d1" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="Page-\u4e8b\u4ef6"><a href="#Page-\u4e8b\u4ef6" class="headerlink" title="Page \u4e8b\u4ef6"></a>Page \u4e8b\u4ef6</h2><p><em>\u6ce8\u610f\uff1a\u4ec5\u652f\u6301 iOS \u548c Android\uff0cH5 \u6682\u4e0d\u652f\u6301\u3002</em></p>
+<p>Weex \u901a\u8fc7 <code>viewappear</code> \u548c <code>viewdisappear</code> \u4e8b\u4ef6\u63d0\u4f9b\u4e86\u7b80\u5355\u7684\u9875\u9762\u72b6\u6001\u7ba1\u7406\u80fd\u529b\u3002</p>
+<p><code>viewappear</code> \u4e8b\u4ef6\u4f1a\u5728\u9875\u9762\u5c31\u8981\u663e\u793a\u6216\u914d\u7f6e\u7684\u4efb\u4f55\u9875\u9762\u52a8\u753b\u88ab\u6267\u884c\u524d\u89e6\u53d1\uff0c\u4f8b\u5982\uff0c\u5f53\u8c03\u7528 <code>navigator</code> \u6a21\u5757\u7684 <code>push</code> \u65b9\u6cd5\u65f6\uff0c\u8be5\u4e8b\u4ef6\u5c06\u4f1a\u5728\u6253\u5f00\u65b0\u9875\u9762\u65f6\u88ab\u89e6\u53d1\u3002<code>viewdisappear</code> \u4e8b\u4ef6\u4f1a\u5728\u9875\u9762\u5c31\u8981\u5173\u95ed\u65f6\u88ab\u89e6\u53d1\u3002</p>
+<p>\u4e0e\u7ec4\u4ef6\u7684 <code>appear</code> \u548c <code>disappear</code> \u4e8b\u4ef6\u4e0d\u540c\u7684\u662f\uff0c<code>viewappear</code> \u548c <code>viewdisappear</code> \u4e8b\u4ef6\u5173\u6ce8\u7684\u662f\u6574\u4e2a\u9875\u9762\u7684\u72b6\u6001\uff0c\u6240\u4ee5<strong>\u5b83\u4eec\u5fc5\u987b\u7ed1\u5b9a\u5230\u9875\u9762\u7684\u6839\u5143\u7d20\u4e0a</strong>\u3002</p>
+<p>\u7279\u6b8a\u60c5\u51b5\u4e0b\uff0c\u8fd9\u4e24\u4e2a\u4e8b\u4ef6\u4e5f\u80fd\u88ab\u7ed1\u5b9a\u5230\u975e\u6839\u5143\u7d20\u7684body\u7ec4\u4ef6\u4e0a\uff0c\u4f8b\u5982<code>wxc-navpage</code>\u7ec4\u4ef6\u3002</p>
+<h3 id="\u4e8b\u4ef6\u5bf9\u8c61-4"><a href="#\u4e8b\u4ef6\u5bf9\u8c61-4" class="headerlink" title="\u4e8b\u4ef6\u5bf9\u8c61"></a>\u4e8b\u4ef6\u5bf9\u8c61</h3><ul>
+<li><code>type</code> : <code>viewappear</code> \u6216 <code>viewdisappear</code></li>
+<li><code>target</code> : \u89e6\u53d1\u4e8b\u4ef6\u7684\u7ec4\u4ef6\u5bf9\u8c61</li>
+<li><code>timestamp</code> : \u4e8b\u4ef6\u88ab\u89e6\u53d1\u65f6\u7684\u65f6\u95f4\u6233</li>
+</ul>
+<h3 id="\u793a\u4f8b-4"><a href="#\u793a\u4f8b-4" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h3><p>\u8fdb\u51fa\u9875\u9762\u65f6\uff0c\u90fd\u4f1a\u5f39\u6846\u63d0\u793a\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">scroller</span> <span class="attr">onviewappear</span>=<span class="string">"{{alertViewappearMsg}}"</span> <span class="attr">onviewdisappear</span>=<span class="string">"{{alertViewdisappearMsg}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 1<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=
<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 2<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 3<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 4<span class="tag"></<s
pan class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 5<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 6<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="
tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 7<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 8<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<sp
an class="name">text</span>></span>scroll 9<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 10<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span> <span class="attr">onappear</span>=<span class="string">"alertMsg"</span> ></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>scroll 11<span class="tag"></<span class="name">text</
span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">scroller</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.list</span> {</div><div class="line"> <span class="attribute">height</span>: <span class="number">850</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="selector-class">.count</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">48</span>;</div><div class="line"> <span class="attribute">margin</span>: <span class="number">10</span>;</div><div class="line"> }</div><div class="line"></div><d
iv class="line"> <span class="selector-class">.indicator</span> {</div><div class="line"> <span class="attribute">height</span>: <span class="number">40</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">40</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#45b5f0</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="selector-class">.row</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">750</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="selector-class">.item</span> {</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">border-bottom-width</span>: <span class="number">2</span>;</div><div class="line"> <span class="attribute">border-bottom-color</span>:
<span class="number">#c0c0c0</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">200</span>;</div><div class="line"> <span class="attribute">padding</span>: <span class="number">20</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> modal = <span class="built_in">require</span>(<span class="string">'@weex-module/modal'</span>)</div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {},</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">alertViewappearMsg</span>: <span class="function"><span class="key
word">function</span> (<span class="params"></span>) </span>{</div><div class="line"> modal.alert({</div><div class="line"> <span class="attr">message</span>: <span class="string">'viewappear.'</span>,</div><div class="line"> <span class="attr">okTitle</span>: <span class="string">'viewappear'</span></div><div class="line"> }, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> })</div><div class="line"> },</div><div class="line"> <span class="attr">alertViewdisappearMsg</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> modal.alert({</div><div class="line"> <span class="attr">message</span>: <span class="string">'viewdisappear.'</span>,</div><div class="line"> <span class="attr">okTitle</span>: <spa
n class="string">'viewdisappear'</span></div><div class="line"> }, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/450205a8f8612381422220ce88a562ff" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/references/common-event.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[39/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/common-style.html
----------------------------------------------------------------------
diff --git a/content/cn/references/common-style.html b/content/cn/references/common-style.html
new file mode 100644
index 0000000..e1d08fb
--- /dev/null
+++ b/content/cn/references/common-style.html
@@ -0,0 +1,1479 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u901a\u7528\u6837\u5f0f | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u901a\u7528\u6837\u5f0f\u6240\u6709 Weex \u7ec4\u4ef6\u90fd\u652f\u6301\u4ee5\u4e0b\u901a\u7528\u6837\u5f0f\u89c4\u5219\u3002
+\u76d2\u6a21\u578b
+Weex \u76d2\u6a21\u578b\u57fa\u4e8e CSS \u76d2\u6a21\u578b\uff0c\u6bcf\u4e2a Weex \u5143\u7d20\u90fd\u53ef\u89c6\u4f5c\u4e00\u4e2a\u76d2\u5b50\u3002\u6211\u4eec\u4e00\u822c\u5728\u8ba8\u8bba\u8bbe\u8ba1\u6216\u5e03\u5c40\u65f6\uff0c\u4f1a\u63d0\u5230\u300c\u76d2\u6a21\u578b\u300d\u8fd9\u4e2a\u6982\u5ff5\u3002
+\u76d2\u6a21\u578b\u63cf\u8ff0\u4e86\u4e00\u4e2a\u5143\u7d20\u6240\u5360\u7528\u7684\u7a7a\u95f4\u3002\u6bcf\u4e00\u4e2a\u76d2\u5b50\u6709\u56db\u6761\u8fb9\u754c\uff1a\u5916\u8fb9\u8ddd\u8fb9\u754c margin edge, \u8fb9\u6846\u8fb9\u754c border edge, \u5185\u8fb9\u8ddd\u8fb9\u754c padding edge \u4e0e\u5185\u5bb9\u8fb9\u754c content edge\u3002">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u901a\u7528\u6837\u5f0f">
+<meta property="og:url" content="https://weex.apache.org/cn/references/common-style.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u901a\u7528\u6837\u5f0f\u6240\u6709 Weex \u7ec4\u4ef6\u90fd\u652f\u6301\u4ee5\u4e0b\u901a\u7528\u6837\u5f0f\u89c4\u5219\u3002
+\u76d2\u6a21\u578b
+Weex \u76d2\u6a21\u578b\u57fa\u4e8e CSS \u76d2\u6a21\u578b\uff0c\u6bcf\u4e2a Weex \u5143\u7d20\u90fd\u53ef\u89c6\u4f5c\u4e00\u4e2a\u76d2\u5b50\u3002\u6211\u4eec\u4e00\u822c\u5728\u8ba8\u8bba\u8bbe\u8ba1\u6216\u5e03\u5c40\u65f6\uff0c\u4f1a\u63d0\u5230\u300c\u76d2\u6a21\u578b\u300d\u8fd9\u4e2a\u6982\u5ff5\u3002
+\u76d2\u6a21\u578b\u63cf\u8ff0\u4e86\u4e00\u4e2a\u5143\u7d20\u6240\u5360\u7528\u7684\u7a7a\u95f4\u3002\u6bcf\u4e00\u4e2a\u76d2\u5b50\u6709\u56db\u6761\u8fb9\u754c\uff1a\u5916\u8fb9\u8ddd\u8fb9\u754c margin edge, \u8fb9\u6846\u8fb9\u754c border edge, \u5185\u8fb9\u8ddd\u8fb9\u754c padding edge \u4e0e\u5185\u5bb9\u8fb9\u754c content edge\u3002">
+<meta property="og:image" content="https://weex.apache.org/./images/css-boxmodel.png">
+<meta property="og:image" content="https://weex.apache.org/./images/css-flexbox-justify.svg">
+<meta property="og:image" content="https://weex.apache.org/./images/css-flexbox-align.jpg">
+<meta property="og:image" content="https://weex.apache.org/images/style_1.jpg">
+<meta property="og:image" content="https://weex.apache.org/images/style_2.jpg">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.841Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u901a\u7528\u6837\u5f0f">
+<meta name="twitter:description" content="\u901a\u7528\u6837\u5f0f\u6240\u6709 Weex \u7ec4\u4ef6\u90fd\u652f\u6301\u4ee5\u4e0b\u901a\u7528\u6837\u5f0f\u89c4\u5219\u3002
+\u76d2\u6a21\u578b
+Weex \u76d2\u6a21\u578b\u57fa\u4e8e CSS \u76d2\u6a21\u578b\uff0c\u6bcf\u4e2a Weex \u5143\u7d20\u90fd\u53ef\u89c6\u4f5c\u4e00\u4e2a\u76d2\u5b50\u3002\u6211\u4eec\u4e00\u822c\u5728\u8ba8\u8bba\u8bbe\u8ba1\u6216\u5e03\u5c40\u65f6\uff0c\u4f1a\u63d0\u5230\u300c\u76d2\u6a21\u578b\u300d\u8fd9\u4e2a\u6982\u5ff5\u3002
+\u76d2\u6a21\u578b\u63cf\u8ff0\u4e86\u4e00\u4e2a\u5143\u7d20\u6240\u5360\u7528\u7684\u7a7a\u95f4\u3002\u6bcf\u4e00\u4e2a\u76d2\u5b50\u6709\u56db\u6761\u8fb9\u754c\uff1a\u5916\u8fb9\u8ddd\u8fb9\u754c margin edge, \u8fb9\u6846\u8fb9\u754c border edge, \u5185\u8fb9\u8ddd\u8fb9\u754c padding edge \u4e0e\u5185\u5bb9\u8fb9\u754c content edge\u3002">
+<meta name="twitter:image" content="https://weex.apache.org/./images/css-boxmodel.png">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link current ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link current ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u901a\u7528\u6837\u5f0f
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.841Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u901a\u7528\u6837\u5f0f"><a href="#\u901a\u7528\u6837\u5f0f" class="headerlink" title="\u901a\u7528\u6837\u5f0f"></a>\u901a\u7528\u6837\u5f0f</h1><p>\u6240\u6709 Weex \u7ec4\u4ef6\u90fd\u652f\u6301\u4ee5\u4e0b\u901a\u7528\u6837\u5f0f\u89c4\u5219\u3002</p>
+<h2 id="\u76d2\u6a21\u578b"><a href="#\u76d2\u6a21\u578b" class="headerlink" title="\u76d2\u6a21\u578b"></a>\u76d2\u6a21\u578b</h2><p><img src="./images/css-boxmodel.png" alt="box model @300*"></p>
+<p>Weex \u76d2\u6a21\u578b\u57fa\u4e8e <a href="https://www.w3.org/TR/css3-box/" target="_blank" rel="external">CSS \u76d2\u6a21\u578b</a>\uff0c\u6bcf\u4e2a Weex \u5143\u7d20\u90fd\u53ef\u89c6\u4f5c\u4e00\u4e2a\u76d2\u5b50\u3002\u6211\u4eec\u4e00\u822c\u5728\u8ba8\u8bba\u8bbe\u8ba1\u6216\u5e03\u5c40\u65f6\uff0c\u4f1a\u63d0\u5230\u300c\u76d2\u6a21\u578b\u300d\u8fd9\u4e2a\u6982\u5ff5\u3002</p>
+<p>\u76d2\u6a21\u578b\u63cf\u8ff0\u4e86\u4e00\u4e2a\u5143\u7d20\u6240\u5360\u7528\u7684\u7a7a\u95f4\u3002\u6bcf\u4e00\u4e2a\u76d2\u5b50\u6709\u56db\u6761\u8fb9\u754c\uff1a\u5916\u8fb9\u8ddd\u8fb9\u754c margin edge, \u8fb9\u6846\u8fb9\u754c border edge, \u5185\u8fb9\u8ddd\u8fb9\u754c padding edge \u4e0e\u5185\u5bb9\u8fb9\u754c content edge\u3002\u8fd9\u56db\u5c42\u8fb9\u754c\uff0c\u5f62\u6210\u4e00\u5c42\u5c42\u7684\u76d2\u5b50\u5305\u88f9\u8d77\u6765\uff0c\u8fd9\u5c31\u662f\u76d2\u6a21\u578b\u5927\u4f53\u4e0a\u7684\u542b\u4e49\u3002</p>
+<p><strong>\u6ce8\u610f\uff1a</strong><br>Weex \u5bf9\u4e8e\u957f\u5ea6\u503c\u76ee\u524d\u53ea\u652f\u6301<em>\u50cf\u7d20</em>\u503c\uff0c\u4e0d\u652f\u6301\u76f8\u5bf9\u5355\u4f4d\uff08<code>em</code>\u3001<code>rem</code>\uff09\u3002</p>
+<ul>
+<li><code>width {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>height {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><p><code>padding {length}</code>\uff1a\u5185\u8fb9\u8ddd\uff0c\u5185\u5bb9\u548c\u8fb9\u6846\u4e4b\u95f4\u7684\u8ddd\u79bb\u3002\u9ed8\u8ba4\u503c 0</p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><code>padding-left {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>padding-right {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>padding-top {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>padding-bottom {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+</ul>
+</li>
+<li><p><code>margin</code>\uff1a</p>
+<p>\u5916\u8fb9\u8ddd\uff0c\u5143\u7d20\u548c\u5143\u7d20\u4e4b\u95f4\u7684\u7a7a\u767d\u8ddd\u79bb\u3002\u503c\u7c7b\u578b\u4e3a length\uff0c\u9ed8\u8ba4\u503c 0</p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><code>margin-left {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>margin-right {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>margin-top {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+<li><code>margin-bottom {length}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c 0</li>
+</ul>
+</li>
+<li><p>border\uff1a</p>
+<p>\u8bbe\u5b9a\u8fb9\u6846\uff0c<code>border</code> \u76ee\u524d\u4e0d\u652f\u6301\u7c7b\u4f3c\u8fd9\u6837 <code>border: 1 solid #ff0000;</code> \u7684\u7ec4\u5408\u5199\u6cd5\u3002</p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><p><code>border-style</code>\uff1a</p>
+<p>\u8bbe\u5b9a\u8fb9\u6846\u6837\u5f0f\uff0c\u503c\u7c7b\u578b\u4e3a string\uff0c\u53ef\u9009\u503c\u4e3a <code>solid</code> | <code>dashed</code> | <code>dotted</code>\uff0c\u9ed8\u8ba4\u503c <code>solid</code></p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><code>border-left-style {string}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>solid</code> | <code>dashed</code> | <code>dotted</code>\uff0c\u9ed8\u8ba4\u503c <code>solid</code></li>
+<li><code>border-top-style {string}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>solid</code> | <code>dashed</code> | <code>dotted</code>\uff0c\u9ed8\u8ba4\u503c <code>solid</code></li>
+<li><code>border-right-style {string}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>solid</code> | <code>dashed</code> | <code>dotted</code>\uff0c\u9ed8\u8ba4\u503c <code>solid</code></li>
+<li><code>border-bottom-style {string}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>solid</code> | <code>dashed</code> | <code>dotted</code>\uff0c\u9ed8\u8ba4\u503c <code>solid</code></li>
+</ul>
+</li>
+<li><p><code>border-width {length}</code>\uff1a</p>
+<p>\u8bbe\u5b9a\u8fb9\u6846\u5bbd\u5ea6\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><code>border-left-width {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+<li><code>border-top-width {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+<li><code>border-right-width {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+<li><code>border-bottom-width {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+</ul>
+</li>
+<li><p><code>border-color {color}</code>\uff1a</p>
+<p>\u8bbe\u5b9a\u8fb9\u6846\u989c\u8272\uff0c\u9ed8\u8ba4\u503c <code>#000000</code></p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><code>border-left-color {color}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c <code>#000000</code></li>
+<li><code>border-top-color {color}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c <code>#000000</code></li>
+<li><code>border-right-color {color}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c <code>#000000</code></li>
+<li><code>border-bottom-color {color}</code>\uff1a\uff0c\u9ed8\u8ba4\u503c <code>#000000</code></li>
+</ul>
+</li>
+<li><p><code>border-radius {length}</code>\uff1a</p>
+<p>\u8bbe\u5b9a\u5706\u89d2\uff0c\u9ed8\u8ba4\u503c 0</p>
+<p>\u53ef\u6709\u5982\u4e0b\u5199\u6cd5\uff1a</p>
+<ul>
+<li><code>border-bottom-left-radius {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+<li><code>border-bottom-right-radius {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+<li><code>border-top-left-radius {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+<li><code>border-top-right-radius {length}</code>\uff1a\uff0c\u975e\u8d1f\u503c, \u9ed8\u8ba4\u503c 0</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+<p>\u6ce8\u610f\uff1a\u76ee\u524d\u5728 <code><image></code> \u548c <code><text></code> \u7ec4\u4ef6\u4e0a\u5c1a\u65e0\u6cd5\u53ea\u5b9a\u4e49\u4e00\u4e2a\u6216\u51e0\u4e2a\u89d2\u7684 <code>border-radius</code>\u3002\u6bd4\u5982\u4f60\u65e0\u6cd5\u5728\u8fd9\u4e24\u4e2a\u7ec4\u4ef6\u4e0a\u4f7f\u7528 <code>border-top-left-radius</code>\u3002</p>
+<p>Weex \u76d2\u6a21\u578b\u7684 <code>box-sizing</code> \u9ed8\u8ba4\u4e3a <code>border-box</code>\uff0c\u5373\u76d2\u5b50\u7684\u5bbd\u9ad8\u5305\u542b\u5185\u5bb9\u3001\u5185\u8fb9\u8ddd\u548c\u8fb9\u6846\u7684\u5bbd\u5ea6\uff0c\u4e0d\u5305\u542b\u5916\u8fb9\u8ddd\u7684\u5bbd\u5ea6\u3002</p>
+<h3 id="\u793a\u4f8b\uff1a"><a href="#\u793a\u4f8b\uff1a" class="headerlink" title="\u793a\u4f8b\uff1a"></a>\u793a\u4f8b\uff1a</h3><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">style</span>=<span class="string">"width: 400px; height: 200px; margin-left: 20px;"</span> <span class="attr">src</span>=<span class="string">"https://g.alicdn.com/mtb/lab-zikuan/0.0.18/weex/weex_logo_blue@3x.png"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure>
+<h2 id="Flexbox"><a href="#Flexbox" class="headerlink" title="Flexbox"></a>Flexbox</h2><p>Weex \u5e03\u5c40\u6a21\u578b\u57fa\u4e8e CSS <a href="http://www.w3.org/TR/css3-flexbox/" target="_blank" rel="external"><code>Flexbox</code></a>\uff0c\u4ee5\u4fbf\u6240\u6709\u9875\u9762\u5143\u7d20\u7684\u6392\u7248\u80fd\u591f\u4e00\u81f4\u53ef\u9884\u6d4b\uff0c\u540c\u65f6\u9875\u9762\u5e03\u5c40\u80fd\u9002\u5e94\u5404\u79cd\u8bbe\u5907\u6216\u8005\u5c4f\u5e55\u5c3a\u5bf8\u3002</p>
+<p>Flexbox \u5305\u542b flex \u5bb9\u5668\u548c flex \u6210\u5458\u9879\u3002\u5982\u679c\u4e00\u4e2a Weex \u5143\u7d20\u53ef\u4ee5\u5bb9\u7eb3\u5176\u4ed6\u5143\u7d20\uff0c\u90a3\u4e48\u5b83\u5c31\u6210\u4e3a flex \u5bb9\u5668\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0cflexbox \u7684\u8001\u7248\u89c4\u8303\u76f8\u8f83\u65b0\u7248\u6709\u4e9b\u51fa\u5165\uff0c\u6bd4\u5982\u662f\u5426\u80fd\u652f\u6301 wrapping\u3002\u8fd9\u4e9b\u90fd\u63cf\u8ff0\u5728 W3C \u7684\u5de5\u4f5c\u8349\u6848\u4e2d\u4e86\uff0c\u4f60\u9700\u8981\u6ce8\u610f\u4e0b\u65b0\u8001\u7248\u672c\u4e4b\u95f4\u7684\u4e0d\u540c\u3002\u53e6\u5916\uff0c\u8001\u7248\u672c\u53ea\u5728\u5b89\u5353 4.4 \u7248\u4ee5\u4e0b\u5f97\u5230\u652f\u6301\u3002</p>
+<h3 id="Flex-\u5bb9\u5668"><a href="#Flex-\u5bb9\u5668" class="headerlink" title="Flex \u5bb9\u5668"></a>Flex \u5bb9\u5668</h3><p>\u5728 Weex \u4e2d\uff0cFlexbox \u662f\u9ed8\u8ba4\u4e14\u552f\u4e00\u7684\u5e03\u5c40\u6a21\u578b\uff0c\u6240\u4ee5\u4f60\u4e0d\u9700\u8981\u624b\u52a8\u4e3a\u5143\u7d20\u6dfb\u52a0 <code>display: flex;</code> \u5c5e\u6027\u3002</p>
+<ul>
+<li><p><code>flex-direction</code>\uff1a</p>
+<p>\u5b9a\u4e49\u4e86 flex \u5bb9\u5668\u4e2d flex \u6210\u5458\u9879\u7684\u6392\u5217\u65b9\u5411\u3002\u53ef\u9009\u503c\u4e3a <code>row</code> | <code>column</code>\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>column</code></p>
+<ul>
+<li><code>column</code>\uff1a\u4ece\u4e0a\u5230\u4e0b\u6392\u5217\u3002</li>
+<li><code>row</code>\uff1a\u4ece\u5de6\u5230\u53f3\u6392\u5217\u3002</li>
+</ul>
+</li>
+<li><p><code>justify-content</code>\uff1a</p>
+<p>\u5b9a\u4e49\u4e86 flex \u5bb9\u5668\u4e2d flex \u6210\u5458\u9879\u5728\u4e3b\u8f74\u65b9\u5411\u4e0a\u5982\u4f55\u6392\u5217\u4ee5\u5904\u7406\u7a7a\u767d\u90e8\u5206\u3002\u53ef\u9009\u503c\u4e3a <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code>\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>flex-start</code>\u3002</p>
+<ul>
+<li><code>flex-start</code>\uff1a\u662f\u9ed8\u8ba4\u503c\uff0c\u6240\u6709\u7684 flex \u6210\u5458\u9879\u90fd\u6392\u5217\u5728\u5bb9\u5668\u7684\u524d\u90e8\uff1b</li>
+<li><code>flex-end</code>\uff1a\u5219\u610f\u5473\u7740\u6210\u5458\u9879\u6392\u5217\u5728\u5bb9\u5668\u7684\u540e\u90e8\uff1b</li>
+<li><code>center</code>\uff1a\u5373\u4e2d\u95f4\u5bf9\u9f50\uff0c\u6210\u5458\u9879\u6392\u5217\u5728\u5bb9\u5668\u4e2d\u95f4\u3001\u4e24\u8fb9\u7559\u767d\uff1b</li>
+<li><code>space-between</code>\uff1a\u8868\u793a\u4e24\u7aef\u5bf9\u9f50\uff0c\u7a7a\u767d\u5747\u5300\u5730\u586b\u5145\u5230 flex \u6210\u5458\u9879\u4e4b\u95f4\u3002</li>
+</ul>
+<p><img src="./images/css-flexbox-justify.svg" alt="justify-content @400*"></p>
+</li>
+<li><p><code>align-items</code>\uff1a</p>
+<p>\u5b9a\u4e49\u4e86 flex \u5bb9\u5668\u4e2d flex \u6210\u5458\u9879\u5728\u7eb5\u8f74\u65b9\u5411\u4e0a\u5982\u4f55\u6392\u5217\u4ee5\u5904\u7406\u7a7a\u767d\u90e8\u5206\u3002\u53ef\u9009\u503c\u4e3a <code>stretch</code> | <code>flex-start</code> | <code>center</code> | <code>flex-end</code>\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>stretch</code>\u3002</p>
+<ul>
+<li><code>stretch</code> \u662f\u9ed8\u8ba4\u503c\uff0c\u5373\u62c9\u4f38\u9ad8\u5ea6\u81f3 flex \u5bb9\u5668\u7684\u5927\u5c0f\uff1b</li>
+<li><code>flex-start</code> \u5219\u662f\u4e0a\u5bf9\u9f50\uff0c\u6240\u6709\u7684\u6210\u5458\u9879\u6392\u5217\u5728\u5bb9\u5668\u9876\u90e8\uff1b</li>
+<li><code>flex-end</code> \u662f\u4e0b\u5bf9\u9f50\uff0c\u6240\u6709\u7684\u6210\u5458\u9879\u6392\u5217\u5728\u5bb9\u5668\u5e95\u90e8\uff1b</li>
+<li><code>center</code> \u662f\u4e2d\u95f4\u5bf9\u9f50\uff0c\u6240\u6709\u6210\u5458\u9879\u90fd\u5782\u76f4\u5730\u5c45\u4e2d\u663e\u793a\u3002</li>
+</ul>
+<p><img src="./images/css-flexbox-align.jpg" alt="align-items @400*"></p>
+</li>
+</ul>
+<h3 id="Flex-\u6210\u5458\u9879"><a href="#Flex-\u6210\u5458\u9879" class="headerlink" title="Flex \u6210\u5458\u9879"></a>Flex \u6210\u5458\u9879</h3><p>flex \u5c5e\u6027\u5b9a\u4e49\u4e86 flex \u6210\u5458\u9879\u53ef\u4ee5\u5360\u7528\u5bb9\u5668\u4e2d\u5269\u4f59\u7a7a\u95f4\u7684\u5927\u5c0f\u3002\u5982\u679c\u6240\u6709\u7684\u6210\u5458\u9879\u8bbe\u7f6e\u76f8\u540c\u7684\u503c <code>flex: 1</code>\uff0c\u5b83\u4eec\u5c06\u5e73\u5747\u5206\u914d\u5269\u4f59\u7a7a\u95f4. \u5982\u679c\u4e00\u4e2a\u6210\u5458\u9879\u8bbe\u7f6e\u7684\u503c\u4e3a <code>flex: 2</code>\uff0c\u5176\u5b83\u7684\u6210\u5458\u9879\u8bbe\u7f6e\u7684\u503c\u4e3a <code>flex: 1</code>\uff0c\u90a3\u4e48\u8fd9\u4e2a\u6210\u5458\u9879\u6240\u5360\u7528\u7684\u5269\u4f59\u7a7a\u95f4\u662f\u5176\u5b83\u6210\u5458\u9879\u76842\u500d\u3002</p>
+<ul>
+<li><code>flex {number}</code>\uff1a\u503c\u4e3a number \u7c7b\u578b\u3002</li>
+</ul>
+<h3 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h3><p>\u4e00\u4e2a\u7b80\u5355\u7684\u7f51\u683c\u5e03\u5c40\u3002</p>
+<p><img src="images/style_1.jpg" alt="mobile_preview"></p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(v, i) in list"</span> <span class="attr">class</span>=<span class="string">"row"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(text, k) in v"</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{text}}<span class="tag"></<span class="name">text</span>></span></div><d
iv class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.item</span>{</div><div class="line"> <span class="attribute">flex</span>:<span class="number">1</span>;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">align-items</span>:center;</div><div class="line"> <span class="attribute">border-width</span>
:<span class="number">1</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.row</span>{</div><div class="line"> <span class="attribute">flex-direction</span>: row;</div><div class="line"> <span class="attribute">height</span>:<span class="number">80px</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">list</span>:[</div><div class="line"> [<span class="string">'A'</s
pan>, <span class="string">'B'</span>, <span class="string">'C'</span>],</div><div class="line"> [<span class="string">'D'</span>, <span class="string">'E'</span>, <span class="string">'F'</span>],</div><div class="line"> [<span class="string">'G'</span>, <span class="string">'H'</span>, <span class="string">'I'</span>]</div><div class="line"> ]</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p>\u4e00\u4e2a\u5728\u76f8\u5bf9\u4e8e\u5c4f\u5e55\u6c34\u5e73\u5c45\u4e2d\uff0c\u5168\u5c4f\u5c45\u4e2d\u7684 <code><div></code>\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> {</div><div clas
s="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#cccccc</span>;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">align-items</span>: center;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.box</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</div><div class="line"> <span class="attribute">height</span>: <span
class="number">200px</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#fc0000</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<h2 id="\u5b9a\u4f4d"><a href="#\u5b9a\u4f4d" class="headerlink" title="\u5b9a\u4f4d"></a>\u5b9a\u4f4d</h2><p>Weex \u652f\u6301 <code>position</code> \u5b9a\u4f4d\uff0c\u7528\u6cd5\u4e0e CSS position \u7c7b\u4f3c\u3002\u4e3a\u5143\u7d20\u8bbe\u7f6e <code>position</code> \u540e\uff0c\u53ef\u901a\u8fc7 <code>top</code>\u3001<code>right</code>\u3001<code>bottom</code>\u3001<code>left</code> \u56db\u4e2a\u5c5e\u6027\u8bbe\u7f6e\u5143\u7d20\u5750\u6807\u3002</p>
+<ul>
+<li><p><code>position {string}</code>\uff1a</p>
+<p>\u8bbe\u7f6e\u5b9a\u4f4d\u7c7b\u578b\u3002\u53ef\u9009\u503c\u4e3a <code>relative</code> | <code>absolute</code> | <code>fixed</code> | <code>sticky</code>\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>relative</code>\u3002</p>
+<ul>
+<li><code>relative</code> \u662f\u9ed8\u8ba4\u503c\uff0c\u6307\u7684\u662f\u76f8\u5bf9\u5b9a\u4f4d\uff1b</li>
+<li><code>absolute</code> \u662f\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u4ee5\u5143\u7d20\u7684\u5bb9\u5668\u4f5c\u4e3a\u53c2\u8003\u7cfb\uff1b</li>
+<li><code>fixed</code> \u4fdd\u8bc1\u5143\u7d20\u5728\u9875\u9762\u7a97\u53e3\u4e2d\u7684\u5bf9\u5e94\u4f4d\u7f6e\u663e\u793a\uff1b</li>
+<li><code>sticky</code> \u6307\u7684\u662f\u4ec5\u5f53\u5143\u7d20\u6eda\u52a8\u5230\u9875\u9762\u4e4b\u5916\u65f6\uff0c\u5143\u7d20\u4f1a\u56fa\u5b9a\u5728\u9875\u9762\u7a97\u53e3\u7684\u9876\u90e8\u3002</li>
+</ul>
+</li>
+<li><code>top {number}</code>\uff1a\u8ddd\u79bb\u4e0a\u65b9\u7684\u504f\u79fb\u91cf\uff0c\u9ed8\u8ba4\u4e3a 0\u3002</li>
+<li><code>bottom {number}</code>\uff1a\u8ddd\u79bb\u4e0b\u65b9\u7684\u504f\u79fb\u91cf\uff0c\u9ed8\u8ba4\u4e3a 0\u3002</li>
+<li><code>left {number}</code>\uff1a\u8ddd\u79bb\u5de6\u65b9\u7684\u504f\u79fb\u91cf\uff0c\u9ed8\u8ba4\u4e3a 0\u3002</li>
+<li><code>right {number}</code>\uff1a\u8ddd\u79bb\u53f3\u65b9\u7684\u504f\u79fb\u91cf\uff0c\u9ed8\u8ba4\u4e3a 0\u3002</li>
+</ul>
+<p><strong>\u6ce8\u610f\uff1a</strong></p>
+<ol>
+<li>Weex \u76ee\u524d\u4e0d\u652f\u6301 <code>z-index</code> \u8bbe\u7f6e\u5143\u7d20\u5c42\u7ea7\u5173\u7cfb\uff0c\u4f46\u9760\u540e\u7684\u5143\u7d20\u5c42\u7ea7\u66f4\u9ad8\uff0c\u56e0\u6b64\uff0c\u5bf9\u4e8e\u5c42\u7ea7\u9ad8\u7684\u5143\u7d20\uff0c\u53ef\u5c06\u5176\u6392\u5217\u5728\u540e\u9762\u3002</li>
+<li>\u5982\u679c\u5b9a\u4f4d\u5143\u7d20\u8d85\u8fc7\u5bb9\u5668\u8fb9\u754c\uff0c\u5728 Android \u4e0b\uff0c\u8d85\u51fa\u90e8\u5206\u5c06<strong>\u4e0d\u53ef\u89c1</strong>\uff0c\u539f\u56e0\u5728\u4e8e Android \u7aef\u5143\u7d20 <code>overflow</code> \u9ed8\u8ba4\u503c\u4e3a <code>hidden</code>\uff0c\u4f46\u76ee\u524d Android \u6682\u4e0d\u652f\u6301\u8bbe\u7f6e <code>overflow: visible</code>\u3002 </li>
+</ol>
+<h3 id="\u793a\u4f8b-1"><a href="#\u793a\u4f8b-1" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h3><p><img src="images/style_2.jpg" alt="mobile_preview"></p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span> <span class="attr">scoped</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box box1"</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box box2"</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box box3"</span>>
;</span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> {</div><div class="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</div><div class="line"> <span class="at
tribute">background-color</span>: <span class="number">#cccccc</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.box</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">400px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">400px</span>;</div><div class="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.box1</span> {</div><div class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#ff0000</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.box2</span> {</div><div class="line"> <
span class="attribute">top</span>: <span class="number">150px</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">150px</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#0055dd</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.box3</span> {</div><div class="line"> <span class="attribute">top</span>: <span class="number">300px</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">300px</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#00ff49</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<h2 id="\u5176\u4ed6\u57fa\u672c\u6837\u5f0f"><a href="#\u5176\u4ed6\u57fa\u672c\u6837\u5f0f" class="headerlink" title="\u5176\u4ed6\u57fa\u672c\u6837\u5f0f"></a>\u5176\u4ed6\u57fa\u672c\u6837\u5f0f</h2><ul>
+<li><code>opacity {number}</code>\uff1a\u53d6\u503c\u8303\u56f4\u4e3a [0, 1] \u533a\u95f4\u3002\u9ed8\u8ba4\u503c\u662f 1\uff0c\u5373\u5b8c\u5168\u4e0d\u900f\u660e\uff1b0 \u662f\u5b8c\u5168\u900f\u660e\uff1b0.5 \u662f 50% \u7684\u900f\u660e\u5ea6\u3002</li>
+<li><code>background-color {color}</code>\uff1a\u8bbe\u5b9a\u5143\u7d20\u7684\u80cc\u666f\u8272\uff0c\u53ef\u9009\u503c\u4e3a\u8272\u503c\uff0c\u652f\u6301RGB\uff08 <code>rgb(255, 0, 0)</code> \uff09\uff1bRGBA\uff08 <code>rgba(255, 0, 0, 0.5)</code> \uff09\uff1b\u5341\u516d\u8fdb\u5236\uff08 <code>#ff0000</code> \uff09\uff1b\u7cbe\u7b80\u5199\u6cd5\u7684\u5341\u516d\u8fdb\u5236\uff08 <code>#f00</code> \uff09\uff1b\u8272\u503c\u5173\u952e\u5b57\uff08<code>red</code>\uff09\uff0c\u9ed8\u8ba4\u503c\u662f <code>transparent</code> \u3002</li>
+</ul>
+<p><strong>\u6ce8\u610f\uff1a</strong> <a href="./color-names.html">\u8272\u503c\u7684\u5173\u952e\u5b57\u5217\u8868</a>\u3002</p>
+<h2 id="\u4e0a\u624b\u6837\u5f0f"><a href="#\u4e0a\u624b\u6837\u5f0f" class="headerlink" title="\u4e0a\u624b\u6837\u5f0f"></a>\u4e0a\u624b\u6837\u5f0f</h2><p>\u5982\u679c\u5bf9\u4e8e\u6837\u5f0f\u5199\u6cd5\u9700\u8981\u66f4\u591a\u4e0a\u624b\u53c2\u8003\uff0c\u53ef\u53c2\u8003\u6bcf\u4e2a\u7ec4\u4ef6\u7684\u6587\u6863\u4e2d\uff0c\u90fd\u6709\u5e38\u89c1\u7684\u4f8b\u5b50\u53ef\u4f9b\u53c2\u8003\u3002</p>
+<p>\u4f60\u53ef\u4ee5\u6309\u7167\u4ee5\u4e0b\u6b65\u9aa4\u6765\u89c4\u5212 Weex \u9875\u9762\u7684\u6837\u5f0f\u3002</p>
+<ol>
+<li>\u5168\u5c40\u6837\u5f0f\u89c4\u5212\uff1a\u5c06\u6574\u4e2a\u9875\u9762\u5206\u5272\u6210\u5408\u9002\u7684\u6a21\u5757\u3002</li>
+<li>flex \u5e03\u5c40\uff1a\u6392\u5217\u548c\u5bf9\u9f50\u9875\u9762\u6a21\u5757\u3002</li>
+<li>\u5b9a\u4f4d\u76d2\u5b50\uff1a\u5b9a\u4f4d\u5e76\u8bbe\u7f6e\u504f\u79fb\u91cf\u3002</li>
+<li>\u7ec6\u8282\u6837\u5f0f\u5904\u7406\uff1a\u589e\u52a0\u7279\u5b9a\u7684\u5177\u4f53\u6837\u5f0f\u3002</li>
+</ol>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/common-style.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/common-style.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[34/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/loading.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/loading.html b/content/cn/references/components/loading.html
new file mode 100644
index 0000000..ac55de1
--- /dev/null
+++ b/content/cn/references/components/loading.html
@@ -0,0 +1,1351 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><loading> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;loading&gt;v0.6.1+
+&lt;loading&gt; \u4e3a &lt;scroller&gt; \u548c &lt;list&gt; \u63d0\u4f9b\u4e0a\u62c9\u52a0\u8f7d\u529f\u80fd\u3002\u7528\u6cd5\u4e0e\u7279\u6027\u4e0e &lt;refresh&gt; \u7c7b\u4f3c\uff0c \u662f &lt;scroller&gt; \u548c &lt;list&gt; \u7684\u5b50\u7ec4\u4ef6\uff0c\u4e14\u53ea\u80fd\u5728\u88ab &lt;scroller&gt; \u548c &lt;list&gt; \u5305\u542b\u65f6\u624d\u80fd\u88ab\u6b63\u786e\u7684\u6e32\u67d3\u3002
+\u5b50">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<loading>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/loading.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;loading&gt;v0.6.1+
+&lt;loading&gt; \u4e3a &lt;scroller&gt; \u548c &lt;list&gt; \u63d0\u4f9b\u4e0a\u62c9\u52a0\u8f7d\u529f\u80fd\u3002\u7528\u6cd5\u4e0e\u7279\u6027\u4e0e &lt;refresh&gt; \u7c7b\u4f3c\uff0c \u662f &lt;scroller&gt; \u548c &lt;list&gt; \u7684\u5b50\u7ec4\u4ef6\uff0c\u4e14\u53ea\u80fd\u5728\u88ab &lt;scroller&gt; \u548c &lt;list&gt; \u5305\u542b\u65f6\u624d\u80fd\u88ab\u6b63\u786e\u7684\u6e32\u67d3\u3002
+\u5b50">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.848Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<loading>">
+<meta name="twitter:description" content="&lt;loading&gt;v0.6.1+
+&lt;loading&gt; \u4e3a &lt;scroller&gt; \u548c &lt;list&gt; \u63d0\u4f9b\u4e0a\u62c9\u52a0\u8f7d\u529f\u80fd\u3002\u7528\u6cd5\u4e0e\u7279\u6027\u4e0e &lt;refresh&gt; \u7c7b\u4f3c\uff0c \u662f &lt;scroller&gt; \u548c &lt;list&gt; \u7684\u5b50\u7ec4\u4ef6\uff0c\u4e14\u53ea\u80fd\u5728\u88ab &lt;scroller&gt; \u548c &lt;list&gt; \u5305\u542b\u65f6\u624d\u80fd\u88ab\u6b63\u786e\u7684\u6e32\u67d3\u3002
+\u5b50">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link current "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link current "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <loading>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.848Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-loading-gt"><a href="#lt-loading-gt" class="headerlink" title="<loading>"></a><loading></h1><p><span class="weex-version">v0.6.1+</span></p>
+<p><code><loading></code> \u4e3a <code><scroller></code> \u548c <code><list></code> \u63d0\u4f9b\u4e0a\u62c9\u52a0\u8f7d\u529f\u80fd\u3002\u7528\u6cd5\u4e0e\u7279\u6027\u4e0e <code><refresh></code> \u7c7b\u4f3c\uff0c \u662f <code><scroller></code> \u548c <code><list></code> \u7684\u5b50\u7ec4\u4ef6\uff0c\u4e14\u53ea\u80fd\u5728\u88ab <code><scroller></code> \u548c <code><list></code> \u5305\u542b\u65f6\u624d\u80fd\u88ab\u6b63\u786e\u7684\u6e32\u67d3\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><ul>
+<li><a href="./text.html"><code><text></code></a></li>
+<li><a href="./image.html"><code><image></code></a></li>
+<li><code><loading-indicator></code>: <code><refresh></code> \u548c <code><loading></code> \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\uff0c\u62e5\u6709\u9ed8\u8ba4\u7684\u52a8\u753b\u6548\u679c\u7684\u5b9e\u73b0\u3002</li>
+</ul>
+<h2 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h2><ul>
+<li><code>display {string}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>show</code> \u6216\u8005 <code>hide</code>\uff0c\u4ec5\u9690\u85cf <code><indicator></code>\uff0c<code><loading></code> \u5176\u4ed6\u5b50\u7ec4\u4ef6\u4f9d\u7136\u53ef\u89c1\uff0c<code>loading</code> \u4e8b\u4ef6\u4ecd\u4f1a\u88ab\u89e6\u53d1\u3002</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><p>\u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f\u3002</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><ul>
+<li><code>loading</code>\uff1a\u52a0\u8f7d\u65f6\u88ab\u89e6\u53d1\u3002</li>
+</ul>
+<h2 id="\u7ea6\u675f"><a href="#\u7ea6\u675f" class="headerlink" title="\u7ea6\u675f"></a>\u7ea6\u675f</h2><ul>
+<li><code><loading></code> \u4e0d\u652f\u6301 <code>remove</code>\uff0cv0.9 \u7248\u672c\u4f1a\u4fee\u590d\u3002</li>
+<li><p><code>display</code> \u503c\u4e3a <code>show</code> \u6216 <code>hide</code>\u3002\u4ec5\u9690\u85cf <code><indicator></code>\uff0c<code><loading></code> \u5176\u4ed6\u5b50\u7ec4\u4ef6\u4f9d\u7136\u53ef\u89c1\uff0c<code>loading</code> \u4e8b\u4ef6\u4ecd\u4f1a\u88ab\u89e6\u53d1\u3002</p>
+<p>\u5982\u679c\u9700\u8981 <code><loading></code> hide \u65f6\u9690\u85cf\u6587\u6848\u5e76\u4e0d\u518d\u89e6\u53d1\u4e8b\u4ef6\uff0c\u6709\u4e24\u79cd\u89e3\u51b3\u65b9\u6cd5\uff1a</p>
+<ol>
+<li>\u4fee\u6539\u63d0\u793a\u6587\u6848\uff0c\u5e76\u5728 <code>loading</code> \u4e8b\u4ef6\u4e2d\u6dfb\u52a0\u5224\u65ad\u903b\u8f91\uff1b</li>
+<li>v0.9+ \u53ef\u901a\u8fc7 <code>remove</code> \u89e3\u51b3\u3002</li>
+</ol>
+</li>
+<li><p>\u53ea\u80fd\u901a\u8fc7 <code>display</code> \u7279\u6027\u8fdb\u884c\u5c55\u793a\u548c\u9690\u85cf\uff0c\u4e14\u5fc5\u987b\u6210\u5bf9\u51fa\u73b0\uff0c\u5373\u8bbe\u7f6e <code>display="show"</code>,\u5fc5\u987b\u6709\u5bf9\u5e94\u7684 <code>display="hide"</code>\u3002</p>
+</li>
+</ul>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">scroller</span> <span class="attr">class</span>=<span class="string">"scroller"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"cell"</span> <span class="attr">v-for</span>=<span class="string">"num in lists"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span>></span>{{num}}<span class="tag">&l
t;/<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">loading</span> <span class="attr">class</span>=<span class="string">"loading"</span> @<span class="attr">loading</span>=<span class="string">"onloading"</span> <span class="attr">:display</span>=<span class="string">"showLoading"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"indicator"</span>></span>Loading ...<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">loading</span>></span></div><div class="line"> <span class="tag"></<span class="name">scroller</span>></span></div><div class="line">
<span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"> <span class="keyword">const</span> LOADMORE_COUNT = <span class="number">4</span></div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">showLoading</span>: <span class="string">'hide'</span>,</div><div class="line"> <span class="attr">lists</span>: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="n
umber">5</span>]</div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> onloading (event) {</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'loading'</span>, <span class="attr">duration</span>: <span class="number">1</span> })</div><div class="line"> <span class="keyword">this</span>.showLoading = <span class="string">'show'</span></div><div class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</div><div class="line"> <span class="keyword">const</span> length = <span class="keyword">this</span>.lists.length</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = length; i < length + LOADMORE_COUNT; ++i) {</div><div class="line"> <span class="keyword">this</span>.lists.pus
h(i + <span class="number">1</span>)</div><div class="line"> }</div><div class="line"> <span class="keyword">this</span>.showLoading = <span class="string">'hide'</span></div><div class="line"> }, <span class="number">1500</span>)</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.panel</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">600px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">7
5px</span>;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">35px</span>;</div><div class="line"> <span class="attribute">margin-bottom</span>: <span class="number">35px</span>;</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#DDDDDD</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#F5F5F5</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">50px</s
pan>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.loading</span> {</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.indicator</span> {</div><div class="line"> <span class="attribute">color</span>: <span class="number">#888888</span>;</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">42px</span>;</div><div class="line"> <span class="attribute">padding-top</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">padding-bottom</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div cl
ass="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/loading.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/loading.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/refresh.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/refresh.html b/content/cn/references/components/refresh.html
new file mode 100644
index 0000000..ec65c0a
--- /dev/null
+++ b/content/cn/references/components/refresh.html
@@ -0,0 +1,1354 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><refresh> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;refresh&gt;v0.6.1+
+&lt;refresh&gt; \u4e3a &lt;scroller&gt; \u548c &lt;list&gt; \u63d0\u4f9b\u4e0b\u62c9\u52a0\u8f7d\u529f\u80fd\u3002\u7528\u6cd5\u4e0e\u7279\u6027\u4e0e &lt;loading&gt; \u7c7b\u4f3c\uff0c&lt;scroller&gt; \u548c &lt;list&gt; \u7684\u5b50\u7ec4\u4ef6\uff0c\u4e14\u53ea\u80fd\u5728\u88ab &lt;scroller&gt; \u548c &lt;list&gt; \u5305\u542b\u65f6\u624d\u80fd\u88ab\u6b63\u786e\u7684\u6e32\u67d3\u3002
+\u5b50\u7ec4\u4ef6">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<refresh>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/refresh.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;refresh&gt;v0.6.1+
+&lt;refresh&gt; \u4e3a &lt;scroller&gt; \u548c &lt;list&gt; \u63d0\u4f9b\u4e0b\u62c9\u52a0\u8f7d\u529f\u80fd\u3002\u7528\u6cd5\u4e0e\u7279\u6027\u4e0e &lt;loading&gt; \u7c7b\u4f3c\uff0c&lt;scroller&gt; \u548c &lt;list&gt; \u7684\u5b50\u7ec4\u4ef6\uff0c\u4e14\u53ea\u80fd\u5728\u88ab &lt;scroller&gt; \u548c &lt;list&gt; \u5305\u542b\u65f6\u624d\u80fd\u88ab\u6b63\u786e\u7684\u6e32\u67d3\u3002
+\u5b50\u7ec4\u4ef6">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.849Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<refresh>">
+<meta name="twitter:description" content="&lt;refresh&gt;v0.6.1+
+&lt;refresh&gt; \u4e3a &lt;scroller&gt; \u548c &lt;list&gt; \u63d0\u4f9b\u4e0b\u62c9\u52a0\u8f7d\u529f\u80fd\u3002\u7528\u6cd5\u4e0e\u7279\u6027\u4e0e &lt;loading&gt; \u7c7b\u4f3c\uff0c&lt;scroller&gt; \u548c &lt;list&gt; \u7684\u5b50\u7ec4\u4ef6\uff0c\u4e14\u53ea\u80fd\u5728\u88ab &lt;scroller&gt; \u548c &lt;list&gt; \u5305\u542b\u65f6\u624d\u80fd\u88ab\u6b63\u786e\u7684\u6e32\u67d3\u3002
+\u5b50\u7ec4\u4ef6">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link current "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link current "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <refresh>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.849Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-refresh-gt"><a href="#lt-refresh-gt" class="headerlink" title="<refresh>"></a><refresh></h1><p><span class="weex-version">v0.6.1+</span></p>
+<p><code><refresh></code> \u4e3a <code><scroller></code> \u548c <code><list></code> \u63d0\u4f9b\u4e0b\u62c9\u52a0\u8f7d\u529f\u80fd\u3002\u7528\u6cd5\u4e0e\u7279\u6027\u4e0e <code><loading></code> \u7c7b\u4f3c\uff0c<code><scroller></code> \u548c <code><list></code> \u7684\u5b50\u7ec4\u4ef6\uff0c\u4e14\u53ea\u80fd\u5728\u88ab <code><scroller></code> \u548c <code><list></code> \u5305\u542b\u65f6\u624d\u80fd\u88ab\u6b63\u786e\u7684\u6e32\u67d3\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><ul>
+<li><a href="./text.html"><code><text></code></a></li>
+<li><a href="./image.html"><code><image></code></a></li>
+<li><code><loading-indicator></code>: <code><refresh></code> \u548c <code><loading></code> \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\uff0c\u62e5\u6709\u9ed8\u8ba4\u7684\u52a8\u753b\u6548\u679c\u7684\u5b9e\u73b0\u3002</li>
+</ul>
+<h2 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h2><ul>
+<li><code>display {string}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>show</code> \u6216\u8005 <code>hide</code>\uff0c\u4ec5\u9690\u85cf <code><indicator></code>\uff0c<code><loading></code> \u5176\u4ed6\u5b50\u7ec4\u4ef6\u4f9d\u7136\u53ef\u89c1\uff0c<code><loading></code> \u4e8b\u4ef6\u4ecd\u4f1a\u88ab\u89e6\u53d1\u3002</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><p>\u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f\u3002</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><ul>
+<li><code>refresh</code>\uff1a \u5f53 <code><scroller></code>/<code><list></code> \u88ab\u4e0b\u62c9\u65f6\u89e6\u53d1\u3002</li>
+<li><code>pullingdown</code>\uff1a\u4ec5\u5728 Android \u652f\u6301\u3002\u5f53 <code><scroller></code>/<code><list></code> \u88ab\u4e0b\u62c9\u65f6\u89e6\u53d1\uff0c\u53ef\u4ee5\u4ece\u4e8b\u4ef6\u7684\u53c2\u6570\u5bf9\u8c61\u4e2d\u83b7\u53d6 dy\uff0cheaderHeight\uff0cmaxHeight</li>
+</ul>
+<h2 id="\u7ea6\u675f"><a href="#\u7ea6\u675f" class="headerlink" title="\u7ea6\u675f"></a>\u7ea6\u675f</h2><ul>
+<li><code><refresh></code> \u4e0d\u652f\u6301 <code>remove</code>\uff0cv0.9 \u7248\u672c\u4f1a\u4fee\u590d\u3002</li>
+<li><p><code>display</code> \u503c\u4e3a <code>show</code> \u6216 <code>hide</code>\u3002\u4ec5\u9690\u85cf <code><indicator></code>\uff0c<code><refresh></code> \u5176\u4ed6\u5b50\u7ec4\u4ef6\u4f9d\u7136\u53ef\u89c1\uff0c<code>refresh</code> \u4e8b\u4ef6\u4ecd\u4f1a\u88ab\u89e6\u53d1\u3002</p>
+<p>\u5982\u679c\u9700\u8981 <code><refresh></code> hide \u65f6\u9690\u85cf\u6587\u6848\u5e76\u4e0d\u518d\u89e6\u53d1\u4e8b\u4ef6\uff0c\u6709\u4e24\u79cd\u89e3\u51b3\u65b9\u6cd5\uff1a</p>
+<ol>
+<li>\u4fee\u6539\u63d0\u793a\u6587\u6848\uff0c\u5e76\u5728 <code>refresh</code> \u4e8b\u4ef6\u4e2d\u6dfb\u52a0\u5224\u65ad\u903b\u8f91\uff1b</li>
+<li>v0.9+ \u53ef\u901a\u8fc7 <code>remove</code> \u89e3\u51b3\u3002</li>
+</ol>
+</li>
+<li><p>\u53ea\u80fd\u901a\u8fc7 <code>display</code> \u7279\u6027\u8fdb\u884c\u5c55\u793a\u548c\u9690\u85cf\uff0c\u4e14\u5fc5\u987b\u6210\u5bf9\u51fa\u73b0\uff0c\u5373\u8bbe\u7f6e <code>display="show"</code>,\u5fc5\u987b\u6709\u5bf9\u5e94\u7684 <code>display="hide"</code>\u3002</p>
+</li>
+</ul>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">scroller</span> <span class="attr">class</span>=<span class="string">"scroller"</span>></span></div><div class="line"> <span class="tag"><<span class="name">refresh</span> <span class="attr">class</span>=<span class="string">"refresh"</span> @<span class="attr">refresh</span>=<span class="string">"onrefresh"</span> @<span class="attr">pullingdown</span>=<span class="string">"onpullingdown"</span> <span class="attr">:display</span>=<span class="string">"refreshing ? 'show' : 'hide'"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"indicator"</span>></span>Refreshing ...<span
class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">refresh</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"cell"</span> <span class="attr">v-for</span>=<span class="string">"num in lists"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span>></span>{{num}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div clas
s="line"> <span class="tag"></<span class="name">scroller</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">refreshing</span>: <span class="literal">false</span>,</div><div class="line"> <span class="attr">lists</span>: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number
">5</span>]</div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> onrefresh (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'is refreshing'</span>)</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'refresh'</span>, <span class="attr">duration</span>: <span class="number">1</span> })</div><div class="line"> <span class="keyword">this</span>.refreshing = <span class="literal">true</span></div><div class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</div><div class="line"> <span class="keyword">this</span>.refreshing = <span class="literal">false</span></div><div class="line"> }, <span class="number">2000</span>)</div><div class="line"> },</div><div class="line"
> onpullingdown (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'is onpulling down'</span>)</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'pulling down'</span>, <span class="attr">duration</span>: <span class="number">1</span> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.indicator</span> {</div><div class="line"> <span class="attribute">color</span>: <span class="number">#888888</span>;</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">42p
x</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.panel</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">600px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">75px</span>;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">35px</span>;</div><div class="line"> <span class="attribute">margin-bottom</span>: <span class="number">35px</span>;</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class
="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#DDDDDD</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#F5F5F5</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">50px</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/refresh.html">try it</a></p>
+<p>\u66f4\u591a\u793a\u4f8b\u53ef\u67e5\u770b <a href="./list.html"><code><list></code></a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/refresh.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/refresh.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[30/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/web.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/web.html b/content/cn/references/components/web.html
new file mode 100644
index 0000000..719143f
--- /dev/null
+++ b/content/cn/references/components/web.html
@@ -0,0 +1,1374 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><web> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;web&gt;v0.5+
+\u4f7f\u7528 &lt;web&gt; \u7ec4\u4ef6\u5728 Weex \u9875\u9762\u4e2d\u5d4c\u5165\u4e00\u5f20\u7f51\u9875\u5185\u5bb9\u3002src \u5c5e\u6027\u7528\u6765\u6307\u5b9a\u8d44\u6e90\u5730\u5740\u3002\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528 webview module \u6765\u63a7\u5236 web \u7684\u884c\u4e3a\uff0c\u6bd4\u5982\u524d\u8fdb\u3001\u540e\u9000\u548c\u91cd\u8f7d\u3002\u53ef\u4ee5\u5728\u8fd9\u91cc\u67e5\u770b webview module\u3002
+\u5b50\u7ec4\u4ef6\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+src {string}\uff1a\u6b64\u7279\u6027\u6307\u5b9a\u5d4c\u5165\u7684 web \u9875\u9762 url\u3002
+
+\u6837\u5f0f
+\u901a\u7528\u6837\u5f0f\uff1a\u4e0d\u652f\u6301\u90e8\u5206\u76d2">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<web>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/web.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;web&gt;v0.5+
+\u4f7f\u7528 &lt;web&gt; \u7ec4\u4ef6\u5728 Weex \u9875\u9762\u4e2d\u5d4c\u5165\u4e00\u5f20\u7f51\u9875\u5185\u5bb9\u3002src \u5c5e\u6027\u7528\u6765\u6307\u5b9a\u8d44\u6e90\u5730\u5740\u3002\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528 webview module \u6765\u63a7\u5236 web \u7684\u884c\u4e3a\uff0c\u6bd4\u5982\u524d\u8fdb\u3001\u540e\u9000\u548c\u91cd\u8f7d\u3002\u53ef\u4ee5\u5728\u8fd9\u91cc\u67e5\u770b webview module\u3002
+\u5b50\u7ec4\u4ef6\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+src {string}\uff1a\u6b64\u7279\u6027\u6307\u5b9a\u5d4c\u5165\u7684 web \u9875\u9762 url\u3002
+
+\u6837\u5f0f
+\u901a\u7528\u6837\u5f0f\uff1a\u4e0d\u652f\u6301\u90e8\u5206\u76d2">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.854Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<web>">
+<meta name="twitter:description" content="&lt;web&gt;v0.5+
+\u4f7f\u7528 &lt;web&gt; \u7ec4\u4ef6\u5728 Weex \u9875\u9762\u4e2d\u5d4c\u5165\u4e00\u5f20\u7f51\u9875\u5185\u5bb9\u3002src \u5c5e\u6027\u7528\u6765\u6307\u5b9a\u8d44\u6e90\u5730\u5740\u3002\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528 webview module \u6765\u63a7\u5236 web \u7684\u884c\u4e3a\uff0c\u6bd4\u5982\u524d\u8fdb\u3001\u540e\u9000\u548c\u91cd\u8f7d\u3002\u53ef\u4ee5\u5728\u8fd9\u91cc\u67e5\u770b webview module\u3002
+\u5b50\u7ec4\u4ef6\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+src {string}\uff1a\u6b64\u7279\u6027\u6307\u5b9a\u5d4c\u5165\u7684 web \u9875\u9762 url\u3002
+
+\u6837\u5f0f
+\u901a\u7528\u6837\u5f0f\uff1a\u4e0d\u652f\u6301\u90e8\u5206\u76d2">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link current "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link current "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <web>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.854Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-web-gt"><a href="#lt-web-gt" class="headerlink" title="<web>"></a><web></h1><p><span class="weex-version">v0.5+</span></p>
+<p>\u4f7f\u7528 <code><web></code> \u7ec4\u4ef6\u5728 Weex \u9875\u9762\u4e2d\u5d4c\u5165\u4e00\u5f20\u7f51\u9875\u5185\u5bb9\u3002<code>src</code> \u5c5e\u6027\u7528\u6765\u6307\u5b9a\u8d44\u6e90\u5730\u5740\u3002\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528 <code>webview module</code> \u6765\u63a7\u5236 <code>web</code> \u7684\u884c\u4e3a\uff0c\u6bd4\u5982\u524d\u8fdb\u3001\u540e\u9000\u548c\u91cd\u8f7d\u3002\u53ef\u4ee5\u5728\u8fd9\u91cc\u67e5\u770b <a href="../modules/webview.html"><code>webview</code> module</a>\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p>\u4e0d\u652f\u6301\u5b50\u7ec4\u4ef6\u3002</p>
+<h2 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h2><ul>
+<li><code>src {string}</code>\uff1a\u6b64\u7279\u6027\u6307\u5b9a\u5d4c\u5165\u7684 web \u9875\u9762 url\u3002</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><ul>
+<li><p>\u901a\u7528\u6837\u5f0f\uff1a\u4e0d\u652f\u6301\u90e8\u5206\u76d2\u6a21\u578b\u6837\u5f0f\uff0c\u652f\u6301\u5217\u8868\u5982\u4e0b\uff1a</p>
+<ul>
+<li><p><code>width</code></p>
+<p>\u7ec4\u4ef6\u7684\u5bbd\u5ea6\uff0c\u9ed8\u8ba4\u503c\u662f0\u3002\u8fd9\u4e2a\u6837\u5f0f\u5b9a\u4e49\u5fc5\u987b\u6307\u5b9a\u6570\u503c\u3002</p>
+</li>
+<li><p><code>height</code></p>
+<p>\u7ec4\u4ef6\u7684\u9ad8\u5ea6\uff0c\u9ed8\u8ba4\u503c\u662f0\u3002\u8fd9\u4e2a\u6837\u5f0f\u5b9a\u4e49\u5fc5\u987b\u6307\u5b9a\u6570\u503c\u3002</p>
+</li>
+<li><p><code>flexbox</code> \u5e03\u5c40</p>
+</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+</li>
+</ul>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><ul>
+<li><code>pagestart</code>: <code><web></code> \u7ec4\u4ef6\u5f00\u59cb\u52a0\u8f7d\u65f6\u53d1\u9001\u6b64\u4e8b\u4ef6\u6d88\u606f\u3002</li>
+<li><code>pagefinish</code>: <code><web></code> \u7ec4\u4ef6\u5b8c\u6210\u52a0\u8f7d\u65f6\u53d1\u9001\u6b64\u4e8b\u4ef6\u6d88\u606f\u3002</li>
+<li><p><code>error</code>: \u5982\u679c <code><web></code> \u7ec4\u4ef6\u52a0\u8f7d\u51fa\u73b0\u9519\u8bef\uff0c\u4f1a\u53d1\u9001\u6b64\u4e8b\u4ef6\u6d88\u606f\u3002</p>
+</li>
+<li><p>\u901a\u7528\u4e8b\u4ef6</p>
+<p>\u652f\u6301\u4ee5\u4e0b\u901a\u7528\u4e8b\u4ef6\uff1a</p>
+<ul>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a></p>
+</li>
+</ul>
+<p><strong>\u6ce8\u610f\uff1a</strong></p>
+<p>\u4e0d\u652f\u6301 <code>click</code> \u4e8b\u4ef6\u3002</p>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><p>\u6211\u4eec\u7528\u4e00\u4e2a\u7b80\u6613\u6d4f\u89c8\u5668\u793a\u4f8b\uff0c\u6765\u5c55\u793a\u5982\u4f55\u4f7f\u7528 <code><web></code> \u7ec4\u4ef6\u548c <code>webview</code> module\u3002 \u67e5\u770b <a href="../modules/webview.html">webview module</a>\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"group"</span>></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">class</span>=<span class="string">"input"</span> <span class="attr">ref</span>=<span class="string">"input"</span> <span class="attr">type</span>=<span class="string">"url"</span> <span class="attr">autofocus</span>=<span class="string">"false"</span> <span class="attr">value</span>=<span class="string">"https://m.taobao.com"</span>></span><span class="tag"></<span class="name">input</span>></span></div><div class="l
ine"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"group"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"loadURL"</span>></span>LoadURL<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"reload"</span>></span>reload<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">w
eb</span> <span class="attr">ref</span>=<span class="string">"webview"</span> <span class="attr">:src</span>=<span class="string">"url"</span> <span class="attr">class</span>=<span class="string">"webview"</span> @<span class="attr">pagestart</span>=<span class="string">"start"</span> @<span class="attr">pagefinish</span>=<span class="string">"finish"</span> @<span class="attr">error</span>=<span class="string">"error"</span>></span><span class="tag"></<span class="name">web</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> webview = weex.requireModule(<span class="string">'webview'</span>)</div><div class="line"> <span class="k
eyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">url</span> : <span class="string">'https://m.alibaba.com'</span></div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> loadURL (event) {</div><div class="line"> <span class="keyword">this</span>.url = <span class="keyword">this</span>.$refs.input.value</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'load url:'</span> + <span class="keyword">this</span>.url })</div><div class="line"> setTimeout(<span class="function"><
span class="params">()</span> =></span> {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'will go back.'</span>)</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'will go back'</span> })</div><div class="line"> webview.goBack(<span class="keyword">this</span>.$refs.webview)</div><div class="line"> }, <span class="number">10000</span>)</div><div class="line"> },</div><div class="line"> reload (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'will reload webview'</span>)</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'reload'</span> })</div><div class="line"> webview.reload(<span class="keyword">this</span>.$refs.webview)</div><div class="line"> },</div><div class="line"> start (event) &
#123;</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'pagestart'</span>, event)</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'pagestart'</span> })</div><div class="line"> },</div><div class="line"> finish (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'pagefinish'</span>, event)</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'pagefinish'</span> })</div><div class="line"> },</div><div class="line"> finish (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'error'</span>, event)</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'error'</span> })</div><div class="line"> }</div><div class="line">
}</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.group</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: row;</div><div class="line"> <span class="attribute">justify-content</span>: space-around;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">20px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.input</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">600px</span>;</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">36px</span>;</div><div class="line"> <span clas
s="attribute">padding-top</span>: <span class="number">15px</span>;</div><div class="line"> <span class="attribute">padding-bottom</span>: <span class="number">15px</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#BBBBBB</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.button</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">225px</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#D3D3D3</span>;</div><div class="line"> <span class="attribute">padding-top</span>: <span class="number">15px</span>;</div><div class="line">
<span class="attribute">padding-bottom</span>: <span class="number">15px</span>;</div><div class="line"> <span class="attribute">margin-bottom</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">30px</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="selector-class">.webview</span> {</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">75px</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">600px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">750px</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span cl
ass="number">#41B883</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/web.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/web.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/web.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/gesture.html
----------------------------------------------------------------------
diff --git a/content/cn/references/gesture.html b/content/cn/references/gesture.html
new file mode 100644
index 0000000..b9a5efd
--- /dev/null
+++ b/content/cn/references/gesture.html
@@ -0,0 +1,1364 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u624b\u52bf | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u624b\u52bf\u6ce8\uff1a\u8be5\u529f\u80fd\u5c5e\u4e8e\u5b9e\u9a8c\u6027\u529f\u80fd
+Weex \u5c01\u88c5\u4e86\u539f\u751f\u7684\u89e6\u6478\u4e8b\u4ef6\u4ee5\u63d0\u4f9b\u624b\u52bf\u7cfb\u7edf\u3002\u4f7f\u7528\u624b\u52bf\u7c7b\u4f3c\u4e8e\u5728 Weex \u4e2d\u4f7f\u7528\u4e8b\u4ef6\uff0c\u53ea\u9700\u5728\u8282\u70b9\u4e0a\u8bbe\u7f6e on \u7279\u6027\u6765\u76d1\u542c\u624b\u52bf\u5373\u53ef\u3002
+\u624b\u52bf\u7c7b\u578b\u76ee\u524d\uff0c\u4ec5\u652f\u6301\u4ee5\u4e0b\u56db\u79cd\u624b\u52bf\u7c7b\u578b\uff1a
+
+Touch\uff1a\u5f53\u89e6\u6478\u5230\u4e00\u4e2a\u70b9\uff0c\u79fb\u52a8\u6216\u4ece\u89e6\u6478\u9762\u79fb\u5f00\u65f6\u89e6\u53d1 touch \u624b\u52bf\u3002\u89e6\u6478\u624b\u52bf\u5f88\u7cbe\u51c6\uff0c\u5b83\u4f1a\u8fd4\u56de\u6240\u6709\u8be6\u7ec6\u7684\u4e8b\u4ef6\u4fe1\u606f\u3002\u6240\u4ee5\uff0c\u76d1\u542c touch \u624b\u52bf\u53ef\u80fd\u5f88\u6162\uff0c\u5373\u4f7f\u53ea\u79fb\u52a8\u4e00\u4e01\u70b9\u4e5f\u9700\u8981\u5904\u7406\u5927\u91cf\u4e8b\u4ef6\u3002\u6709\u4e09\u79cd">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u624b\u52bf">
+<meta property="og:url" content="https://weex.apache.org/cn/references/gesture.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u624b\u52bf\u6ce8\uff1a\u8be5\u529f\u80fd\u5c5e\u4e8e\u5b9e\u9a8c\u6027\u529f\u80fd
+Weex \u5c01\u88c5\u4e86\u539f\u751f\u7684\u89e6\u6478\u4e8b\u4ef6\u4ee5\u63d0\u4f9b\u624b\u52bf\u7cfb\u7edf\u3002\u4f7f\u7528\u624b\u52bf\u7c7b\u4f3c\u4e8e\u5728 Weex \u4e2d\u4f7f\u7528\u4e8b\u4ef6\uff0c\u53ea\u9700\u5728\u8282\u70b9\u4e0a\u8bbe\u7f6e on \u7279\u6027\u6765\u76d1\u542c\u624b\u52bf\u5373\u53ef\u3002
+\u624b\u52bf\u7c7b\u578b\u76ee\u524d\uff0c\u4ec5\u652f\u6301\u4ee5\u4e0b\u56db\u79cd\u624b\u52bf\u7c7b\u578b\uff1a
+
+Touch\uff1a\u5f53\u89e6\u6478\u5230\u4e00\u4e2a\u70b9\uff0c\u79fb\u52a8\u6216\u4ece\u89e6\u6478\u9762\u79fb\u5f00\u65f6\u89e6\u53d1 touch \u624b\u52bf\u3002\u89e6\u6478\u624b\u52bf\u5f88\u7cbe\u51c6\uff0c\u5b83\u4f1a\u8fd4\u56de\u6240\u6709\u8be6\u7ec6\u7684\u4e8b\u4ef6\u4fe1\u606f\u3002\u6240\u4ee5\uff0c\u76d1\u542c touch \u624b\u52bf\u53ef\u80fd\u5f88\u6162\uff0c\u5373\u4f7f\u53ea\u79fb\u52a8\u4e00\u4e01\u70b9\u4e5f\u9700\u8981\u5904\u7406\u5927\u91cf\u4e8b\u4ef6\u3002\u6709\u4e09\u79cd">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.855Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u624b\u52bf">
+<meta name="twitter:description" content="\u624b\u52bf\u6ce8\uff1a\u8be5\u529f\u80fd\u5c5e\u4e8e\u5b9e\u9a8c\u6027\u529f\u80fd
+Weex \u5c01\u88c5\u4e86\u539f\u751f\u7684\u89e6\u6478\u4e8b\u4ef6\u4ee5\u63d0\u4f9b\u624b\u52bf\u7cfb\u7edf\u3002\u4f7f\u7528\u624b\u52bf\u7c7b\u4f3c\u4e8e\u5728 Weex \u4e2d\u4f7f\u7528\u4e8b\u4ef6\uff0c\u53ea\u9700\u5728\u8282\u70b9\u4e0a\u8bbe\u7f6e on \u7279\u6027\u6765\u76d1\u542c\u624b\u52bf\u5373\u53ef\u3002
+\u624b\u52bf\u7c7b\u578b\u76ee\u524d\uff0c\u4ec5\u652f\u6301\u4ee5\u4e0b\u56db\u79cd\u624b\u52bf\u7c7b\u578b\uff1a
+
+Touch\uff1a\u5f53\u89e6\u6478\u5230\u4e00\u4e2a\u70b9\uff0c\u79fb\u52a8\u6216\u4ece\u89e6\u6478\u9762\u79fb\u5f00\u65f6\u89e6\u53d1 touch \u624b\u52bf\u3002\u89e6\u6478\u624b\u52bf\u5f88\u7cbe\u51c6\uff0c\u5b83\u4f1a\u8fd4\u56de\u6240\u6709\u8be6\u7ec6\u7684\u4e8b\u4ef6\u4fe1\u606f\u3002\u6240\u4ee5\uff0c\u76d1\u542c touch \u624b\u52bf\u53ef\u80fd\u5f88\u6162\uff0c\u5373\u4f7f\u53ea\u79fb\u52a8\u4e00\u4e01\u70b9\u4e5f\u9700\u8981\u5904\u7406\u5927\u91cf\u4e8b\u4ef6\u3002\u6709\u4e09\u79cd">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link current ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link current ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u624b\u52bf
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.855Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u624b\u52bf"><a href="#\u624b\u52bf" class="headerlink" title="\u624b\u52bf"></a>\u624b\u52bf</h1><p><em>\u6ce8\uff1a\u8be5\u529f\u80fd\u5c5e\u4e8e\u5b9e\u9a8c\u6027\u529f\u80fd</em></p>
+<p>Weex \u5c01\u88c5\u4e86\u539f\u751f\u7684\u89e6\u6478\u4e8b\u4ef6\u4ee5\u63d0\u4f9b\u624b\u52bf\u7cfb\u7edf\u3002\u4f7f\u7528\u624b\u52bf\u7c7b\u4f3c\u4e8e\u5728 Weex \u4e2d\u4f7f\u7528\u4e8b\u4ef6\uff0c\u53ea\u9700\u5728\u8282\u70b9\u4e0a\u8bbe\u7f6e <code>on</code> \u7279\u6027\u6765\u76d1\u542c\u624b\u52bf\u5373\u53ef\u3002</p>
+<h2 id="\u624b\u52bf\u7c7b\u578b"><a href="#\u624b\u52bf\u7c7b\u578b" class="headerlink" title="\u624b\u52bf\u7c7b\u578b"></a>\u624b\u52bf\u7c7b\u578b</h2><p>\u76ee\u524d\uff0c\u4ec5\u652f\u6301\u4ee5\u4e0b\u56db\u79cd\u624b\u52bf\u7c7b\u578b\uff1a</p>
+<ul>
+<li><p><strong>Touch</strong>\uff1a\u5f53\u89e6\u6478\u5230\u4e00\u4e2a\u70b9\uff0c\u79fb\u52a8\u6216\u4ece\u89e6\u6478\u9762\u79fb\u5f00\u65f6\u89e6\u53d1 <code>touch</code> \u624b\u52bf\u3002\u89e6\u6478\u624b\u52bf\u5f88\u7cbe\u51c6\uff0c\u5b83\u4f1a\u8fd4\u56de\u6240\u6709\u8be6\u7ec6\u7684\u4e8b\u4ef6\u4fe1\u606f\u3002\u6240\u4ee5\uff0c\u76d1\u542c <code>touch</code> \u624b\u52bf\u53ef\u80fd\u5f88\u6162\uff0c\u5373\u4f7f\u53ea\u79fb\u52a8\u4e00\u4e01\u70b9\u4e5f\u9700\u8981\u5904\u7406\u5927\u91cf\u4e8b\u4ef6\u3002\u6709\u4e09\u79cd\u7c7b\u578b\u7684 <code>touch</code> \u624b\u52bf\uff1a</p>
+<ul>
+<li><code>touchstart</code> \u5c06\u5728\u89e6\u6478\u5230\u89e6\u6478\u9762\u4e0a\u65f6\u89e6\u53d1\u3002</li>
+<li><code>touchmove</code> \u5c06\u5728\u89e6\u6478\u70b9\u5728\u89e6\u6478\u9762\u79fb\u52a8\u65f6\u88ab\u89e6\u53d1\u3002</li>
+<li><code>touchend</code> \u5c06\u5728\u4ece\u89e6\u6478\u9762\u79bb\u5f00\u65f6\u88ab\u89e6\u53d1\u3002</li>
+</ul>
+</li>
+<li><p><strong>Pan</strong>\uff1a<code>pan</code> \u624b\u52bf\u4e5f\u4f1a\u8fd4\u56de\u89e6\u6478\u70b9\u5728\u89e6\u6478\u9762\u7684\u79fb\u52a8\u4fe1\u606f\uff0c\u6709\u70b9\u7c7b\u4f3c\u4e8e <code>touch</code> \u624b\u52bf\u3002\u4f46\u662f <code>pan</code> \u624b\u52bf\u53ea\u4f1a\u91c7\u6837\u6536\u96c6\u90e8\u5206\u4e8b\u4ef6\u4fe1\u606f\u56e0\u6b64\u6bd4 <code>touch</code> \u4e8b\u4ef6\u8981\u5feb\u5f97\u591a\uff0c\u5f53\u7136\u7cbe\u51c6\u6027\u5dee\u4e8e <code>touch</code>\u3002<code>pan</code> \u4e5f\u6709\u4e09\u4e2d\u7c7b\u578b\u7684\u624b\u52bf\uff0c\u8fd9\u4e9b\u624b\u52bf\u7684\u610f\u4e49\u4e0e <code>touch</code> \u5b8c\u5168\u4e00\u6837\uff1a</p>
+<ul>
+<li><code>panstart</code></li>
+<li><code>panmove</code></li>
+<li><code>panend</code></li>
+</ul>
+</li>
+<li><p><strong>Swipe</strong>\uff1a<code>swipe</code> \u5c06\u4f1a\u5728\u7528\u6237\u5728\u5c4f\u5e55\u4e0a\u6ed1\u52a8\u65f6\u89e6\u53d1\uff0c\u4e00\u6b21\u8fde\u7eed\u7684\u6ed1\u52a8\u53ea\u4f1a\u89e6\u53d1\u4e00\u6b21 <code>swiper</code> \u624b\u52bf\u3002</p>
+</li>
+<li><strong>LongPress</strong>\uff1a<code>LongPress</code> \u5c06\u4f1a\u5728\u89e6\u6478\u70b9\u8fde\u7eed\u4fdd\u6301 500 ms\u4ee5\u4e0a\u65f6\u89e6\u53d1\u3002</li>
+</ul>
+<p><code>touch</code> \u548c <code>pan</code> \u975e\u5e38\u63a5\u8fd1\uff0c\u5b83\u4eec\u7684\u7279\u70b9\u53ef\u4ee5\u603b\u7ed3\u6210\u8fd9\u6837\uff1a</p>
+<ul>
+<li><strong>Touch</strong>\uff1a\u5b8c\u6574\u4fe1\u606f\uff0c\u7cbe\u51c6\u3001\u5f88\u6162</li>
+<li><strong>Pan</strong>\uff1a\u62bd\u6837\u4fe1\u606f\uff0c\u5f88\u5feb\uff0c\u4e0d\u591f\u7cbe\u51c6</li>
+</ul>
+<p>\u5f00\u53d1\u8005\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u60c5\u51b5\u9009\u62e9\u5408\u9002\u7684\u624b\u52bf\u3002</p>
+<h2 id="\u5c5e\u6027"><a href="#\u5c5e\u6027" class="headerlink" title="\u5c5e\u6027"></a>\u5c5e\u6027</h2><p>\u4ee5\u4e0b\u5c5e\u6027\u53ef\u4ee5\u5728\u624b\u52bf\u7684\u56de\u8c03\u4e2d\u4f7f\u7528\uff1a</p>
+<ul>
+<li><code>direction</code>\uff1a\u4ec5\u5728 <code>swipe</code> \u624b\u52bf\u4e2d\u5b58\u5728\uff0c\u8fd4\u56de\u6ed1\u52a8\u65b9\u5411\uff0c\u8fd4\u56de\u503c\u53ef\u80fd\u4e3a <code>up</code>, <code>left</code>, <code>bottom</code>, <code>right</code>\u3002</li>
+<li><code>changedTouches</code>\uff1a\u4e00\u4e2a\u6570\u7ec4\uff0c\u5305\u542b\u4e86\u5f53\u524d\u624b\u52bf\u7684\u89e6\u6478\u70b9\u7684\u8fd0\u52a8\u8f68\u8ff9</li>
+</ul>
+<h3 id="changedTouches"><a href="#changedTouches" class="headerlink" title="changedTouches"></a>changedTouches</h3><p><code>changedTouches</code> \u662f\u4e00\u4e2a\u6570\u7ec4\uff0c\u5176\u5b50\u5143\u7d20\u4e2d\u5305\u542b\u4ee5\u4e0b\u5c5e\u6027\uff1a</p>
+<ul>
+<li><code>identifier</code>\uff1a\u89e6\u6478\u70b9\u7684\u552f\u4e00\u6807\u8bc6\u7b26\u3002</li>
+<li><code>pageX</code>\uff1a\u89e6\u6478\u70b9\u76f8\u5bf9\u4e8e\u6587\u6863\u5de6\u4fa7\u8fb9\u7f18\u7684 X \u8f74\u5750\u6807\u3002</li>
+<li><code>pageY</code>\uff1a\u89e6\u6478\u70b9\u76f8\u5bf9\u4e8e\u6587\u6863\u9876\u90e8\u8fb9\u7f18\u7684 Y \u8f74\u5750\u6807\u3002</li>
+<li><code>screenX</code>\uff1a\u89e6\u6478\u70b9\u76f8\u5bf9\u4e8e\u5c4f\u5e55\u5de6\u4fa7\u8fb9\u7f18\u7684 X \u8f74\u5750\u6807\u3002</li>
+<li><code>screenY</code>\uff1a\u89e6\u6478\u70b9\u76f8\u5bf9\u4e8e\u5c4f\u5e55\u9876\u90e8\u8fb9\u7f18\u7684 Y \u8f74\u5750\u6807\u3002</li>
+</ul>
+<h2 id="\u7ea6\u675f"><a href="#\u7ea6\u675f" class="headerlink" title="\u7ea6\u675f"></a>\u7ea6\u675f</h2><p>\u76ee\u524d\uff0c\u7531\u4e8e\u4f1a\u89e6\u53d1\u5927\u91cf\u4e8b\u4ef6\u51b2\u7a81\uff0cWeex Android \u8fd8\u4e0d\u652f\u6301\u5728\u6eda\u52a8\u7c7b\u578b\u7684\u5143\u7d20\u4e0a\u76d1\u542c\u624b\u52bf\uff0c\u4f8b\u5982 <code>scroller</code>, <code>list</code> \u548c <code>webview</code> \u8fd9\u4e09\u4e2a\u7ec4\u4ef6\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/gesture.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/gesture.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[14/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/cuszomize-native-apis.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/cuszomize-native-apis.html b/content/cn/v-0.10/advanced/cuszomize-native-apis.html
new file mode 100644
index 0000000..3aeb2c2
--- /dev/null
+++ b/content/cn/v-0.10/advanced/cuszomize-native-apis.html
@@ -0,0 +1,385 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u81ea\u5b9a\u4e49 native API | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5982\u4f55\u81ea\u5b9a\u4e49 native API\uff1fWeex \u7684 SDK \u53ea\u63d0\u4f9b\u4e86\u9875\u9762\u6e32\u67d3\u7684\u80fd\u529b\uff0c\u4f46\u662f\u4e00\u4e9b\u5176\u5b83\u64cd\u4f5c\uff0c\u6bd4\u5982\u7f51\u7edc\u8bf7\u6c42\u3001\u56fe\u7247\u52a0\u8f7d\u3001\u91cd\u5b9a\u5411\u7b49\u529f\u80fd\u9700\u8981\u4f60\u81ea\u5df1\u53bb\u5b9e\u73b0\uff0c\u8fd9\u4e2a\u4f8b\u5b50\u8bb2\u8ff0\u4e86\u5982\u4f55\u7528\u539f\u751f\u4ee3\u7801\u53bb\u6269\u5c55 Weex \u7684\u529f\u80fd\u3002
+\u5173\u4e8e URLHelper \u7684\u4f8b\u5b50\u65b0\u5efa\u4e00\u4e2a WXModulepublic class URLHelperModule extends WXModule&#123; private stat">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u81ea\u5b9a\u4e49 native API">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/advanced/cuszomize-native-apis.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5982\u4f55\u81ea\u5b9a\u4e49 native API\uff1fWeex \u7684 SDK \u53ea\u63d0\u4f9b\u4e86\u9875\u9762\u6e32\u67d3\u7684\u80fd\u529b\uff0c\u4f46\u662f\u4e00\u4e9b\u5176\u5b83\u64cd\u4f5c\uff0c\u6bd4\u5982\u7f51\u7edc\u8bf7\u6c42\u3001\u56fe\u7247\u52a0\u8f7d\u3001\u91cd\u5b9a\u5411\u7b49\u529f\u80fd\u9700\u8981\u4f60\u81ea\u5df1\u53bb\u5b9e\u73b0\uff0c\u8fd9\u4e2a\u4f8b\u5b50\u8bb2\u8ff0\u4e86\u5982\u4f55\u7528\u539f\u751f\u4ee3\u7801\u53bb\u6269\u5c55 Weex \u7684\u529f\u80fd\u3002
+\u5173\u4e8e URLHelper \u7684\u4f8b\u5b50\u65b0\u5efa\u4e00\u4e2a WXModulepublic class URLHelperModule extends WXModule&#123; private stat">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.923Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u81ea\u5b9a\u4e49 native API">
+<meta name="twitter:description" content="\u5982\u4f55\u81ea\u5b9a\u4e49 native API\uff1fWeex \u7684 SDK \u53ea\u63d0\u4f9b\u4e86\u9875\u9762\u6e32\u67d3\u7684\u80fd\u529b\uff0c\u4f46\u662f\u4e00\u4e9b\u5176\u5b83\u64cd\u4f5c\uff0c\u6bd4\u5982\u7f51\u7edc\u8bf7\u6c42\u3001\u56fe\u7247\u52a0\u8f7d\u3001\u91cd\u5b9a\u5411\u7b49\u529f\u80fd\u9700\u8981\u4f60\u81ea\u5df1\u53bb\u5b9e\u73b0\uff0c\u8fd9\u4e2a\u4f8b\u5b50\u8bb2\u8ff0\u4e86\u5982\u4f55\u7528\u539f\u751f\u4ee3\u7801\u53bb\u6269\u5c55 Weex \u7684\u529f\u80fd\u3002
+\u5173\u4e8e URLHelper \u7684\u4f8b\u5b50\u65b0\u5efa\u4e00\u4e2a WXModulepublic class URLHelperModule extends WXModule&#123; private stat">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="advanced" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "advanced";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u9ad8\u9636\u77e5\u8bc6
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex \u5de5\u4f5c\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">\u96c6\u6210\u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">\u96c6\u6210\u5230 iOS</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">\u96c6\u6210\u5230 web</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link current ">\u81ea\u5b9a\u4e49 native API</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-advanced">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u81ea\u5b9a\u4e49 native API
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.923Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5982\u4f55\u81ea\u5b9a\u4e49-native-API\uff1f"><a href="#\u5982\u4f55\u81ea\u5b9a\u4e49-native-API\uff1f" class="headerlink" title="\u5982\u4f55\u81ea\u5b9a\u4e49 native API\uff1f"></a>\u5982\u4f55\u81ea\u5b9a\u4e49 native API\uff1f</h1><p>Weex \u7684 SDK \u53ea\u63d0\u4f9b\u4e86\u9875\u9762\u6e32\u67d3\u7684\u80fd\u529b\uff0c\u4f46\u662f\u4e00\u4e9b\u5176\u5b83\u64cd\u4f5c\uff0c\u6bd4\u5982\u7f51\u7edc\u8bf7\u6c42\u3001\u56fe\u7247\u52a0\u8f7d\u3001\u91cd\u5b9a\u5411\u7b49\u529f\u80fd\u9700\u8981\u4f60\u81ea\u5df1\u53bb\u5b9e\u73b0\uff0c\u8fd9\u4e2a\u4f8b\u5b50\u8bb2\u8ff0\u4e86\u5982\u4f55\u7528\u539f\u751f\u4ee3\u7801\u53bb\u6269\u5c55 Weex \u7684\u529f\u80fd\u3002</p>
+<h2 id="\u5173\u4e8e-URLHelper-\u7684\u4f8b\u5b50"><a href="#\u5173\u4e8e-URLHelper-\u7684\u4f8b\u5b50" class="headerlink" title="\u5173\u4e8e URLHelper \u7684\u4f8b\u5b50"></a>\u5173\u4e8e URLHelper \u7684\u4f8b\u5b50</h2><h3 id="\u65b0\u5efa\u4e00\u4e2a-WXModule"><a href="#\u65b0\u5efa\u4e00\u4e2a-WXModule" class="headerlink" title="\u65b0\u5efa\u4e00\u4e2a WXModule"></a>\u65b0\u5efa\u4e00\u4e2a WXModule</h3><figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">URLHelperModule</span> <span class="keyword">extends</span> <span class="title">WXModule</span></span>{</div><div class="line"> <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">final</span> String WEEX_CATEGORY=<span class="string">"com.taobao.android.intent.category.WEEX"</span>;</div><div class="line"> <span class="meta">@WXModuleAnno</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span cla
ss="keyword">void</span> <span class="title">openURL</span><span class="params">(String url)</span></span>{</div><div class="line"> <span class="keyword">if</span> (TextUtils.isEmpty(url)) {</div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"> StringBuilder builder=<span class="keyword">new</span> StringBuilder(<span class="string">"http:"</span>);</div><div class="line"> builder.append(url);</div><div class="line"> Uri uri = Uri.parse(builder.toString());</div><div class="line"> Intent intent = <span class="keyword">new</span> Intent(Intent.ACTION_VIEW, uri);</div><div class="line"> intent.addCategory(WEEX_CATEGORY);</div><div class="line"> mWXSDKInstance.getContext().startActivity(intent);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u8fd9\u91cc\u8981\u6ce8\u610f <code>@WXModuleAnno</code> \u8fd9\u4e2a\u6ce8\u89e3\uff0c\u5b83\u8868\u793a\u4e86\u4f60\u628a\u8fd9\u4e2a\u65b9\u6cd5\u66b4\u9732\u7ed9 JavaScript\u3002</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">URLHelperModule</span> <span class="keyword">extends</span> <span class="title">WXModule</span></span>{</div><div class="line"></div><div class="line"> <span class="meta">@WXModuleAnno</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">openURL</span><span class="params">(String url,String callbackId)</span></span>{</div><div class="line"> <span class="comment">//...</span></div><div class="line"> <span class="comment">//callback to javascript </span></div><div class="line"> Map<String, Object> result = <span class="keyword">new</span> HashMap<String, Object>();</div><div class="line"> result.put(<span class="string">"ts"</span>, System.currentTime
Millis());</div><div class="line"> WXBridgeManager.getInstance().callback(mWXSDKInstance.getInstanceId(), callbackId, result);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<h3 id="\u628amodule\u6ce8\u518c\u5230WXSDKEngine\uff1a"><a href="#\u628amodule\u6ce8\u518c\u5230WXSDKEngine\uff1a" class="headerlink" title="\u628amodule\u6ce8\u518c\u5230WXSDKEngine\uff1a"></a>\u628amodule\u6ce8\u518c\u5230WXSDKEngine\uff1a</h3><figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">try</span> {</div><div class="line"> WXSDKEngine.registerModule(<span class="string">"myURL"</span>, URLHelperModule.class);</div><div class="line"> <span class="comment">//'myURL' is the name you'll use in javascript</span></div><div class="line"> } <span class="keyword">catch</span> (WXException e) {</div><div class="line"> WXLogUtils.e(e.getMessage());</div><div class="line"> }</div></pre></td></tr></table></figure>
+<h3 id="\u5728-JavaScript-\u4e2d\u4f7f\u7528-eventModule\uff1a"><a href="#\u5728-JavaScript-\u4e2d\u4f7f\u7528-eventModule\uff1a" class="headerlink" title="\u5728 JavaScript \u4e2d\u4f7f\u7528 eventModule\uff1a"></a>\u5728 JavaScript \u4e2d\u4f7f\u7528 <code>eventModule</code>\uff1a</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">let</span> URLHelper = <span class="built_in">require</span>(<span class="string">'@weex-module/myURL'</span>);<span class="comment">//same as you registered</span></div><div class="line">URLHelper.openURL(<span class="string">"http://www.taobao.com"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">ts</span>)</span>{ </div><div class="line"> <span class="built_in">console</span>.log(<span class="string">"url is open at "</span>+ts);</div><div class="line">});</div></pre></td></tr></table></figure>
+<h2 id="\u4e00\u4e9b\u6ce8\u610f\u4e8b\u9879\uff1a"><a href="#\u4e00\u4e9b\u6ce8\u610f\u4e8b\u9879\uff1a" class="headerlink" title="\u4e00\u4e9b\u6ce8\u610f\u4e8b\u9879\uff1a"></a>\u4e00\u4e9b\u6ce8\u610f\u4e8b\u9879\uff1a</h2><ol>
+<li><p>\u5b9a\u4e49\u4e00\u4e2a components \u9700\u8981\u7ee7\u627f <code>WXModule</code></p>
+</li>
+<li><p>\u4e0d\u8981\u5fd8\u8bb0\u6dfb\u52a0 <code>@WXModuleAnno</code> \u6ce8\u89e3\uff0c\u4e0d\u7136 Weex \u6ca1\u6cd5\u8bc6\u522b\u8fd9\u4e2a\u65b9\u6cd5</p>
+</li>
+<li><p>\u5b9a\u4e49\u7684\u65b9\u6cd5\u5fc5\u987b\u662f `public \u7684</p>
+</li>
+<li><p>module \u7c7b\u4e00\u5b9a\u4e0d\u80fd\u662f\u5185\u90e8\u7c7b</p>
+</li>
+<li><p>\u4f60\u5b9a\u4e49\u7684 components \u4e0d\u80fd\u88ab\u6df7\u6dc6\uff0c\u4e0d\u7136\u4f1a\u627e\u4e0d\u5230</p>
+</li>
+<li><p>Module \u4e2d\u7684\u65b9\u6cd5\u4f1a\u5728 UI \u7ebf\u7a0b\u4e2d\u88ab\u8c03\u7528\uff0c\u6240\u4ee5\u4e00\u5b9a\u4e0d\u8981\u505a\u4e00\u4e9b\u8017\u65f6\u64cd\u4f5c</p>
+</li>
+<li><p>Moudle \u4e2d\u7684\u65b9\u6cd5\u53c2\u6570\u7c7b\u578b\u53ef\u4ee5\u4e3a <code>int</code>\uff0c<code>double</code>\uff0c<code>float</code>\uff0c<code>String</code>\uff0c<code>Map</code>\uff0c<code>List</code>\uff0c\u4ee5\u53ca\u5b9e\u73b0 <code>WXObject</code> \u63a5\u53e3\u7684\u7c7b\u3002</p>
+</li>
+</ol>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/advanced/cuszomize-native-apis.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/cuszomize-native-apis.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/extend-to-android.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/extend-to-android.html b/content/cn/v-0.10/advanced/extend-to-android.html
new file mode 100644
index 0000000..ef4b969
--- /dev/null
+++ b/content/cn/v-0.10/advanced/extend-to-android.html
@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Android \u6269\u5c55 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Android \u6269\u5c55Weex \u63d0\u4f9b\u4e86\u6269\u5c55\u673a\u5236\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u4e1a\u52a1\u8fdb\u884c\u5b9a\u5236\u81ea\u5df1\u7684\u529f\u80fd\u3002\u4e3b\u8981\u5206\u4e3a\u4e24\u7c7b\u6269\u5c55\uff1a
+
+Module \u6269\u5c55 \u975e UI \u7684\u7279\u5b9a\u529f\u80fd\u3002\u4f8b\u5982 sendHttp\u3001openURL \u7b49\u3002
+Component \u6269\u5c55 \u5b9e\u73b0\u7279\u522b\u529f\u80fd\u7684 Native \u63a7\u4ef6\u3002\u4f8b\u5982\uff1aRichTextview\uff0cRefreshListview \u7b49\u3002
+Adapter \u6269\u5c55 Weex \u5bf9\u4e00\u4e9b\u57fa\u7840\u529f\u80fd\u5b9e\u73b0\u4e86\u7edf\u4e00\u7684\u63a5\u53e3\uff0c\u53ef\u5b9e\u73b0">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Android \u6269\u5c55">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/advanced/extend-to-android.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Android \u6269\u5c55Weex \u63d0\u4f9b\u4e86\u6269\u5c55\u673a\u5236\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u4e1a\u52a1\u8fdb\u884c\u5b9a\u5236\u81ea\u5df1\u7684\u529f\u80fd\u3002\u4e3b\u8981\u5206\u4e3a\u4e24\u7c7b\u6269\u5c55\uff1a
+
+Module \u6269\u5c55 \u975e UI \u7684\u7279\u5b9a\u529f\u80fd\u3002\u4f8b\u5982 sendHttp\u3001openURL \u7b49\u3002
+Component \u6269\u5c55 \u5b9e\u73b0\u7279\u522b\u529f\u80fd\u7684 Native \u63a7\u4ef6\u3002\u4f8b\u5982\uff1aRichTextview\uff0cRefreshListview \u7b49\u3002
+Adapter \u6269\u5c55 Weex \u5bf9\u4e00\u4e9b\u57fa\u7840\u529f\u80fd\u5b9e\u73b0\u4e86\u7edf\u4e00\u7684\u63a5\u53e3\uff0c\u53ef\u5b9e\u73b0">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.923Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Android \u6269\u5c55">
+<meta name="twitter:description" content="Android \u6269\u5c55Weex \u63d0\u4f9b\u4e86\u6269\u5c55\u673a\u5236\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u4e1a\u52a1\u8fdb\u884c\u5b9a\u5236\u81ea\u5df1\u7684\u529f\u80fd\u3002\u4e3b\u8981\u5206\u4e3a\u4e24\u7c7b\u6269\u5c55\uff1a
+
+Module \u6269\u5c55 \u975e UI \u7684\u7279\u5b9a\u529f\u80fd\u3002\u4f8b\u5982 sendHttp\u3001openURL \u7b49\u3002
+Component \u6269\u5c55 \u5b9e\u73b0\u7279\u522b\u529f\u80fd\u7684 Native \u63a7\u4ef6\u3002\u4f8b\u5982\uff1aRichTextview\uff0cRefreshListview \u7b49\u3002
+Adapter \u6269\u5c55 Weex \u5bf9\u4e00\u4e9b\u57fa\u7840\u529f\u80fd\u5b9e\u73b0\u4e86\u7edf\u4e00\u7684\u63a5\u53e3\uff0c\u53ef\u5b9e\u73b0">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="advanced" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "advanced";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u9ad8\u9636\u77e5\u8bc6
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex \u5de5\u4f5c\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">\u96c6\u6210\u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">\u96c6\u6210\u5230 iOS</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">\u96c6\u6210\u5230 web</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native API</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link current ">Android \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-advanced">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Android \u6269\u5c55
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.923Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Android-\u6269\u5c55"><a href="#Android-\u6269\u5c55" class="headerlink" title="Android \u6269\u5c55"></a>Android \u6269\u5c55</h1><p>Weex \u63d0\u4f9b\u4e86\u6269\u5c55\u673a\u5236\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u4e1a\u52a1\u8fdb\u884c\u5b9a\u5236\u81ea\u5df1\u7684\u529f\u80fd\u3002<br>\u4e3b\u8981\u5206\u4e3a\u4e24\u7c7b\u6269\u5c55\uff1a </p>
+<ul>
+<li>Module \u6269\u5c55 \u975e UI \u7684\u7279\u5b9a\u529f\u80fd\u3002\u4f8b\u5982 sendHttp\u3001openURL \u7b49\u3002</li>
+<li>Component \u6269\u5c55 \u5b9e\u73b0\u7279\u522b\u529f\u80fd\u7684 Native \u63a7\u4ef6\u3002\u4f8b\u5982\uff1aRichTextview\uff0cRefreshListview \u7b49\u3002</li>
+<li>Adapter \u6269\u5c55 Weex \u5bf9\u4e00\u4e9b\u57fa\u7840\u529f\u80fd\u5b9e\u73b0\u4e86\u7edf\u4e00\u7684\u63a5\u53e3\uff0c\u53ef\u5b9e\u73b0\u8fd9\u4e9b\u63a5\u53e3\u6765\u5b9a\u5236\u81ea\u5df1\u7684\u4e1a\u52a1\u3002\u4f8b\u5982\uff1a\u56fe\u7247\u4e0b\u8f7d\u7b49\u3002</li>
+</ul>
+<h2 id="Module-\u6269\u5c55"><a href="#Module-\u6269\u5c55" class="headerlink" title="Module \u6269\u5c55"></a>Module \u6269\u5c55</h2><ol>
+<li>Module \u6269\u5c55\u5fc5\u987b\u7ee7\u627f WXModule \u7c7b\u3002</li>
+<li>\u6269\u5c55\u65b9\u6cd5\u5fc5\u987b\u52a0\u4e0a @WXModuleAnno \u6ce8\u89e3\u3002Weex \u4f1a\u6839\u636e\u6ce8\u89e3\u6765\u5224\u65ad\u5f53\u524d\u65b9\u6cd5\u662f\u5426\u8981\u8fd0\u884c\u5728 UI \u7ebf\u7a0b\uff0c\u548c\u5f53\u524d\u65b9\u6cd5\u662f\u5426\u662f\u6269\u5c55\u65b9\u6cd5\u3002</li>
+<li>Weex\u662f\u6839\u636e\u53cd\u5c04\u6765\u8fdb\u884c\u8c03\u7528 Module \u6269\u5c55\u65b9\u6cd5\uff0c\u6240\u4ee5Module\u4e2d\u7684\u6269\u5c55\u65b9\u6cd5\u5fc5\u987b\u662f public \u7c7b\u578b\u3002</li>
+<li>\u540c\u6837\u56e0\u4e3a\u662f\u901a\u8fc7\u53cd\u5c04\u8c03\u7528\uff0cModule \u4e0d\u80fd\u88ab\u6df7\u6dc6\u3002\u8bf7\u5728\u6df7\u6dc6\u6587\u4ef6\u4e2d\u6dfb\u52a0\u4ee3\u7801\uff1a<code>-keep public class * extends com.taobao.weex.common.WXModule{*;}</code></li>
+<li>Module \u6269\u5c55\u7684\u65b9\u6cd5\u53ef\u4ee5\u4f7f\u7528 int, double, float, String, Map, List \u7c7b\u578b\u7684\u53c2\u6570</li>
+<li>\u5b8c\u6210 Module \u540e\u4e00\u5b9a\u8981\u5728\u521d\u59cb\u5316\u65f6\u6ce8\u518c <code>WXSDKEngine.registerModule("myModule", MyModule.class);</code> \u5426\u5219\u4f1a\u62a5\u7c7b\u4f3c\u9519\u8bef\uff1a<code>ReportException :undefined:9: TypeError: Object #<Object> has no method 'printLog'</code></li>
+</ol>
+<p>\u793a\u4f8b\u5982\u4e0b\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MyModule</span> <span class="keyword">extends</span> <span class="title">WXModule</span> </span>{</div><div class="line"></div><div class="line"> <span class="meta">@WXModuleAnno</span>(runOnUIThread = <span class="keyword">true</span>)</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">printLog</span><span class="params">(String msg)</span> </span>{</div><div class="line"> Toast.makeText(mWXSDKInstance.getContext(),msg,Toast.LENGTH_SHORT).show();</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>JS \u8c03\u7528\u5982\u4e0b\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"click"</span>></span>\u70b9\u51fb\u6211\u6d4b\u8bd5<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="att
r">click</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">require</span>(<span class="string">'@weex-module/myModule'</span>).printLog(<span class="string">"\u6211\u662f\u4e00\u4e2a\u6d4b\u8bd5!"</span>);</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<h2 id="Component-\u6269\u5c55"><a href="#Component-\u6269\u5c55" class="headerlink" title="Component \u6269\u5c55"></a>Component \u6269\u5c55</h2><ol>
+<li>Component \u6269\u5c55\u7c7b\u5fc5\u987b\u96c6\u6210 WXComponent.</li>
+<li>Component \u5bf9\u5e94\u7684\u8bbe\u7f6e\u5c5e\u6027\u7684\u65b9\u6cd5\u5fc5\u987b\u6dfb\u52a0\u6ce8\u89e3 @WXComponentProp(name=value(value is attr or style of dsl))</li>
+<li>Weex sdk \u901a\u8fc7\u53cd\u5c04\u8c03\u7528\u5bf9\u5e94\u7684\u65b9\u6cd5\uff0c\u6240\u4ee5 Component \u5bf9\u5e94\u7684\u5c5e\u6027\u65b9\u6cd5\u5fc5\u987b\u662f public\uff0c\u5e76\u4e14\u4e0d\u80fd\u88ab\u6df7\u6dc6\u3002\u8bf7\u5728\u6df7\u6dc6\u6587\u4ef6\u4e2d\u6dfb\u52a0\u4ee3\u7801 <code>-keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}</code></li>
+<li>Component \u6269\u5c55\u7684\u65b9\u6cd5\u53ef\u4ee5\u4f7f\u7528 int, double, float, String, Map, List \u7c7b\u578b\u7684\u53c2\u6570</li>
+<li>\u5b8c\u6210 Component \u540e\u4e00\u5b9a\u8981\u5728\u521d\u59cb\u5316\u65f6\u6ce8\u518c <code>WXSDKEngine.registerComponent("richtext",RichText.class);</code></li>
+</ol>
+<p>\u793a\u4f8b\u5982\u4e0b:</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">RichText</span> <span class="keyword">extends</span> <span class="title">WXComponent</span> </span>{</div><div class="line"></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="title">RichText</span><span class="params">(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, <span class="keyword">boolean</span> isLazy)</span> </span>{</div><div class="line"> <span class="keyword">super</span>(instance, dom, parent, isLazy);</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">initView</span><span class="params">()</span> </span>
{</div><div class="line"> mHost=<span class="keyword">new</span> TextView(mContext);</div><div class="line"> ((TextView)mHost).setMovementMethod(LinkMovementMethod.getInstance());</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@WXComponentProp</span>(name = <span class="string">"tel"</span>)</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setTelLink</span><span class="params">(String tel)</span></span>{</div><div class="line"> SpannableString spannable=<span class="keyword">new</span> SpannableString(tel);</div><div class="line"> spannable.setSpan(<span class="keyword">new</span> URLSpan(<span class="string">"tel:"</span>+tel),<span class="number">0</span>,tel.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);</div><div class="line"> ((TextView)mHost).setText(spannable);</div><div class="line"> }</div><div class="line
">}</div></pre></td></tr></table></figure>
+<p>JS \u8c03\u7528\u5982\u4e0b\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">richText</span> <span class="attr">tel</span>=<span class="string">"12305"</span> <span class="attr">style</span>=<span class="string">"width:200;height:100"</span>></span>12305<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure>
+<h2 id="Adapter\u6269\u5c55"><a href="#Adapter\u6269\u5c55" class="headerlink" title="Adapter\u6269\u5c55"></a>Adapter\u6269\u5c55</h2><p>\u56fe\u7247\u4e0b\u8f7d\uff1a</p>
+<p>\u9700\u8981\u65f6\u96c6\u6210\u63a5\u53e3 IWXImgLoaderAdapter\uff0c\u5b9e\u73b0 setImage \u65b9\u6cd5\u3002</p>
+<p>\u793a\u4f8b\u5982\u4e0b\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">ImageAdapter</span> <span class="keyword">implements</span> <span class="title">IWXImgLoaderAdapter</span> </span>{</div><div class="line"></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="title">ImageAdapter</span><span class="params">()</span> </span>{</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setImage</span><span class="params">(<span class="keyword">final</span> String url, <span class="keyword">final</span> ImageView view,</span></span></div><div class="line"> WXImageQuality quality, WXImageStrategy s
trategy) {</div><div class="line"></div><div class="line"> WXSDKManager.getInstance().postOnUiThread(<span class="keyword">new</span> Runnable() {</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">run</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">if</span>(view==<span class="keyword">null</span>||view.getLayoutParams()==<span class="keyword">null</span>){</div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"> <span class="keyword">if</span> (TextUtils.isEmpty(url)) {</div><div class="line"> view.setImageBitmap(<span class="keyword">null</span>);</div><div class="line"> <span class="keyword">return</span>;</div><div class="lin
e"> }</div><div class="line"> String temp = url;</div><div class="line"> <span class="keyword">if</span> (url.startsWith(<span class="string">"//"</span>)) {</div><div class="line"> temp = <span class="string">"http:"</span> + url;</div><div class="line"> }</div><div class="line"> <span class="keyword">if</span> (view.getLayoutParams().width <= <span class="number">0</span> || view.getLayoutParams().height <= <span class="number">0</span>) {</div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"> Picasso.with(WXEnvironment.getApplication())</div><div class="line"> .load(temp)</div><div class="line"> .into(view);</div><div class="line"> }</div><div class="line"> },<span class="number">0</span>);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u6ce8:\u5de5\u7a0b\u8981\u6dfb\u52a0\u4f9d\u8d56 <code>compile 'com.squareup.picasso:picasso:2.5.2'</code></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/advanced/extend-to-android.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/extend-to-android.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/extend-to-html5.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/extend-to-html5.html b/content/cn/v-0.10/advanced/extend-to-html5.html
new file mode 100644
index 0000000..a5be64f
--- /dev/null
+++ b/content/cn/v-0.10/advanced/extend-to-html5.html
@@ -0,0 +1,415 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>weex-html5 \u6269\u5c55 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u6269\u5c55 weex-html5\u7b80\u4ecbWeex \u662f\u4e00\u4e2a\u9ad8\u53ef\u6269\u5c55\u6027\u7684\u8de8\u5e73\u53f0\u52a8\u6001\u5316\u5f00\u53d1\u65b9\u6848\uff0c\u4f60\u53ef\u4ee5\u5728\u73b0\u6709\u7ec4\u4ef6\u57fa\u7840\u4e0a\u5b9a\u5236\u81ea\u5df1\u9700\u8981\u7684\u4e09\u7aef\u7ec4\u4ef6\u3002\u4f60\u53ef\u4ee5\u4e3a Weex API \u6a21\u5757\u6dfb\u52a0\u65b0\u7684\u65b9\u6cd5\uff0c\u6216\u8005\u521b\u5efa\u65b0\u7684 API \u6a21\u5757\u548c\u65b0\u7684\u52a0\u8f7d\u5668\u3002\u6309\u7167\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\u6269\u5c55\u4f60\u7684\u7ec4\u4ef6\uff0cAPI \u6216\u8005\u52a0\u8f7d\u5668\u3002
+\u9996\u5148\u8981\u660e\u786e\u7684\u662f\uff0c\u7ec4\u4ef6\u548c API \u6a21\u5757\u662f\u57fa\u4e8e Weex \u7684\u6269\u5c55\uff0c\u4f46\u662f\u72ec\u7acb\u4e8e Weex\uff0c\u7ec4\u4ef6\u7684\u5b9a\u4e49\u672c\u8eab\u662f\u4e0d\u9700\u8981\u4f9d\u8d56\u4e8e Weex \u7684\uff0c\u8fd9\u6837\u6709\u52a9">
+<meta property="og:type" content="website">
+<meta property="og:title" content="weex-html5 \u6269\u5c55">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/advanced/extend-to-html5.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u6269\u5c55 weex-html5\u7b80\u4ecbWeex \u662f\u4e00\u4e2a\u9ad8\u53ef\u6269\u5c55\u6027\u7684\u8de8\u5e73\u53f0\u52a8\u6001\u5316\u5f00\u53d1\u65b9\u6848\uff0c\u4f60\u53ef\u4ee5\u5728\u73b0\u6709\u7ec4\u4ef6\u57fa\u7840\u4e0a\u5b9a\u5236\u81ea\u5df1\u9700\u8981\u7684\u4e09\u7aef\u7ec4\u4ef6\u3002\u4f60\u53ef\u4ee5\u4e3a Weex API \u6a21\u5757\u6dfb\u52a0\u65b0\u7684\u65b9\u6cd5\uff0c\u6216\u8005\u521b\u5efa\u65b0\u7684 API \u6a21\u5757\u548c\u65b0\u7684\u52a0\u8f7d\u5668\u3002\u6309\u7167\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\u6269\u5c55\u4f60\u7684\u7ec4\u4ef6\uff0cAPI \u6216\u8005\u52a0\u8f7d\u5668\u3002
+\u9996\u5148\u8981\u660e\u786e\u7684\u662f\uff0c\u7ec4\u4ef6\u548c API \u6a21\u5757\u662f\u57fa\u4e8e Weex \u7684\u6269\u5c55\uff0c\u4f46\u662f\u72ec\u7acb\u4e8e Weex\uff0c\u7ec4\u4ef6\u7684\u5b9a\u4e49\u672c\u8eab\u662f\u4e0d\u9700\u8981\u4f9d\u8d56\u4e8e Weex \u7684\uff0c\u8fd9\u6837\u6709\u52a9">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.925Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="weex-html5 \u6269\u5c55">
+<meta name="twitter:description" content="\u6269\u5c55 weex-html5\u7b80\u4ecbWeex \u662f\u4e00\u4e2a\u9ad8\u53ef\u6269\u5c55\u6027\u7684\u8de8\u5e73\u53f0\u52a8\u6001\u5316\u5f00\u53d1\u65b9\u6848\uff0c\u4f60\u53ef\u4ee5\u5728\u73b0\u6709\u7ec4\u4ef6\u57fa\u7840\u4e0a\u5b9a\u5236\u81ea\u5df1\u9700\u8981\u7684\u4e09\u7aef\u7ec4\u4ef6\u3002\u4f60\u53ef\u4ee5\u4e3a Weex API \u6a21\u5757\u6dfb\u52a0\u65b0\u7684\u65b9\u6cd5\uff0c\u6216\u8005\u521b\u5efa\u65b0\u7684 API \u6a21\u5757\u548c\u65b0\u7684\u52a0\u8f7d\u5668\u3002\u6309\u7167\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\u6269\u5c55\u4f60\u7684\u7ec4\u4ef6\uff0cAPI \u6216\u8005\u52a0\u8f7d\u5668\u3002
+\u9996\u5148\u8981\u660e\u786e\u7684\u662f\uff0c\u7ec4\u4ef6\u548c API \u6a21\u5757\u662f\u57fa\u4e8e Weex \u7684\u6269\u5c55\uff0c\u4f46\u662f\u72ec\u7acb\u4e8e Weex\uff0c\u7ec4\u4ef6\u7684\u5b9a\u4e49\u672c\u8eab\u662f\u4e0d\u9700\u8981\u4f9d\u8d56\u4e8e Weex \u7684\uff0c\u8fd9\u6837\u6709\u52a9">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="advanced" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "advanced";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u9ad8\u9636\u77e5\u8bc6
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex \u5de5\u4f5c\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">\u96c6\u6210\u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">\u96c6\u6210\u5230 iOS</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">\u96c6\u6210\u5230 web</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native API</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link current ">weex-html5 \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-advanced">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ weex-html5 \u6269\u5c55
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.925Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u6269\u5c55-weex-html5"><a href="#\u6269\u5c55-weex-html5" class="headerlink" title="\u6269\u5c55 weex-html5"></a>\u6269\u5c55 weex-html5</h1><h3 id="\u7b80\u4ecb"><a href="#\u7b80\u4ecb" class="headerlink" title="\u7b80\u4ecb"></a>\u7b80\u4ecb</h3><p>Weex \u662f\u4e00\u4e2a\u9ad8\u53ef\u6269\u5c55\u6027\u7684\u8de8\u5e73\u53f0\u52a8\u6001\u5316\u5f00\u53d1\u65b9\u6848\uff0c\u4f60\u53ef\u4ee5\u5728\u73b0\u6709\u7ec4\u4ef6\u57fa\u7840\u4e0a\u5b9a\u5236\u81ea\u5df1\u9700\u8981\u7684\u4e09\u7aef\u7ec4\u4ef6\u3002\u4f60\u53ef\u4ee5\u4e3a Weex API \u6a21\u5757\u6dfb\u52a0\u65b0\u7684\u65b9\u6cd5\uff0c\u6216\u8005\u521b\u5efa\u65b0\u7684 API \u6a21\u5757\u548c\u65b0\u7684\u52a0\u8f7d\u5668\u3002\u6309\u7167\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\u6269\u5c55\u4f60\u7684\u7ec4\u4ef6\uff0cAPI \u6216\u8005\u52a0\u8f7d\u5668\u3002</p>
+<p>\u9996\u5148\u8981\u660e\u786e\u7684\u662f\uff0c\u7ec4\u4ef6\u548c API \u6a21\u5757\u662f\u57fa\u4e8e Weex \u7684\u6269\u5c55\uff0c\u4f46\u662f\u72ec\u7acb\u4e8e Weex\uff0c\u7ec4\u4ef6\u7684\u5b9a\u4e49\u672c\u8eab\u662f\u4e0d\u9700\u8981\u4f9d\u8d56\u4e8e Weex \u7684\uff0c\u8fd9\u6837\u6709\u52a9\u4e8e\u7ec4\u4ef6\u7684\u5206\u6563\u5316\u7ba1\u7406\uff0c\u53bb\u9664\u4e2d\u5fc3\u5316\u4f9d\u8d56\u3002</p>
+<p>\u5176\u6b21\uff0c\u5f53\u4f60\u6269\u5c55\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u4f60\u9700\u8981\u540c\u65f6\u6269\u5c55\u4e09\u7aef\u7684\u7ec4\u4ef6\uff08android, ios \u548c web \u7aef\uff09\uff0c\u6bd5\u7adf Weex \u662f\u4e00\u4e2a\u91cd\u89c6\u4e09\u7aef\u4e00\u81f4\u4f53\u9a8c\u7684\u8de8\u5e73\u53f0\u79fb\u52a8\u6846\u67b6\u3002\u4f60\u53ef\u4ee5\u4e00\u4e2a\u7aef\u4e00\u4e2a\u7aef\u7684\u6269\u5c55\uff0c\u4e5f\u53ef\u4ee5\u53ec\u5524\u5176\u4ed6\u7aef\u4e0a\u7684\u5f00\u53d1\u8005\u6765\u5171\u540c\u5b8c\u6210\u4f60\u5728\u5176\u4ed6\u7aef\u4e0a\u7684\u7ec4\u4ef6\uff08\u4f60\u603b\u662f\u53ef\u4ee5\u5728\u793e\u533a\u627e\u5230\u5bf9\u67d0\u4e2a\u529f\u80fd\u6709\u5171\u540c\u9700\u6c42\u7684\u5f00\u53d1\u8005\uff09\u3002\u8fd9\u91cc\u6709\u4e00\u4e9b\u5728 <a href="./extend-to-android.md">android \u7aef</a>\u548c <a href="./extend-to-ios.md">ios \u7aef</a>\u505a\u6269\u5c55\u7684\u6587\u6863\u53ef\u4ee5\u53c2\u8003\u3002</p>
+<p>\u4f60\u5e94\u8be5\u5c06\u4f60\u7684\u6269\u5c55\u53d1\u5e03\u5230 Weex \u5f00\u53d1\u8005\u53ef\u4ee5\u65b9\u4fbf\u627e\u5230\u548c\u4f7f\u7528\u7684\u6e20\u9053\uff0c\u6bd4\u5982 <code>npm</code>\u3002\u6211\u4eec\u63a8\u8350\u4f60\u5c06\u4f60\u5f00\u53d1\u7684\u7ec4\u4ef6\u53d1\u5e03\u5230 <code>npm</code> \u4f9b\u5176\u4ed6 Weex \u5f00\u53d1\u8005\u4f7f\u7528\u3002</p>
+<p>\u6700\u91cd\u8981\u7684\u662f\uff0c\u4f60\u7684\u7ec4\u4ef6\u7684\u547d\u540d\u9700\u8981\u9075\u5b88 Weex \u7ec4\u4ef6\u547d\u540d\u89c4\u8303\uff1a\u4ee5 <code>weex-</code> \u5f00\u5934\u4f5c\u4e3a\u7ec4\u4ef6\u7684\u524d\u7f00\uff0c\u5e76\u4e14\u4ee5 <code>-<platform></code> \u505a\u4e3a\u7ed3\u5c3e\u540e\u7f00\uff0c\u9664\u975e\u4f60\u53d1\u5e03\u7684\u5305\u662f\u4e09\u7aef\u7684\u5b9e\u73b0\u90fd\u5305\u542b\u5728\u5185\u7684\u3002\u8fd9\u91cc\u6709\u4e2a <a href="https://github.com/MrRaindrop/weex-hello-web" target="_blank" rel="external"><code><weex-hello-web</code>></a> \u7684\u4f8b\u5b50\u4f5c\u4e3a\u53c2\u8003\uff0c\u8fd9\u91cc\u6ce8\u518c\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u81ea\u5b9a\u4e49\u7684\u7ec4\u4ef6\u3002</p>
+<h3 id="\u521b\u5efa\u65b0\u7ec4\u4ef6"><a href="#\u521b\u5efa\u65b0\u7ec4\u4ef6" class="headerlink" title="\u521b\u5efa\u65b0\u7ec4\u4ef6"></a>\u521b\u5efa\u65b0\u7ec4\u4ef6</h3><p>\u6b65\u9aa4:</p>
+<ol>
+<li>\u5728\u4f60\u7684\u7ec4\u4ef6\u5b9e\u73b0\u4e2d\u5fc5\u987b\u7ee7\u627f <code>Weex.Component</code> \u8fd9\u4e2a\u7c7b, \u5e76\u9009\u62e9\u6027\u7684\u91cd\u5199\u5176\u4e2d\u7684\u4e00\u4e9b\u65b9\u6cd5\u3002</li>
+<li>\u4f60\u7684\u7ec4\u4ef6\u7684 exports \u9700\u8981\u66b4\u9732\u4e00\u4e2a <code>init</code> \u65b9\u6cd5\uff0c\u5e76\u5728\u5176\u4e2d\u4f7f\u7528 <code>Weex.registerComponent</code> \u6ce8\u518c\u4f60\u7684\u7ec4\u4ef6\u3002</li>
+</ol>
+<p><strong>\u8fd9\u91cc\u7528\u4e00\u4e2a\u4f8b\u5b50\u5c55\u793a\u5982\u4f55\u6269\u5c55\u4e00\u4e2a\u65b0\u7684\u7ec4\u4ef6</strong></p>
+<p>\u770b\u8fd9\u4e2a\u7ec4\u4ef6\u6269\u5c55\u7684\u4ee3\u7801( web \u7aef\u4e0a\u7684\u7ec4\u4ef6)\uff1a</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">const</span> attr = {</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"><span class="keyword">const</span> style = {</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"><span class="keyword">const</span> event = {</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"><span class="comment">// \u6bcf\u4e2a\u6269\u5c55\u7ec4\u4ef6\u90fd\u9700\u8981\u5b9e\u73b0\u4e00\u4e2ainit\u65b9\u6cd5\uff0cWeex\u4f1a\u901a\u8fc7\u8fd9\u65b9\u6cd5\u8fdb\u884c\u5b89\u88c5\u548c\u6ce8\u518c.</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">init</span> (<span class="params">Weex</span>) </span>{</div><div class="line"> <span class="keyword">const</span> Component = Weex.Component</div><div class="line"> <span class=
"keyword">const</span> extend = Weex.utils.extend</div><div class="line"></div><div class="line"> <span class="comment">// \u7ec4\u4ef6\u7684\u6784\u9020\u51fd\u6570</span></div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">Hello</span> (<span class="params">data</span>) </span>{</div><div class="line"> Component.call(<span class="keyword">this</span>, data)</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="comment">// prototype\u7ee7\u627f</span></div><div class="line"> Hello.prototype = <span class="built_in">Object</span>.create(Component.prototype)</div><div class="line"> extend(Hello.prototype, proto)</div><div class="line"></div><div class="line"> <span class="comment">// \u914d\u7f6e\u5c5e\u6027\u3001\u6837\u5f0f\u4ee5\u53ca\u4e8b\u4ef6</span></div><div class="line"> extend(Hello.prototype, { attr })</div><div class="line"> extend(Hello.prototype, {</div><div class="line"> <span class="attr">style</span>:
extend(<span class="built_in">Object</span>.create(Component.prototype.style), style)</div><div class="line"> })</div><div class="line"> extend(Hello.prototype, { event })</div><div class="line"></div><div class="line"> Weex.registerComponent(<span class="string">'weex-hello'</span>, Hello)</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// \u66b4\u9732init\u65b9\u6cd5\u63a5\u53e3.</span></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> { init }</div></pre></td></tr></table></figure>
+<p>\u4e0a\u8ff0\u4ee3\u7801\u6458\u5f15\u81ea <a href="https://github.com/MrRaindrop/weex-hello-web/blob/master/src/index.js#L46-L65" target="_blank" rel="external">weex-hello-web/src/index.js</a></p>
+<p>\u8fd9\u4e2ademo\u91cd\u5199\u4e86\u57fa\u7c7b <code>Component</code>\u4e2d\u7684<code>create</code>\u65b9\u6cd5\u3002\u4f60\u4e5f\u53ef\u4ee5\u9009\u62e9\u91cd\u5199<code>Component</code>\u4e2d\u7684\u4e00\u4e9b\u5176\u4ed6\u65b9\u6cd5\u6765\u5b9a\u5236\u7ec4\u4ef6\u7684\u884c\u4e3a\u3002\u5178\u578b\u7684\u65b9\u6cd5\u5305\u62ec\uff1a</p>
+<ul>
+<li><code>create</code>: \u521b\u5efa\u7ec4\u4ef6\u7684\u8282\u70b9\uff0c\u5728\u65b9\u6cd5\u4f53\u4e2dreturn\u8fd9\u4e2a\u8282\u70b9.</li>
+<li><code>createChildren</code> \u521b\u5efa\u5b50\u8282\u70b9.</li>
+<li><code>insertBefore</code> \u5728\u67d0\u4e2a\u5b50\u8282\u70b9\u4e4b\u524d\u63d2\u5165\u4e00\u4e2a\u65b0\u7684\u5b50\u8282\u70b9.</li>
+<li><code>appendChild</code> \u5728\u5b50\u8282\u70b9\u5217\u8868\u7684\u6700\u540e\u52a0\u4e0a\u4e00\u4e2a\u8282\u70b9.</li>
+<li><code>removeChild</code> \u79fb\u9664\u4e00\u4e2a\u5b50\u8282\u70b9.</li>
+</ul>
+<p><strong>\u8fdb\u9636</strong>\uff1a\u66f4\u591a\u5173\u4e8e\u7ec4\u4ef6\u5b9a\u5236\u548c\u6269\u5c55\u7684\u7ec6\u8282\u548c\u4ee3\u7801\u5c55\u793a\uff0c\u53ef\u4ee5\u53c2\u8003 <a href="https://github.com/alibaba/weex/tree/dev/html5/browser/extend/components" target="_blank" rel="external">weex \u4e3b\u4ed3\u5e93\u7684\u4ee3\u7801</a>\uff0c\u8fd9\u91cc\u7684\u7ec4\u4ef6\u57fa\u672c\u4e0a\u90fd\u662f\u901a\u8fc7\u4e0a\u8ff0\u65b9\u5f0f\u8fdb\u884c\u5b9a\u4e49\u7684\u3002</p>
+<p>\u91cd\u8981\u7684\u4e00\u70b9\uff0c\u6ce8\u518c\u7ec4\u4ef6\u7684\u5173\u952e\u65b9\u6cd5\u662f <code>Weex.registerComponent</code>\uff0c\u5982\u793a\u4f8b\u91cc\u7684 <code>weex-hello</code> \u7ec4\u4ef6\u7684\u6ce8\u518c\uff1a</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line">Weex.registerComponent(<span class="string">'weex-hello'</span>, Hello)</div></pre></td></tr></table></figure>
+<p>\u4e0a\u8ff0\u4ee3\u7801\u5f15\u81ea <a href="https://github.com/MrRaindrop/weex-hello-web/blob/master/src/index.js#L62" target="_blank" rel="external">weex-hello-web/src/index.js</a></p>
+<p>\u5728\u67d0\u4e2a\u9700\u8981\u4f7f\u7528\u8be5\u7ec4\u4ef6\u7684weex\u9879\u76ee\u4e2d\u4f7f\u7528 <code>Weex.install</code> \u65b9\u6cd5\u5b89\u88c5\u8be5\u7ec4\u4ef6\uff1a</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="comment">// import the original weex-html5.</span></div><div class="line"><span class="keyword">import</span> weex <span class="keyword">from</span> <span class="string">'weex-html5'</span></div><div class="line"><span class="keyword">import</span> hello <span class="keyword">from</span> <span class="string">'weex-hello-web'</span></div><div class="line"><span class="comment">// install the component.</span></div><div class="line">weex.install(hello)</div></pre></td></tr></table></figure>
+<p>\u4e0a\u8ff0\u4ee3\u7801\u5f15\u81ea <a href="https://github.com/MrRaindrop/weex_extend_demo/blob/master/src/main.js#L1-L5" target="_blank" rel="external">weex_extend_demo/src/main.js</a></p>
+<p>\u5728\u4f60\u7684 <code>.we</code> \u6587\u4ef6\u4e2d\u76f4\u63a5\u4f7f\u7528\u8fd9\u4e2a\u7ec4\u4ef6\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">weex-hello</span> <span class="attr">class</span>=<span class="string">"hello"</span> <span class="attr">style</span>=<span class="string">"txt-color:#fff;bg-color:green"</span></span></div><div class="line"> <span class="attr">value</span>=<span class="string">"WEEX"</span> <span class="attr">onclick</span>=<span class="string">"handleClick"</span>></div><div class="line"> <span class="tag"></<span class="name">weex-hello</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure>
+<p>\u4e0a\u8ff0\u4ee3\u7801\u5f15\u81ea<a href="https://github.com/MrRaindrop/weex_extend_demo/blob/master/demo/index.we#L10-L15" target="_blank" rel="external">weex_extend_demo/demo/index.we</a></p>
+<h3 id="\u6269\u5c55API"><a href="#\u6269\u5c55API" class="headerlink" title="\u6269\u5c55API"></a>\u6269\u5c55API</h3><p>\u4f60\u53ef\u4ee5\u6269\u5c55\u65b0\u7684 API \u6a21\u5757\uff0c\u6216\u8005\u4e3a\u67d0\u4e2a\u5df2\u6709\u7684\u6a21\u5757\u6dfb\u52a0\u65b0\u7684 API. \u6bd4\u5982\uff0c\u4f60\u53ef\u4ee5\u6dfb\u52a0\u4e00\u4e2a API \u6a21\u5757\u53eb\u505a <code>user</code>\uff0c\u5728\u91cc\u9762\u6dfb\u52a0\u4e00\u4e9b\u7528\u6237\u767b\u5f55\u767b\u51fa\u5904\u7406\u7684 API\uff0c\u6bd4\u5982 <code>login</code>, <code>logout</code> \u7b49\u7b49\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7 <code>require('@weex-module/moduleName)[methodName](arg1, arg2, ...)</code> (<a href="../references/api.md">Module APIs</a>) \u7684\u65b9\u5f0f\u8c03\u7528\u4f60\u7684 API.</p>
+<p>\u6b65\u9aa4:</p>
+<ol>
+<li>\u5b9e\u73b0\u4f60\u7684 API module.</li>
+<li>\u5728\u4f60\u7684 API \u5b89\u88c5\u6a21\u5757\u91cc\u66b4\u9732\u4e00\u4e2a <code>init</code> \u65b9\u6cd5\uff0c\u5e76\u5728\u8fd9\u4e2a\u65b9\u6cd5\u91cc\u9762\u4f7f\u7528 <code>Weex.registerAPIModules</code> \u6ce8\u518c\u4f60\u7684 API module.</li>
+</ol>
+<p><strong>\u8fd9\u91cc\u7528\u4e00\u4e2a\u4f8b\u5b50\u5c55\u793a\u5982\u4f55\u6269\u5c55\u4e00\u4e2a\u65b0\u7684 API \u6a21\u5757</strong></p>
+<p>\u521b\u5efa\u4e00\u4e2a\u6587\u4ef6 <code>user.js</code>\uff0c\u5728\u5176\u4e2d\u5b9a\u4e49\u767b\u5f55\u767b\u51fa <code>login/logout</code> \u65b9\u6cd5.</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">const</span> user = {</div><div class="line"> <span class="comment">// \u5b9a\u4e49\u7528\u6237\u767b\u5f55\u65b9\u6cd5.</span></div><div class="line"> login (callbackId) {</div><div class="line"> login.then(<span class="function"><span class="params">res</span> =></span> {</div><div class="line"> <span class="keyword">this</span>.sender.performCallback(callbackId, res)</div><div class="line"> }).catch(<span class="function"><span class="params">err</span> =></span> {</div><div class="line"> <span class="keyword">this</span>.sender.performCallback(callbackId, err)</div><div class="line"> })</div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="comment">// \u5b9a\u4e49\u7528\u6237\u767b\u51fa\u65b9\u6cd5.</span></div><div class="line"> logout (callbackId) {</div><div class="line"> logout.then(<span class="function"><s
pan class="params">res</span> =></span> {</div><div class="line"> <span class="keyword">this</span>.sender.performCallback(callbackId, res)</div><div class="line"> }).catch(<span class="function"><span class="params">err</span> =></span> {</div><div class="line"> <span class="keyword">this</span>.sender.performCallback(callbackId, err)</div><div class="line"> })</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// \u5b9a\u4e49user\u6a21\u5757\u7684\u5143 (meta) \u4fe1\u606f.</span></div><div class="line"><span class="keyword">const</span> meta = {</div><div class="line"> <span class="attr">user</span>: [{</div><div class="line"> <span class="attr">name</span>: <span class="string">'login'</span>,</div><div class="line"> <span class="attr">args</span>: [<span class="string">'function'</span>]</div><div class="line"> }, {</div><div class="line"> <span class
="attr">name</span>: <span class="string">'logout'</span>,</div><div class="line"> <span class="attr">args</span>: [<span class="string">'function'</span>]</div><div class="line"> }]</div><div class="line">}</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> init (Weex) {</div><div class="line"> <span class="comment">// \u6ce8\u518c\u8fd9\u4e2a\u6a21\u5757\uff0c\u6700\u540e\u4e00\u4e2a\u53c2\u6570\u662f\u6a21\u5757\u7684\u5143\u4fe1\u606f.</span></div><div class="line"> Weex.registerApiModule(<span class="string">'user'</span>, user, meta)</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u8fd9\u4e2a\u7b80\u5355\u7684 user helper \u6a21\u5757\u5c31\u5b9e\u73b0\u597d\u4e86\uff0c\u53ef\u4ee5\u53d1\u5e03\u5230 npm \u4e0a\uff0c\u6211\u4eec\u53ef\u4ee5\u7ed9\u8fd9\u4e2a\u6a21\u5757\u53d6\u4e2a\u540d\u5b57\uff0c\u6bd4\u5982\u8bf4 <code>weex-user-helper</code>\u3002</p>
+<p>\u5728\u4f60\u7684\u65b0\u7684 Weex \u9879\u76ee\u91cc\u5b89\u88c5\u8fd9\u4e2a\u6a21\u5757:</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">import</span> Weex <span class="keyword">from</span> <span class="string">'weex-html5'</span></div><div class="line"><span class="keyword">import</span> user <span class="keyword">from</span> <span class="string">'weex-user-helper'</span></div><div class="line"></div><div class="line">Weex.install(user)</div></pre></td></tr></table></figure>
+<p>\u5b89\u88c5\u4e86\u8fd9\u4e2a\u6a21\u5757\uff0c\u4f60\u5c31\u53ef\u4ee5\u5728 DSL \u4ee3\u7801\u91cc\u5f15\u7528\u8fd9\u4e2a\u6a21\u5757\u5e72\u70b9\u4e8b\u60c5\u4e86:</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"btn"</span> <span class="attr">onclick</span>=<span class="string">"handleClick"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>LOGIN<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">scrip
t</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> userHelper = <span class="built_in">require</span>(<span class="string">'@weex-module/user'</span>)</div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">handleClick</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> userHelper.login(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="comment">// ... do sth. in callback.</span></div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>&g
t;</span></div></pre></td></tr></table></figure>
+<h3 id="\u5b9a\u5236\u52a0\u8f7d\u5668loader"><a href="#\u5b9a\u5236\u52a0\u8f7d\u5668loader" class="headerlink" title="\u5b9a\u5236\u52a0\u8f7d\u5668loader"></a>\u5b9a\u5236\u52a0\u8f7d\u5668loader</h3><p><strong>Loader\u4ec5\u7528\u4e8eweex-html5 (web\u7aef)\u52a0\u8f7ddsl\u6253\u5305\u51fa\u6765\u7684bundle\u4ee3\u7801\uff0cnative\u5e73\u53f0\u6709\u5176\u4ed6\u7684\u52a0\u8f7d\u673a\u5236</strong></p>
+<p>\u5df2\u6709\u7684\u52a0\u8f7d\u5668\u5305\u62ec <code>xhr</code>, <code>jsonp</code> \u548c <code>source</code>. \u4f60\u53ef\u4ee5\u4f7f\u7528 <code>weex.registerLoader</code> \u6ce8\u518c\u4e00\u4e2a\u65b0\u7684\u52a0\u8f7d\u5668\u3002\u4f8b\u5982\uff0c\u4f60\u6709\u4e00\u4e2a\u83b7\u53d6 Weex bundle \u7684\u670d\u52a1 <code>myServe.getWeexBundle</code> , \u901a\u8fc7\u8fd9\u4e2a\u670d\u52a1\u53ef\u4ee5\u52a0\u8f7d weex bundle\uff0c\u4e3a\u6b64\u4f60\u53ef\u4ee5\u5b9a\u4e49\u4e00\u4e2a\u52a0\u8f7d\u5668\uff1a</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">loadByMyServe</span>(<span class="params">pageId, callback</span>) </span>{</div><div class="line"> myServe.getWeexBundle(pageId).then(<span class="function"><span class="keyword">function</span> (<span class="params">bundle</span>) </span>{</div><div class="line"> callback(bundle)</div><div class="line"> }).catch(<span class="function"><span class="keyword">function</span>(<span class="params">err</span>) </span>{</div><div class="line"> callback(err)</div><div class="line"> })</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// \u66b4\u9732init\u65b9\u6cd5\u7528\u4e8eWeex\u5b89\u88c5\u6b64\u52a0\u8f7d\u5668.</span></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> init (Weex) {</div><di
v class="line"> Weex.registerLoader(<span class="string">'myserve'</span>, loadByMyServe)</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u5728\u4f60\u7684 weex-html5 \u9879\u76ee\u7684\u542f\u52a8\u6587\u4ef6\u91cc\u5b89\u88c5\u5e76\u4f7f\u7528\u8fd9\u4e2a\u52a0\u8f7d\u5668\uff1a</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">import</span> Weex <span class="keyword">from</span> <span class="string">'weex-html5'</span></div><div class="line"></div><div class="line"><span class="comment">// \u6216\u8005import from './myserve.js'\uff0c\u4e0d\u7ba1\u662fimport\u4e00\u4e2anpm\u6a21\u5757\u8fd8\u662fimport\u4e00\u4e2a\u6587\u4ef6.</span></div><div class="line"><span class="keyword">import</span> loader <span class="keyword">from</span> <span class="string">'myLoader'</span></div><div class="line"></div><div class="line">Weex.install(loader)</div><div class="line"></div><div class="line"><span class="comment">// \u5728init\u65b9\u6cd5\u91cc\u4f7f\u7528\u8fd9\u4e2a\u52a0\u8f7d\u5668\u52a0\u8f7dbundle\u6587\u4ef6.</span></div><div class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">getUrlParam</span> (<span class="params">key
</span>) </span>{</div><div class="line"> <span class="keyword">const</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">'[?|&]'</span> + key + <span class="string">'=([^&]+)'</span>)</div><div class="line"> <span class="keyword">const</span> match = location.search.match(reg)</div><div class="line"> <span class="keyword">return</span> match && match[<span class="number">1</span>]</div><div class="line"> }</div><div class="line"> <span class="keyword">const</span> page = getUrlParam(<span class="string">'page'</span>) || <span class="string">'examples/build/index.js'</span></div><div class="line"> Weex.init({</div><div class="line"> <span class="attr">appId</span>: location.href,</div><div class="line"> <span class="attr">loader</span>: <span class="string">'myserve'</span>, <span class="comment">// \u4f7f\u7528\u521a\u624d\u5b9a\u4e49\u7684loader\u7c7b\u578b</span></div><div class="line"> source: page,</
div><div class="line"> <span class="attr">rootId</span>: <span class="string">'weex'</span></div><div class="line"> })</div><div class="line">})();</div></pre></td></tr></table></figure>
+<p>\u4ee5\u4e0a\u662f Weex \u5e26\u6765\u7684\u6269\u5c55\u6027\u91cc\u6bd4\u8f83\u4e3b\u8981\u7684\u4e00\u90e8\u5206\uff0c\u66f4\u591a\u5b9e\u73b0\u7ec6\u8282\u53ef\u4ee5\u5728 <a href="https://github.com/alibaba/weex" target="_blank" rel="external">weex \u9879\u76ee\u4ee3\u7801\u5e93</a>\u4ee5\u53ca weex \u7684\u5f00\u6e90\u793e\u533a\u91cc\u627e\u5230\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/advanced/extend-to-html5.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/extend-to-html5.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[07/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/syntax/display-logic.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/syntax/display-logic.html b/content/cn/v-0.10/guide/syntax/display-logic.html
new file mode 100644
index 0000000..5c2a710
--- /dev/null
+++ b/content/cn/v-0.10/guide/syntax/display-logic.html
@@ -0,0 +1,574 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u5c55\u793a\u903b\u8f91\u63a7\u5236 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5c55\u793a\u903b\u8f91\u63a7\u5236Weex \u652f\u6301\u901a\u8fc7\u4e24\u79cd\u7279\u6b8a\u7684\u7279\u6027 if \u548c repeat \u786e\u5b9a\u7ec4\u4ef6\u7684\u663e\u793a\u903b\u8f91\uff0c\u8fd9\u4f1a\u4f7f\u5f97\u6574\u4e2a\u754c\u9762\u7684\u5c55\u793a\u903b\u8f91\u63a7\u5236\u66f4\u52a0\u7b80\u5355\u7075\u6d3b\u3002
+if\u901a\u8fc7\u8bbe\u7f6e if \u7279\u6027\u503c\uff0c\u4f60\u53ef\u4ee5\u63a7\u5236\u5f53\u524d\u7ec4\u4ef6\u662f\u5426\u663e\u793a\u3002\u5982\u679c\u503c\u4e3a\u771f\uff0c\u5219\u5f53\u524d\u7ec4\u4ef6\u4f1a\u88ab\u6e32\u67d3\u51fa\u6765\uff0c\u5982\u679c\u503c\u4e3a\u5047\u5219\u4f1a\u88ab\u79fb\u9664\u3002\u4f8b\u5982\uff1a
+&lt;template&gt; &lt;div&gt; &lt;text onclick="toggle"&gt;Toggle Im">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u5c55\u793a\u903b\u8f91\u63a7\u5236">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/syntax/display-logic.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5c55\u793a\u903b\u8f91\u63a7\u5236Weex \u652f\u6301\u901a\u8fc7\u4e24\u79cd\u7279\u6b8a\u7684\u7279\u6027 if \u548c repeat \u786e\u5b9a\u7ec4\u4ef6\u7684\u663e\u793a\u903b\u8f91\uff0c\u8fd9\u4f1a\u4f7f\u5f97\u6574\u4e2a\u754c\u9762\u7684\u5c55\u793a\u903b\u8f91\u63a7\u5236\u66f4\u52a0\u7b80\u5355\u7075\u6d3b\u3002
+if\u901a\u8fc7\u8bbe\u7f6e if \u7279\u6027\u503c\uff0c\u4f60\u53ef\u4ee5\u63a7\u5236\u5f53\u524d\u7ec4\u4ef6\u662f\u5426\u663e\u793a\u3002\u5982\u679c\u503c\u4e3a\u771f\uff0c\u5219\u5f53\u524d\u7ec4\u4ef6\u4f1a\u88ab\u6e32\u67d3\u51fa\u6765\uff0c\u5982\u679c\u503c\u4e3a\u5047\u5219\u4f1a\u88ab\u79fb\u9664\u3002\u4f8b\u5982\uff1a
+&lt;template&gt; &lt;div&gt; &lt;text onclick="toggle"&gt;Toggle Im">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.945Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u5c55\u793a\u903b\u8f91\u63a7\u5236">
+<meta name="twitter:description" content="\u5c55\u793a\u903b\u8f91\u63a7\u5236Weex \u652f\u6301\u901a\u8fc7\u4e24\u79cd\u7279\u6b8a\u7684\u7279\u6027 if \u548c repeat \u786e\u5b9a\u7ec4\u4ef6\u7684\u663e\u793a\u903b\u8f91\uff0c\u8fd9\u4f1a\u4f7f\u5f97\u6574\u4e2a\u754c\u9762\u7684\u5c55\u793a\u903b\u8f91\u63a7\u5236\u66f4\u52a0\u7b80\u5355\u7075\u6d3b\u3002
+if\u901a\u8fc7\u8bbe\u7f6e if \u7279\u6027\u503c\uff0c\u4f60\u53ef\u4ee5\u63a7\u5236\u5f53\u524d\u7ec4\u4ef6\u662f\u5426\u663e\u793a\u3002\u5982\u679c\u503c\u4e3a\u771f\uff0c\u5219\u5f53\u524d\u7ec4\u4ef6\u4f1a\u88ab\u6e32\u67d3\u51fa\u6765\uff0c\u5982\u679c\u503c\u4e3a\u5047\u5219\u4f1a\u88ab\u79fb\u9664\u3002\u4f8b\u5982\uff1a
+&lt;template&gt; &lt;div&gt; &lt;text onclick="toggle"&gt;Toggle Im">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link current ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link current ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u5c55\u793a\u903b\u8f91\u63a7\u5236
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.945Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5c55\u793a\u903b\u8f91\u63a7\u5236"><a href="#\u5c55\u793a\u903b\u8f91\u63a7\u5236" class="headerlink" title="\u5c55\u793a\u903b\u8f91\u63a7\u5236"></a>\u5c55\u793a\u903b\u8f91\u63a7\u5236</h1><p>Weex \u652f\u6301\u901a\u8fc7\u4e24\u79cd\u7279\u6b8a\u7684\u7279\u6027 <code>if</code> \u548c <code>repeat</code> \u786e\u5b9a\u7ec4\u4ef6\u7684\u663e\u793a\u903b\u8f91\uff0c\u8fd9\u4f1a\u4f7f\u5f97\u6574\u4e2a\u754c\u9762\u7684\u5c55\u793a\u903b\u8f91\u63a7\u5236\u66f4\u52a0\u7b80\u5355\u7075\u6d3b\u3002</p>
+<h2 id="if"><a href="#if" class="headerlink" title="if"></a><code>if</code></h2><p>\u901a\u8fc7\u8bbe\u7f6e <code>if</code> \u7279\u6027\u503c\uff0c\u4f60\u53ef\u4ee5\u63a7\u5236\u5f53\u524d\u7ec4\u4ef6\u662f\u5426\u663e\u793a\u3002\u5982\u679c\u503c\u4e3a\u771f\uff0c\u5219\u5f53\u524d\u7ec4\u4ef6\u4f1a\u88ab\u6e32\u67d3\u51fa\u6765\uff0c\u5982\u679c\u503c\u4e3a\u5047\u5219\u4f1a\u88ab\u79fb\u9664\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"toggle"</span>></span>Toggle Image<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">if</span>=<span class="string">"shown"</span> <span class="attr">src</span>=<span class="string">"{{imageUrl}}"</span> <span class="attr">style</span>=<span class="string">"width: 512; height: 512;"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span c
lass="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">imageUrl</span>: <span class="string">'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png'</span>,</div><div class="line"> <span class="attr">shown</span>: <span class="literal">true</span></div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">toggle</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.shown = !<span class="keyword">this</span>.shown</div><div
class="line"> }</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/e0999a51fa404f48bbae177f1569cd0e" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p><em>\u6ce8\u610f\u4e8b\u9879\uff1a<code>if="condition"</code> \u548c <code>if="{{condition}}"</code> \u90fd\u662f\u53ef\u4ee5\u7684\uff0c\u4e24\u8005\u7b49\u4ef7\u4f7f\u7528\u3002</em></p>
+<p><em>\u6ce8\u610f\u4e8b\u9879\uff1a<code>if</code> \u4e0d\u80fd\u7528\u5728 <code><template></code> \u7684\u6839\u7ec4\u4ef6\u4e0a\uff0c\u5426\u5219\u5c06\u65e0\u6cd5\u88ab Weex \u6b63\u5e38\u7684\u8bc6\u522b\u548c\u5904\u7406\u3002</em></p>
+<h3 id="if-\u4e0d\u4f1a\u963b\u65ad\u5b50\u5143\u7d20\u7684\u6570\u636e\u66f4\u65b0"><a href="#if-\u4e0d\u4f1a\u963b\u65ad\u5b50\u5143\u7d20\u7684\u6570\u636e\u66f4\u65b0" class="headerlink" title="if \u4e0d\u4f1a\u963b\u65ad\u5b50\u5143\u7d20\u7684\u6570\u636e\u66f4\u65b0"></a><code>if</code> \u4e0d\u4f1a\u963b\u65ad\u5b50\u5143\u7d20\u7684\u6570\u636e\u66f4\u65b0</h3><p>\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50\u5728\u6570\u636e\u66f4\u65b0\u540e <code>item</code> \u6216 <code>item.image</code> \u4e0d\u5b58\u5728\u7684\u60c5\u51b5\u4e0b\u4f1a\u62a5\u9519\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">if</span>=<span class="string">"{{(item && item.image)}}"</span> <span class="attr">style</span>=<span class="string">"width: 200; height: 200;"</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">style</span>=<span class="string">"width: 100; height: 100;"</span> <span class="attr">src</span>=<span class="string">"{{item.image.url}}"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figur
e>
+<p>\u539f\u56e0\u5728\u4e8e Weex \u672c\u8eab\u7684\u673a\u5236\u662f\u6570\u636e\u66f4\u65b0\u5728 DOM \u66f4\u65b0\u4e4b\u524d\uff0c\u56e0\u6b64 <code>if</code> \u6570\u636e\u66f4\u65b0\u4e4b\u540e\uff0c\u4e0d\u652f\u6301\u963b\u65ad\u5176\u5b50\u5143\u7d20\u7684\u6570\u636e\u66f4\u65b0\uff0c\u5373 <code>if</code> \u6570\u636e\u66f4\u65b0\u4e3a <code>false</code> \u4e4b\u540e\uff0c\u5185\u90e8\u7684\u5b50\u5143\u7d20\u4ecd\u7136\u4f1a\u89e6\u53d1\u81ea\u8eab\u7684\u6570\u636e\u66f4\u65b0\uff0c\u627e\u4e0d\u5230\u5bf9\u5e94\u5b57\u6bb5\uff0c\u5bfc\u81f4\u62a5\u9519\uff0c\u53ef\u53c2\u8003\u8fd9\u4e2a <a href="https://github.com/alibaba/weex/issues/1758" target="_blank" rel="external">issue</a>\u3002</p>
+<p>\u56e0\u6b64\uff0c\u6709\u4e24\u79cd\u89e3\u51b3\u65b9\u6848\uff1a</p>
+<ul>
+<li><p>\u4e3a <code>img</code> \u7ec4\u4ef6\u7684 <code>src</code> \u4e5f\u589e\u52a0\u5bb9\u9519\u65b9\u6848\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">if</span>=<span class="string">"{{(item && item.image)}}"</span> <span class="attr">style</span>=<span class="string">"width: 200; height: 200;"</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">style</span>=<span class="string">"width: 100; height: 100;"</span> <span class="attr">src</span>=<span class="string">"{{item && item.image && item.image.url}}"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+</li>
+<li><p>\u5982\u679c\u662f\u5728 <code>repeat</code> \u7684\u5217\u8868\u4e2d\uff0c\u8fd8\u53ef\u4ee5\u4f7f\u7528 <code>track-by</code>\u5f3a\u5236\u4e0d\u590d\u7528\u5b50\u5143\u7d20\u89e3\u51b3\u3002</p>
+</li>
+</ul>
+<h2 id="repeat"><a href="#repeat" class="headerlink" title="repeat"></a><code>repeat</code></h2><p><code>repeat</code> \u7279\u6027\u7528\u4e8e\u91cd\u590d\u6e32\u67d3\u4e00\u7ec4\u76f8\u540c\u7684\u7ec4\u4ef6\u3002\u5b83\u7ed1\u5b9a\u7684\u6570\u636e\u7c7b\u578b\u5fc5\u987b\u4e3a\u6570\u7ec4\uff0c\u6570\u7ec4\u91cc\u7684\u6bcf\u4e00\u9879\u6570\u636e\u53ef\u4ee5\u4f53\u73b0\u5728\u4e0d\u540c\u7684\u7ec4\u4ef6\u7279\u6027\u3001\u6837\u5f0f\u3001\u4e8b\u4ef6\u7ed1\u5b9a\u7b49\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">repeat</span>=<span class="string">"person in list"</span> <span class="attr">class</span>=<span class="string">"{{person.gender}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{person.nickname}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line">
</div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.male</span> { <span class="attribute">background-color</span>: <span class="number">#9999ff</span>; }</div><div class="line"> <span class="selector-class">.female</span> { <span class="attribute">background-color</span>: <span class="number">#ff9999</span>; }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">list</span>: [</div><div class="line"> { <span class="attr">gender</span>: <span class="string">'male'</span>, <span
class="attr">nickname</span>: <span class="string">'Li Lei'</span> },</div><div class="line"> { <span class="attr">gender</span>: <span class="string">'female'</span>, <span class="attr">nickname</span>: <span class="string">'Han Meimei'</span> },</div><div class="line"> { <span class="attr">gender</span>: <span class="string">'male'</span>, <span class="attr">nickname</span>: <span class="string">'Jim Green'</span> }</div><div class="line"> ]</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/8c87aac2820531090181c32fca41e913" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u6b64\u5916\uff0c<code>repeat</code> \u7279\u6027\u8fd8\u652f\u6301\u7ed1\u5b9a\u6570\u7ec4\u4e2d\u6570\u636e\u9879\u76ee\u7684\u7d22\u5f15\u503c\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">repeat</span>=<span class="string">"(index, person) in list"</span> <span class="attr">class</span>=<span class="string">"{{person.gender}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{index}} - {{person.nickname}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template<
/span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.male</span> { <span class="attribute">background-color</span>: <span class="number">#9999ff</span>; }</div><div class="line"> <span class="selector-class">.female</span> { <span class="attribute">background-color</span>: <span class="number">#ff9999</span>; }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">list</span>: [</div><div class="line"> { <span class="attr">gender</span>:
<span class="string">'male'</span>, <span class="attr">nickname</span>: <span class="string">'Li Lei'</span> },</div><div class="line"> { <span class="attr">gender</span>: <span class="string">'female'</span>, <span class="attr">nickname</span>: <span class="string">'Han Meimei'</span> },</div><div class="line"> { <span class="attr">gender</span>: <span class="string">'male'</span>, <span class="attr">nickname</span>: <span class="string">'Jim Green'</span> }</div><div class="line"> ]</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/65d348256ab5c54aa996d3ee6b4ea115" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u6bcf\u4e00\u4e2a\u6635\u79f0\u4e4b\u524d\u90fd\u6709\u5bf9\u5e94\u6570\u7ec4\u9879\u76ee\u7684\u7d22\u5f15\u503c\u3002</p>
+<p><em>\u6ce8\u610f\u4e8b\u9879\uff1a\u540c\u6837\u7684 <code>repeat="..."</code> \u548c <code>repeat="{{...}}"</code> \u90fd\u662f\u53ef\u4ee5\u7684\uff0c\u4e24\u8005\u7b49\u4ef7\u4f7f\u7528\u3002</em></p>
+<p><em>\u6ce8\u610f\u4e8b\u9879\uff1a<code>if</code> \u4e0d\u80fd\u7528\u5728 <code><template></code> \u7684\u6839\u7ec4\u4ef6\u4e0a\uff0c\u5426\u5219\u5c06\u65e0\u6cd5\u88ab Weex \u6b63\u5e38\u7684\u8bc6\u522b\u548c\u5904\u7406\u3002</em></p>
+<p><strong>\u6ce8\u610f\u4e8b\u9879: \u5f53\u4f60\u4fee\u6539 <code>repeat</code> \u4e2d\u7684\u6570\u7ec4\u65f6\uff0c\u5728\u5199\u6cd5\u4e0a\u4f1a\u53d7\u5230\u4e00\u5b9a\u7684\u9650\u5236\uff0c\u5177\u4f53\u5982\u4e0b\uff1a</strong></p>
+<p><strong>\u76f4\u63a5\u901a\u8fc7\u201c\u89d2\u6807\u201d\u4fee\u6539\u6570\u7ec4\u7684\u67d0\u4e2a\u9879\u76ee (\u5982 <code>this.items[0] = ...</code>) \u662f\u4e0d\u4f1a\u89e6\u53d1\u89c6\u56fe\u81ea\u52a8\u66f4\u65b0\u7684\u3002\u6211\u4eec\u5728\u6570\u7ec4\u7684\u539f\u578b\u4e0a\u63d0\u4f9b\u4e86\u4e00\u4e2a\u989d\u5916\u7684\u65b9\u6cd5\uff1a<code>this.items.$set(index, item)</code> \u6765\u5b8c\u6210\u76f8\u540c\u7684\u4e8b\u60c5\u3002</strong></p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="comment">// \u548c `this.items[0] = ...` \u4f5c\u7528\u76f8\u540c\uff0c\u4f46\u4f1a\u81ea\u52a8\u89e6\u53d1\u89c6\u56fe\u66f4\u65b0</span></div><div class="line"><span class="keyword">this</span>.items.$set(<span class="number">0</span>, { <span class="attr">childMsg</span>: <span class="string">'Changed!'</span>})</div></pre></td></tr></table></figure>
+<p><strong>\u76f4\u63a5\u901a\u8fc7\u4fee\u6539 <code>length</code> \u6765\u6539\u53d8\u6570\u7ec4\u957f\u5ea6 (\u5982 <code>this.items.length = 0</code>) \u4e5f\u662f\u4e0d\u4f1a\u89e6\u53d1\u89c6\u56fe\u81ea\u52a8\u66f4\u65b0\u7684\u3002\u6211\u4eec\u63a8\u8350\u60a8\u76f4\u63a5\u8d4b\u503c\u4e00\u4e2a\u65b0\u7684\u7a7a\u6570\u7ec4\u628a\u65e7\u7684\u66ff\u6362\u6389\u3002</strong></p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="comment">// \u548c `this.items.length = 0` \u4f5c\u7528\u76f8\u540c\uff0c\u4f46\u4f1a\u81ea\u52a8\u89e6\u53d1\u89c6\u56fe\u66f4\u65b0</span></div><div class="line"><span class="keyword">this</span>.items = []</div></pre></td></tr></table></figure>
+<h3 id="repeat-\u7279\u6027\u4e2d\u7684-index-\u5f62\u53c2"><a href="#repeat-\u7279\u6027\u4e2d\u7684-index-\u5f62\u53c2" class="headerlink" title="repeat \u7279\u6027\u4e2d\u7684 $index \u5f62\u53c2"></a><code>repeat</code> \u7279\u6027\u4e2d\u7684 <code>$index</code> \u5f62\u53c2</h3><p>\u5728 <code>repeat</code> \u7279\u6027\u503c\u4e2d\uff0c\u5982\u679c\u6ca1\u6709\u6307\u5b9a\u7d22\u5f15\u503c\u7684\u5f62\u53c2\uff0c\u5219\u53ef\u4ee5\u901a\u8fc7\u7ed1\u5b9a\u5f62\u53c2 <code>$index</code> \u6765\u5c55\u793a\u6570\u7ec4\u9879\u76ee\u7684\u7d22\u5f15\u503c\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">repeat</span>=<span class="string">"person in list"</span> <span class="attr">class</span>=<span class="string">"{{person.gender}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{$index}} - {{person.nickname}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>&g
t;</span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.male</span> { <span class="attribute">background-color</span>: <span class="number">#9999ff</span>; }</div><div class="line"> <span class="selector-class">.female</span> { <span class="attribute">background-color</span>: <span class="number">#ff9999</span>; }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">list</span>: [</div><div class="line"> { <span class="attr">gender</span>: <span cl
ass="string">'male'</span>, <span class="attr">nickname</span>: <span class="string">'Li Lei'</span> },</div><div class="line"> { <span class="attr">gender</span>: <span class="string">'female'</span>, <span class="attr">nickname</span>: <span class="string">'Han Meimei'</span> },</div><div class="line"> { <span class="attr">gender</span>: <span class="string">'male'</span>, <span class="attr">nickname</span>: <span class="string">'Jim Green'</span> }</div><div class="line"> ]</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/65d348256ab5c54aa996d3ee6b4ea115" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u6e32\u67d3\u6548\u679c\u548c\u4e0a\u4e00\u4e2a\u4f8b\u5b50\u5e94\u8be5\u662f\u76f8\u540c\u7684\u3002</p>
+<h3 id="\u5728-repeat-\u4e2d\u4f7f\u7528-track-by-\u7279\u6027\u8ffd\u8e2a\u53d8\u5316"><a href="#\u5728-repeat-\u4e2d\u4f7f\u7528-track-by-\u7279\u6027\u8ffd\u8e2a\u53d8\u5316" class="headerlink" title="\u5728 repeat \u4e2d\u4f7f\u7528 track-by \u7279\u6027\u8ffd\u8e2a\u53d8\u5316"></a>\u5728 <code>repeat</code> \u4e2d\u4f7f\u7528 <code>track-by</code> \u7279\u6027\u8ffd\u8e2a\u53d8\u5316</h3><p>\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u5f53\u66f4\u65b0 <code>repeat</code> \u4e2d\u7ed1\u5b9a\u7684\u6570\u7ec4\u65f6\uff0c\u6240\u6709\u6570\u7ec4\u9879\u76ee\u5173\u8054\u7684\u7ec4\u4ef6\u90fd\u4f1a\u88ab\u91cd\u65b0\u6e32\u67d3\u3002\u5982\u679c\u5176\u4e2d\u90e8\u5206\u7d22\u5f15\u503c\u5bf9\u5e94\u7684\u6570\u636e\u672a\u53d1\u751f\u53d8\u66f4\uff0c\u90a3\u4e48\u6700\u597d\u662f\u8ba9\u8fd9\u4e9b\u7ec4\u4ef6\u5728\u6e32\u67d3\u5c42\u4fdd\u6301\u539f\u6837\uff0c\u4ec5\u66f4\u65b0\u6570\u636e\u6709\u53d8\u5316\u7684\u8282\u70b9\u3002Weex \u63d0\u4f9b\u4e86 <code>track-by</code> \u7279\u6027\u6765\u8f85\u52a9\u5224\u65ad\u54ea\u4e9b\u6570\u7ec4\u9879\u76ee\u53d1\u751f\u4e86\u6539\u53d8\u3002</p>
+<p>\u9996\u5148 <code>track-by</code> \u7279\u6027\u7684\u503c\u5fc5\u987b\u662f\u5728\u6bcf\u4e00\u6761\u6570\u7ec4\u9879\u76ee\u4e2d\u90fd\u6709\u4e14\u503c\u6ca1\u6709\u91cd\u590d\u7684\u4e00\u4e2a\u5b57\u6bb5\u540d\uff0c\u7528\u6765\u533a\u5206\u548c\u8ffd\u8e2a\u6bcf\u4e00\u6761\u6570\u636e\u9879\u589e\u5220\u4e0e\u5426\u6216\u6b21\u5e8f\u53d8\u5316\u4e0e\u5426\u7684\u5173\u952e\u4f9d\u636e\u3002\u6bcf\u5f53\u6570\u7ec4\u53d1\u751f\u53d8\u5316\u4e4b\u540e\uff0c\u65b0\u8001\u6570\u7ec4\u6570\u636e\u4f1a\u6839\u636e <code>track-by</code> \u7279\u6027\u503c\u6240\u4ee3\u8868\u7684\u5b57\u6bb5\u91cd\u65b0\u5339\u914d\uff0c\u7136\u540e\u518d\u51b3\u5b9a\u6e32\u67d3\u5c42\u5e94\u8be5\u65b0\u5efa\u6216\u5220\u9664\u4e00\u4e2a\u7ec4\u4ef6\uff1f\u8fd8\u662f\u79fb\u52a8\u4e00\u4e2a\u7ec4\u4ef6\uff1f\u8fd8\u662f\u8bb2\u7ec4\u4ef6\u4fdd\u6301\u539f\u6765\u7684\u4f4d\u7f6e\u3002\u9ed8\u8ba4\u7684 <code>track-by</code> \u7684\u503c\u5c31\u662f\u6570\u7ec4\u7684\u7d22\u5f15\u503c\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">repeat</span>=<span class="string">"person in list"</span> <span class="attr">class</span>=<span class="string">"{{person.gender}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{$index}} - {{person.id}} - {{person.nickname}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>----<span class="tag"></<span class="name"
>text</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">repeat</span>=<span class="string">"person in list"</span> <span class="attr">class</span>=<span class="string">"{{person.gender}}"</span> <span class="attr">track-by</span>=<span class="string">"id"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{$index}} - {{person.id}} - {{person.nickname}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>----<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="comment"><!-- something wrong here: duplicated track-by value --></span></di
v><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">repeat</span>=<span class="string">"person in list"</span> <span class="attr">class</span>=<span class="string">"{{person.gender}}"</span> <span class="attr">track-by</span>=<span class="string">"nickname"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{$index}} - {{person.id}} - {{person.nickname}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span clas
s="css"></span></div><div class="line"> <span class="selector-class">.male</span> { <span class="attribute">background-color</span>: <span class="number">#9999ff</span>; }</div><div class="line"> <span class="selector-class">.female</span> { <span class="attribute">background-color</span>: <span class="number">#ff9999</span>; }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">list</span>: [</div><div class="line"> { <span class="attr">id</span>: <span class="number">11</span>, <span class="attr">gender</span>: <span class="string">'male'</span>, <span class="attr">nickname</span>: <span
class="string">'Li Lei'</span> },</div><div class="line"> { <span class="attr">id</span>: <span class="number">22</span>, <span class="attr">gender</span>: <span class="string">'female'</span>, <span class="attr">nickname</span>: <span class="string">'Han Meimei'</span> },</div><div class="line"> { <span class="attr">id</span>: <span class="number">33</span>, <span class="attr">gender</span>: <span class="string">'male'</span>, <span class="attr">nickname</span>: <span class="string">'Jim Green'</span> }</div><div class="line"> ]</div><div class="line"> },</div><div class="line"> <span class="attr">ready</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.list.unshift({ <span class="attr">id</span>: <span class="number">44</span>, <span class="attr">gender</span>: <span class="string">'female'</span>, <span clas
s="attr">nickname</span>: <span class="string">'Han Meimei'</span> })</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/c124bfc21e6d92271356acbea232089b" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u7b2c\u4e00\u4e2a\u5217\u8868\u7684\u66f4\u65b0\u7b56\u7565\u662f\uff1a</p>
+<ol>
+<li>\u628a\u7b2c\u4e00\u4e2a <code><text></code> \u8d4b\u503c\u4e3a <code>Han Meimei</code></li>
+<li>\u7b2c\u4e8c\u4e2a\u8d4b\u503c\u4e3a <code>Li Lei</code></li>
+<li>\u7b2c\u4e09\u4e2a\u8d4b\u503c\u4e3a <code>Han Meimei</code></li>
+<li>\u6700\u540e\u65b0\u5efa\u4e00\u4e2a <code><text></code> \u5e76\u8d4b\u503c\u4e3a <code>Jin Green</code></li>
+</ol>
+<p>\u7b2c\u4e8c\u4e2a\u5217\u8868\u7684\u66f4\u65b0\u7b56\u7565\u662f\uff1a</p>
+<ol>
+<li>\u5728\u6700\u524d\u9762\u65b0\u5efa\u4e00\u4e2a <code><text></code> \u5e76\u8d4b\u503c\u4e3a <code>Han Meimei</code></li>
+</ol>
+<p>\u7b2c\u4e09\u4e2a\u5217\u8868\u7684\u66f4\u65b0\u4f1a\u9047\u5230\u95ee\u9898\uff0c\u56e0\u4e3a\u6709\u4e24\u4e2a\u6570\u7ec4\u9879\u76ee\u7684 <code>nickname</code> \u503c\u90fd\u662f <code>Han Meimei</code> \u6240\u4ee5\u9020\u6210\u610f\u6599\u4e4b\u5916\u7684\u6e32\u67d3\u7ed3\u679c (\u53ea\u6e32\u67d3\u4e86\u4e09\u4e2a\u6570\u7ec4\u9879\u76ee)\u3002</p>
+<p>\u4e0b\u4e00\u8282\uff1a<a href="./render-logic.html">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/syntax/display-logic.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/syntax/events.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/syntax/events.html b/content/cn/v-0.10/guide/syntax/events.html
new file mode 100644
index 0000000..a74e6ac
--- /dev/null
+++ b/content/cn/v-0.10/guide/syntax/events.html
@@ -0,0 +1,540 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u4e8b\u4ef6\u5904\u7406 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u4e8b\u4ef6\u5904\u7406Weex \u5141\u8bb8\u5bf9 &lt;template&gt; \u4e2d\u7684\u5143\u7d20\u7ed1\u5b9a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u3002
+\u57fa\u672c\u8bed\u6cd5\u4ee5 on... \u5f00\u5934\u7684\u5c31\u662f\u7528\u4e8e\u7ed1\u5b9a\u4e8b\u4ef6\u7684\u7279\u6027\uff0c\u7279\u6027\u540d\u4e2d on \u4e4b\u540e\u7684\u90e8\u5206\u5c31\u662f\u4e8b\u4ef6\u7684\u7c7b\u578b\uff0c\u7279\u6027\u7684\u503c\u5c31\u662f\u5904\u7406\u8be5\u4e8b\u4ef6\u7684\u51fd\u6570\u540d\u3002\u51fd\u6570\u540d\u5916\u4e0d\u9700\u8981\u6dfb\u52a0 mustache \u8bed\u6cd5\u4e2d\u7684\u5927\u62ec\u53f7\u3002\u4f8b\u5982\uff1a
+&lt;template&gt; &lt;div&gt; &lt;text onclick="toggle"&gt">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u4e8b\u4ef6\u5904\u7406">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/syntax/events.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u4e8b\u4ef6\u5904\u7406Weex \u5141\u8bb8\u5bf9 &lt;template&gt; \u4e2d\u7684\u5143\u7d20\u7ed1\u5b9a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u3002
+\u57fa\u672c\u8bed\u6cd5\u4ee5 on... \u5f00\u5934\u7684\u5c31\u662f\u7528\u4e8e\u7ed1\u5b9a\u4e8b\u4ef6\u7684\u7279\u6027\uff0c\u7279\u6027\u540d\u4e2d on \u4e4b\u540e\u7684\u90e8\u5206\u5c31\u662f\u4e8b\u4ef6\u7684\u7c7b\u578b\uff0c\u7279\u6027\u7684\u503c\u5c31\u662f\u5904\u7406\u8be5\u4e8b\u4ef6\u7684\u51fd\u6570\u540d\u3002\u51fd\u6570\u540d\u5916\u4e0d\u9700\u8981\u6dfb\u52a0 mustache \u8bed\u6cd5\u4e2d\u7684\u5927\u62ec\u53f7\u3002\u4f8b\u5982\uff1a
+&lt;template&gt; &lt;div&gt; &lt;text onclick="toggle"&gt">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.946Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u4e8b\u4ef6\u5904\u7406">
+<meta name="twitter:description" content="\u4e8b\u4ef6\u5904\u7406Weex \u5141\u8bb8\u5bf9 &lt;template&gt; \u4e2d\u7684\u5143\u7d20\u7ed1\u5b9a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u3002
+\u57fa\u672c\u8bed\u6cd5\u4ee5 on... \u5f00\u5934\u7684\u5c31\u662f\u7528\u4e8e\u7ed1\u5b9a\u4e8b\u4ef6\u7684\u7279\u6027\uff0c\u7279\u6027\u540d\u4e2d on \u4e4b\u540e\u7684\u90e8\u5206\u5c31\u662f\u4e8b\u4ef6\u7684\u7c7b\u578b\uff0c\u7279\u6027\u7684\u503c\u5c31\u662f\u5904\u7406\u8be5\u4e8b\u4ef6\u7684\u51fd\u6570\u540d\u3002\u51fd\u6570\u540d\u5916\u4e0d\u9700\u8981\u6dfb\u52a0 mustache \u8bed\u6cd5\u4e2d\u7684\u5927\u62ec\u53f7\u3002\u4f8b\u5982\uff1a
+&lt;template&gt; &lt;div&gt; &lt;text onclick="toggle"&gt">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link current ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link current ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u4e8b\u4ef6\u5904\u7406
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.946Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u4e8b\u4ef6\u5904\u7406"><a href="#\u4e8b\u4ef6\u5904\u7406" class="headerlink" title="\u4e8b\u4ef6\u5904\u7406"></a>\u4e8b\u4ef6\u5904\u7406</h1><p>Weex \u5141\u8bb8\u5bf9 <code><template></code> \u4e2d\u7684\u5143\u7d20\u7ed1\u5b9a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u3002</p>
+<h2 id="\u57fa\u672c\u8bed\u6cd5"><a href="#\u57fa\u672c\u8bed\u6cd5" class="headerlink" title="\u57fa\u672c\u8bed\u6cd5"></a>\u57fa\u672c\u8bed\u6cd5</h2><p>\u4ee5 <code>on...</code> \u5f00\u5934\u7684\u5c31\u662f\u7528\u4e8e\u7ed1\u5b9a\u4e8b\u4ef6\u7684\u7279\u6027\uff0c\u7279\u6027\u540d\u4e2d <code>on</code> \u4e4b\u540e\u7684\u90e8\u5206\u5c31\u662f\u4e8b\u4ef6\u7684\u7c7b\u578b\uff0c\u7279\u6027\u7684\u503c\u5c31\u662f\u5904\u7406\u8be5\u4e8b\u4ef6\u7684\u51fd\u6570\u540d\u3002<em>\u51fd\u6570\u540d\u5916\u4e0d\u9700\u8981\u6dfb\u52a0 mustache \u8bed\u6cd5\u4e2d\u7684\u5927\u62ec\u53f7</em>\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"toggle"</span>></span>Toggle: {{result}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line">
<span class="attr">result</span>: <span class="literal">true</span></div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">toggle</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.result = !<span class="keyword">this</span>.result</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/2f9f910a60ffc1ed54c797390d6615e1" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="\u5185\u8054\u4e8b\u4ef6\u5904\u7406\u53c2\u6570"><a href="#\u5185\u8054\u4e8b\u4ef6\u5904\u7406\u53c2\u6570" class="headerlink" title="\u5185\u8054\u4e8b\u4ef6\u5904\u7406\u53c2\u6570"></a>\u5185\u8054\u4e8b\u4ef6\u5904\u7406\u53c2\u6570</h2><p>\u540c\u65f6\u6211\u4eec\u4e5f\u652f\u6301\u5728\u4e8b\u4ef6\u7ed1\u5b9a\u7684\u7279\u6027\u503c\u4e2d\u5185\u8054\u5199\u660e\u88ab\u4f20\u5165\u7684\u53c2\u6570\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"update(1, 2)"</span>></span>Result: {{result}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="l
ine"> <span class="attr">result</span>: <span class="string">'<empty>'</span></div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">update</span>: <span class="function"><span class="keyword">function</span> (<span class="params">x, y</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.result = x + y</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/777056d8985e73567464e2d66cbe73fc" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="\u7279\u6b8a\u7684\u5185\u8054\u4e8b\u4ef6\u5904\u7406\u53c2\u6570"><a href="#\u7279\u6b8a\u7684\u5185\u8054\u4e8b\u4ef6\u5904\u7406\u53c2\u6570" class="headerlink" title="\u7279\u6b8a\u7684\u5185\u8054\u4e8b\u4ef6\u5904\u7406\u53c2\u6570"></a>\u7279\u6b8a\u7684\u5185\u8054\u4e8b\u4ef6\u5904\u7406\u53c2\u6570</h2><p>\u989d\u5916\u7684\uff0c\u5728\u8fd9\u79cd\u5185\u8054\u7684\u4e8b\u4ef6\u7ed1\u5b9a\u5199\u6cd5\u4e2d\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528\u4e00\u4e2a\u7279\u6b8a\u7684\u53c2\u6570 <code>$event</code>\uff0c\u4ee3\u8868\u4e8b\u4ef6\u63cf\u8ff0\u5bf9\u8c61\uff0c\u5373\u9ed8\u8ba4\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u3002\u6240\u4ee5 <code><template></code> \u4e2d\u7684 <code>onclick="foo"</code> \u548c <code>onclick="foo($event)"</code> \u662f\u7b49\u4ef7\u7684\uff0c<code>$event</code> \u7684\u7528\u6cd5\u53ef\u4ee5\u66f4\u591a\u53c2\u8003\u4e0b\u9762\u7684\u4f8b\u5b50</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"update($event, 1, 2)"</span>></span>Result: {{result}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div
class="line"> <span class="attr">result</span>: <span class="string">'<empty>'</span></div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">update</span>: <span class="function"><span class="keyword">function</span> (<span class="params">e, x, y</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.result = e.type + (x + y)</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/5e1e7c22f036725e44c3ff492f173400" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="\u4e8b\u4ef6\u63cf\u8ff0\u5bf9\u8c61"><a href="#\u4e8b\u4ef6\u63cf\u8ff0\u5bf9\u8c61" class="headerlink" title="\u4e8b\u4ef6\u63cf\u8ff0\u5bf9\u8c61"></a>\u4e8b\u4ef6\u63cf\u8ff0\u5bf9\u8c61</h2><p>\u6bcf\u5f53\u4e00\u6b21\u4e8b\u4ef6\u88ab\u89e6\u53d1\u7684\u65f6\u5019\uff0c\u90fd\u4f1a\u4ea7\u751f\u4e00\u4e2a\u4e8b\u4ef6\u63cf\u8ff0\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u4f1a\u9ed8\u8ba4\u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\u4f20\u9012\u7ed9\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff0c\u6216\u4ee5 <code>$event</code> \u5f62\u53c2\u7684\u65b9\u5f0f\u51fa\u73b0\u5728\u5185\u8054\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u4e2d\u3002</p>
+<p>\u6bcf\u4e2a\u4e8b\u4ef6\u63cf\u8ff0\u5bf9\u8c61\u81f3\u5c11\u5305\u542b\u4ee5\u4e0b\u51e0\u4e2a\u7279\u6027\uff1a</p>
+<ul>
+<li><code>type</code> (<code>string</code>): \u4e8b\u4ef6\u540d\u79f0, \u5982: <code>click</code></li>
+<li><code>target</code> (<code>Element</code>): \u76ee\u6807\u5143\u7d20</li>
+<li><code>timestamp</code> (<code>number</code>): \u4e8b\u4ef6\u89e6\u53d1\u65f6\u7684\u65f6\u95f4\u6233\u6570\u5b57</li>
+</ul>
+<p>\u4e0b\u4e00\u8282\uff1a<a href="./display-logic.html">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/syntax/events.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/syntax/id.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/syntax/id.html b/content/cn/v-0.10/guide/syntax/id.html
new file mode 100644
index 0000000..69f3336
--- /dev/null
+++ b/content/cn/v-0.10/guide/syntax/id.html
@@ -0,0 +1,535 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u627e\u8282\u70b9 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u627e\u8282\u70b9\u5728 Weex \u4e2d\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7\u5728\u7279\u5b9a\u7684\u5b50\u7ec4\u4ef6\u4e0a\u8bbe\u7f6e id \u7279\u6027\uff0c\u4ee5\u6b64\u5728\u8be5 &lt;template&gt; \u5185\u552f\u4e00\u6807\u8bc6\u8fd9\u4e2a\u7ec4\u4ef6\u3002
+\u83b7\u53d6\u5b50\u7ec4\u4ef6\u60a8\u53ef\u4ee5\u5728\u7236\u7ec4\u4ef6\u4e0a\u4e0b\u6587\u4e2d\u4f7f\u7528 this.$el(id) \u6765\u627e\u5230\u8be5\u7ec4\u4ef6\uff0c\u4ee5\u8fd0\u7528 scrollToElement() \u4e3a\u4f8b\uff1a
+&lt;template&gt; &lt;div&gt; &lt;text id="goto-top"&gt;Top&lt;/t">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u627e\u8282\u70b9">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/syntax/id.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u627e\u8282\u70b9\u5728 Weex \u4e2d\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7\u5728\u7279\u5b9a\u7684\u5b50\u7ec4\u4ef6\u4e0a\u8bbe\u7f6e id \u7279\u6027\uff0c\u4ee5\u6b64\u5728\u8be5 &lt;template&gt; \u5185\u552f\u4e00\u6807\u8bc6\u8fd9\u4e2a\u7ec4\u4ef6\u3002
+\u83b7\u53d6\u5b50\u7ec4\u4ef6\u60a8\u53ef\u4ee5\u5728\u7236\u7ec4\u4ef6\u4e0a\u4e0b\u6587\u4e2d\u4f7f\u7528 this.$el(id) \u6765\u627e\u5230\u8be5\u7ec4\u4ef6\uff0c\u4ee5\u8fd0\u7528 scrollToElement() \u4e3a\u4f8b\uff1a
+&lt;template&gt; &lt;div&gt; &lt;text id="goto-top"&gt;Top&lt;/t">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.947Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u627e\u8282\u70b9">
+<meta name="twitter:description" content="\u627e\u8282\u70b9\u5728 Weex \u4e2d\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7\u5728\u7279\u5b9a\u7684\u5b50\u7ec4\u4ef6\u4e0a\u8bbe\u7f6e id \u7279\u6027\uff0c\u4ee5\u6b64\u5728\u8be5 &lt;template&gt; \u5185\u552f\u4e00\u6807\u8bc6\u8fd9\u4e2a\u7ec4\u4ef6\u3002
+\u83b7\u53d6\u5b50\u7ec4\u4ef6\u60a8\u53ef\u4ee5\u5728\u7236\u7ec4\u4ef6\u4e0a\u4e0b\u6587\u4e2d\u4f7f\u7528 this.$el(id) \u6765\u627e\u5230\u8be5\u7ec4\u4ef6\uff0c\u4ee5\u8fd0\u7528 scrollToElement() \u4e3a\u4f8b\uff1a
+&lt;template&gt; &lt;div&gt; &lt;text id="goto-top"&gt;Top&lt;/t">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link current ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link current ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u627e\u8282\u70b9
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.947Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u627e\u8282\u70b9"><a href="#\u627e\u8282\u70b9" class="headerlink" title="\u627e\u8282\u70b9"></a>\u627e\u8282\u70b9</h1><p>\u5728 Weex \u4e2d\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7\u5728\u7279\u5b9a\u7684\u5b50\u7ec4\u4ef6\u4e0a\u8bbe\u7f6e <code>id</code> \u7279\u6027\uff0c\u4ee5\u6b64\u5728\u8be5 <code><template></code> \u5185\u552f\u4e00\u6807\u8bc6\u8fd9\u4e2a\u7ec4\u4ef6\u3002</p>
+<h2 id="\u83b7\u53d6\u5b50\u7ec4\u4ef6"><a href="#\u83b7\u53d6\u5b50\u7ec4\u4ef6" class="headerlink" title="\u83b7\u53d6\u5b50\u7ec4\u4ef6"></a>\u83b7\u53d6\u5b50\u7ec4\u4ef6</h2><p>\u60a8\u53ef\u4ee5\u5728\u7236\u7ec4\u4ef6\u4e0a\u4e0b\u6587\u4e2d\u4f7f\u7528 <code>this.$el(id)</code> \u6765\u627e\u5230\u8be5\u7ec4\u4ef6\uff0c\u4ee5\u8fd0\u7528 <code>scrollToElement()</code> \u4e3a\u4f8b\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">id</span>=<span class="string">"goto-top"</span>></span>Top<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"height: 10000; background-color: #999999;"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"back2Top"</span>></span>Back to Top<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class=
"tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> dom = <span class="built_in">require</span>(<span class="string">'@weex-module/dom'</span>)</div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">back2Top</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> el = <span class="keyword">this</span>.$el(<span class="string">'goto-top'</span>)</div><div class="line"> dom.scrollToElement(el, { <span class="attr">offset</span>: <span class="number"
>10</span> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/ed07068ef6f038d6c39af6c971ad08a0" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h3 id="id-\u548c-repeat-\u7279\u6027\u914d\u5408\u4f7f\u7528"><a href="#id-\u548c-repeat-\u7279\u6027\u914d\u5408\u4f7f\u7528" class="headerlink" title="id \u548c repeat \u7279\u6027\u914d\u5408\u4f7f\u7528"></a><code>id</code> \u548c <code>repeat</code> \u7279\u6027\u914d\u5408\u4f7f\u7528</h3><p><code>id</code> \u4e5f\u53ef\u4ee5\u548c <code>repeat</code> \u8bed\u6cd5\u914d\u5408\u4f7f\u7528\uff0c\u5173\u4e8e <code>repeat</code> \u66f4\u591a\u8be6\u89c1 <a href="./display-logic.html">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>\uff0c\u4f46\u662f\u8981\u786e\u4fdd\u5faa\u73af\u7684\u8282\u70b9\u9700\u8981\u7528\u4e0d\u540c\u7684 <code>id</code>\uff0c\u6bd4\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span></span></div><div class="line"> <span class="attr">repeat</span>=<span class="string">"image in images"</span></div><div class="line"> <span class="attr">id</span>=<span class="string">"img-{{image.id}}"</span></div><div class="line"> <span class="attr">src</span>=<span class="string">"{{image.url}}"</span></div><div class="line"> <span class="attr">onclick</span>=<span class="string">"getImageId"</span>><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span c
lass="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">images</span>: [</div><div class="line"> {<span class="attr">id</span>: <span class="number">1</span>, <span class="attr">url</span>: <span class="string">'...'</span>},</div><div class="line"> {<span class="attr">id</span>: <span class="number">2</span>, <span class="attr">url</span>: <span class="string">'...'</span>},</div><div class="line"> {<span class="attr">id</span>: <span class="number">3</span>, <span class="attr">url</span>: <span class="string">'...'</span>},</div><div class="line"> ...</div><div class="line"> ]</div><div class="line"> },</div><div class="line"> <span cla
ss="attr">methods</span>: {</div><div class="line"> <span class="attr">getImageId</span>: <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</div><div class="line"> <span class="comment">// get e.target.id</span></div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<h3 id="\u83b7\u53d6\u81ea\u5b9a\u4e49\u5b50\u7ec4\u4ef6\u7684\u4e0a\u4e0b\u6587"><a href="#\u83b7\u53d6\u81ea\u5b9a\u4e49\u5b50\u7ec4\u4ef6\u7684\u4e0a\u4e0b\u6587" class="headerlink" title="\u83b7\u53d6\u81ea\u5b9a\u4e49\u5b50\u7ec4\u4ef6\u7684\u4e0a\u4e0b\u6587"></a>\u83b7\u53d6\u81ea\u5b9a\u4e49\u5b50\u7ec4\u4ef6\u7684\u4e0a\u4e0b\u6587</h3><p>\u53e6\u5916\uff0c\u6211\u4eec\u8fd8\u53ef\u4ee5\u901a\u8fc7 <code>this.$vm(id)</code> \u65b9\u6cd5\u53ef\u4ee5\u8bbf\u95ee\u81ea\u5b9a\u4e49\u5b50\u7ec4\u4ef6\u7684\u4e0a\u4e0b\u6587\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">element</span> <span class="attr">name</span>=<span class="string">"foo"</span>></span></div><div class="line"> <span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"flex-direction: row;"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{title}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line">
<span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">title</span>: <span class="literal">null</span></div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">setTitle</span>: <span class="function"><span class="keyword">function</span> (<span class="params">text</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.title = text</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="tag"></<span class="name">script</span>></span></div><div class="line"><span class="tag"></<span class="name">element</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">template</span>></span></d
iv><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">foo</span> <span class="attr">id</span>=<span class="string">"sub"</span> <span class="attr">title</span>=<span class="string">"Hello"</span>></span><span class="tag"></<span class="name">foo</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"update"</span>></span>Click Me to Update<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</d
iv><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">update</span>: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.$vm(<span class="string">'sub'</span>).setTitle(<span class="string">'Updated'</span>)</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/1d332e6c238462e841743035c6bc697e" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u5b9e\u9645\u4e0a\uff0c\u5982\u4e0a\u8ff0\u7684\u4f8b\u5b50\uff0c\u6211\u4eec\u627e\u5230\u5b50\u7ec4\u4ef6\u4e0a\u4e0b\u6587\u4e4b\u540e\uff0c\u76f4\u63a5\u5728\u8fd9\u4e2a\u4e0a\u4e0b\u6587\u4e2d\u8c03\u7528\u5b50\u7ec4\u4ef6\u65b9\u6cd5\u6216\u4fee\u6539\u5b50\u7ec4\u4ef6\u7684\u6570\u636e\u5e76\u4e0d\u662f\u6211\u4eec\u8ba4\u4e3a\u6700\u597d\u7684\u65b9\u5f0f\uff0c\u6211\u4eec\u66f4\u503e\u5411\u4e8e\u901a\u8fc7\u4e00\u5957\u786e\u5b9a\u7684\u7ec4\u4ef6\u95f4\u901a\u4fe1\u673a\u5236\u6765\u5b8c\u6210\u8fd9\u4e00\u5de5\u4f5c\u3002</p>
+<h3 id="\u83b7\u53d6\u7236\u7ea7\u7ec4\u4ef6\u6216\u5176\u4e0a\u4e0b\u6587"><a href="#\u83b7\u53d6\u7236\u7ea7\u7ec4\u4ef6\u6216\u5176\u4e0a\u4e0b\u6587" class="headerlink" title="\u83b7\u53d6\u7236\u7ea7\u7ec4\u4ef6\u6216\u5176\u4e0a\u4e0b\u6587"></a>\u83b7\u53d6\u7236\u7ea7\u7ec4\u4ef6\u6216\u5176\u4e0a\u4e0b\u6587</h3><p>\u9664\u4e86\u53ef\u4ee5\u81ea\u4e0a\u800c\u4e0b\u5bfb\u627e\u7ec4\u4ef6\u6216\u5176\u4e0a\u4e0b\u6587\uff0cWeex \u4e5f\u652f\u6301\u81ea\u4e0b\u800c\u4e0a\u505a\u76f8\u540c\u7684\u4e8b\u60c5\u3002\u5f53\u524d\u4e0a\u4e0b\u6587\u4e2d\u7684 <code>this._parent</code> \u53ef\u4ee5\u83b7\u53d6\u5176\u7236\u7ea7\u4e0a\u4e0b\u6587\u3002\u9664\u4e86\u7236\u7ea7\u4e0a\u4e0b\u6587\uff0c\u5bf9\u4e8e\u7236\u7ea7\u7ec4\u4ef6\u672c\u8eab\uff0c\u76f8\u5173\u5904\u7406\u4e5f\u53ef\u4ee5\u57fa\u4e8e\u5148\u83b7\u53d6\u7236\u7ea7\u4e0a\u4e0b\u6587\uff0c\u7136\u540e\u5728\u7236\u7ea7\u7ec4\u4ef6\u5185\u90e8\u5b8c\u6210\u66f4\u591a\u66f4\u7ec6\u81f4\u7684\u5904\u7406\u3002\u66f4\u591a\u5185\u5bb9\u53ef\u4ee5\u6df1\u5165\u4e86\u89e3\u7ec4\u4ef6\u95f4\u901a\u4fe1\u7684\u90e8\u5206\u3002</p>
+<p>_\u6ce8\u610f\u4e8b\u9879\uff1a\u5728\u672a\u6765\u7684\u7248\u672c\u4e2d <code>this._parent</code> \u5c06\u6539\u4e3a <code>this.$parent</code>\u3002_</p>
+<p>\u4e0b\u4e00\u7bc7\uff1a <a href="./comm.html">\u7ec4\u4ef6\u95f4\u901a\u4fe1</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/syntax/id.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[40/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/common-event.html
----------------------------------------------------------------------
diff --git a/content/cn/references/common-event.html b/content/cn/references/common-event.html
new file mode 100644
index 0000000..da2038b
--- /dev/null
+++ b/content/cn/references/common-event.html
@@ -0,0 +1,1370 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u901a\u7528\u4e8b\u4ef6 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u901a\u7528\u4e8b\u4ef6Weex \u63d0\u4f9b\u4e86\u901a\u8fc7\u4e8b\u4ef6\u89e6\u53d1\u52a8\u4f5c\u7684\u80fd\u529b\uff0c\u4f8b\u5982\u5728\u7528\u6237\u70b9\u51fb\u7ec4\u4ef6\u65f6\u6267\u884c JavaScript\u3002\u4e0b\u9762\u5217\u51fa\u4e86\u53ef\u88ab\u6dfb\u52a0\u5230 Weex \u7ec4\u4ef6\u4e0a\u4ee5\u5b9a\u4e49\u4e8b\u4ef6\u52a8\u4f5c\u7684\u5c5e\u6027\uff1a
+click\u5f53\u7ec4\u4ef6\u4e0a\u53d1\u751f\u70b9\u51fb\u624b\u52bf\u65f6\u88ab\u89e6\u53d1\u3002
+\u6ce8\u610f\uff1a
+&lt;input&gt; \u548c &lt;switch&gt; \u7ec4\u4ef6\u76ee\u524d\u4e0d\u652f\u6301 click \u4e8b\u4ef6\uff0c\u8bf7\u4f7f\u7528 change \u6216 input \u4e8b\u4ef6\u6765\u4ee3\u66ff\u3002
+\u4e8b\u4ef6\u5bf9\u8c61
+type: click
+targe">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u901a\u7528\u4e8b\u4ef6">
+<meta property="og:url" content="https://weex.apache.org/cn/references/common-event.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u901a\u7528\u4e8b\u4ef6Weex \u63d0\u4f9b\u4e86\u901a\u8fc7\u4e8b\u4ef6\u89e6\u53d1\u52a8\u4f5c\u7684\u80fd\u529b\uff0c\u4f8b\u5982\u5728\u7528\u6237\u70b9\u51fb\u7ec4\u4ef6\u65f6\u6267\u884c JavaScript\u3002\u4e0b\u9762\u5217\u51fa\u4e86\u53ef\u88ab\u6dfb\u52a0\u5230 Weex \u7ec4\u4ef6\u4e0a\u4ee5\u5b9a\u4e49\u4e8b\u4ef6\u52a8\u4f5c\u7684\u5c5e\u6027\uff1a
+click\u5f53\u7ec4\u4ef6\u4e0a\u53d1\u751f\u70b9\u51fb\u624b\u52bf\u65f6\u88ab\u89e6\u53d1\u3002
+\u6ce8\u610f\uff1a
+&lt;input&gt; \u548c &lt;switch&gt; \u7ec4\u4ef6\u76ee\u524d\u4e0d\u652f\u6301 click \u4e8b\u4ef6\uff0c\u8bf7\u4f7f\u7528 change \u6216 input \u4e8b\u4ef6\u6765\u4ee3\u66ff\u3002
+\u4e8b\u4ef6\u5bf9\u8c61
+type: click
+targe">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.840Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u901a\u7528\u4e8b\u4ef6">
+<meta name="twitter:description" content="\u901a\u7528\u4e8b\u4ef6Weex \u63d0\u4f9b\u4e86\u901a\u8fc7\u4e8b\u4ef6\u89e6\u53d1\u52a8\u4f5c\u7684\u80fd\u529b\uff0c\u4f8b\u5982\u5728\u7528\u6237\u70b9\u51fb\u7ec4\u4ef6\u65f6\u6267\u884c JavaScript\u3002\u4e0b\u9762\u5217\u51fa\u4e86\u53ef\u88ab\u6dfb\u52a0\u5230 Weex \u7ec4\u4ef6\u4e0a\u4ee5\u5b9a\u4e49\u4e8b\u4ef6\u52a8\u4f5c\u7684\u5c5e\u6027\uff1a
+click\u5f53\u7ec4\u4ef6\u4e0a\u53d1\u751f\u70b9\u51fb\u624b\u52bf\u65f6\u88ab\u89e6\u53d1\u3002
+\u6ce8\u610f\uff1a
+&lt;input&gt; \u548c &lt;switch&gt; \u7ec4\u4ef6\u76ee\u524d\u4e0d\u652f\u6301 click \u4e8b\u4ef6\uff0c\u8bf7\u4f7f\u7528 change \u6216 input \u4e8b\u4ef6\u6765\u4ee3\u66ff\u3002
+\u4e8b\u4ef6\u5bf9\u8c61
+type: click
+targe">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link current ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link current ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u901a\u7528\u4e8b\u4ef6
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.840Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u901a\u7528\u4e8b\u4ef6"><a href="#\u901a\u7528\u4e8b\u4ef6" class="headerlink" title="\u901a\u7528\u4e8b\u4ef6"></a>\u901a\u7528\u4e8b\u4ef6</h1><p>Weex \u63d0\u4f9b\u4e86\u901a\u8fc7\u4e8b\u4ef6\u89e6\u53d1\u52a8\u4f5c\u7684\u80fd\u529b\uff0c\u4f8b\u5982\u5728\u7528\u6237\u70b9\u51fb\u7ec4\u4ef6\u65f6\u6267\u884c JavaScript\u3002\u4e0b\u9762\u5217\u51fa\u4e86\u53ef\u88ab\u6dfb\u52a0\u5230 Weex \u7ec4\u4ef6\u4e0a\u4ee5\u5b9a\u4e49\u4e8b\u4ef6\u52a8\u4f5c\u7684\u5c5e\u6027\uff1a</p>
+<h2 id="click"><a href="#click" class="headerlink" title="click"></a><code>click</code></h2><p>\u5f53\u7ec4\u4ef6\u4e0a\u53d1\u751f\u70b9\u51fb\u624b\u52bf\u65f6\u88ab\u89e6\u53d1\u3002</p>
+<p><strong>\u6ce8\u610f\uff1a</strong></p>
+<p><code><input></code> \u548c <code><switch></code> \u7ec4\u4ef6\u76ee\u524d\u4e0d\u652f\u6301 <code>click</code> \u4e8b\u4ef6\uff0c\u8bf7\u4f7f\u7528 <code>change</code> \u6216 <code>input</code> \u4e8b\u4ef6\u6765\u4ee3\u66ff\u3002</p>
+<h3 id="\u4e8b\u4ef6\u5bf9\u8c61"><a href="#\u4e8b\u4ef6\u5bf9\u8c61" class="headerlink" title="\u4e8b\u4ef6\u5bf9\u8c61"></a>\u4e8b\u4ef6\u5bf9\u8c61</h3><ul>
+<li><code>type</code>: <code>click</code></li>
+<li><code>target</code>: \u89e6\u53d1\u70b9\u51fb\u4e8b\u4ef6\u7684\u76ee\u6807\u7ec4\u4ef6</li>
+<li><code>timestamp</code>: \u89e6\u53d1\u70b9\u51fb\u4e8b\u4ef6\u65f6\u7684\u65f6\u95f4\u6233</li>
+</ul>
+<h2 id="longpress"><a href="#longpress" class="headerlink" title="longpress"></a><code>longpress</code></h2><p>\u5982\u679c\u4e00\u4e2a\u7ec4\u4ef6\u88ab\u7ed1\u5b9a\u4e86 <code>longpress</code> \u4e8b\u4ef6\uff0c\u90a3\u4e48\u5f53\u7528\u6237\u957f\u6309\u8fd9\u4e2a\u7ec4\u4ef6\u65f6\uff0c\u8be5\u4e8b\u4ef6\u5c06\u4f1a\u88ab\u89e6\u53d1\u3002</p>
+<p><strong>\u6ce8\u610f\uff1a</strong></p>
+<p><code><input></code> \u548c <code><switch></code> \u7ec4\u4ef6\u76ee\u524d\u4e0d\u652f\u6301 <code>click</code> \u4e8b\u4ef6\uff0c\u8bf7\u4f7f\u7528 <code>change</code> \u6216 <code>input</code> \u4e8b\u4ef6\u6765\u4ee3\u66ff\u3002</p>
+<h3 id="\u4e8b\u4ef6\u5bf9\u8c61-1"><a href="#\u4e8b\u4ef6\u5bf9\u8c61-1" class="headerlink" title="\u4e8b\u4ef6\u5bf9\u8c61"></a>\u4e8b\u4ef6\u5bf9\u8c61</h3><ul>
+<li><code>type</code> : <code>longpress</code></li>
+<li><code>target</code> : \u89e6\u53d1\u957f\u6309\u4e8b\u4ef6\u7684\u76ee\u6807\u7ec4\u4ef6</li>
+<li><code>timestamp</code> : \u957f\u6309\u4e8b\u4ef6\u89e6\u53d1\u65f6\u7684\u65f6\u95f4\u6233</li>
+</ul>
+<h2 id="Appear-\u4e8b\u4ef6"><a href="#Appear-\u4e8b\u4ef6" class="headerlink" title="Appear \u4e8b\u4ef6"></a>Appear \u4e8b\u4ef6</h2><p>\u5982\u679c\u4e00\u4e2a\u4f4d\u4e8e\u67d0\u4e2a\u53ef\u6eda\u52a8\u533a\u57df\u5185\u7684\u7ec4\u4ef6\u88ab\u7ed1\u5b9a\u4e86 <code>appear</code> \u4e8b\u4ef6\uff0c\u90a3\u4e48\u5f53\u8fd9\u4e2a\u7ec4\u4ef6\u7684\u72b6\u6001\u53d8\u4e3a\u5728\u5c4f\u5e55\u4e0a\u53ef\u89c1\u65f6\uff0c\u8be5\u4e8b\u4ef6\u5c06\u88ab\u89e6\u53d1\u3002</p>
+<h3 id="\u4e8b\u4ef6\u5bf9\u8c61-2"><a href="#\u4e8b\u4ef6\u5bf9\u8c61-2" class="headerlink" title="\u4e8b\u4ef6\u5bf9\u8c61"></a>\u4e8b\u4ef6\u5bf9\u8c61</h3><ul>
+<li><code>type</code> : <code>appear</code></li>
+<li><code>target</code> : \u89e6\u53d1 Appear \u4e8b\u4ef6\u7684\u7ec4\u4ef6\u5bf9\u8c61</li>
+<li><code>timestamp</code> : \u4e8b\u4ef6\u88ab\u89e6\u53d1\u65f6\u7684\u65f6\u95f4\u6233</li>
+<li><code>direction</code> : \u89e6\u53d1\u4e8b\u4ef6\u65f6\u5c4f\u5e55\u7684\u6eda\u52a8\u65b9\u5411\uff0c<code>up</code> \u6216 <code>down</code></li>
+</ul>
+<h2 id="Disappear-\u4e8b\u4ef6"><a href="#Disappear-\u4e8b\u4ef6" class="headerlink" title="Disappear \u4e8b\u4ef6"></a>Disappear \u4e8b\u4ef6</h2><p>\u5982\u679c\u4e00\u4e2a\u4f4d\u4e8e\u67d0\u4e2a\u53ef\u6eda\u52a8\u533a\u57df\u5185\u7684\u7ec4\u4ef6\u88ab\u7ed1\u5b9a\u4e86 <code>disappear</code> \u4e8b\u4ef6\uff0c\u90a3\u4e48\u5f53\u8fd9\u4e2a\u7ec4\u4ef6\u88ab\u6ed1\u51fa\u5c4f\u5e55\u53d8\u4e3a\u4e0d\u53ef\u89c1\u72b6\u6001\u65f6\uff0c\u8be5\u4e8b\u4ef6\u5c06\u88ab\u89e6\u53d1\u3002</p>
+<h3 id="\u4e8b\u4ef6\u5bf9\u8c61-3"><a href="#\u4e8b\u4ef6\u5bf9\u8c61-3" class="headerlink" title="\u4e8b\u4ef6\u5bf9\u8c61"></a>\u4e8b\u4ef6\u5bf9\u8c61</h3><ul>
+<li><code>type</code> : <code>disappear</code></li>
+<li><code>target</code> : \u89e6\u53d1 Disappear \u4e8b\u4ef6\u7684\u7ec4\u4ef6\u5bf9\u8c61</li>
+<li><code>timestamp</code> : \u4e8b\u4ef6\u88ab\u89e6\u53d1\u65f6\u7684\u65f6\u95f4\u6233</li>
+<li><code>direction</code> : \u89e6\u53d1\u4e8b\u4ef6\u65f6\u5c4f\u5e55\u7684\u6eda\u52a8\u65b9\u5411\uff0c<code>up</code> \u6216 <code>down</code></li>
+</ul>
+<h2 id="Page-\u4e8b\u4ef6"><a href="#Page-\u4e8b\u4ef6" class="headerlink" title="Page \u4e8b\u4ef6"></a>Page \u4e8b\u4ef6</h2><p><em>\u6ce8\u610f\uff1a\u4ec5\u652f\u6301 iOS \u548c Android\uff0cH5 \u6682\u4e0d\u652f\u6301\u3002</em></p>
+<p>Weex \u901a\u8fc7 <code>viewappear</code> \u548c <code>viewdisappear</code> \u4e8b\u4ef6\u63d0\u4f9b\u4e86\u7b80\u5355\u7684\u9875\u9762\u72b6\u6001\u7ba1\u7406\u80fd\u529b\u3002</p>
+<p><code>viewappear</code> \u4e8b\u4ef6\u4f1a\u5728\u9875\u9762\u5c31\u8981\u663e\u793a\u6216\u914d\u7f6e\u7684\u4efb\u4f55\u9875\u9762\u52a8\u753b\u88ab\u6267\u884c\u524d\u89e6\u53d1\uff0c\u4f8b\u5982\uff0c\u5f53\u8c03\u7528 <code>navigator</code> \u6a21\u5757\u7684 <code>push</code> \u65b9\u6cd5\u65f6\uff0c\u8be5\u4e8b\u4ef6\u5c06\u4f1a\u5728\u6253\u5f00\u65b0\u9875\u9762\u65f6\u88ab\u89e6\u53d1\u3002<code>viewdisappear</code> \u4e8b\u4ef6\u4f1a\u5728\u9875\u9762\u5c31\u8981\u5173\u95ed\u65f6\u88ab\u89e6\u53d1\u3002</p>
+<p>\u4e0e\u7ec4\u4ef6\u7684 <code>appear</code> \u548c <code>disappear</code> \u4e8b\u4ef6\u4e0d\u540c\u7684\u662f\uff0c<code>viewappear</code> \u548c <code>viewdisappear</code> \u4e8b\u4ef6\u5173\u6ce8\u7684\u662f\u6574\u4e2a\u9875\u9762\u7684\u72b6\u6001\uff0c\u6240\u4ee5<strong>\u5b83\u4eec\u5fc5\u987b\u7ed1\u5b9a\u5230\u9875\u9762\u7684\u6839\u5143\u7d20\u4e0a</strong>\u3002</p>
+<p>\u7279\u6b8a\u60c5\u51b5\u4e0b\uff0c\u8fd9\u4e24\u4e2a\u4e8b\u4ef6\u4e5f\u80fd\u88ab\u7ed1\u5b9a\u5230\u975e\u6839\u5143\u7d20\u7684body\u7ec4\u4ef6\u4e0a\uff0c\u4f8b\u5982<code>wxc-navpage</code>\u7ec4\u4ef6\u3002</p>
+<h3 id="\u4e8b\u4ef6\u5bf9\u8c61-4"><a href="#\u4e8b\u4ef6\u5bf9\u8c61-4" class="headerlink" title="\u4e8b\u4ef6\u5bf9\u8c61"></a>\u4e8b\u4ef6\u5bf9\u8c61</h3><ul>
+<li><code>type</code> : <code>viewappear</code> \u6216 <code>viewdisappear</code></li>
+<li><code>target</code> : \u89e6\u53d1\u4e8b\u4ef6\u7684\u7ec4\u4ef6\u5bf9\u8c61</li>
+<li><code>timestamp</code> : \u4e8b\u4ef6\u88ab\u89e6\u53d1\u65f6\u7684\u65f6\u95f4\u6233</li>
+</ul>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span> @<span class="attr">click</span>=<span class="string">"onclick"</span> @<span class="attr">longpress</span>=<span class="string">"onlongpress"</span> @<span class="attr">appear</span>=<span class="string">"onappear"</span> @<span class="attr">disappear</span>=<span class="string">"ondisappear"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">
template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> onclick (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'onclick:'</span>, event)</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">'onclick'</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.8</span></div><div class="line"> })</div><div class="line"> },</div><div class="line
"> onlongpress (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'onlongpress:'</span>, event)</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">'onlongpress'</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.8</span></div><div class="line"> })</div><div class="line"> },</div><div class="line"> onappear (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'onappear:'</span>, event)</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">'onappear'</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.8</span></div><div class="line"> })</div><div class="line">
},</div><div class="line"> ondisappear (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'ondisappear:'</span>, event)</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">'ondisappear'</span>,</div><div class="line"> <span class="attr">duration</span>: <span class="number">0.8</span></div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.box</span> {</div><div class="line"> <span class="attribute">border-width</span>:
<span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#BBB</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#EEE</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/common-event.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/common-event.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[45/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/advanced/extend-to-android.html
----------------------------------------------------------------------
diff --git a/content/cn/references/advanced/extend-to-android.html b/content/cn/references/advanced/extend-to-android.html
new file mode 100644
index 0000000..1251b67
--- /dev/null
+++ b/content/cn/references/advanced/extend-to-android.html
@@ -0,0 +1,1356 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Android \u6269\u5c55 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Android \u6269\u5c55Weex \u63d0\u4f9b\u4e86\u6269\u5c55\u673a\u5236\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u4e1a\u52a1\u8fdb\u884c\u5b9a\u5236\u81ea\u5df1\u7684\u529f\u80fd\u3002\u4e3b\u8981\u5206\u4e3a\u4e24\u7c7b\u6269\u5c55\uff1a
+
+Module \u6269\u5c55 \u975e UI \u7684\u7279\u5b9a\u529f\u80fd\u3002\u4f8b\u5982 sendHttp\u3001openURL \u7b49\u3002
+Component \u6269\u5c55 \u5b9e\u73b0\u7279\u522b\u529f\u80fd\u7684 Native \u63a7\u4ef6\u3002\u4f8b\u5982\uff1aRichTextview\uff0cRefreshListview \u7b49\u3002
+Adapter \u6269\u5c55 Weex \u5bf9\u4e00\u4e9b\u57fa\u7840\u529f\u80fd\u5b9e\u73b0\u4e86\u7edf\u4e00\u7684\u63a5\u53e3\uff0c\u53ef\u5b9e\u73b0">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Android \u6269\u5c55">
+<meta property="og:url" content="https://weex.apache.org/cn/references/advanced/extend-to-android.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Android \u6269\u5c55Weex \u63d0\u4f9b\u4e86\u6269\u5c55\u673a\u5236\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u4e1a\u52a1\u8fdb\u884c\u5b9a\u5236\u81ea\u5df1\u7684\u529f\u80fd\u3002\u4e3b\u8981\u5206\u4e3a\u4e24\u7c7b\u6269\u5c55\uff1a
+
+Module \u6269\u5c55 \u975e UI \u7684\u7279\u5b9a\u529f\u80fd\u3002\u4f8b\u5982 sendHttp\u3001openURL \u7b49\u3002
+Component \u6269\u5c55 \u5b9e\u73b0\u7279\u522b\u529f\u80fd\u7684 Native \u63a7\u4ef6\u3002\u4f8b\u5982\uff1aRichTextview\uff0cRefreshListview \u7b49\u3002
+Adapter \u6269\u5c55 Weex \u5bf9\u4e00\u4e9b\u57fa\u7840\u529f\u80fd\u5b9e\u73b0\u4e86\u7edf\u4e00\u7684\u63a5\u53e3\uff0c\u53ef\u5b9e\u73b0">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.833Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Android \u6269\u5c55">
+<meta name="twitter:description" content="Android \u6269\u5c55Weex \u63d0\u4f9b\u4e86\u6269\u5c55\u673a\u5236\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u4e1a\u52a1\u8fdb\u884c\u5b9a\u5236\u81ea\u5df1\u7684\u529f\u80fd\u3002\u4e3b\u8981\u5206\u4e3a\u4e24\u7c7b\u6269\u5c55\uff1a
+
+Module \u6269\u5c55 \u975e UI \u7684\u7279\u5b9a\u529f\u80fd\u3002\u4f8b\u5982 sendHttp\u3001openURL \u7b49\u3002
+Component \u6269\u5c55 \u5b9e\u73b0\u7279\u522b\u529f\u80fd\u7684 Native \u63a7\u4ef6\u3002\u4f8b\u5982\uff1aRichTextview\uff0cRefreshListview \u7b49\u3002
+Adapter \u6269\u5c55 Weex \u5bf9\u4e00\u4e9b\u57fa\u7840\u529f\u80fd\u5b9e\u73b0\u4e86\u7edf\u4e00\u7684\u63a5\u53e3\uff0c\u53ef\u5b9e\u73b0">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link current ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link current ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Android \u6269\u5c55
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.833Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Android-\u6269\u5c55"><a href="#Android-\u6269\u5c55" class="headerlink" title="Android \u6269\u5c55"></a>Android \u6269\u5c55</h1><p>Weex \u63d0\u4f9b\u4e86\u6269\u5c55\u673a\u5236\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u4e1a\u52a1\u8fdb\u884c\u5b9a\u5236\u81ea\u5df1\u7684\u529f\u80fd\u3002<br>\u4e3b\u8981\u5206\u4e3a\u4e24\u7c7b\u6269\u5c55\uff1a </p>
+<ul>
+<li>Module \u6269\u5c55 \u975e UI \u7684\u7279\u5b9a\u529f\u80fd\u3002\u4f8b\u5982 sendHttp\u3001openURL \u7b49\u3002</li>
+<li>Component \u6269\u5c55 \u5b9e\u73b0\u7279\u522b\u529f\u80fd\u7684 Native \u63a7\u4ef6\u3002\u4f8b\u5982\uff1aRichTextview\uff0cRefreshListview \u7b49\u3002</li>
+<li>Adapter \u6269\u5c55 Weex \u5bf9\u4e00\u4e9b\u57fa\u7840\u529f\u80fd\u5b9e\u73b0\u4e86\u7edf\u4e00\u7684\u63a5\u53e3\uff0c\u53ef\u5b9e\u73b0\u8fd9\u4e9b\u63a5\u53e3\u6765\u5b9a\u5236\u81ea\u5df1\u7684\u4e1a\u52a1\u3002\u4f8b\u5982\uff1a\u56fe\u7247\u4e0b\u8f7d\u7b49\u3002</li>
+</ul>
+<h2 id="Module-\u6269\u5c55"><a href="#Module-\u6269\u5c55" class="headerlink" title="Module \u6269\u5c55"></a>Module \u6269\u5c55</h2><ol>
+<li>Module \u6269\u5c55\u5fc5\u987b\u7ee7\u627f WXModule \u7c7b\u3002</li>
+<li>\u6269\u5c55\u65b9\u6cd5\u5fc5\u987b\u52a0\u4e0a @WXModuleAnno \u6ce8\u89e3\u3002Weex \u4f1a\u6839\u636e\u6ce8\u89e3\u6765\u5224\u65ad\u5f53\u524d\u65b9\u6cd5\u662f\u5426\u8981\u8fd0\u884c\u5728 UI \u7ebf\u7a0b\uff0c\u548c\u5f53\u524d\u65b9\u6cd5\u662f\u5426\u662f\u6269\u5c55\u65b9\u6cd5\u3002</li>
+<li>Weex\u662f\u6839\u636e\u53cd\u5c04\u6765\u8fdb\u884c\u8c03\u7528 Module \u6269\u5c55\u65b9\u6cd5\uff0c\u6240\u4ee5Module\u4e2d\u7684\u6269\u5c55\u65b9\u6cd5\u5fc5\u987b\u662f public \u7c7b\u578b\u3002</li>
+<li>\u540c\u6837\u56e0\u4e3a\u662f\u901a\u8fc7\u53cd\u5c04\u8c03\u7528\uff0cModule \u4e0d\u80fd\u88ab\u6df7\u6dc6\u3002\u8bf7\u5728\u6df7\u6dc6\u6587\u4ef6\u4e2d\u6dfb\u52a0\u4ee3\u7801\uff1a<code>-keep public class * extends com.taobao.weex.common.WXModule{*;}</code></li>
+<li>Module \u6269\u5c55\u7684\u65b9\u6cd5\u53ef\u4ee5\u4f7f\u7528 int, double, float, String, Map, List \u7c7b\u578b\u7684\u53c2\u6570</li>
+<li>\u5b8c\u6210 Module \u540e\u4e00\u5b9a\u8981\u5728\u521d\u59cb\u5316\u65f6\u6ce8\u518c <code>WXSDKEngine.registerModule("myModule", MyModule.class);</code> \u5426\u5219\u4f1a\u62a5\u7c7b\u4f3c\u9519\u8bef\uff1a<code>ReportException :undefined:9: TypeError: Object #<Object> has no method 'printLog'</code></li>
+</ol>
+<p>\u793a\u4f8b\u5982\u4e0b\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MyModule</span> <span class="keyword">extends</span> <span class="title">WXModule</span> </span>{</div><div class="line"></div><div class="line"> <span class="meta">@WXModuleAnno</span>(runOnUIThread = <span class="keyword">true</span>)</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">printLog</span><span class="params">(String msg)</span> </span>{</div><div class="line"> Toast.makeText(mWXSDKInstance.getContext(),msg,Toast.LENGTH_SHORT).show();</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>JS \u8c03\u7528\u5982\u4e0b\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"click"</span>></span>\u70b9\u51fb\u6211\u6d4b\u8bd5<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="att
r">click</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">require</span>(<span class="string">'@weex-module/myModule'</span>).printLog(<span class="string">"\u6211\u662f\u4e00\u4e2a\u6d4b\u8bd5!"</span>);</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<h2 id="Component-\u6269\u5c55"><a href="#Component-\u6269\u5c55" class="headerlink" title="Component \u6269\u5c55"></a>Component \u6269\u5c55</h2><ol>
+<li>Component \u6269\u5c55\u7c7b\u5fc5\u987b\u96c6\u6210 WXComponent.</li>
+<li>Component \u5bf9\u5e94\u7684\u8bbe\u7f6e\u5c5e\u6027\u7684\u65b9\u6cd5\u5fc5\u987b\u6dfb\u52a0\u6ce8\u89e3 @WXComponentProp(name=value(value is attr or style of dsl))</li>
+<li>Weex sdk \u901a\u8fc7\u53cd\u5c04\u8c03\u7528\u5bf9\u5e94\u7684\u65b9\u6cd5\uff0c\u6240\u4ee5 Component \u5bf9\u5e94\u7684\u5c5e\u6027\u65b9\u6cd5\u5fc5\u987b\u662f public\uff0c\u5e76\u4e14\u4e0d\u80fd\u88ab\u6df7\u6dc6\u3002\u8bf7\u5728\u6df7\u6dc6\u6587\u4ef6\u4e2d\u6dfb\u52a0\u4ee3\u7801 <code>-keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}</code></li>
+<li>Component \u6269\u5c55\u7684\u65b9\u6cd5\u53ef\u4ee5\u4f7f\u7528 int, double, float, String, Map, List \u7c7b\u578b\u7684\u53c2\u6570</li>
+<li>\u5b8c\u6210 Component \u540e\u4e00\u5b9a\u8981\u5728\u521d\u59cb\u5316\u65f6\u6ce8\u518c <code>WXSDKEngine.registerComponent("richtext",RichText.class);</code></li>
+</ol>
+<p>\u793a\u4f8b\u5982\u4e0b:</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">RichText</span> <span class="keyword">extends</span> <span class="title">WXComponent</span> </span>{</div><div class="line"></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="title">RichText</span><span class="params">(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, <span class="keyword">boolean</span> isLazy)</span> </span>{</div><div class="line"> <span class="keyword">super</span>(instance, dom, parent, isLazy);</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">initView</span><span class="params">()</span> </span>
{</div><div class="line"> mHost=<span class="keyword">new</span> TextView(mContext);</div><div class="line"> ((TextView)mHost).setMovementMethod(LinkMovementMethod.getInstance());</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@WXComponentProp</span>(name = <span class="string">"tel"</span>)</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setTelLink</span><span class="params">(String tel)</span></span>{</div><div class="line"> SpannableString spannable=<span class="keyword">new</span> SpannableString(tel);</div><div class="line"> spannable.setSpan(<span class="keyword">new</span> URLSpan(<span class="string">"tel:"</span>+tel),<span class="number">0</span>,tel.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);</div><div class="line"> ((TextView)mHost).setText(spannable);</div><div class="line"> }</div><div class="line
">}</div></pre></td></tr></table></figure>
+<p>JS \u8c03\u7528\u5982\u4e0b\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">richText</span> <span class="attr">tel</span>=<span class="string">"12305"</span> <span class="attr">style</span>=<span class="string">"width:200;height:100"</span>></span>12305<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure>
+<h2 id="Adapter\u6269\u5c55"><a href="#Adapter\u6269\u5c55" class="headerlink" title="Adapter\u6269\u5c55"></a>Adapter\u6269\u5c55</h2><p>\u56fe\u7247\u4e0b\u8f7d\uff1a</p>
+<p>\u9700\u8981\u65f6\u96c6\u6210\u63a5\u53e3 IWXImgLoaderAdapter\uff0c\u5b9e\u73b0 setImage \u65b9\u6cd5\u3002</p>
+<p>\u793a\u4f8b\u5982\u4e0b\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">ImageAdapter</span> <span class="keyword">implements</span> <span class="title">IWXImgLoaderAdapter</span> </span>{</div><div class="line"></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="title">ImageAdapter</span><span class="params">()</span> </span>{</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setImage</span><span class="params">(<span class="keyword">final</span> String url, <span class="keyword">final</span> ImageView view,</span></span></div><div class="line"> WXImageQuality quality, WXImageStrategy s
trategy) {</div><div class="line"></div><div class="line"> WXSDKManager.getInstance().postOnUiThread(<span class="keyword">new</span> Runnable() {</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">run</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">if</span>(view==<span class="keyword">null</span>||view.getLayoutParams()==<span class="keyword">null</span>){</div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"> <span class="keyword">if</span> (TextUtils.isEmpty(url)) {</div><div class="line"> view.setImageBitmap(<span class="keyword">null</span>);</div><div class="line"> <span class="keyword">return</span>;</div><div class="lin
e"> }</div><div class="line"> String temp = url;</div><div class="line"> <span class="keyword">if</span> (url.startsWith(<span class="string">"//"</span>)) {</div><div class="line"> temp = <span class="string">"http:"</span> + url;</div><div class="line"> }</div><div class="line"> <span class="keyword">if</span> (view.getLayoutParams().width <= <span class="number">0</span> || view.getLayoutParams().height <= <span class="number">0</span>) {</div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"> Picasso.with(WXEnvironment.getApplication())</div><div class="line"> .load(temp)</div><div class="line"> .into(view);</div><div class="line"> }</div><div class="line"> },<span class="number">0</span>);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u6ce8:\u5de5\u7a0b\u8981\u6dfb\u52a0\u4f9d\u8d56 <code>compile 'com.squareup.picasso:picasso:2.5.2'</code></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/advanced/extend-to-android.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/advanced/extend-to-html5.html
----------------------------------------------------------------------
diff --git a/content/cn/references/advanced/extend-to-html5.html b/content/cn/references/advanced/extend-to-html5.html
new file mode 100644
index 0000000..a46075e
--- /dev/null
+++ b/content/cn/references/advanced/extend-to-html5.html
@@ -0,0 +1,1339 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>HTML5 \u6269\u5c55 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5982\u4f55\u6269\u5c55 Weex Web \u7aef\u7684\u7ec4\u4ef6\u548c\u6a21\u5757Weex \u672c\u8eab\u63d0\u4f9b\u4e86\u5f88\u591a\u5185\u7f6e\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u4e5f\u5177\u5907\u6a2a\u5411\u6269\u5c55\u7684\u80fd\u529b\uff0c\u5141\u8bb8\u5f00\u53d1\u8005\u81ea\u884c\u6269\u5c55\u548c\u5b9a\u5236\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0cWeex \u662f\u4e00\u4e2a\u8de8\u5e73\u53f0\u7684\u89e3\u51b3\u65b9\u6848\uff0c\u6269\u5c55\u5176\u5185\u7f6e\u7ec4\u4ef6\u6216\u6a21\u5757\uff0c\u9700\u8981\u5728\u4e09\u7aef\uff08Android\u3001iOS\u3001Web\uff09\u4e2d\u90fd\u6709\u76f8\u5e94\u7684\u5b9e\u73b0\u3002
+Weex \u5c06\u5185\u6838\u5207\u6362\u6210 Vue 2.x \u4e4b\u540e\uff0c\u5728 Web \u7aef\u6269\u5c55 Vue \u7ec4\u4ef6\u5c06\u53d8\u5f97\u66f4\u52a0\u5bb9\u6613\u3002
+\u6269\u5c55 Web \u7ec4\u4ef6Vue.js \u672c\u8eab\u5c31\u662f">
+<meta property="og:type" content="website">
+<meta property="og:title" content="HTML5 \u6269\u5c55">
+<meta property="og:url" content="https://weex.apache.org/cn/references/advanced/extend-to-html5.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5982\u4f55\u6269\u5c55 Weex Web \u7aef\u7684\u7ec4\u4ef6\u548c\u6a21\u5757Weex \u672c\u8eab\u63d0\u4f9b\u4e86\u5f88\u591a\u5185\u7f6e\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u4e5f\u5177\u5907\u6a2a\u5411\u6269\u5c55\u7684\u80fd\u529b\uff0c\u5141\u8bb8\u5f00\u53d1\u8005\u81ea\u884c\u6269\u5c55\u548c\u5b9a\u5236\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0cWeex \u662f\u4e00\u4e2a\u8de8\u5e73\u53f0\u7684\u89e3\u51b3\u65b9\u6848\uff0c\u6269\u5c55\u5176\u5185\u7f6e\u7ec4\u4ef6\u6216\u6a21\u5757\uff0c\u9700\u8981\u5728\u4e09\u7aef\uff08Android\u3001iOS\u3001Web\uff09\u4e2d\u90fd\u6709\u76f8\u5e94\u7684\u5b9e\u73b0\u3002
+Weex \u5c06\u5185\u6838\u5207\u6362\u6210 Vue 2.x \u4e4b\u540e\uff0c\u5728 Web \u7aef\u6269\u5c55 Vue \u7ec4\u4ef6\u5c06\u53d8\u5f97\u66f4\u52a0\u5bb9\u6613\u3002
+\u6269\u5c55 Web \u7ec4\u4ef6Vue.js \u672c\u8eab\u5c31\u662f">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.834Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="HTML5 \u6269\u5c55">
+<meta name="twitter:description" content="\u5982\u4f55\u6269\u5c55 Weex Web \u7aef\u7684\u7ec4\u4ef6\u548c\u6a21\u5757Weex \u672c\u8eab\u63d0\u4f9b\u4e86\u5f88\u591a\u5185\u7f6e\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u4e5f\u5177\u5907\u6a2a\u5411\u6269\u5c55\u7684\u80fd\u529b\uff0c\u5141\u8bb8\u5f00\u53d1\u8005\u81ea\u884c\u6269\u5c55\u548c\u5b9a\u5236\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0cWeex \u662f\u4e00\u4e2a\u8de8\u5e73\u53f0\u7684\u89e3\u51b3\u65b9\u6848\uff0c\u6269\u5c55\u5176\u5185\u7f6e\u7ec4\u4ef6\u6216\u6a21\u5757\uff0c\u9700\u8981\u5728\u4e09\u7aef\uff08Android\u3001iOS\u3001Web\uff09\u4e2d\u90fd\u6709\u76f8\u5e94\u7684\u5b9e\u73b0\u3002
+Weex \u5c06\u5185\u6838\u5207\u6362\u6210 Vue 2.x \u4e4b\u540e\uff0c\u5728 Web \u7aef\u6269\u5c55 Vue \u7ec4\u4ef6\u5c06\u53d8\u5f97\u66f4\u52a0\u5bb9\u6613\u3002
+\u6269\u5c55 Web \u7ec4\u4ef6Vue.js \u672c\u8eab\u5c31\u662f">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link current ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link current ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ HTML5 \u6269\u5c55
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.834Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5982\u4f55\u6269\u5c55-Weex-Web-\u7aef\u7684\u7ec4\u4ef6\u548c\u6a21\u5757"><a href="#\u5982\u4f55\u6269\u5c55-Weex-Web-\u7aef\u7684\u7ec4\u4ef6\u548c\u6a21\u5757" class="headerlink" title="\u5982\u4f55\u6269\u5c55 Weex Web \u7aef\u7684\u7ec4\u4ef6\u548c\u6a21\u5757"></a>\u5982\u4f55\u6269\u5c55 Weex Web \u7aef\u7684\u7ec4\u4ef6\u548c\u6a21\u5757</h1><p>Weex \u672c\u8eab\u63d0\u4f9b\u4e86\u5f88\u591a\u5185\u7f6e\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u4e5f\u5177\u5907\u6a2a\u5411\u6269\u5c55\u7684\u80fd\u529b\uff0c\u5141\u8bb8\u5f00\u53d1\u8005\u81ea\u884c\u6269\u5c55\u548c\u5b9a\u5236\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0cWeex \u662f\u4e00\u4e2a\u8de8\u5e73\u53f0\u7684\u89e3\u51b3\u65b9\u6848\uff0c\u6269\u5c55\u5176\u5185\u7f6e\u7ec4\u4ef6\u6216\u6a21\u5757\uff0c\u9700\u8981\u5728\u4e09\u7aef\uff08Android\u3001iOS\u3001Web\uff09\u4e2d\u90fd\u6709\u76f8\u5e94\u7684\u5b9e\u73b0\u3002</p>
+<p>Weex \u5c06\u5185\u6838\u5207\u6362\u6210 Vue 2.x \u4e4b\u540e\uff0c\u5728 Web \u7aef\u6269\u5c55 Vue \u7ec4\u4ef6\u5c06\u53d8\u5f97\u66f4\u52a0\u5bb9\u6613\u3002</p>
+<h2 id="\u6269\u5c55-Web-\u7ec4\u4ef6"><a href="#\u6269\u5c55-Web-\u7ec4\u4ef6" class="headerlink" title="\u6269\u5c55 Web \u7ec4\u4ef6"></a>\u6269\u5c55 Web \u7ec4\u4ef6</h2><p>Vue.js \u672c\u8eab\u5c31\u662f\u4e00\u4e2a\u72ec\u7acb\u7684\u524d\u7aef\u6846\u67b6\uff0c\u5728\u6d4f\u89c8\u5668\u4e2d\u5b8c\u5168\u80fd\u591f\u4e0d\u57fa\u4e8e Weex \u5bb9\u5668\u6e32\u67d3\u3002\u56e0\u6b64\uff0c\u9488\u5bf9 Weex \u5e73\u53f0\u6269\u5c55 Vue.js \u7684 Web \u7aef\u7ec4\u4ef6\uff0c\u548c\u76f4\u63a5\u4f7f\u7528 Vue.js \u5f00\u53d1\u4e00\u4e2a Web \u7ec4\u4ef6\u662f\u4e00\u6837\u7684\u3002\u5177\u4f53\u7684\u7ec4\u4ef6\u7f16\u5199\u65b9\u6cd5\u53ef\u4ee5\u53c2\u8003\u5176\u5b98\u65b9\u6587\u6863\uff1a<a href="https://cn.vuejs.org/v2/guide/components.html" target="_blank" rel="external">\u7ec4\u4ef6</a> \uff0c\u53e6\u5916\u5efa\u8bae\u4f7f\u7528 <code>.vue</code> \u683c\u5f0f\u7684\u6587\u4ef6\u7f16\u5199\u7ec4\u4ef6\uff0c\u4f7f\u7528\u65b9\u6cd5\u53c2\u8003\uff1a<a href="https://cn.vuejs.org/v2/guide/single-file-components.html" target="_blank" rel="external">\u5355\u6587\u4ef6\u7ec4\u4ef6</a>\u3002</p>
+<h3 id="\u6269\u5c55\u7ec4\u4ef6\u793a\u4f8b"><a href="#\u6269\u5c55\u7ec4\u4ef6\u793a\u4f8b" class="headerlink" title="\u6269\u5c55\u7ec4\u4ef6\u793a\u4f8b"></a>\u6269\u5c55\u7ec4\u4ef6\u793a\u4f8b</h3><p>\u4ee5\u6269\u5c55 <code><sidebar></code> \u4e3a\u4f8b\uff0c\u9996\u5148\u5e94\u8be5\u7f16\u5199\u7ec4\u4ef6\u81ea\u8eab\u7684\u903b\u8f91\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment"><!-- sidebar.vue --></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"sidebar"</span>></span></div><div class="line"> <span class="tag"><<span class="name">slot</span>></span><span class="tag"></<span class="name">slot</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.sidebar</span> {</di
v><div class="line"> <span class="comment">/* ... */</span></div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> <span class="attr">props</span>: [],</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {}</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p>\u7136\u540e\u5728\u4f7f\u7528\u4e4b\u524d\uff0c\u5168\u5c40\u6ce8\u518c <code><sidebar></code> \u7ec4\u4ef6\uff1a</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></div><div class="line"><span class="keyword">import</span> Sidebar <span class="keyword">from</span> <span class="string">'./path/to/sidebar.vue'</span></div><div class="line"></div><div class="line"><span class="comment">// \u5168\u5c40\u6ce8\u518c sidebar \u7ec4\u4ef6</span></div><div class="line">Vue.component(<span class="string">'sidebar'</span>, Sidebar)</div></pre></td></tr></table></figure>
+<p>\u5728\u6269\u5c55 Weex \u7ec4\u4ef6\u65f6\uff0c\u5982\u679c\u53ea\u4f7f\u7528\u4e86 Weex \u63d0\u4f9b\u7684\u5185\u7f6e\u7ec4\u4ef6\uff0c\u5e76\u4e14\u4f7f\u7528\u7684\u90fd\u662f Weex \u652f\u6301\u7684\u6837\u5f0f\uff0c\u90a3\u4e48\u5c31\u548c\u666e\u901a\u7684\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u65e0\u5f02\uff0c\u4e0d\u9700\u8981 Native \u7aef\u518d\u6709\u76f8\u5e94\u7684\u5b9e\u73b0\u3002</p>
+<p>\u5982\u679c\u4f60\u5b9a\u5236\u7ec4\u4ef6\u65f6\u4e0d\u5f97\u4e0d\u7528\u5230\u76ee\u524d Weex \u4e0d\u652f\u6301\u7684\u6807\u7b7e\u548c\u6837\u5f0f\uff0c\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\u624d\u662f\u771f\u6b63\u7684\u201c\u6269\u5c55\u201d\u4e86 Weex \u7684\u7ec4\u4ef6\uff0c\u4f60\u8fd8\u9700\u8981\u5728 Android \u548c iOS \u4e2d\u6709\u76f8\u5e94\u7684\u5b9e\u73b0\uff0c\u4e0d\u7136\u4f1a\u5bfc\u81f4\u6e32\u67d3\u5f02\u5e38\u3002</p>
+<h2 id="\u6269\u5c55-Web-\u6a21\u5757"><a href="#\u6269\u5c55-Web-\u6a21\u5757" class="headerlink" title="\u6269\u5c55 Web \u6a21\u5757"></a>\u6269\u5c55 Web \u6a21\u5757</h2><p>\u9664\u4e86\u901a\u7528\u7ec4\u4ef6\u4ee5\u5916\uff0cWeex \u8fd8\u6709\u63d0\u4f9b\u4e86\u901a\u7528\u7684\u6a21\u5757\uff0c\u53ef\u4ee5\u65b9\u4fbf\u7684\u8c03\u7528\u539f\u751f API\u3002\u901a\u5e38\u6765\u8bf4\uff0c\u6ce8\u518c Weex \u6a21\u5757\u8981\u6c42\u4e09\u7aef\u90fd\u5f97\u6709\u76f8\u5e94\u7684\u5b9e\u73b0\uff0c\u5426\u5219\u4f1a\u5f71\u54cd\u5176\u6b63\u5e38\u7684\u4f7f\u7528\u3002</p>
+<h3 id="\u6ce8\u518c\u6a21\u5757"><a href="#\u6ce8\u518c\u6a21\u5757" class="headerlink" title="\u6ce8\u518c\u6a21\u5757"></a>\u6ce8\u518c\u6a21\u5757</h3><p>\u5982\u679c\u4f60\u5f15\u5165\u4e86 <code>weex-vue-render</code> \u8fd9\u4e2a\u5e93\uff0c\u90a3\u4e48\u5728\u5168\u5c40\u80fd\u83b7\u53d6\u5230 <code>weex</code> \u8fd9\u4e2a\u53d8\u91cf\uff0c\u5176\u4e2d\u63d0\u4f9b\u4e86 <code>registerModule</code> \u65b9\u6cd5\u53ef\u4ee5\u6ce8\u518c\u6a21\u5757\u3002</p>
+<h4 id="API-\u683c\u5f0f"><a href="#API-\u683c\u5f0f" class="headerlink" title="API \u683c\u5f0f"></a>API \u683c\u5f0f</h4><ul>
+<li><code>registerModule</code><ol>
+<li><code>name</code>: {String} \u5fc5\u9009\uff0c\u6a21\u5757\u540d\u79f0\u3002</li>
+<li><code>define</code>: {Object} \u5fc5\u9009\uff0c\u6a21\u5757\u7684\u5b9a\u4e49\u3002</li>
+</ol>
+</li>
+</ul>
+<h4 id="\u6ce8\u518c\u6a21\u5757\u793a\u4f8b"><a href="#\u6ce8\u518c\u6a21\u5757\u793a\u4f8b" class="headerlink" title="\u6ce8\u518c\u6a21\u5757\u793a\u4f8b"></a>\u6ce8\u518c\u6a21\u5757\u793a\u4f8b</h4><p>\u4e0b\u8fb9\u7684\u4ee3\u7801\u6ce8\u518c\u4e86\u4e00\u4e2a\u540d\u4e3a <code>guide</code> \u7684\u6a21\u5757\uff1a</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">weex.registerModule(<span class="string">'guide'</span>, {</div><div class="line"> greeting () {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'Hello, nice to meet you. I am your guide.'</span>)</div><div class="line"> },</div><div class="line"> farewell () {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'Goodbye, I am always at your service.'</span>)</div><div class="line"> }</div><div class="line">})</div></pre></td></tr></table></figure>
+<h3 id="\u4f7f\u7528\u6a21\u5757"><a href="#\u4f7f\u7528\u6a21\u5757" class="headerlink" title="\u4f7f\u7528\u6a21\u5757"></a>\u4f7f\u7528\u6a21\u5757</h3><p>\u5728 <code>weex</code> \u4e0a\u63d0\u4f9b\u4e86 <code>require</code> \u65b9\u6cd5\u7528\u4e8e\u83b7\u53d6\u5df2\u6ce8\u518c\u7684\u6a21\u5757\uff0c\u76f4\u63a5\u4f20\u9012\u6a21\u5757\u540d\u5373\u53ef\uff1a</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// \u83b7\u53d6\u6a21\u5757</span></div><div class="line"><span class="keyword">const</span> guide = weex.requireModule(<span class="string">'guide'</span>)</div><div class="line"></div><div class="line"><span class="comment">// \u53ef\u4ee5\u76f4\u63a5\u8c03\u7528\u6a21\u5757\u4e2d\u7684\u65b9\u6cd5</span></div><div class="line">guide.greeting()</div><div class="line">guide.farewell()</div></pre></td></tr></table></figure>
+<p>\u4e0a\u8ff0\u5199\u6cd5\u5728 Native \u73af\u5883\u4e2d\u4f9d\u7136\u6709\u6548\uff0c\u53ea\u4e0d\u8fc7\u6a21\u5757\u4e2d\u7684\u65b9\u6cd5\u662f\u7531 Native \u63d0\u4f9b\u7684\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/advanced/extend-to-html5.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[15/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/weex-variable.html
----------------------------------------------------------------------
diff --git a/content/cn/references/weex-variable.html b/content/cn/references/weex-variable.html
new file mode 100644
index 0000000..6766aa9
--- /dev/null
+++ b/content/cn/references/weex-variable.html
@@ -0,0 +1,1344 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex \u5b9e\u4f8b\u53d8\u91cf | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Weex \u5b9e\u4f8b\u53d8\u91cf\u6bcf\u4e2a Weex \u9875\u9762\u7684 JS \u4e0a\u4e0b\u6587\u4e2d\u90fd\u6709\u4e00\u4e2a\u76f8\u4e92\u72ec\u7acb\u7684 weex \u53d8\u91cf\uff0c\u7528\u6765\u6301\u6709\u5f53\u524d Weex \u9875\u9762\u76f8\u5173\u7684\u5355\u4f8b\u5185\u5bb9\u6216\u65b9\u6cd5\u3002
+weex.config\u8be5\u53d8\u91cf\u5305\u542b\u4e86\u5f53\u524d Weex \u9875\u9762\u7684\u6240\u6709\u73af\u5883\u4fe1\u606f\uff0c\u5305\u62ec\u4e0d\u4ec5\u9650\u4e8e\uff1a
+
+bundleUrl: string: JS bundle \u7684 URL\u3002
+env: Object: \u73af\u5883\u5bf9\u8c61\u3002
+weexVersion: string: Weex sdk">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Weex \u5b9e\u4f8b\u53d8\u91cf">
+<meta property="og:url" content="https://weex.apache.org/cn/references/weex-variable.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Weex \u5b9e\u4f8b\u53d8\u91cf\u6bcf\u4e2a Weex \u9875\u9762\u7684 JS \u4e0a\u4e0b\u6587\u4e2d\u90fd\u6709\u4e00\u4e2a\u76f8\u4e92\u72ec\u7acb\u7684 weex \u53d8\u91cf\uff0c\u7528\u6765\u6301\u6709\u5f53\u524d Weex \u9875\u9762\u76f8\u5173\u7684\u5355\u4f8b\u5185\u5bb9\u6216\u65b9\u6cd5\u3002
+weex.config\u8be5\u53d8\u91cf\u5305\u542b\u4e86\u5f53\u524d Weex \u9875\u9762\u7684\u6240\u6709\u73af\u5883\u4fe1\u606f\uff0c\u5305\u62ec\u4e0d\u4ec5\u9650\u4e8e\uff1a
+
+bundleUrl: string: JS bundle \u7684 URL\u3002
+env: Object: \u73af\u5883\u5bf9\u8c61\u3002
+weexVersion: string: Weex sdk">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.919Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex \u5b9e\u4f8b\u53d8\u91cf">
+<meta name="twitter:description" content="Weex \u5b9e\u4f8b\u53d8\u91cf\u6bcf\u4e2a Weex \u9875\u9762\u7684 JS \u4e0a\u4e0b\u6587\u4e2d\u90fd\u6709\u4e00\u4e2a\u76f8\u4e92\u72ec\u7acb\u7684 weex \u53d8\u91cf\uff0c\u7528\u6765\u6301\u6709\u5f53\u524d Weex \u9875\u9762\u76f8\u5173\u7684\u5355\u4f8b\u5185\u5bb9\u6216\u65b9\u6cd5\u3002
+weex.config\u8be5\u53d8\u91cf\u5305\u542b\u4e86\u5f53\u524d Weex \u9875\u9762\u7684\u6240\u6709\u73af\u5883\u4fe1\u606f\uff0c\u5305\u62ec\u4e0d\u4ec5\u9650\u4e8e\uff1a
+
+bundleUrl: string: JS bundle \u7684 URL\u3002
+env: Object: \u73af\u5883\u5bf9\u8c61\u3002
+weexVersion: string: Weex sdk">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link current ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link current ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Weex \u5b9e\u4f8b\u53d8\u91cf
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.919Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Weex-\u5b9e\u4f8b\u53d8\u91cf"><a href="#Weex-\u5b9e\u4f8b\u53d8\u91cf" class="headerlink" title="Weex \u5b9e\u4f8b\u53d8\u91cf"></a>Weex \u5b9e\u4f8b\u53d8\u91cf</h1><p>\u6bcf\u4e2a Weex \u9875\u9762\u7684 JS \u4e0a\u4e0b\u6587\u4e2d\u90fd\u6709\u4e00\u4e2a\u76f8\u4e92\u72ec\u7acb\u7684 <code>weex</code> \u53d8\u91cf\uff0c\u7528\u6765\u6301\u6709\u5f53\u524d Weex \u9875\u9762\u76f8\u5173\u7684\u5355\u4f8b\u5185\u5bb9\u6216\u65b9\u6cd5\u3002</p>
+<h2 id="weex-config"><a href="#weex-config" class="headerlink" title="weex.config"></a><code>weex.config</code></h2><p>\u8be5\u53d8\u91cf\u5305\u542b\u4e86\u5f53\u524d Weex \u9875\u9762\u7684\u6240\u6709\u73af\u5883\u4fe1\u606f\uff0c\u5305\u62ec\u4e0d\u4ec5\u9650\u4e8e\uff1a</p>
+<ul>
+<li><code>bundleUrl: string</code>: JS bundle \u7684 URL\u3002</li>
+<li><code>env: Object</code>: \u73af\u5883\u5bf9\u8c61\u3002<ul>
+<li><code>weexVersion: string</code>: Weex sdk \u7248\u672c\u3002</li>
+<li><code>appName: string</code>: \u5e94\u7528\u540d\u5b57\u3002</li>
+<li><code>appVersion: string</code>: \u5e94\u7528\u7248\u672c\u3002</li>
+<li><code>platform: string</code>: \u5e73\u53f0\u4fe1\u606f\uff0c\u662f iOS\u3001Android \u8fd8\u662f Web\u3002</li>
+<li><code>osVersion: string</code>: \u7cfb\u7edf\u7248\u672c\u3002</li>
+<li><code>deviceModel: string</code>: \u8bbe\u5907\u578b\u53f7 (\u4ec5\u539f\u751f\u5e94\u7528)\u3002</li>
+<li><code>deviceWidth: number</code>: \u8bbe\u5907\u5bbd\u5ea6\uff0c\u9ed8\u8ba4\u4e3a 750\u3002</li>
+<li><code>deviceHeight: number</code>: \u8bbe\u5907\u9ad8\u5ea6\u3002</li>
+</ul>
+</li>
+</ul>
+<h2 id="weex-requireModule-module-string-Object"><a href="#weex-requireModule-module-string-Object" class="headerlink" title="weex.requireModule(module: string): Object"></a><code>weex.requireModule(module: string): Object</code></h2><p>\u83b7\u53d6\u67d0\u4e2a native module \u7684\u6240\u6709\u65b9\u6cd5\uff0c\u6bd4\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span><span class="tag"><<span class="name">text</span>></span>Hello World<span class="tag"></<span class="name">text</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">'I am a toast.'</span>,</div><div class="line"> <span class="attr">duration</span>: <span cla
ss="number">3</span></div><div class="line"> })</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<h2 id="weex-document-Document"><a href="#weex-document-Document" class="headerlink" title="weex.document: Document"></a><code>weex.document: Document</code></h2><p>\u8fd4\u56de\u5f53\u524d Weex \u9875\u9762\u7684\u6587\u6863\u5bf9\u8c61\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/weex-variable.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/weex-variable.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/create-a-weex-project.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/create-a-weex-project.html b/content/cn/v-0.10/advanced/create-a-weex-project.html
new file mode 100644
index 0000000..c70d8f9
--- /dev/null
+++ b/content/cn/v-0.10/advanced/create-a-weex-project.html
@@ -0,0 +1,483 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee\u5bf9\u4e8e\u524d\u7aef\u5f00\u53d1\u8005\u6765\u8bf4\u5f00\u53d1\u4e00\u4e2a app \u662f\u4e0d\u5bb9\u6613\u7684\uff0c\u65e2\u7136 Weex \u80fd\u4ee5 web \u7684\u5f00\u53d1\u4f53\u9a8c\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684 native \u5e94\u7528\uff0c\u90a3\u6211\u4eec\u600e\u4e48\u5229\u7528 Weex \u7b80\u5355\u9ad8\u6548\u7684\u5f00\u53d1\u4e00\u4e2a native \u5e94\u7528\u5462\uff1fWeex \u66ff\u4f60\u8003\u8651\u4e86\u8fd9\u4ef6\u4e8b\u3002\u5728\u672c\u7ae0\u4e2d\uff0c\u6211\u4eec\u5c06\u5b66\u4e60\u5982\u4f55\u4f7f\u7528 Weexpack \u5de5\u5177\u5feb\u901f\u751f\u6210\u4e00\u4e2a\u5168\u65b0\u7684 Weex \u9879\u76ee\u3002
+\u6839\u636e\u4f60\u7684\u64cd\u4f5c\u7cfb\u7edf\u7684\u4e0d\u540c\uff0c\u6b65\u9aa4\u4e5f\u7565\u6709\u5dee\u5f02\uff0c\u5982\u679c\u4f60\u4ece\u672a\u63a5\u89e6\u8fc7">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/advanced/create-a-weex-project.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee\u5bf9\u4e8e\u524d\u7aef\u5f00\u53d1\u8005\u6765\u8bf4\u5f00\u53d1\u4e00\u4e2a app \u662f\u4e0d\u5bb9\u6613\u7684\uff0c\u65e2\u7136 Weex \u80fd\u4ee5 web \u7684\u5f00\u53d1\u4f53\u9a8c\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684 native \u5e94\u7528\uff0c\u90a3\u6211\u4eec\u600e\u4e48\u5229\u7528 Weex \u7b80\u5355\u9ad8\u6548\u7684\u5f00\u53d1\u4e00\u4e2a native \u5e94\u7528\u5462\uff1fWeex \u66ff\u4f60\u8003\u8651\u4e86\u8fd9\u4ef6\u4e8b\u3002\u5728\u672c\u7ae0\u4e2d\uff0c\u6211\u4eec\u5c06\u5b66\u4e60\u5982\u4f55\u4f7f\u7528 Weexpack \u5de5\u5177\u5feb\u901f\u751f\u6210\u4e00\u4e2a\u5168\u65b0\u7684 Weex \u9879\u76ee\u3002
+\u6839\u636e\u4f60\u7684\u64cd\u4f5c\u7cfb\u7edf\u7684\u4e0d\u540c\uff0c\u6b65\u9aa4\u4e5f\u7565\u6709\u5dee\u5f02\uff0c\u5982\u679c\u4f60\u4ece\u672a\u63a5\u89e6\u8fc7">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1jLx4OFXXXXaoXFXXXXXXXXXX-212-33.png">
+<meta property="og:image" content="https://gw.alicdn.com/tps/TB1VulhOFXXXXcPXFXXXXXXXXXX-828-686.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1CBdgOFXXXXXnXVXXXXXXXXXX-661-392.jpg">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.921Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee">
+<meta name="twitter:description" content="\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee\u5bf9\u4e8e\u524d\u7aef\u5f00\u53d1\u8005\u6765\u8bf4\u5f00\u53d1\u4e00\u4e2a app \u662f\u4e0d\u5bb9\u6613\u7684\uff0c\u65e2\u7136 Weex \u80fd\u4ee5 web \u7684\u5f00\u53d1\u4f53\u9a8c\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684 native \u5e94\u7528\uff0c\u90a3\u6211\u4eec\u600e\u4e48\u5229\u7528 Weex \u7b80\u5355\u9ad8\u6548\u7684\u5f00\u53d1\u4e00\u4e2a native \u5e94\u7528\u5462\uff1fWeex \u66ff\u4f60\u8003\u8651\u4e86\u8fd9\u4ef6\u4e8b\u3002\u5728\u672c\u7ae0\u4e2d\uff0c\u6211\u4eec\u5c06\u5b66\u4e60\u5982\u4f55\u4f7f\u7528 Weexpack \u5de5\u5177\u5feb\u901f\u751f\u6210\u4e00\u4e2a\u5168\u65b0\u7684 Weex \u9879\u76ee\u3002
+\u6839\u636e\u4f60\u7684\u64cd\u4f5c\u7cfb\u7edf\u7684\u4e0d\u540c\uff0c\u6b65\u9aa4\u4e5f\u7565\u6709\u5dee\u5f02\uff0c\u5982\u679c\u4f60\u4ece\u672a\u63a5\u89e6\u8fc7">
+<meta name="twitter:image" content="https://img.alicdn.com/tps/TB1jLx4OFXXXXaoXFXXXXXXXXXX-212-33.png">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="advanced" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "advanced";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u9ad8\u9636\u77e5\u8bc6
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex \u5de5\u4f5c\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link current ">\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">\u96c6\u6210\u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">\u96c6\u6210\u5230 iOS</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">\u96c6\u6210\u5230 web</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native API</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-advanced">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.921Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5982\u4f55\u521b\u5efa\u4e00\u4e2a-Weex-\u9879\u76ee"><a href="#\u5982\u4f55\u521b\u5efa\u4e00\u4e2a-Weex-\u9879\u76ee" class="headerlink" title="\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee"></a>\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</h1><p>\u5bf9\u4e8e\u524d\u7aef\u5f00\u53d1\u8005\u6765\u8bf4\u5f00\u53d1\u4e00\u4e2a app \u662f\u4e0d\u5bb9\u6613\u7684\uff0c\u65e2\u7136 Weex \u80fd\u4ee5 web \u7684\u5f00\u53d1\u4f53\u9a8c\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684 native \u5e94\u7528\uff0c\u90a3\u6211\u4eec\u600e\u4e48\u5229\u7528 Weex \u7b80\u5355\u9ad8\u6548\u7684\u5f00\u53d1\u4e00\u4e2a native \u5e94\u7528\u5462\uff1fWeex \u66ff\u4f60\u8003\u8651\u4e86\u8fd9\u4ef6\u4e8b\u3002\u5728\u672c\u7ae0\u4e2d\uff0c\u6211\u4eec\u5c06\u5b66\u4e60\u5982\u4f55\u4f7f\u7528 Weexpack \u5de5\u5177\u5feb\u901f\u751f\u6210\u4e00\u4e2a\u5168\u65b0\u7684 Weex \u9879\u76ee\u3002</p>
+<p>\u6839\u636e\u4f60\u7684\u64cd\u4f5c\u7cfb\u7edf\u7684\u4e0d\u540c\uff0c\u6b65\u9aa4\u4e5f\u7565\u6709\u5dee\u5f02\uff0c\u5982\u679c\u4f60\u4ece\u672a\u63a5\u89e6\u8fc7 native \u5f00\u53d1\uff0c\u8bf7\u6162\u6162\u6765\uff0c\u9047\u5230\u95ee\u9898\u968f\u65f6\u67e5\u9605 <a href="../faq.md">FAQ</a>\u3002</p>
+<p>\u9996\u5148\uff0c\u4e0d\u8bba\u4efb\u4f55\u5e73\u53f0\uff0c\u6211\u4eec\u90fd\u9700\u8981 node.js \u548c Weexpack\u3002\u5728\u672c\u8282\u4e2d\uff0c\u9ed8\u8ba4\u4f60\u5df2\u7ecf\u5b89\u88c5\u597d\u4e86 node.js \u548c npm\uff0c\u5982\u6709\u7591\u95ee\uff0c\u53ef\u53c2\u8003\u4e0a\u4e00\u7ae0 <a href="../guide/develop-on-your-local-machine.html">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a>\u3002</p>
+<p>Weexpack \u662f Weex \u65b0\u4e00\u4ee3\u7684\u5de5\u7a0b\u5f00\u53d1\u5957\u4ef6\uff0c\u5b83\u5141\u8bb8\u5f00\u53d1\u8005\u901a\u8fc7\u7b80\u5355\u7684\u547d\u4ee4\uff0c\u521b\u5efa weex \u5de5\u7a0b\u9879\u76ee\uff0c\u5c06\u9879\u76ee\u8fd0\u884c\u5728\u4e0d\u540c\u7684\u5f00\u53d1\u5e73\u53f0\u4e0a\u3002\u672a\u6765\uff0c\u6211\u4eec\u8003\u8651\u4f1a\u5c06\u5176\u96c6\u6210\u5728 weex-toolkits \u4e0a\uff0c\u4f46\u76ee\u524d\u4ecd\u9700\u8981\u5355\u72ec\u5b89\u88c5\u3002\u597d\u5728\u5b89\u88c5 Weexpack \u975e\u5e38\u7b80\u5355\uff0c\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528 npm \u5b89\u88c5\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">npm install weexpack -g</div></pre></td></tr></table></figure>
+<p>\u6216\u8005\u7528 cnpm\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">cnpm install weexpack -g</div></pre></td></tr></table></figure>
+<p>\u63a5\u4e0b\u6765\u7684\u6b65\u9aa4\u4f1a\u6709\u4e00\u4e9b\u590d\u6742\u548c\u533a\u522b\uff0c\u6839\u636e\u5f00\u53d1\u5e73\u53f0\u7684\u4e0d\u540c\uff0c\u6211\u4eec\u63d0\u4f9b\u4e86\u5feb\u901f\u5bfc\u822a\u4fbf\u4e8e\u9605\u8bfb\uff1a</p>
+<ul>
+<li><a href="#ios">iOS</a></li>
+<li><a href="#android">Android</a></li>
+</ul>
+<h2 id="iOS"><a href="#iOS" class="headerlink" title="iOS"></a>iOS</h2><p>Mac \u662f\u552f\u4e00\u53ef\u4ee5\u5f00\u53d1 iOS \u5e94\u7528\u7684\u5e73\u53f0\uff0c\u56e0\u6b64\u521b\u5efa iOS \u9879\u76ee\u53ea\u652f\u6301 mac\u3002\u5bf9\u4e8e iOS\uff0c\u4f60\u9700\u8981\u5b89\u88c5 <a href="https://developer.apple.com/xcode/" target="_blank" rel="external">Xcode</a> \u548c <a href="https://guides.cocoapods.org/using/getting-started.html" target="_blank" rel="external">CocoaPods</a> \u3002</p>
+<p>\u5b89\u88c5 Xcode \u6700\u7b80\u5355\u7684\u65b9\u6cd5\u662f\u5230 <a href="https://itunes.apple.com/us/app/xcode/id497799835?mt=12" target="_blank" rel="external">Mac App Store</a>\u3002Xcode \u4f53\u79ef\u8f83\u5927\uff0c\u4e0b\u8f7d\u8bf7\u8010\u5fc3\u7b49\u5f85\u3002</p>
+<p>\u5b89\u88c5\u597d Xcode \u540e\uff0c\u4f60\u9700\u8981\u8fd0\u884c Xcode\uff0c\u4f7f Xcode \u81ea\u52a8\u5b89\u88c5\u5f00\u53d1\u8005\u5de5\u5177\u548c\u786e\u8ba4\u4f7f\u7528\u534f\u8bae\u3002</p>
+<p>\u4e4b\u540e\u4f60\u8fd8\u9700\u8981\u5b89\u88c5 <a href="https://guides.cocoapods.org/using/getting-started.html" target="_blank" rel="external">CocoaPods</a> \u3002CocoaPods \u662f Xcode \u9879\u76ee\u7684\u7c7b\u5e93\u7ba1\u7406\u5de5\u5177\uff0c\u53ef\u4ee5\u4f7f\u7528\u5982\u4e0b\u547d\u4ee4\u5b89\u88c5\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ sudo gem install cocoapods</div></pre></td></tr></table></figure>
+<p>\u5982\u679c\u6267\u884c\u8be5\u547d\u4ee4\u65e0\u53cd\u5e94\uff0c\u5f88\u53ef\u80fd\u662f gem source \u95ee\u9898\uff0c\u4f60\u53ef\u4ee5\u5207\u6362\u4e3a\u6dd8\u5b9d gem source\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ gem sources --remove https://rubygems.org/</div><div class="line">$ gem sources <span class="_">-a</span> https://ruby.taobao.org/</div><div class="line">$ sudo gem install cocoapods</div></pre></td></tr></table></figure>
+<p>\u5982\u6709\u95ee\u9898\uff0c\u53ef\u53c2\u8003 <a href="https://guides.cocoapods.org/using/getting-started.html" target="_blank" rel="external">CocoaPods \u5b98\u65b9\u6587\u6863</a></p>
+<h3 id="\u521b\u5efa\u9879\u76ee"><a href="#\u521b\u5efa\u9879\u76ee" class="headerlink" title="\u521b\u5efa\u9879\u76ee"></a>\u521b\u5efa\u9879\u76ee</h3><p>\u7136\u540e\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528 weexpack \u521b\u5efa weex \u5de5\u7a0b\u4e86\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ weexpack init appName</div></pre></td></tr></table></figure>
+<p>weexpack \u4f1a\u81ea\u52a8\u65b0\u5efa\u4ee5 appName \u547d\u540d\u7684\u76ee\u5f55\uff0c\u5e76\u5c06\u9879\u76ee\u6a21\u677f\u62c9\u53d6\u5230\u8be5\u76ee\u5f55\u3002</p>
+<p>\u6700\u7ec8\u5f62\u6210\u5982\u4e0b\u76ee\u5f55\u7ed3\u6784\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">-> /appName</div><div class="line">.</div><div class="line">|\u2014\u2014 .gitignore</div><div class="line">|\u2014\u2014 README.md</div><div class="line">|\u2014\u2014 package.json</div><div class="line">|-- android.config.json</div><div class="line">|-- ios.config.json</div><div class="line">|\u2014\u2014 webpack.config.js</div><div class="line">|\u2014\u2014 /src</div><div class="line">| |\u2014\u2014 index.we</div><div class="line">|\u2014\u2014 /html5</div><div class="line">| |\u2014\u2014 index.html</div><div class="line">|\u2014\u2014 /ios</div><div class="line">| |\u2014\u2014 /playground</div><div class="line">| |\u2014\u2014 /sdk</div><div class="line">| |\u2014\u2014 /WXDevtool</div><div class="line">|\u2014\u2014 /android</div><div class="line">| |\u2014\u2014 /playground</div><div class="line">| |\u2014\u2014 /appframework</div></pre></td></tr></table></figure>
+<p>\u5176\u4e2d\uff1a</p>
+<ul>
+<li><code>webpack.config.js</code> \u662f webpack \u914d\u7f6e\u6587\u4ef6\uff0c\u7528\u4e8e\u751f\u6210 <code>.we</code> \u6587\u4ef6\u7684 JSBunlde</li>
+<li><code>ios.config.json</code> \u662f iOS \u9879\u76ee\u914d\u7f6e\u6587\u4ef6</li>
+<li><code>android.config.json</code> \u662f Android \u9879\u76ee\u914d\u7f6e\u6587\u4ef6</li>
+<li><code>/src</code> \u76ee\u5f55\u653e\u7f6e Weex \u9875\u9762</li>
+<li><code>/html5</code> \u662f H5 \u7aef\u5165\u53e3\u6587\u4ef6</li>
+<li><code>/ios</code> \u653e\u7f6e iOS \u9879\u76ee</li>
+<li><code>/android</code> \u653e\u7f6e Android \u9879\u76ee</li>
+</ul>
+<p>\u7d27\u63a5\u7740\uff0c\u8fdb\u5165\u76ee\u5f55\uff0c\u5e76\u4e14\u5b89\u88c5\u4f9d\u8d56\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ <span class="built_in">cd</span> appName && npm install</div></pre></td></tr></table></figure>
+<p>\u81f3\u6b64\uff0c\u9879\u76ee\u6a21\u7248\u521b\u5efa\u5b8c\u6210\uff0c\u63a5\u4e0b\u6765\u6211\u4eec\u53ef\u4ee5\u81ea\u5b9a\u4e49\u6211\u4eec\u7684 APP \u4fe1\u606f\u5e76\u6253\u5305\u8fd0\u884c\u3002</p>
+<h3 id="\u8fd0\u884c\u4e0e\u6253\u5305"><a href="#\u8fd0\u884c\u4e0e\u6253\u5305" class="headerlink" title="\u8fd0\u884c\u4e0e\u6253\u5305"></a>\u8fd0\u884c\u4e0e\u6253\u5305</h3><p>\u5982\u679c\u4e00\u5207\u6b63\u5e38\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 weexpack \u6253\u5305\u6216\u6a21\u62df\u5668\u8fd0\u884c\u4e86\uff1a</p>
+<p>\u6a21\u62df\u5668\u8fd0\u884c</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ weexpack run ios</div></pre></td></tr></table></figure>
+<p>\u6784\u5efa ipa \u5305\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ weexpack build ios</div></pre></td></tr></table></figure>
+<p>\u6784\u5efa\u5305\u7684\u8fc7\u7a0b\u4e2d\uff0c\u5c06\u4f1a\u63d0\u793a\u8ba9\u60a8\u8f93\u5165 CodeSign\uff08\u8bc1\u4e66\uff09\u3001Profile(provisioning profile)\u3001AppId\uff0c\u53ea\u6709\u8f93\u5165\u771f\u5b9e\u7684\u8fd9\u4e9b\u4fe1\u606f\u624d\u80fd\u6210\u529f\u6253\u5305\u3002 \u5176\u4f59\u5982AppName\uff0c\u548c\u5165\u53e3 weex bundle \u6587\u4ef6\u53ef\u4ee5\u7f16\u8f91\u9879\u76ee\u76ee\u5f55\u4e0b\u7684 <code>ios.config.json</code> \u914d\u7f6e\u3002 \u6253\u5b8c\u5305\u6210\u529f\u4e4b\u540e\uff0c\u53ef\u4ee5\u5728 <code>/playground/build/ipa_build/</code> \u76ee\u5f55\u4e0b\u83b7\u53d6 ipa \u6587\u4ef6\u3002</p>
+<p>\u6ce8\uff1a\u8bc1\u4e66\u9700\u8981\u9884\u5148\u5b89\u88c5\u5230 keychain \u4e2d\uff0c\u5728 keychain \u4e2d\u70b9\u51fb\u53f3\u952e\u83b7\u53d6\u8bc1\u4e66 id\uff08\u8bc1\u4e66\u540d\u79f0\uff09\u3001provisioning profile \u6587\u4ef6\uff08*mobileprovision\uff09\u9700\u8981\u83b7\u53d6 UUID\uff0c\u8fdb\u5165\u76ee\u5f55\u53ef\u4ee5\u770b\u5230 mobileprovision_UUID.sh \u6587\u4ef6\uff0c\u6b64\u6587\u4ef6\u53ef\u4ee5\u83b7\u53d6\u5230 UUID\u3002</p>
+<p>mobileprovision_UUID.sh \u7528\u6cd5\u5982\u4e0b\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ ./mobileprovision_UUID.sh *mobileprovision</div></pre></td></tr></table></figure>
+<p>\u53c2\u6570\uff08*mobileprovision\uff09\u4e3a provisioning profile \u6587\u4ef6\u8def\u5f84</p>
+<p><strong> \u6ce8\uff1arun \u4e0e build \u90e8\u5206\u6d89\u53ca pod \u7684\u4f9d\u8d56\u5b89\u88c5\u95ee\u9898\u3002</strong></p>
+<ul>
+<li>\u9996\u5148\u8981\u5b89\u88c5 cocoapods \uff0c\u5177\u4f53\u5b89\u88c5\u6b65\u9aa4\u53ef\u67e5\u770b<a href="https://cocoapods.org/" target="_blank" rel="external">\u8fd9\u91cc</a>\uff0c\u5efa\u8bae\u5b89\u88c5 0.39.0 \u7248\u672c\u3002</li>
+<li><p>\u4e3a\u4e86\u52a0\u5feb CLI \u6267\u884c\u901f\u5ea6\uff0cweexpack \u521b\u5efa\u7684\u5de5\u7a0b\u9ed8\u8ba4\u5b89\u88c5\u4e86\u9700\u8981\u7684\u4f9d\u8d56\u5e93\u3002\u4f46\u662f\u547d\u4ee4\u6267\u884c\u4f9d\u7136\u4f1a\u66f4\u65b0\u9700\u8981\u5347\u7ea7\u7684\u4f9d\u8d56\u5e93\u3002</p>
+<ul>
+<li>\u5982\u679c\u51fa\u73b0\u8fd9\u79cd\u9519\u8bef\u63d0\u793a <code>unable to find a specification for 'WeexSDK'</code> \u8fd9\u79cd\u9519\u8bef\uff0c\u8bf4\u660e\u4f60\u672c\u5730\u6ca1\u6709\u66f4\u65b0 cocoapods master \u4ed3\u5e93\uff0c\u8fd0\u884c <code>pod repo update</code> \uff0c\u6b64\u65f6\u8fd0\u884c <code>pod search WeexSDK</code>\uff1a</li>
+</ul>
+<p><img src="https://img.alicdn.com/tps/TB1jLx4OFXXXXaoXFXXXXXXXXXX-212-33.png" alt=""> </p>
+<p>\u8bf4\u660e master repo \u66f4\u65b0\u6210\u529f\u3002\u4ee5\u4e0a\u662f\u4ee5 <code>WeexSDK</code> \u4e3a\u4f8b\uff0c\u5176\u4ed6\u5e93\u7c7b\u4f3c\u3002</p>
+<ul>
+<li>\u5982\u679c\u51fa\u73b0\u8fd9\u79cd\u9519\u8bef <code>error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.</code> \u8fdb\u5165 playground \u76ee\u5f55\uff08podfile \u6587\u4ef6\u6240\u5728\u76ee\u5f55\uff09\u6309\u63d0\u793a\u6267\u884c\u3002</li>
+</ul>
+<p>\u66f4\u591a pod \u4f7f\u7528\u7ec6\u8282\u8bf7\u79fb\u6b65<a href="https://cocoapods.org/" target="_blank" rel="external">cocoapods</a></p>
+</li>
+<li><p>mobileprovision\uff0c\u53c2\u6570\uff08*mobileprovision\uff09\u4e3a provisioning profile \u6587\u4ef6\u8def\u5f84\u3002</p>
+</li>
+</ul>
+<hr>
+<h2 id="Android"><a href="#Android" class="headerlink" title="Android"></a>Android</h2><p>\u5728 Mac \u5e73\u53f0\u5f00\u53d1 Android \u9996\u5148\u9700\u8981\u4e0b\u8f7d <a href="https://developer.android.com/studio/install.html" target="_blank" rel="external">Android Studio</a>\uff08\u4f60\u53ef\u80fd\u9700\u8981\u7ffb\u5899\u624d\u80fd\u8bbf\u95ee\uff09\u3002<a href="https://developer.android.com/studio/install.html" target="_blank" rel="external">Android Studio</a> \u4e3a\u6211\u4eec\u63d0\u4f9b\u4e86 Android SDK \u53ca AVD\uff08\u6a21\u62df\u5668\uff09\u4ee5\u4fbf\u6211\u4eec\u5feb\u901f\u8fd0\u884c Android \u9879\u76ee\u3002</p>
+<p>\u4e0b\u8f7d\u5b8c\u6210\u540e\u8fd0\u884c Android Studio\uff0c\u4efb\u610f\u65b0\u5efa\u4e00\u4e2a Android \u9879\u76ee\uff0c\u5728\u7b2c\u4e8c\u6b65\u4e2d\u9009\u62e9 <strong>Android 5.1</strong>\uff0c\u7136\u540e\u70b9\u51fb next \u5b8c\u6210\u9879\u76ee\u521b\u5efa\uff0c\u5982\u56fe\u6240\u793a\uff1a</p>
+<p><img src="https://gw.alicdn.com/tps/TB1VulhOFXXXXcPXFXXXXXXXXXX-828-686.png" alt="android"> </p>
+<p>\u5f85 Android Studio \u6253\u5f00\u540e\uff0c\u5728\u9876\u90e8\u83dc\u5355\u680f\u9009\u62e9 Tools -> Android -> AVD Manager\uff0c\u5b89\u88c5 Android \u6a21\u62df\u5668\uff1a</p>
+<p><img src="https://img.alicdn.com/tps/TB1CBdgOFXXXXXnXVXXXXXXXXXX-661-392.jpg" alt="android"></p>
+<p>\u4e4b\u540e\uff0c\u6253\u5f00\u6a21\u62df\u5668\u8fd0\u884c Android\u3002</p>
+<p><strong>\u6ce8\u610f\uff1a</strong></p>
+<ol>
+<li>\u5fc5\u987b\u4fdd\u6301\u6a21\u62df\u5668\u8fd0\u884c\u3002</li>
+<li>\u4fdd\u8bc1 Android build-tool \u7684\u7248\u672c\u4e3a 23.0\u3002\u3010\u53ef\u4ee5\u5728 Android Studio \u7684 SDK Manager \u91cc\u67e5\u770b\u662f\u5426\u5df2\u5b89\u88c5\u8fd9\u4e2a\u7248\u672c\uff0c\u5982\u679c\u6ca1\u6709\u53ef\u9009\u62e9\u5b89\u88c5\u8fd9\u4e00\u7248\u672c\u3011\u3002</li>
+</ol>
+<h3 id="\u914d\u7f6e\u73af\u5883\u53d8\u91cf"><a href="#\u914d\u7f6e\u73af\u5883\u53d8\u91cf" class="headerlink" title="\u914d\u7f6e\u73af\u5883\u53d8\u91cf"></a>\u914d\u7f6e\u73af\u5883\u53d8\u91cf</h3><p>\u56e0\u4e3a Android Studio \u5b89\u88c5\u7684 SDK \u4e0d\u4f1a\u81ea\u52a8\u914d\u7f6e\u73af\u5883\u53d8\u91cf\uff08\u4f60\u81ea\u5df1\u5b89\u88c5\u7684 SDK \u540c\u6837\u4e0d\u4f1a\uff09\u3002\u6240\u4ee5\u9700\u8981\u60a8\u81ea\u5df1\u624b\u52a8\u914d\u7f6e Android_HOME \u73af\u5883\u53d8\u91cf\u548c PATH </p>
+<p>\u5982\u679c\u662f Android Studio \u5b89\u88c5\u7684 SDK \u5b89\u88c5\u8def\u5f84\u53ef\u5df2\u5728 SDK manager \u91cc\u627e\u5230\uff08\u6253\u5f00 SDK manager \u7684\u65b9\u5f0f\u8bf7\u53c2\u7167\u56fe2\uff09</p>
+<p>Windows \u4e0b\u8bf7\u53c2\u7167 <a href="http://jingyan.baidu.com/article/09ea3ede1b4df6c0aede39ab.html" target="_blank" rel="external">window \u4e0b\u5982\u4f55\u8bbe\u7f6e ANDROID \u73af\u5883\u53d8\u91cf</a></p>
+<p>Linux/Mac \u4e0b\u53ea\u9700\u7f16\u8f91 <code>.bash_profile</code> \u589e\u52a0 PATH \u5373\u53ef\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">vim ~/.bash_profile</div></pre></td></tr></table></figure>
+<p>\u7136\u540e\u6dfb\u52a0\u4e0b\u5217\u4ee3\u7801\u8fdb\u53bb\uff08\u8def\u5f84\u66ff\u6362\u4e3a\u4f60\u7684\u771f\u5b9e\u8def\u5f84\uff09</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line"><span class="built_in">export</span> ANDROID_HOME=/xxx/Library/Android/sdk</div><div class="line"><span class="built_in">export</span> PATH=<span class="variable">${PATH}</span>:<span class="variable">$ANDROID_HOME</span>/tools:<span class="variable">$ANDROID_HOME</span>/platform-tools:<span class="variable">$ANDROID_HOME</span>/build-tools</div></pre></td></tr></table></figure>
+<p>\u7136\u540e\u4fdd\u5b58\u9000\u51fa\uff08:wq\uff09\u3002\u518d\u6267\u884c\u4e0b\u5217\u547d\u4ee4\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line"><span class="built_in">source</span> ~/.bash_profile</div></pre></td></tr></table></figure>
+<h3 id="\u521b\u5efa\u9879\u76ee-1"><a href="#\u521b\u5efa\u9879\u76ee-1" class="headerlink" title="\u521b\u5efa\u9879\u76ee"></a>\u521b\u5efa\u9879\u76ee</h3><p>\u7136\u540e\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528 weexpack \u521b\u5efa weex \u5de5\u7a0b\u4e86\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ weexpack init appName</div></pre></td></tr></table></figure>
+<p>weexpack \u4f1a\u81ea\u52a8\u65b0\u5efa\u4ee5 appName \u547d\u540d\u7684\u76ee\u5f55\uff0c\u5e76\u5c06\u9879\u76ee\u6a21\u677f\u62c9\u53d6\u5230\u8be5\u76ee\u5f55\u3002</p>
+<p>\u6700\u7ec8\u5f62\u6210\u5982\u4e0b\u76ee\u5f55\u7ed3\u6784\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">-> /appName</div><div class="line">.</div><div class="line">|\u2014\u2014 .gitignore</div><div class="line">|\u2014\u2014 README.md</div><div class="line">|\u2014\u2014 package.json</div><div class="line">|-- android.config.json</div><div class="line">|-- ios.config.json</div><div class="line">|\u2014\u2014 webpack.config.js</div><div class="line">|\u2014\u2014 /src</div><div class="line">| |\u2014\u2014 index.we</div><div class="line">|\u2014\u2014 /html5</div><div class="line">| |\u2014\u2014 index.html</div><div class="line">|\u2014\u2014 /ios</div><div class="line">| |\u2014\u2014 /playground</div><div class="line">| |\u2014\u2014 /sdk</div><div class="line">| |\u2014\u2014 /WXDevtool</div><div class="line">|\u2014\u2014 /android</div><div class="line">| |\u2014\u2014 /playground</div><div class="line">| |\u2014\u2014 /appframework</div></pre></td></tr></table></figure>
+<p>\u5176\u4e2d\uff1a</p>
+<ul>
+<li><code>webpack.config.js</code> \u662f webpack \u914d\u7f6e\u6587\u4ef6\uff0c\u7528\u4e8e\u751f\u6210 <code>.we</code> \u6587\u4ef6\u7684 JSBunlde</li>
+<li><code>ios.config.json</code> \u662f iOS \u9879\u76ee\u914d\u7f6e\u6587\u4ef6</li>
+<li><code>android.config.json</code> \u662f Android \u9879\u76ee\u914d\u7f6e\u6587\u4ef6</li>
+<li><code>/src</code> \u76ee\u5f55\u653e\u7f6e Weex \u9875\u9762</li>
+<li><code>/html5</code> \u662f H5 \u7aef\u5165\u53e3\u6587\u4ef6</li>
+<li><code>/ios</code> \u653e\u7f6e iOS \u9879\u76ee</li>
+<li><code>/android</code> \u653e\u7f6e Android \u9879\u76ee</li>
+</ul>
+<p>\u7d27\u63a5\u7740\uff0c\u8fdb\u5165\u76ee\u5f55\uff0c\u5e76\u4e14\u5b89\u88c5\u4f9d\u8d56\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ <span class="built_in">cd</span> appName && npm install</div></pre></td></tr></table></figure>
+<p>\u81f3\u6b64\uff0c\u9879\u76ee\u6a21\u7248\u521b\u5efa\u5b8c\u6210\uff0c\u63a5\u4e0b\u6765\u6211\u4eec\u53ef\u4ee5\u81ea\u5b9a\u4e49\u6211\u4eec\u7684 APP \u4fe1\u606f\u5e76\u6253\u5305\u8fd0\u884c\u3002</p>
+<h3 id="\u8fd0\u884c\u4e0e\u6253\u5305-1"><a href="#\u8fd0\u884c\u4e0e\u6253\u5305-1" class="headerlink" title="\u8fd0\u884c\u4e0e\u6253\u5305"></a>\u8fd0\u884c\u4e0e\u6253\u5305</h3><p>\u5982\u679c\u4e00\u5207\u6b63\u5e38\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 weexpack \u6253\u5305\u6216\u6a21\u62df\u5668\u8fd0\u884c\u4e86\uff1a</p>
+<p>Android \u7684\u6253\u5305\u548c\u6784\u5efa\u662f\u4e00\u4f53\u7684 \uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ weexpack run android</div></pre></td></tr></table></figure>
+<p>\u540c\u6837\u7684\u4f60\u53ef\u4ee5\u66f4\u6539\u9879\u76ee\u76ee\u5f55\u4e0b\u7684android.config.json</p>
+<ul>
+<li><code>AppName</code>: \u5e94\u7528\u540d</li>
+<li><code>AppId</code>: application_id \u5305\u540d</li>
+<li><code>SplashText</code>: \u6b22\u8fce\u9875\u4e0a\u9762\u7684\u6587\u5b57</li>
+<li><p><code>WeexBundle</code>: \u6307\u5b9a\u7684 weex bundle \u6587\u4ef6\uff08\u652f\u6301\u6587\u4ef6\u540d\u548c url \u7684\u5f62\u5f0f\uff09</p>
+<p>\u6307\u5b9a\u6587\u4ef6\u540d\u5219\u4ee5\u672c\u5730\u6587\u4ef6\u7684\u65b9\u5f0f\u52a0\u8f7d bundle\uff0c\u6307\u5b9a url \u5219\u4ee5\u8fdc\u7a0b\u7684\u65b9\u5f0f\u52a0\u8f7d JSBundle\u3002\u5982\u679c\u4ee5\u672c\u5730\u65b9\u5f0f\u6307\u5b9a bundle <code>.we</code> \u6587\u4ef6\u8bf7\u653e\u5230 <code>src</code> \u76ee\u5f55\u3002</p>
+</li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/advanced/create-a-weex-project.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/create-a-weex-project.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/customize-a-native-component.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/customize-a-native-component.html b/content/cn/v-0.10/advanced/customize-a-native-component.html
new file mode 100644
index 0000000..e699e8f
--- /dev/null
+++ b/content/cn/v-0.10/advanced/customize-a-native-component.html
@@ -0,0 +1,439 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5982\u4f55\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6\uff1fWeex \u5df2\u7ecf\u5305\u542b\u4e86\u6700\u5173\u952e\u7684\u5e73\u53f0\u7ec4\u4ef6\uff0c\u4f8b\u5982 ScrollView, ListView, Text, Imageview \u7b49\u7b49\u3002\u5f53\u7136\uff0c\u8fd9\u4e9b\u7ec4\u4ef6\u5e76\u4e0d\u80fd\u5b8c\u5168\u6ee1\u8db3\u4f60\u7684\u9700\u6c42\u3002\u53e6\u5916\uff0c\u90a3\u4e9b\u5728\u4f60\u7684\u5de5\u7a0b\u4e2d\u5e38\u7528\u7684\u5927\u91cf\u539f\u751f UI \u7ec4\u4ef6\uff0c\u53ef\u80fd\u9700\u8981\u88ab\u7b80\u5355\u5730\u96c6\u5408\u5230 Weex \u4e2d\u3002\u5e78\u8fd0\u7684\u662f\uff0c\u901a\u8fc7\u4efb\u610f\u5df2\u5b58\u5728\u7684\u7ec4\u4ef6\u6765\u521b\u5efa\u4f60\u7684\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u662f\u4e00\u4ef6\u5f88\u65b9\u4fbf\u7684\u4e8b\u3002
+Android\u6b65\u9aa4\uff1a1.\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5fc5\u987b\u7ee7\u627f\u81ea">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/advanced/customize-a-native-component.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5982\u4f55\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6\uff1fWeex \u5df2\u7ecf\u5305\u542b\u4e86\u6700\u5173\u952e\u7684\u5e73\u53f0\u7ec4\u4ef6\uff0c\u4f8b\u5982 ScrollView, ListView, Text, Imageview \u7b49\u7b49\u3002\u5f53\u7136\uff0c\u8fd9\u4e9b\u7ec4\u4ef6\u5e76\u4e0d\u80fd\u5b8c\u5168\u6ee1\u8db3\u4f60\u7684\u9700\u6c42\u3002\u53e6\u5916\uff0c\u90a3\u4e9b\u5728\u4f60\u7684\u5de5\u7a0b\u4e2d\u5e38\u7528\u7684\u5927\u91cf\u539f\u751f UI \u7ec4\u4ef6\uff0c\u53ef\u80fd\u9700\u8981\u88ab\u7b80\u5355\u5730\u96c6\u5408\u5230 Weex \u4e2d\u3002\u5e78\u8fd0\u7684\u662f\uff0c\u901a\u8fc7\u4efb\u610f\u5df2\u5b58\u5728\u7684\u7ec4\u4ef6\u6765\u521b\u5efa\u4f60\u7684\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u662f\u4e00\u4ef6\u5f88\u65b9\u4fbf\u7684\u4e8b\u3002
+Android\u6b65\u9aa4\uff1a1.\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5fc5\u987b\u7ee7\u627f\u81ea">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.922Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6">
+<meta name="twitter:description" content="\u5982\u4f55\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6\uff1fWeex \u5df2\u7ecf\u5305\u542b\u4e86\u6700\u5173\u952e\u7684\u5e73\u53f0\u7ec4\u4ef6\uff0c\u4f8b\u5982 ScrollView, ListView, Text, Imageview \u7b49\u7b49\u3002\u5f53\u7136\uff0c\u8fd9\u4e9b\u7ec4\u4ef6\u5e76\u4e0d\u80fd\u5b8c\u5168\u6ee1\u8db3\u4f60\u7684\u9700\u6c42\u3002\u53e6\u5916\uff0c\u90a3\u4e9b\u5728\u4f60\u7684\u5de5\u7a0b\u4e2d\u5e38\u7528\u7684\u5927\u91cf\u539f\u751f UI \u7ec4\u4ef6\uff0c\u53ef\u80fd\u9700\u8981\u88ab\u7b80\u5355\u5730\u96c6\u5408\u5230 Weex \u4e2d\u3002\u5e78\u8fd0\u7684\u662f\uff0c\u901a\u8fc7\u4efb\u610f\u5df2\u5b58\u5728\u7684\u7ec4\u4ef6\u6765\u521b\u5efa\u4f60\u7684\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u662f\u4e00\u4ef6\u5f88\u65b9\u4fbf\u7684\u4e8b\u3002
+Android\u6b65\u9aa4\uff1a1.\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5fc5\u987b\u7ee7\u627f\u81ea">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="advanced" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "advanced";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u9ad8\u9636\u77e5\u8bc6
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex \u5de5\u4f5c\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">\u96c6\u6210\u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">\u96c6\u6210\u5230 iOS</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">\u96c6\u6210\u5230 web</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link current ">\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native API</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-advanced">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u81ea\u5b9a\u4e49 native \u7ec4\u4ef6
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.922Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5982\u4f55\u81ea\u5b9a\u4e49-native-\u7ec4\u4ef6\uff1f"><a href="#\u5982\u4f55\u81ea\u5b9a\u4e49-native-\u7ec4\u4ef6\uff1f" class="headerlink" title="\u5982\u4f55\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6\uff1f"></a>\u5982\u4f55\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6\uff1f</h1><p>Weex \u5df2\u7ecf\u5305\u542b\u4e86\u6700\u5173\u952e\u7684\u5e73\u53f0\u7ec4\u4ef6\uff0c\u4f8b\u5982 <code>ScrollView, ListView, Text, Imageview</code> \u7b49\u7b49\u3002\u5f53\u7136\uff0c\u8fd9\u4e9b\u7ec4\u4ef6\u5e76\u4e0d\u80fd\u5b8c\u5168\u6ee1\u8db3\u4f60\u7684\u9700\u6c42\u3002\u53e6\u5916\uff0c\u90a3\u4e9b\u5728\u4f60\u7684\u5de5\u7a0b\u4e2d\u5e38\u7528\u7684\u5927\u91cf\u539f\u751f UI \u7ec4\u4ef6\uff0c\u53ef\u80fd\u9700\u8981\u88ab\u7b80\u5355\u5730\u96c6\u5408\u5230 Weex \u4e2d\u3002\u5e78\u8fd0\u7684\u662f\uff0c\u901a\u8fc7\u4efb\u610f\u5df2\u5b58\u5728\u7684\u7ec4\u4ef6\u6765\u521b\u5efa\u4f60\u7684\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u662f\u4e00\u4ef6\u5f88\u65b9\u4fbf\u7684\u4e8b\u3002</p>
+<h2 id="Android"><a href="#Android" class="headerlink" title="Android"></a>Android</h2><h3 id="\u6b65\u9aa4\uff1a"><a href="#\u6b65\u9aa4\uff1a" class="headerlink" title="\u6b65\u9aa4\uff1a"></a>\u6b65\u9aa4\uff1a</h3><p>1.\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5fc5\u987b\u7ee7\u627f\u81ea <code>WXComponent</code> \u6216\u8005 <code>WXContainer</code> \uff1b<br>2.weex SDK \u53ef\u4ee5\u8bc6\u522b @WXComponentProp (name = value(value \u662f attr \u6216\u8005 dsl style))\uff1b<br>3.\u65b9\u6cd5\u5fc5\u987b\u662f <code>public</code> \u7684\uff1b<br>4.\u7ec4\u4ef6\u7c7b\u4e0d\u80fd\u662f\u4e00\u4e2a\u5185\u90e8\u7c7b\uff1b<br>5.\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u4e0d\u80fd\u88ab ProGuard \u4e4b\u7c7b\u7684\u5de5\u5177\u6df7\u6dc6\uff1b<br>6.\u7ec4\u4ef6\u65b9\u6cd5\u5728 UI \u7ebf\u7a0b\u88ab\u8c03\u7528\uff0c\u56e0\u6b64\u4e0d\u8981\u5728\u91cc\u9762\u8fdb\u884c\u8017\u65f6\u7684\u64cd\u4f5c\uff1b<br>7.Weex \u7684\u53c2\u6570\u7c7b\u578b\u53ef\u4ee5\u662f int, double, float, String, Map, List \u548c\u5b9e\u73b0\u4e86 WXObject \u63a5\u53e3\u7684\u81ea\u5b9a\u4e49\u7c7b\uff1b</p>
+<h3 id="\u53c2\u8003\u4ee5\u4e0b\u4f8b\u5b50\uff1a"><a href="#\u53c2\u8003\u4ee5\u4e0b\u4f8b\u5b50\uff1a" class="headerlink" title="\u53c2\u8003\u4ee5\u4e0b\u4f8b\u5b50\uff1a"></a>\u53c2\u8003\u4ee5\u4e0b\u4f8b\u5b50\uff1a</h3><figure class="highlight java"><table><tr><td class="code"><pre><div class="line"> `<span class="keyword">package</span> com.taobao.weex.ui.component;</div><div class="line"><span class="comment">// \u2026\u2026</span></div><div class="line"></div><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MyViewComponent</span> <span class="keyword">extends</span> <span class="title">WXComponent</span></span>{</div><div class="line"></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="title">MyViewComponent</span><span class="params">(WXSDKInstance instance, WXDomObject node, </span></span></div><div class="line"> WXVContainer parent, String instanceId, <span class="keyword">boolean</span> lazy) {
</div><div class="line"> <span class="keyword">super</span>(instance, node, parent, instanceId, lazy);</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">initView</span><span class="params">()</span> </span>{</div><div class="line"> <span class="comment">//<span class="doctag">TODO:</span>your own code \u2026\u2026</span></div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> WXFrameLayout <span class="title">getView</span><span class="params">()</span> </span>{</div><div class="line"> <span class="comment">//<span class="doctag">TODO:</span>your own code \u2026\u2026\u2026
</span></div><div class="line"> }</div><div class="line"> <span class="meta">@WXComponentProp</span>(name=WXDomPropConstant.WX_ATTR_VALUE)</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setMyViewValue</span><span class="params">(String value)</span> </span>{</div><div class="line"> ((TextView)mHost).setText(value);</div><div class="line"> }</div><div class="line"></div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u5fc5\u987b\u6ce8\u518c\u7ec4\u4ef6\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line">WXSDKEngine.registerComponent(<span class="string">"MyView"</span>, MyViewComponent.class);</div></pre></td></tr></table></figure>
+<h2 id="iOS"><a href="#iOS" class="headerlink" title="iOS"></a>iOS</h2><p>\u867d\u7136 WeexSDK \u4e2d\u6709\u5f88\u591a\u7684 native \u7684 Component\uff0c\u4f46\u8fd9\u6709\u53ef\u80fd\u5e76\u4e0d\u80fd\u6ee1\u8db3\u4f60\u7684\u9700\u6c42\u3002\u5728\u4e4b\u524d\u4f60\u53ef\u80fd\u5df2\u7ecf\u5199\u4e86\u4e00\u4e9b\u5f88\u9177\u70ab native \u7684\u7ec4\u4ef6\uff0c\u60f3\u5305\u88c5\u4e00\u4e0b\uff0c\u5bfc\u5165\u5230 Weex \u4e2d\uff0c\u56e0\u6b64\u6211\u4eec\u63d0\u4f9b\u4e86\u8ba9\u5f00\u53d1\u8005\u5b9e\u73b0\u81ea\u5df1\u7684 native Component\u3002\u4e0b\u9762\u5c06\u4ee5 WeexSDK \u4e2d\u5df2\u7ecf\u5b58\u5728\u7684 Component\uff1a<code>image</code> \u4e3a\u4f8b\u5b50\uff0c\u4ecb\u7ecd\u4e00\u4e0b\u5982\u4f55\u6784\u5efa\u4e00\u4e2a native Component\u3002\u5047\u8bbe\u4f60\u5df2\u7ecf\u4e86\u89e3 iOS \u5f00\u53d1</p>
+<h3 id="\u6ce8\u518c-Component"><a href="#\u6ce8\u518c-Component" class="headerlink" title="\u6ce8\u518c Component"></a>\u6ce8\u518c Component</h3><p>\u6ce8\u518c\u4e00\u4e2a component \u6bd4\u8f83\u7b80\u5355\uff0c\u8c03\u7528 <code>WXSDKEngine</code> \u4e2d\u7684 <code>registerComponent:withClass:</code> \u65b9\u6cd5\uff0c\u4f20\u5165\u7ec4\u4ef6\u7684\u6807\u7b7e\u540d\u79f0\uff0c\u8fd8\u6709\u5bf9\u5e94\u7684 class \u7136\u540e\u4f60\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a <code>WXImageComponent</code> \u8868\u793a <code>image</code> \u7ec4\u4ef6\u7684\u5b9e\u73b0\u3002\u5728 <code>.we</code> \u6587\u4ef6\u4e2d\uff0c\u53ea\u9700\u8981\u5199 <code><image></image></code></p>
+<h3 id="\u6dfb\u52a0\u5c5e\u6027"><a href="#\u6dfb\u52a0\u5c5e\u6027" class="headerlink" title="\u6dfb\u52a0\u5c5e\u6027"></a>\u6dfb\u52a0\u5c5e\u6027</h3><p>\u73b0\u5728\u6211\u4eec\u8981\u505a\u4e00\u4e9b\u8ba9 image component \u66f4\u52a0\u5f3a\u5927\u7684\u4e8b\u60c5\u3002\u65e2\u7136\u4f5c\u4e3a\u4e00\u4e2a\u56fe\u7247\u7684 component\uff0c\u90a3\u5b83\u5e94\u8be5\u8981\u6709\u6e90\uff0c\u7ed9\u4ed6\u52a0\u4e0a\u4e00\u4e2a <code>src</code> \u7684\u5c5e\u6027\uff0c\u540c\u65f6\u7ed9\u5b83\u52a0\u4e0a\u4e00\u4e2a <code>resize</code> \u7684\u5c5e\u6027\uff08\u53ef\u4ee5\u914d\u7f6e\u7684\u6709 <code>contain/cover/stretch</code>\uff09</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">@interface WXImageComponent ()</div><div class="line"></div><div class="line">@property (nonatomic, strong) NSString *imageSrc;</div><div class="line">@property (nonatomic, assign) UIViewContentMode resizeMode;</div><div class="line"></div><div class="line">@end</div></pre></td></tr></table></figure>
+<p>component \u4e2d\u6240\u6709\u7684 style\uff0cattribute\uff0cevents \u90fd\u4f1a\u88ab\u4f20\u9012\u5230 Component \u7684\u521d\u59cb\u5316\u65b9\u6cd5\u4e2d\uff0c\u6240\u4ee5\uff0c\u4f60\u53ef\u4ee5\u5728\u521d\u59cb\u5316\u65b9\u6cd5\u4e2d\u5b58\u50a8\u4f60\u611f\u5174\u8da3\u7684\u4e00\u4e9b\u5c5e\u6027\u503c</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">@implementation WXImageComponent</div><div class="line"></div><div class="line">- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance</div><div class="line">{</div><div class="line"> if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {</div><div class="line"> _imageSrc = [WXConvert NSString:attributes[@"src"]];</div><div class="line"> _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];</div><div class="line">}</div><div class="line"></div><div class="line"> return self;</div><div class="line">}</div><div class="line"></div><div class="line">@end</div></pre></td></tr></table></figure>
+<p>attribute \u4e2d\u62ff\u5230\u7684\u503c\u7684\u7c7b\u578b\u90fd\u662f <code>id</code>\uff0c\u6211\u4eec\u53ef\u4ee5\u7528\u8f6c\u6362\u65b9\u6cd5\u628a\u5b83\u8f6c\u6362\u5230\u4efb\u4f55\u503c\u3002Weex SDK \u63d0\u4f9b\u4e86\u4e00\u4e9b\u57fa\u7840\u7684\u8f6c\u6362\u65b9\u6cd5\uff0c\u53ef\u4ee5\u53c2\u8003 <code>WXConvert</code> \u7c7b\uff0c\u6216\u8005\u4f60\u53ef\u4ee5\u6dfb\u52a0\u81ea\u5df1\u7684\u8f6c\u6362\u51fd\u6570\u3002</p>
+<h3 id="Hooking-\u6e32\u67d3\u751f\u547d\u5468\u671f"><a href="#Hooking-\u6e32\u67d3\u751f\u547d\u5468\u671f" class="headerlink" title="Hooking \u6e32\u67d3\u751f\u547d\u5468\u671f"></a>Hooking \u6e32\u67d3\u751f\u547d\u5468\u671f</h3><p>native \u7684 component \u662f\u7531 Weex \u7ba1\u7406\u7684\uff0cWeex \u521b\u5efa\uff0c\u5e03\u5c40\uff0c\u6e32\u67d3\uff0c\u9500\u6bc1\u3002Weex \u7684 component \u751f\u547d\u5468\u671f\u90fd\u662f\u53ef\u4ee5 hook \u7684\uff0c\u4f60\u53ef\u4ee5\u5728\u8fd9\u4e9b\u751f\u547d\u5468\u671f\u4e2d\u53bb\u505a\u81ea\u5df1\u7684\u4e8b\u60c5\u3002</p>
+<table>
+<thead>
+<tr>
+<th style="text-align:center">\u65b9\u6cd5</th>
+<th>\u63cf\u8ff0</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:center">initWithRef:type:\u2026</td>
+<td>\u7528\u7ed9\u5b9a\u7684\u5c5e\u6027\u521d\u59cb\u5316\u4e00\u4e2acomponent.</td>
+</tr>
+<tr>
+<td style="text-align:center">layoutDidFinish</td>
+<td>\u5728component\u5b8c\u6210\u5e03\u5c40\u65f6\u5019\u4f1a\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">loadView</td>
+<td>\u521b\u5efacomponent\u7ba1\u7406\u7684view.</td>
+</tr>
+<tr>
+<td style="text-align:center">viewWillLoad</td>
+<td>\u5728component\u7684view\u52a0\u8f7d\u4e4b\u524d\u4f1a\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">viewDidLoad</td>
+<td>\u5728component\u7684view\u52a0\u8f7d\u5b8c\u4e4b\u540e\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">viewWillUnload</td>
+<td>\u5728component\u7684view\u88ab\u91ca\u653e\u4e4b\u524d\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">viewDidUnload</td>
+<td>\u5728component\u7684view\u88ab\u91ca\u653e\u4e4b\u540e\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">updateStyles:</td>
+<td>\u5728component\u7684style\u66f4\u65b0\u65f6\u5019\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">updateAttributes:</td>
+<td>\u5728component\u7684attribute\u66f4\u65b0\u65f6\u5019\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">addEvent:</td>
+<td>\u7ed9component\u6dfb\u52a0event\u7684\u65f6\u5019\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">removeEvent:</td>
+<td>\u5728event\u79fb\u9664\u7684\u65f6\u5019\u8c03\u7528.</td>
+</tr>
+</tbody>
+</table>
+<p>\u5728 image component \u7684\u4f8b\u5b50\u91cc\u9762\uff0c\u5982\u679c\u6211\u4eec\u9700\u8981\u6211\u4eec\u81ea\u5df1\u7684 image view \u7684\u8bdd\uff0c\u53ef\u4ee5\u590d\u5199 <code>loadView</code>\u8fd9\u4e2a\u65b9\u6cd5.</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">- (UIView *)loadView</div><div class="line">{</div><div class="line">return [[WXImageView alloc] init];</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u73b0\u5728\u6211\u4eec\u4f7f\u7528 <code>WXImageView</code> \u6e32\u67d3 <code>image</code> component\u3002<br>\u4f5c\u4e3a\u4e00\u4e2a image component\uff0c\u6211\u4eec\u9700\u8981\u62ff\u5230\u670d\u52a1\u5668\u56fe\u7247\uff0c\u800c\u4e14\u628a\u5b83\u8bbe\u7f6e\u8fdb image view \u91cc. \u8fd9\u4e2a\u64cd\u4f5c\u53ef\u4ee5\u5728 <code>viewDidLoad</code> \u65b9\u6cd5\u4e2d\u505a\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u662f\u5728 view \u5df2\u7ecf\u88ab\u521b\u5efa\u800c\u4e14\u52a0\u8f7d\u4e86\u65f6\u5019 Weex SDK \u4f1a\u8c03\u7528\u5230\uff0c\u800c\u4e14 <code>viewDidLoad</code> \u8fd9\u4e2a\u65b9\u6cd5\u662f\u4f60\u505a\u989d\u5916\u521d\u59cb\u5316\u5de5\u4f5c\u6bd4\u5982\u6539\u53d8 content mode(\u4e5f\u5c31\u662f\u8bbe\u7f6eresize) \u7684\u6700\u597d\u65f6\u95f4.</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">- (void)viewDidLoad</div><div class="line">{</div><div class="line"> UIImageView *imageView = (UIImageView *)self.view;</div><div class="line"> imageView.contentMode = _resizeMode;</div><div class="line"> imageView.userInteractionEnabled = YES;</div><div class="line"> imageView.clipsToBounds = YES;</div><div class="line"> imageView.exclusiveTouch = YES;</div><div class="line"></div><div class="line"> // Do your image fetching and updating logic</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u5982\u679c\u53ef\u4ee5\u6539\u53d8 image \u7684 src\uff0c\u4e5f\u53ef\u4ee5 hook <code>updateAttributes:</code> \u65b9\u6cd5\u6765\u505a\u5c5e\u6027\u66f4\u65b0\u64cd\u4f5c\uff0c\u5f53 <code>updateAttributes:</code> \u6216\u8005 <code>updateStyles:</code> \u88ab\u8c03\u7528\u7684\u65f6\u5019\uff0c component \u7684 view \u5df2\u7ecf\u52a0\u8f7d\u5b8c\u6210</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">- (void)updateAttributes:(NSDictionary *)attributes</div><div class="line">{</div><div class="line"> if (attributes[@"src"]) {</div><div class="line"> _imageSrc = [WXConvert NSString:attributes[@"src"]];</div><div class="line"> // Do your image updating logic</div><div class="line"> }</div><div class="line"></div><div class="line"> if (attributes[@"resize"]) {</div><div class="line"> _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];</div><div class="line"> self.view.contentMode = _resizeMode;</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u6216\u8bb8\u4f60\u9700\u8981\u8003\u8651\u66f4\u591a\u7684\u751f\u547d\u5468\u671f\u65b9\u6cd5\u53bb Hook\uff0c\u5f53\u5e03\u5c40\u5b8c\u6210\u65f6\u5019\uff0c\u50cf <code>layoutDidFinish</code>\uff0c\u5982\u679c\u4f60\u60f3\u4e86\u89e3\u66f4\u591a\uff0c\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b<code>WXComponent.h</code> \u58f0\u660e\u7684\u65b9\u6cd5\u3002</p>
+<p>\u73b0\u5728\u4f60\u53ef\u4ee5\u7528\u5728\u4efb\u4f55 <code>.we</code> \u6587\u4ef6\u91cc\u9762\u4f7f\u7528 <code><image></code>\uff0c\u800c\u4e14\u53ef\u4ee5\u52a0\u4e0a image \u7684\u5c5e\u6027\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">image</span> <span class="attr">style</span>=<span class="string">"your-custom-style"</span> <span class="attr">src</span>=<span class="string">"image-remote-source"</span> <span class="attr">resize</span>=<span class="string">"contain/cover/stretch"</span>></span><span class="tag"></<span class="name">image</span>></span></div></pre></td></tr></table></figure>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/advanced/customize-a-native-component.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/customize-a-native-component.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[12/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/integrate-devtools-to-android.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/integrate-devtools-to-android.html b/content/cn/v-0.10/advanced/integrate-devtools-to-android.html
new file mode 100644
index 0000000..d7dc1fc
--- /dev/null
+++ b/content/cn/v-0.10/advanced/integrate-devtools-to-android.html
@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u96c6\u6210 Devtools \u5230 Android | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u96c6\u6210 Devtools \u5230 AndroidWeex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e Android \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002
+Android \u5e94\u7528\u63a5\u5165\u6dfb\u52a0\u4f9d\u8d56\u53ef\u4ee5\u901a\u8fc7 Gradle \u6216\u8005 Maven \u6dfb\u52a0\u5bf9 devtools aar \u7684\u4f9d\u8d56\uff0c\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5bf9\u6e90\u7801\u4f9d\u8d56\u3002">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u96c6\u6210 Devtools \u5230 Android">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/advanced/integrate-devtools-to-android.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u96c6\u6210 Devtools \u5230 AndroidWeex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e Android \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002
+Android \u5e94\u7528\u63a5\u5165\u6dfb\u52a0\u4f9d\u8d56\u53ef\u4ee5\u901a\u8fc7 Gradle \u6216\u8005 Maven \u6dfb\u52a0\u5bf9 devtools aar \u7684\u4f9d\u8d56\uff0c\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5bf9\u6e90\u7801\u4f9d\u8d56\u3002">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1aKy4NXXXXXacXVXXXXXXXXXX-1019-756.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1igLoMVXXXXawapXXXXXXXXXX-786-1610.jpg">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.930Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u96c6\u6210 Devtools \u5230 Android">
+<meta name="twitter:description" content="\u96c6\u6210 Devtools \u5230 AndroidWeex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e Android \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002
+Android \u5e94\u7528\u63a5\u5165\u6dfb\u52a0\u4f9d\u8d56\u53ef\u4ee5\u901a\u8fc7 Gradle \u6216\u8005 Maven \u6dfb\u52a0\u5bf9 devtools aar \u7684\u4f9d\u8d56\uff0c\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5bf9\u6e90\u7801\u4f9d\u8d56\u3002">
+<meta name="twitter:image" content="https://img.alicdn.com/tps/TB1aKy4NXXXXXacXVXXXXXXXXXX-1019-756.png">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="advanced" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "advanced";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u9ad8\u9636\u77e5\u8bc6
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex \u5de5\u4f5c\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">\u96c6\u6210\u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">\u96c6\u6210\u5230 iOS</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">\u96c6\u6210\u5230 web</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native API</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link current ">\u96c6\u6210 Devtools \u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-advanced">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u96c6\u6210 Devtools \u5230 Android
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.930Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u96c6\u6210-Devtools-\u5230-Android"><a href="#\u96c6\u6210-Devtools-\u5230-Android" class="headerlink" title="\u96c6\u6210 Devtools \u5230 Android"></a>\u96c6\u6210 Devtools \u5230 Android</h1><p>Weex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e Android \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002</p>
+<h2 id="Android-\u5e94\u7528\u63a5\u5165"><a href="#Android-\u5e94\u7528\u63a5\u5165" class="headerlink" title="Android \u5e94\u7528\u63a5\u5165"></a>Android \u5e94\u7528\u63a5\u5165</h2><h3 id="\u6dfb\u52a0\u4f9d\u8d56"><a href="#\u6dfb\u52a0\u4f9d\u8d56" class="headerlink" title="\u6dfb\u52a0\u4f9d\u8d56"></a>\u6dfb\u52a0\u4f9d\u8d56</h3><p>\u53ef\u4ee5\u901a\u8fc7 Gradle \u6216\u8005 Maven \u6dfb\u52a0\u5bf9 devtools aar \u7684\u4f9d\u8d56\uff0c\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5bf9\u6e90\u7801\u4f9d\u8d56\u3002\u5f3a\u70c8\u5efa\u8bae\u4f7f\u7528\u6700\u65b0\u7248\u672c\uff0c\u56e0\u4e3a Weex SDK \u548c devtools \u90fd\u5728\u5feb\u901f\u7684\u8fed\u4ee3\u5f00\u53d1\u4e2d\uff0c\u65b0\u7248\u672c\u4f1a\u6709\u66f4\u591a\u60ca\u559c\uff0c\u540c\u65f6\u4e5f\u4fee\u590d\u8001\u7248\u672c\u4e2d\u4e00\u4e9b\u95ee\u9898\u3002\u6700\u65b0\u7684 release \u7248\u672c\u53ef\u5728<a href="https://github.com/weexteam/weex_devtools_android/releases" target="_blank" rel="external">\u8fd9\u91cc</a>\u67e5\u770b\u3002\u6240\u6709\u7684 release \u7248\u672c\u90fd\u4f1a\u53d1\u5e03\u5230 <a href="https://bintray.com/alibabaweex/maven/weex_inspector" target="_blank" rel="external">jcenter repo</a>\u3002</p>
+<ul>
+<li><p><em>Gradle \u4f9d\u8d56</em></p>
+<figure class="highlight gradle"><table><tr><td class="code"><pre><div class="line"><span class="keyword">dependencies</span> {</div><div class="line"> <span class="keyword">compile</span> <span class="string">'com.taobao.android:weex_inspector:0.8.0.0'</span></div><div class="line">}</div></pre></td></tr></table></figure>
+</li>
+<li><p><em>Maven\u4f9d\u8d56</em></p>
+<figure class="highlight xml"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">dependency</span>></span></div><div class="line"> <span class="tag"><<span class="name">groupId</span>></span>com.taobao.android<span class="tag"></<span class="name">groupId</span>></span></div><div class="line"> <span class="tag"><<span class="name">artifactId</span>></span>weex_inspector<span class="tag"></<span class="name">artifactId</span>></span></div><div class="line"> <span class="tag"><<span class="name">version</span>></span>0.8.0.0<span class="tag"></<span class="name">version</span>></span></div><div class="line"> <span class="tag"><<span class="name">type</span>></span>pom<span class="tag"></<span class="name">type</span>></span></div><div class="line"><span class="tag"></<span class="name">dependency</span>></span></div></pre></td></tr></table></figure>
+</li>
+<li><p><em>\u6e90\u7801\u4f9d\u8d56</em></p>
+<p>\u9700\u8981\u590d\u5236 <a href="https://github.com/weexteam/weex_devtools_android/tree/master/inspector" target="_blank" rel="external">inspector</a> \u76ee\u5f55\u5230\u4f60\u7684 App \u7684\u540c\u7ea7\u76ee\u5f55\uff0c\u7136\u540e\u5728\u5de5\u7a0b\u7684 <code>settings.gradle</code> \u6587\u4ef6\u4e0b\u6dfb\u52a0 <code>include ":inspector"</code>\uff0c\u6b64\u8fc7\u7a0b\u53ef\u4ee5\u53c2\u8003 playground \u6e90\u7801\u7684\u5de5\u7a0b\u914d\u7f6e\u53ca\u5176\u914d\u7f6e\uff0c\u7136\u540e\u5728 App \u7684 <code>build.gralde</code> \u4e2d\u6dfb\u52a0\u4f9d\u8d56\u3002</p>
+<figure class="highlight gradle"><table><tr><td class="code"><pre><div class="line"><span class="keyword">dependencies</span> {</div><div class="line"> <span class="keyword">compile</span> <span class="keyword">project</span>(<span class="string">':inspector'</span>)</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u53e6\u5916 weex_inspector \u4e2d\u6709\u4e00\u90e8\u5206\u5305\u662f\u4ee5 provided \u7684\u65b9\u5f0f\u5f15\u5165\uff0c\u63a5\u5165\u65b9\u9700\u8981\u81ea\u884c\u89e3\u51b3\u4f9d\u8d56\u548c\u7248\u672c\u51b2\u7a81\u3002</p>
+<ul>
+<li><p><strong>provided\u65b9\u5f0f\u5f15\u7528\u7684\u5305</strong></p>
+<figure class="highlight gradle"><table><tr><td class="code"><pre><div class="line"><span class="keyword">dependencies</span> {</div><div class="line"> provided <span class="string">'com.google.code.findbugs:jsr305:2.0.1'</span></div><div class="line"> provided <span class="string">'com.android.support:appcompat-v7:23.1.1'</span></div><div class="line"> provided <span class="string">'com.taobao.android:weex_sdk:0.8.0'</span></div><div class="line"> provided <span class="string">'com.alibaba:fastjson:1.1.45+'</span></div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure>
+</li>
+</ul>
+</li>
+</ul>
+<ul>
+<li><p><strong>\u53cd\u5c04\u5f15\u7528\u7684\u5305(0.8.0.0\u4ee5\u4e0a\u7248\u672c)</strong></p>
+<figure class="highlight gradle"><table><tr><td class="code"><pre><div class="line"><span class="keyword">dependencies</span> {</div><div class="line"> <span class="keyword">compile</span> <span class="string">'com.squareup.okhttp:okhttp:2.3.0'</span></div><div class="line"> <span class="keyword">compile</span> <span class="string">'com.squareup.okhttp:okhttp-ws:2.3.0'</span></div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure>
+</li>
+</ul>
+<pre><code>\u6216\u8005
+
+<figure class="highlight gradle"><table><tr><td class="code"><pre><div class="line"><span class="keyword">dependencies</span> {</div><div class="line"> <span class="keyword">compile</span> <span class="string">'com.squareup.okhttp:okhttp:3.4.1'</span></div><div class="line"> <span class="keyword">compile</span> <span class="string">'com.squareup.okhttp:okhttp-ws:3.4.1'</span></div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure>
+</code></pre><h4 id="\u7248\u672c\u517c\u5bb9"><a href="#\u7248\u672c\u517c\u5bb9" class="headerlink" title="\u7248\u672c\u517c\u5bb9"></a>\u7248\u672c\u517c\u5bb9</h4><table>
+<thead>
+<tr>
+<th>weex sdk</th>
+<th>weex inspector</th>
+<th>Debugger Server</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>0.8.0.1+</td>
+<td>0.0.8.1+</td>
+<td>0.2.39+</td>
+</tr>
+<tr>
+<td>0.7.0+</td>
+<td>0.0.7.13</td>
+<td>0.2.38</td>
+</tr>
+<tr>
+<td>0.6.0+</td>
+<td>0.0.2.2</td>
+<td>-</td>
+</tr>
+</tbody>
+</table>
+<h3 id="\u6dfb\u52a0-Debug-\u6a21\u5f0f\u5f00\u5173"><a href="#\u6dfb\u52a0-Debug-\u6a21\u5f0f\u5f00\u5173" class="headerlink" title="\u6dfb\u52a0 Debug \u6a21\u5f0f\u5f00\u5173"></a>\u6dfb\u52a0 Debug \u6a21\u5f0f\u5f00\u5173</h3><p>\u63a7\u5236\u8c03\u8bd5\u6a21\u5f0f\u7684\u6253\u5f00\u548c\u5173\u95ed\u7684\u5173\u952e\u70b9\u53ef\u4ee5\u6982\u62ec\u4e3a\u4e09\u6761\u89c4\u5219\u3002</p>
+<p><strong>\u89c4\u5219\u4e00\uff1a\u901a\u8fc7 <code>sRemoteDebugMode</code> \u548c <code>sRemoteDebugProxyUrl</code> \u548c\u6765\u8bbe\u7f6e\u5f00\u5173\u548c Debugger Server \u5730\u5740\u3002</strong></p>
+<p>Weex SDK \u7684 <code>WXEnvironment</code> \u7c7b\u91cc\u6709\u4e00\u5bf9\u9759\u6001\u53d8\u91cf\u6807\u8bb0\u4e86 Weex \u5f53\u524d\u7684\u8c03\u8bd5\u6a21\u5f0f\u662f\u5426\u5f00\u542f\u5206\u522b\u662f\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">boolean</span> sRemoteDebugMode; <span class="comment">// \u662f\u5426\u5f00\u542f debug \u6a21\u5f0f\uff0c\u9ed8\u8ba4\u5173\u95ed</span></div><div class="line"><span class="keyword">public</span> <span class="keyword">static</span> String sRemoteDebugProxyUrl; <span class="comment">// DebugServer\u7684websocket\u5730\u5740</span></div></pre></td></tr></table></figure>
+<p>\u65e0\u8bba\u5728 App \u4e2d\u65e0\u8bba\u4ee5\u4f55\u79cd\u65b9\u5f0f\u8bbe\u7f6e Debug \u6a21\u5f0f\uff0c\u90fd\u5fc5\u987b\u5728\u6070\u5f53\u7684\u65f6\u673a\u8c03\u7528\u7c7b\u4f3c\u5982\u4e0b\u7684\u65b9\u6cd5\u6765\u8bbe\u7f6e <code>WXEnvironment.sRemoteDebugMode</code> \u548c <code>WXEnvironment.sRemoteDebugProxyUrl</code>\u3002</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">initDebugEnvironment</span><span class="params">(<span class="keyword">boolean</span> enable, String host)</span> </span>{</div><div class="line"> WXEnvironment.sRemoteDebugMode = enable;</div><div class="line"> WXEnvironment.sRemoteDebugProxyUrl = <span class="string">"ws://"</span> + host + <span class="string">":8088/debugProxy/native"</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
+<p><strong>\u89c4\u5219\u4e8c\uff1a\u4fee\u6539 <code>sRemoteDebugMode</code> \u540e\u4e00\u5b9a\u8981\u8c03\u7528<code>`WXSDKEngine.reload()</code>\u3002</strong></p>
+<p>\u4e00\u822c\u4f86\u8aaa\uff0c\u5728\u4fee\u6539\u4e86 <code>WXEnvironment.sRemoteDebugMode</code> \u4ee5\u540e\u8c03\u7528\u4e86 <code>WXSDKEngine.reload()</code> \u65b9\u6cd5\u624d\u80fd\u591f\u4f7f Debug\u6a21\u5f0f\u751f\u6548\u3002<code>WXSDKEngine.reload()</code> \u7528\u6765\u91cd\u7f6e Weex \u7684\u8fd0\u884c\u73af\u5883\u4e0a\u4e0b\u6587\uff0c\u5728\u5207\u6362\u8c03\u8bd5\u6a21\u5f0f\u65f6\u9700\u8981\u8c03\u7528\u6b64\u65b9\u6cd5\u6765\u521b\u5efa\u65b0\u7684 Weex \u8fd0\u884c\u65f6\u548c DebugBridge \u5e76\u5c06\u6240\u6709\u7684 JS \u8c03\u7528\u6865\u63a5\u5230\u8c03\u8bd5\u670d\u52a1\u5668\u6267\u884c\u3002\u5728 reload \u8fc7\u7a0b\u4e2d\u4f1a\u8c03\u7528 launchInspector\uff0c\u8fd9\u5c31\u662f SDK \u63a7\u5236 Debug \u6a21\u5f0f\u6700\u6838\u5fc3\u4e00\u4e2a\u65b9\u6cd5\uff0c\u5176\u4f20\u5165\u53c2\u6570\u5373\u4e3a <code>sRemoteDebugMode</code>\uff0c\u82e5\u4e3a <code>true</code> \u5219\u8be5\u65b9\u6cd5\u4e2d\u5c1d\u8bd5\u4ee5\u53cd\u5c04\u7684\u65b9\u5f0f\u83b7\u53d6 DebugBridge \u7528\u6765\u5728\u8fdc\u7aef\u6267\u884c JS\uff0c\u5426\u5219\u5728\u672c\u5730\u8fd0\u884c\u3002</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">launchInspector</span><span class="params">(<span class="keyword">boolean</span> remoteDebug)</span> </span>{</div><div class="line"> <span class="keyword">if</span> (WXEnvironment.isApkDebugable()) {</div><div class="line"> <span class="keyword">try</span> {</div><div class="line"> <span class="keyword">if</span> (mWxDebugProxy != <span class="keyword">null</span>) {</div><div class="line"> mWxDebugProxy.stop();</div><div class="line"> }</div><div class="line"> HackedClass<Object> debugProxyClass = WXHack.into(<span class="string">"com.taobao.weex.devtools.debug.DebugServerProxy"</span>);</div><div class="line"> mWxDebugProxy = (IWXDebugProxy) debugProxyClass.constructor(Context.class, WXBridgeManager.class)</div><div class="lin
e"> .getInstance(WXEnvironment.getApplication(), WXBridgeManager.<span class="keyword">this</span>);</div><div class="line"> <span class="keyword">if</span> (mWxDebugProxy != <span class="keyword">null</span>) {</div><div class="line"> mWxDebugProxy.start();</div><div class="line"> <span class="keyword">if</span> (remoteDebug) {</div><div class="line"> mWXBridge = mWxDebugProxy.getWXBridge();</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">if</span> (mWXBridge != <span class="keyword">null</span> && !(mWXBridge <span class="keyword">instanceof</span> WXBridge)) {</div><div class="line"> mWXBridge = <span class="keyword">null</span>;</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"> } <span class="keyword">catch</span> (HackAsserti
onException e) {</div><div class="line"> WXLogUtils.e(<span class="string">"launchInspector HackAssertionException "</span>, e);</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u53ea\u8981\u9075\u5faa\u4e0a\u9762\u7684\u539f\u7406\uff0c\u5f00\u542f Debug \u6a21\u5f0f\u7684\u65b9\u5f0f\u548c\u65f6\u673a\u53ef\u7531\u63a5\u5165\u65b9\u7075\u6d3b\u5b9e\u73b0\u3002\u4ece launchInspector \u53ef\u4ee5\u770b\u5230\uff0cSDK \u5bf9 devtools \u7684 aar \u5305\u5e76\u65e0\u5f3a\u4f9d\u8d56,\u6211\u4eec\u7684 App \u53ea\u9700\u8981\u5728 Debug \u5305\u4e2d\u6253\u5305\u8be5 aar \u5373\u53ef\uff0c\u8fd9\u6837\u591a\u5c11\u53ef\u4ee5\u7f13\u89e3\u5305\u5927\u5c0f\u95ee\u9898\u548c\u5b89\u5168\u95ee\u9898\u3002</p>
+<p><strong>\u4f8b\u5916\uff1a</strong> <em>\u82e5\u4fee\u6539 <code>WXEnvironment.sRemoteDebugMode</code> \u7684\u65f6\u673a\u5728 <code>WXBridgeManager</code> \u521d\u59cb\u5316\u548c restart \u548c\u4e4b\u524d\u5219 <code>WXSDKEngine.reload()</code> \u53ef\u5ffd\u7565.</em></p>
+<p><strong>\u89c4\u5219\u4e09\uff1a\u901a\u8fc7\u54cd\u5e94 <code>ACTION_DEBUG_INSTANCE_REFRESH</code> \u5e7f\u64ad\u53ca\u65f6\u5237\u65b0\u3002</strong></p>
+<p>\u5e7f\u64ad <code>ACTION_DEBUG_INSTANCE_REFRESH</code> \u5728\u8c03\u8bd5\u6a21\u5f0f\u5207\u6362\u548c Chrome \u8c03\u8bd5\u9875\u9762\u5237\u65b0\u65f6\u53d1\u51fa\uff0c\u4e3b\u8981\u7528\u6765\u901a\u77e5\u5f53\u524d\u7684 Weex\u5bb9\u5668\u4ee5 Debug \u6a21\u5f0f\u91cd\u65b0\u52a0\u8f7d\u5f53\u524d\u9875\u3002\u5728 playground \u4e2d\u7684\u5904\u7406\u8fc7\u7a0b\u5982\u4e0b\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">RefreshBroadcastReceiver</span> <span class="keyword">extends</span> <span class="title">BroadcastReceiver</span> </span>{</div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onReceive</span><span class="params">(Context context, Intent intent)</span> </span>{</div><div class="line"> <span class="keyword">if</span> (IWXDebugProxy.ACTION_DEBUG_INSTANCE_REFRESH.equals(intent.getAction())) {</div><div class="line"> <span class="keyword">if</span> (mUri != <span class="keyword">null</span>) {</div><div class="line"> <span class="keyword">if</span> (TextUtils.equals(mUri.getScheme(), <span class="string">"http"</span>)
|| TextUtils.equals(mUri.getScheme(), <span class="string">"https"</span>)) {</div><div class="line"> loadWXfromService(mUri.toString());</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> loadWXfromLocal(<span class="keyword">true</span>);</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u5982\u679c\u63a5\u5165\u65b9\u7684\u5bb9\u5668\u672a\u5bf9\u8be5\u5e7f\u64ad\u505a\u5904\u7406\uff0c\u90a3\u4e48\u5c06\u4e0d\u652f\u6301\u5237\u65b0\u548c\u8c03\u8bd5\u8fc7\u7a0b\u4e2d\u7f16\u8f91\u4ee3\u7801\u65f6\u7684 watch \u529f\u80fd\u3002</p>
+<h2 id="\u63a5\u5165\u793a\u4f8b"><a href="#\u63a5\u5165\u793a\u4f8b" class="headerlink" title="\u63a5\u5165\u793a\u4f8b"></a>\u63a5\u5165\u793a\u4f8b</h2><p>\u6700\u7b80\u5355\u65b9\u5f0f\u5c31\u662f\u590d\u7528 Playground \u7684\u76f8\u5173\u4ee3\u7801\uff0c\u6bd4\u5982\u626b\u7801\u548c\u5237\u65b0\u7b49\u6a21\u5757\uff0c\u4f46\u662f\u626b\u7801\u4e0d\u662f\u5fc5\u987b\u7684\uff0c\u5b83\u53ea\u662f\u4e0e App \u901a\u4fe1\u7684\u4e00\u79cd\u5f62\u5f0f\uff0c\u4e8c\u7ef4\u7801\u91cc\u7684\u5305\u542bDebugServer IP \u53ca bundle \u5730\u5740\u7b49\u4fe1\u606f\uff0c\u7528\u4e8e\u5efa\u7acb App \u548c Debugger Server \u4e4b\u95f4\u7684\u8fde\u63a5\u53ca\u52a8\u6001\u52a0\u8f7d bundle\u3002\u5728 Playground \u4e2d\u7ed9\u51fa\u4e86\u4e24\u79cd\u5f00\u542f debug \u6a21\u5f0f\u7684\u8303\u4f8b\u3002</p>
+<ul>
+<li>\u8303\u4f8b1\uff1a\u901a\u8fc7\u5728 <code>XXXApplication</code> \u4e2d\u8bbe\u7f6e\u5f00\u5173\u6253\u5f00\u8c03\u8bd5\u6a21\u5f0f</li>
+</ul>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MyApplication</span> <span class="keyword">extends</span> <span class="title">Application</span> </span>{</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onCreate</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">super</span>.onCreate();</div><div class="line"> initDebugEnvironment(<span class="keyword">true</span>, <span class="string">"xxx.xxx.xxx.xxx"</span><span class="comment">/*"DEBUG_SERVER_HOST"*/</span>);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u8fd9\u79cd\u65b9\u5f0f\u6700\u76f4\u63a5\uff0c\u5728\u4ee3\u7801\u4e2d\u76f4\u63a5 hardcode \u4e86\u5f00\u542f\u8c03\u8bd5\u6a21\u5f0f\uff0c\u5982\u679c\u5728 SDK \u521d\u59cb\u5316\u4e4b\u524d\u8c03\u7528\u751a\u81f3\u8fde <code>WXSDKEngine.reload()</code> \u90fd\u4e0d\u9700\u8981\u8c03\u7528\uff0c\u63a5\u5165\u65b9\u5982\u679c\u9700\u8981\u66f4\u7075\u6d3b\u7684\u7b56\u7565\u53ef\u4ee5\u5c06 <code>initDebugEnvironment(boolean enable, String host)</code> \u548c <code>WXSDKEngine.reload()</code> \u7ec4\u5408\u5728\u4e00\u8d77\u5728\u5408\u9002\u7684\u4f4d\u7f6e\u548c\u65f6\u673a\u8c03\u7528\u5373\u53ef\u3002</p>
+<ul>
+<li>\u8303\u4f8b2\uff1a\u901a\u8fc7\u626b\u7801\u6253\u5f00\u8c03\u8bd5\u6a21\u5f0f</li>
+</ul>
+<p>Playground \u4e2d\u8f83\u591a\u7684\u4f7f\u7528\u626b\u7801\u7684\u65b9\u5f0f\u4f20\u9012\u4fe1\u606f\uff0c\u4e0d\u4ec5\u7528\u8fd9\u79cd\u65b9\u5f0f\u63a7\u5236 Debug \u6a21\u5f0f\u7684\u5f00\u5173,\u800c\u4e14\u8fd8\u901a\u8fc7\u5b83\u6765\u4f20\u5165 bundle \u7684 url \u76f4\u63a5\u8c03\u8bd5\u3002\u5e94\u5f53\u8bf4\u5728\u5f00\u53d1\u4e2d\u8fd9\u79cd\u65b9\u5f0f\u662f\u6bd4\u8f83\u9ad8\u6548\u7684\uff0c\u7701\u53bb\u4e86\u4fee\u6539 SDK \u4ee3\u7801\u91cd\u590d\u7f16\u8bd1\u548c\u5b89\u88c5 App \u7684\u9ebb\u70e6\uff0c\u7f3a\u70b9\u5c31\u662f\u8c03\u8bd5\u5de5\u5177\u8fd9\u79cd\u65b9\u5f0f\u63a5\u5165\u9700\u8981 App \u5177\u6709\u626b\u7801\u548c\u5904\u7406\u7279\u5b9a\u89c4\u5219\u4e8c\u7ef4\u7801\u7684\u80fd\u529b\u3002\u9664\u4e86 Playground \u4e2d\u7684\u65b9\u5f0f\uff0c\u63a5\u5165\u65b9\u4ea6\u53ef\u6839\u636e\u4e1a\u52a1\u573a\u666f\u5bf9 Debugger \u548c\u63a5\u5165\u65b9\u5f0f\u8fdb\u884c\u4e8c\u6b21\u5f00\u53d1\u3002</p>
+<p>Playground \u96c6\u6210\u7684\u5177\u4f53\u4ee3\u7801\u53ef\u53c2\u8003\u5982\u4e0b\u4e24\u4e2a\u6587\u4ef6\uff1a</p>
+<ul>
+<li><p>\u5f00\u5173\u63a7\u5236\uff0c\u4e3b\u8981\u53c2\u8003\u5bf9\u4e8c\u7ef4\u7801\u7684\u5904\u7406\u90e8\u5206\uff0c\u8be6\u89c1 <a href="https://github.com/weexteam/weex_devtools_android/blob/master/playground/app/src/main/java/com/alibaba/weex/WXApplication.java" target="_blank" rel="external"><code>WXApplication.java</code></a></p>
+</li>
+<li><p>\u5237\u65b0\u63a7\u5236 \uff0c\u4e3b\u8981\u53c2\u8003\u662f\u5bf9\u5bb9\u5668 <code>ACTION_DEBUG_INSTANCE_REFRESH</code>\u7684\u5904\u7406\uff0c\u8be6\u89c1 <a href="https://github.com/weexteam/weex_devtools_android/blob/master/playground/app/src/main/java/com/alibaba/weex/WXPageActivity.java" target="_blank" rel="external"><code>WXPageActivity.java</code></a></p>
+</li>
+</ul>
+<h2 id="\u725b\u5200\u5c0f\u8bd5"><a href="#\u725b\u5200\u5c0f\u8bd5" class="headerlink" title="\u725b\u5200\u5c0f\u8bd5"></a>\u725b\u5200\u5c0f\u8bd5</h2><h3 id="\u524d\u7f6e\u5de5\u4f5c"><a href="#\u524d\u7f6e\u5de5\u4f5c" class="headerlink" title="\u524d\u7f6e\u5de5\u4f5c"></a>\u524d\u7f6e\u5de5\u4f5c</h3><p>\u5982\u679c\u672a\u5b89\u88c5 Debugger Server\uff0c\u5728\u547d\u4ee4\u884c\u6267\u884c <code>npm install -g weex-toolkit</code> \u65e2\u53ef\u4ee5\u5b89\u88c5\u8c03\u8bd5\u670d\u52a1\u5668\uff0c\u8fd0\u884c\u547d\u4ee4 <code>weex debug</code> \u5c31\u4f1a\u542f\u52a8 DebugServer \u5e76\u6253\u5f00\u4e00\u4e2a\u8c03\u8bd5\u9875\u9762\uff08\u8be6\u60c5\u8bf7\u67e5\u770b <a href="/develop-on-your-local-machine.md">\u672c\u5730\u5f00\u53d1</a>\uff09\u3002\u9875\u9762\u4e0b\u65b9\u4f1a\u5c55\u793a\u4e00\u4e2a\u4e8c\u7ef4\u7801\uff0c\u8fd9\u4e2a\u4e8c\u7ef4\u7801\u7528\u4e8e\u5411 App \u4f20\u9012 Server \u7aef\u7684\u5730\u5740\u5efa\u7acb\u8fde\u63a5\u3002</p>
+<p><img src="https://img.alicdn.com/tps/TB1aKy4NXXXXXacXVXXXXXXXXXX-1019-756.png" alt="_"></p>
+<h3 id="\u5f00\u59cb\u8c03\u8bd5"><a href="#\u5f00\u59cb\u8c03\u8bd5" class="headerlink" title="\u5f00\u59cb\u8c03\u8bd5"></a>\u5f00\u59cb\u8c03\u8bd5</h3><p>\u5982\u679c\u4f60\u7684 App \u5ba2\u6237\u7aef\u5b8c\u6210\u4e86\u4ee5\u4e0a\u6b65\u9aa4\u90a3\u4e48\u606d\u559c\u4f60\u5df2\u7ecf\u63a5\u5165\u5b8c\u6bd5\uff0c\u53ef\u4ee5\u6109\u5feb\u7684\u8c03\u8bd5 Weex bundle \u4e86\uff0c\u8c03\u8bd5\u4f53\u9a8c\u548c\u7f51\u9875\u8c03\u8bd5\u4e00\u81f4\uff01\u5efa\u8bae\u65b0\u624b\u9996\u5148\u7528\u5b98\u65b9\u7684 Playground \u4f53\u9a8c\u4e00\u4e0b\u8c03\u8bd5\u6d41\u7a0b\u3002\u53ea\u9700\u8981\u542f\u52a8 App \u626b\u63cf Chrome \u8c03\u8bd5\u9875\u9762\u4e0b\u65b9\u7684\u7b2c\u4e00\u4e2a\u4e8c\u7ef4\u7801\u5373\u53ef\u5efa\u7acb\u4e0e Debugger Server \u7684\u901a\u4fe1\uff0cChorome \u7684\u8c03\u8bd5\u9875\u9762\u5c06\u4f1a\u5217\u51fa\u8fde\u63a5\u6210\u529f\u7684\u8bbe\u5907\u4fe1\u606f\u3002</p>
+<p><img src="https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png" alt="devtools-main"></p>
+<h4 id="\u4e3b\u8981\u6b65\u9aa4\u5982\u4e0b"><a href="#\u4e3b\u8981\u6b65\u9aa4\u5982\u4e0b" class="headerlink" title="\u4e3b\u8981\u6b65\u9aa4\u5982\u4e0b"></a>\u4e3b\u8981\u6b65\u9aa4\u5982\u4e0b</h4><ol>
+<li>\u5982\u679c\u4f60\u8981\u52a0\u8f7d\u670d\u52a1\u5668\u4e0a bundle\uff0c\u7b2c\u4e00\u6b65\u5c31\u662f\u8981\u8ba9\u4f60\u7684 bundle sever \u8dd1\u8d77\u6765. \u5728 Playground \u4e2d\u7279\u522b\u7b80\u5355\uff0c\u53ea\u9700\u8981\u4f60\u5230 Weex \u6e90\u7801\u76ee\u5f55\u4e0b\uff0c\u8fd0\u884c <code>./start</code> \u5373\u53ef\u3002</li>
+<li>\u547d\u4ee4\u884c\u8fd0\u884c <code>weex debug</code> \u542f\u52a8 Debugger Server\uff0cChrome \u5c06\u4f1a\u6253\u5f00\u4e00\u4e2a\u7f51\u9875\uff0c\u5728\u7f51\u9875\u4e0b\u65b9\u6709\u4e00\u4e2a\u4e8c\u7ef4\u7801\u548c\u7b80\u5355\u7684\u4ecb\u7ecd\u3002</li>
+<li>\u542f\u52a8 App \u5e76\u786e\u8ba4\u6253\u5f00\u8c03\u8bd5\u6a21\u5f0f\u3002\u4f60\u5c06\u5728\u4e0a\u4e00\u6b65\u4e2d\u6253\u5f00\u7684\u7f51\u9875\u4e2d\u770b\u5230\u4e00\u4e2a\u8bbe\u5907\u5217\u8868\uff0c\u6bcf\u4e2a\u8bbe\u5907\u9879\u90fd\u6709\u4e24\u4e2a\u6309\u94ae\uff0c\u5206\u522b\u662f <code>Debugger</code> \u548c <code>Inspector</code>\u3002</li>
+<li>\u70b9\u51fb <code>Inspector</code> Chrome \u5c06\u521b\u5efa Inspector \u7f51\u9875\uff1b\u70b9\u51fb <code>Debugger</code> Chrome \u5c06\u521b\u5efa Debugger \u7f51\u9875\uff1b\u4e8c\u8005\u662f\u76f8\u4e92\u72ec\u7acb\u7684\u529f\u80fd\uff0c\u4e0d\u76f8\u4e92\u4f9d\u8d56\u3002</li>
+</ol>
+<hr>
+<h2 id="\u80cc\u666f\u77e5\u8bc6"><a href="#\u80cc\u666f\u77e5\u8bc6" class="headerlink" title="\u80cc\u666f\u77e5\u8bc6"></a>\u80cc\u666f\u77e5\u8bc6</h2><h3 id="Devtools-\u7ec4\u4ef6\u4ecb\u7ecd"><a href="#Devtools-\u7ec4\u4ef6\u4ecb\u7ecd" class="headerlink" title="Devtools \u7ec4\u4ef6\u4ecb\u7ecd"></a>Devtools \u7ec4\u4ef6\u4ecb\u7ecd</h3><p>Devtools \u6269\u5c55\u4e86 <a href="https://developer.chrome.com/devtools/docs/debugger-protocol" target="_blank" rel="external">Chrome Debugging Protocol</a>\uff0c\u5728\u5ba2\u6237\u7aef\u548c\u8c03\u8bd5\u670d\u52a1\u5668\u4e4b\u95f4\u7684\u91c7\u7528 <a href="https://en.wikipedia.org/wiki/JSON-RPC" target="_blank" rel="external">JSON-RPC</a> \u4f5c\u4e3a\u901a\u4fe1\u673a\u5236\uff0c\u672c\u8d28\u4e0a\u8c03\u8bd5\u8fc7\u7a0b\u662f\u4e24\u4e2a\u8fdb\u7a0b\u95f4\u534f\u540c\uff0c\u76f8\u4e92\u4ea4\u6362\u63a7\u5236\u6743\u53ca\u8fd0\u884c\u7ed3\u679c\u7684\u8fc7\u7a0b\u3002\u66f4\u591a\u7ec6\u8282\u8fd8\u8bf7\u9605\u8bfb <a href="http://www.atatech.org/articles/59284" target="_blank" rel="external">Weex Devtools Debugger \u7684\u6280\u672f\u9009\u578b\u5b9e\u5f55</a>\u8fd9\u7bc7\u6587\u7ae0\u3002</p>
+<ul>
+<li><p><strong>\u5ba2\u6237\u7aef</strong></p>
+<p>Devtools \u5ba2\u6237\u7aef\u4f5c\u4e3a aar \u88ab\u96c6\u6210 App \u4e2d\uff0c\u5b83\u901a\u8fc7 webscoket \u8fde\u63a5\u5230\u8c03\u8bd5\u670d\u52a1\u5668\uff0c\u6b64\u5904\u5e76\u672a\u505a\u5b89\u5168\u68c0\u67e5\u3002\u51fa\u4e8e\u5b89\u5168\u673a\u5236\u53ca\u5305\u5927\u5c0f\u8003\u8651\uff0c\u5f3a\u70c8\u5efa\u8bae\u63a5\u5165\u65b9\u53ea\u5728 debug \u7248\u672c\u4e2d\u6253\u5305\u6b64 aar\u3002</p>
+</li>
+<li><p><strong>\u670d\u52a1\u5668</strong></p>
+<p>Devtools \u670d\u52a1\u5668\u7aef\u662f\u4fe1\u606f\u4ea4\u6362\u7684\u4e2d\u67a2\uff0c\u65e2\u8fde\u63a5\u5ba2\u6237\u7aef\uff0c\u53c8\u8fde\u63a5 Chrome\uff0c\u5927\u591a\u6570\u60c5\u51b5\u4e0b\u626e\u6f14\u4e00\u4e2a\u6d88\u606f\u8f6c\u53d1\u670d\u52a1\u5668\u548c Runtime Manager \u7684\u89d2\u8272\u3002</p>
+</li>
+<li><p><strong>Web\u7aef</strong></p>
+<p>Chrome \u7684 V8 \u5f15\u64ce\u626e\u6f14\u7740 Bundle javascript runtime \u7684\u89d2\u8272\u3002\u5f00\u542f debug \u6a21\u5f0f\u540e\uff0c\u6240\u6709\u7684 bundle js \u4ee3\u7801\u90fd\u5728\u8be5\u5f15\u64ce\u4e0a\u8fd0\u884c\u3002\u53e6\u4e00\u65b9\u9762\u6211\u4eec\u4e5f\u590d\u7528\u4e86 Chrome \u524d\u7aef\u7684\u8c03\u8bd5\u754c\u9762\uff0c\u4f8b\u5982\u8bbe\u7f6e\u65ad\u70b9\uff0c\u67e5\u770b\u8c03\u7528\u6808\u7b49\uff0c\u8c03\u8bd5\u9875\u5173\u95ed\u5219 runtime \u5c06\u4f1a\u88ab\u6e05\u7406\u3002</p>
+</li>
+</ul>
+<p>\u8c03\u8bd5\u7684\u5927\u81f4\u8fc7\u7a0b\u8bf7\u53c2\u8003\u5982\u4e0b\u65f6\u5e8f\u56fe\u3002</p>
+<p><img src="https://img.alicdn.com/tps/TB1igLoMVXXXXawapXXXXXXXXXX-786-1610.jpg" alt="debug sequence diagram" title="debug sequence diagram"></p>
+<h2 id="FAQ"><a href="#FAQ" class="headerlink" title="FAQ"></a>FAQ</h2><p>\u5728\u5404\u4e1a\u52a1\u63a5\u5165\u8fc7\u7a0b\u4e2d\uff0c\u9646\u7eed\u53d1\u73b0\u4e00\u4e9b\u95ee\u9898\uff0c\u5bf9\u9ad8\u9891\u6b21\u7684\u95ee\u9898\u89e3\u7b54\u5982\u4e0b\uff0c\u5f00\u53d1\u4e2d\u4ee5 weex debug -V \u7684\u65b9\u5f0f\u542f\u52a8 Debugger Server \u53ef\u4ee5\u770b\u5230 server \u7aef\u7684 log \u4fe1\u606f\uff0c\u5bf9\u7167\u4e0a\u6587\u4e2d\u7684\u65f6\u5e8f\u56fe\u5bf9\u4e8e\u5b9a\u4f4d\u95ee\u9898\u8fd8\u662f\u975e\u5e38\u6709\u5e2e\u52a9\uff0c\u5efa\u8bae\u8c03\u8bd5\u4e2d\u9ed8\u8ba4\u5f00\u542f server \u7aef log\u3002</p>
+<ol>
+<li><p><strong>\u626b\u7801 App \u5728 DebugServerProxy \u4e2d\u629b\u51fa class not found</strong></p>
+<p>\u5df2\u77e5\u7684\u539f\u56e0\u5982\u4e0b\uff1a</p>
+<ul>
+<li>weex_inspector \u4ee5 provided \u65b9\u5f0f\u5f15\u7528\u7684\u5305\u662f\u5426\u5f15\u5165\u6210\u529f\uff0c\u5982 fastjson \u7b49\u3002</li>
+<li>weex_inspector \u4ee5 compile \u65b9\u5f0f\u5f15\u7528\u7684\u5305\u662f\u5426\u5f15\u5165\u6210\u529f\uff0c\u67d0\u4e9b app \u91cd\u65b0\u5f15\u5165 <code>com.squareup.okhttp:okhttp:2.3.0</code> \u548c <code>com.squareup.okhttp:okhttp-ws:2.3.0</code> \u5219\u4e0d\u518d\u62a5\u9519\u3002</li>
+<li>\u6df7\u6dc6\u89c4\u5219\u5f71\u54cd\u53cd\u5c04\u3002</li>
+</ul>
+</li>
+<li><p><strong>playground \u626b\u7801\u8c03\u8bd5 crash</strong></p>
+<p>\u5df2\u77e5\u7684\u539f\u56e0\u5982\u4e0b\uff1a</p>
+<ul>
+<li>\u7cfb\u7edf\u4e3a android 6+\uff0c\u5d29\u6e83\u4fe1\u606f\u63d0\u793a\u8fdb\u7a0b\u9700\u8981 <code>android.permission.READ_PHONE_STATE</code> \u6743\u9650\uff0c\u4ee3\u7801\u4e2d\u672a\u505a\u6743\u9650\u68c0\u67e5\uff0c\u5728 0.0.2.7 \u7248\u672c\u4ee5\u540e\u5df2\u4fee\u590d\uff0c\u4e0d\u518d\u9700\u8981\u6b64\u6743\u9650\u3002</li>
+</ul>
+</li>
+<li><p><strong>\u626b\u7801\u540e\u8bbe\u5907\u5217\u8868\u9875\u5e76\u6ca1\u6709\u51fa\u73b0\u6211\u7684\u8bbe\u5907\u4fe1\u606f</strong></p>
+<p>\u5df2\u77e5\u7684\u539f\u56e0\u5982\u4e0b\uff1a</p>
+<ul>
+<li>Debugger Server \u548c\u624b\u673a\u5728\u4e0d\u540c\u7f51\u6bb5\uff0c\u88ab\u9632\u706b\u5899\u9694\u79bb\u3002</li>
+<li>\u624b\u673a\u8fde\u63a5\u4e86 PC \u7aef\u7684\u4ee3\u7406\uff0c\u5f53\u524d\u5c1a\u4e0d\u652f\u6301\u3002</li>
+<li>\u591a\u8fdb\u7a0b\u8fde\u63a5\u670d\u52a1\u5668\u7aef\u7684\u540c\u4e00\u7aef\u53e3\uff0c\u6bd4\u5982\u5728 Application \u7684 <code>onCreate</code> \u4e2d\u521d\u59cb\u5316 sdk\uff0c\u82e5\u591a\u4e2a\u8fdb\u7a0b\u8fde\u63a5\u670d\u52a1\u5668\u7aef\u7684\u540c\u4e00\u7aef\u53e3\u5219\u62a5\u9519\uff0c\u5728 0.0.2.3 \u7248\u672c\u4ee5\u540e\u5df2\u652f\u6301\u591a\u8fdb\u7a0b\u65e0\u6b64\u95ee\u9898\u3002</li>
+</ul>
+</li>
+<li><p><strong>\u8c03\u8bd5\u8fc7\u7a0b\u4e2d\u9891\u7e41\u5237\u65b0\u8fde\u63a5\u5931\u8d25\uff0cServer \u7aef\u63d0\u793a\u91cd\u65b0\u542f\u52a8 App\uff0c\u975e\u5fc5\u73b0</strong></p>
+<p>\u5df2\u77e5\u7684\u539f\u56e0\u5982\u4e0b\uff1a</p>
+<ul>
+<li>\u591a\u7ebf\u7a0b\u64cd\u4f5c\u7f51\u7edc\u8fde\u63a5\u5f15\u8d77\uff0c\u5728\u9891\u7e41\u7684\u5373\u65ad\u5373\u8fde\u65f6\u5bb9\u6613\u89e6\u53d1\u3002\u5728 0.0.7.1 \u7248\u672c\u5df2\u4fee\u590d\u3002</li>
+</ul>
+</li>
+</ol>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/advanced/integrate-devtools-to-android.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/integrate-devtools-to-ios.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/integrate-devtools-to-ios.html b/content/cn/v-0.10/advanced/integrate-devtools-to-ios.html
new file mode 100644
index 0000000..4f78a39
--- /dev/null
+++ b/content/cn/v-0.10/advanced/integrate-devtools-to-ios.html
@@ -0,0 +1,445 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u96c6\u6210 Devtools \u5230 iOS | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u96c6\u6210 Devtools \u5230 iOSWeex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e iOS \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002
+iOS \u5e94\u7528\u63a5\u5165\u6dfb\u52a0\u4f9d\u8d56\u65b9\u6cd5\u4e00\uff1acocoapods \u4f9d\u8d56\u5728\u5de5\u7a0b\u76ee\u5f55\u7684 podfile \u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801
+source https://github.com/C">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u96c6\u6210 Devtools \u5230 iOS">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/advanced/integrate-devtools-to-ios.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u96c6\u6210 Devtools \u5230 iOSWeex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e iOS \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002
+iOS \u5e94\u7528\u63a5\u5165\u6dfb\u52a0\u4f9d\u8d56\u65b9\u6cd5\u4e00\uff1acocoapods \u4f9d\u8d56\u5728\u5de5\u7a0b\u76ee\u5f55\u7684 podfile \u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801
+source https://github.com/C">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1MXjjNXXXXXXlXpXXXXXXXXXX-795-326.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1A518NXXXXXbZXFXXXXXXXXXX-642-154.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1xRHhNXXXXXakXpXXXXXXXXXX-1498-668.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1F8WONXXXXXa_apXXXXXXXXXX-1706-674.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB19Yq5NXXXXXXVXVXXXXXXXXXX-343-344.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1vomVNXXXXXcXaXXXXXXXXXXX-2072-1202.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB116y0NXXXXXXNaXXXXXXXXXXX-1448-668.png">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB16frmNXXXXXa7XXXXXXXXXXXX-2106-1254.png">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.931Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u96c6\u6210 Devtools \u5230 iOS">
+<meta name="twitter:description" content="\u96c6\u6210 Devtools \u5230 iOSWeex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e iOS \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002
+iOS \u5e94\u7528\u63a5\u5165\u6dfb\u52a0\u4f9d\u8d56\u65b9\u6cd5\u4e00\uff1acocoapods \u4f9d\u8d56\u5728\u5de5\u7a0b\u76ee\u5f55\u7684 podfile \u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801
+source https://github.com/C">
+<meta name="twitter:image" content="https://img.alicdn.com/tps/TB1MXjjNXXXXXXlXpXXXXXXXXXX-795-326.png">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="advanced" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "advanced";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u9ad8\u9636\u77e5\u8bc6
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex \u5de5\u4f5c\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">\u96c6\u6210\u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">\u96c6\u6210\u5230 iOS</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">\u96c6\u6210\u5230 web</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native API</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link current ">\u96c6\u6210 Devtools \u5230 iOS</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-advanced">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u96c6\u6210 Devtools \u5230 iOS
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.931Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u96c6\u6210-Devtools-\u5230-iOS"><a href="#\u96c6\u6210-Devtools-\u5230-iOS" class="headerlink" title="\u96c6\u6210 Devtools \u5230 iOS"></a>\u96c6\u6210 Devtools \u5230 iOS</h1><p>Weex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e iOS \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002</p>
+<h2 id="iOS-\u5e94\u7528\u63a5\u5165"><a href="#iOS-\u5e94\u7528\u63a5\u5165" class="headerlink" title="iOS \u5e94\u7528\u63a5\u5165"></a>iOS \u5e94\u7528\u63a5\u5165</h2><h3 id="\u6dfb\u52a0\u4f9d\u8d56"><a href="#\u6dfb\u52a0\u4f9d\u8d56" class="headerlink" title="\u6dfb\u52a0\u4f9d\u8d56"></a>\u6dfb\u52a0\u4f9d\u8d56</h3><h4 id="\u65b9\u6cd5\u4e00\uff1acocoapods-\u4f9d\u8d56"><a href="#\u65b9\u6cd5\u4e00\uff1acocoapods-\u4f9d\u8d56" class="headerlink" title="\u65b9\u6cd5\u4e00\uff1acocoapods \u4f9d\u8d56"></a>\u65b9\u6cd5\u4e00\uff1acocoapods \u4f9d\u8d56</h4><p>\u5728\u5de5\u7a0b\u76ee\u5f55\u7684 podfile \u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">source https://github.com/CocoaPods/Specs.git\uff0c</div><div class="line">pod 'WXDevtool', '0.7.0', :configurations => ['Debug']\uff0c</div></pre></td></tr></table></figure>
+<p>\u76ee\u524d\u6709\u5982\u4e0b\u51e0\u4e2a\u7248\u672c\uff1a</p>
+<p>0.7.0, 0.6.1, 0.1.1, 0.1.0 [master repo]</p>
+<hr>
+<p>\u53ef\u4ee5\u901a\u8fc7\u66f4\u65b0\u672c\u5730 podspec repo\uff0cpod search \u6765\u67e5\u8be2\u6700\u65b0\u7248\u672c\uff0c\u5728 podfile \u6587\u4ef6\u6dfb\u52a0\u4f9d\u8d56\u3002</p>
+<p><strong><em> \u63a8\u8350\u5728DEBUG\u6a21\u5f0f\u4e0b\u4f9d\u8d56\u3002 </em></strong></p>
+<h4 id="\u65b9\u6cd5\u4e8c\uff1agithub-\u6e90\u7801\u4f9d\u8d56"><a href="#\u65b9\u6cd5\u4e8c\uff1agithub-\u6e90\u7801\u4f9d\u8d56" class="headerlink" title="\u65b9\u6cd5\u4e8c\uff1agithub \u6e90\u7801\u4f9d\u8d56"></a>\u65b9\u6cd5\u4e8c\uff1agithub \u6e90\u7801\u4f9d\u8d56</h4><ol>
+<li><p><a href="https://github.com/weexteam/weex-devtool-iOS" target="_blank" rel="external">\u62c9\u53d6</a>\u6700\u65b0\u7684WXDevtool\u4ee3\u7801\u3002</p>
+</li>
+<li><p>\u6309\u7167\u5982\u4e0b\u56fe\u793a\uff1a\u76f4\u63a5\u62d6\u52a8source\u76ee\u5f55\u6e90\u6587\u4ef6\u5230\u76ee\u6807\u5de5\u7a0b\u4e2d</p>
+<p><img src="https://img.alicdn.com/tps/TB1MXjjNXXXXXXlXpXXXXXXXXXX-795-326.png" alt="drag"></p>
+</li>
+<li><p>\u6309\u7167\u7ea2\u6846\u4e2d\u914d\u7f6e\u52fe\u9009</p>
+<p><img src="https://img.alicdn.com/tps/TB1A518NXXXXXbZXFXXXXXXXXXX-642-154.png" alt="_"></p>
+</li>
+</ol>
+<p> \u5728\u76f8\u5bf9\u8f83\u5927\u7684\u4e92\u8054\u7f51App\u7814\u53d1\u4e2d, framework \u9759\u6001\u5e93\u88ab\u5e7f\u6cdb\u5e94\u7528\uff0c\u6240\u4ee5\u63a8\u8350\u4f7f\u7528\u65b9\u6cd5\u4e00\u63a5\u5165\u3002</p>
+<h3 id="\u96c6\u6210\u529f\u80fd"><a href="#\u96c6\u6210\u529f\u80fd" class="headerlink" title="\u96c6\u6210\u529f\u80fd"></a>\u96c6\u6210\u529f\u80fd</h3><p>\u5982\u679c\u6309\u7167\u65b9\u6cd5\u4e00\u63a5\u5165\uff1apodfile \u7684\u65b9\u5f0f\uff0c\u6dfb\u52a0\u5934\u6587\u4ef6\u5305\u542b\uff1a</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">#import <TBWXDevtool/WXDevtool.h></div></pre></td></tr></table></figure>
+<p>\u5982\u679c\u6309\u7167\u65b9\u6cd5\u4e8c\u63a5\u5165\uff1a\u6e90\u7801\u4f9d\u8d56\u7684\u65b9\u5f0f\uff0c\u6dfb\u52a0\u5934\u6587\u4ef6\u5305\u542b\uff1a</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">#import "WXDevtool.h"</div><div class="line">``` </div><div class="line"></div><div class="line">\u67e5\u770b WXDevtool \u5934\u6587\u4ef6\u5982\u4e0b\uff1a</div><div class="line"> </div><div class="line">```object-c</div><div class="line">#import <Foundation/Foundation.h></div><div class="line"></div><div class="line">@interface WXDevTool : NSObject</div><div class="line">/**</div><div class="line">* set debug status</div><div class="line">* @param isDebug : YES:open debug model and inspect model;</div><div class="line">* default is NO,if isDebug is NO, open inspect only;</div><div class="line">* */</div><div class="line">+ (void)setDebug:(BOOL)isDebug;</div><div class="line"></div><div class="line"></div><div class="line">/**</div><div class="line">* get debug status</div><div class="line">* */ </div><div class="line">+ (BOOL)isDebug;</div><div class="line"></div><div class="
line"></div><div class="line">/**</div><div class="line">* launch weex debug</div><div class="line">* @param url : ws://ip:port/debugProxy/native, ip and port is your devtool server address</div><div class="line">* eg:@"ws://30.30.29.242:8088/debugProxy/native"</div><div class="line">* */</div><div class="line">+ (void)launchDevToolDebugWithUrl:(NSString *)url;</div><div class="line"></div><div class="line">@end</div><div class="line">``` </div><div class="line"></div><div class="line">`setDebug`\uff1a\u53c2\u6570\u4e3a `YES` \u65f6\uff0c\u76f4\u63a5\u5f00\u542f debug \u6a21\u5f0f\uff0c\u53cd\u4e4b\u5173\u95ed\uff0c\u4f7f\u7528\u573a\u666f\u5982\u4e0b\u6240\u8ff0</div><div class="line"></div><div class="line">\u5728\u4f60\u81ea\u5df1\u7684\u7a0b\u5e8f\u4e2d\u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801\uff1a</div><div class="line"></div><div class="line">```object-c </div><div class="line">[WXDevTool launchDevToolDebugWithUrl:@"ws://30.30.31.7:8088/debugProxy/native"];</div></pre></td></tr></table></figure>
+<p>\u5176\u4e2d\u7684 ws \u5730\u5740\u6b63\u662f Weex debug \u63a7\u5236\u53f0\u4e2d\u51fa\u73b0\u7684\u5730\u5740\uff0c\u76f4\u63a5 copy \u5230 <code>launchDevToolDebugWithUrl</code> \u63a5\u53e3\u4e2d\u3002</p>
+<p>\u5982\u679c\u7a0b\u5e8f\u4e00\u542f\u52a8\u5c31\u5f00\u542f Weex \u8c03\u8bd5\uff0c<strong>\u9700\u8981\u5728 WeexSDK \u5f15\u64ce\u521d\u59cb\u5316\u4e4b\u524d</strong>\u6dfb\u52a0\u4ee3\u7801\uff1a</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">[WXDevTool setDebug:YES];</div><div class="line">[WXDevTool launchDevToolDebugWithUrl:@"ws://30.30.31.7:8088/debugProxy/native"];</div></pre></td></tr></table></figure>
+<h4 id="\u9644\u52a0\u9875\u9762\u5237\u65b0\u529f\u80fd"><a href="#\u9644\u52a0\u9875\u9762\u5237\u65b0\u529f\u80fd" class="headerlink" title="\u9644\u52a0\u9875\u9762\u5237\u65b0\u529f\u80fd"></a>\u9644\u52a0\u9875\u9762\u5237\u65b0\u529f\u80fd</h4><ul>
+<li><p>\u4e3a\u4ec0\u4e48\u9700\u8981\u9875\u9762\u5237\u65b0\u529f\u80fd\uff1f</p>
+<p>\u5982\u4e0b\u56fe\u6240\u793a\uff0c\u5f53\u70b9\u51fb debug \u6309\u94ae\u65f6\uff0cjs \u7684\u8fd0\u884c\u73af\u5883\u4f1a\u4ece\u624b\u673a\u7aef\uff08JavaScriptCore\uff09\u5207\u6362\u5230 Chrome\uff08V8\uff09\uff0c\u8fd9\u65f6\u9700\u8981\u91cd\u65b0\u521d\u59cb\u5316 Weex \u73af\u5883\uff0c\u91cd\u65b0\u6e32\u67d3\u9875\u9762\u3002\u9875\u9762\u6e32\u67d3\u662f\u9700\u8981\u63a5\u5165\u65b9\u5728\u81ea\u5df1\u7684\u9875\u9762\u6dfb\u52a0\u3002</p>
+<p><img src="https://img.alicdn.com/tps/TB1xRHhNXXXXXakXpXXXXXXXXXX-1498-668.png" alt="_debug"></p>
+</li>
+<li><p>\u4ec0\u4e48\u573a\u666f\u4e0b\u9700\u8981\u6dfb\u52a0\u9875\u9762\u5237\u65b0\u529f\u80fd? </p>
+<ul>
+<li>\u70b9\u51fb debug \u6309\u94ae\u8c03\u8bd5</li>
+<li>\u5207\u6362 RemoteDebug \u5f00\u5173</li>
+<li>\u5237\u65b0 Chrome \u9875\u9762\uff08command+R\uff09</li>
+</ul>
+</li>
+<li><p>\u5982\u4f55\u6dfb\u52a0\u5237\u65b0 </p>
+<p>\u5728 Weex \u9875\u9762\u521d\u59cb\u5316\u6216 <code>viewDidLoad</code> \u65b9\u6cd5\u65f6\u6dfb\u52a0\u6ce8\u518c\u901a\u77e5\uff0c\u4e3e\u4f8b\u5982\u4e0b\uff1a</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">[[NSNotificationCenter defaultCenter] addObserver:self selector:notificationRefreshInstance: name:@"RefreshInstance" object:nil];</div></pre></td></tr></table></figure>
+</li>
+</ul>
+<p> \u6700\u540e<strong>\u5343\u4e07\u8bb0\u5f97</strong>\u5728 <code>dealloc</code> \u65b9\u6cd5\u4e2d\u53d6\u6d88\u901a\u77e5\uff0c\u5982\u4e0b\u6240\u793a</p>
+ <figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">- (void)dealloc</div><div class="line">{</div><div class="line"> [[NSNotificationCenter defaultCenter] removeObserver:self];</div><div class="line">}</div></pre></td></tr></table></figure>
+<p> \u9875\u9762\u5237\u65b0\u5b9e\u73b0\uff0c\u5148\u9500\u6bc1\u5f53\u524d instance\uff0c\u7136\u540e\u91cd\u65b0\u521b\u5efa instance\uff0c\u4e3e\u4f8b\u5982\u4e0b:</p>
+ <figure class="highlight plain"><table><tr><td class="code"><pre><div class="line"> - (void)render</div><div class="line"> {</div><div class="line"> CGFloat width = self.view.frame.size.width;</div><div class="line"> [_instance destroyInstance];</div><div class="line"> _instance = [[WXSDKInstance alloc] init];</div><div class="line"> _instance.viewController = self;</div><div class="line"> _instance.frame = CGRectMake(self.view.frame.size.width-width, 0, width, _weexHeight);</div><div class="line"> </div><div class="line"> __weak typeof(self) weakSelf = self;</div><div class="line"> _instance.onCreate = ^(UIView *view) {</div><div class="line"> [weakSelf.weexView removeFromSuperview];</div><div class="line"> weakSelf.weexView = view;</div><div class="line"> [weakSelf.view addSubview:weakSelf.weexView];</div><div class="line"> UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, weakSelf.weexView);
</div><div class="line"> };</div><div class="line"> _instance.onFailed = ^(NSError *error) {</div><div class="line"> </div><div class="line"> };</div><div class="line"> </div><div class="line"> _instance.renderFinish = ^(UIView *view) {</div><div class="line"> [weakSelf updateInstanceState:WeexInstanceAppear];</div><div class="line"> };</div><div class="line"> </div><div class="line"> _instance.updateFinish = ^(UIView *view) {</div><div class="line"> };</div><div class="line"> if (!self.url) {</div><div class="line"> return;</div><div class="line"> }</div><div class="line"> NSURL *URL = [self testURL: [self.url absoluteString]];</div><div class="line"> NSString *randomURL = [NSString stringWithFormat:@"%@?random=%d",URL.absoluteString,arc4random()];</div><div class="line"> [_instance renderWithURL:[NSURL URLWithString:randomURL] options:@{@"bundleUrl":
URL.absoluteString} data:nil];</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u5177\u4f53\u5b9e\u73b0\u53ef\u53c2\u8003 <a href="https://github.com/weexteam/weex-devtool-iOS/blob/master/Devtools/playground/WeexDemo/WXDemoViewController.m" target="_blank" rel="external">playground</a> <code>WXDemoViewController.m</code> \u6587\u4ef6</p>
+<p><em>\u8bf4\u660e\uff1a\u76ee\u524d\u7248\u672c\u9700\u8981\u6ce8\u518c\u7684\u901a\u77e5\u540d\u79f0\u4e3a\u56fa\u5b9a\u7684 \u201cRefreshInstance\u201d\uff0c\u4e0b\u4e2a\u7248\u672c\u4f1a\u6dfb\u52a0\u7528\u6237\u81ea\u5b9a\u4e49 name \u3002</em></p>
+<h2 id="\u4f7f\u7528"><a href="#\u4f7f\u7528" class="headerlink" title="\u4f7f\u7528"></a>\u4f7f\u7528</h2><p>\u5982\u679c\u672a\u5b89\u88c5 Debugger Server\uff0c\u5728\u547d\u4ee4\u884c\u6267\u884c <code>npm install -g weex-toolkit</code> \u65e2\u53ef\u4ee5\u5b89\u88c5\u8c03\u8bd5\u670d\u52a1\u5668\uff0c\u8fd0\u884c\u547d\u4ee4 <code>weex debug</code> \u5c31\u4f1a\u542f\u52a8 DebugServer \u5e76\u6253\u5f00\u4e00\u4e2a\u8c03\u8bd5\u9875\u9762\uff08\u8be6\u60c5\u8bf7\u67e5\u770b <a href="../guide/develop-on-your-local-machine.html">\u672c\u5730\u5f00\u53d1</a>\uff09\u3002\u9875\u9762\u4e0b\u65b9\u4f1a\u5c55\u793a\u4e00\u4e2a\u4e8c\u7ef4\u7801\uff0c\u8fd9\u4e2a\u4e8c\u7ef4\u7801\u7528\u4e8e\u5411 App \u4f20\u9012 Server \u7aef\u7684\u5730\u5740\u5efa\u7acb\u8fde\u63a5\u3002</p>
+<ol>
+<li><p>\u65e5\u5fd7\u7ea7\u522b\u63a7\u5236</p>
+<p><img src="https://img.alicdn.com/tps/TB1F8WONXXXXXa_apXXXXXXXXXX-1706-674.png" alt="_"><br>\u65e5\u5fd7\u7ea7\u522b\u53ef\u4ee5\u63a7\u5236native\u7aef\u5173\u4e8eweex\u7684\u65e5\u5fd7\u3002</p>
+<p>\u65e5\u8bb0\u7ea7\u522b\u63cf\u8ff0\u5982\u4e0b\uff1a</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">Off = 0, </div><div class="line">Error = Error</div><div class="line">Warning = Error | Warning,</div><div class="line">Info = Warning | Info,</div><div class="line">Log = Log | Info,</div><div class="line">Debug = Log | Debug, </div><div class="line">All = NSUIntegerMax</div></pre></td></tr></table></figure>
+<p>\u89e3\u91ca\uff1aoff \u5173\u95ed\u65e5\u5fd7\uff0cWarning \u5305\u542b Error\u3001Warning\uff0cInfo \u5305\u542b Warning\u3001Info\uff0cLog \u5305\u542b Info\u3001Log\uff0cDebug \u5305\u542b Log\u3001Debug\uff0cAll \u5305\u542b\u6240\u6709\u3002</p>
+</li>
+<li><p>Vdom/Native tree\u9009\u62e9</p>
+<p><img src="https://img.alicdn.com/tps/TB19Yq5NXXXXXXVXVXXXXXXXXXX-343-344.png" alt=""></p>
+<p><em>\u56fe\u4e00</em></p>
+<p><img src="https://img.alicdn.com/tps/TB1vomVNXXXXXcXaXXXXXXXXXXX-2072-1202.png" alt="\u56fe\u4e8c" title="\u56fe\u4e8c"> </p>
+<p><em>\u56fe\u4e8c</em></p>
+<p>\u70b9\u51fb\u56fe\u4e00\u6240\u793anative\u9009\u9879\u4f1a\u6253\u5f00\u56fe\u4e8c\uff0c\u65b9\u4fbf\u67e5\u770bnative tree\u4ee5\u53caview property</p>
+<p><img src="https://img.alicdn.com/tps/TB116y0NXXXXXXNaXXXXXXXXXXX-1448-668.png" alt="vdom"></p>
+<p><em>\u56fe\u4e09</em></p>
+<p><img src="https://img.alicdn.com/tps/TB16frmNXXXXXa7XXXXXXXXXXXX-2106-1254.png" alt="vdom_tree"> </p>
+<p><em>\u56fe\u56db</em></p>
+<p>\u70b9\u51fb\u56fe\u4e09\u6240\u793a vdom \u9009\u9879\u4f1a\u6253\u5f00\u56fe\u56db\uff0c\u65b9\u4fbf\u67e5\u770b vdom tree \u4ee5\u53ca component property\u3002 </p>
+</li>
+</ol>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/advanced/integrate-devtools-to-ios.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/advanced/integrate-to-android.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/advanced/integrate-to-android.html b/content/cn/v-0.10/advanced/integrate-to-android.html
new file mode 100644
index 0000000..27dcb29
--- /dev/null
+++ b/content/cn/v-0.10/advanced/integrate-to-android.html
@@ -0,0 +1,422 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u96c6\u6210\u5230 Android | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="WEEX SDK \u96c6\u6210\u5230 Android \u5de5\u7a0b\u6ce8\uff1a\u4ee5\u4e0b\u6587\u6863\u90fd\u662f\u5047\u8bbe\u60a8\u5df2\u7ecf\u5177\u5907\u4e00\u5b9a\u7684Android\u5f00\u53d1\u7ecf\u9a8c\u3002
+Android \u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f
+\u6e90\u7801\u4f9d\u8d56\uff1a\u80fd\u591f\u5feb\u901f\u4f7f\u7528WEEX\u6700\u65b0\u529f\u80fd\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u9879\u76ee\u7684\u7279\u6027\u8fdb\u884c\u76f8\u5173\u6539\u8fdb\u3002
+SDK\u4f9d\u8d56\uff1aWEEX \u4f1a\u5728jcenter \u5b9a\u671f\u53d1\u5e03\u7a33\u5b9a\u7248\u672c\u3002jcenter\u6ce8:\u56fd\u5185\u53ef\u80fd\u9700\u8981\u7ffb\u5899
+
+\u524d\u671f\u51c6\u5907
+\u5df2\u7ecf\u5b89\u88c5\u4e86JDK version&gt;=1.7 \u5e76\u914d\u7f6e\u4e86\u73af\u5883\u53d8\u91cf
+\u5df2\u7ecf\u5b89">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u96c6\u6210\u5230 Android">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/advanced/integrate-to-android.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="WEEX SDK \u96c6\u6210\u5230 Android \u5de5\u7a0b\u6ce8\uff1a\u4ee5\u4e0b\u6587\u6863\u90fd\u662f\u5047\u8bbe\u60a8\u5df2\u7ecf\u5177\u5907\u4e00\u5b9a\u7684Android\u5f00\u53d1\u7ecf\u9a8c\u3002
+Android \u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f
+\u6e90\u7801\u4f9d\u8d56\uff1a\u80fd\u591f\u5feb\u901f\u4f7f\u7528WEEX\u6700\u65b0\u529f\u80fd\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u9879\u76ee\u7684\u7279\u6027\u8fdb\u884c\u76f8\u5173\u6539\u8fdb\u3002
+SDK\u4f9d\u8d56\uff1aWEEX \u4f1a\u5728jcenter \u5b9a\u671f\u53d1\u5e03\u7a33\u5b9a\u7248\u672c\u3002jcenter\u6ce8:\u56fd\u5185\u53ef\u80fd\u9700\u8981\u7ffb\u5899
+
+\u524d\u671f\u51c6\u5907
+\u5df2\u7ecf\u5b89\u88c5\u4e86JDK version&gt;=1.7 \u5e76\u914d\u7f6e\u4e86\u73af\u5883\u53d8\u91cf
+\u5df2\u7ecf\u5b89">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.932Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u96c6\u6210\u5230 Android">
+<meta name="twitter:description" content="WEEX SDK \u96c6\u6210\u5230 Android \u5de5\u7a0b\u6ce8\uff1a\u4ee5\u4e0b\u6587\u6863\u90fd\u662f\u5047\u8bbe\u60a8\u5df2\u7ecf\u5177\u5907\u4e00\u5b9a\u7684Android\u5f00\u53d1\u7ecf\u9a8c\u3002
+Android \u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f
+\u6e90\u7801\u4f9d\u8d56\uff1a\u80fd\u591f\u5feb\u901f\u4f7f\u7528WEEX\u6700\u65b0\u529f\u80fd\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u9879\u76ee\u7684\u7279\u6027\u8fdb\u884c\u76f8\u5173\u6539\u8fdb\u3002
+SDK\u4f9d\u8d56\uff1aWEEX \u4f1a\u5728jcenter \u5b9a\u671f\u53d1\u5e03\u7a33\u5b9a\u7248\u672c\u3002jcenter\u6ce8:\u56fd\u5185\u53ef\u80fd\u9700\u8981\u7ffb\u5899
+
+\u524d\u671f\u51c6\u5907
+\u5df2\u7ecf\u5b89\u88c5\u4e86JDK version&gt;=1.7 \u5e76\u914d\u7f6e\u4e86\u73af\u5883\u53d8\u91cf
+\u5df2\u7ecf\u5b89">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="advanced" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "advanced";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u9ad8\u9636\u77e5\u8bc6
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex \u5de5\u4f5c\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a\u539f\u7406</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Weex \u9879\u76ee</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link current ">\u96c6\u6210\u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">\u96c6\u6210\u5230 iOS</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">\u96c6\u6210\u5230 web</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native \u7ec4\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">\u81ea\u5b9a\u4e49 native API</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 \u6269\u5c55</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-advanced">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u96c6\u6210\u5230 Android
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.932Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="WEEX-SDK-\u96c6\u6210\u5230-Android-\u5de5\u7a0b"><a href="#WEEX-SDK-\u96c6\u6210\u5230-Android-\u5de5\u7a0b" class="headerlink" title="WEEX SDK \u96c6\u6210\u5230 Android \u5de5\u7a0b"></a>WEEX SDK \u96c6\u6210\u5230 Android \u5de5\u7a0b</h1><p>\u6ce8\uff1a\u4ee5\u4e0b\u6587\u6863\u90fd\u662f\u5047\u8bbe\u60a8\u5df2\u7ecf\u5177\u5907\u4e00\u5b9a\u7684Android\u5f00\u53d1\u7ecf\u9a8c\u3002</p>
+<h3 id="Android-\u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f"><a href="#Android-\u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f" class="headerlink" title="Android \u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f"></a>Android \u96c6\u6210\u6709\u4e24\u79cd\u65b9\u5f0f</h3><ol>
+<li>\u6e90\u7801\u4f9d\u8d56\uff1a\u80fd\u591f\u5feb\u901f\u4f7f\u7528WEEX\u6700\u65b0\u529f\u80fd\uff0c\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u9879\u76ee\u7684\u7279\u6027\u8fdb\u884c\u76f8\u5173\u6539\u8fdb\u3002</li>
+<li>SDK\u4f9d\u8d56\uff1aWEEX \u4f1a\u5728jcenter \u5b9a\u671f\u53d1\u5e03\u7a33\u5b9a\u7248\u672c\u3002<a href="https://bintray.com/alibabaweex/maven/weex_sdk/view" target="_blank" rel="external">jcenter</a><br>\u6ce8:\u56fd\u5185\u53ef\u80fd\u9700\u8981\u7ffb\u5899</li>
+</ol>
+<h2 id="\u524d\u671f\u51c6\u5907"><a href="#\u524d\u671f\u51c6\u5907" class="headerlink" title="\u524d\u671f\u51c6\u5907"></a>\u524d\u671f\u51c6\u5907</h2><ul>
+<li>\u5df2\u7ecf\u5b89\u88c5\u4e86<a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank" rel="external">JDK</a> version>=1.7 \u5e76\u914d\u7f6e\u4e86\u73af\u5883\u53d8\u91cf</li>
+<li>\u5df2\u7ecf\u5b89\u88c5<a href="https://developer.android.com/studio/index.html" target="_blank" rel="external">Android SDK</a> \u5e76\u914d\u7f6e\u73af\u5883\u53d8\u91cf\u3002</li>
+<li>Android SDK version 23 (compileSdkVersion in <a href="https://github.com/alibaba/weex/blob/master/android/sdk/build.gradle" target="_blank" rel="external"><code>build.gradle</code></a>)</li>
+<li>SDK build tools version 23.0.1 (buildToolsVersion in <a href="https://github.com/alibaba/weex/blob/master/android/sdk/build.gradle" target="_blank" rel="external"><code>build.gradle</code></a>)</li>
+<li>Android Support Repository >= 17 (for Android Support Library)</li>
+</ul>
+<h2 id="\u5feb\u901f\u63a5\u5165"><a href="#\u5feb\u901f\u63a5\u5165" class="headerlink" title="\u5feb\u901f\u63a5\u5165"></a>\u5feb\u901f\u63a5\u5165</h2><p>\u5982\u679c\u4f60\u662f\u5c1d\u9c9c\u6216\u8005\u5bf9\u7a33\u5b9a\u6027\u8981\u6c42\u6bd4\u8f83\u9ad8\u53ef\u4ee5\u4f7f\u7528\u4f9d\u8d56SDK\u7684\u65b9\u5f0f\u3002<br>\u6b65\u9aa4\u5982\u4e0b\uff1a </p>
+<ol>
+<li>\u521b\u5efaAndroid\u5de5\u7a0b\uff0c\u6ca1\u6709\u4ec0\u4e48\u8981\u7279\u522b\u8bf4\u660e\u7684\uff0c\u6309\u7167\u4f60\u7684\u4e60\u60ef\u6765\u3002</li>
+<li><p>\u4fee\u6539build.gradle \u52a0\u5165\u5982\u4e0b\u57fa\u7840\u4f9d\u8d56 </p>
+<figure class="highlight gradle"><table><tr><td class="code"><pre><div class="line"><span class="keyword">compile</span> <span class="string">'com.android.support:recyclerview-v7:23.1.1'</span></div><div class="line"><span class="keyword">compile</span> <span class="string">'com.android.support:support-v4:23.1.1'</span></div><div class="line"><span class="keyword">compile</span> <span class="string">'com.android.support:appcompat-v7:23.1.1'</span></div><div class="line"><span class="keyword">compile</span> <span class="string">'com.alibaba:fastjson:1.1.46.android'</span></div><div class="line"><span class="keyword">compile</span> <span class="string">'com.taobao.android:weex_sdk:0.5.1@aar'</span></div></pre></td></tr></table></figure>
+</li>
+</ol>
+<p> \u6ce8:\u7248\u672c\u53ef\u4ee5\u9ad8\u4e0d\u53ef\u4ee5\u4f4e\u3002 </p>
+<h3 id="\u4ee3\u7801\u5b9e\u73b0"><a href="#\u4ee3\u7801\u5b9e\u73b0" class="headerlink" title="\u4ee3\u7801\u5b9e\u73b0"></a>\u4ee3\u7801\u5b9e\u73b0</h3><p>\u6ce8:\u9644\u5f55\u4e2d\u6709\u5b8c\u6574\u4ee3\u7801\u5730\u5740</p>
+<ul>
+<li>\u5b9e\u73b0\u56fe\u7247\u4e0b\u8f7d\u63a5\u53e3\uff0c\u521d\u59cb\u5316\u65f6\u8bbe\u7f6e\u3002</li>
+</ul>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">package</span> com.weex.sample;</div><div class="line"></div><div class="line"><span class="keyword">import</span> android.widget.ImageView;</div><div class="line"></div><div class="line"><span class="keyword">import</span> com.taobao.weex.adapter.IWXImgLoaderAdapter;</div><div class="line"><span class="keyword">import</span> com.taobao.weex.common.WXImageStrategy;</div><div class="line"><span class="keyword">import</span> com.taobao.weex.dom.WXImageQuality;</div><div class="line"></div><div class="line"><span class="comment">/**</span></div><div class="line"> * Created by lixinke on 16/6/1.</div><div class="line"> */</div><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">ImageAdapter</span> <span class="keyword">implements</span> <span class="title">IWXImgLoaderAdapter</span> </span>{</div><div cl
ass="line"></div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setImage</span><span class="params">(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy)</span> </span>{</div><div class="line"> <span class="comment">//\u5b9e\u73b0\u4f60\u81ea\u5df1\u7684\u56fe\u7247\u4e0b\u8f7d\uff0c\u5426\u5219\u56fe\u7247\u65e0\u6cd5\u663e\u793a\u3002</span></div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<ul>
+<li>\u521d\u59cb\u5316</li>
+</ul>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">package</span> com.weex.sample;</div><div class="line"></div><div class="line"><span class="keyword">import</span> android.app.Application;</div><div class="line"></div><div class="line"><span class="keyword">import</span> com.taobao.weex.InitConfig;</div><div class="line"><span class="keyword">import</span> com.taobao.weex.WXSDKEngine;</div><div class="line"></div><div class="line"><span class="comment">/**</span></div><div class="line"> * \u6ce8\u610f\u8981\u5728Manifest\u4e2d\u8bbe\u7f6eandroid:name=".WXApplication"</div><div class="line"> * \u8981\u5b9e\u73b0ImageAdapter \u5426\u5219\u56fe\u7247\u4e0d\u80fd\u4e0b\u8f7d</div><div class="line"> * gradle \u4e2d\u4e00\u5b9a\u8981\u6dfb\u52a0\u4e00\u4e9b\u4f9d\u8d56\uff0c\u5426\u5219\u521d\u59cb\u5316\u4f1a\u5931\u8d25\u3002</div><div class="line"> * compile 'com.android.support:recyclerview-v7:23.1.1'</div><div class="line"> * compile 'com.android.support:support-v4:23.1.1'</div><div class="line"> * compile 'com.android.support:appcompat-v7:2
3.1.1'</div><div class="line"> * compile 'com.alibaba:fastjson:1.1.45'</div><div class="line"> */</div><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">WXApplication</span> <span class="keyword">extends</span> <span class="title">Application</span> </span>{</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onCreate</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">super</span>.onCreate();</div><div class="line"> InitConfig config=<span class="keyword">new</span> InitConfig.Builder().setImgAdapter(<span class="keyword">new</span> ImageAdapter()).build();</div><div class="line"> WXSDKEngine.initialize(<span class="keyword">this</span>,config);</div><div class="line"> }</
div><div class="line">}</div></pre></td></tr></table></figure>
+<ul>
+<li>\u5f00\u59cb\u6e32\u67d3</li>
+</ul>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">package</span> com.weex.sample;</div><div class="line"></div><div class="line"><span class="keyword">import</span> android.os.Bundle;</div><div class="line"><span class="keyword">import</span> android.support.v7.app.AppCompatActivity;</div><div class="line"><span class="keyword">import</span> android.view.View;</div><div class="line"></div><div class="line"><span class="keyword">import</span> com.taobao.weex.IWXRenderListener;</div><div class="line"><span class="keyword">import</span> com.taobao.weex.WXSDKInstance;</div><div class="line"><span class="keyword">import</span> com.taobao.weex.common.WXRenderStrategy;</div><div class="line"><span class="keyword">import</span> com.taobao.weex.utils.WXFileUtils;</div><div class="line"></div><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MainActivity</span>
<span class="keyword">extends</span> <span class="title">AppCompatActivity</span> <span class="keyword">implements</span> <span class="title">IWXRenderListener</span> </span>{</div><div class="line"></div><div class="line"> WXSDKInstance mWXSDKInstance;</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onCreate</span><span class="params">(Bundle savedInstanceState)</span> </span>{</div><div class="line"> <span class="keyword">super</span>.onCreate(savedInstanceState);</div><div class="line"> setContentView(R.layout.activity_main);</div><div class="line"></div><div class="line"> mWXSDKInstance = <span class="keyword">new</span> WXSDKInstance(<span class="keyword">this</span>);</div><div class="line"> mWXSDKInstance.registerRenderListener(<span class="keyword">this</span>);</div><div class
="line"> <span class="comment">/**</span></div><div class="line"> * WXSample \u53ef\u4ee5\u66ff\u6362\u6210\u81ea\u5b9a\u4e49\u7684\u5b57\u7b26\u4e32\uff0c\u9488\u5bf9\u57cb\u70b9\u6709\u6548\u3002</div><div class="line"> * template \u662f.we transform \u540e\u7684 js\u6587\u4ef6\u3002</div><div class="line"> * option \u53ef\u4ee5\u4e3a\u7a7a\uff0c\u6216\u8005\u901a\u8fc7option\u4f20\u5165 js\u9700\u8981\u7684\u53c2\u6570\u3002\u4f8b\u5982bundle js\u7684\u5730\u5740\u7b49\u3002</div><div class="line"> * jsonInitData \u53ef\u4ee5\u4e3a\u7a7a\u3002</div><div class="line"> * width \u4e3a-1 \u9ed8\u8ba4\u5168\u5c4f\uff0c\u53ef\u4ee5\u81ea\u5df1\u5b9a\u5236\u3002</div><div class="line"> * height =-1 \u9ed8\u8ba4\u5168\u5c4f\uff0c\u53ef\u4ee5\u81ea\u5df1\u5b9a\u5236\u3002</div><div class="line"> */</div><div class="line"> mWXSDKInstance.render(<span class="string">"WXSample"</span>, WXFileUtils.loadFileContent(<span class="string">"hello.js"</span>, <span class="keyword">this</span>), <span class="keyword">null</span>, <span class="keyword">null</span>, -<span class="number">1</span>, -<span class="number">1</span>, WXRenderStrategy.APPEND_ASYNC);</div><div class="line"> }</div><div c
lass="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onViewCreated</span><span class="params">(WXSDKInstance instance, View view)</span> </span>{</div><div class="line"> setContentView(view);</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onRenderSuccess</span><span class="params">(WXSDKInstance instance, <span class="keyword">int</span> width, <span class="keyword">int</span> height)</span> </span>{</div><div class="line"></div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">pu
blic</span> <span class="keyword">void</span> <span class="title">onRefreshSuccess</span><span class="params">(WXSDKInstance instance, <span class="keyword">int</span> width, <span class="keyword">int</span> height)</span> </span>{</div><div class="line"></div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onException</span><span class="params">(WXSDKInstance instance, String errCode, String msg)</span> </span>{</div><div class="line"></div><div class="line"> }</div><div class="line"></div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onResume</span><span class="params">()</span> </span>{</d
iv><div class="line"> <span class="keyword">super</span>.onResume();</div><div class="line"> <span class="keyword">if</span>(mWXSDKInstance!=<span class="keyword">null</span>){</div><div class="line"> mWXSDKInstance.onActivityResume();</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onPause</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">super</span>.onPause();</div><div class="line"> <span class="keyword">if</span>(mWXSDKInstance!=<span class="keyword">null</span>){</div><div class="line"> mWXSDKInstance.onActivityPause();</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Overrid
e</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onStop</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">super</span>.onStop();</div><div class="line"> <span class="keyword">if</span>(mWXSDKInstance!=<span class="keyword">null</span>){</div><div class="line"> mWXSDKInstance.onActivityStop();</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onDestroy</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">super</span>.onDestroy();</div><div class="line"> <span class="keyword">if</span>(mWXSDKInstance!=<span class="keyword">null</span>)&#
123;</div><div class="line"> mWXSDKInstance.onActivityDestroy();</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<h2 id="\u6e90\u7801\u4f9d\u8d56-IDE-Android-Studio"><a href="#\u6e90\u7801\u4f9d\u8d56-IDE-Android-Studio" class="headerlink" title="\u6e90\u7801\u4f9d\u8d56(IDE Android Studio)"></a>\u6e90\u7801\u4f9d\u8d56(IDE Android Studio)</h2><ol>
+<li>\u4e0b\u8f7d\u6e90\u7801 <code>git clone https://github.com/alibaba/weex</code></li>
+<li>\u521b\u5efa Android \u5de5\u7a0b\u3002</li>
+<li>\u901a\u8fc7\u4ee5\u4e0b\u8def\u5f84\u5f15\u5165 SDK Module<br>File->New-Import Module-> \u9009\u62e9 WEEX SDK Module(weex/android/sdk) -> Finish </li>
+<li>app \u7684 build.gradle \u4e2d\u6dfb\u52a0\u5982\u4e0b\u4f9d\u8d56:<code>compile project(':weex_sdk')</code></li>
+<li>\u5176\u4ed6\u8bbe\u7f6e\u8bf7\u53c2\u8003\u4e0a\u9762\u5feb\u901f\u63a5\u5165</li>
+</ol>
+<h3 id="\u9644\u5f55"><a href="#\u9644\u5f55" class="headerlink" title="\u9644\u5f55"></a>\u9644\u5f55</h3><p>WXSample\u5730\u5740<br><code>https://github.com/xkli/WXSample.git</code></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/advanced/integrate-to-android.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/integrate-to-android.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[24/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/modules/globalevent.html
----------------------------------------------------------------------
diff --git a/content/cn/references/modules/globalevent.html b/content/cn/references/modules/globalevent.html
new file mode 100644
index 0000000..4bda0b9
--- /dev/null
+++ b/content/cn/references/modules/globalevent.html
@@ -0,0 +1,1352 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>globalEvent | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5168\u5c40\u4e8b\u4ef60.8 (\u5f00\u53d1\u4e2d)
+globalEvent \u7528\u4e8e\u76d1\u542c\u6301\u4e45\u6027\u4e8b\u4ef6\uff0c\u4f8b\u5982\u5b9a\u4f4d\u4fe1\u606f\uff0c\u9640\u87ba\u4eea\u7b49\u7684\u53d8\u5316\u3002\u5168\u5c40\u4e8b\u4ef6\u662f\u9700\u8981\u989d\u5916 APIs \u5904\u7406\u7684\u6b21\u8981 API\u3002\u4f60\u80fd\u901a\u8fc7 addEventListener \u6ce8\u518c\u4e8b\u4ef6\u76d1\u542c\uff0c\u5f53\u4f60\u4e0d\u518d\u9700\u8981\u7684\u65f6\u5019\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 removingEventListener \u53d6\u6d88\u4e8b\u4ef6\u76d1\u542c\u3002
+\u63d0\u9192
+
+\u8fd9\u662f\u4e00\u4e2a\u5b9e\u4f8b\u7ea7\u522b\u7684\u4e8b\u4ef6\uff0c\u800c\u975e\u5e94\u7528\u7ea7\u522b\u3002
+
+\u5982\u4f55\u8ba9\u4f60\u7684\u6a21\u5757\u652f\u6301\u5168\u5c40\u4e8b\u4ef6API \u5f00\u53d1\u5b8c\u6210\u540e\uff0c\u5f53">
+<meta property="og:type" content="website">
+<meta property="og:title" content="globalEvent">
+<meta property="og:url" content="https://weex.apache.org/cn/references/modules/globalevent.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5168\u5c40\u4e8b\u4ef60.8 (\u5f00\u53d1\u4e2d)
+globalEvent \u7528\u4e8e\u76d1\u542c\u6301\u4e45\u6027\u4e8b\u4ef6\uff0c\u4f8b\u5982\u5b9a\u4f4d\u4fe1\u606f\uff0c\u9640\u87ba\u4eea\u7b49\u7684\u53d8\u5316\u3002\u5168\u5c40\u4e8b\u4ef6\u662f\u9700\u8981\u989d\u5916 APIs \u5904\u7406\u7684\u6b21\u8981 API\u3002\u4f60\u80fd\u901a\u8fc7 addEventListener \u6ce8\u518c\u4e8b\u4ef6\u76d1\u542c\uff0c\u5f53\u4f60\u4e0d\u518d\u9700\u8981\u7684\u65f6\u5019\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 removingEventListener \u53d6\u6d88\u4e8b\u4ef6\u76d1\u542c\u3002
+\u63d0\u9192
+
+\u8fd9\u662f\u4e00\u4e2a\u5b9e\u4f8b\u7ea7\u522b\u7684\u4e8b\u4ef6\uff0c\u800c\u975e\u5e94\u7528\u7ea7\u522b\u3002
+
+\u5982\u4f55\u8ba9\u4f60\u7684\u6a21\u5757\u652f\u6301\u5168\u5c40\u4e8b\u4ef6API \u5f00\u53d1\u5b8c\u6210\u540e\uff0c\u5f53">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.904Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="globalEvent">
+<meta name="twitter:description" content="\u5168\u5c40\u4e8b\u4ef60.8 (\u5f00\u53d1\u4e2d)
+globalEvent \u7528\u4e8e\u76d1\u542c\u6301\u4e45\u6027\u4e8b\u4ef6\uff0c\u4f8b\u5982\u5b9a\u4f4d\u4fe1\u606f\uff0c\u9640\u87ba\u4eea\u7b49\u7684\u53d8\u5316\u3002\u5168\u5c40\u4e8b\u4ef6\u662f\u9700\u8981\u989d\u5916 APIs \u5904\u7406\u7684\u6b21\u8981 API\u3002\u4f60\u80fd\u901a\u8fc7 addEventListener \u6ce8\u518c\u4e8b\u4ef6\u76d1\u542c\uff0c\u5f53\u4f60\u4e0d\u518d\u9700\u8981\u7684\u65f6\u5019\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 removingEventListener \u53d6\u6d88\u4e8b\u4ef6\u76d1\u542c\u3002
+\u63d0\u9192
+
+\u8fd9\u662f\u4e00\u4e2a\u5b9e\u4f8b\u7ea7\u522b\u7684\u4e8b\u4ef6\uff0c\u800c\u975e\u5e94\u7528\u7ea7\u522b\u3002
+
+\u5982\u4f55\u8ba9\u4f60\u7684\u6a21\u5757\u652f\u6301\u5168\u5c40\u4e8b\u4ef6API \u5f00\u53d1\u5b8c\u6210\u540e\uff0c\u5f53">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link current ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link current ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ globalEvent
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.904Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5168\u5c40\u4e8b\u4ef6"><a href="#\u5168\u5c40\u4e8b\u4ef6" class="headerlink" title="\u5168\u5c40\u4e8b\u4ef6"></a>\u5168\u5c40\u4e8b\u4ef6</h1><p><span class="weex-version">0.8 (\u5f00\u53d1\u4e2d)</span></p>
+<p><code>globalEvent</code> \u7528\u4e8e\u76d1\u542c\u6301\u4e45\u6027\u4e8b\u4ef6\uff0c\u4f8b\u5982\u5b9a\u4f4d\u4fe1\u606f\uff0c\u9640\u87ba\u4eea\u7b49\u7684\u53d8\u5316\u3002\u5168\u5c40\u4e8b\u4ef6\u662f\u9700\u8981\u989d\u5916 APIs \u5904\u7406\u7684\u6b21\u8981 API\u3002\u4f60\u80fd\u901a\u8fc7 <code>addEventListener</code> \u6ce8\u518c\u4e8b\u4ef6\u76d1\u542c\uff0c\u5f53\u4f60\u4e0d\u518d\u9700\u8981\u7684\u65f6\u5019\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 <code>removingEventListener</code> \u53d6\u6d88\u4e8b\u4ef6\u76d1\u542c\u3002</p>
+<p><em>\u63d0\u9192</em></p>
+<ul>
+<li>\u8fd9\u662f\u4e00\u4e2a\u5b9e\u4f8b\u7ea7\u522b\u7684\u4e8b\u4ef6\uff0c\u800c\u975e\u5e94\u7528\u7ea7\u522b\u3002</li>
+</ul>
+<h2 id="\u5982\u4f55\u8ba9\u4f60\u7684\u6a21\u5757\u652f\u6301\u5168\u5c40\u4e8b\u4ef6"><a href="#\u5982\u4f55\u8ba9\u4f60\u7684\u6a21\u5757\u652f\u6301\u5168\u5c40\u4e8b\u4ef6" class="headerlink" title="\u5982\u4f55\u8ba9\u4f60\u7684\u6a21\u5757\u652f\u6301\u5168\u5c40\u4e8b\u4ef6"></a>\u5982\u4f55\u8ba9\u4f60\u7684\u6a21\u5757\u652f\u6301\u5168\u5c40\u4e8b\u4ef6</h2><p>API \u5f00\u53d1\u5b8c\u6210\u540e\uff0c\u5f53\u9700\u8981\u53d1\u9001\u4e8b\u4ef6\u65f6\uff0c\u9700\u8981\u901a\u8fc7\u4ee5\u4e0b\u65b9\u6cd5\uff1a</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"> * </div><div class="line"> * @param eventName eventName</div><div class="line"> * @param params event params</div><div class="line"> */</div><div class="line">instance.fireGlobalEventCallback(eventName,params);</div></pre></td></tr></table></figure>
+<p>\u5982\u4f55\u5728 weex-html5 \u7ec4\u4ef6\u6216\u6a21\u5757\u4e2d\u5206\u53d1\u5168\u5c40\u4e8b\u4ef6\uff1f\u53ea\u9700\u5728\u6587\u6863\u5143\u7d20\u4e0a\u5206\u6d3e\u4e8b\u4ef6\uff1a</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> evt = <span class="keyword">new</span> Event(<span class="string">'some-type'</span>)</div><div class="line">evt.data = { <span class="attr">foo</span>: <span class="string">'bar'</span> }</div><div class="line"><span class="built_in">document</span>.dispatchEvent(evt)</div></pre></td></tr></table></figure>
+<p><strong>\u793a\u4f8b</strong></p>
+<h3 id="Android"><a href="#Android" class="headerlink" title="Android"></a>Android</h3><figure class="highlight java"><table><tr><td class="code"><pre><div class="line">Map<String,Object> params=<span class="keyword">new</span> HashMap<>();</div><div class="line">params.put(<span class="string">"key"</span>,<span class="string">"value"</span>);</div><div class="line">mWXSDKInstance.fireGlobalEventCallback(<span class="string">"geolocation"</span>,params);</div></pre></td></tr></table></figure>
+<h3 id="iOS"><a href="#iOS" class="headerlink" title="iOS"></a>iOS</h3><figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">[weexInstance fireGlobalEvent:@"geolocation" params:@{@"key":@"value"}];</div></pre></td></tr></table></figure>
+<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><h3 id="addEventListener-String-eventName-String-callback"><a href="#addEventListener-String-eventName-String-callback" class="headerlink" title="addEventListener(String eventName, String callback)"></a><code>addEventListener(String eventName, String callback)</code></h3><p>\u6ce8\u518c\u5168\u5c40\u4e8b\u4ef6\u3002</p>
+<h4 id="\u53c2\u6570"><a href="#\u53c2\u6570" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>eventName {string}</code>\uff1a\u9700\u8981\u76d1\u542c\u7684\u4e8b\u4ef6\u540d\u79f0\u3002</li>
+<li><code>callback {Function}</code>\uff1a\u89e6\u53d1\u4e8b\u4ef6\u540e\u7684\u56de\u8c03\u51fd\u6570\u3002</li>
+</ul>
+<h4 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> globalEvent = <span class="built_in">require</span>(<span class="string">'@weex-module/globalEvent'</span>);</div><div class="line">globalEvent.addEventListener(<span class="string">"geolocation"</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">"get geolocation"</span>)</div><div class="line">});</div></pre></td></tr></table></figure>
+<h3 id="removeEventListener-String-eventName"><a href="#removeEventListener-String-eventName" class="headerlink" title="removeEventListener(String eventName)"></a><code>removeEventListener(String eventName)</code></h3><p>\u53d6\u6d88\u4e8b\u4ef6\u76d1\u542c\u3002</p>
+<h4 id="\u53c2\u6570-1"><a href="#\u53c2\u6570-1" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>eventName {string}</code>\uff1a\u9700\u8981\u53d6\u6d88\u7684\u4e8b\u4ef6\u540d\u79f0\u3002</li>
+</ul>
+<h4 id="\u793a\u4f8b-1"><a href="#\u793a\u4f8b-1" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> globalEvent = <span class="built_in">require</span>(<span class="string">'@weex-module/globalEvent'</span>);</div><div class="line">globalEvent.removeEventListener(<span class="string">"geolocation"</span>);</div></pre></td></tr></table></figure>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/modules/globalevent.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/modules/globalevent.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/modules/index.html
----------------------------------------------------------------------
diff --git a/content/cn/references/modules/index.html b/content/cn/references/modules/index.html
new file mode 100644
index 0000000..db3d9f8
--- /dev/null
+++ b/content/cn/references/modules/index.html
@@ -0,0 +1,1315 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u5185\u5efa\u6a21\u5757 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5185\u5efa\u6a21\u5757\u5982\u4f55\u4f7f\u7528\u4f60\u53ef\u4ee5\u7b80\u5355\u7684\u901a\u8fc7\u7c7b\u4f3c require(&#39;@weex-module/name&#39;) \u8fd9\u6837\u7684\u8bed\u6cd5\u83b7\u53d6\u4e00\u4e2a\u6a21\u5757\u7684 API\uff0c\u6bd4\u5982\uff1a
+&lt;script&gt; const modal = weex.requireModule('modal') module.exports = &#123; data: &#123;&#125;, methods: &#123">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u5185\u5efa\u6a21\u5757">
+<meta property="og:url" content="https://weex.apache.org/cn/references/modules/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5185\u5efa\u6a21\u5757\u5982\u4f55\u4f7f\u7528\u4f60\u53ef\u4ee5\u7b80\u5355\u7684\u901a\u8fc7\u7c7b\u4f3c require(&#39;@weex-module/name&#39;) \u8fd9\u6837\u7684\u8bed\u6cd5\u83b7\u53d6\u4e00\u4e2a\u6a21\u5757\u7684 API\uff0c\u6bd4\u5982\uff1a
+&lt;script&gt; const modal = weex.requireModule('modal') module.exports = &#123; data: &#123;&#125;, methods: &#123">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.905Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u5185\u5efa\u6a21\u5757">
+<meta name="twitter:description" content="\u5185\u5efa\u6a21\u5757\u5982\u4f55\u4f7f\u7528\u4f60\u53ef\u4ee5\u7b80\u5355\u7684\u901a\u8fc7\u7c7b\u4f3c require(&#39;@weex-module/name&#39;) \u8fd9\u6837\u7684\u8bed\u6cd5\u83b7\u53d6\u4e00\u4e2a\u6a21\u5757\u7684 API\uff0c\u6bd4\u5982\uff1a
+&lt;script&gt; const modal = weex.requireModule('modal') module.exports = &#123; data: &#123;&#125;, methods: &#123">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link current ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link current ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u5185\u5efa\u6a21\u5757
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.905Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5185\u5efa\u6a21\u5757"><a href="#\u5185\u5efa\u6a21\u5757" class="headerlink" title="\u5185\u5efa\u6a21\u5757"></a>\u5185\u5efa\u6a21\u5757</h1><h2 id="\u5982\u4f55\u4f7f\u7528"><a href="#\u5982\u4f55\u4f7f\u7528" class="headerlink" title="\u5982\u4f55\u4f7f\u7528"></a>\u5982\u4f55\u4f7f\u7528</h2><p>\u4f60\u53ef\u4ee5\u7b80\u5355\u7684\u901a\u8fc7\u7c7b\u4f3c <code>require('@weex-module/name')</code> \u8fd9\u6837\u7684\u8bed\u6cd5\u83b7\u53d6\u4e00\u4e2a\u6a21\u5757\u7684 API\uff0c\u6bd4\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {},</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">toast</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">'props: '</span> + event.data.join(<span class="string">', '</span>)</div><div class="line"> })</div><div class="line"> 
5;</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/modules/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/modules/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[46/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/playground.html
----------------------------------------------------------------------
diff --git a/content/cn/playground.html b/content/cn/playground.html
new file mode 100644
index 0000000..098108e
--- /dev/null
+++ b/content/cn/playground.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="website">
+<meta property="og:title" content="Weex">
+<meta property="og:url" content="https://weex.apache.org/cn/playground.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.830Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="playground" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "playground";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="wrapper playground-wrapper clearfix">
+ <div class="left">
+ <h2>Weex Playground</h2>
+ <p>Weex Native \u8fd0\u884c\u65f6\u5b9e\u4f8b & Weex \u6587\u4ef6\u9884\u89c8\u5de5\u5177\u3002</p>
+ <div class="download clearfix">
+ <img class="qr-code" src="//gw.alicdn.com/tps/TB1PZ1HPXXXXXctXVXXXXXXXXXX-280-280.png" alt="playground qr code">
+ <ul class="links">
+ <li class="ios">
+ <a href="" id="ios-link" class="link" target="_blank">iOS</a>
+ </li>
+ <li class="android">
+ <a href="" id="android-link" class="link">Android</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="left">
+ <img src="//gw.alicdn.com/tps/TB1831MPXXXXXXzXVXXXXXXXXXX-333-502.png" alt="">
+ </div>
+</div>
+
+<script type="text/javascript">
+ function parseWeexVersion(data){
+ document.getElementById("ios-link").href = data.iosDownload
+ document.getElementById("android-link").href = data.androidDownload
+ }
+
+ window.parseWeexVersion = parseWeexVersion;
+</script>
+<script type="text/javascript" src="https://h5.m.taobao.com/js/weex/playground/app/info.js "></script>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/playground.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/playground.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/advanced/extend-jsfm.html
----------------------------------------------------------------------
diff --git a/content/cn/references/advanced/extend-jsfm.html b/content/cn/references/advanced/extend-jsfm.html
new file mode 100644
index 0000000..161e21f
--- /dev/null
+++ b/content/cn/references/advanced/extend-jsfm.html
@@ -0,0 +1,1427 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u62d3\u5c55 JS framework | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5b9a\u5236\u81ea\u5df1\u7684 JS Framework\u8fd9\u90e8\u5206\u6269\u5c55\u80fd\u529b\u8fd8\u5728\u8ba8\u8bba\u5c1d\u8bd5\u4e2d\uff0c\u53ef\u80fd\u968f\u65f6\u4f1a\u6709\u8c03\u6574\uff0c\u8bf7\u7559\u610f\u3002
+Weex \u5e0c\u671b\u80fd\u591f\u5c0a\u91cd\u5c3d\u53ef\u80fd\u591a\u7684\u5f00\u53d1\u8005\u7684\u4f7f\u7528\u4e60\u60ef\uff0c\u6240\u4ee5\u9664\u4e86 Weex \u5b98\u65b9\u652f\u6301\u7684 Vue 2.0 \u4e4b\u5916\uff0c\u5f00\u53d1\u8005\u8fd8\u53ef\u4ee5\u5b9a\u5236\u5e76\u6a2a\u5411\u6269\u5c55\u81ea\u5df1\u7684\u6216\u81ea\u5df1\u559c\u6b22\u7684 JS Framework\u3002\u5b8c\u6574\u4e00\u5957 JS Framework \u7684\u5b9a\u5236\u548c\u6269\u5c55\u9700\u8981\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\uff1a
+
+\u9996\u5148\u4f60\u8981\u6709\u4e00\u5957\u5b8c\u6574\u7684 JS Framework\u3002
+\u4e86\u89e3 We">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u62d3\u5c55 JS framework">
+<meta property="og:url" content="https://weex.apache.org/cn/references/advanced/extend-jsfm.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5b9a\u5236\u81ea\u5df1\u7684 JS Framework\u8fd9\u90e8\u5206\u6269\u5c55\u80fd\u529b\u8fd8\u5728\u8ba8\u8bba\u5c1d\u8bd5\u4e2d\uff0c\u53ef\u80fd\u968f\u65f6\u4f1a\u6709\u8c03\u6574\uff0c\u8bf7\u7559\u610f\u3002
+Weex \u5e0c\u671b\u80fd\u591f\u5c0a\u91cd\u5c3d\u53ef\u80fd\u591a\u7684\u5f00\u53d1\u8005\u7684\u4f7f\u7528\u4e60\u60ef\uff0c\u6240\u4ee5\u9664\u4e86 Weex \u5b98\u65b9\u652f\u6301\u7684 Vue 2.0 \u4e4b\u5916\uff0c\u5f00\u53d1\u8005\u8fd8\u53ef\u4ee5\u5b9a\u5236\u5e76\u6a2a\u5411\u6269\u5c55\u81ea\u5df1\u7684\u6216\u81ea\u5df1\u559c\u6b22\u7684 JS Framework\u3002\u5b8c\u6574\u4e00\u5957 JS Framework \u7684\u5b9a\u5236\u548c\u6269\u5c55\u9700\u8981\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\uff1a
+
+\u9996\u5148\u4f60\u8981\u6709\u4e00\u5957\u5b8c\u6574\u7684 JS Framework\u3002
+\u4e86\u89e3 We">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.833Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u62d3\u5c55 JS framework">
+<meta name="twitter:description" content="\u5b9a\u5236\u81ea\u5df1\u7684 JS Framework\u8fd9\u90e8\u5206\u6269\u5c55\u80fd\u529b\u8fd8\u5728\u8ba8\u8bba\u5c1d\u8bd5\u4e2d\uff0c\u53ef\u80fd\u968f\u65f6\u4f1a\u6709\u8c03\u6574\uff0c\u8bf7\u7559\u610f\u3002
+Weex \u5e0c\u671b\u80fd\u591f\u5c0a\u91cd\u5c3d\u53ef\u80fd\u591a\u7684\u5f00\u53d1\u8005\u7684\u4f7f\u7528\u4e60\u60ef\uff0c\u6240\u4ee5\u9664\u4e86 Weex \u5b98\u65b9\u652f\u6301\u7684 Vue 2.0 \u4e4b\u5916\uff0c\u5f00\u53d1\u8005\u8fd8\u53ef\u4ee5\u5b9a\u5236\u5e76\u6a2a\u5411\u6269\u5c55\u81ea\u5df1\u7684\u6216\u81ea\u5df1\u559c\u6b22\u7684 JS Framework\u3002\u5b8c\u6574\u4e00\u5957 JS Framework \u7684\u5b9a\u5236\u548c\u6269\u5c55\u9700\u8981\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\uff1a
+
+\u9996\u5148\u4f60\u8981\u6709\u4e00\u5957\u5b8c\u6574\u7684 JS Framework\u3002
+\u4e86\u89e3 We">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link current ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link current ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u62d3\u5c55 JS framework
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.833Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5b9a\u5236\u81ea\u5df1\u7684-JS-Framework"><a href="#\u5b9a\u5236\u81ea\u5df1\u7684-JS-Framework" class="headerlink" title="\u5b9a\u5236\u81ea\u5df1\u7684 JS Framework"></a>\u5b9a\u5236\u81ea\u5df1\u7684 JS Framework</h1><p><em>\u8fd9\u90e8\u5206\u6269\u5c55\u80fd\u529b\u8fd8\u5728\u8ba8\u8bba\u5c1d\u8bd5\u4e2d\uff0c\u53ef\u80fd\u968f\u65f6\u4f1a\u6709\u8c03\u6574\uff0c\u8bf7\u7559\u610f\u3002</em></p>
+<p>Weex \u5e0c\u671b\u80fd\u591f\u5c0a\u91cd\u5c3d\u53ef\u80fd\u591a\u7684\u5f00\u53d1\u8005\u7684\u4f7f\u7528\u4e60\u60ef\uff0c\u6240\u4ee5\u9664\u4e86 Weex \u5b98\u65b9\u652f\u6301\u7684 Vue 2.0 \u4e4b\u5916\uff0c\u5f00\u53d1\u8005\u8fd8\u53ef\u4ee5\u5b9a\u5236\u5e76\u6a2a\u5411\u6269\u5c55\u81ea\u5df1\u7684\u6216\u81ea\u5df1\u559c\u6b22\u7684 JS Framework\u3002\u5b8c\u6574\u4e00\u5957 JS Framework \u7684\u5b9a\u5236\u548c\u6269\u5c55\u9700\u8981\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\uff1a</p>
+<ol>
+<li>\u9996\u5148\u4f60\u8981\u6709\u4e00\u5957\u5b8c\u6574\u7684 JS Framework\u3002</li>
+<li>\u4e86\u89e3 Weex \u7684 JS \u5f15\u64ce\u7684\u7279\u6027\u652f\u6301\u60c5\u51b5\u3002</li>
+<li>\u9002\u914d Weex \u7684 native DOM APIs\u3002</li>
+<li>\u9002\u914d Weex \u7684\u521d\u59cb\u5316\u5165\u53e3\u548c\u591a\u5b9e\u4f8b\u7ba1\u7406\u673a\u5236\u3002</li>
+<li>\u5728 Weex JS runtime \u7684 framework \u914d\u7f6e\u4e2d\u52a0\u5165\u81ea\u5df1\u7684 JS Framework \u7136\u540e\u6253\u5305\u3002</li>
+<li>\u57fa\u4e8e\u8be5 JS Framework \u64b0\u5199 JS bundle\uff0c\u5e76\u52a0\u5165\u7279\u5b9a\u7684\u524d\u7f00\u6ce8\u91ca\uff0c\u4ee5\u4fbf Weex JS runtime \u80fd\u591f\u6b63\u786e\u8bc6\u522b\u3002</li>
+</ol>
+<h2 id="Weex-JS-\u5f15\u64ce\u7684\u7279\u6027\u652f\u6301\u60c5\u51b5"><a href="#Weex-JS-\u5f15\u64ce\u7684\u7279\u6027\u652f\u6301\u60c5\u51b5" class="headerlink" title="Weex JS \u5f15\u64ce\u7684\u7279\u6027\u652f\u6301\u60c5\u51b5"></a>Weex JS \u5f15\u64ce\u7684\u7279\u6027\u652f\u6301\u60c5\u51b5</h2><ul>
+<li>\u5728 iOS \u4e0b\uff0cWeex \u4f7f\u7528\u7684\u662f\u7cfb\u7edf\u81ea\u5e26\u7684 JavaScriptCore\uff0c\u6240\u4ee5 ES \u652f\u6301\u60c5\u51b5\u53d6\u51b3\u4e8e\u64cd\u4f5c\u7cfb\u7edf\u7684\u7248\u672c\u3002\u76ee\u524d\u4fdd\u5b88\u5224\u65ad\uff0cES5 \u7684\u7279\u6027\u5e02\u9762\u4e0a\u4e3b\u6d41\u7684 iOS \u8bbe\u5907\u90fd\u662f\u53ef\u4ee5\u5b8c\u7f8e\u652f\u6301\u7684\uff0c\u4f46\u662f ES6+ \u7684\u7279\u6027\u5b58\u5728\u4e00\u5b9a\u7684\u788e\u7247\u5316\u3002</li>
+<li>\u5728 Android \u4e0b\uff0cWeex \u4f7f\u7528\u7684\u662f UC \u63d0\u4f9b\u7684 v8 \u5185\u6838\uff0c\u51fa\u4e8e\u4f53\u79ef\u3001\u6027\u80fd\u548c\u7a33\u5b9a\u6027\u7684\u8003\u8651\uff0c\u6211\u4eec\u4f7f\u7528\u7684\u5e76\u4e0d\u662f\u6700\u65b0\u7248\u672c\u7684 v8 \u5185\u6838\uff0c\u540c\u6837\u7684\u4fdd\u5b88\u5224\u65ad\uff0cES5 \u7279\u6027\u80fd\u591f\u5168\u90e8\u652f\u6301\uff0c\u5305\u62ec\u4e25\u683c\u6a21\u5f0f\u3001<code>Object.freeze</code> \u7b49\u3002</li>
+<li>Weex JS \u5f15\u64ce\u4e0d\u652f\u6301 HTML DOM APIs \u548c HTML5 JS APIs\uff0c\u8fd9\u5305\u62ec <code>document</code>, <code>setTimeout</code> \u7b49\u3002</li>
+<li>\u5728\u6b64\u57fa\u7840\u4e0a\uff0c\u6211\u4eec\u52a0\u5165\u4e86 <code>Promise</code> \u7684 polyfill\uff0c\u4ee5\u53ca <code>console</code> \u7684 polyfill\u3002</li>
+<li>\u989d\u5916\u7684\uff0c\u4e3a\u4e86\u5c3d\u53ef\u80fd\u7684\u786e\u4fdd JS \u5f15\u64ce\u7684\u957f\u6548\u5185\u5b58\u7ba1\u7406\uff0c\u6211\u4eec\u5bf9\u4e00\u4e2a\u901a\u7528\u7684\u5168\u5c40\u5bf9\u8c61\u8fdb\u884c\u4e86 <code>Object.freeze()</code> \u51bb\u7ed3\u64cd\u4f5c\uff0c\u8fd9\u5305\u62ec\uff1a<ul>
+<li><code>Object</code></li>
+<li><code>Object.prototype</code></li>
+<li><code>Array</code></li>
+<li><code>Array.prototype</code></li>
+<li><code>String.prototype</code></li>
+<li><code>Number.prototype</code></li>
+<li><code>Boolean.prototype</code></li>
+<li><code>Error.prototype</code></li>
+<li><code>Date.prototype</code></li>
+<li><code>RegExp.prototype</code></li>
+</ul>
+</li>
+</ul>
+<h2 id="\u9002\u914d-Weex-\u7684\u521d\u59cb\u5316\u5165\u53e3\u548c\u591a\u5b9e\u4f8b\u7ba1\u7406\u673a\u5236"><a href="#\u9002\u914d-Weex-\u7684\u521d\u59cb\u5316\u5165\u53e3\u548c\u591a\u5b9e\u4f8b\u7ba1\u7406\u673a\u5236" class="headerlink" title="\u9002\u914d Weex \u7684\u521d\u59cb\u5316\u5165\u53e3\u548c\u591a\u5b9e\u4f8b\u7ba1\u7406\u673a\u5236"></a>\u9002\u914d Weex \u7684\u521d\u59cb\u5316\u5165\u53e3\u548c\u591a\u5b9e\u4f8b\u7ba1\u7406\u673a\u5236</h2><p>\u5f00\u53d1\u8005\u63d0\u4f9b\u7684 JS Framework \u6700\u7ec8\u9700\u8981\u5305\u88c5\u6210\u4e00\u4e2a CommonJS \u5305\uff0c\u5e76\u4e14\u8fd9\u4e2a\u5305\u9700\u8981\u5bf9\u5916\u66b4\u9732\u4ee5\u4e0b\u65b9\u6cd5\uff1a</p>
+<h3 id="\u6846\u67b6\u521d\u59cb\u5316"><a href="#\u6846\u67b6\u521d\u59cb\u5316" class="headerlink" title="\u6846\u67b6\u521d\u59cb\u5316"></a>\u6846\u67b6\u521d\u59cb\u5316</h3><ul>
+<li><code>init(config)</code><ul>
+<li><code>config</code><ul>
+<li><code>Document</code></li>
+<li><code>Element</code></li>
+<li><code>Comment</code></li>
+<li><code>TaskSender</code></li>
+<li><code>CallbackManager</code></li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+<p>\u8be5\u65b9\u6cd5\u4f1a\u628a Weex \u63d0\u4f9b\u7684 Native DOM \u7c7b\u548c\u4e24\u4e2a\u8f85\u52a9\u7c7b\u653e\u5230 <code>config</code> \u53c2\u6570\u4e2d\uff0c\u5e76\u5141\u8bb8\u6846\u67b6\u672c\u8eab\u5b8c\u6210\u521d\u59cb\u5316\u3002</p>
+<p><em>\u5c0f\u63d0\u793a\uff1a\u540c\u65f6\uff0c\u6846\u67b6\u4f5c\u8005\u4e5f\u80fd\u591f\u901a\u8fc7\u5728\u6846\u67b6\u521d\u59cb\u5316\u65f6\u4f20\u5165\u4e0d\u540c\u7684 <code>config</code> \u6765\u8fdb\u884c\u6846\u67b6\u7684\u6d4b\u8bd5\u6216\u73af\u5883\u6a21\u62df\u3002</em></p>
+<h4 id="\u53c2\u6570\u683c\u5f0f\u4ecb\u7ecd"><a href="#\u53c2\u6570\u683c\u5f0f\u4ecb\u7ecd" class="headerlink" title="\u53c2\u6570\u683c\u5f0f\u4ecb\u7ecd"></a>\u53c2\u6570\u683c\u5f0f\u4ecb\u7ecd</h4><ul>
+<li><code>TaskSender</code>: wip\u2026</li>
+<li><code>CallbackManager</code>: wip\u2026</li>
+</ul>
+<h3 id="\u6ce8\u518c\u53ef\u7528\u7684-native-\u7ec4\u4ef6\u548c\u6a21\u5757"><a href="#\u6ce8\u518c\u53ef\u7528\u7684-native-\u7ec4\u4ef6\u548c\u6a21\u5757" class="headerlink" title="\u6ce8\u518c\u53ef\u7528\u7684 native \u7ec4\u4ef6\u548c\u6a21\u5757"></a>\u6ce8\u518c\u53ef\u7528\u7684 native \u7ec4\u4ef6\u548c\u6a21\u5757</h3><ul>
+<li><code>registerComponents(components)</code></li>
+<li><code>registerModules(modules)</code></li>
+</ul>
+<p>\u8fd9\u4e24\u4e2a\u65b9\u6cd5\u4f1a\u5728\u6846\u67b6\u521d\u59cb\u5316\u4e4b\u540e\u7acb\u523b\u8c03\u7528\uff0c\u8fd9\u6837\u6846\u67b6\u5c31\u80fd\u591f\u77e5\u9053\u5f53\u524d\u7684\u5ba2\u6237\u7aef\u652f\u6301\u54ea\u4e9b\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u5728\u4e00\u4e9b\u7279\u6b8a\u903b\u8f91\u6216\u5fc5\u8981\u7684\u60c5\u51b5\u4e0b\uff0c\u6709\u673a\u4f1a\u4e3a\u6846\u67b6\u672c\u8eab\u63d0\u4f9b\u53c2\u8003\u4fe1\u606f\u3002</p>
+<h4 id="\u53c2\u6570\u683c\u5f0f\u4ecb\u7ecd-1"><a href="#\u53c2\u6570\u683c\u5f0f\u4ecb\u7ecd-1" class="headerlink" title="\u53c2\u6570\u683c\u5f0f\u4ecb\u7ecd"></a>\u53c2\u6570\u683c\u5f0f\u4ecb\u7ecd</h4><ul>
+<li><code>components: Array</code>: \u63cf\u8ff0\u7ec4\u4ef6\u7684\u6570\u7ec4\uff0c\u6bcf\u4e00\u9879\u5305\u62ec\uff1a<ul>
+<li><code>type: string</code>: \u7ec4\u4ef6\u540d\u79f0\uff0c\u6bd4\u5982 <code>div</code>\u3002</li>
+<li><code>methods: string[]</code>: \u53ef\u9009\u9879\uff0c\u8be5\u7ec4\u4ef6\u652f\u6301\u7684\u65b9\u6cd5\u540d\u79f0\u5217\u8868\uff0c\u8fd9\u4e9b\u65b9\u6cd5\u53ef\u4ee5\u9075\u5faa Weex \u7684 native DOM APIs \u7684\u7ec4\u4ef6\u65b9\u6cd5\u8c03\u7528\u65b9\u5f0f\u3002</li>
+</ul>
+</li>
+<li><code>modules: Object</code>: \u63cf\u8ff0\u4e00\u7cfb\u5217\u6a21\u5757\u7684\u6563\u5217\u8868\uff0c\u6bcf\u4e00\u9879\u7684 key \u662f\u6a21\u5757\u540d\uff0c\u6bcf\u4e00\u9879\u7684\u503c\u662f\u4e00\u4e2a\u6570\u7ec4\uff0c\u6570\u7ec4\u91cc\u7684\u6bcf\u4e00\u9879\u63cf\u8ff0\u4e86\u4e00\u4e2a\u8be5\u6a21\u5757\u4e2d\u7684\u4e00\u4e2a\u65b9\u6cd5\uff0c\u8be5\u65b9\u6cd5\u7684\u4fe1\u606f\u5305\u62ec\uff1a<ul>
+<li><code>name: string</code>: \u65b9\u6cd5\u540d</li>
+<li><code>args: string[]</code>: \u53c2\u6570\u4e2a\u6570\u548c\u7c7b\u578b\u63cf\u8ff0</li>
+</ul>
+</li>
+</ul>
+<p>\u4f8b\u5982\uff1a</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">registerComponents([</div><div class="line"> { <span class="attr">type</span>: <span class="string">'web'</span>, <span class="attr">methods</span>: [<span class="string">'goBack'</span>, <span class="string">'goForward'</span>, <span class="string">'refresh'</span>]}</div><div class="line">])</div><div class="line"></div><div class="line">registerModules({</div><div class="line"> <span class="attr">event</span>: [</div><div class="line"> {<span class="attr">name</span>: <span class="string">'openURL'</span>, <span class="attr">args</span>: [<span class="string">'string'</span>]}</div><div class="line"> ]</div><div class="line">})</div></pre></td></tr></table></figure>
+<h3 id="\u591a\u5b9e\u4f8b\u751f\u547d\u5468\u671f\u7ba1\u7406"><a href="#\u591a\u5b9e\u4f8b\u751f\u547d\u5468\u671f\u7ba1\u7406" class="headerlink" title="\u591a\u5b9e\u4f8b\u751f\u547d\u5468\u671f\u7ba1\u7406"></a>\u591a\u5b9e\u4f8b\u751f\u547d\u5468\u671f\u7ba1\u7406</h3><ul>
+<li><code>createInstance(instanceId, code, config, data, env)</code></li>
+<li><code>refreshInstance(instanceId, data)</code></li>
+<li><code>destroyInstance(instanceId)</code></li>
+</ul>
+<p>\u6bcf\u4e2a Weex \u9875\u9762\u90fd\u6709\u88ab\u521b\u5efa\u3001\u88ab\u9500\u6bc1\u4e24\u4e2a\u5fc5\u7ecf\u9636\u6bb5\uff0c\u540c\u65f6\u5728 Weex \u9875\u9762\u8fd0\u884c\u8fc7\u7a0b\u4e2d\uff0cnative \u6709\u673a\u4f1a\u4e3b\u52a8\u5411 Weex \u9875\u9762\u53d1\u9001\u6d88\u606f\uff0c\u4e0d\u540c\u7684\u6846\u67b6\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u6846\u67b6\u7684\u8bbe\u8ba1\u5bf9\u8fd9\u6837\u7684\u6d88\u606f\u6709\u81ea\u5df1\u7684\u7406\u89e3\u548c\u8bbe\u8ba1\u5b9e\u73b0\u3002</p>
+<h4 id="\u53c2\u6570\u683c\u5f0f\u4ecb\u7ecd-2"><a href="#\u53c2\u6570\u683c\u5f0f\u4ecb\u7ecd-2" class="headerlink" title="\u53c2\u6570\u683c\u5f0f\u4ecb\u7ecd"></a>\u53c2\u6570\u683c\u5f0f\u4ecb\u7ecd</h4><ul>
+<li><code>instanceId: string</code>: \u8be5 Weex \u9875\u9762\u7684\u552f\u4e00 id\uff0c\u7531 native \u4ea7\u751f\u3002</li>
+<li><code>code: string</code>: \u8be5 Weex \u9875\u9762\u7684 JS bundle \u7684\u4ee3\u7801\uff0c\u901a\u8fc7 native \u4f20\u5165\u3002</li>
+<li><code>config: Object?</code>: \u8be5 Weex \u9875\u9762\u7684\u914d\u7f6e\u4fe1\u606f\uff0c\u6bd4\u5982\u4ee3\u8868\u8be5 bundle \u5730\u5740\u7684 <code>bundleUrl</code>\uff0c\u7531 native \u914d\u7f6e\u4ea7\u751f\uff0c\u548c JS bundle \u672c\u8eab\u7684\u5185\u5bb9\u65e0\u5173\u3002</li>
+<li><code>data: Object?</code>: Native \u6709\u673a\u4f1a\u5728\u521b\u5efa\u4e00\u4e2a Weex \u9875\u9762\u7684\u65f6\u5019\uff0c\u4f20\u5165\u4e00\u4efd\u5916\u90e8\u6570\u636e\uff0cJS \u6846\u67b6\u4e5f\u6709\u673a\u4f1a\u63a5\u6b64\u673a\u4f1a\u4e3a\u76f8\u540c\u7684 JS bundle \u914d\u5408\u4e0d\u540c\u7684 <code>data</code> \u751f\u6210\u4e0d\u540c\u7684\u9875\u9762\u5185\u5bb9\u3002</li>
+<li><code>env: Object?</code>: \u5f53\u524d Weex \u9875\u9762\u7684\u76f8\u5173\u73af\u5883\u4fe1\u606f\uff0c\u5404\u5b57\u6bb5\u7684\u542b\u4e49\uff1a<ul>
+<li><code>info: Object</code>: \u6846\u67b6 info \u4fe1\u606f\uff0c\u8be6\u89c1\u4e4b\u540e\u7684 \u201cJS Bundle \u683c\u5f0f\u8981\u6c42\u201d\u3002</li>
+<li><code>config: Object</code>: \u7b49\u540c\u8be5\u65b9\u6cd5\u7684\u7b2c\u4e09\u4e2a\u53c2\u6570 <code>config</code>\u3002</li>
+<li><code>callbacks: CallbackManager</code>: \u8be5 Weex \u9875\u9762\u552f\u4e00\u7684 <code>CallbackManager</code> \u5b9e\u4f8b\u3002</li>
+<li><code>created: number</code>: \u8be5 Weex \u9875\u9762\u7684\u521b\u5efa\u65f6\u95f4\u6beb\u79d2\u6570\u3002</li>
+<li><code>framework: string</code>: \u8be5 Weex \u9875\u9762\u57fa\u4e8e\u7684\u6846\u67b6\u540d\uff0c\u7b49\u540c\u4e8e <code>info.framework</code>\u3002</li>
+</ul>
+</li>
+</ul>
+<h3 id="Native-\u901a\u4fe1"><a href="#Native-\u901a\u4fe1" class="headerlink" title="Native \u901a\u4fe1"></a>Native \u901a\u4fe1</h3><ul>
+<li><code>receiveTasks(instanceId, tasks)</code></li>
+</ul>
+<p>Native \u9664\u4e86\u901a\u8fc7 <code>refreshInstance</code> \u65b9\u6cd5\u5411 JS \u6846\u67b6\u5c42\u53d1\u9001\u6d88\u606f\u4e4b\u5916\uff0c\u66f4\u591a\u7684\u4f1a\u901a\u8fc7 <code>receiveTasks</code> \u53d1\u9001\u7528\u6237\u4e8b\u4ef6\u6216\u65b9\u6cd5\u56de\u8c03\u7ed9 JS \u6846\u67b6\u3002</p>
+<p>\u6bd4\u5982\u7528\u6237\u70b9\u51fb\u4e86\u4e00\u4e2a\u6309\u94ae\uff0cnative \u5c31\u4f1a\u53d1\u9001\u4e00\u4e2a <code>fireEvent</code> \u7c7b\u578b\u7684\u4efb\u52a1\u7ed9 JS \u6846\u67b6\uff0c\u7136\u540e JS \u6846\u67b6\u518d\u5904\u7406\u76f8\u5e94\u7684\u4e8b\u4ef6\u903b\u8f91\u3002\u8fd9\u90e8\u5206\u5de5\u4f5c\u673a\u5236\u548c native DOM \u63a5\u53e3\u4e2d\u7684 <code>addEvent</code> \u7684\u8bbe\u8ba1\u6709\u5173\u3002</p>
+<p>\u518d\u6bd4\u5982\u7528\u6237\u53d1\u8d77\u4e86\u4e00\u4e2a <code>fetch</code> \u7f51\u7edc\u8bf7\u6c42\uff0c\u5f53\u8bf7\u6c42\u5728 native \u7aef\u5b8c\u6210\u65f6\uff0c\u4f1a\u4ee5\u4e00\u4e2a <code>callback</code> \u7c7b\u578b\u7684\u4efb\u52a1\u53d1\u7ed9 JS \u6846\u67b6\u3002\u7531\u4e8e native \u65e0\u6cd5\u4f20\u9012 JavaScript \u4e2d\u7684 function\uff0c\u6240\u4ee5\u5b9e\u9645\u4e0a\u77e5\u4f1a\u53d1\u9001\u4e00\u4e2a <code>callbackId</code> \u7ed9 JS \u6846\u67b6\u3002\u8fd9\u90e8\u5206\u5de5\u4f5c\u673a\u5236\u548c\u4e4b\u524d\u51fa\u73b0\u8fc7\u7684 <code>CallbackManager</code> \u7684\u8bbe\u8ba1\u6709\u5173\u3002</p>
+<h3 id="\u8f85\u52a9\u65b9\u6cd5"><a href="#\u8f85\u52a9\u65b9\u6cd5" class="headerlink" title="\u8f85\u52a9\u65b9\u6cd5"></a>\u8f85\u52a9\u65b9\u6cd5</h3><ul>
+<li><code>getRoot(instanceId): JSON</code></li>
+</ul>
+<p>\u8be5\u65b9\u6cd5\u53ef\u4ee5\u8fd4\u56de\u6587\u6863\u4e3b\u4f53\u7ed3\u70b9\u7684\u5b8c\u6574 JSON \u63cf\u8ff0\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u4ee5\u6b64\u67e5\u770b\u5230\u5b8c\u6574\u7684 native DOM \u6811\uff0c\u5177\u4f53\u8fd4\u56de\u503c\u7684\u683c\u5f0f\u548c native DOM \u63a5\u53e3\u4e2d\u7684 <code>toJSON()</code> \u65b9\u6cd5\u8fd4\u56de\u503c\u683c\u5f0f\u4e00\u81f4\u3002\u6b64\u529f\u80fd\u591a\u7528\u4f5c\u5f00\u53d1\u8005\u5de5\u5177\u6269\u5c55\u3002</p>
+<h2 id="\u5728-WeexSDK-\u4e2d\u914d\u7f6e-JS-Framework"><a href="#\u5728-WeexSDK-\u4e2d\u914d\u7f6e-JS-Framework" class="headerlink" title="\u5728 WeexSDK \u4e2d\u914d\u7f6e JS Framework"></a>\u5728 WeexSDK \u4e2d\u914d\u7f6e JS Framework</h2><h3 id="\u51c6\u5907\u597d\u4f60\u7684-JS-Framework-\u4ee3\u7801"><a href="#\u51c6\u5907\u597d\u4f60\u7684-JS-Framework-\u4ee3\u7801" class="headerlink" title="\u51c6\u5907\u597d\u4f60\u7684 JS Framework \u4ee3\u7801"></a>\u51c6\u5907\u597d\u4f60\u7684 JS Framework \u4ee3\u7801</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="comment">// your-own-js-framework.js</span></div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">init</span> (<span class="params">config</span>) </span>{ ... }</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">registerComponents</span> (<span class="params">componen
ts</span>) </span>{ ... }</div><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">registerModules</span> (<span class="params">modules</span>) </span>{ ... }</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">createInstance</span> (<span class="params">id, code, config, data, env</span>) </span>{ ... }</div><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">destroyInstance</span> (<span class="params">id</span>) </span>{ ... }</div><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">refreshInstance</span> (<span class="params">id, data</span>) </span>{ ... }</div><div class="l
ine"></div><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">recieveTasks</span> (<span class="params">id, tasks</span>) </span>{ ... }</div><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">getRoot</span> (<span class="params">id</span>) </span>{ ... }</div></pre></td></tr></table></figure>
+<h3 id="\u6ce8\u518c\u4e00\u4e2a-JS-Framework"><a href="#\u6ce8\u518c\u4e00\u4e2a-JS-Framework" class="headerlink" title="\u6ce8\u518c\u4e00\u4e2a JS Framework"></a>\u6ce8\u518c\u4e00\u4e2a JS Framework</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">import</span> * <span class="keyword">as</span> Vue <span class="keyword">from</span> <span class="string">'...'</span></div><div class="line"><span class="keyword">import</span> * <span class="keyword">as</span> React <span class="keyword">from</span> <span class="string">'...'</span></div><div class="line"><span class="keyword">import</span> * <span class="keyword">as</span> Angular <span class="keyword">from</span> <span class="string">'...'</span></div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> { Vue, React, Angular };</div></pre></td></tr></table></figure>
+<p>\u7136\u540e\u6253\u5305 JS runtime\uff0c\u96c6\u6210\u5230 WeexSDK \u4e2d\u3002</p>
+<h3 id="JS-Bundle-\u683c\u5f0f\u8981\u6c42"><a href="#JS-Bundle-\u683c\u5f0f\u8981\u6c42" class="headerlink" title="JS Bundle \u683c\u5f0f\u8981\u6c42"></a>JS Bundle \u683c\u5f0f\u8981\u6c42</h3><p><strong>\u6846\u67b6 info</strong></p>
+<p>\u4f60\u9700\u8981\u4fdd\u969c\u57fa\u4e8e\u8be5 JS Framework \u7684 JS Bundle \u5728\u6587\u4ef6\u5f00\u5934\u5e26\u6709\u5982\u4e0b\u683c\u5f0f\u7684\u6ce8\u91ca\uff0c\u6211\u4eec\u79f0\u5176\u4e3a\u6846\u67b6 info\uff1a</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="comment">// { "framework": "Vue" }</span></div><div class="line">...</div></pre></td></tr></table></figure>
+<p>\u8fd9\u6837 Weex JS \u5f15\u64ce\u5c31\u4f1a\u8bc6\u522b\u51fa\u8fd9\u4e2a JS bundle \u9700\u8981\u7528 Vue \u6846\u67b6\u6765\u89e3\u6790\u3002\u5e76\u5206\u53d1\u7ed9 Vue \u6846\u67b6\u5904\u7406\u3002\u540c\u7406\uff0cWeex \u652f\u6301\u540c\u65f6\u591a\u79cd\u6846\u67b6\u5728\u4e00\u4e2a\u79fb\u52a8\u5e94\u7528\u4e2d\u5171\u5b58\u5e76\u5404\u81ea\u89e3\u6790\u57fa\u4e8e\u4e0d\u540c\u6846\u67b6\u7684 JS bundle\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/advanced/extend-jsfm.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[16/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/web-standards.html
----------------------------------------------------------------------
diff --git a/content/cn/references/web-standards.html b/content/cn/references/web-standards.html
new file mode 100644
index 0000000..d903798
--- /dev/null
+++ b/content/cn/references/web-standards.html
@@ -0,0 +1,3794 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Web \u6807\u51c6 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Weex \u4e2d\u7684 Web \u6807\u51c6HTMLrefs: https://www.advancedwebranking.com/html/ 2016-12-11
+Overview
+
+
+percentage
+name
+supported
+
+
+
+
+98.1%
+&lt;head&gt;
+-
+
+
+97.9%
+&lt;body&gt;
+-
+
+
+97.9%
+&lt;html&gt;
+-
+
+
+97%
+&lt;title&">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Web \u6807\u51c6">
+<meta property="og:url" content="https://weex.apache.org/cn/references/web-standards.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Weex \u4e2d\u7684 Web \u6807\u51c6HTMLrefs: https://www.advancedwebranking.com/html/ 2016-12-11
+Overview
+
+
+percentage
+name
+supported
+
+
+
+
+98.1%
+&lt;head&gt;
+-
+
+
+97.9%
+&lt;body&gt;
+-
+
+
+97.9%
+&lt;html&gt;
+-
+
+
+97%
+&lt;title&">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.918Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Web \u6807\u51c6">
+<meta name="twitter:description" content="Weex \u4e2d\u7684 Web \u6807\u51c6HTMLrefs: https://www.advancedwebranking.com/html/ 2016-12-11
+Overview
+
+
+percentage
+name
+supported
+
+
+
+
+98.1%
+&lt;head&gt;
+-
+
+
+97.9%
+&lt;body&gt;
+-
+
+
+97.9%
+&lt;html&gt;
+-
+
+
+97%
+&lt;title&">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link current ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link current ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Web \u6807\u51c6
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.918Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Weex-\u4e2d\u7684-Web-\u6807\u51c6"><a href="#Weex-\u4e2d\u7684-Web-\u6807\u51c6" class="headerlink" title="Weex \u4e2d\u7684 Web \u6807\u51c6"></a>Weex \u4e2d\u7684 Web \u6807\u51c6</h1><h2 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h2><p>refs: <a href="https://www.advancedwebranking.com/html/" target="_blank" rel="external">https://www.advancedwebranking.com/html/</a> 2016-12-11</p>
+<h3 id="Overview"><a href="#Overview" class="headerlink" title="Overview"></a>Overview</h3><table>
+<thead>
+<tr>
+<th>percentage</th>
+<th>name</th>
+<th>supported</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>98.1%</td>
+<td><code><head></code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>97.9%</td>
+<td><code><body></code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>97.9%</td>
+<td><code><html></code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>97%</td>
+<td><code><title></code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>93.9%</td>
+<td><code><meta></code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>89.9%</td>
+<td><code><div></code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>89.6%</td>
+<td><code><a></code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>88.5%</td>
+<td><code><script></code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>86.5%</td>
+<td><code><link></code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>86.3%</td>
+<td><code><img></code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>81.5%</td>
+<td><code><p></code></td>
+<td>- (can be customized)</td>
+</tr>
+<tr>
+<td>75.6%</td>
+<td><code><span></code></td>
+<td>- (can be customized)</td>
+</tr>
+<tr>
+<td>73.8%</td>
+<td><code><li></code></td>
+<td>- (can be customized)</td>
+</tr>
+<tr>
+<td>73.7%</td>
+<td><code><ul></code></td>
+<td>- (can be customized)</td>
+</tr>
+<tr>
+<td>70.3%</td>
+<td><code><br></code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>60.4%</td>
+<td><code><style></code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>55.8%</td>
+<td><code><h1></code></td>
+<td>- (can be customized)</td>
+</tr>
+<tr>
+<td>52.7%</td>
+<td><code><h2></code></td>
+<td>- (can be customized)</td>
+</tr>
+<tr>
+<td>48.4%</td>
+<td><code><input></code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>46.9%</td>
+<td><code><form></code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>44.3%</td>
+<td><code><strong></code></td>
+<td>- (can be customized)</td>
+</tr>
+<tr>
+<td>43.1%</td>
+<td><code><h3></code></td>
+<td>- (can be customized)</td>
+</tr>
+<tr>
+<td>30.9%</td>
+<td><code><table></code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>30.3%</td>
+<td><code><tr></code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>30.2%</td>
+<td><code><td></code></td>
+<td>\u2715</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Forms"><a href="#Forms" class="headerlink" title="Forms"></a>Forms</h3><table>
+<thead>
+<tr>
+<th>percentage</th>
+<th>name</th>
+<th>supported</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>49.5%</td>
+<td><code><option></code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>30.2%</td>
+<td><code><input></code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>16.6%</td>
+<td>> <code>[type="hidden"]</code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>8%</td>
+<td>> <code>[type="text"]</code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>4.2%</td>
+<td>> <code>[type="submit"]</code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>2%</td>
+<td>> <code>[type="checkbox"]</code></td>
+<td>- (<code><switch></code>)</td>
+</tr>
+<tr>
+<td>1.2%</td>
+<td>> <code>[type="email"]</code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>1.1%</td>
+<td>> <code>[type="radio"]</code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.9%</td>
+<td>> <code>[type="image"]</code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>0.8%</td>
+<td>> <code>[type="button"]</code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>0.6%</td>
+<td>> <code>[type="search"]</code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.6%</td>
+<td>> <code>[type="password"]</code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>0.1%</td>
+<td>> <code>[type="tel"]</code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>0.1%</td>
+<td>> <code>[type="number"]</code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>0%</td>
+<td>> <code>[type="reset"]</code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>0%</td>
+<td>> <code>[type="file"]</code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0%</td>
+<td>> <code>[type="date"]</code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>0%</td>
+<td>> <code>[type="url"]</code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>0%</td>
+<td>> <code>[type="range"]</code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0%</td>
+<td>> <code>[type="color"]</code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0%</td>
+<td>> <code>[type="time"]</code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>0%</td>
+<td>> <code>[type="datetime-local"]</code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>7.2%</td>
+<td><code><label></code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>6.1%</td>
+<td><code><form></code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>3.7%</td>
+<td><code><button></code></td>
+<td>- (can be customized)</td>
+</tr>
+<tr>
+<td>2.6%</td>
+<td>> <code>[type="button"]</code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>1.3%</td>
+<td>> <code>[type="submit"]</code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>0%</td>
+<td>> <code>[type="reset"]</code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>1.9%</td>
+<td><code><select></code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.7%</td>
+<td><code><textarea></code></td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>0.5%</td>
+<td><code><fieldset></code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>0.1%</td>
+<td><code><optgroup></code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1%</td>
+<td><code><legend></code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>0%</td>
+<td><code><progress></code></td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0%</td>
+<td><code><datalist></code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>0%</td>
+<td><code><output></code></td>
+<td>-</td>
+</tr>
+<tr>
+<td>0%</td>
+<td><code><meter></code></td>
+<td>-</td>
+</tr>
+</tbody>
+</table>
+<h2 id="CSS-Properties"><a href="#CSS-Properties" class="headerlink" title="CSS Properties"></a>CSS Properties</h2><p>refs: <a href="https://www.chromestatus.com/metrics/feature/popularity" target="_blank" rel="external">https://www.chromestatus.com/metrics/feature/popularity</a> 2016-12-11</p>
+<table>
+<thead>
+<tr>
+<th>percentage</th>
+<th>name</th>
+<th>supported</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>90.5115%</td>
+<td>display</td>
+<td>\u2715 <code>flex</code> only</td>
+</tr>
+<tr>
+<td>89.8243%</td>
+<td>margin</td>
+<td>\u2713 (not support combo)</td>
+</tr>
+<tr>
+<td>88.7012%</td>
+<td>width</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>88.6468%</td>
+<td>overflow</td>
+<td>\u2713 iOS only, <code>hidden</code> only for Android</td>
+</tr>
+<tr>
+<td>88.6432%</td>
+<td>background-color</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>88.0803%</td>
+<td>height</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>87.7648%</td>
+<td>font-size</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>87.3837%</td>
+<td>padding</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>87.2721%</td>
+<td>color</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>86.9788%</td>
+<td>text-align</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>86.6841%</td>
+<td>position</td>
+<td>\u2713 <code>relative</code> by default, <code>static</code> not supported</td>
+</tr>
+<tr>
+<td>86.6039%</td>
+<td>font-family</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>86.5943%</td>
+<td>font-weight</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>85.0072%</td>
+<td>opacity</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>80.6911%</td>
+<td>max-width</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>79.4476%</td>
+<td>box-sizing</td>
+<td>\u2715 <code>border-box</code> only</td>
+</tr>
+<tr>
+<td>75.7623%</td>
+<td>max-height</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>74.9939%</td>
+<td>webkit-user-select</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>57.0292%</td>
+<td>align-items</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>56.8182%</td>
+<td>justify-content</td>
+<td>\u2713 <code>space-around</code> not supported well in browser</td>
+</tr>
+<tr>
+<td>50.5941%</td>
+<td>flex-direction</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>48.5052%</td>
+<td>border</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>47.5161%</td>
+<td>top</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>46.9136%</td>
+<td>background</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>46.1552%</td>
+<td>cursor</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>46.1443%</td>
+<td>margin-left</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>46.0956%</td>
+<td>left</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>46.0848%</td>
+<td>text-decoration</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>45.9575%</td>
+<td>float</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>45.8391%</td>
+<td>border-bottom</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>45.7639%</td>
+<td>padding-left</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>45.7128%</td>
+<td>margin-top</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>45.7013%</td>
+<td>line-height</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>45.5836%</td>
+<td>background-image</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>45.0837%</td>
+<td>z-index</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>45.0649%</td>
+<td>right</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>45.0516%</td>
+<td>margin-bottom</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>45.0459%</td>
+<td>white-space</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>44.8710%</td>
+<td>margin-right</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>44.8476%</td>
+<td>vertical-align</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>44.6306%</td>
+<td>padding-top</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>44.1466%</td>
+<td>border-radius</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>44.0136%</td>
+<td>border-top</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>43.9815%</td>
+<td>padding-bottom</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>43.9392%</td>
+<td>padding-right</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>43.8539%</td>
+<td>visibility</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>43.4306%</td>
+<td>background-position</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>43.4098%</td>
+<td>background-repeat</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>43.0391%</td>
+<td>clear</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>42.9100%</td>
+<td>bottom</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>42.2092%</td>
+<td>content</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>42.0690%</td>
+<td>box-shadow</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>41.9004%</td>
+<td>border-color</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>41.7341%</td>
+<td>outline</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>41.4297%</td>
+<td>border-right</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>41.2605%</td>
+<td>border-left</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>41.1127%</td>
+<td>min-height</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>41.0736%</td>
+<td>font-style</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>41.0523%</td>
+<td>min-width</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>40.4298%</td>
+<td>list-style</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>39.7341%</td>
+<td>font</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>38.8999%</td>
+<td>background-size</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>38.7811%</td>
+<td>border-width</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>38.7718%</td>
+<td>border-collapse</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>37.8110%</td>
+<td>border-style</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>37.4962%</td>
+<td>text-overflow</td>
+<td>\u2713 must work with <code>lines</code></td>
+</tr>
+<tr>
+<td>37.3471%</td>
+<td>text-transform</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>37.2154%</td>
+<td>transition</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>36.5155%</td>
+<td>overflow-y</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>36.3025%</td>
+<td>transform</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>36.2488%</td>
+<td>text-indent</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>35.5075%</td>
+<td>text-shadow</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>34.7607%</td>
+<td>webkit-appearance</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>34.1925%</td>
+<td>list-style-type</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>34.0238%</td>
+<td>border-spacing</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>33.6664%</td>
+<td>word-wrap</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>31.9961%</td>
+<td>overflow-x</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>31.9922%</td>
+<td>zoom</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>31.2495%</td>
+<td>border-bottom-left-radius</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>31.1306%</td>
+<td>pointer-events</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>31.1229%</td>
+<td>border-top-left-radius</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>30.2131%</td>
+<td>border-bottom-color</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>29.9608%</td>
+<td>border-top-color</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>29.4297%</td>
+<td>border-bottom-right-radius</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>29.2668%</td>
+<td>border-top-right-radius</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>28.6489%</td>
+<td>letter-spacing</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>27.8327%</td>
+<td>animation</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>26.6738%</td>
+<td>border-right-width</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>26.0169%</td>
+<td>src</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>25.2661%</td>
+<td>clip</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>25.2512%</td>
+<td>webkit-font-smoothing</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>25.1971%</td>
+<td>border-bottom-width</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>25.0246%</td>
+<td>border-right-color</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>24.7790%</td>
+<td>direction</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>24.4094%</td>
+<td>webkit-tap-highlight-color</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>23.9751%</td>
+<td>border-left-color</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>23.9321%</td>
+<td>border-top-width</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>23.7902%</td>
+<td>fill</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>23.2617%</td>
+<td>border-left-width</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>22.7278%</td>
+<td>table-layout</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>21.5766%</td>
+<td>word-break</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>20.4319%</td>
+<td>background-clip</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>19.3198%</td>
+<td>transform-origin</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>18.9233%</td>
+<td>filter</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>17.7879%</td>
+<td>resize</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>16.2501%</td>
+<td>flex</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>15.1656%</td>
+<td>font-variant</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>14.9181%</td>
+<td>text-rendering</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>14.7125%</td>
+<td>webkit-filter</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>14.5263%</td>
+<td>transition-duration</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>14.3966%</td>
+<td>transition-property</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>14.2124%</td>
+<td>webkit-box-orient</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>13.5432%</td>
+<td>outline-offset</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>12.9300%</td>
+<td>transition-timing-function</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>12.2788%</td>
+<td>unicode-range</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>12.0880%</td>
+<td>word-spacing</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>11.9124%</td>
+<td>quotes</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>11.6800%</td>
+<td>border-bottom-style</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>11.4263%</td>
+<td>webkit-background-clip</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>11.0070%</td>
+<td>flex-grow</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>10.5925%</td>
+<td>backface-visibility</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>10.4417%</td>
+<td>animation-name</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>10.4302%</td>
+<td>stroke</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>10.4144%</td>
+<td>animation-duration</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>10.2804%</td>
+<td>touch-action</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>9.9663%</td>
+<td>list-style-position</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>9.8662%</td>
+<td>order</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>9.7770%</td>
+<td>outline-width</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>9.7504%</td>
+<td>transition-delay</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>9.4689%</td>
+<td>border-top-style</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>9.3474%</td>
+<td>webkit-box-pack</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>9.3078%</td>
+<td>webkit-box-align</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>9.2375%</td>
+<td>page-break-inside</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>9.1898%</td>
+<td>webkit-line-clamp</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>8.9350%</td>
+<td>list-style-image</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>8.8339%</td>
+<td>page-break-after</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>8.5735%</td>
+<td>speak</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>8.4754%</td>
+<td>unicode-bidi</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>8.4307%</td>
+<td>animation-timing-function</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>8.1464%</td>
+<td>webkit-box-flex</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>8.0048%</td>
+<td>orphans</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>7.9947%</td>
+<td>widows</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>7.6671%</td>
+<td>flex-wrap</td>
+<td>\u2713 not supported well in browser</td>
+</tr>
+<tr>
+<td>7.5756%</td>
+<td>animation-fill-mode</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>7.4163%</td>
+<td>animation-delay</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>7.3284%</td>
+<td>border-left-style</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>7.1586%</td>
+<td>outline-color</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>6.9102%</td>
+<td>flex-shrink</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>6.7754%</td>
+<td>perspective</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>6.7748%</td>
+<td>border-right-style</td>
+<td>\u2713</td>
+</tr>
+<tr>
+<td>6.4619%</td>
+<td>outline-style</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>6.0382%</td>
+<td>animation-iteration-count</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>5.9838%</td>
+<td>background-origin</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>5.9714%</td>
+<td>fill-opacity</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>5.9357%</td>
+<td>will-change</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>5.3740%</td>
+<td>stroke-width</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>5.3172%</td>
+<td>transform-style</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>5.2608%</td>
+<td>overflow-wrap</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>5.1730%</td>
+<td>background-attachment</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>4.9039%</td>
+<td>counter-increment</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>4.5950%</td>
+<td>counter-reset</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>4.5031%</td>
+<td>align-self</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>4.4109%</td>
+<td>webkit-box-ordinal-group</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>4.4046%</td>
+<td>webkit-animation-direction</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>3.7598%</td>
+<td>background-position-x</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>3.6867%</td>
+<td>border-image</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>3.6601%</td>
+<td>background-position-y</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>3.5749%</td>
+<td>webkit-user-drag</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>3.3376%</td>
+<td>flex-basis</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>3.1840%</td>
+<td>align-content</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>3.1832%</td>
+<td>flex-flow</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>3.1774%</td>
+<td>image-rendering</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>3.0879%</td>
+<td>webkit-margin-start</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.9551%</td>
+<td>font-stretch</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.8934%</td>
+<td>empty-cells</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.7619%</td>
+<td>webkit-margin-after</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.7220%</td>
+<td>perspective-origin</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.6125%</td>
+<td>webkit-margin-end</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.6089%</td>
+<td>column-count</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.5880%</td>
+<td>webkit-text-fill-color</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.5466%</td>
+<td>webkit-box-direction</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.4618%</td>
+<td>font-feature-settings</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.3959%</td>
+<td>webkit-mask-image</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.3431%</td>
+<td>webkit-padding-end</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.2555%</td>
+<td>stroke-dasharray</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.1788%</td>
+<td>user-select</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.1679%</td>
+<td>object-fit</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.0643%</td>
+<td>column-gap</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.0459%</td>
+<td>text-size-adjust</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2.0253%</td>
+<td>caption-side</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.9695%</td>
+<td>stroke-dashoffset</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.7923%</td>
+<td>stroke-linecap</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.7861%</td>
+<td>animation-direction</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.7559%</td>
+<td>webkit-font-feature-settings</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.7404%</td>
+<td>stroke-opacity</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.5926%</td>
+<td>stroke-miterlimit</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.5786%</td>
+<td>fill-rule</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.4859%</td>
+<td>webkit-user-modify</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.3439%</td>
+<td>webkit-border-image</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.3091%</td>
+<td>animation-play-state</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.2676%</td>
+<td>contain</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.2029%</td>
+<td>webkit-padding-start</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.1840%</td>
+<td>webkit-margin-before</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.1269%</td>
+<td>page-break-before</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.1222%</td>
+<td>webkit-margin-top-collapse</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.0418%</td>
+<td>columns</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>1.0354%</td>
+<td>webkit-mask-size</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.9650%</td>
+<td>border-image-slice</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.9425%</td>
+<td>stop-color</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.9408%</td>
+<td>webkit-mask-repeat</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.9125%</td>
+<td>webkit-box-lines</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.8804%</td>
+<td>webkit-column-break-inside</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.8752%</td>
+<td>size</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.8334%</td>
+<td>font-kerning</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.8034%</td>
+<td>stroke-linejoin</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.7869%</td>
+<td>tab-size</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.7689%</td>
+<td>break-inside</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.7589%</td>
+<td>webkit-text-stroke-width</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.7353%</td>
+<td>column-width</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.6924%</td>
+<td>webkit-mask-position</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.6869%</td>
+<td>border-image-width</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.6323%</td>
+<td>border-image-repeat</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.5994%</td>
+<td>border-image-outset</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.5885%</td>
+<td>all</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.5859%</td>
+<td>webkit-text-stroke-color</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.5435%</td>
+<td>webkit-print-color-adjust</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.5420%</td>
+<td>webkit-text-stroke</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.5195%</td>
+<td>writing-mode</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.4741%</td>
+<td>clip-rule</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.4685%</td>
+<td>webkit-clip-path</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.4578%</td>
+<td>text-anchor</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.4535%</td>
+<td>shape-rendering</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.4526%</td>
+<td>webkit-column-break-before</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.4494%</td>
+<td>clip-path</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.4452%</td>
+<td>webkit-mask</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.4393%</td>
+<td>mix-blend-mode</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.4166%</td>
+<td>text-align-last</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.4033%</td>
+<td>column-rule</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.3990%</td>
+<td>webkit-mask-box-image</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.3989%</td>
+<td>font-variant-ligatures</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.3881%</td>
+<td>column-fill</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.3865%</td>
+<td>webkit-line-break</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.3857%</td>
+<td>border-image-source</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.3528%</td>
+<td>stop-opacity</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.3075%</td>
+<td>webkit-perspective-origin-y</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.3054%</td>
+<td>webkit-perspective-origin-x</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.2994%</td>
+<td>webkit-writing-mode</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.2717%</td>
+<td>dominant-baseline</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.2634%</td>
+<td>column-rule-color</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.2586%</td>
+<td>webkit-box-decoration-break</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.2467%</td>
+<td>webkit-text-security</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.2374%</td>
+<td>webkit-background-origin</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.2146%</td>
+<td>font-variant-caps</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.2005%</td>
+<td>column-rule-style</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1976%</td>
+<td>shape-outside</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1971%</td>
+<td>webkit-padding-before</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1896%</td>
+<td>break-after</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1782%</td>
+<td>webkit-padding-after</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1774%</td>
+<td>text-orientation</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1747%</td>
+<td>webkit-text-orientation</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1655%</td>
+<td>mask</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1626%</td>
+<td>alignment-baseline</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1572%</td>
+<td>page</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1530%</td>
+<td>webkit-column-break-after</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1521%</td>
+<td>webkit-box-reflect</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1504%</td>
+<td>webkit-text-emphasis-color</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1499%</td>
+<td>object-position</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1470%</td>
+<td>break-before</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1455%</td>
+<td>webkit-margin-collapse</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1452%</td>
+<td>baseline-shift</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1451%</td>
+<td>hyphens</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1309%</td>
+<td>rx</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1304%</td>
+<td>ry</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1256%</td>
+<td>background-blend-mode</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1136%</td>
+<td>font-variant-numeric</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1135%</td>
+<td>background-repeat-x</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1123%</td>
+<td>background-repeat-y</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1086%</td>
+<td>webkit-text-emphasis</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1058%</td>
+<td>webkit-rtl-ordering</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1040%</td>
+<td>column-rule-width</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1036%</td>
+<td>isolation</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.1002%</td>
+<td>webkit-highlight</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0843%</td>
+<td>webkit-transform-origin-y</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0786%</td>
+<td>webkit-transform-origin-x</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0770%</td>
+<td>webkit-app-region</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0685%</td>
+<td>column-span</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0653%</td>
+<td>r</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0611%</td>
+<td>y</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0602%</td>
+<td>x</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0555%</td>
+<td>webkit-border-vertical-spacing</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0545%</td>
+<td>webkit-border-horizontal-spacing</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0542%</td>
+<td>webkit-border-start-width</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0450%</td>
+<td>webkit-border-start-color</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0424%</td>
+<td>webkit-border-after-width</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0424%</td>
+<td>webkit-border-before-width</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0423%</td>
+<td>webkit-border-end-width</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0351%</td>
+<td>marker</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0349%</td>
+<td>webkit-border-end-color</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0347%</td>
+<td>webkit-border-after-color</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0347%</td>
+<td>webkit-border-before-color</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0342%</td>
+<td>mask-type</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0328%</td>
+<td>color-interpolation-filters</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0325%</td>
+<td>webkit-border-end</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0319%</td>
+<td>vector-effect</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>0.0307%</td>
+<td>color-rendering</td>
+<td>\u2715</td>
+</tr>
+</tbody>
+</table>
+<h2 id="CSS-Units-and-Values"><a href="#CSS-Units-and-Values" class="headerlink" title="CSS Units and Values"></a>CSS Units and Values</h2><p>refs: <a href="https://drafts.csswg.org/css-values/" target="_blank" rel="external">https://drafts.csswg.org/css-values/</a> 2016-12-11</p>
+<h3 id="Textual"><a href="#Textual" class="headerlink" title="Textual"></a>Textual</h3><ul>
+<li>pre-defined keywords<ul>
+<li>CSS-wide keywords<ul>
+<li><code>initial</code></li>
+<li><code>inherit</code></li>
+<li><code>unset</code></li>
+</ul>
+</li>
+</ul>
+</li>
+<li><code><custom-ident></code>: author-defined identifiers \u2713</li>
+<li><code><string></code>: quoted strings (<code>"xxx"</code>)</li>
+<li><code><url></code>: resourec locators (<code>url()</code>)</li>
+</ul>
+<h3 id="Numeric"><a href="#Numeric" class="headerlink" title="Numeric"></a>Numeric</h3><ul>
+<li><code><integer></code> \u2713</li>
+<li><code><number></code> \u2713</li>
+<li><code><percentage></code></li>
+</ul>
+<h3 id="Length-lt-length-gt"><a href="#Length-lt-length-gt" class="headerlink" title="Length <length>"></a>Length <code><length></code></h3><ul>
+<li>relative<ul>
+<li>font-relative<ul>
+<li><code>em</code></li>
+<li><code>ex</code></li>
+<li><code>ch</code></li>
+<li><code>ic</code></li>
+<li><code>rem</code> \u2713\U0001f527</li>
+</ul>
+</li>
+<li>viewport-percentage<ul>
+<li><code>vw</code> \u2713\U0001f527</li>
+<li><code>vh</code> \u2713\U0001f527</li>
+<li><code>vi</code></li>
+<li><code>vb</code></li>
+<li><code>vmin</code> \u2713\U0001f527</li>
+<li><code>vmax</code> \u2713\U0001f527</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>absolute<ul>
+<li><code>cm</code> \u2713\U0001f527</li>
+<li><code>mm</code> \u2713\U0001f527</li>
+<li><code>Q</code> \u2713\U0001f527</li>
+<li><code>in</code> \u2713\U0001f527</li>
+<li><code>pc</code> \u2713\U0001f527</li>
+<li><code>pt</code> \u2713\U0001f527</li>
+<li><code>px</code> autofixed to number</li>
+</ul>
+</li>
+</ul>
+<h3 id="Quantities"><a href="#Quantities" class="headerlink" title="Quantities"></a>Quantities</h3><ul>
+<li><code><angle></code><ul>
+<li><code>deg</code></li>
+<li><code>grad</code></li>
+<li><code>rad</code></li>
+<li><code>turn</code></li>
+</ul>
+</li>
+<li><code><time></code><ul>
+<li><code>s</code></li>
+<li><code>ms</code></li>
+</ul>
+</li>
+<li><code><frequency></code><ul>
+<li><code>Hz</code></li>
+<li><code>kHz</code></li>
+</ul>
+</li>
+<li><code><resolution></code><ul>
+<li><code>dpi</code></li>
+<li><code>dpcm</code></li>
+<li><code>dppx</code></li>
+</ul>
+</li>
+</ul>
+<h3 id="Elsewhere"><a href="#Elsewhere" class="headerlink" title="Elsewhere"></a>Elsewhere</h3><ul>
+<li><code><color></code> \u2713</li>
+<li><code><image></code></li>
+<li><code><position></code></li>
+</ul>
+<h3 id="Functional"><a href="#Functional" class="headerlink" title="Functional"></a>Functional</h3><ul>
+<li><code>calc()</code></li>
+<li><code>toggle()</code></li>
+<li><code>attr()</code></li>
+</ul>
+<h2 id="JS-APIs"><a href="#JS-APIs" class="headerlink" title="JS APIs"></a>JS APIs</h2><p>refs: <a href="https://www.w3.org/standards/techs/js" target="_blank" rel="external">https://www.w3.org/standards/techs/js</a> 2016-12-11</p>
+<h3 id="Completed-Work"><a href="#Completed-Work" class="headerlink" title="Completed Work"></a>Completed Work</h3><h4 id="Standards"><a href="#Standards" class="headerlink" title="Standards"></a>Standards</h4><table>
+<thead>
+<tr>
+<th>last update</th>
+<th>spec</th>
+<th>supported</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>2016-11-17</td>
+<td>Media Source Extensions\u2122</td>
+<td>- (media related)</td>
+</tr>
+<tr>
+<td>2016-11-08</td>
+<td>Geolocation API Specification 2nd Edition</td>
+<td>\u2715 developing</td>
+</tr>
+<tr>
+<td>2016-10-27</td>
+<td>Pointer Lock</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2016-10-18</td>
+<td>Vibration API (Second Edition)</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-04-19</td>
+<td>Web Storage (Second Edition)</td>
+<td>\u2713 async <code>storage</code> module</td>
+</tr>
+<tr>
+<td>2015-10-22</td>
+<td>Web Notifications</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2015-05-19</td>
+<td>HTML5 Web Messaging</td>
+<td>\u2715 <code>BroadcastChannel</code> developing</td>
+</tr>
+<tr>
+<td>2015-02-24</td>
+<td>Pointer Events</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2015-02-10</td>
+<td>Vibration API</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2015-02-03</td>
+<td>Server-Sent Events</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2015-01-08</td>
+<td>Indexed Database API</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2014-03-13</td>
+<td>Metadata API for Media Resources 1.0</td>
+<td>- (media related)</td>
+</tr>
+<tr>
+<td>2014-02-11</td>
+<td>Progress Events</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2014-01-16</td>
+<td>JSON-LD 1.0 Processing Algorithms and API</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2013-12-12</td>
+<td>Performance Timeline</td>
+<td>- (perf related)</td>
+</tr>
+<tr>
+<td>2013-12-12</td>
+<td>User Timing</td>
+<td>- (perf related)</td>
+</tr>
+<tr>
+<td>2013-10-31</td>
+<td>Widget Interface</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2013-10-29</td>
+<td>Page Visibility (Second Edition)</td>
+<td>\u2715 <code>onviewappear</code>/<code>onviewdisappear</code></td>
+</tr>
+<tr>
+<td>2013-10-10</td>
+<td>Touch Events</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2013-02-21</td>
+<td>Selectors API Level 1</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2012-12-17</td>
+<td>Navigation Timing</td>
+<td>- (perf related)</td>
+</tr>
+<tr>
+<td>2012-12-17</td>
+<td>High Resolution Time</td>
+<td>- (perf related)</td>
+</tr>
+<tr>
+<td>2008-12-22</td>
+<td>Element Traversal Specification</td>
+<td>-</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Drafts"><a href="#Drafts" class="headerlink" title="Drafts"></a>Drafts</h3><h4 id="Proposed-Recommendations"><a href="#Proposed-Recommendations" class="headerlink" title="Proposed Recommendations"></a>Proposed Recommendations</h4><table>
+<thead>
+<tr>
+<th>last update</th>
+<th>spec</th>
+<th>supported</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>2016-09-15</td>
+<td>WebIDL Level 1</td>
+<td>-</td>
+</tr>
+</tbody>
+</table>
+<h4 id="Candidate-Recommendations"><a href="#Candidate-Recommendations" class="headerlink" title="Candidate Recommendations"></a>Candidate Recommendations</h4><table>
+<thead>
+<tr>
+<th>last update</th>
+<th>spec</th>
+<th>supported</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>2016-12-08</td>
+<td>Performance Timeline Level 2</td>
+<td>- (perf related)</td>
+</tr>
+<tr>
+<td>2016-11-22</td>
+<td>Page Visibility Level 2</td>
+<td>\u2715 <code>onviewappear</code>/<code>onviewdisappear</code></td>
+</tr>
+<tr>
+<td>2016-11-01</td>
+<td>High Resolution Time Level 2</td>
+<td>- (perf related)</td>
+</tr>
+<tr>
+<td>2016-08-18</td>
+<td>DeviceOrientation Event Specification</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-07-21</td>
+<td>Resource Timing Level 1</td>
+<td>- (perf related)</td>
+</tr>
+<tr>
+<td>2016-07-14</td>
+<td>Presentation API</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2016-07-07</td>
+<td>Battery Status API</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-07-05</td>
+<td>Encrypted Media Extensions</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2016-05-19</td>
+<td>Media Capture and Streams</td>
+<td>- (media related)</td>
+</tr>
+<tr>
+<td>2014-12-11</td>
+<td>Web Cryptography API</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2014-09-09</td>
+<td>HTML Media Capture</td>
+<td>- (media related)</td>
+</tr>
+<tr>
+<td>2012-09-20</td>
+<td>The WebSocket API</td>
+<td>\u2715</td>
+</tr>
+</tbody>
+</table>
+<h4 id="Last-Call-Drafts"><a href="#Last-Call-Drafts" class="headerlink" title="Last Call Drafts"></a>Last Call Drafts</h4><table>
+<thead>
+<tr>
+<th>last update</th>
+<th>spec</th>
+<th>supported</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>2011-12-01</td>
+<td>Geolocation API Specification Level 2</td>
+<td>\u2715</td>
+</tr>
+</tbody>
+</table>
+<h4 id="Other-Working-Drafts"><a href="#Other-Working-Drafts" class="headerlink" title="Other Working Drafts"></a>Other Working Drafts</h4><table>
+<thead>
+<tr>
+<th>last update</th>
+<th>spec</th>
+<th>supported</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>2016-12-09</td>
+<td>MediaStream Image Capture</td>
+<td>- (media related)</td>
+</tr>
+<tr>
+<td>2016-12-06</td>
+<td>MediaStream Recording</td>
+<td>- (media related)</td>
+</tr>
+<tr>
+<td>2016-12-06</td>
+<td>Selection API</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-12-05</td>
+<td>Input Events</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-12-02</td>
+<td>Gamepad</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2016-11-29</td>
+<td>WebDriver</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2016-11-24</td>
+<td>WebRTC 1.0: Real-time Communication Between Browsers</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-11-22</td>
+<td>Pointer Lock 2.0</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2016-11-07</td>
+<td>Remote Playback API</td>
+<td>- (media related)</td>
+</tr>
+<tr>
+<td>2016-11-03</td>
+<td>Resource Timing Level 2</td>
+<td>- (perf related)</td>
+</tr>
+<tr>
+<td>2016-11-02</td>
+<td>Audio Output Devices API</td>
+<td>- (media related)</td>
+</tr>
+<tr>
+<td>2016-11-01</td>
+<td>Indexed Database API 2.0</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-11-01</td>
+<td>User Timing Level 2</td>
+<td>- (perf related)</td>
+</tr>
+<tr>
+<td>2016-10-31</td>
+<td>The Screen Orientation API</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-10-31</td>
+<td>High Resolution Time Level 3</td>
+<td>- (perf related)</td>
+</tr>
+<tr>
+<td>2016-10-24</td>
+<td>UI Events KeyboardEvent code Values</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2016-10-24</td>
+<td>UI Events KeyboardEvent key Values</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2016-10-11</td>
+<td>Service Workers 1</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-09-21</td>
+<td>Identifiers for WebRTC\u2019s Statistics API</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2016-09-13</td>
+<td>Accelerometer Sensor</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-09-13</td>
+<td>Gyroscope Sensor</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-09-13</td>
+<td>Magnetometer Sensor</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-08-30</td>
+<td>Ambient Light Sensor</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-08-30</td>
+<td>Media Capture from DOM Elements</td>
+<td>- (media related)</td>
+</tr>
+<tr>
+<td>2016-08-30</td>
+<td>Generic Sensor API</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-08-03</td>
+<td>Wake Lock API</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-07-19</td>
+<td>Proximity Sensor</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-07-19</td>
+<td>Pointer Events - Level 2</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2016-07-14</td>
+<td>Screen Capture</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-07-12</td>
+<td>Media Capture Depth Stream Extensions</td>
+<td>- (media related)</td>
+</tr>
+<tr>
+<td>2016-05-17</td>
+<td>Cooperative Scheduling of Background Tasks</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2016-04-22</td>
+<td>Navigation Timing Level 2</td>
+<td>- (perf related)</td>
+</tr>
+<tr>
+<td>2016-04-03</td>
+<td>Clipboard API and events</td>
+<td>\u2715 <code>clipboard</code> module</td>
+</tr>
+<tr>
+<td>2015-12-15</td>
+<td>Push API</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2015-12-08</td>
+<td>Web Audio API</td>
+<td>- (media related)</td>
+</tr>
+<tr>
+<td>2015-10-15</td>
+<td>FindText API</td>
+<td>-</td>
+</tr>
+<tr>
+<td>2015-09-24</td>
+<td>Web Workers</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2015-04-21</td>
+<td>File API</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2014-02-20</td>
+<td>Network Service Discovery</td>
+<td>\u2715</td>
+</tr>
+<tr>
+<td>2012-03-06</td>
+<td>MediaStream Capture Scenarios</td>
+<td>- (media related)</td>
+</tr>
+<tr>
+<td>2011-12-15</td>
+<td>Audio Processing API</td>
+<td>- (media related)</td>
+</tr>
+</tbody>
+</table>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/web-standards.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/web-standards.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[06/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/syntax/index.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/syntax/index.html b/content/cn/v-0.10/guide/syntax/index.html
new file mode 100644
index 0000000..2ef554a
--- /dev/null
+++ b/content/cn/v-0.10/guide/syntax/index.html
@@ -0,0 +1,566 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u8bed\u6cd5\u4ecb\u7ecd | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u8bed\u6cd5\u7efc\u8ff0Weex \u4ee3\u7801\u7531 &lt;template&gt;\u3001&lt;style&gt;\u3001&lt;script&gt; \u4e09\u4e2a\u90e8\u5206\u6784\u6210\u3002
+
+&lt;template&gt;\uff1a\u5fc5\u987b\u7684\uff0c\u4f7f\u7528 HTML \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7ed3\u6784\uff0c\u5185\u5bb9\u7531\u591a\u4e2a\u6807\u7b7e\u7ec4\u6210\uff0c\u4e0d\u540c\u7684\u6807\u7b7e\u4ee3\u8868\u4e0d\u540c\u7684\u7ec4\u4ef6\u3002
+&lt;style&gt;\uff1a\u53ef\u9009\u7684\uff0c\u4f7f\u7528 CSS \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7684\u5177\u4f53\u5c55\u73b0\u5f62\u5f0f\u3002
+&lt;script&gt;\uff1a\u53ef\u9009\u7684\uff0c\u4f7f\u7528 JavaScri">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u8bed\u6cd5\u4ecb\u7ecd">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/syntax/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u8bed\u6cd5\u7efc\u8ff0Weex \u4ee3\u7801\u7531 &lt;template&gt;\u3001&lt;style&gt;\u3001&lt;script&gt; \u4e09\u4e2a\u90e8\u5206\u6784\u6210\u3002
+
+&lt;template&gt;\uff1a\u5fc5\u987b\u7684\uff0c\u4f7f\u7528 HTML \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7ed3\u6784\uff0c\u5185\u5bb9\u7531\u591a\u4e2a\u6807\u7b7e\u7ec4\u6210\uff0c\u4e0d\u540c\u7684\u6807\u7b7e\u4ee3\u8868\u4e0d\u540c\u7684\u7ec4\u4ef6\u3002
+&lt;style&gt;\uff1a\u53ef\u9009\u7684\uff0c\u4f7f\u7528 CSS \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7684\u5177\u4f53\u5c55\u73b0\u5f62\u5f0f\u3002
+&lt;script&gt;\uff1a\u53ef\u9009\u7684\uff0c\u4f7f\u7528 JavaScri">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.948Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u8bed\u6cd5\u4ecb\u7ecd">
+<meta name="twitter:description" content="\u8bed\u6cd5\u7efc\u8ff0Weex \u4ee3\u7801\u7531 &lt;template&gt;\u3001&lt;style&gt;\u3001&lt;script&gt; \u4e09\u4e2a\u90e8\u5206\u6784\u6210\u3002
+
+&lt;template&gt;\uff1a\u5fc5\u987b\u7684\uff0c\u4f7f\u7528 HTML \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7ed3\u6784\uff0c\u5185\u5bb9\u7531\u591a\u4e2a\u6807\u7b7e\u7ec4\u6210\uff0c\u4e0d\u540c\u7684\u6807\u7b7e\u4ee3\u8868\u4e0d\u540c\u7684\u7ec4\u4ef6\u3002
+&lt;style&gt;\uff1a\u53ef\u9009\u7684\uff0c\u4f7f\u7528 CSS \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7684\u5177\u4f53\u5c55\u73b0\u5f62\u5f0f\u3002
+&lt;script&gt;\uff1a\u53ef\u9009\u7684\uff0c\u4f7f\u7528 JavaScri">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link current ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link current ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u8bed\u6cd5\u4ecb\u7ecd
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.948Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u8bed\u6cd5\u7efc\u8ff0"><a href="#\u8bed\u6cd5\u7efc\u8ff0" class="headerlink" title="\u8bed\u6cd5\u7efc\u8ff0"></a>\u8bed\u6cd5\u7efc\u8ff0</h1><p>Weex \u4ee3\u7801\u7531 <code><template></code>\u3001<code><style></code>\u3001<code><script></code> \u4e09\u4e2a\u90e8\u5206\u6784\u6210\u3002</p>
+<ul>
+<li><code><template></code>\uff1a<em>\u5fc5\u987b\u7684</em>\uff0c\u4f7f\u7528 HTML \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7ed3\u6784\uff0c\u5185\u5bb9\u7531\u591a\u4e2a\u6807\u7b7e\u7ec4\u6210\uff0c\u4e0d\u540c\u7684\u6807\u7b7e\u4ee3\u8868\u4e0d\u540c\u7684\u7ec4\u4ef6\u3002</li>
+<li><code><style></code>\uff1a<em>\u53ef\u9009\u7684</em>\uff0c\u4f7f\u7528 CSS \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7684\u5177\u4f53\u5c55\u73b0\u5f62\u5f0f\u3002</li>
+<li><code><script></code>\uff1a<em>\u53ef\u9009\u7684</em>\uff0c\u4f7f\u7528 JavaScript \u63cf\u8ff0\u9875\u9762\u4e2d\u7684\u6570\u636e\u548c\u9875\u9762\u7684\u884c\u4e3a\uff0cWeex \u4e2d\u7684\u6570\u636e\u5b9a\u4e49\u4e5f\u5728 <code><script></code> \u4e2d\u8fdb\u884c\u3002</li>
+</ul>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="comment"><!-- (required) the structure of page --></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="comment">/* (optional) stylesheet */</span></div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="comment">/* (optional) the definition of data, methods and life-circle */</span></div><div class="line"><span class="tag"></<span class="name">script</span>>
;</span></div></pre></td></tr></table></figure>
+<p>\u8fd9\u662f\u4e00\u4e2a\u5178\u578b\u7684 M-V-VM \u67b6\u6784\uff1a\u901a\u8fc7 ViewModel \u628a Model \u548c View \u5efa\u7acb\u66f4\u76f4\u63a5\u6709\u6548\u7684\u5173\u7cfb\uff0cViewModel \u7684\u5b9e\u73b0\u4ee5 <code><script></code> \u7684\u5185\u5bb9\u4e3a\u4e3b\u3002</p>
+<h2 id="lt-template-gt-\u6a21\u677f"><a href="#lt-template-gt-\u6a21\u677f" class="headerlink" title="<template> \u6a21\u677f"></a><code><template></code> \u6a21\u677f</h2><p><code><template></code> \u4e2d\u7684\u6807\u7b7e\u7ec4\u7ec7\u7c7b\u4f3c\u5982\u4e0b\u4ee3\u7801\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">style</span>=<span class="string">"width: 200; height: 200;"</span> <span class="attr">src</span>=<span class="string">"https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Alibaba Weex Team<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table>
</figure>
+<p><a href="http://dotwe.org/5256e6e610ded330369f2e8010f7f0e6" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p><code><div></code> \u6807\u7b7e\u662f\u4e00\u4e2a\u6839\u8282\u70b9\uff0c\u91cc\u9762\u5305\u542b\u63cf\u8ff0\u56fe\u7247\u7684 <code><image></code> \u6807\u7b7e\u548c\u63cf\u8ff0\u6587\u5b57\u7684 <code><text></code> \u6807\u7b7e\u3002</p>
+<p>\u548c HTML \u7c7b\u4f3c\uff0c\u4e0d\u540c\u6807\u7b7e\u4ee3\u8868\u7684\u7ec4\u4ef6\u6709\u5404\u81ea\u7684\u7279\u6027 (attribute)\uff0c\u90e8\u5206\u7ec4\u4ef6\u53ef\u4ee5\u62e5\u6709\u81ea\u5df1\u7684\u5b50\u7ec4\u4ef6\u3002</p>
+<p>\u5ef6\u4f38\u9605\u8bfb\uff1a<a href="../../references/components/index.html">\u5185\u7f6e\u7ec4\u4ef6\u5217\u8868</a></p>
+<p>\u6839\u8282\u70b9\uff1a\u6bcf\u4e2a Weex \u9875\u9762\u6700\u9876\u5c42\u7684\u8282\u70b9\uff0c\u6211\u4eec\u79f0\u4e3a\u6839\u8282\u70b9\u3002\u4e0b\u9762\u662f\u76ee\u524d\u6211\u4eec\u652f\u6301\u7684\u4e09\u79cd\u6839\u8282\u70b9\uff1a</p>
+<ul>
+<li><code><div></code>\uff1a\u666e\u901a\u6839\u8282\u70b9\uff0c\u6709\u786e\u5b9a\u7684\u5c3a\u5bf8\uff0c\u4e0d\u53ef\u6eda\u52a8\u3002</li>
+<li><code><scroller></code>\uff1a\u53ef\u6eda\u52a8\u6839\u8282\u70b9\uff0c\u9002\u7528\u4e8e\u9700\u8981\u5168\u9875\u6eda\u52a8\u7684\u573a\u666f\u3002</li>
+<li><code><list></code>\uff1a\u5217\u8868\u6839\u8282\u70b9\uff0c\u9002\u7528\u4e8e\u5176\u4e2d\u5305\u542b\u91cd\u590d\u7684\u5b50\u5143\u7d20\u7684\u5217\u8868\u573a\u666f\u3002</li>
+</ul>
+<p>\u76ee\u524d Weex \u4ec5\u652f\u6301\u4ee5\u4e0a\u4e09\u79cd\u6839\u8282\u70b9\u3002</p>
+<p><em>\u6ce8\u610f\u4e8b\u9879\uff1a<code><template></code> \u53ea\u652f\u6301\u4e00\u4e2a\u6839\u8282\u70b9\uff0c\u591a\u4e2a\u6839\u8282\u70b9\u5c06\u65e0\u6cd5\u88ab Weex \u6b63\u5e38\u7684\u8bc6\u522b\u548c\u5904\u7406\u3002</em></p>
+<h2 id="lt-style-gt-\u6837\u5f0f"><a href="#lt-style-gt-\u6837\u5f0f" class="headerlink" title="<style> \u6837\u5f0f"></a><code><style></code> \u6837\u5f0f</h2><p>\u6211\u4eec\u53ef\u4ee5\u628a Weex \u4e2d\u7684\u6837\u5f0f\u8bed\u6cd5\u7406\u89e3\u4e3a CSS \u7684\u4e00\u4e2a\u5b50\u96c6\uff0c\u4e24\u8005\u6709\u4e00\u4e9b\u7ec6\u5fae\u7684\u533a\u522b</p>
+<p>\u7b2c\u4e00\u79cd\u5199\u6cd5\u662f\uff0c\u4f60\u80fd\u5728\u6807\u7b7e\u4e0a\uff0c\u76f4\u63a5\u901a\u8fc7\u5185\u8054 <code>style</code> \u7279\u6027\u7f16\u5199\u6837\u5f0f. \u7b2c\u4e8c\u79cd\u5199\u6cd5\uff0c\u901a\u8fc7\u6807\u7b7e\u4e2d\u7684 <code>class</code> \u7279\u6027\u4e0e <code><style></code> \u6807\u7b7e\u4e2d\u5b9a\u4e49\u7684\u6837\u5f0f\u5efa\u7acb\u5bf9\u5e94\u5173\u7cfb\uff0c\u8ba9 <code><style></code> \u6807\u7b7e\u4e2d\u5b9a\u4e49\u7684\u6837\u5f0f\u4f5c\u7528\u4e8e\u7279\u5b9a\u6807\u7b7e\u4e4b\u4e0a\u3002\u4ee5\u4e0b\u662f\u4f8b\u5b50\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size: 64;"</span>></span>Alibaba<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"large"</span>></span>Weex Team<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></s
pan><span class="css"></span></div><div class="line"> <span class="selector-class">.large</span> {<span class="attribute">font-size</span>: <span class="number">64</span>;}</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/d8af9186bf045df74e7a538d91798db4" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u4e0a\u9762\u7684\u4e24\u4e2a <code><text></code> \u7ec4\u4ef6\u90fd\u88ab\u8bbe\u7f6e\u4e86\u540c\u6837\u7684\u5b57\u4f53\u5927\u5c0f\uff0c\u4f46\u5206\u522b\u7528\u4e86\u4e24\u79cd\u4e0d\u540c\u7684\u65b9\u5f0f\u3002</p>
+<p>\u5ef6\u4f38\u9605\u8bfb\uff1a<a href="../references/common-style.html">Weex \u901a\u7528\u6837\u5f0f</a></p>
+<p><strong>\u6ce8\u610f</strong>\uff1aWeex \u9075\u5faa <a href="https://en.wikipedia.org/wiki/HTML_attribute" target="_blank" rel="external">HTML \u7279\u6027</a> \u547d\u540d\u89c4\u8303\uff0c\u6240\u4ee5\u7279\u6027\u547d\u540d\u65f6<strong>\u8bf7\u4e0d\u8981\u4f7f\u7528\u9640\u5cf0\u683c\u5f0f (CamelCase)</strong>\uff0c\u91c7\u7528\u4ee5\u201c-\u201d\u5206\u5272\u7684 <strong>long-name</strong> \u5f62\u5f0f\u3002</p>
+<h2 id="lt-script-gt-\u811a\u672c"><a href="#lt-script-gt-\u811a\u672c" class="headerlink" title="<script> \u811a\u672c"></a><code><script></code> \u811a\u672c</h2><p><code><script></code> \u63cf\u8ff0\u9875\u9762\u4e2d\u7684\u6570\u636e\u548c\u9875\u9762\u7684\u884c\u4e3a\uff0c\u4ee3\u7801\u9075\u5faa JavaScript (ES5) \u8bed\u6cd5 (\u76ee\u524d iOS \u7aef\u548c\u6d4f\u89c8\u5668\u7aef\u53d6\u51b3\u4e8e\u5185\u7f6e JavaScript \u5f15\u64ce\u5bf9 ES \u7248\u672c\u7684\u652f\u6301\u60c5\u51b5\uff0c\u5b89\u5353\u7aef\u80fd\u591f\u5b8c\u6574\u652f\u6301 ES5\uff0c\u4f46\u4e0d\u539f\u751f\u652f\u6301 ES6\uff0c\u9700\u8981\u7528\u7c7b\u4f3c <a href="http://babeljs.io" target="_blank" rel="external">babel</a> \u7684\u5de5\u5177\u5bf9\u6e90\u4ee3\u7801\u8fdb\u884c\u8f6c\u6362)\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u4f8b\u5b50\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>The time is {{datetime}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{title}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{getTitle()}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><
div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">title</span>: <span class="string">'Alibaba'</span>,</div><div class="line"> <span class="attr">datetime</span>: <span class="literal">null</span></div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">getTitle</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="string">'Weex Team'</span></div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">created</span>
: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.datetime = <span class="keyword">new</span> <span class="built_in">Date</span>().toLocaleString()</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/8095bed0d9db4299fb39975d4b35b13f" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u4e0a\u9762 <code><script></code> \u6807\u7b7e\u4e2d\u5b9a\u4e49\u4e86\u88ab\u8d4b\u503c\u7ed9 <code>module.exports</code> \u7684\u5bf9\u8c61\uff0c\u8fd9\u4e2a\u5bf9\u8c61\u5176\u5b9e\u5c31\u662f\u4e00\u4e2a ViewModel \u9009\u9879\uff0c\u8ba9\u4e09\u4e2a <code><text></code> \u6807\u7b7e\u663e\u793a\u5f53\u524d\u65f6\u95f4\u3001\u201cAlibaba\u201d\u5b57\u6837\u548c\u201cWeex Team\u201d\u5b57\u6837\u3002</p>
+<p>\u9009\u9879\u4e2d\u7684 <code>data</code> \u7528\u4e8e\u5b58\u50a8\u6570\u636e\uff0c\u8fd9\u4e9b\u6570\u636e\u53ef\u4ee5\u901a\u8fc7<a href="./data-binding.html">\u6570\u636e\u7ed1\u5b9a</a>\u673a\u5236\u548c <code><template></code> \u6807\u7b7e\u4e2d\u7684\u5185\u5bb9\u7ed1\u5b9a\u8d77\u6765\u3002\u5f53\u8fd9\u4e9b\u6570\u636e\u53d8\u66f4\u65f6\uff0c\u88ab\u7ed1\u5b9a\u7684\u6a21\u677f\u5185\u5bb9\u4e5f\u4f1a\u81ea\u52a8\u66f4\u65b0\u3002\u8fd9\u4e9b\u6570\u636e\u5728 <code><script></code> \u4e2d\u7684\u5404\u4e2a\u65b9\u6cd5\u4e2d\u53ef\u4ee5\u901a\u8fc7\u7c7b\u4f3c <code>this.x</code> \u7684\u65b9\u5f0f\u8fdb\u884c\u8bfb\u5199\u64cd\u4f5c\u3002</p>
+<p>\u800c\u9009\u9879\u4e2d\u7684 <code>methods</code> \u91cc\u5219\u5217\u51fa\u4e86\u5f53\u524d\u4e0a\u4e0b\u6587\u53ef\u6267\u884c\u7684\u5404\u79cd\u51fd\u6570\uff0c\u6bd4\u5982 <code>getTitle()</code>\u3002</p>
+<p>\u9009\u9879\u4e2d\u6700\u540e\u7684 <code>created</code> \u662f\u751f\u547d\u5468\u671f\u51fd\u6570\uff0c\u4f1a\u5728\u6570\u636e\u521d\u59cb\u5316\u4e4b\u540e\u3001\u754c\u9762\u88ab\u7ed1\u5b9a\u6570\u636e\u5e76\u6e32\u67d3\u4e4b\u524d\u6267\u884c\u3002\u7c7b\u4f3c\u7684\u751f\u547d\u5468\u671f\u51fd\u6570\u8fd8\u6709 <code>init</code>\u3001<code>ready</code> \u7b49\uff0c\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c<code>datetime</code> \u4f1a\u5728\u754c\u9762\u6e32\u67d3\u4e4b\u524d\u88ab\u66f4\u65b0\u4e3a\u5f53\u524d\u7684\u65f6\u95f4\u3002</p>
+<p>\u5ef6\u4f38\u9605\u8bfb\uff1a<a href="../../references/component-defs.html">ViewModel \u9009\u9879</a></p>
+<p>\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u6765\u8be6\u7ec6\u4ecb\u7ecd<a href="./data-binding.html">\u6570\u636e\u7ed1\u5b9a</a>\u7684\u76f8\u5173\u77e5\u8bc6\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/syntax/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/syntax/render-logic.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/syntax/render-logic.html b/content/cn/v-0.10/guide/syntax/render-logic.html
new file mode 100644
index 0000000..d4e8570
--- /dev/null
+++ b/content/cn/v-0.10/guide/syntax/render-logic.html
@@ -0,0 +1,542 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236appendappend \u7279\u6027\u5b9a\u4e49\u4e86\u5f53\u524d\u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\uff1a
+
+\u4ee5\u4e00\u6574\u68f5\u6811\u7684\u65b9\u5f0f\u4e00\u6b21\u6027\u6dfb\u52a0\u5230\u89c6\u56fe\u4e2d (append=&quot;tree&quot;)\uff0c\u8fd8\u662f
+\u6bcf\u4e2a\u5b50\u7ec4\u4ef6\u90fd\u4ea7\u751f\u4e00\u6b21\u5355\u72ec\u7684\u6dfb\u52a0\u5230\u89c6\u56fe\u7684\u6307\u4ee4 (append=&quot;node&quot;)
+
+&lt;template&gt; &lt;div&gt; &lt;div&gt; &lt;text&gt;Hello&l">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/syntax/render-logic.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236appendappend \u7279\u6027\u5b9a\u4e49\u4e86\u5f53\u524d\u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\uff1a
+
+\u4ee5\u4e00\u6574\u68f5\u6811\u7684\u65b9\u5f0f\u4e00\u6b21\u6027\u6dfb\u52a0\u5230\u89c6\u56fe\u4e2d (append=&quot;tree&quot;)\uff0c\u8fd8\u662f
+\u6bcf\u4e2a\u5b50\u7ec4\u4ef6\u90fd\u4ea7\u751f\u4e00\u6b21\u5355\u72ec\u7684\u6dfb\u52a0\u5230\u89c6\u56fe\u7684\u6307\u4ee4 (append=&quot;node&quot;)
+
+&lt;template&gt; &lt;div&gt; &lt;div&gt; &lt;text&gt;Hello&l">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.948Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236">
+<meta name="twitter:description" content="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236appendappend \u7279\u6027\u5b9a\u4e49\u4e86\u5f53\u524d\u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\uff1a
+
+\u4ee5\u4e00\u6574\u68f5\u6811\u7684\u65b9\u5f0f\u4e00\u6b21\u6027\u6dfb\u52a0\u5230\u89c6\u56fe\u4e2d (append=&quot;tree&quot;)\uff0c\u8fd8\u662f
+\u6bcf\u4e2a\u5b50\u7ec4\u4ef6\u90fd\u4ea7\u751f\u4e00\u6b21\u5355\u72ec\u7684\u6dfb\u52a0\u5230\u89c6\u56fe\u7684\u6307\u4ee4 (append=&quot;node&quot;)
+
+&lt;template&gt; &lt;div&gt; &lt;div&gt; &lt;text&gt;Hello&l">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link current ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link current ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.948Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236"><a href="#\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236" class="headerlink" title="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236"></a>\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</h1><h2 id="append"><a href="#append" class="headerlink" title="append"></a><code>append</code></h2><p><code>append</code> \u7279\u6027\u5b9a\u4e49\u4e86\u5f53\u524d\u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\uff1a</p>
+<ol>
+<li>\u4ee5\u4e00\u6574\u68f5\u6811\u7684\u65b9\u5f0f\u4e00\u6b21\u6027\u6dfb\u52a0\u5230\u89c6\u56fe\u4e2d (<code>append="tree"</code>)\uff0c\u8fd8\u662f</li>
+<li>\u6bcf\u4e2a\u5b50\u7ec4\u4ef6\u90fd\u4ea7\u751f\u4e00\u6b21\u5355\u72ec\u7684\u6dfb\u52a0\u5230\u89c6\u56fe\u7684\u6307\u4ee4 (<code>append="node"</code>)</li>
+</ol>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Hello<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Weex<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">append</span>=<span class="string">"node"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Hello
<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Weex<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">append</span>=<span class="string">"tree"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Hello<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Weex<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="li
ne"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/417c75415efce66d8e22bf5942b380ee" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u5728\u4e0a\u9762\u7684\u4ee3\u7801\u4e2d\uff0c\u7b2c\u4e00\u7ec4\u548c\u7b2c\u4e8c\u7ec4 <code><div></code> \u7684\u6e32\u67d3\u8fc7\u7a0b\u76f8\u540c\uff0c\u5373\u5148\u6dfb\u52a0\u7a7a\u7684\u7236\u7ea7 <code><div></code>\uff0c\u7136\u540e\u63d2\u5165\u7b2c\u4e00\u4e2a <code><text></code> Hello\uff0c\u7136\u540e\u63d2\u5165\u7b2c\u4e8c\u4e2a <code><text></code> Weex\uff1b\u7b2c\u4e09\u7ec4 <code><div></code> \u5219\u662f\u8fde\u5e26\u4e24\u4e2a <code><text></code> \u5b50\u7ec4\u4ef6\u4e00\u9f50\u4f20\u7ed9\u6e32\u67d3\u5c42\u8fdb\u884c\u6e32\u67d3\u7684\u3002</p>
+<p>\u6e32\u67d3\u7ed3\u679c\u663e\u800c\u6613\u89c1\uff0c\u524d\u4e24\u7ec4\u6e32\u67d3\u65b9\u5f0f\u4f1a\u4f7f\u9996\u6b21\u7ed8\u5236\u7684\u54cd\u5e94\u901f\u5ea6\u6bd4\u540e\u8005\u5feb\u4e9b\uff0c\u4f46\u662f\u603b\u6e32\u67d3\u65f6\u95f4\u53ef\u80fd\u6bd4\u7b2c\u4e09\u7ec4 <code>append="tree"</code> \u66f4\u957f\u3002\u5f00\u53d1\u8005\u53ef\u4ee5\u6839\u636e\u5b9e\u9645\u754c\u9762\u7684\u60c5\u51b5\u81ea\u884c\u9009\u62e9\u5408\u7406\u7684\u6e32\u67d3\u8fc7\u7a0b\u3002</p>
+<p>\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u9664\u4e86 <code><cell></code> \u7ec4\u4ef6\u7684\u9ed8\u8ba4\u6e32\u67d3\u8fc7\u7a0b\u662f <code>tree</code> \u6a21\u5f0f\uff0c\u5176\u5b83\u7ec4\u4ef6\u90fd\u9ed8\u8ba4\u6309\u7167 <code>node</code> \u6a21\u5f0f\u8fdb\u884c\u6e32\u67d3\u3002</p>
+<p>\u4e0b\u4e00\u8282\uff1a<a href="./composed-component.html">\u81ea\u5b9a\u4e49\u7ec4\u4ef6</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/syntax/render-logic.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/syntax/style-n-class.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/syntax/style-n-class.html b/content/cn/v-0.10/guide/syntax/style-n-class.html
new file mode 100644
index 0000000..31b3a51
--- /dev/null
+++ b/content/cn/v-0.10/guide/syntax/style-n-class.html
@@ -0,0 +1,553 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>CSS \u6837\u5f0f\u548c\u7c7b | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="CSS \u6837\u5f0f\u548c\u7c7b\u57fa\u7840\u8bed\u6cd5CSS \u6837\u5f0f\u53ef\u4ee5\u7406\u89e3\u4e3a\u4e00\u7cfb\u5217\u7684\u952e\u503c\u5bf9\uff0c\u5176\u4e2d\u7684\u6bcf\u4e00\u5bf9\u63cf\u8ff0\u4e86\u4e00\u4e2a\u7279\u5b9a\u7684\u6837\u5f0f\uff0c\u4f8b\u5982\u7ec4\u4ef6\u7684\u5bbd\u6216\u8005\u9ad8\u3002
+.div &#123; width: 400; height: 50;&#125;
+\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u662f prop-name: prop-value;\u3002\u952e\u540d\u662f prop-name\uff0c\u952e\u503c\u662f prop-value\u3002 \u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u952e\u540d\u6309\u7167\u8fde\u63a5\u7b26\u7684\u65b9\u5f0f\u8fdb\u884c\u547d\u540d\uff0c\u952e\u548c\u503c\u4e4b\u95f4\u7531\u5192\u53f7 : \u8fdb\u884c\u5206">
+<meta property="og:type" content="website">
+<meta property="og:title" content="CSS \u6837\u5f0f\u548c\u7c7b">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/syntax/style-n-class.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="CSS \u6837\u5f0f\u548c\u7c7b\u57fa\u7840\u8bed\u6cd5CSS \u6837\u5f0f\u53ef\u4ee5\u7406\u89e3\u4e3a\u4e00\u7cfb\u5217\u7684\u952e\u503c\u5bf9\uff0c\u5176\u4e2d\u7684\u6bcf\u4e00\u5bf9\u63cf\u8ff0\u4e86\u4e00\u4e2a\u7279\u5b9a\u7684\u6837\u5f0f\uff0c\u4f8b\u5982\u7ec4\u4ef6\u7684\u5bbd\u6216\u8005\u9ad8\u3002
+.div &#123; width: 400; height: 50;&#125;
+\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u662f prop-name: prop-value;\u3002\u952e\u540d\u662f prop-name\uff0c\u952e\u503c\u662f prop-value\u3002 \u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u952e\u540d\u6309\u7167\u8fde\u63a5\u7b26\u7684\u65b9\u5f0f\u8fdb\u884c\u547d\u540d\uff0c\u952e\u548c\u503c\u4e4b\u95f4\u7531\u5192\u53f7 : \u8fdb\u884c\u5206">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.949Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="CSS \u6837\u5f0f\u548c\u7c7b">
+<meta name="twitter:description" content="CSS \u6837\u5f0f\u548c\u7c7b\u57fa\u7840\u8bed\u6cd5CSS \u6837\u5f0f\u53ef\u4ee5\u7406\u89e3\u4e3a\u4e00\u7cfb\u5217\u7684\u952e\u503c\u5bf9\uff0c\u5176\u4e2d\u7684\u6bcf\u4e00\u5bf9\u63cf\u8ff0\u4e86\u4e00\u4e2a\u7279\u5b9a\u7684\u6837\u5f0f\uff0c\u4f8b\u5982\u7ec4\u4ef6\u7684\u5bbd\u6216\u8005\u9ad8\u3002
+.div &#123; width: 400; height: 50;&#125;
+\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u662f prop-name: prop-value;\u3002\u952e\u540d\u662f prop-name\uff0c\u952e\u503c\u662f prop-value\u3002 \u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u952e\u540d\u6309\u7167\u8fde\u63a5\u7b26\u7684\u65b9\u5f0f\u8fdb\u884c\u547d\u540d\uff0c\u952e\u548c\u503c\u4e4b\u95f4\u7531\u5192\u53f7 : \u8fdb\u884c\u5206">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link current ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link current ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ CSS \u6837\u5f0f\u548c\u7c7b
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.949Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="CSS-\u6837\u5f0f\u548c\u7c7b"><a href="#CSS-\u6837\u5f0f\u548c\u7c7b" class="headerlink" title="CSS \u6837\u5f0f\u548c\u7c7b"></a>CSS \u6837\u5f0f\u548c\u7c7b</h1><h2 id="\u57fa\u7840\u8bed\u6cd5"><a href="#\u57fa\u7840\u8bed\u6cd5" class="headerlink" title="\u57fa\u7840\u8bed\u6cd5"></a>\u57fa\u7840\u8bed\u6cd5</h2><p>CSS \u6837\u5f0f\u53ef\u4ee5\u7406\u89e3\u4e3a\u4e00\u7cfb\u5217\u7684\u952e\u503c\u5bf9\uff0c\u5176\u4e2d\u7684\u6bcf\u4e00\u5bf9\u63cf\u8ff0\u4e86\u4e00\u4e2a\u7279\u5b9a\u7684\u6837\u5f0f\uff0c\u4f8b\u5982\u7ec4\u4ef6\u7684\u5bbd\u6216\u8005\u9ad8\u3002</p>
+<figure class="highlight css"><table><tr><td class="code"><pre><div class="line"><span class="selector-class">.div</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">400</span>; </div><div class="line"> <span class="attribute">height</span>: <span class="number">50</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u662f <code>prop-name: prop-value;</code>\u3002\u952e\u540d\u662f <code>prop-name</code>\uff0c\u952e\u503c\u662f <code>prop-value</code>\u3002 \u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u952e\u540d\u6309\u7167\u8fde\u63a5\u7b26\u7684\u65b9\u5f0f\u8fdb\u884c\u547d\u540d\uff0c\u952e\u548c\u503c\u4e4b\u95f4\u7531\u5192\u53f7 <code>:</code> \u8fdb\u884c\u5206\u9694\uff0c\u6bcf\u5bf9\u952e\u503c\u4e4b\u95f4\u7531\u5206\u53f7 <code>;</code> \u8fdb\u884c\u5206\u9694\u3002</p>
+<p>\u5728 Weex \u9875\u9762\u4e0a\u6837\u5f0f\u6709\u4e24\u79cd\u5f62\u5f0f\uff1a</p>
+<ul>
+<li><code><template></code> \u4e2d\u7684 <code>style</code> \u7279\u6027</li>
+<li><code><style></code> \u6837\u5f0f\u8868</li>
+</ul>
+<h3 id="lt-template-gt-\u4e2d\u7684-style-\u7279\u6027"><a href="#lt-template-gt-\u4e2d\u7684-style-\u7279\u6027" class="headerlink" title="<template> \u4e2d\u7684 style \u7279\u6027"></a><code><template></code> \u4e2d\u7684 <code>style</code> \u7279\u6027</h3><p>\u5728 <code>style</code> \u7279\u6027\u4e2d\u7f16\u5199\u6837\u5f0f\uff0c\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 400; height: 50;"</span>></span></div><div class="line"> ...</div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure>
+<p>\u8fd9\u6bb5\u4ee3\u7801\u7684\u610f\u601d\u662f <code><div></code> \u7ec4\u4ef6\u7684\u5bbd\u548c\u9ad8\u5206\u522b\u4e3a 400 \u50cf\u7d20\u548c 50 \u50cf\u7d20\u3002</p>
+<h3 id="lt-style-gt-\u6837\u5f0f\u8868"><a href="#lt-style-gt-\u6837\u5f0f\u8868" class="headerlink" title="<style> \u6837\u5f0f\u8868"></a><code><style></code> \u6837\u5f0f\u8868</h3><p>\u4f8b\u5982:</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> { <span class="attribute">width</span>: <span class="number">600</span>; }</div><div class="line"> <span class="selector-class">.title</span> { <span class="attribute">width</span>: <span class="number">400</span>; <span class="attribute">height</span>: <span class="number">50</span>; }</div><div class="line"> <span class="selector-class">.highlight</span> { <span class="attribute">color</span>: <span class="number">#ff0000</span>; }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p>\u6837\u5f0f\u8868\u5305\u542b\u4e86\u591a\u4e2a\u6837\u5f0f\u89c4\u5219\uff0c\u6bcf\u6761\u89c4\u5219\u6709\u4e00\u4e2a\u5bf9\u5e94\u7684\u7c7b\uff0c\u4ee5\u53ca\u7531 <code>{...}</code> \u5305\u62ec\u7684\u82e5\u5e72\u6761\u6837\u5f0f\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight css"><table><tr><td class="code"><pre><div class="line"><span class="selector-class">.title</span> { <span class="attribute">width</span>: <span class="number">400</span>; <span class="attribute">height</span>: <span class="number">50</span>; }</div></pre></td></tr></table></figure>
+<h3 id="class-\u7279\u6027"><a href="#class-\u7279\u6027" class="headerlink" title="class \u7279\u6027"></a><code>class</code> \u7279\u6027</h3><p><code><template></code> \u6807\u7b7e\u4e2d\u7684 <code>class</code> \u7279\u6027\u503c\u7528\u6765\u5339\u914d <code><style></code> \u6837\u5f0f\u8868\u4e2d\u7684\u4e00\u4e2a\u6216\u591a\u4e2a class \u540d\uff0c\u591a\u4e2a class name \u4e4b\u95f4\u7531\u7a7a\u683c\u5206\u9694\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span>></span>...<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title highlight"</span>></span>...<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<
span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> { <span class="attribute">width</span>: <span class="number">600</span>; }</div><div class="line"> <span class="selector-class">.title</span> { <span class="attribute">width</span>: <span class="number">400</span>; <span class="attribute">height</span>: <span class="number">50</span>; }</div><div class="line"> <span class="selector-class">.highlight</span> { <span class="attribute">color</span>: <span class="number">#ff0000</span>; }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/8487e2a33cd051c9adfa887d0bafbb44" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u8fd9\u6bb5\u4ee3\u7801\u7684\u542b\u4e49\u662f <code><div></code> \u7ec4\u4ef6\u7684\u5bbd\u5ea6\u662f 600 \u50cf\u7d20\uff0c\u4e24\u4e2a <code><text></code> \u7ec4\u4ef6\u7684\u5c3a\u5bf8\u4e3a 400x50\uff0c\u5176\u4e2d\u7b2c\u4e8c\u4e2a\u6587\u672c\u7ec4\u4ef6\u662f\u7ea2\u8272\u5b57\u3002</p>
+<p><strong>\u6ce8\u610f\u4e8b\u9879</strong></p>
+<ul>
+<li>\u4e3a\u4e86\u7b80\u5316\u9875\u9762\u8bbe\u8ba1\u548c\u5b9e\u73b0\uff0c\u5c4f\u5e55\u7684\u5bbd\u5ea6\u7edf\u4e00\u4e3a 750 \u50cf\u7d20\uff0c\u4e0d\u540c\u8bbe\u5907\u5c4f\u5e55\u90fd\u4f1a\u6309\u7167\u6bd4\u4f8b\u8f6c\u5316\u4e3a\u8fd9\u4e00\u5c3a\u5bf8\u8fdb\u884c\u957f\u5ea6\u8ba1\u7b97\u3002</li>
+<li>\u6807\u51c6 CSS \u652f\u6301\u5f88\u591a\u6837\u5f0f\u9009\u62e9\u5668\uff0c\u4f46 Weex \u76ee\u524d\u53ea\u652f\u6301\u5355\u4e2a class name \u7684\u9009\u62e9\u5668\u3002</li>
+<li>\u6807\u51c6 CSS \u652f\u6301\u5f88\u591a\u7684\u957f\u5ea6\u5355\u4f4d\uff0c\u4f46 Weex \u76ee\u524d\u53ea\u652f\u6301\u50cf\u7d20\uff0c\u5e76\u4e14 <code>px</code> \u5355\u4f4d\u53ef\u4ee5\u5ffd\u7565\u4e0d\u5199\uff0c\u76f4\u63a5\u4f7f\u7528\u5bf9\u5e94\u7684\u6570\u503c\u3002\u66f4\u591a\u8be6\u60c5\u8bf7\u67e5\u770b<a href="../references/common-style.html">\u901a\u7528\u6837\u5f0f</a>\u3002</li>
+<li>\u5b50\u5143\u7d20\u7684\u6837\u5f0f\u4e0d\u4f1a\u7ee7\u627f\u81ea\u7236\u5143\u7d20\uff0c\u8fd9\u4e00\u70b9\u4e0e\u6807\u51c6 CSS \u4e0d\u540c\uff0c\u6bd4\u5982 <code>color</code> \u548c <code>font-size</code> \u7b49\u6837\u5f0f\u4f5c\u7528\u5728 <code><text></code> \u4e0a\u5c42\u7684 <code><div></code> \u4e0a\u662f\u65e0\u6548\u7684\u3002</li>
+<li>\u6807\u51c6 CSS \u5305\u542b\u4e86\u975e\u5e38\u591a\u7684\u6837\u5f0f\u5c5e\u6027\uff0c\u4f46 Weex \u53ea\u652f\u6301\u4e86\u5176\u4e2d\u7684\u4e00\u90e8\u5206\uff0c\u6bd4\u5982\u76d2\u6a21\u578b\u3001flexbox\u3001position \u7b49\u5e03\u5c40\u5c5e\u6027\uff0c\u4ee5\u53ca <code>font-size</code>\u3001<code>color</code> \u7b49\u5176\u5b83\u6837\u5f0f\u3002</li>
+</ul>
+<h2 id="\u4e0e\u6570\u636e\u7ed1\u5b9a\u7ed3\u5408"><a href="#\u4e0e\u6570\u636e\u7ed1\u5b9a\u7ed3\u5408" class="headerlink" title="\u4e0e\u6570\u636e\u7ed1\u5b9a\u7ed3\u5408"></a>\u4e0e\u6570\u636e\u7ed1\u5b9a\u7ed3\u5408</h2><p>\u8bf7\u67e5\u9605<a href="./data-binding.html">\u6570\u636e\u7ed1\u5b9a</a>\u4e2d\u6709\u5173 <code>style</code> \u548c <code>class</code> \u7279\u6027\u7684\u76f8\u5173\u90e8\u5206\u3002\u8fd9\u91cc\u7b80\u5355\u4e3e\u4e2a\u4f8b\u5b50\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size: {{fontSize}};"</span>></span>Alibaba<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"large {{textClass}}"</span>></span>Weex Team<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag">&l
t;<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.large</span> {<span class="attribute">font-size</span>: <span class="number">32</span>;}</div><div class="line"> <span class="selector-class">.highlight</span> {<span class="attribute">color</span>: <span class="number">#ff0000</span>;}</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">fontSize</span>: <span class="number">32</span>,</div><div class="line"> <span class="attr">textClass</span>: <span class="string">'highlight'</span></div><div class="line"> }</div><div class="line"
> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/440d3318dc7b83e3bb0a110f3b3236ca" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u4e0b\u4e00\u7bc7\uff1a<a href="./events.html">\u4e8b\u4ef6\u5904\u7406</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/syntax/style-n-class.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/index.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/index.html b/content/cn/v-0.10/index.html
new file mode 100644
index 0000000..2bff8a4
--- /dev/null
+++ b/content/cn/v-0.10/index.html
@@ -0,0 +1,413 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="website">
+<meta property="og:title" content="Weex">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.950Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="index" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "index";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="index-sidebar">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="scene header" style="background: #00BDFF;">
+ <div class="scene-container">
+ <div class="galaxy left">
+ <canvas width="560" height="560" id="left-canvas"></canvas>
+ </div>
+ <div class="galaxy right">
+ <canvas width="500" height="500" id="right-canvas"></canvas>
+ </div>
+ <div id="slider">
+ <div class="swiper-container swiper-container-horizontal">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide" style="background:url('//gw.alicdn.com/tps/TB1rY5sPXXXXXbfapXXXXXXXXXX-800-800.png') 50% 50% / contain no-repeat">
+ <div class="slide-content">
+ <h1 class="page-title">\u4e00\u5957\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684\u539f\u751f\u5e94\u7528\u8de8\u5e73\u53f0\u5f00\u53d1\u65b9\u6848</h1>
+ <div class="btn-group">
+ <a href="/cn/guide/index.html" class="button get-started">\u4e0a\u624b\u6559\u7a0b</a>
+ <a href="https://github.com/alibaba/weex/" class="button get-started" target="_blank">GitHub</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!--<div class="swiper-button-next iconfont icon-arrow-small"></div>
+ <div class="swiper-button-prev iconfont icon-arrow-small"></div>-->
+ </div>
+</div>
+ </div>
+</div>
+<div class="scene edge overlength horizon">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u4f18\u52bf</h2>
+ </div>
+ <div class="sketch-content">
+ <div class="inner-box">
+ <img src="//gw.alicdn.com/tps/TB17ga7PXXXXXbnXXXXXXXXXXXX-120-121.svg" alt="Lightweight">
+ <h3>\u8f7b\u91cf</h3>
+ <span class="underline"></span>
+ <p>\u4f53\u79ef\u5c0f\u3001\u8bed\u6cd5\u7b80\u5355\u3001\u6613\u4e8e\u638c\u63e1</p>
+ </div>
+ <div class="inner-box">
+ <img src="//gw.alicdn.com/tps/TB1BGSCPXXXXXb1aXXXXXXXXXXX-79-79.svg" alt="Extendable">
+ <h3>\u53ef\u6269\u5c55</h3>
+ <span class="underline"></span>
+ <p>\u53ef\u4ee5\u6a2a\u5411\u6269\u5c55\u548c\u5b9a\u5236\u539f\u751f\u7ec4\u4ef6\u548c\u529f\u80fd</p>
+ </div>
+ <div class="inner-box">
+ <img src="//img.alicdn.com/tps/TB1uMC9PXXXXXaFXXXXXXXXXXXX-80-69.svg" alt="High Performance">
+ <h3>\u9ad8\u6027\u80fd</h3>
+ <span class="underline"></span>
+ <p>\u5bf9\u52a0\u8f7d\u65f6\u95f4\u548c\u8d44\u6e90\u5360\u7528\u6df1\u5ea6\u4f18\u5316\uff0c\u7ed9\u4f60\u66f4\u597d\u7684\u4f53\u9a8c</p>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="scene feature">
+ <div class="scene-container">
+ <div class="feature-content">
+ <div class="left-text">
+ <h2>\u5e2e\u52a9\u4f60\u6784\u5efa\u539f\u751f\u5e94\u7528</h2>
+ <p>\u4e0e Web App\u3001HTML5 App \u6216 hybrid App \u4e0d\u540c\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 Weex \u6784\u5efa\u4e00\u4e2a\u771f\u6b63\u7684\u539f\u751f\u5e94\u7528\u3002\u66f4\u8d34\u5fc3\u7684\u662f\u4f60\u7684\u4ee3\u7801\u53ea\u9700\u4f7f\u7528 HTML\u3001CSS\u3001JavaScript \u53ef\u4ee5\u6784\u5efa\u539f\u751f\u5e94\u7528\uff0c\u4e0a\u624b\u975e\u5e38\u7b80\u5355\u3002\u4f46\u5b9e\u9645\u4e0a\uff0c\u5e94\u7528\u7684\u5e95\u5c42\u662f Objective-C \u6216 Java\uff0c \u540c\u65f6\uff0cWeex \u63d0\u4f9b\u5f88\u591a native \u7ec4\u4ef6\u6216\u6a21\u5757\u4f9b\u5f00\u53d1\u4eba\u5458\u4f7f\u7528\u3002</p>
+ </div>
+ <div class="right-box">
+ <div class="imgbox phone-layer level1">
+ </div>
+ <div class="imgbox phone-layer level2">
+ </div>
+ <div class="imgbox phone-layer level3">
+ </div>
+ <div class="imgbox phone-layer level4">
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="scene cross-platform horizon">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u4e00\u6b21\u7f16\u5199\uff0c\u591a\u7aef\u8fd0\u884c</h2>
+ <p>Weex \u63d0\u4f9b\u5f3a\u5927\u7684\u8de8\u5e73\u53f0\u80fd\u529b\uff0c\u53ef\u4ee5\u4f7f\u7528\u76f8\u540c\u7684 API \u5f00\u53d1 Web\uff0cAndroid \u548c iOS \u5e94\u7528\u3002 \u540c\u65f6\uff0c\u6211\u4eec\u5bf9\u63a5\u53e3\u4e86\u4e30\u5bcc\u7684\u6269\u5c55\u80fd\u529b\u3002 \u8fd9\u6837\uff0c\u5f53\u60a8\u9700\u8981\u6269\u5c55\u539f\u751f\u7ec4\u4ef6\u6216\u6a21\u5757\u65f6\uff0c\u8fd9\u5c06\u975e\u5e38\u65b9\u4fbf\u3002</p>
+ </div>
+ <div class="sketch-content">
+ <div class="inner-box imgbox ios"></div>
+ <div class="inner-box imgbox android"></div>
+ <div class="inner-box imgbox h5"></div>
+ </div>
+ </div>
+</div>
+
+<div class="scene supporting-vue horizon">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u652f\u6301 Vue \u8bed\u6cd5</h2>
+ <p>Weex \u9075\u5faa Web \u6807\u51c6\uff0c\u540c\u65f6\u652f\u6301 vue.js \u7684\u8bed\u6cd5\u3002\u56e0\u6b64\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 vue.js \u8bed\u6cd5\u6765\u5f00\u53d1\u5e94\u7528\u7a0b\u5e8f\u3002</p>
+ </div>
+ <div class="sketch-content imgbox">
+ <div class="imgbox"></div>
+ </div>
+ </div>
+</div>
+
+<div class="scene schematic horizon">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u5de5\u4f5c\u539f\u7406</h2>
+ <p>Weex \u662f\u4e00\u4e2a\u52a8\u6001\u5316\u7684\u9ad8\u6269\u5c55\u8de8\u5e73\u53f0\u89e3\u51b3\u65b9\u6848\u3002 \u5728 Weex \u4ee3\u7801\u4e2d\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 <template>\uff0c<style> \u548c <script> \u6807\u7b7e\u7f16\u5199\u9875\u9762\u6216\u7ec4\u4ef6\uff0c\u7136\u540e\u5c06\u5b83\u4eec\u8f6c\u6362\u4e3a JS bundle \u4ee5\u8fdb\u884c\u90e8\u7f72\u3002\u5f53\u670d\u52a1\u5668\u8fd4\u56de\u7ed9\u5ba2\u6237\u7aef JS bundle \u65f6\uff0cJS bundle \u4f1a\u88ab\u5ba2\u6237\u7aef\u7684 JavaScript \u5f15\u64ce\u5904\u7406\uff0c\u5e76\u7ba1\u7406\u6e32\u67d3 native \u89c6\u56fe\uff0c\u8c03\u7528\u539f\u751f API \u548c\u7528\u6237\u4ea4\u4e92\u3002</p>
+ </div>
+ <div class="sketch-content imgbox">
+ </div>
+ </div>
+</div>
+
+<div class="scene users horizon overlength">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u8c01\u5728\u4f7f\u7528 Weex</h2>
+ </div>
+ <div class="sketch-content">
+ <div class="user-logo tmall-logo">
+ <h3>\u5929\u732b</h3>
+ <div class="user-info">
+ <h4>\u5929\u732b</h4>
+ <p>\u4e2d\u56fd\u6700\u5927\u7684 B2C \u8d2d\u7269\u5e73\u53f0.</p>
+ </div>
+ </div>
+ <div class="user-logo aliyun-logo">
+ <h3>\u963f\u91cc\u4e91</h3>
+ <div class="user-info">
+ <h4>\u963f\u91cc\u4e91</h4>
+ <p>\u963f\u91cc\u5df4\u5df4\u96c6\u56e2\u65d7\u4e0b\u4e91\u8ba1\u7b97\u4e1a\u52a1\uff0c\u963f\u91cc\u4e91\u63d0\u4f9b\u5168\u9762\u7684\u5168\u7403\u4e91\u8ba1\u7b97\u670d\u52a1\uff0c\u4e3a\u56fd\u9645\u5ba2\u6237\u7684\u5728\u7ebf\u4e1a\u52a1\u548c\u963f\u91cc\u5df4\u5df4\u81ea\u5df1\u7684\u7535\u5b50\u5546\u52a1\u751f\u6001\u7cfb\u7edf\u63d0\u4f9b\u652f\u6301\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo taobao-logo">
+ <h3>\u6dd8\u5b9d</h3>
+ <div class="user-info">
+ <h4>\u6dd8\u5b9d</h4>
+ <p>\u4e2d\u56fd\u6700\u5927\u7684\u79fb\u52a8\u7535\u5b50\u8d2d\u7269\u5e73\u53f0\uff0c\u5c55\u793a\u6570\u4ee5\u4ebf\u8ba1\u7684\u4ea7\u54c1\u4e0e\u670d\u52a1\u4fe1\u606f\uff0c\u4e3a\u6d88\u8d39\u8005\u63d0\u4f9b\u591a\u4e2a\u79cd\u7c7b\u7684\u4ea7\u54c1\u548c\u670d\u52a1\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo ding-logo">
+ <h3>\u9489\u9489</h3>
+ <div class="user-info">
+ <h4>\u9489\u9489</h4>
+ <p>\u963f\u91cc\u5df4\u5df4\u96c6\u56e2\u4e13\u4e3a\u4e2d\u5c0f\u4f01\u4e1a\u6253\u9020\u7684\u6c9f\u901a\u548c\u534f\u540c\u5e73\u53f0\u3002\u9489\u9489\u56e0\u4e2d\u5c0f\u4f01\u4e1a\u800c\u751f\uff0c\u5e2e\u52a9\u4e2d\u5c0f\u4f01\u4e1a\u901a\u8fc7\u7cfb\u7edf\u5316\u7684\u89e3\u51b3\u65b9\u6848\uff08\u5fae\u5e94\u7528\uff09\uff0c\u5168\u65b9\u4f4d\u63d0\u5347\u4e2d\u5c0f\u4f01\u4e1a\u6c9f\u901a\u548c\u534f\u540c\u6548\u7387\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo alibaba-logo">
+ <h3>1688</h3>
+ <div class="user-info">
+ <h4>1688</h4>
+ <p>\u4e2d\u56fd\u9886\u5148\u7684\u7f51\u4e0a\u6279\u53d1\u5e73\u53f0\uff0c\u8986\u76d6\u666e\u901a\u5546\u54c1\u3001\u670d\u88c5\u3001\u7535\u5b50\u4ea7\u54c1\u3001\u539f\u6750\u6599\u3001\u5de5\u4e1a\u90e8\u4ef6\u3001\u519c\u4ea7\u54c1\u548c\u5316\u5de5\u4ea7\u54c1\u7b49\u591a\u4e2a\u884c\u4e1a\u7684\u4e70\u5bb6\u548c\u5356\u5bb6\u30021688 \u4e3a\u5728\u963f\u91cc\u5df4\u5df4\u96c6\u56e2\u65d7\u4e0b\u96f6\u552e\u5e02\u573a\u7ecf\u8425\u4e1a\u52a1\u7684\u5546\u5bb6\uff0c\u63d0\u4f9b\u4e86\u4ece\u672c\u5730\u6279\u53d1\u5546\u91c7\u8d2d\u4ea7\u54c1\u7684\u6e20\u9053\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo cainiao-logo">
+ <h3>\u83dc\u9e1f\u88f9\u88f9</h3>
+ <div class="user-info">
+ <h4>\u83dc\u9e1f\u88f9\u88f9</h4>
+ <p>\u83dc\u9e1f\u88f9\u88f9\u662f\u963f\u91cc\u5df4\u5df4\u65d7\u4e0b\u83dc\u9e1f\u7f51\u7edc\u63a8\u51fa\u7684\u4e00\u6b3e\u5feb\u9012\u670d\u52a1 APP\uff0c\u4e3b\u8981\u529f\u80fd\u6709\uff1a\u5feb\u9012\u8fd0\u5355\u67e5\u8be2\u3001\u9884\u7ea6\u5bc4\u5feb\u9012\u3001\u5305\u88f9\u81ea\u52a8\u8ddf\u8e2a\u3001\u83dc\u9e1f\u9a7f\u7ad9\u7f51\u70b9\u4ee3\u6536\u4ee3\u5bc4\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo xiami-logo">
+ <h3>\u867e\u7c73</h3>
+ <div class="user-info">
+ <h4>\u867e\u7c73</h4>
+ <p>\u63d0\u4f9b\u9ad8\u54c1\u8d28\u97f3\u4e50\u7684\u4e2a\u6027\u5316\u63a8\u8350\u670d\u52a1\uff0c\u4ee5\u53ca\u7ebf\u4e0b\u97f3\u4e50\u6d3b\u52a8\u7b49\u4e92\u52a8\u5185\u5bb9\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo youku-logo">
+ <h3>\u4f18\u9177</h3>
+ <div class="user-info">
+ <h4>\u4f18\u9177</h4>
+ <p>\u4e2d\u56fd\u9886\u5148\u7684\u89c6\u9891\u670d\u52a1\u5e73\u53f0\uff0c\u63d0\u4f9b\u89c6\u9891\u64ad\u653e\uff0c\u89c6\u9891\u53d1\u5e03\uff0c\u89c6\u9891\u5206\u4eab\u7b49\u670d\u52a1\u3002</p>
+ </div>
+ </div>
+ </div>
+ <!--<div class="more">
+ <a class="more" href="">More</a>
+ </div>-->
+ </div>
+</div>
+
+<div class="scene feedback horizon overlength">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u4ed6\u4eec\u8bf4</h2>
+ </div>
+ <div class="sketch-content">
+ <div class="user-feedback">
+ <img class="avatar" src="//gw.alicdn.com/tps/TB1xHiYPXXXXXc8XpXXXXXXXXXX-130-130.jpg" alt="avatar">
+ <p class="user-name">\u9648\u5929\u4e88</p>
+ <p class="user-title">\u4f17\u5b89\u4fdd\u9669\u6280\u672f\u603b\u76d1</p>
+ <p class="user-say">\u201c Weex \u4e0d\u4ec5\u5e94\u7528\u7075\u6d3b\u3001\u6027\u80fd\u5f3a\u5927\uff0c\u800c\u4e14\u80fd\u8ba9\u524d\u7aef\u5f00\u53d1\u8005\u6700\u5927\u7a0b\u5ea6\u590d\u7528\u73b0\u6709\u6280\u672f\u79ef\u7d2f\uff0c\u5e2e\u52a9\u6211\u4eec\u7528\u6700\u5c11\u6210\u672c\u8bbe\u8ba1\u5168\u65b0\u7684\u8de8\u5e73\u53f0\u67b6\u6784\u4f53\u7cfb\uff0c\u5e76\u5c3d\u5feb\u8fdb\u5165\u5b9e\u65bd\u9636\u6bb5\u3002\u201d</p>
+ </div>
+ <div class="user-feedback">
+ <img class="avatar" src="//gw.alicdn.com/tps/TB1e.CYPXXXXXcsXpXXXXXXXXXX-130-130.jpg" alt="avatar">
+ <p class="user-name">\u6797\u5efa\u950b</p>
+ <p class="user-title">\u997f\u4e86\u4e48\u5927\u524d\u7aef\u90e8\u8d1f\u8d23\u4eba</p>
+ <p class="user-say">\u201c Weex \u63d0\u4f9b\u4e86\u5ab2\u7f8e HTML5 \u5f00\u53d1\u6548\u7387\u548c Native \u7684\u6027\u80fd\uff0c\u5bf9\u4e8e\u7c7b\u4f3c\u6211\u4eec\u8fd9\u79cd\u8fed\u4ee3\u901f\u5ea6\u8981\u6c42\u6bd4\u8f83\u9ad8\u7684\u56e2\u961f\uff0c\u51e0\u4e4e\u662f\u76ee\u524d\u6700\u597d\u7684\u65b9\u6848\u3002\u201d</p>
+ </div>
+ <div class="user-feedback">
+ <img class="avatar" src="//gw.alicdn.com/tps/TB15MOQPXXXXXbCXFXXXXXXXXXX-130-130.jpg" alt="avatar">
+ <p class="user-name">\u9ec4\u6cf0\u6210</p>
+ <p class="user-title">\u5929\u732b\u6280\u672f\u4e13\u5bb6</p>
+ <p class="user-say">\u201c Weex \u4f5c\u4e3a\u8f7b\u91cf\u6e32\u67d3\u5f15\u64ce\u53c8\u63d0\u4f9b\u4e86\u5f88\u65b9\u4fbf\u7684\u63d2\u4ef6\u673a\u5236\uff0c\u8ba9\u5404\u4e2a\u7aef\u53ef\u4ee5\u628a\u81ea\u5df1\u7684\u80fd\u529b\u53d1\u6325\u51fa\u6765\uff0c\u5145\u5206\u53d1\u6325\u5728\u5929\u732b\u7684\u4e1a\u52a1\u4e0a\uff0c\u5e76\u826f\u597d\u7684\u652f\u6301\u53cc11\u3002\u201d</p>
+ </div>
+ </div>
+ <div class="go-2-doc">
+ <a href="/cn/guide/index.html" class="button get-started">\u4e0a\u624b\u6559\u7a0b \u2192</a>
+ </div>
+ </div>
+</div>
+<a href="javascript:;" id="back2top" class="back2top"><span class="iconfont icon-arrow-small"></span></a>
+<script src="/js/swiper.min.js"></script>
+<script src="/js/velocity.js"></script>
+<script>
+var swiper = new Swiper('.swiper-container', {
+ nextButton: '.swiper-button-next',
+ prevButton: '.swiper-button-prev',
+ slidesPerView: 1,
+ spaceBetween: 30,
+ loop: false,
+ autoplay: false,
+ autoplayDisableOnInteraction: false
+})
+</script>
+
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[04/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/references/color-names.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/references/color-names.html b/content/cn/v-0.10/references/color-names.html
new file mode 100644
index 0000000..abf8c32
--- /dev/null
+++ b/content/cn/v-0.10/references/color-names.html
@@ -0,0 +1,1861 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u989c\u8272\u540d\u79f0\u5217\u8868 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Weex \u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd:
+
+
+\u989c\u8272\u540d
+\u5341\u516d\u8fdb\u5236RGB\u503c
+
+
+
+
+black(\u9ed1)
+#000000
+
+
+silver(\u94f6)
+#C0C0C0
+
+
+gray(\u7070)
+#808080
+
+
+white(\u767d)
+#FFFFFF
+
+
+maroon(\u8910\u7d2b\u7ea2)
+#800000
+
+
+red(\u7ea2)
+#FF0000
+
+
+purple(\u7d2b)
+#800080
+
+
+fuchsia(\u665a\u6a31)
+#FF00FF
+
+
+g">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u989c\u8272\u540d\u79f0\u5217\u8868">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/references/color-names.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Weex \u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd:
+
+
+\u989c\u8272\u540d
+\u5341\u516d\u8fdb\u5236RGB\u503c
+
+
+
+
+black(\u9ed1)
+#000000
+
+
+silver(\u94f6)
+#C0C0C0
+
+
+gray(\u7070)
+#808080
+
+
+white(\u767d)
+#FFFFFF
+
+
+maroon(\u8910\u7d2b\u7ea2)
+#800000
+
+
+red(\u7ea2)
+#FF0000
+
+
+purple(\u7d2b)
+#800080
+
+
+fuchsia(\u665a\u6a31)
+#FF00FF
+
+
+g">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.952Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u989c\u8272\u540d\u79f0\u5217\u8868">
+<meta name="twitter:description" content="Weex \u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd:
+
+
+\u989c\u8272\u540d
+\u5341\u516d\u8fdb\u5236RGB\u503c
+
+
+
+
+black(\u9ed1)
+#000000
+
+
+silver(\u94f6)
+#C0C0C0
+
+
+gray(\u7070)
+#808080
+
+
+white(\u767d)
+#FFFFFF
+
+
+maroon(\u8910\u7d2b\u7ea2)
+#800000
+
+
+red(\u7ea2)
+#FF0000
+
+
+purple(\u7d2b)
+#800080
+
+
+fuchsia(\u665a\u6a31)
+#FF00FF
+
+
+g">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link current ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link current ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u989c\u8272\u540d\u79f0\u5217\u8868
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.952Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Weex-\u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0"><a href="#Weex-\u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0" class="headerlink" title="Weex \u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0"></a>Weex \u652f\u6301\u7684\u6240\u6709\u989c\u8272\u540d\u79f0</h1><h3 id="\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd"><a href="#\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd" class="headerlink" title="\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd:"></a>\u57fa\u7840\u989c\u8272\u5173\u952e\u8bcd:</h3><table>
+<thead>
+<tr>
+<th>\u989c\u8272\u540d</th>
+<th>\u5341\u516d\u8fdb\u5236RGB\u503c</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>black(\u9ed1)</td>
+<td>#000000</td>
+</tr>
+<tr>
+<td>silver(\u94f6)</td>
+<td>#C0C0C0</td>
+</tr>
+<tr>
+<td>gray(\u7070)</td>
+<td>#808080</td>
+</tr>
+<tr>
+<td>white(\u767d)</td>
+<td>#FFFFFF</td>
+</tr>
+<tr>
+<td>maroon(\u8910\u7d2b\u7ea2)</td>
+<td>#800000</td>
+</tr>
+<tr>
+<td>red(\u7ea2)</td>
+<td>#FF0000</td>
+</tr>
+<tr>
+<td>purple(\u7d2b)</td>
+<td>#800080</td>
+</tr>
+<tr>
+<td>fuchsia(\u665a\u6a31)</td>
+<td>#FF00FF</td>
+</tr>
+<tr>
+<td>green(\u7eff)</td>
+<td>#008000</td>
+</tr>
+<tr>
+<td>lime(\u77f3\u7070)</td>
+<td>#00FF00</td>
+</tr>
+<tr>
+<td>olive(\u6a44\u6984)</td>
+<td>#808000</td>
+</tr>
+<tr>
+<td>yellow(\u9ec4)</td>
+<td>#FFFF00</td>
+</tr>
+<tr>
+<td>navy(\u6d77\u519b\u84dd)</td>
+<td>#000080</td>
+</tr>
+<tr>
+<td>blue(\u84dd)</td>
+<td>#0000FF</td>
+</tr>
+<tr>
+<td>teal(\u6c34\u9e2d)</td>
+<td>#008080</td>
+</tr>
+<tr>
+<td>aqua(\u6c34\u84dd)</td>
+<td>#00FFFF</td>
+</tr>
+</tbody>
+</table>
+<h3 id="\u6269\u5c55\u989c\u8272\u5173\u952e\u8bcd"><a href="#\u6269\u5c55\u989c\u8272\u5173\u952e\u8bcd" class="headerlink" title="\u6269\u5c55\u989c\u8272\u5173\u952e\u8bcd:"></a>\u6269\u5c55\u989c\u8272\u5173\u952e\u8bcd:</h3><table>
+<thead>
+<tr>
+<th>\u989c\u8272\u540d</th>
+<th>\u5341\u516d\u8fdb\u5236RGB\u503c</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>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/references/color-names.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/references/common-attrs.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/references/common-attrs.html b/content/cn/v-0.10/references/common-attrs.html
new file mode 100644
index 0000000..0adbabc
--- /dev/null
+++ b/content/cn/v-0.10/references/common-attrs.html
@@ -0,0 +1,1098 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u901a\u7528\u7279\u6027 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u901a\u7528\u7279\u6027\u7279\u6027\uff08attribute\uff09\u4e0e HTML \u4e2d\u5143\u7d20\u7279\u6027\u7c7b\u4f3c\uff0c\u63d0\u4f9b\u4e86\u4e0e Weex \u5143\u7d20\u6709\u5173\u7684\u5176\u4ed6\u9644\u52a0\u4fe1\u606f\u3002\u6240\u6709\u7684\u5143\u7d20\u90fd\u53ef\u4ee5\u62e5\u6709\u7279\u6027, \u7279\u6027\u603b\u662f\u5728 Weex \u5143\u7d20\u7684\u8d77\u59cb\u6807\u7b7e\u4e2d\u5b9a\u4e49\uff0c\u5e76\u603b\u662f\u4ee5\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u51fa\u73b0\uff0c\u4f8b\u5982\uff1aname=&quot;value&quot;\u3002\u53ef\u4ee5\u4f7f\u7528 Mustache \u5bf9\u7279\u6027\u503c\u8fdb\u884c\u6570\u636e\u7ed1\u5b9a\u3002
+Notes!
+Weex \u9075\u5faa HTML attribute \u547d\u540d\u89c4\u8303, \u6240\u4ee5\u8bf7 \u4e0d\u8981\u5728\u7279\u6027">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u901a\u7528\u7279\u6027">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/references/common-attrs.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u901a\u7528\u7279\u6027\u7279\u6027\uff08attribute\uff09\u4e0e HTML \u4e2d\u5143\u7d20\u7279\u6027\u7c7b\u4f3c\uff0c\u63d0\u4f9b\u4e86\u4e0e Weex \u5143\u7d20\u6709\u5173\u7684\u5176\u4ed6\u9644\u52a0\u4fe1\u606f\u3002\u6240\u6709\u7684\u5143\u7d20\u90fd\u53ef\u4ee5\u62e5\u6709\u7279\u6027, \u7279\u6027\u603b\u662f\u5728 Weex \u5143\u7d20\u7684\u8d77\u59cb\u6807\u7b7e\u4e2d\u5b9a\u4e49\uff0c\u5e76\u603b\u662f\u4ee5\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u51fa\u73b0\uff0c\u4f8b\u5982\uff1aname=&quot;value&quot;\u3002\u53ef\u4ee5\u4f7f\u7528 Mustache \u5bf9\u7279\u6027\u503c\u8fdb\u884c\u6570\u636e\u7ed1\u5b9a\u3002
+Notes!
+Weex \u9075\u5faa HTML attribute \u547d\u540d\u89c4\u8303, \u6240\u4ee5\u8bf7 \u4e0d\u8981\u5728\u7279\u6027">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.953Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u901a\u7528\u7279\u6027">
+<meta name="twitter:description" content="\u901a\u7528\u7279\u6027\u7279\u6027\uff08attribute\uff09\u4e0e HTML \u4e2d\u5143\u7d20\u7279\u6027\u7c7b\u4f3c\uff0c\u63d0\u4f9b\u4e86\u4e0e Weex \u5143\u7d20\u6709\u5173\u7684\u5176\u4ed6\u9644\u52a0\u4fe1\u606f\u3002\u6240\u6709\u7684\u5143\u7d20\u90fd\u53ef\u4ee5\u62e5\u6709\u7279\u6027, \u7279\u6027\u603b\u662f\u5728 Weex \u5143\u7d20\u7684\u8d77\u59cb\u6807\u7b7e\u4e2d\u5b9a\u4e49\uff0c\u5e76\u603b\u662f\u4ee5\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u51fa\u73b0\uff0c\u4f8b\u5982\uff1aname=&quot;value&quot;\u3002\u53ef\u4ee5\u4f7f\u7528 Mustache \u5bf9\u7279\u6027\u503c\u8fdb\u884c\u6570\u636e\u7ed1\u5b9a\u3002
+Notes!
+Weex \u9075\u5faa HTML attribute \u547d\u540d\u89c4\u8303, \u6240\u4ee5\u8bf7 \u4e0d\u8981\u5728\u7279\u6027">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link current ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link current ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u901a\u7528\u7279\u6027
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.953Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u901a\u7528\u7279\u6027"><a href="#\u901a\u7528\u7279\u6027" class="headerlink" title="\u901a\u7528\u7279\u6027"></a>\u901a\u7528\u7279\u6027</h1><p>\u7279\u6027\uff08attribute\uff09\u4e0e HTML \u4e2d\u5143\u7d20\u7279\u6027\u7c7b\u4f3c\uff0c\u63d0\u4f9b\u4e86\u4e0e Weex \u5143\u7d20\u6709\u5173\u7684\u5176\u4ed6\u9644\u52a0\u4fe1\u606f\u3002\u6240\u6709\u7684\u5143\u7d20\u90fd\u53ef\u4ee5\u62e5\u6709\u7279\u6027, \u7279\u6027\u603b\u662f\u5728 Weex \u5143\u7d20\u7684\u8d77\u59cb\u6807\u7b7e\u4e2d\u5b9a\u4e49\uff0c\u5e76\u603b\u662f\u4ee5\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u51fa\u73b0\uff0c\u4f8b\u5982\uff1a<code>name="value"</code>\u3002\u53ef\u4ee5\u4f7f\u7528 <a href="https://mustache.github.io/" target="_blank" rel="external">Mustache</a> \u5bf9\u7279\u6027\u503c\u8fdb\u884c\u6570\u636e\u7ed1\u5b9a\u3002</p>
+<p><strong>Notes!</strong></p>
+<p>Weex \u9075\u5faa <a href="https://en.wikipedia.org/wiki/HTML_attribute" target="_blank" rel="external">HTML attribute</a> \u547d\u540d\u89c4\u8303, \u6240\u4ee5\u8bf7 <strong>\u4e0d\u8981\u5728\u7279\u6027\u4e2d\u4f7f\u7528\u9a7c\u5cf0\u98ce\u683c\uff08CamelCase\uff09</strong> , \u4f7f\u7528<code>-</code>\u8fde\u63a5\u7b26\u7684<strong>\u7f8a\u8089\u4e32\u98ce\u683c\uff08kebab-case\uff09</strong> \u624d\u662f\u66f4\u597d\u7684\u547d\u540d\u65b9\u5f0f\u3002</p>
+<p>\u6240\u6709 Weex \u5143\u7d20\u90fd\u62e5\u6709\u4ee5\u4e0b\u7279\u6027\uff1a </p>
+<h2 id="id"><a href="#id" class="headerlink" title="id"></a>id</h2><p>\u4e3a <code><template></code> \u5185\u5b9a\u4e49\u7684\u5143\u7d20\u6307\u5b9a\u4e00\u4e2a\u552f\u4e00\u7684 id\uff0c\u901a\u8fc7 <code>this.$el(id)</code> \u53ef\u4ee5\u5bb9\u6613\u5730\u83b7\u53d6\u4e00\u4e2a Weex \u5143\u7d20\u7684\u5f15\u7528\u3002\u66f4\u591a\u4fe1\u606f\u53ef\u53c2\u8003 <a href="./api.html">Instance APIs</a> </p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">list</span> <span class="attr">class</span>=<span class="string">"list"</span>></span></div><div class="line"> <span class="tag"><<span class="name">cell</span> <span class="attr">class</span>=<span class="string">"row"</span> <span class="attr">repeat</span>=<span class="string">"item in rows"</span> <span class="attr">id</span>=<span class="string">"item-{{$index}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"item-title"</span>></span>row {{item.id}}<s
pan class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">cell</span>></span></div><div class="line"> <span class="tag"></<span class="name">list</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="undefined"></span><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">rows</span>:[</div><div class="line"> {<s
pan class="attr">id</span>: <span class="number">1</span>},</div><div class="line"> {<span class="attr">id</span>: <span class="number">2</span>},</div><div class="line"> {<span class="attr">id</span>: <span class="number">3</span>},</div><div class="line"> {<span class="attr">id</span>: <span class="number">4</span>},</div><div class="line"> {<span class="attr">id</span>: <span class="number">5</span>}</div><div class="line"> ]</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/b5032fa96e3e657711916148b1978ad3" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="style"><a href="#style" class="headerlink" title="style"></a>style</h2><p>\u4e3a\u5143\u7d20\u5b9a\u4e49\u884c\u5185\u6837\u5f0f\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 200px; height: 200px; color: #ff0000;"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"padding: {{x}}; margin: 0"</span>></span><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+<h2 id="class"><a href="#class" class="headerlink" title="class"></a>class</h2><p>\u4e3a\u5143\u7d20\u5b9a\u4e49\u4e00\u4e2a\u6216\u591a\u4e2a\u7c7b\u540d\uff08\u5f15\u7528\u6837\u5f0f\u8868\u4e2d\u7684\u7c7b\uff09\u3002 </p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"button"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"button {{btnStatus}}"</span>></span><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+<h2 id="repeat"><a href="#repeat" class="headerlink" title="repeat"></a>repeat</h2><p>\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 <code>repeat</code> \u7279\u6027\u6839\u636e\u4e00\u4e2a\u6570\u7ec4\u8fdb\u884c\u6e32\u67d3\uff0c\u8fed\u4ee3\u5730\u751f\u6210\u5f53\u524d\u6807\u7b7e\u7684\u5185\u5bb9\u3002<code>repeat</code> \u7279\u6027\u6709\u7740 <code>item in items</code> \u5f62\u5f0f\u7684\u7279\u6b8a\u8bed\u6cd5\uff0c\u5176\u4e2d\uff0c<code>items</code> \u662f\u6570\u7ec4\u6570\u636e\uff0c<code>item</code> \u662f\u6570\u7ec4\u5143\u7d20\u8fed\u4ee3\u7684\u522b\u540d\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">list</span> <span class="attr">class</span>=<span class="string">"list"</span>></span></div><div class="line"> <span class="tag"><<span class="name">cell</span> <span class="attr">class</span>=<span class="string">"row"</span> <span class="attr">repeat</span>=<span class="string">"item in rows"</span> <span class="attr">id</span>=<span class="string">"item-{{$index}}"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"item-title"</span>></span>row {{item.id}}<span class="tag"></<span class="name">text</span>></span></div
><div class="line"> <span class="tag"></<span class="name">cell</span>></span></div><div class="line"> <span class="tag"></<span class="name">list</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="undefined"></span><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">rows</span>:[</div><div class="line"> {<span class="attr">id</span>: <span class="nu
mber">1</span>},</div><div class="line"> {<span class="attr">id</span>: <span class="number">2</span>},</div><div class="line"> {<span class="attr">id</span>: <span class="number">3</span>},</div><div class="line"> {<span class="attr">id</span>: <span class="number">4</span>},</div><div class="line"> {<span class="attr">id</span>: <span class="number">5</span>}</div><div class="line"> ]</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/b5032fa96e3e657711916148b1978ad3" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="if"><a href="#if" class="headerlink" title="if"></a>if</h2><p>\u63d0\u4f9b\u4e00\u4e2a\u5e03\u5c14\u503c\u6765\u51b3\u5b9a\u662f\u5426\u663e\u793a\u5f53\u524d\u6807\u7b7e\u3002\u5f53\u503c\u4e3a <code>true</code> \u65f6\uff0c\u5143\u7d20\u663e\u793a\uff0c\u4e3a <code>false</code> \u65f6\u5143\u7d20\u9690\u85cf\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">if</span>=<span class="string">"true"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">if</span>=<span class="string">"{{opened}}"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">if</span>=<span class="string">"{{direction === 'row'}}"</span>></span><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+<h2 id="append"><a href="#append" class="headerlink" title="append"></a>append</h2><p>append \u7279\u6027\u7528\u4e8e\u63a7\u5236\u6e32\u67d3\u6b21\u5e8f\u3002\u5b83\u7684\u53ef\u9009\u503c\u4e3a <code>tree</code> \u6216 <code>node</code>\uff0c\u9ed8\u8ba4\u4e3a <code>tree</code>\uff0c\u4e0d\u652f\u6301\u6570\u636e\u7ed1\u5b9a\u3002\u4e0d\u540c\u7684\u503c\u4f1a\u6267\u884c\u4e0d\u540c\u7684\u6e32\u67d3\u8fc7\u7a0b\uff1a</p>
+<ul>
+<li><code>append="tree"</code> \u662f\u4e00\u6b21\u6027\u6e32\u67d3\u6574\u4e2a\u8282\u70b9\u6811\uff0c\u6e32\u67d3\u66f4\u9ad8\u6548\uff0c\u4f46\u662f\u5982\u679c\u9875\u9762\u592a\u5927\u5bb9\u6613\u9020\u6210\u8f83\u957f\u65f6\u95f4\u7684\u767d\u5c4f\u3002</li>
+<li><code>append="node"</code> \u6240\u6709\u8282\u70b9\u9010\u4e2a\u6e32\u67d3\uff0c\u6574\u4f53\u6e32\u67d3\u901f\u5ea6\u7565\u6162\uff0c\u4f46\u662f\u7528\u6237\u4f53\u9a8c\u597d\u4e00\u4e9b\u3002</li>
+</ul>
+<p>\u901a\u8fc7 <code>node</code> \u548c <code>tree</code> \u53ef\u4ee5\u7cbe\u7ec6\u5316\u5730\u63a7\u5236\u9875\u9762\u5c55\u793a\u7684\u903b\u8f91\u548c\u9897\u7c92\u5ea6\uff0c\u4e00\u822c\u6bd4\u8f83\u597d\u7684\u5b9e\u8df5\u4e3a\u9996\u5c4f\u4ee5\u5185\u6309 <code>tree</code> \u89e3\u6790\uff0c\u9996\u5c4f\u4ee5\u5916\u6309 <code>node</code> \u89e3\u6790\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">append</span>=<span class="string">"tree"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">append</span>=<span class="string">"node"</span>></span><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
+<h2 id="\u4e8b\u4ef6\u5904\u7406-on\u2026"><a href="#\u4e8b\u4ef6\u5904\u7406-on\u2026" class="headerlink" title="\u4e8b\u4ef6\u5904\u7406 (on\u2026)"></a>\u4e8b\u4ef6\u5904\u7406 (on\u2026)</h2><p>\u5728 Weex \u6807\u7b7e\u4e0a\u6ce8\u518c\u4e8b\u4ef6\u5904\u7406\u5668\u3002\u4ee5 <code>on</code> \u52a0 \u4e8b\u4ef6\u540d\u4e3a <code>key</code>\uff0c\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u4e3a <code>value</code>\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"btn"</span> <span class="attr">onClick</span>=<span class="string">"alertMsg"</span>></span><span class="tag"><<span class="name">text</span>></span>Click me<span class="tag"></<span class="name">text</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"><span class="selector-class">.btn</span> {</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="att
ribute">align-items</span>: center;</div><div class="line"> <span class="attribute">width</span>: <span class="number">200</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">100</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#ff0000</span>;</div><div class="line"> <span class="attribute">border-radius</span>: <span class="number">5</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#ffffff</span>;</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"><span class="keyword">var</span> modal = <span class="built_in">require</span>(<span class="string">'@weex-module/modal'</span>)</div><div class="line"></div><div class
="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {},</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">alertMsg</span>: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> modal.alert({</div><div class="line"> <span class="attr">message</span>: <span class="string">'click'</span>,</div><div class="line"> <span class="attr">okTitle</span>: <span class="string">'alert'</span></div><div class="line"> }, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pr
e></td></tr></table></figure>
+<p><a href="http://dotwe.org/97de59d24d7667aa91187d59123d24a6" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/references/common-attrs.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[43/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/advanced/integrate-devtool-to-android.html
----------------------------------------------------------------------
diff --git a/content/cn/references/advanced/integrate-devtool-to-android.html b/content/cn/references/advanced/integrate-devtool-to-android.html
new file mode 100644
index 0000000..2780718
--- /dev/null
+++ b/content/cn/references/advanced/integrate-devtool-to-android.html
@@ -0,0 +1,1458 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u96c6\u6210 Devtools \u5230 Android | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u96c6\u6210 Devtools \u5230 AndroidWeex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e Android \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002
+Android \u5e94\u7528\u63a5\u5165\u6dfb\u52a0\u4f9d\u8d56\u53ef\u4ee5\u901a\u8fc7 Gradle \u6216\u8005 Maven \u6dfb\u52a0\u5bf9 devtools aar \u7684\u4f9d\u8d56\uff0c\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5bf9\u6e90\u7801\u4f9d\u8d56\u3002">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u96c6\u6210 Devtools \u5230 Android">
+<meta property="og:url" content="https://weex.apache.org/cn/references/advanced/integrate-devtool-to-android.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u96c6\u6210 Devtools \u5230 AndroidWeex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e Android \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002
+Android \u5e94\u7528\u63a5\u5165\u6dfb\u52a0\u4f9d\u8d56\u53ef\u4ee5\u901a\u8fc7 Gradle \u6216\u8005 Maven \u6dfb\u52a0\u5bf9 devtools aar \u7684\u4f9d\u8d56\uff0c\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5bf9\u6e90\u7801\u4f9d\u8d56\u3002">
+<meta property="og:image" content="https://weex.apache.org//img.alicdn.com/tps/TB1aKy4NXXXXXacXVXXXXXXXXXX-1019-756.png">
+<meta property="og:image" content="https://weex.apache.org//img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png">
+<meta property="og:image" content="https://weex.apache.org//img.alicdn.com/tps/TB1igLoMVXXXXawapXXXXXXXXXX-786-1610.jpg">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.836Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u96c6\u6210 Devtools \u5230 Android">
+<meta name="twitter:description" content="\u96c6\u6210 Devtools \u5230 AndroidWeex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e Android \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002
+Android \u5e94\u7528\u63a5\u5165\u6dfb\u52a0\u4f9d\u8d56\u53ef\u4ee5\u901a\u8fc7 Gradle \u6216\u8005 Maven \u6dfb\u52a0\u5bf9 devtools aar \u7684\u4f9d\u8d56\uff0c\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5bf9\u6e90\u7801\u4f9d\u8d56\u3002">
+<meta name="twitter:image" content="https://weex.apache.org//img.alicdn.com/tps/TB1aKy4NXXXXXacXVXXXXXXXXXX-1019-756.png">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link current ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link current ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u96c6\u6210 Devtools \u5230 Android
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.836Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u96c6\u6210-Devtools-\u5230-Android"><a href="#\u96c6\u6210-Devtools-\u5230-Android" class="headerlink" title="\u96c6\u6210 Devtools \u5230 Android"></a>\u96c6\u6210 Devtools \u5230 Android</h1><p>Weex Devtools \u80fd\u591f\u65b9\u4fbf\u8c03\u8bd5 Weex \u9875\u9762\uff0c\u4f46\u6b64\u529f\u80fd\u79bb\u4e0d\u5f00 Native \u7684\u652f\u6301\u3002\u5982\u4f55\u8ba9\u4f60\u7684 App \u4e5f\u96c6\u6210 Devtools\uff0c\u5728\u672c\u7ae0\u5c06\u4f1a\u8be6\u7ec6\u8bf4\u660e Android \u7aef\u5982\u4f55\u63a5\u5165 Weex Devtools\u3002</p>
+<h2 id="Android-\u5e94\u7528\u63a5\u5165"><a href="#Android-\u5e94\u7528\u63a5\u5165" class="headerlink" title="Android \u5e94\u7528\u63a5\u5165"></a>Android \u5e94\u7528\u63a5\u5165</h2><h3 id="\u6dfb\u52a0\u4f9d\u8d56"><a href="#\u6dfb\u52a0\u4f9d\u8d56" class="headerlink" title="\u6dfb\u52a0\u4f9d\u8d56"></a>\u6dfb\u52a0\u4f9d\u8d56</h3><p>\u53ef\u4ee5\u901a\u8fc7 Gradle \u6216\u8005 Maven \u6dfb\u52a0\u5bf9 devtools aar \u7684\u4f9d\u8d56\uff0c\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5bf9\u6e90\u7801\u4f9d\u8d56\u3002\u5f3a\u70c8\u5efa\u8bae\u4f7f\u7528\u6700\u65b0\u7248\u672c\uff0c\u56e0\u4e3a Weex SDK \u548c devtools \u90fd\u5728\u5feb\u901f\u7684\u8fed\u4ee3\u5f00\u53d1\u4e2d\uff0c\u65b0\u7248\u672c\u4f1a\u6709\u66f4\u591a\u60ca\u559c\uff0c\u540c\u65f6\u4e5f\u4fee\u590d\u8001\u7248\u672c\u4e2d\u4e00\u4e9b\u95ee\u9898\u3002\u6700\u65b0\u7684 release \u7248\u672c\u53ef\u5728<a href="https://github.com/weexteam/weex_devtools_android/releases" target="_blank" rel="external">\u8fd9\u91cc</a>\u67e5\u770b\u3002\u6240\u6709\u7684 release \u7248\u672c\u90fd\u4f1a\u53d1\u5e03\u5230 <a href="https://bintray.com/alibabaweex/maven/weex_inspector" target="_blank" rel="external">jcenter repo</a>\u3002</p>
+<ul>
+<li><p><em>Gradle \u4f9d\u8d56</em></p>
+<figure class="highlight gradle"><table><tr><td class="code"><pre><div class="line"><span class="keyword">dependencies</span> {</div><div class="line"> <span class="keyword">compile</span> <span class="string">'com.taobao.android:weex_inspector:0.8.0.0'</span></div><div class="line">}</div></pre></td></tr></table></figure>
+</li>
+<li><p><em>Maven\u4f9d\u8d56</em></p>
+<figure class="highlight xml"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">dependency</span>></span></div><div class="line"> <span class="tag"><<span class="name">groupId</span>></span>com.taobao.android<span class="tag"></<span class="name">groupId</span>></span></div><div class="line"> <span class="tag"><<span class="name">artifactId</span>></span>weex_inspector<span class="tag"></<span class="name">artifactId</span>></span></div><div class="line"> <span class="tag"><<span class="name">version</span>></span>0.8.0.0<span class="tag"></<span class="name">version</span>></span></div><div class="line"> <span class="tag"><<span class="name">type</span>></span>pom<span class="tag"></<span class="name">type</span>></span></div><div class="line"><span class="tag"></<span class="name">dependency</span>></span></div></pre></td></tr></table></figure>
+</li>
+<li><p><em>\u6e90\u7801\u4f9d\u8d56</em></p>
+<p>\u9700\u8981\u590d\u5236 <a href="https://github.com/weexteam/weex_devtools_android/tree/master/inspector" target="_blank" rel="external">inspector</a> \u76ee\u5f55\u5230\u4f60\u7684 App \u7684\u540c\u7ea7\u76ee\u5f55\uff0c\u7136\u540e\u5728\u5de5\u7a0b\u7684 <code>settings.gradle</code> \u6587\u4ef6\u4e0b\u6dfb\u52a0 <code>include ":inspector"</code>\uff0c\u6b64\u8fc7\u7a0b\u53ef\u4ee5\u53c2\u8003 playground \u6e90\u7801\u7684\u5de5\u7a0b\u914d\u7f6e\u53ca\u5176\u914d\u7f6e\uff0c\u7136\u540e\u5728 App \u7684 <code>build.gralde</code> \u4e2d\u6dfb\u52a0\u4f9d\u8d56\u3002</p>
+<figure class="highlight gradle"><table><tr><td class="code"><pre><div class="line"><span class="keyword">dependencies</span> {</div><div class="line"> <span class="keyword">compile</span> <span class="keyword">project</span>(<span class="string">':inspector'</span>)</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u53e6\u5916 weex_inspector \u4e2d\u6709\u4e00\u90e8\u5206\u5305\u662f\u4ee5 provided \u7684\u65b9\u5f0f\u5f15\u5165\uff0c\u63a5\u5165\u65b9\u9700\u8981\u81ea\u884c\u89e3\u51b3\u4f9d\u8d56\u548c\u7248\u672c\u51b2\u7a81\u3002</p>
+<ul>
+<li><p><strong>provided\u65b9\u5f0f\u5f15\u7528\u7684\u5305</strong></p>
+<figure class="highlight gradle"><table><tr><td class="code"><pre><div class="line"><span class="keyword">dependencies</span> {</div><div class="line"> provided <span class="string">'com.google.code.findbugs:jsr305:2.0.1'</span></div><div class="line"> provided <span class="string">'com.android.support:appcompat-v7:23.1.1'</span></div><div class="line"> provided <span class="string">'com.taobao.android:weex_sdk:0.8.0'</span></div><div class="line"> provided <span class="string">'com.alibaba:fastjson:1.1.45+'</span></div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure>
+</li>
+</ul>
+</li>
+</ul>
+<ul>
+<li><p><strong>\u53cd\u5c04\u5f15\u7528\u7684\u5305(0.8.0.0\u4ee5\u4e0a\u7248\u672c)</strong></p>
+<figure class="highlight gradle"><table><tr><td class="code"><pre><div class="line"><span class="keyword">dependencies</span> {</div><div class="line"> <span class="keyword">compile</span> <span class="string">'com.squareup.okhttp:okhttp:2.3.0'</span></div><div class="line"> <span class="keyword">compile</span> <span class="string">'com.squareup.okhttp:okhttp-ws:2.3.0'</span></div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure>
+</li>
+</ul>
+<p> \u6216\u8005</p>
+ <figure class="highlight gradle"><table><tr><td class="code"><pre><div class="line"><span class="keyword">dependencies</span> {</div><div class="line"> <span class="keyword">compile</span> <span class="string">'com.squareup.okhttp:okhttp:3.4.1'</span></div><div class="line"> <span class="keyword">compile</span> <span class="string">'com.squareup.okhttp:okhttp-ws:3.4.1'</span></div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure>
+<h4 id="\u7248\u672c\u517c\u5bb9"><a href="#\u7248\u672c\u517c\u5bb9" class="headerlink" title="\u7248\u672c\u517c\u5bb9"></a>\u7248\u672c\u517c\u5bb9</h4><table>
+<thead>
+<tr>
+<th>weex sdk</th>
+<th>weex inspector</th>
+<th>Debugger Server</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>0.8.0.1+</td>
+<td>0.0.8.1+</td>
+<td>0.2.39+</td>
+</tr>
+<tr>
+<td>0.7.0+</td>
+<td>0.0.7.13</td>
+<td>0.2.38</td>
+</tr>
+<tr>
+<td>0.6.0+</td>
+<td>0.0.2.2</td>
+<td>-</td>
+</tr>
+</tbody>
+</table>
+<h3 id="\u6dfb\u52a0-Debug-\u6a21\u5f0f\u5f00\u5173"><a href="#\u6dfb\u52a0-Debug-\u6a21\u5f0f\u5f00\u5173" class="headerlink" title="\u6dfb\u52a0 Debug \u6a21\u5f0f\u5f00\u5173"></a>\u6dfb\u52a0 Debug \u6a21\u5f0f\u5f00\u5173</h3><p>\u63a7\u5236\u8c03\u8bd5\u6a21\u5f0f\u7684\u6253\u5f00\u548c\u5173\u95ed\u7684\u5173\u952e\u70b9\u53ef\u4ee5\u6982\u62ec\u4e3a\u4e09\u6761\u89c4\u5219\u3002</p>
+<p><strong>\u89c4\u5219\u4e00\uff1a\u901a\u8fc7 <code>sRemoteDebugMode</code> \u548c <code>sRemoteDebugProxyUrl</code> \u548c\u6765\u8bbe\u7f6e\u5f00\u5173\u548c Debugger Server \u5730\u5740\u3002</strong></p>
+<p>Weex SDK \u7684 <code>WXEnvironment</code> \u7c7b\u91cc\u6709\u4e00\u5bf9\u9759\u6001\u53d8\u91cf\u6807\u8bb0\u4e86 Weex \u5f53\u524d\u7684\u8c03\u8bd5\u6a21\u5f0f\u662f\u5426\u5f00\u542f\u5206\u522b\u662f\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">boolean</span> sRemoteDebugMode; <span class="comment">// \u662f\u5426\u5f00\u542f debug \u6a21\u5f0f\uff0c\u9ed8\u8ba4\u5173\u95ed</span></div><div class="line"><span class="keyword">public</span> <span class="keyword">static</span> String sRemoteDebugProxyUrl; <span class="comment">// DebugServer\u7684websocket\u5730\u5740</span></div></pre></td></tr></table></figure>
+<p>\u65e0\u8bba\u5728 App \u4e2d\u65e0\u8bba\u4ee5\u4f55\u79cd\u65b9\u5f0f\u8bbe\u7f6e Debug \u6a21\u5f0f\uff0c\u90fd\u5fc5\u987b\u5728\u6070\u5f53\u7684\u65f6\u673a\u8c03\u7528\u7c7b\u4f3c\u5982\u4e0b\u7684\u65b9\u6cd5\u6765\u8bbe\u7f6e <code>WXEnvironment.sRemoteDebugMode</code> \u548c <code>WXEnvironment.sRemoteDebugProxyUrl</code>\u3002</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">initDebugEnvironment</span><span class="params">(<span class="keyword">boolean</span> enable, String host)</span> </span>{</div><div class="line"> WXEnvironment.sRemoteDebugMode = enable;</div><div class="line"> WXEnvironment.sRemoteDebugProxyUrl = <span class="string">"ws://"</span> + host + <span class="string">":8088/debugProxy/native"</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
+<p><strong>\u89c4\u5219\u4e8c\uff1a\u4fee\u6539 <code>sRemoteDebugMode</code> \u540e\u4e00\u5b9a\u8981\u8c03\u7528<code>`WXSDKEngine.reload()</code>\u3002</strong></p>
+<p>\u4e00\u822c\u4f86\u8aaa\uff0c\u5728\u4fee\u6539\u4e86 <code>WXEnvironment.sRemoteDebugMode</code> \u4ee5\u540e\u8c03\u7528\u4e86 <code>WXSDKEngine.reload()</code> \u65b9\u6cd5\u624d\u80fd\u591f\u4f7f Debug\u6a21\u5f0f\u751f\u6548\u3002<code>WXSDKEngine.reload()</code> \u7528\u6765\u91cd\u7f6e Weex \u7684\u8fd0\u884c\u73af\u5883\u4e0a\u4e0b\u6587\uff0c\u5728\u5207\u6362\u8c03\u8bd5\u6a21\u5f0f\u65f6\u9700\u8981\u8c03\u7528\u6b64\u65b9\u6cd5\u6765\u521b\u5efa\u65b0\u7684 Weex \u8fd0\u884c\u65f6\u548c DebugBridge \u5e76\u5c06\u6240\u6709\u7684 JS \u8c03\u7528\u6865\u63a5\u5230\u8c03\u8bd5\u670d\u52a1\u5668\u6267\u884c\u3002\u5728 reload \u8fc7\u7a0b\u4e2d\u4f1a\u8c03\u7528 launchInspector\uff0c\u8fd9\u5c31\u662f SDK \u63a7\u5236 Debug \u6a21\u5f0f\u6700\u6838\u5fc3\u4e00\u4e2a\u65b9\u6cd5\uff0c\u5176\u4f20\u5165\u53c2\u6570\u5373\u4e3a <code>sRemoteDebugMode</code>\uff0c\u82e5\u4e3a <code>true</code> \u5219\u8be5\u65b9\u6cd5\u4e2d\u5c1d\u8bd5\u4ee5\u53cd\u5c04\u7684\u65b9\u5f0f\u83b7\u53d6 DebugBridge \u7528\u6765\u5728\u8fdc\u7aef\u6267\u884c JS\uff0c\u5426\u5219\u5728\u672c\u5730\u8fd0\u884c\u3002</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">launchInspector</span><span class="params">(<span class="keyword">boolean</span> remoteDebug)</span> </span>{</div><div class="line"> <span class="keyword">if</span> (WXEnvironment.isApkDebugable()) {</div><div class="line"> <span class="keyword">try</span> {</div><div class="line"> <span class="keyword">if</span> (mWxDebugProxy != <span class="keyword">null</span>) {</div><div class="line"> mWxDebugProxy.stop();</div><div class="line"> }</div><div class="line"> HackedClass<Object> debugProxyClass = WXHack.into(<span class="string">"com.taobao.weex.devtools.debug.DebugServerProxy"</span>);</div><div class="line"> mWxDebugProxy = (IWXDebugProxy) debugProxyClass.constructor(Context.class, WXBridgeManager.class)</div><div class="lin
e"> .getInstance(WXEnvironment.getApplication(), WXBridgeManager.<span class="keyword">this</span>);</div><div class="line"> <span class="keyword">if</span> (mWxDebugProxy != <span class="keyword">null</span>) {</div><div class="line"> mWxDebugProxy.start();</div><div class="line"> <span class="keyword">if</span> (remoteDebug) {</div><div class="line"> mWXBridge = mWxDebugProxy.getWXBridge();</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">if</span> (mWXBridge != <span class="keyword">null</span> && !(mWXBridge <span class="keyword">instanceof</span> WXBridge)) {</div><div class="line"> mWXBridge = <span class="keyword">null</span>;</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"> } <span class="keyword">catch</span> (HackAsserti
onException e) {</div><div class="line"> WXLogUtils.e(<span class="string">"launchInspector HackAssertionException "</span>, e);</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u53ea\u8981\u9075\u5faa\u4e0a\u9762\u7684\u539f\u7406\uff0c\u5f00\u542f Debug \u6a21\u5f0f\u7684\u65b9\u5f0f\u548c\u65f6\u673a\u53ef\u7531\u63a5\u5165\u65b9\u7075\u6d3b\u5b9e\u73b0\u3002\u4ece launchInspector \u53ef\u4ee5\u770b\u5230\uff0cSDK \u5bf9 devtools \u7684 aar \u5305\u5e76\u65e0\u5f3a\u4f9d\u8d56,\u6211\u4eec\u7684 App \u53ea\u9700\u8981\u5728 Debug \u5305\u4e2d\u6253\u5305\u8be5 aar \u5373\u53ef\uff0c\u8fd9\u6837\u591a\u5c11\u53ef\u4ee5\u7f13\u89e3\u5305\u5927\u5c0f\u95ee\u9898\u548c\u5b89\u5168\u95ee\u9898\u3002</p>
+<p><strong>\u4f8b\u5916\uff1a</strong> <em>\u82e5\u4fee\u6539 <code>WXEnvironment.sRemoteDebugMode</code> \u7684\u65f6\u673a\u5728 <code>WXBridgeManager</code> \u521d\u59cb\u5316\u548c restart \u548c\u4e4b\u524d\u5219 <code>WXSDKEngine.reload()</code> \u53ef\u5ffd\u7565.</em></p>
+<p><strong>\u89c4\u5219\u4e09\uff1a\u901a\u8fc7\u54cd\u5e94 <code>ACTION_DEBUG_INSTANCE_REFRESH</code> \u5e7f\u64ad\u53ca\u65f6\u5237\u65b0\u3002</strong></p>
+<p>\u5e7f\u64ad <code>ACTION_DEBUG_INSTANCE_REFRESH</code> \u5728\u8c03\u8bd5\u6a21\u5f0f\u5207\u6362\u548c Chrome \u8c03\u8bd5\u9875\u9762\u5237\u65b0\u65f6\u53d1\u51fa\uff0c\u4e3b\u8981\u7528\u6765\u901a\u77e5\u5f53\u524d\u7684 Weex\u5bb9\u5668\u4ee5 Debug \u6a21\u5f0f\u91cd\u65b0\u52a0\u8f7d\u5f53\u524d\u9875\u3002\u5728 playground \u4e2d\u7684\u5904\u7406\u8fc7\u7a0b\u5982\u4e0b\uff1a</p>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">RefreshBroadcastReceiver</span> <span class="keyword">extends</span> <span class="title">BroadcastReceiver</span> </span>{</div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onReceive</span><span class="params">(Context context, Intent intent)</span> </span>{</div><div class="line"> <span class="keyword">if</span> (IWXDebugProxy.ACTION_DEBUG_INSTANCE_REFRESH.equals(intent.getAction())) {</div><div class="line"> <span class="keyword">if</span> (mUri != <span class="keyword">null</span>) {</div><div class="line"> <span class="keyword">if</span> (TextUtils.equals(mUri.getScheme(), <span class="string">"http"</span>)
|| TextUtils.equals(mUri.getScheme(), <span class="string">"https"</span>)) {</div><div class="line"> loadWXfromService(mUri.toString());</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> loadWXfromLocal(<span class="keyword">true</span>);</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u5982\u679c\u63a5\u5165\u65b9\u7684\u5bb9\u5668\u672a\u5bf9\u8be5\u5e7f\u64ad\u505a\u5904\u7406\uff0c\u90a3\u4e48\u5c06\u4e0d\u652f\u6301\u5237\u65b0\u548c\u8c03\u8bd5\u8fc7\u7a0b\u4e2d\u7f16\u8f91\u4ee3\u7801\u65f6\u7684 watch \u529f\u80fd\u3002</p>
+<h2 id="\u63a5\u5165\u793a\u4f8b"><a href="#\u63a5\u5165\u793a\u4f8b" class="headerlink" title="\u63a5\u5165\u793a\u4f8b"></a>\u63a5\u5165\u793a\u4f8b</h2><p>\u6700\u7b80\u5355\u65b9\u5f0f\u5c31\u662f\u590d\u7528 Playground \u7684\u76f8\u5173\u4ee3\u7801\uff0c\u6bd4\u5982\u626b\u7801\u548c\u5237\u65b0\u7b49\u6a21\u5757\uff0c\u4f46\u662f\u626b\u7801\u4e0d\u662f\u5fc5\u987b\u7684\uff0c\u5b83\u53ea\u662f\u4e0e App \u901a\u4fe1\u7684\u4e00\u79cd\u5f62\u5f0f\uff0c\u4e8c\u7ef4\u7801\u91cc\u7684\u5305\u542bDebugServer IP \u53ca bundle \u5730\u5740\u7b49\u4fe1\u606f\uff0c\u7528\u4e8e\u5efa\u7acb App \u548c Debugger Server \u4e4b\u95f4\u7684\u8fde\u63a5\u53ca\u52a8\u6001\u52a0\u8f7d bundle\u3002\u5728 Playground \u4e2d\u7ed9\u51fa\u4e86\u4e24\u79cd\u5f00\u542f debug \u6a21\u5f0f\u7684\u8303\u4f8b\u3002</p>
+<ul>
+<li>\u8303\u4f8b1\uff1a\u901a\u8fc7\u5728 <code>XXXApplication</code> \u4e2d\u8bbe\u7f6e\u5f00\u5173\u6253\u5f00\u8c03\u8bd5\u6a21\u5f0f</li>
+</ul>
+<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MyApplication</span> <span class="keyword">extends</span> <span class="title">Application</span> </span>{</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onCreate</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">super</span>.onCreate();</div><div class="line"> initDebugEnvironment(<span class="keyword">true</span>, <span class="string">"xxx.xxx.xxx.xxx"</span><span class="comment">/*"DEBUG_SERVER_HOST"*/</span>);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u8fd9\u79cd\u65b9\u5f0f\u6700\u76f4\u63a5\uff0c\u5728\u4ee3\u7801\u4e2d\u76f4\u63a5 hardcode \u4e86\u5f00\u542f\u8c03\u8bd5\u6a21\u5f0f\uff0c\u5982\u679c\u5728 SDK \u521d\u59cb\u5316\u4e4b\u524d\u8c03\u7528\u751a\u81f3\u8fde <code>WXSDKEngine.reload()</code> \u90fd\u4e0d\u9700\u8981\u8c03\u7528\uff0c\u63a5\u5165\u65b9\u5982\u679c\u9700\u8981\u66f4\u7075\u6d3b\u7684\u7b56\u7565\u53ef\u4ee5\u5c06 <code>initDebugEnvironment(boolean enable, String host)</code> \u548c <code>WXSDKEngine.reload()</code> \u7ec4\u5408\u5728\u4e00\u8d77\u5728\u5408\u9002\u7684\u4f4d\u7f6e\u548c\u65f6\u673a\u8c03\u7528\u5373\u53ef\u3002</p>
+<ul>
+<li>\u8303\u4f8b2\uff1a\u901a\u8fc7\u626b\u7801\u6253\u5f00\u8c03\u8bd5\u6a21\u5f0f</li>
+</ul>
+<p>Playground \u4e2d\u8f83\u591a\u7684\u4f7f\u7528\u626b\u7801\u7684\u65b9\u5f0f\u4f20\u9012\u4fe1\u606f\uff0c\u4e0d\u4ec5\u7528\u8fd9\u79cd\u65b9\u5f0f\u63a7\u5236 Debug \u6a21\u5f0f\u7684\u5f00\u5173,\u800c\u4e14\u8fd8\u901a\u8fc7\u5b83\u6765\u4f20\u5165 bundle \u7684 url \u76f4\u63a5\u8c03\u8bd5\u3002\u5e94\u5f53\u8bf4\u5728\u5f00\u53d1\u4e2d\u8fd9\u79cd\u65b9\u5f0f\u662f\u6bd4\u8f83\u9ad8\u6548\u7684\uff0c\u7701\u53bb\u4e86\u4fee\u6539 SDK \u4ee3\u7801\u91cd\u590d\u7f16\u8bd1\u548c\u5b89\u88c5 App \u7684\u9ebb\u70e6\uff0c\u7f3a\u70b9\u5c31\u662f\u8c03\u8bd5\u5de5\u5177\u8fd9\u79cd\u65b9\u5f0f\u63a5\u5165\u9700\u8981 App \u5177\u6709\u626b\u7801\u548c\u5904\u7406\u7279\u5b9a\u89c4\u5219\u4e8c\u7ef4\u7801\u7684\u80fd\u529b\u3002\u9664\u4e86 Playground \u4e2d\u7684\u65b9\u5f0f\uff0c\u63a5\u5165\u65b9\u4ea6\u53ef\u6839\u636e\u4e1a\u52a1\u573a\u666f\u5bf9 Debugger \u548c\u63a5\u5165\u65b9\u5f0f\u8fdb\u884c\u4e8c\u6b21\u5f00\u53d1\u3002</p>
+<p>Playground \u96c6\u6210\u7684\u5177\u4f53\u4ee3\u7801\u53ef\u53c2\u8003\u5982\u4e0b\u4e24\u4e2a\u6587\u4ef6\uff1a</p>
+<ul>
+<li><p>\u5f00\u5173\u63a7\u5236\uff0c\u4e3b\u8981\u53c2\u8003\u5bf9\u4e8c\u7ef4\u7801\u7684\u5904\u7406\u90e8\u5206\uff0c\u8be6\u89c1 <a href="https://github.com/weexteam/weex_devtools_android/blob/master/playground/app/src/main/java/com/alibaba/weex/WXApplication.java" target="_blank" rel="external"><code>WXApplication.java</code></a></p>
+</li>
+<li><p>\u5237\u65b0\u63a7\u5236 \uff0c\u4e3b\u8981\u53c2\u8003\u662f\u5bf9\u5bb9\u5668 <code>ACTION_DEBUG_INSTANCE_REFRESH</code>\u7684\u5904\u7406\uff0c\u8be6\u89c1 <a href="https://github.com/weexteam/weex_devtools_android/blob/master/playground/app/src/main/java/com/alibaba/weex/WXPageActivity.java" target="_blank" rel="external"><code>WXPageActivity.java</code></a></p>
+</li>
+</ul>
+<h2 id="\u725b\u5200\u5c0f\u8bd5"><a href="#\u725b\u5200\u5c0f\u8bd5" class="headerlink" title="\u725b\u5200\u5c0f\u8bd5"></a>\u725b\u5200\u5c0f\u8bd5</h2><h3 id="\u524d\u7f6e\u5de5\u4f5c"><a href="#\u524d\u7f6e\u5de5\u4f5c" class="headerlink" title="\u524d\u7f6e\u5de5\u4f5c"></a>\u524d\u7f6e\u5de5\u4f5c</h3><p>\u5982\u679c\u672a\u5b89\u88c5 Debugger Server\uff0c\u5728\u547d\u4ee4\u884c\u6267\u884c <code>npm install -g weex-toolkit</code> \u65e2\u53ef\u4ee5\u5b89\u88c5\u8c03\u8bd5\u670d\u52a1\u5668\uff0c\u8fd0\u884c\u547d\u4ee4 <code>weex debug</code> \u5c31\u4f1a\u542f\u52a8 DebugServer \u5e76\u6253\u5f00\u4e00\u4e2a\u8c03\u8bd5\u9875\u9762\uff08\u8be6\u60c5\u8bf7\u67e5\u770b <a href="../../guide/index.html">\u300aGet Started\u300b</a>\uff09\u3002\u9875\u9762\u4e0b\u65b9\u4f1a\u5c55\u793a\u4e00\u4e2a\u4e8c\u7ef4\u7801\uff0c\u8fd9\u4e2a\u4e8c\u7ef4\u7801\u7528\u4e8e\u5411 App \u4f20\u9012 Server \u7aef\u7684\u5730\u5740\u5efa\u7acb\u8fde\u63a5\u3002</p>
+<p><img src="//img.alicdn.com/tps/TB1aKy4NXXXXXacXVXXXXXXXXXX-1019-756.png" alt="_"></p>
+<h3 id="\u5f00\u59cb\u8c03\u8bd5"><a href="#\u5f00\u59cb\u8c03\u8bd5" class="headerlink" title="\u5f00\u59cb\u8c03\u8bd5"></a>\u5f00\u59cb\u8c03\u8bd5</h3><p>\u5982\u679c\u4f60\u7684 App \u5ba2\u6237\u7aef\u5b8c\u6210\u4e86\u4ee5\u4e0a\u6b65\u9aa4\u90a3\u4e48\u606d\u559c\u4f60\u5df2\u7ecf\u63a5\u5165\u5b8c\u6bd5\uff0c\u53ef\u4ee5\u6109\u5feb\u7684\u8c03\u8bd5 Weex bundle \u4e86\uff0c\u8c03\u8bd5\u4f53\u9a8c\u548c\u7f51\u9875\u8c03\u8bd5\u4e00\u81f4\uff01\u5efa\u8bae\u65b0\u624b\u9996\u5148\u7528\u5b98\u65b9\u7684 Playground \u4f53\u9a8c\u4e00\u4e0b\u8c03\u8bd5\u6d41\u7a0b\u3002\u53ea\u9700\u8981\u542f\u52a8 App \u626b\u63cf Chrome \u8c03\u8bd5\u9875\u9762\u4e0b\u65b9\u7684\u7b2c\u4e00\u4e2a\u4e8c\u7ef4\u7801\u5373\u53ef\u5efa\u7acb\u4e0e Debugger Server \u7684\u901a\u4fe1\uff0cChorome \u7684\u8c03\u8bd5\u9875\u9762\u5c06\u4f1a\u5217\u51fa\u8fde\u63a5\u6210\u529f\u7684\u8bbe\u5907\u4fe1\u606f\u3002</p>
+<p><img src="//img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png" alt="devtools-main"></p>
+<h4 id="\u4e3b\u8981\u6b65\u9aa4\u5982\u4e0b"><a href="#\u4e3b\u8981\u6b65\u9aa4\u5982\u4e0b" class="headerlink" title="\u4e3b\u8981\u6b65\u9aa4\u5982\u4e0b"></a>\u4e3b\u8981\u6b65\u9aa4\u5982\u4e0b</h4><ol>
+<li>\u5982\u679c\u4f60\u8981\u52a0\u8f7d\u670d\u52a1\u5668\u4e0a bundle\uff0c\u7b2c\u4e00\u6b65\u5c31\u662f\u8981\u8ba9\u4f60\u7684 bundle sever \u8dd1\u8d77\u6765. \u5728 Playground \u4e2d\u7279\u522b\u7b80\u5355\uff0c\u53ea\u9700\u8981\u4f60\u5230 Weex \u6e90\u7801\u76ee\u5f55\u4e0b\uff0c\u8fd0\u884c <code>./start</code> \u5373\u53ef\u3002</li>
+<li>\u547d\u4ee4\u884c\u8fd0\u884c <code>weex debug</code> \u542f\u52a8 Debugger Server\uff0cChrome \u5c06\u4f1a\u6253\u5f00\u4e00\u4e2a\u7f51\u9875\uff0c\u5728\u7f51\u9875\u4e0b\u65b9\u6709\u4e00\u4e2a\u4e8c\u7ef4\u7801\u548c\u7b80\u5355\u7684\u4ecb\u7ecd\u3002</li>
+<li>\u542f\u52a8 App \u5e76\u786e\u8ba4\u6253\u5f00\u8c03\u8bd5\u6a21\u5f0f\u3002\u4f60\u5c06\u5728\u4e0a\u4e00\u6b65\u4e2d\u6253\u5f00\u7684\u7f51\u9875\u4e2d\u770b\u5230\u4e00\u4e2a\u8bbe\u5907\u5217\u8868\uff0c\u6bcf\u4e2a\u8bbe\u5907\u9879\u90fd\u6709\u4e24\u4e2a\u6309\u94ae\uff0c\u5206\u522b\u662f <code>Debugger</code> \u548c <code>Inspector</code>\u3002</li>
+<li>\u70b9\u51fb <code>Inspector</code> Chrome \u5c06\u521b\u5efa Inspector \u7f51\u9875\uff1b\u70b9\u51fb <code>Debugger</code> Chrome \u5c06\u521b\u5efa Debugger \u7f51\u9875\uff1b\u4e8c\u8005\u662f\u76f8\u4e92\u72ec\u7acb\u7684\u529f\u80fd\uff0c\u4e0d\u76f8\u4e92\u4f9d\u8d56\u3002</li>
+</ol>
+<hr>
+<h2 id="\u80cc\u666f\u77e5\u8bc6"><a href="#\u80cc\u666f\u77e5\u8bc6" class="headerlink" title="\u80cc\u666f\u77e5\u8bc6"></a>\u80cc\u666f\u77e5\u8bc6</h2><h3 id="Devtools-\u7ec4\u4ef6\u4ecb\u7ecd"><a href="#Devtools-\u7ec4\u4ef6\u4ecb\u7ecd" class="headerlink" title="Devtools \u7ec4\u4ef6\u4ecb\u7ecd"></a>Devtools \u7ec4\u4ef6\u4ecb\u7ecd</h3><p>Devtools \u6269\u5c55\u4e86 <a href="https://developer.chrome.com/devtools/docs/debugger-protocol" target="_blank" rel="external">Chrome Debugging Protocol</a>\uff0c\u5728\u5ba2\u6237\u7aef\u548c\u8c03\u8bd5\u670d\u52a1\u5668\u4e4b\u95f4\u7684\u91c7\u7528 <a href="https://en.wikipedia.org/wiki/JSON-RPC" target="_blank" rel="external">JSON-RPC</a> \u4f5c\u4e3a\u901a\u4fe1\u673a\u5236\uff0c\u672c\u8d28\u4e0a\u8c03\u8bd5\u8fc7\u7a0b\u662f\u4e24\u4e2a\u8fdb\u7a0b\u95f4\u534f\u540c\uff0c\u76f8\u4e92\u4ea4\u6362\u63a7\u5236\u6743\u53ca\u8fd0\u884c\u7ed3\u679c\u7684\u8fc7\u7a0b\u3002\u66f4\u591a\u7ec6\u8282\u8fd8\u8bf7\u9605\u8bfb <a href="http://www.atatech.org/articles/59284" target="_blank" rel="external">Weex Devtools Debugger \u7684\u6280\u672f\u9009\u578b\u5b9e\u5f55</a>\u8fd9\u7bc7\u6587\u7ae0\u3002</p>
+<ul>
+<li><p><strong>\u5ba2\u6237\u7aef</strong></p>
+<p>Devtools \u5ba2\u6237\u7aef\u4f5c\u4e3a aar \u88ab\u96c6\u6210 App \u4e2d\uff0c\u5b83\u901a\u8fc7 webscoket \u8fde\u63a5\u5230\u8c03\u8bd5\u670d\u52a1\u5668\uff0c\u6b64\u5904\u5e76\u672a\u505a\u5b89\u5168\u68c0\u67e5\u3002\u51fa\u4e8e\u5b89\u5168\u673a\u5236\u53ca\u5305\u5927\u5c0f\u8003\u8651\uff0c\u5f3a\u70c8\u5efa\u8bae\u63a5\u5165\u65b9\u53ea\u5728 debug \u7248\u672c\u4e2d\u6253\u5305\u6b64 aar\u3002</p>
+</li>
+<li><p><strong>\u670d\u52a1\u5668</strong></p>
+<p>Devtools \u670d\u52a1\u5668\u7aef\u662f\u4fe1\u606f\u4ea4\u6362\u7684\u4e2d\u67a2\uff0c\u65e2\u8fde\u63a5\u5ba2\u6237\u7aef\uff0c\u53c8\u8fde\u63a5 Chrome\uff0c\u5927\u591a\u6570\u60c5\u51b5\u4e0b\u626e\u6f14\u4e00\u4e2a\u6d88\u606f\u8f6c\u53d1\u670d\u52a1\u5668\u548c Runtime Manager \u7684\u89d2\u8272\u3002</p>
+</li>
+<li><p><strong>Web\u7aef</strong></p>
+<p>Chrome \u7684 V8 \u5f15\u64ce\u626e\u6f14\u7740 Bundle javascript runtime \u7684\u89d2\u8272\u3002\u5f00\u542f debug \u6a21\u5f0f\u540e\uff0c\u6240\u6709\u7684 bundle js \u4ee3\u7801\u90fd\u5728\u8be5\u5f15\u64ce\u4e0a\u8fd0\u884c\u3002\u53e6\u4e00\u65b9\u9762\u6211\u4eec\u4e5f\u590d\u7528\u4e86 Chrome \u524d\u7aef\u7684\u8c03\u8bd5\u754c\u9762\uff0c\u4f8b\u5982\u8bbe\u7f6e\u65ad\u70b9\uff0c\u67e5\u770b\u8c03\u7528\u6808\u7b49\uff0c\u8c03\u8bd5\u9875\u5173\u95ed\u5219 runtime \u5c06\u4f1a\u88ab\u6e05\u7406\u3002</p>
+</li>
+</ul>
+<p>\u8c03\u8bd5\u7684\u5927\u81f4\u8fc7\u7a0b\u8bf7\u53c2\u8003\u5982\u4e0b\u65f6\u5e8f\u56fe\u3002</p>
+<p><img src="//img.alicdn.com/tps/TB1igLoMVXXXXawapXXXXXXXXXX-786-1610.jpg" alt="debug sequence diagram"></p>
+<h2 id="FAQ"><a href="#FAQ" class="headerlink" title="FAQ"></a>FAQ</h2><p>\u5728\u5404\u4e1a\u52a1\u63a5\u5165\u8fc7\u7a0b\u4e2d\uff0c\u9646\u7eed\u53d1\u73b0\u4e00\u4e9b\u95ee\u9898\uff0c\u5bf9\u9ad8\u9891\u6b21\u7684\u95ee\u9898\u89e3\u7b54\u5982\u4e0b\uff0c\u5f00\u53d1\u4e2d\u4ee5 weex debug -V \u7684\u65b9\u5f0f\u542f\u52a8 Debugger Server \u53ef\u4ee5\u770b\u5230 server \u7aef\u7684 log \u4fe1\u606f\uff0c\u5bf9\u7167\u4e0a\u6587\u4e2d\u7684\u65f6\u5e8f\u56fe\u5bf9\u4e8e\u5b9a\u4f4d\u95ee\u9898\u8fd8\u662f\u975e\u5e38\u6709\u5e2e\u52a9\uff0c\u5efa\u8bae\u8c03\u8bd5\u4e2d\u9ed8\u8ba4\u5f00\u542f server \u7aef log\u3002</p>
+<ol>
+<li><p><strong>\u626b\u7801 App \u5728 DebugServerProxy \u4e2d\u629b\u51fa class not found</strong></p>
+<p>\u5df2\u77e5\u7684\u539f\u56e0\u5982\u4e0b\uff1a</p>
+<ul>
+<li>weex_inspector \u4ee5 provided \u65b9\u5f0f\u5f15\u7528\u7684\u5305\u662f\u5426\u5f15\u5165\u6210\u529f\uff0c\u5982 fastjson \u7b49\u3002</li>
+<li>weex_inspector \u4ee5 compile \u65b9\u5f0f\u5f15\u7528\u7684\u5305\u662f\u5426\u5f15\u5165\u6210\u529f\uff0c\u67d0\u4e9b app \u91cd\u65b0\u5f15\u5165 <code>com.squareup.okhttp:okhttp:2.3.0</code> \u548c <code>com.squareup.okhttp:okhttp-ws:2.3.0</code> \u5219\u4e0d\u518d\u62a5\u9519\u3002</li>
+<li>\u6df7\u6dc6\u89c4\u5219\u5f71\u54cd\u53cd\u5c04\u3002</li>
+</ul>
+</li>
+<li><p><strong>playground \u626b\u7801\u8c03\u8bd5 crash</strong></p>
+<p>\u5df2\u77e5\u7684\u539f\u56e0\u5982\u4e0b\uff1a</p>
+<ul>
+<li>\u7cfb\u7edf\u4e3a android 6+\uff0c\u5d29\u6e83\u4fe1\u606f\u63d0\u793a\u8fdb\u7a0b\u9700\u8981 <code>android.permission.READ_PHONE_STATE</code> \u6743\u9650\uff0c\u4ee3\u7801\u4e2d\u672a\u505a\u6743\u9650\u68c0\u67e5\uff0c\u5728 0.0.2.7 \u7248\u672c\u4ee5\u540e\u5df2\u4fee\u590d\uff0c\u4e0d\u518d\u9700\u8981\u6b64\u6743\u9650\u3002</li>
+</ul>
+</li>
+<li><p><strong>\u626b\u7801\u540e\u8bbe\u5907\u5217\u8868\u9875\u5e76\u6ca1\u6709\u51fa\u73b0\u6211\u7684\u8bbe\u5907\u4fe1\u606f</strong></p>
+<p>\u5df2\u77e5\u7684\u539f\u56e0\u5982\u4e0b\uff1a</p>
+<ul>
+<li>Debugger Server \u548c\u624b\u673a\u5728\u4e0d\u540c\u7f51\u6bb5\uff0c\u88ab\u9632\u706b\u5899\u9694\u79bb\u3002</li>
+<li>\u624b\u673a\u8fde\u63a5\u4e86 PC \u7aef\u7684\u4ee3\u7406\uff0c\u5f53\u524d\u5c1a\u4e0d\u652f\u6301\u3002</li>
+<li>\u591a\u8fdb\u7a0b\u8fde\u63a5\u670d\u52a1\u5668\u7aef\u7684\u540c\u4e00\u7aef\u53e3\uff0c\u6bd4\u5982\u5728 Application \u7684 <code>onCreate</code> \u4e2d\u521d\u59cb\u5316 sdk\uff0c\u82e5\u591a\u4e2a\u8fdb\u7a0b\u8fde\u63a5\u670d\u52a1\u5668\u7aef\u7684\u540c\u4e00\u7aef\u53e3\u5219\u62a5\u9519\uff0c\u5728 0.0.2.3 \u7248\u672c\u4ee5\u540e\u5df2\u652f\u6301\u591a\u8fdb\u7a0b\u65e0\u6b64\u95ee\u9898\u3002</li>
+</ul>
+</li>
+<li><p><strong>\u8c03\u8bd5\u8fc7\u7a0b\u4e2d\u9891\u7e41\u5237\u65b0\u8fde\u63a5\u5931\u8d25\uff0cServer \u7aef\u63d0\u793a\u91cd\u65b0\u542f\u52a8 App\uff0c\u975e\u5fc5\u73b0</strong></p>
+<p>\u5df2\u77e5\u7684\u539f\u56e0\u5982\u4e0b\uff1a</p>
+<ul>
+<li>\u591a\u7ebf\u7a0b\u64cd\u4f5c\u7f51\u7edc\u8fde\u63a5\u5f15\u8d77\uff0c\u5728\u9891\u7e41\u7684\u5373\u65ad\u5373\u8fde\u65f6\u5bb9\u6613\u89e6\u53d1\u3002\u5728 0.0.7.1 \u7248\u672c\u5df2\u4fee\u590d\u3002</li>
+</ul>
+</li>
+</ol>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/advanced/integrate-devtool-to-android.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[49/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/faq.html
----------------------------------------------------------------------
diff --git a/content/cn/faq.html b/content/cn/faq.html
new file mode 100644
index 0000000..35e3c43
--- /dev/null
+++ b/content/cn/faq.html
@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u5e38\u89c1\u95ee\u9898 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5e38\u89c1\u95ee\u9898\u89e3\u7b54\u5982\u4f55\u67e5\u9605\u65e7\u6587\u6863\uff1f\u4f60\u53ef\u4ee5\u901a\u8fc7\u6587\u6863\u5de6\u4fa7\u76ee\u5f55\u6700\u540e\u4e00\u9879 \u201c\u65e7\u6587\u6863\u201d \u8fdb\u5165\u5bf9\u4e8e\u7684\u5386\u53f2\u6587\u6863\u9875\u9762\u3002\u4e5f\u53ef\u4ee5\u76f4\u63a5\u8bbf\u95ee\u4ee5\u4e0b\u94fe\u63a5\u8bbf\u95ee\uff1a
+
+Guide
+\u624b\u518c
+\u9ad8\u9636\u77e5\u8bc6
+\u5de5\u5177
+
+Windows \u6307\u4ee4\u9519\u8bef\u8bf7\u5148\u5b89\u88c5 Git for Windows\uff0c\u5728 For Windows \u4e2d\u67e5\u770b\u66f4\u591a\u4fe1\u606f\u3002
+Android Studio \u4e2d Gradle \u9519\u8bef\u4e0b\u8f7d license-gradle-plugin.jar \u53ef\u80fd\u5f15\u53d1\u4e00\u4e9b\u9519">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u5e38\u89c1\u95ee\u9898">
+<meta property="og:url" content="https://weex.apache.org/cn/faq.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5e38\u89c1\u95ee\u9898\u89e3\u7b54\u5982\u4f55\u67e5\u9605\u65e7\u6587\u6863\uff1f\u4f60\u53ef\u4ee5\u901a\u8fc7\u6587\u6863\u5de6\u4fa7\u76ee\u5f55\u6700\u540e\u4e00\u9879 \u201c\u65e7\u6587\u6863\u201d \u8fdb\u5165\u5bf9\u4e8e\u7684\u5386\u53f2\u6587\u6863\u9875\u9762\u3002\u4e5f\u53ef\u4ee5\u76f4\u63a5\u8bbf\u95ee\u4ee5\u4e0b\u94fe\u63a5\u8bbf\u95ee\uff1a
+
+Guide
+\u624b\u518c
+\u9ad8\u9636\u77e5\u8bc6
+\u5de5\u5177
+
+Windows \u6307\u4ee4\u9519\u8bef\u8bf7\u5148\u5b89\u88c5 Git for Windows\uff0c\u5728 For Windows \u4e2d\u67e5\u770b\u66f4\u591a\u4fe1\u606f\u3002
+Android Studio \u4e2d Gradle \u9519\u8bef\u4e0b\u8f7d license-gradle-plugin.jar \u53ef\u80fd\u5f15\u53d1\u4e00\u4e9b\u9519">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.803Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u5e38\u89c1\u95ee\u9898">
+<meta name="twitter:description" content="\u5e38\u89c1\u95ee\u9898\u89e3\u7b54\u5982\u4f55\u67e5\u9605\u65e7\u6587\u6863\uff1f\u4f60\u53ef\u4ee5\u901a\u8fc7\u6587\u6863\u5de6\u4fa7\u76ee\u5f55\u6700\u540e\u4e00\u9879 \u201c\u65e7\u6587\u6863\u201d \u8fdb\u5165\u5bf9\u4e8e\u7684\u5386\u53f2\u6587\u6863\u9875\u9762\u3002\u4e5f\u53ef\u4ee5\u76f4\u63a5\u8bbf\u95ee\u4ee5\u4e0b\u94fe\u63a5\u8bbf\u95ee\uff1a
+
+Guide
+\u624b\u518c
+\u9ad8\u9636\u77e5\u8bc6
+\u5de5\u5177
+
+Windows \u6307\u4ee4\u9519\u8bef\u8bf7\u5148\u5b89\u88c5 Git for Windows\uff0c\u5728 For Windows \u4e2d\u67e5\u770b\u66f4\u591a\u4fe1\u606f\u3002
+Android Studio \u4e2d Gradle \u9519\u8bef\u4e0b\u8f7d license-gradle-plugin.jar \u53ef\u80fd\u5f15\u53d1\u4e00\u4e9b\u9519">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="faq" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "faq";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="wrapper article-wrapper post-layout">
+
+
+<article class="article article-type-faq">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u5e38\u89c1\u95ee\u9898
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.803Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5e38\u89c1\u95ee\u9898\u89e3\u7b54"><a href="#\u5e38\u89c1\u95ee\u9898\u89e3\u7b54" class="headerlink" title="\u5e38\u89c1\u95ee\u9898\u89e3\u7b54"></a>\u5e38\u89c1\u95ee\u9898\u89e3\u7b54</h1><h2 id="\u5982\u4f55\u67e5\u9605\u65e7\u6587\u6863\uff1f"><a href="#\u5982\u4f55\u67e5\u9605\u65e7\u6587\u6863\uff1f" class="headerlink" title="\u5982\u4f55\u67e5\u9605\u65e7\u6587\u6863\uff1f"></a>\u5982\u4f55\u67e5\u9605\u65e7\u6587\u6863\uff1f</h2><p>\u4f60\u53ef\u4ee5\u901a\u8fc7\u6587\u6863\u5de6\u4fa7\u76ee\u5f55\u6700\u540e\u4e00\u9879 \u201c\u65e7\u6587\u6863\u201d \u8fdb\u5165\u5bf9\u4e8e\u7684\u5386\u53f2\u6587\u6863\u9875\u9762\u3002\u4e5f\u53ef\u4ee5\u76f4\u63a5\u8bbf\u95ee\u4ee5\u4e0b\u94fe\u63a5\u8bbf\u95ee\uff1a</p>
+<ul>
+<li><a href="./v-0.10/guide/index.html">Guide</a></li>
+<li><a href="./v-0.10/references/index.html">\u624b\u518c</a></li>
+<li><a href="./v-0.10/advanced/index.html">\u9ad8\u9636\u77e5\u8bc6</a></li>
+<li><a href="./v-0.10/tools/index.html">\u5de5\u5177</a></li>
+</ul>
+<h2 id="Windows-\u6307\u4ee4\u9519\u8bef"><a href="#Windows-\u6307\u4ee4\u9519\u8bef" class="headerlink" title="Windows \u6307\u4ee4\u9519\u8bef"></a>Windows \u6307\u4ee4\u9519\u8bef</h2><p>\u8bf7\u5148\u5b89\u88c5 <a href="https://git-scm.com/download/win" target="_blank" rel="external">Git for Windows</a>\uff0c\u5728 <a href="https://github.com/alibaba/weex/tree/dev#for-windows" target="_blank" rel="external">For Windows</a> \u4e2d\u67e5\u770b\u66f4\u591a\u4fe1\u606f\u3002</p>
+<h2 id="Android-Studio-\u4e2d-Gradle-\u9519\u8bef"><a href="#Android-Studio-\u4e2d-Gradle-\u9519\u8bef" class="headerlink" title="Android Studio \u4e2d Gradle \u9519\u8bef"></a>Android Studio \u4e2d Gradle \u9519\u8bef</h2><p>\u4e0b\u8f7d <code>license-gradle-plugin.jar</code> \u53ef\u80fd\u5f15\u53d1\u4e00\u4e9b\u9519\u8bef\uff0c\u6bd4\u5982 <code>\u94fe\u63a5\u88ab\u91cd\u7f6e\uff08Connection reset\uff09</code> \u548c <code>\u8bc1\u4e66\u65e0\u6548\uff08peer not authenticated\uff09</code> \u3002\u8fd9\u53ef\u80fd\u662f\u7531\u4e8e\u7f51\u7edc\u95ee\u9898\u5bfc\u81f4\u7684\uff0c\u8bf7\u5c1d\u8bd5\u4f7f\u7528\u4ee3\u7406\u6216VPN\u3002</p>
+<h2 id="\u4f7f\u7528\u672c\u5730\u56fe\u7247"><a href="#\u4f7f\u7528\u672c\u5730\u56fe\u7247" class="headerlink" title="\u4f7f\u7528\u672c\u5730\u56fe\u7247"></a>\u4f7f\u7528\u672c\u5730\u56fe\u7247</h2><p>Weex \u7684\u539f\u751f\u8fd0\u884c\u673a\u5236\u652f\u6301\u4ece\u8bbe\u5907\u4e2d\u52a0\u8f7d\u56fe\u7247\uff0c\u4f60\u53ea\u9700\u8981\u8bbe\u7f6e\u6587\u4ef6 url\uff0c\u4f8b\u5982 <code>file:///sdcard/image_new0.png</code> \u8fd9\u6837\u7684\u683c\u5f0f\u3002\u4f46\u662f Weex \u6682\u65f6\u8fd8\u4e0d\u652f\u6301\u52a0\u8f7d\u4f60\u5de5\u7a0b\u4e2d\u7684\u56fe\u7247\u6587\u4ef6\u3002</p>
+<h2 id="Windows-\u9519\u8bef-The-header-content-contains-invalid-characters-\uff08\u5934\u4e2d\u5305\u542b\u975e\u6cd5\u5b57\u7b26\uff09"><a href="#Windows-\u9519\u8bef-The-header-content-contains-invalid-characters-\uff08\u5934\u4e2d\u5305\u542b\u975e\u6cd5\u5b57\u7b26\uff09" class="headerlink" title="Windows \u9519\u8bef The header content contains invalid characters \uff08\u5934\u4e2d\u5305\u542b\u975e\u6cd5\u5b57\u7b26\uff09"></a>Windows \u9519\u8bef <code>The header content contains invalid characters</code> \uff08\u5934\u4e2d\u5305\u542b\u975e\u6cd5\u5b57\u7b26\uff09</h2><p>\u8fd9\u662f\u7531\u4e8e weex-toolkit \u7684\u4f9d\u8d56 http-server \u5bfc\u81f4\u7684\uff0chttp-server \u7684\u8001\u7248\u672c\u5728\u4e2d\u6587 windows \u4e2d\u7684\u652f\u6301\u4e0d\u662f\u5f88\u597d\u3002\u6211\u4eec\u5df2\u7ecf\u4fee\u590d\u4e86\u8fd9\u4e2a\u95ee\u9898\uff0c\u8bf7\u5728\u4f7f\u7528\u524d\u5347\u7ea7 weex-toolkit \u7248\u672c\u3002</p>
+<h2 id="Playground-\u5e94\u7528\u5728\u626b\u9762\u540e\u4ec0\u4e48\u90fd\u6ca1\u6709\u663e\u793a\uff08\u767d\u5c4f\uff09"><a href="#Playground-\u5e94\u7528\u5728\u626b\u9762\u540e\u4ec0\u4e48\u90fd\u6ca1\u6709\u663e\u793a\uff08\u767d\u5c4f\uff09" class="headerlink" title="Playground \u5e94\u7528\u5728\u626b\u9762\u540e\u4ec0\u4e48\u90fd\u6ca1\u6709\u663e\u793a\uff08\u767d\u5c4f\uff09"></a>Playground \u5e94\u7528\u5728\u626b\u9762\u540e\u4ec0\u4e48\u90fd\u6ca1\u6709\u663e\u793a\uff08\u767d\u5c4f\uff09</h2><p>\u6700\u597d\u7684\u65b9\u6cd5\u662f\u67e5\u770b debug \u65e5\u5fd7\u6765\u67e5\u627e\u539f\u56e0\uff0c\u4f60\u53ef\u4ee5\u6309\u7167 <a href="./guide/how-to/debug-with-devtools.html">\u8fd9\u7bc7\u6587\u6863</a> \u4e2d\u7684\u8bf4\u660e\u6765\u67e5\u660e\u5bfc\u81f4\u8fd9\u4e00\u95ee\u9898\u7684\u539f\u56e0\u3002</p>
+<h2 id="\u5173\u4e8e-ECMAScript-\u7248\u672c\u95ee\u9898"><a href="#\u5173\u4e8e-ECMAScript-\u7248\u672c\u95ee\u9898" class="headerlink" title="\u5173\u4e8e ECMAScript \u7248\u672c\u95ee\u9898"></a>\u5173\u4e8e ECMAScript \u7248\u672c\u95ee\u9898</h2><p>Weex \u5728 iOS \u4e2d\u4f7f\u7528 JSCore \uff0c\u5728 Android \u4e2d\u4f7f\u7528 v8\uff0c\u56e0\u6b64\u4ed6\u4eec\u90fd\u652f\u6301 ECMAScript 5\u3002\u53e6\u5916\uff0c\u6211\u4eec\u8fd8\u5728\u539f\u751f\u73af\u5883\u4e2d\u52a0\u4e86\u4e00\u4e9b polyfills\uff1a</p>
+<ul>
+<li><code>Promise</code> in iOS/Android</li>
+<li><code>Timer APIs</code> (setTimeout/clearTimeout/setInterval/clearInterval`) in iOS/Android</li>
+<li><code>console</code> in iOS/Android</li>
+</ul>
+<p>\u5728\u6d4f\u89c8\u5668\u4e2d\u6211\u4eec\u6682\u65f6\u662f\u5305\u542b\u4e86\u4e00\u4e2a <code>Promise</code> \u7684 polyfill\u3002</p>
+<p>\u5728\u672a\u6765\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u9009\u62e9\u662f\u5426\u901a\u8fc7 configurations \u6765\u5bfc\u5165\u4e00\u4e2a polyfill\u3002</p>
+<p>\u4f60\u4e5f\u53ef\u4ee5\u901a\u8fc7\u5e26\u6709 <code>webpack</code> \u7684 <code>babel</code> \u6765\u5199 ES6\uff0c\u8fd9\u4e2a\u52a0\u8f7d\u5668\u80fd\u591f\u81ea\u52a8\u5c06 ES6 \u8f6c\u6362\u4e3a ES5\u3002</p>
+<p>\u5982\u679c\u4f60\u8fd8\u60f3\u8981\u66f4\u591a\u7684 ES6 polyfills\uff0c\u4f60\u53ef\u4ee5\u628a\u4ed6\u4eec\u5f15\u5165\u5230 JS Bundle \u4e2d\u3002</p>
+<h2 id="\u524d\u7aef\u4f9d\u8d56"><a href="#\u524d\u7aef\u4f9d\u8d56" class="headerlink" title="\u524d\u7aef\u4f9d\u8d56"></a>\u524d\u7aef\u4f9d\u8d56</h2><p>\u5728 Weex \u4e2d\u4f60\u6709\u5f88\u591a\u65b9\u6cd5\u6765 import/require \u4e00\u4e2a\u7ec4\u4ef6\u6216\u8005\u4e00\u4e2a JS \u6a21\u5757\u3002\u4ee5 ES5 \u4e3a\u4f8b\uff1a</p>
+<ul>
+<li><code>require('xxx.js')</code> : \u4f9d\u8d56\u4e00\u4e2a JS \u6587\u4ef6</li>
+<li><code>require('npm-module-name')</code> : \u4f9d\u8d56\u4e00\u4e2a NPM \u6a21\u5757</li>
+<li><code>require('xxx.we')</code> : \u5305\u542b\u4e00\u4e2a <code>.we</code> \u6587\u4ef6\u6765\u6ce8\u518c\u4e00\u4e2a Weex \u81ea\u5b9a\u4e49\u7ec4\u4ef6</li>
+<li><code>require('@weex-module/xxx')</code> : \u4f9d\u8d56\u4e00\u4e2a Weex \u539f\u751f\u6a21\u5757\u3002\u6ce8\u610f\u8fd9\u53ea\u652f\u6301 <code>*.we</code> \u6587\u4ef6\u800c\u4e0d\u652f\u6301 <code>*.js</code> \u6587\u4ef6\u3002\u5982\u679c\u4f60\u60f3\u8981\u5728\u4e00\u4e2a <code>*.js</code> \u6587\u4ef6\u4e2d\u4f7f\u7528 Weex \u539f\u751f\u6a21\u5757\uff0c\u6682\u65f6\u4f60\u53ef\u4ee5\u8fd9\u6837\u5199\uff1a</li>
+</ul>
+<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// use this piece of code below to get Weex native module "modal"</span></div><div class="line"><span class="keyword">var</span> modal</div><div class="line">__weex_define__(<span class="string">'@weex-temp/x'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">__weex_require__</span>) </span>{</div><div class="line"> modal = __weex_require__(<span class="string">'@weex-module/modal'</span>)</div><div class="line">})</div><div class="line"></div><div class="line"><span class="comment">// use APIs in "modal" module</span></div><div class="line">modal.toast({<span class="attr">message</span>: <span class="string">'hello'</span>})</div></pre></td></tr></table></figure>
+<p>\u4ee5\u540e\u6211\u4eec\u4f1a\u7ed9\u5927\u5bb6\u5e26\u6765\u4e00\u4e2a\u66f4\u597d\u7684\u8bbe\u8ba1\u3002</p>
+<h2 id="iOS-\u6587\u672c-line-height-\u6837\u5f0f\u4e0d\u6b63\u5e38"><a href="#iOS-\u6587\u672c-line-height-\u6837\u5f0f\u4e0d\u6b63\u5e38" class="headerlink" title="iOS \u6587\u672c line-height \u6837\u5f0f\u4e0d\u6b63\u5e38"></a>iOS \u6587\u672c <code>line-height</code> \u6837\u5f0f\u4e0d\u6b63\u5e38</h2><p><code>line-height</code> \u6837\u5f0f\u5728 <code><text></code> \u7ec4\u4ef6\u4e2d\u7684\u8868\u73b0\u4e0e H5 \u548c Android \u4e0d\u540c\uff0c\u6587\u672c\u4e0d\u4f1a\u5728\u884c\u5185\u5c45\u4e2d\uff0c\u800c\u662f\u8d34\u8fd1\u884c\u5e95\u90e8\uff0c\u56e0\u4e3a\u8fd9\u91cc\u4f7f\u7528\u7684 iOS \u539f\u751f API\u3002\u6211\u4eec\u6b63\u5728\u52aa\u529b\u4f18\u5316\uff0c\u4e0e\u5176\u4ed6\u4e24\u7aef\u4fdd\u6301\u4e00\u81f4\u3002</p>
+<h2 id="Android-\u53ea\u652f\u6301-overflow-hidden"><a href="#Android-\u53ea\u652f\u6301-overflow-hidden" class="headerlink" title="Android \u53ea\u652f\u6301 overflow:hidden"></a>Android \u53ea\u652f\u6301 <code>overflow:hidden</code></h2><p><code>overflow</code> \u6837\u5f0f\u5728 Android \u9ed8\u8ba4\u4e3a <code>hidden</code> \u5e76\u4e14\u65e0\u6cd5\u4fee\u6539\uff0c\u539f\u56e0\u662f Android View framework \u9650\u5236\u3002\u8fd9\u4e2a\u95ee\u9898\u53ea\u51fa\u73b0\u5728 Android \u7aef\uff0ciOS \u7aef\u548c H5 \u6b63\u5e38\u3002</p>
+<h2 id="Android-\u4e0d\u652f\u6301-emoji"><a href="#Android-\u4e0d\u652f\u6301-emoji" class="headerlink" title="Android \u4e0d\u652f\u6301 emoji"></a>Android \u4e0d\u652f\u6301 emoji</h2><p>\u7531\u4e8e Android NDK \u4ec5\u652f\u6301 Modified UTF-8\uff0c\u56e0\u6b64\u4e0d\u652f\u6301 emoji\u3002Android 6.0 \u4ee5\u4e0b\u4f7f\u7528 emoji \u53ef\u80fd\u4f1a\u5bfc\u81f4\u5d29\u6e83\uff0c\u5728 Android 6.0 \u4ee5\u4e0a\u5219\u53ef\u80fd\u51fa\u73b0\u610f\u5916\u7684\u884c\u4e3a\u3002\u53ea\u80fd\u4f7f\u7528 Modified UTF-8\uff0c<strong>\u4e0d\u8981\u4f7f\u7528 emoji</strong>\u3002</p>
+<h2 id="\u5982\u4f55\u53d6\u6d88-750-\u50cf\u7d20\u81ea\u9002\u5e94\u5e76\u4ee5\u5bbd\u9ad8\u6bd4\u8ba1\u7b97\u771f\u5b9e\u50cf\u7d20\uff1f"><a href="#\u5982\u4f55\u53d6\u6d88-750-\u50cf\u7d20\u81ea\u9002\u5e94\u5e76\u4ee5\u5bbd\u9ad8\u6bd4\u8ba1\u7b97\u771f\u5b9e\u50cf\u7d20\uff1f" class="headerlink" title="\u5982\u4f55\u53d6\u6d88 750 \u50cf\u7d20\u81ea\u9002\u5e94\u5e76\u4ee5\u5bbd\u9ad8\u6bd4\u8ba1\u7b97\u771f\u5b9e\u50cf\u7d20\uff1f"></a>\u5982\u4f55\u53d6\u6d88 750 \u50cf\u7d20\u81ea\u9002\u5e94\u5e76\u4ee5\u5bbd\u9ad8\u6bd4\u8ba1\u7b97\u771f\u5b9e\u50cf\u7d20\uff1f</h2><p><code>this.$getConfig()</code> \u65b9\u6cd5\u4f1a\u8fd4\u56de\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8fd9\u4e2a\u5bf9\u8c61\u7684 <code>deviceHeight</code> \u548c <code>deviceWidth</code> \u5c5e\u6027\u5373\u5b9e\u9645\u8bbe\u5907\u5bbd\u5ea6/\u9ad8\u5ea6\uff08\u4ee5\u50cf\u7d20\u4e3a\u5355\u4f4d\uff09\uff0c\u800c\u4e0d\u662f\u4ee5 750 \u9002\u914d\u7684\u3002</p>
+<p>\u56e0\u6b64\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u5b83\u4eec\u6765\u8ba1\u7b97\u5b9e\u9645\u50cf\u7d20\u7684\u5bbd\u5ea6/\u9ad8\u5ea6\u3002</p>
+<p>\u5047\u8bbe\u60a8\u9700\u8981\u663e\u793a\u56fa\u5b9a\u4e3a 88 px \u7684\u5bfc\u822a\u680f\uff0c\u8be5\u5bfc\u822a\u680f\u7684\u9ad8\u5ea6\u5c06\u662f\uff1a</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> height = <span class="number">88</span> * <span class="number">750</span> / env.deviceWidth</div></pre></td></tr></table></figure>
+<h2 id="\u5982\u4f55\u5728-JavaScript-\u4e2d\u68c0\u6d4b\u662f\u5426\u652f\u6301\u67d0\u4e2a\u539f\u751f\u7684-module-component"><a href="#\u5982\u4f55\u5728-JavaScript-\u4e2d\u68c0\u6d4b\u662f\u5426\u652f\u6301\u67d0\u4e2a\u539f\u751f\u7684-module-component" class="headerlink" title="\u5982\u4f55\u5728 JavaScript \u4e2d\u68c0\u6d4b\u662f\u5426\u652f\u6301\u67d0\u4e2a\u539f\u751f\u7684 module/component"></a>\u5982\u4f55\u5728 JavaScript \u4e2d\u68c0\u6d4b\u662f\u5426\u652f\u6301\u67d0\u4e2a\u539f\u751f\u7684 module/component</h2><h3 id="\u68c0\u6d4b\u539f\u751f-module"><a href="#\u68c0\u6d4b\u539f\u751f-module" class="headerlink" title="\u68c0\u6d4b\u539f\u751f module"></a>\u68c0\u6d4b\u539f\u751f module</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> xxx = <span class="built_in">require</span>(<span class="string">'@weex-module/xxx'</span>)</div><div class="line"><span class="keyword">if</span> (xxx) {</div><div class="line"> <span class="comment">// todo: use this module</span></div><div class="line">}</div><div class="line"><span class="keyword">else</span> {</div><div class="line"> <span class="comment">// tod
o: handle the exception</span></div><div class="line">}</div></pre></td></tr></table></figure>
+<h3 id="\u68c0\u6d4b\u539f\u751f-component"><a href="#\u68c0\u6d4b\u539f\u751f-component" class="headerlink" title="\u68c0\u6d4b\u539f\u751f component"></a>\u68c0\u6d4b\u539f\u751f component</h3><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">component</span> <span class="attr">is</span>=<span class="string">"{{type}}"</span>></span><span class="tag"></<span class="name">component</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> type = <span class="string">'xxx'</span></div><div class="line"> <span class="keyword">var</span> xxx = <span class="built_in">require</span>(<span class
="string">'@weex-component/xxx'</span>)</div><div class="line"> <span class="keyword">if</span> (!xxx) {</div><div class="line"> type = <span class="string">'div'</span> <span class="comment">// downgrade to <div></span></div><div class="line"> }</div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">type</span>: type</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<h2 id="\u5982\u4f55\u5728-pages-\u4e4b\u95f4\u4f20\u9012\u6570\u636e"><a href="#\u5982\u4f55\u5728-pages-\u4e4b\u95f4\u4f20\u9012\u6570\u636e" class="headerlink" title="\u5982\u4f55\u5728 pages \u4e4b\u95f4\u4f20\u9012\u6570\u636e"></a>\u5982\u4f55\u5728 pages \u4e4b\u95f4\u4f20\u9012\u6570\u636e</h2><p>\u5982\u679c\u4f60\u6709\u4e24\u4e2a\u9875\u9762\uff0cA \u9875\u9762\u548c B \u9875\u9762</p>
+<ol>
+<li>A -> B\uff0c\u4f7f\u7528 <a href="/references/api.md#getconfig">getConfig api</a> or <a href="/modules/storage.md">storage module</a> \u4f20\u9012\u6570\u636e\uff1b</li>
+<li>B -> A\uff0c\u4f7f\u7528 <a href="/modules/storage.md">storage module</a> \u4f20\u9012\u6570\u636e\u3002</li>
+</ol>
+<h2 id="\u7236\u5b50\u7ec4\u4ef6\u4e4b\u95f4\u8fdb\u884c-repeat-\u64cd\u4f5c"><a href="#\u7236\u5b50\u7ec4\u4ef6\u4e4b\u95f4\u8fdb\u884c-repeat-\u64cd\u4f5c" class="headerlink" title="\u7236\u5b50\u7ec4\u4ef6\u4e4b\u95f4\u8fdb\u884c repeat \u64cd\u4f5c"></a>\u7236\u5b50\u7ec4\u4ef6\u4e4b\u95f4\u8fdb\u884c repeat \u64cd\u4f5c</h2><p>\u5982\u679c\u4f60\u6709\u9700\u6c42\uff0c\u5728\u7236\u5b50\u7ec4\u4ef6\u4e4b\u95f4\u8fdb\u884c repeat \u64cd\u4f5c\uff0c\u9700\u8981\u6ce8\u610f\uff0c\u5fc5\u987b\u4e25\u683c\u6309\u7167\u5b98\u7f51\u6587\u6863\u7684\u8bed\u6cd5\u6765\u4e66\u5199\u4ee3\u7801\u3002\u5982\u679c\u7f3a\u5c11\u5b50\u7ec4\u4ef6\u5b9a\u4e49 data \u6570\u636e\uff0c\u6216\u8005\u662f\u6ca1\u6709\u6307\u5b9a\u9700\u8981\u5411\u4e0b\u4f20\u9012\u7684 props\uff0c\u90fd\u4f1a\u5bfc\u81f4\u9875\u9762\u4e0d\u6b63\u5e38\u6e32\u67d3\u3002</p>
+<p>\u9519\u8bef\u793a\u4f8b\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">element</span> <span class="attr">name</span>=<span class="string">"child"</span>></span></div><div class="line"> <span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size:100"</span>></span>{{title}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"></<span class="name">element</span>></span></div><div class="line"></div><div class="line"><span class="
tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">child</span> <span class="attr">repeat</span>=<span class="string">"item in lists"</span>></span><span class="tag"></<span class="name">child</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">lists</span>: [</div><div class="line"> { <span class="attr">title</span>: <span class="string">'A'</span> }
,</div><div class="line"> { <span class="attr">title</span>: <span class="string">'B'</span> },</div><div class="line"> { <span class="attr">title</span>: <span class="string">'C'</span> }</div><div class="line"> ]</div><div class="line"> },</div><div class="line"> <span class="attr">ready</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.lists.splice(<span class="number">0</span>, <span class="number">1</span>)</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p>\u4ee5\u4e0a\u793a\u4f8b\u7684\u7406\u60f3\u6267\u884c\u60c5\u51b5\uff0c\u5e94\u8be5\u662f\u9875\u9762\u4e0a\u7b2c\u4e00\u4e2a\u5143\u7d20 A \u88ab\u5220\u9664\uff0c\u5269\u4e0b B\u3001C \u4e24\u4e2a\u5143\u7d20\u3002<br>\u4f46\u662f\uff0c\u7531\u4e8e\u9519\u8bef\u7684\u5199\u6cd5\uff0c\u5bfc\u81f4\u5217\u8868\u6267\u884c splice \u64cd\u4f5c\u4e4b\u540e\uff0c\u51fa\u73b0\u9519\u8bef\u7684\u66f4\u65b0\u60c5\u51b5\uff1a\u9875\u9762\u6700\u540e\u4e00\u4e2a\u5143\u7d20 C \u88ab\u5220\u9664\u3002</p>
+<p>\u6b63\u786e\u7684\u5199\u6cd5\u5982\u4e0b\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">element</span> <span class="attr">name</span>=<span class="string">"child"</span>></span></div><div class="line"> <span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size:100"</span>></span>{{title}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">template</span>></span></div><div class="line"> </div><div class="line"> <span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></d
iv><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">title</span>: <span class="literal">null</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="tag"></<span class="name">script</span>></span></div><div class="line"><span class="tag"></<span class="name">element</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">child</span> <span class="attr">repeat</span>=<span class="string">"item in lists"</span> <span class="attr">title</span>=<span class="string">"{{ item.title }}"</span>></span><span class="tag"></<span
class="name">child</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">lists</span>: [</div><div class="line"> { <span class="attr">title</span>: <span class="string">'A'</span> },</div><div class="line"> { <span class="attr">title</span>: <span class="string">'B'</span> },</div><div class="line"> { <span class="attr">title</span>: <span class="string">'C'</span> }</div><div class="line"> ]</div><div class="line"> },</div><div class="line"> <span class="attr">ready
</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.lists.splice(<span class="number">0</span>, <span class="number">1</span>)</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p>\u5728\u7ebf\u793a\u4f8b\u8bf7\u89c1\uff1a</p>
+<ul>
+<li><a href="http://dotwe.org/de97cf2c1b7ec09a53728edc9c27ad2a" target="_blank" rel="external">\u9519\u8bef\u793a\u4f8b</a></li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/faq.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/faq.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/dev-with-weexpack.html
----------------------------------------------------------------------
diff --git a/content/cn/guide/dev-with-weexpack.html b/content/cn/guide/dev-with-weexpack.html
new file mode 100644
index 0000000..d926adb
--- /dev/null
+++ b/content/cn/guide/dev-with-weexpack.html
@@ -0,0 +1,409 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u6784\u5efa\u5168\u65b0\u5e94\u7528 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u6784\u5efa\u5168\u65b0\u5e94\u7528Work in process.">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u6784\u5efa\u5168\u65b0\u5e94\u7528">
+<meta property="og:url" content="https://weex.apache.org/cn/guide/dev-with-weexpack.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u6784\u5efa\u5168\u65b0\u5e94\u7528Work in process.">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.805Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u6784\u5efa\u5168\u65b0\u5e94\u7528">
+<meta name="twitter:description" content="\u6784\u5efa\u5168\u65b0\u5e94\u7528Work in process.">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link current ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link current ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u6784\u5efa\u5168\u65b0\u5e94\u7528
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.805Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u6784\u5efa\u5168\u65b0\u5e94\u7528"><a href="#\u6784\u5efa\u5168\u65b0\u5e94\u7528" class="headerlink" title="\u6784\u5efa\u5168\u65b0\u5e94\u7528"></a>\u6784\u5efa\u5168\u65b0\u5e94\u7528</h1><p>Work in process.</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/guide/dev-with-weexpack.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/guide/dev-with-weexpack.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/images/flow.png
----------------------------------------------------------------------
diff --git a/content/cn/guide/images/flow.png b/content/cn/guide/images/flow.png
new file mode 100644
index 0000000..c5a1b61
Binary files /dev/null and b/content/cn/guide/images/flow.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/images/tut-cli-qrcode.png
----------------------------------------------------------------------
diff --git a/content/cn/guide/images/tut-cli-qrcode.png b/content/cn/guide/images/tut-cli-qrcode.png
new file mode 100644
index 0000000..9068c14
Binary files /dev/null and b/content/cn/guide/images/tut-cli-qrcode.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/images/tut-first.png
----------------------------------------------------------------------
diff --git a/content/cn/guide/images/tut-first.png b/content/cn/guide/images/tut-first.png
new file mode 100644
index 0000000..c8505e6
Binary files /dev/null and b/content/cn/guide/images/tut-first.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/images/tut-second.png
----------------------------------------------------------------------
diff --git a/content/cn/guide/images/tut-second.png b/content/cn/guide/images/tut-second.png
new file mode 100644
index 0000000..1259abf
Binary files /dev/null and b/content/cn/guide/images/tut-second.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/images/tut1.jpg
----------------------------------------------------------------------
diff --git a/content/cn/guide/images/tut1.jpg b/content/cn/guide/images/tut1.jpg
new file mode 100644
index 0000000..8af0f3f
Binary files /dev/null and b/content/cn/guide/images/tut1.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/images/tut2.jpg
----------------------------------------------------------------------
diff --git a/content/cn/guide/images/tut2.jpg b/content/cn/guide/images/tut2.jpg
new file mode 100644
index 0000000..c3e8a6e
Binary files /dev/null and b/content/cn/guide/images/tut2.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/images/tut3.png
----------------------------------------------------------------------
diff --git a/content/cn/guide/images/tut3.png b/content/cn/guide/images/tut3.png
new file mode 100644
index 0000000..5473905
Binary files /dev/null and b/content/cn/guide/images/tut3.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/images/tut4.gif
----------------------------------------------------------------------
diff --git a/content/cn/guide/images/tut4.gif b/content/cn/guide/images/tut4.gif
new file mode 100644
index 0000000..eed4395
Binary files /dev/null and b/content/cn/guide/images/tut4.gif differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/index.html
----------------------------------------------------------------------
diff --git a/content/cn/guide/index.html b/content/cn/guide/index.html
new file mode 100644
index 0000000..161658f
--- /dev/null
+++ b/content/cn/guide/index.html
@@ -0,0 +1,453 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u5feb\u901f\u4e0a\u624b | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5feb\u901f\u4e0a\u624bVue.js \u662f Evan You \u5f00\u53d1\u7684\u6e10\u8fdb\u5f0f JavaScript \u6846\u67b6\uff0c\u5728\u6613\u7528\u6027\u3001\u7075\u6d3b\u6027\u548c\u6027\u80fd\u7b49\u65b9\u9762\u90fd\u975e\u5e38\u4f18\u79c0\u3002\u5f00\u53d1\u8005\u80fd\u591f\u901a\u8fc7\u64b0\u5199 *.vue \u6587\u4ef6\uff0c\u57fa\u4e8e &lt;template&gt;, &lt;style&gt;, &lt;script&gt; \u5feb\u901f\u6784\u5efa\u7ec4\u4ef6\u5316\u7684 web \u5e94\u7528\u3002\u672c\u7ae0\u4f1a\u6559\u4f60\u5982\u4f55\u642d\u5efa\u672c\u5730\u5f00\u53d1\u73af\u5883\u8fdb\u884c Weex \u5f00\u53d1\u3002
+\u5f00\u59cb\u4e4b\u524d\uff0c\u5e0c\u671b\u4f60\u80fd\u5bf9 Weex \u548c Vue \u6709">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u5feb\u901f\u4e0a\u624b">
+<meta property="og:url" content="https://weex.apache.org/cn/guide/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5feb\u901f\u4e0a\u624bVue.js \u662f Evan You \u5f00\u53d1\u7684\u6e10\u8fdb\u5f0f JavaScript \u6846\u67b6\uff0c\u5728\u6613\u7528\u6027\u3001\u7075\u6d3b\u6027\u548c\u6027\u80fd\u7b49\u65b9\u9762\u90fd\u975e\u5e38\u4f18\u79c0\u3002\u5f00\u53d1\u8005\u80fd\u591f\u901a\u8fc7\u64b0\u5199 *.vue \u6587\u4ef6\uff0c\u57fa\u4e8e &lt;template&gt;, &lt;style&gt;, &lt;script&gt; \u5feb\u901f\u6784\u5efa\u7ec4\u4ef6\u5316\u7684 web \u5e94\u7528\u3002\u672c\u7ae0\u4f1a\u6559\u4f60\u5982\u4f55\u642d\u5efa\u672c\u5730\u5f00\u53d1\u73af\u5883\u8fdb\u884c Weex \u5f00\u53d1\u3002
+\u5f00\u59cb\u4e4b\u524d\uff0c\u5e0c\u671b\u4f60\u80fd\u5bf9 Weex \u548c Vue \u6709">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1kHFrOFXXXXaYXXXXXXXXXXXX-615-308.jpg">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.820Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u5feb\u901f\u4e0a\u624b">
+<meta name="twitter:description" content="\u5feb\u901f\u4e0a\u624bVue.js \u662f Evan You \u5f00\u53d1\u7684\u6e10\u8fdb\u5f0f JavaScript \u6846\u67b6\uff0c\u5728\u6613\u7528\u6027\u3001\u7075\u6d3b\u6027\u548c\u6027\u80fd\u7b49\u65b9\u9762\u90fd\u975e\u5e38\u4f18\u79c0\u3002\u5f00\u53d1\u8005\u80fd\u591f\u901a\u8fc7\u64b0\u5199 *.vue \u6587\u4ef6\uff0c\u57fa\u4e8e &lt;template&gt;, &lt;style&gt;, &lt;script&gt; \u5feb\u901f\u6784\u5efa\u7ec4\u4ef6\u5316\u7684 web \u5e94\u7528\u3002\u672c\u7ae0\u4f1a\u6559\u4f60\u5982\u4f55\u642d\u5efa\u672c\u5730\u5f00\u53d1\u73af\u5883\u8fdb\u884c Weex \u5f00\u53d1\u3002
+\u5f00\u59cb\u4e4b\u524d\uff0c\u5e0c\u671b\u4f60\u80fd\u5bf9 Weex \u548c Vue \u6709">
+<meta name="twitter:image" content="https://img.alicdn.com/tps/TB1kHFrOFXXXXaYXXXXXXXXXXXX-615-308.jpg">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link current ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link current ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u5feb\u901f\u4e0a\u624b
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.820Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5feb\u901f\u4e0a\u624b"><a href="#\u5feb\u901f\u4e0a\u624b" class="headerlink" title="\u5feb\u901f\u4e0a\u624b"></a>\u5feb\u901f\u4e0a\u624b</h1><p>Vue.js \u662f Evan You \u5f00\u53d1\u7684\u6e10\u8fdb\u5f0f JavaScript \u6846\u67b6\uff0c\u5728\u6613\u7528\u6027\u3001\u7075\u6d3b\u6027\u548c\u6027\u80fd\u7b49\u65b9\u9762\u90fd\u975e\u5e38\u4f18\u79c0\u3002\u5f00\u53d1\u8005\u80fd\u591f\u901a\u8fc7\u64b0\u5199 <code>*.vue</code> \u6587\u4ef6\uff0c\u57fa\u4e8e <code><template></code>, <code><style></code>, <code><script></code> \u5feb\u901f\u6784\u5efa\u7ec4\u4ef6\u5316\u7684 web \u5e94\u7528\u3002\u672c\u7ae0\u4f1a\u6559\u4f60\u5982\u4f55\u642d\u5efa\u672c\u5730\u5f00\u53d1\u73af\u5883\u8fdb\u884c Weex \u5f00\u53d1\u3002</p>
+<p>\u5f00\u59cb\u4e4b\u524d\uff0c\u5e0c\u671b\u4f60\u80fd\u5bf9 Weex \u548c Vue \u6709\u57fa\u672c\u7684\u4e86\u89e3\uff0c\u63a8\u8350\u9605\u8bfb Weex Tutorial \u548c Vue Introduction \u4e86\u89e3\u66f4\u591a\u4fe1\u606f\u3002</p>
+<h2 id="\u7b2c\u4e00\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56"><a href="#\u7b2c\u4e00\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56" class="headerlink" title="\u7b2c\u4e00\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56"></a>\u7b2c\u4e00\u6b65\uff1a\u5b89\u88c5\u4f9d\u8d56</h2><p>Weex \u5b98\u65b9\u63d0\u4f9b\u4e86 weex-toolkit \u7684\u811a\u624b\u67b6\u5de5\u5177\u6765\u8f85\u52a9\u5f00\u53d1\u548c\u8c03\u8bd5\u3002\u9996\u5148\uff0c\u4f60\u9700\u8981 Node.js \u548c weex-toolkit\u3002</p>
+<p>\u5b89\u88c5 Node.js \u65b9\u5f0f\u591a\u79cd\u591a\u6837\uff0c\u6700\u7b80\u5355\u7684\u65b9\u5f0f\u662f\u5728 <a href="https://nodejs.org/en/" target="_blank" rel="external">Node.js \u5b98\u7f51</a> \u4e0b\u8f7d\u53ef\u6267\u884c\u7a0b\u5e8f\u76f4\u63a5\u5b89\u88c5\u5373\u53ef\u3002</p>
+<p>\u5bf9\u4e8e Mac\uff0c\u53ef\u4ee5\u4f7f\u7528 <a href="http://brew.sh/" target="_blank" rel="external">Homebrew</a> \u8fdb\u884c\u5b89\u88c5\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">brew install node</div></pre></td></tr></table></figure>
+<blockquote>
+<p>\u66f4\u591a\u5b89\u88c5\u65b9\u5f0f\u53ef\u53c2\u8003 <a href="https://nodejs.org/en/download/" target="_blank" rel="external">Node.js \u5b98\u65b9\u4fe1\u606f</a></p>
+</blockquote>
+<p>\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u68c0\u6d4b\u662f\u5426\u5b89\u88c5\u6210\u529f\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ node -v</div><div class="line">v6.3.1</div><div class="line">$ npm -v</div><div class="line">3.10.3</div></pre></td></tr></table></figure>
+<p>\u901a\u5e38\uff0c\u5b89\u88c5\u4e86 Node.js \u73af\u5883\uff0cnpm \u5305\u7ba1\u7406\u5de5\u5177\u4e5f\u968f\u4e4b\u5b89\u88c5\u4e86\u3002\u56e0\u6b64\uff0c\u76f4\u63a5\u4f7f\u7528 npm \u6765\u5b89\u88c5 weex-toolkit\u3002</p>
+<blockquote>
+<p>npm \u662f\u4e00\u4e2a JavaScript \u5305\u7ba1\u7406\u5de5\u5177\uff0c\u5b83\u53ef\u4ee5\u8ba9\u5f00\u53d1\u8005\u8f7b\u677e\u5171\u4eab\u548c\u91cd\u7528\u4ee3\u7801\u3002Weex \u5f88\u591a\u4f9d\u8d56\u6765\u81ea\u793e\u533a\uff0c\u540c\u6837\uff0cWeex \u4e5f\u5c06\u5f88\u591a\u5de5\u5177\u53d1\u5e03\u5230\u793e\u533a\u65b9\u4fbf\u5f00\u53d1\u8005\u4f7f\u7528\u3002</p>
+</blockquote>
+<p><strong>\u6ce8\u610f: </strong> weex-toolkit \u76ee\u524d\u4ec5\u6709\u6700\u65b0\u7684 beta \u7248\u672c\u5f00\u59cb\u624d\u652f\u6301\u521d\u59cb\u5316 Vue \u9879\u76ee\uff0c\u4f7f\u7528\u524d\u8bf7\u786e\u8ba4\u7248\u672c\u662f\u5426\u6b63\u786e\u3002</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ npm install -g weex-toolkit@beta</div><div class="line">``` </div><div class="line"></div><div class="line">\u56fd\u5185\u5f00\u53d1\u8005\u53ef\u4ee5\u8003\u8651\u4f7f\u7528\u6dd8\u5b9d\u7684 npm \u955c\u50cf \u2014\u2014 [cnpm](https://npm.taobao.org/) \u5b89\u88c5 weex-toolkit</div><div class="line"></div><div class="line">```bash</div><div class="line">$ npm install -g cnpm</div><div class="line">$ cnpm install -g weex-toolkit@beta</div></pre></td></tr></table></figure>
+<p><em>\u63d0\u793a\uff1a</em></p>
+<p>\u5982\u679c\u63d0\u793a\u6743\u9650\u9519\u8bef\uff08<em>permission error</em>\uff09\uff0c\u4f7f\u7528 <code>sudo</code> \u5173\u952e\u5b57\u8fdb\u884c\u5b89\u88c5</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ sudo cnpm install -g weex-toolkit@beta</div></pre></td></tr></table></figure>
+<p>\u5b89\u88c5\u7ed3\u675f\u540e\u4f60\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528 <code>weex</code> \u547d\u4ee4\u9a8c\u8bc1\u662f\u5426\u5b89\u88c5\u6210\u529f\uff0c\u5b83\u4f1a\u663e\u793a <code>weex</code> \u547d\u4ee4\u884c\u5de5\u5177\u5404\u53c2\u6570\uff1a</p>
+<p><img src="https://img.alicdn.com/tps/TB1kHFrOFXXXXaYXXXXXXXXXXXX-615-308.jpg" alt=""></p>
+<h2 id="\u7b2c\u4e8c\u6b65\uff1a\u521d\u59cb\u5316"><a href="#\u7b2c\u4e8c\u6b65\uff1a\u521d\u59cb\u5316" class="headerlink" title="\u7b2c\u4e8c\u6b65\uff1a\u521d\u59cb\u5316"></a>\u7b2c\u4e8c\u6b65\uff1a\u521d\u59cb\u5316</h2><p>\u7136\u540e\u521d\u59cb\u5316 Weex \u9879\u76ee\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ weex init awesome-project</div></pre></td></tr></table></figure>
+<p>\u6267\u884c\u5b8c\u547d\u4ee4\u540e\uff0c\u5728 <code>awesome-project</code> \u76ee\u5f55\u4e2d\u5c31\u521b\u5efa\u4e86\u4e00\u4e2a\u4f7f\u7528 Weex \u548c Vue \u7684\u6a21\u677f\u9879\u76ee\u3002</p>
+<h2 id="\u7b2c\u4e09\u6b65\uff1a\u5f00\u53d1"><a href="#\u7b2c\u4e09\u6b65\uff1a\u5f00\u53d1" class="headerlink" title="\u7b2c\u4e09\u6b65\uff1a\u5f00\u53d1"></a>\u7b2c\u4e09\u6b65\uff1a\u5f00\u53d1</h2><p>\u4e4b\u540e\u6211\u4eec\u8fdb\u5165\u9879\u76ee\u6240\u5728\u8def\u5f84\uff0cweex-toolkit \u5df2\u7ecf\u4e3a\u6211\u4eec\u751f\u6210\u4e86\u6807\u51c6\u9879\u76ee\u7ed3\u6784\u3002</p>
+<p>\u5728 <code>package.json</code> \u4e2d\uff0c\u5df2\u7ecf\u914d\u7f6e\u597d\u4e86\u51e0\u4e2a\u5e38\u7528\u7684 npm script\uff0c\u5206\u522b\u662f\uff1a</p>
+<ul>
+<li><code>build</code>: \u6e90\u7801\u6253\u5305\uff0c\u751f\u6210 JS Bundle</li>
+<li><code>dev</code>: webpack watch \u6a21\u5f0f\uff0c\u65b9\u4fbf\u5f00\u53d1</li>
+<li><code>serve</code>: \u5f00\u542f\u9759\u6001\u670d\u52a1\u5668</li>
+<li><code>debug</code>: \u8c03\u8bd5\u6a21\u5f0f</li>
+</ul>
+<p>\u6211\u4eec\u5148\u901a\u8fc7 <code>npm install</code> \u5b89\u88c5\u9879\u76ee\u4f9d\u8d56\u3002\u4e4b\u540e\u8fd0\u884c <code>npm run dev</code> \u548c <code>npm run serve</code> \u5f00\u542fwatch \u6a21\u5f0f\u548c\u9759\u6001\u670d\u52a1\u5668\u3002</p>
+<p>\u7136\u540e\u6211\u4eec\u6253\u5f00\u6d4f\u89c8\u5668\uff0c\u8fdb\u5165 <code>http://localhost:8080/index.html</code> \u5373\u53ef\u770b\u5230 weex h5 \u9875\u9762\u3002 </p>
+<p>\u521d\u59cb\u5316\u65f6\u5df2\u7ecf\u4e3a\u6211\u4eec\u521b\u5efa\u4e86\u57fa\u672c\u7684\u793a\u4f8b\uff0c\u6211\u4eec\u53ef\u4ee5\u5728 <code>src/foo.vue</code> \u4e2d\u67e5\u770b\u3002</p>
+<p>\u4ee3\u7801\u5982\u4e0b\u6240\u793a\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"weex"</span>></span>Hello Weex !<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"vue"</span>></span>Hello Vue !<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="l
ine"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.weex</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">60px</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#1B90F7</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.vue</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">60px</span>;</div><div class="line"> <span cl
ass="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p>\u6211\u4eec\u6682\u65f6\u4e0d\u53bb\u5173\u5fc3 Weex \u7684\u6280\u672f\u7ec6\u8282\uff0c\u4ec5\u770b\u5927\u81f4\u7684\u4ee3\u7801\u7ed3\u6784\u3002\u662f\u4e0d\u662f\u89c9\u5f97\u8fd9\u4e9b\u8bed\u6cd5\u6709\u4e9b\u773c\u719f\uff1f\u6ca1\u9519\uff0cWeex \u8bed\u6cd5\u540c <a href="https://github.com/vuejs/vue" target="_blank" rel="external">Vue</a> \u5b8c\u5168\u4e00\u6837\uff0c\u751a\u81f3\u8fde\u6587\u4ef6\u540d\u4e5f\u662f <code>.vue</code>\uff0c\u5982\u679c\u4f60\u719f\u6089 Vue\uff0c\u4f60\u4f1a\u5f88\u5feb\u9002\u5e94 Weex \u7684\u5f00\u53d1\u3002</p>
+<p>\u5173\u4e8e Weex \u8bed\u6cd5\u90e8\u5206\uff0c\u4f60\u53ef\u4ee5\u76f4\u63a5\u53c2\u8003 <a href="https://vuejs.org/v2/guide/" target="_blank" rel="external">Vue Guide</a>\uff0c\u8fd9\u91cc\u4e0d\u518d\u91cd\u590d\u4ecb\u7ecd\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/guide/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/guide/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[18/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/unit.html
----------------------------------------------------------------------
diff --git a/content/cn/references/unit.html b/content/cn/references/unit.html
new file mode 100644
index 0000000..9c0aaab
--- /dev/null
+++ b/content/cn/references/unit.html
@@ -0,0 +1,1330 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>CSS \u5355\u4f4d | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="CSS \u5355\u4f4dCSS color \u5355\u4f4d\u652f\u6301\u4ee5\u4e0b\u5199\u6cd5\uff1a
+.classA &#123; /* 3-chars hex */ color: #0f0; /* 6-chars hex */ color: #00ff00; /* rgba */ color: rgb(255, 0, 0); /* rgba */ color: rgba(255, 0, 0, 0.5); /* transpar">
+<meta property="og:type" content="website">
+<meta property="og:title" content="CSS \u5355\u4f4d">
+<meta property="og:url" content="https://weex.apache.org/cn/references/unit.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="CSS \u5355\u4f4dCSS color \u5355\u4f4d\u652f\u6301\u4ee5\u4e0b\u5199\u6cd5\uff1a
+.classA &#123; /* 3-chars hex */ color: #0f0; /* 6-chars hex */ color: #00ff00; /* rgba */ color: rgb(255, 0, 0); /* rgba */ color: rgba(255, 0, 0, 0.5); /* transpar">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.914Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="CSS \u5355\u4f4d">
+<meta name="twitter:description" content="CSS \u5355\u4f4dCSS color \u5355\u4f4d\u652f\u6301\u4ee5\u4e0b\u5199\u6cd5\uff1a
+.classA &#123; /* 3-chars hex */ color: #0f0; /* 6-chars hex */ color: #00ff00; /* rgba */ color: rgb(255, 0, 0); /* rgba */ color: rgba(255, 0, 0, 0.5); /* transpar">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link current ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link current ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ CSS \u5355\u4f4d
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.914Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="CSS-\u5355\u4f4d"><a href="#CSS-\u5355\u4f4d" class="headerlink" title="CSS \u5355\u4f4d"></a>CSS \u5355\u4f4d</h1><h2 id="CSS-color-\u5355\u4f4d"><a href="#CSS-color-\u5355\u4f4d" class="headerlink" title="CSS color \u5355\u4f4d"></a>CSS <code>color</code> \u5355\u4f4d</h2><p>\u652f\u6301\u4ee5\u4e0b\u5199\u6cd5\uff1a</p>
+<figure class="highlight css"><table><tr><td class="code"><pre><div class="line"><span class="selector-class">.classA</span> {</div><div class="line"> <span class="comment">/* 3-chars hex */</span></div><div class="line"> <span class="attribute">color</span>: <span class="number">#0f0</span>;</div><div class="line"> <span class="comment">/* 6-chars hex */</span></div><div class="line"> <span class="attribute">color</span>: <span class="number">#00ff00</span>;</div><div class="line"> <span class="comment">/* rgba */</span></div><div class="line"> <span class="attribute">color</span>: <span class="built_in">rgb</span>(255, 0, 0);</div><div class="line"> <span class="comment">/* rgba */</span></div><div class="line"> <span class="attribute">color</span>: <span class="built_in">rgba</span>(255, 0, 0, 0.5);</div><div class="line"> <span class="comment">/* transparent */</span></div><div class="line"> <span class="attribute">color</span>: transparent;</div><div class="line"
> <span class="comment">/* Basic color keywords */</span></div><div class="line"> <span class="attribute">color</span>: orange;</div><div class="line"> <span class="comment">/* Extended color keywords */</span></div><div class="line"> <span class="attribute">color</span>: darkgray;</div><div class="line">}</div></pre></td></tr></table></figure>
+<h3 id="\u6ce8\u610f"><a href="#\u6ce8\u610f" class="headerlink" title="\u6ce8\u610f"></a>\u6ce8\u610f</h3><ul>
+<li><p>\u4e0d\u652f\u6301 <code>hsl()</code>, <code>hsla()</code>, <code>currentColor</code>, 8\u4e2a\u5b57\u7b26\u7684\u5341\u516d\u8fdb\u5236\u989c\u8272\u3002</p>
+</li>
+<li><p><code>rgb(a,b,c)</code> \u6216 <code>rgba(a,b,c,d)</code> \u7684\u6027\u80fd\u6bd4\u5176\u4ed6\u989c\u8272\u683c\u5f0f\u5dee\u5f88\u591a\uff0c\u8bf7\u9009\u62e9\u5408\u9002\u7684\u989c\u8272\u683c\u5f0f\u3002</p>
+</li>
+</ul>
+<p>\u989c\u8272\u540d\u79f0\u53ef\u67e5\u770b <a href="./color-names.html">\u989c\u8272\u540d\u79f0\u5217\u8868</a>.</p>
+<h2 id="CSS-length-\u5355\u4f4d"><a href="#CSS-length-\u5355\u4f4d" class="headerlink" title="CSS length \u5355\u4f4d"></a>CSS <code>length</code> \u5355\u4f4d</h2><p>\u5728 Weex \u4e2d\uff0c\u6211\u4eec\u53ea\u652f\u6301 <code>px</code> \u957f\u5ea6\u5355\u4f4d\u3002\u5e76\u4e14\u5b83\u5c06\u5728 JavaScript \u8fd0\u884c\u65f6\u548c\u672c\u673a\u6e32\u67d3\u5668\u4e2d\u89e3\u6790\u4e3a\u6570\u5b57\u7c7b\u578b\u3002</p>
+<p>\u4e0b\u9762\u8fd9\u4e9b\u4e0d\u540c\u7684\u5199\u6cd5\uff0c\u89e3\u6790\u7684\u7ed3\u679c\u5b8c\u5168\u76f8\u540c\u3002</p>
+<figure class="highlight css"><table><tr><td class="code"><pre><div class="line"><span class="selector-class">.classA</span> { <span class="attribute">font-size</span>: <span class="number">48px</span>; <span class="attribute">line-height</span>: <span class="number">64px</span>; }</div></pre></td></tr></table></figure>
+<p>\u4e0d\u652f\u6301\u7c7b\u4f3c <code>em</code>\uff0c<code>rem</code>\uff0c<code>pt</code> \u8fd9\u6837\u7684 CSS \u6807\u51c6\u4e2d\u7684\u5176\u4ed6\u957f\u5ea6\u5355\u4f4d\u3002</p>
+<h2 id="CSS-number-\u5355\u4f4d"><a href="#CSS-number-\u5355\u4f4d" class="headerlink" title="CSS number \u5355\u4f4d"></a>CSS <code>number</code> \u5355\u4f4d</h2><p>\u4ec5\u4ec5\u4e00\u4e2a\u6570\u5b57\u3002\u7528\u4e8e <a href="./common-style.html"><code>opacity</code></a>\uff0c<a href="./text-style.html"><code>lines</code></a>\u7b49\u3002</p>
+<p>\u6709\u65f6\u503c\u5fc5\u987b\u662f\u6574\u6570\uff0c\u4f8b\u5982\uff1a<code>lines</code>\u3002</p>
+<h2 id="CSS-percentage-\u5355\u4f4d-\u6682\u4e0d\u652f\u6301"><a href="#CSS-percentage-\u5355\u4f4d-\u6682\u4e0d\u652f\u6301" class="headerlink" title="CSS percentage \u5355\u4f4d (\u6682\u4e0d\u652f\u6301)"></a>CSS <code>percentage</code> \u5355\u4f4d (\u6682\u4e0d\u652f\u6301)</h2><p>\u8868\u793a\u767e\u5206\u6bd4\u503c\uff0c\u5982\u201c50\uff05\u201d\uff0c\u201c66.7\uff05\u201d\u7b49\u3002</p>
+<p>\u5b83\u662f CSS \u6807\u51c6\u7684\u4e00\u90e8\u5206\uff0c\u4f46 Weex \u6682\u4e0d\u652f\u6301\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/unit.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/unit.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/vue/difference-of-vuex.html
----------------------------------------------------------------------
diff --git a/content/cn/references/vue/difference-of-vuex.html b/content/cn/references/vue/difference-of-vuex.html
new file mode 100644
index 0000000..10c2dc5
--- /dev/null
+++ b/content/cn/references/vue/difference-of-vuex.html
@@ -0,0 +1,1349 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u4f7f\u7528 Vuex \u548c vue-router | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u4f7f\u7528 Vuex \u548c vue-routerVue.js \u4e5f\u6709\u8f83\u591a\u5468\u8fb9\u6280\u672f\u4ea7\u54c1\uff0c\u5982 Vuex \u548c vue-router \u7b49\uff0c\u8fd9\u4e9b\u5e93\u4e5f\u53ef\u4ee5\u5728 Weex \u4e2d\u5f88\u597d\u7684\u5de5\u4f5c\u3002
+
+\u6211\u4eec\u57fa\u4e8e Weex \u548c Vue \u5f00\u53d1\u4e86\u4e00\u4e2a\u7684\u5b8c\u6574\u9879\u76ee weex-hackernews \uff0c\u5728\u9879\u76ee\u4e2d\u4f7f\u7528\u4e86 Vuex \u548c vue-router \uff0c\u80fd\u591f\u5b9e\u73b0\u540c\u4e00\u4efd\u4ee3\u7801\uff0c\u5728 iOS\u3001Android\u3001Web \u4e0b\u90fd\u80fd\u5b8c\u6574\u5730\u5de5\u4f5c\u3002
+
+\u4f7f\u7528 Vuex">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u4f7f\u7528 Vuex \u548c vue-router">
+<meta property="og:url" content="https://weex.apache.org/cn/references/vue/difference-of-vuex.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u4f7f\u7528 Vuex \u548c vue-routerVue.js \u4e5f\u6709\u8f83\u591a\u5468\u8fb9\u6280\u672f\u4ea7\u54c1\uff0c\u5982 Vuex \u548c vue-router \u7b49\uff0c\u8fd9\u4e9b\u5e93\u4e5f\u53ef\u4ee5\u5728 Weex \u4e2d\u5f88\u597d\u7684\u5de5\u4f5c\u3002
+
+\u6211\u4eec\u57fa\u4e8e Weex \u548c Vue \u5f00\u53d1\u4e86\u4e00\u4e2a\u7684\u5b8c\u6574\u9879\u76ee weex-hackernews \uff0c\u5728\u9879\u76ee\u4e2d\u4f7f\u7528\u4e86 Vuex \u548c vue-router \uff0c\u80fd\u591f\u5b9e\u73b0\u540c\u4e00\u4efd\u4ee3\u7801\uff0c\u5728 iOS\u3001Android\u3001Web \u4e0b\u90fd\u80fd\u5b8c\u6574\u5730\u5de5\u4f5c\u3002
+
+\u4f7f\u7528 Vuex">
+<meta property="og:image" content="https://weex.apache.org//vuex.vuejs.org/zh-cn/images/vuex.png">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.916Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u4f7f\u7528 Vuex \u548c vue-router">
+<meta name="twitter:description" content="\u4f7f\u7528 Vuex \u548c vue-routerVue.js \u4e5f\u6709\u8f83\u591a\u5468\u8fb9\u6280\u672f\u4ea7\u54c1\uff0c\u5982 Vuex \u548c vue-router \u7b49\uff0c\u8fd9\u4e9b\u5e93\u4e5f\u53ef\u4ee5\u5728 Weex \u4e2d\u5f88\u597d\u7684\u5de5\u4f5c\u3002
+
+\u6211\u4eec\u57fa\u4e8e Weex \u548c Vue \u5f00\u53d1\u4e86\u4e00\u4e2a\u7684\u5b8c\u6574\u9879\u76ee weex-hackernews \uff0c\u5728\u9879\u76ee\u4e2d\u4f7f\u7528\u4e86 Vuex \u548c vue-router \uff0c\u80fd\u591f\u5b9e\u73b0\u540c\u4e00\u4efd\u4ee3\u7801\uff0c\u5728 iOS\u3001Android\u3001Web \u4e0b\u90fd\u80fd\u5b8c\u6574\u5730\u5de5\u4f5c\u3002
+
+\u4f7f\u7528 Vuex">
+<meta name="twitter:image" content="https://weex.apache.org//vuex.vuejs.org/zh-cn/images/vuex.png">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link current ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link current ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u4f7f\u7528 Vuex \u548c vue-router
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.916Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u4f7f\u7528-Vuex-\u548c-vue-router"><a href="#\u4f7f\u7528-Vuex-\u548c-vue-router" class="headerlink" title="\u4f7f\u7528 Vuex \u548c vue-router"></a>\u4f7f\u7528 Vuex \u548c vue-router</h1><p>Vue.js \u4e5f\u6709\u8f83\u591a\u5468\u8fb9\u6280\u672f\u4ea7\u54c1\uff0c\u5982 <a href="https://github.com/vuejs/vuex" target="_blank" rel="external">Vuex</a> \u548c <a href="https://github.com/vuejs/vue-router" target="_blank" rel="external">vue-router</a> \u7b49\uff0c\u8fd9\u4e9b\u5e93\u4e5f\u53ef\u4ee5\u5728 Weex \u4e2d\u5f88\u597d\u7684\u5de5\u4f5c\u3002</p>
+<blockquote>
+<p>\u6211\u4eec\u57fa\u4e8e Weex \u548c Vue \u5f00\u53d1\u4e86\u4e00\u4e2a\u7684\u5b8c\u6574\u9879\u76ee <a href="https://github.com/weexteam/weex-hackernews" target="_blank" rel="external">weex-hackernews</a> \uff0c\u5728\u9879\u76ee\u4e2d\u4f7f\u7528\u4e86 Vuex \u548c vue-router \uff0c\u80fd\u591f\u5b9e\u73b0\u540c\u4e00\u4efd\u4ee3\u7801\uff0c\u5728 iOS\u3001Android\u3001Web \u4e0b\u90fd\u80fd\u5b8c\u6574\u5730\u5de5\u4f5c\u3002</p>
+</blockquote>
+<h2 id="\u4f7f\u7528-Vuex"><a href="#\u4f7f\u7528-Vuex" class="headerlink" title="\u4f7f\u7528 Vuex"></a>\u4f7f\u7528 Vuex</h2><p><img src="//vuex.vuejs.org/zh-cn/images/vuex.png" alt="Vuex"></p>
+<p>Vuex \u662f\u4e00\u4e2a\u4e13\u4e3a Vue.js \u5e94\u7528\u7a0b\u5e8f\u5f00\u53d1\u7684\u72b6\u6001\u7ba1\u7406\u5de5\u5177\u5e93\uff0c\u53ef\u4ee5\u5229\u7528 Vue.js \u7684\u7ec6\u7c92\u5ea6\u6570\u636e\u54cd\u5e94\u673a\u5236\u6765\u8fdb\u884c\u9ad8\u6548\u7684\u72b6\u6001\u66f4\u65b0\u3002\u5b83\u91c7\u7528\u96c6\u4e2d\u5f0f\u5b58\u50a8\u7ba1\u7406\u5e94\u7528\u7684\u6240\u6709\u7ec4\u4ef6\u7684\u72b6\u6001\uff0c\u5e76\u4ee5\u76f8\u5e94\u7684\u89c4\u5219\u4fdd\u8bc1\u72b6\u6001\u4ee5\u4e00\u79cd\u53ef\u9884\u6d4b\u7684\u65b9\u5f0f\u53d1\u751f\u53d8\u5316\u3002</p>
+<p>\u7531\u4e8e\u5728 Vuex \u672c\u8eab\u5c31\u662f\u5e73\u53f0\u65e0\u5173\u7684\uff0c\u6709\u8f83\u5f3a\u7684\u79fb\u690d\u80fd\u529b\uff0c\u5b8c\u5168\u53ef\u4ee5\u5728 Weex \u4e2d\u6b63\u5e38\u5730\u4f7f\u7528 Vuex \uff0c\u9605\u8bfb\u5176<a href="https://vuex.vuejs.org/zh-cn/" target="_blank" rel="external">\u5b98\u65b9\u6587\u6863</a>\u53ef\u4ee5\u4e86\u89e3\u8be6\u7ec6\u7684\u4f7f\u7528\u65b9\u6cd5\u3002</p>
+<p>Vuex \u4e5f\u96c6\u6210\u5230\u4e86\u5176\u5b98\u65b9\u8c03\u8bd5\u5de5\u5177 <a href="https://github.com/vuejs/vue-devtools" target="_blank" rel="external">devtools extension</a>\u4e2d\uff0c\u63d0\u4f9b\u4e86\u8bf8\u5982 time-travel \u8c03\u8bd5\u3001\u72b6\u6001\u5feb\u7167\u5bfc\u5165\u5bfc\u51fa\u7b49\u9ad8\u7ea7\u8c03\u8bd5\u529f\u80fd\u3002\u8fd9\u4e9b\u5de5\u5177\u5728 Web \u5e73\u53f0\u4e2d\u53ef\u4ee5\u4e00\u5982\u65e2\u5f80\u5730\u5de5\u4f5c\u3002</p>
+<h2 id="\u4f7f\u7528-vue-router"><a href="#\u4f7f\u7528-vue-router" class="headerlink" title="\u4f7f\u7528 vue-router"></a>\u4f7f\u7528 vue-router</h2><p>vue-router \u662f\u4e13\u4e3a Vue.js \u5f00\u53d1\u7684\u4fbf\u4e8e\u5b9e\u73b0\u5355\u9875\u5e94\u7528\u7684\u5de5\u5177\u5e93\uff0c\u80fd\u591f\u4ee5\u58f0\u660e\u5f0f\u7684\u65b9\u6cd5\u7f16\u5199\u9875\u9762\u7684\u5bfc\u822a\u548c\u8df3\u8f6c\u4fe1\u606f\u3002</p>
+<p>\u7531\u4e8e Weex \u7684\u8fd0\u884c\u73af\u5883\u4e0d\u53ea\u662f\u6d4f\u89c8\u5668\uff0c\u901a\u5e38\u662f\u4ee5\u79fb\u52a8\u7aef\u539f\u751f\u73af\u5883\u4e3a\u4e3b\uff0c\u7136\u800c\u5728 Android \u548c iOS \u4e2d\u90fd\u6ca1\u6709\u6d4f\u89c8\u5668\u7684 History API\uff0c\u4e5f\u4e0d\u5b58\u5728 DOM\uff0c\u56e0\u6b64\u5982\u679c\u60f3\u5728 Weex \u73af\u5883\u4e2d\u4f7f\u7528 vue-router \uff0c\u6709\u4e9b\u529f\u80fd\u53d7\u5230\u4e86\u9650\u5236\uff0c\u4f7f\u7528\u65f6\u5e94\u8be5\u6ce8\u610f\u3002</p>
+<h3 id="\u8def\u7531\u6a21\u5f0f"><a href="#\u8def\u7531\u6a21\u5f0f" class="headerlink" title="\u8def\u7531\u6a21\u5f0f"></a>\u8def\u7531\u6a21\u5f0f</h3><p>vue-router \u63d0\u4f9b\u4e86\u4e09\u79cd\u8fd0\u884c\u6a21\u5f0f\uff1a</p>
+<ul>
+<li><code>hash</code>: \u4f7f\u7528 URL hash \u503c\u6765\u4f5c\u8def\u7531\u3002\u9ed8\u8ba4\u6a21\u5f0f\u3002</li>
+<li><code>history</code>: \u4f9d\u8d56 HTML5 History API \u548c\u670d\u52a1\u5668\u914d\u7f6e\u3002\u67e5\u770b <a href="https://router.vuejs.org/zh-cn/essentials/history-mode.html" target="_blank" rel="external">HTML5 History \u6a21\u5f0f</a>\u3002</li>
+<li><code>abstract</code>: \u652f\u6301\u6240\u6709 JavaScript \u8fd0\u884c\u73af\u5883\uff0c\u5982 Node.js \u670d\u52a1\u5668\u7aef\u3002</li>
+</ul>
+<p>\u914d\u7f6e\u65b9\u6cd5\u662f\u5728\u5b9a\u4e49\u8def\u7531\u65f6\uff0c\u4f20\u9012 <code>mode</code> \u5c5e\u6027\uff1a</p>
+<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">new</span> Router({</div><div class="line"> <span class="attr">mode</span>: <span class="string">'abstract'</span>,</div><div class="line"> <span class="comment">// ...</span></div><div class="line">})</div></pre></td></tr></table></figure>
+<p>\u4ece\u4e09\u79cd\u6a21\u5f0f\u7684\u4ecb\u7ecd\u4e2d\u4e5f\u53ef\u4ee5\u770b\u51fa\u6765\uff0cWeex \u73af\u5883\u4e2d\u53ea\u652f\u6301\u4f7f\u7528 abstract \u6a21\u5f0f\u3002\u4e0d\u8fc7\uff0cvue-router \u81ea\u8eab\u4f1a\u5bf9\u73af\u5883\u505a\u6821\u9a8c\uff0c<strong>\u5982\u679c\u53d1\u73b0\u6ca1\u6709\u6d4f\u89c8\u5668\u7684 API\uff0cvue-router \u4f1a\u81ea\u52a8\u5f3a\u5236\u8fdb\u5165 abstract \u6a21\u5f0f</strong>\uff0c\u6240\u4ee5\u5728\u4f7f\u7528\u65f6\u53ea\u8981\u4e0d\u5199 <code>mode</code> \u914d\u7f6e\u5373\u53ef\u3002\u9ed8\u8ba4 vue-router \u4f1a\u5728\u6d4f\u89c8\u5668\u73af\u5883\u4e2d\u4f7f\u7528 hash \u6a21\u5f0f\uff0c\u5728\u79fb\u52a8\u7aef\u539f\u751f\u73af\u5883\u4e2d\u4f7f\u7528 abstract \u6a21\u5f0f\u3002</p>
+<h3 id="\u7f16\u7a0b\u5f0f\u5bfc\u822a"><a href="#\u7f16\u7a0b\u5f0f\u5bfc\u822a" class="headerlink" title="\u7f16\u7a0b\u5f0f\u5bfc\u822a"></a>\u7f16\u7a0b\u5f0f\u5bfc\u822a</h3><p>vue-router \u4e2d\u4f7f\u7528 <code><router-link></code> \u521b\u5efa\u5bfc\u822a\u94fe\u63a5\uff0c\u4e0d\u8fc7\u5728\u5176\u4e2d\u4f7f\u7528\u4e86\u57fa\u4e8e DOM \u4e8b\u4ef6\u7684\u4e00\u4e9b\u7279\u6027\uff0c\u5728 Weex \u539f\u751f\u73af\u5883\u4e2d\u5e76\u4e0d\u80fd\u5f88\u597d\u7684\u5de5\u4f5c\u3002\u5728 Weex \u4e2d\uff0c\u4f60\u5fc5\u987b\u4f7f\u7528<a href="https://router.vuejs.org/zh-cn/essentials/navigation.html" target="_blank" rel="external">\u7f16\u7a0b\u5f0f\u5bfc\u822a</a>\u6765\u7f16\u5199\u9875\u9762\u8df3\u8f6c\u903b\u8f91\u3002</p>
+<p>\u7f16\u7a0b\u5f0f\u5bfc\u822a\u5176\u5b9e\u5c31\u662f\u901a\u8fc7\u4e3b\u52a8\u8c03\u7528 router \u5b9e\u4f8b\u4e0a\u7684 <code>push</code> \u65b9\u6cd5\u5b9e\u73b0\u8df3\u8f6c\u3002</p>
+<p>\u4f7f\u7528 <code><router-link></code> \u7684\u4ee3\u7801\u793a\u4f8b\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment"><!-- \u53ea\u80fd\u5728 Web \u4e2d\u4f7f\u7528\uff0cNative \u73af\u5883\u4e0d\u652f\u6301\uff01 --></span></div><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"profile"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Profile<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">router-link</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></
figure>
+<p>\u5728 Weex \u4e2d\uff0c\u9700\u8981\u5199\u6210\u8fd9\u4e2a\u6837\u5b50\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> @<span class="attr">click</span>=<span class="string">"jump"</span>></span>Profile<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'./path/to/router'</span></div><div class="line"> <span class="keyword">export<
/span> <span class="keyword">default</span> {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> jump () {</div><div class="line"> router.push(<span class="string">'profile'</span>)</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/vue/difference-of-vuex.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[47/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/intro/page-architecture.html
----------------------------------------------------------------------
diff --git a/content/cn/guide/intro/page-architecture.html b/content/cn/guide/intro/page-architecture.html
new file mode 100644
index 0000000..aa7d2f6
--- /dev/null
+++ b/content/cn/guide/intro/page-architecture.html
@@ -0,0 +1,427 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex \u9875\u9762\u7ed3\u6784 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Weex \u9875\u9762\u7ed3\u6784\u4e00\u4e2a Weex \u9875\u9762\u5c31\u662f\u4e00\u4e2a\u76f8\u5bf9\u72ec\u7acb\u89e3\u8026\u7684\u79fb\u52a8\u5e94\u7528\u754c\u9762\uff0c\u5b83\u4e0d\u4ec5\u5305\u62ec\u4e86\u754c\u9762\u5c55\u793a\u3001\u66f4\u5305\u542b\u4e86\u903b\u8f91\u5904\u7406\u3001\u8bbe\u5907\u80fd\u529b\u4f7f\u7528\u3001\u751f\u547d\u5468\u671f\u7ba1\u7406\u7b49\u90e8\u5206\u3002
+\u754c\u9762DOM \u6a21\u578bWeex \u9875\u9762\u901a\u8fc7\u7c7b\u4f3c HTML DOM \u7684\u65b9\u5f0f\u7ba1\u7406\u754c\u9762\uff0c\u9996\u5148\u9875\u9762\u4f1a\u88ab\u5206\u89e3\u4e3a\u4e00\u4e2a DOM \u6811\uff0c\uff0c\u6bcf\u4e2a DOM \u7ed3\u70b9\u90fd\u4ee3\u8868\u4e86\u4e00\u4e2a\u76f8\u5bf9\u72ec\u7acb\u7684 native \u89c6\u56fe\u7684\u5355\u5143\u3002\u7136\u540e\u4e0d\u540c\u7684\u89c6\u56fe\u5355\u5143\u4e4b\u95f4\u901a\u8fc7\u6811\u5f62\u7ed3\u6784\u7ec4\u5408\u5728\u4e86\u4e00\u8d77\uff0c\u6784\u6210\u4e00\u4e2a\u5b8c\u6574\u7684\u9875\u9762\u3002">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Weex \u9875\u9762\u7ed3\u6784">
+<meta property="og:url" content="https://weex.apache.org/cn/guide/intro/page-architecture.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Weex \u9875\u9762\u7ed3\u6784\u4e00\u4e2a Weex \u9875\u9762\u5c31\u662f\u4e00\u4e2a\u76f8\u5bf9\u72ec\u7acb\u89e3\u8026\u7684\u79fb\u52a8\u5e94\u7528\u754c\u9762\uff0c\u5b83\u4e0d\u4ec5\u5305\u62ec\u4e86\u754c\u9762\u5c55\u793a\u3001\u66f4\u5305\u542b\u4e86\u903b\u8f91\u5904\u7406\u3001\u8bbe\u5907\u80fd\u529b\u4f7f\u7528\u3001\u751f\u547d\u5468\u671f\u7ba1\u7406\u7b49\u90e8\u5206\u3002
+\u754c\u9762DOM \u6a21\u578bWeex \u9875\u9762\u901a\u8fc7\u7c7b\u4f3c HTML DOM \u7684\u65b9\u5f0f\u7ba1\u7406\u754c\u9762\uff0c\u9996\u5148\u9875\u9762\u4f1a\u88ab\u5206\u89e3\u4e3a\u4e00\u4e2a DOM \u6811\uff0c\uff0c\u6bcf\u4e2a DOM \u7ed3\u70b9\u90fd\u4ee3\u8868\u4e86\u4e00\u4e2a\u76f8\u5bf9\u72ec\u7acb\u7684 native \u89c6\u56fe\u7684\u5355\u5143\u3002\u7136\u540e\u4e0d\u540c\u7684\u89c6\u56fe\u5355\u5143\u4e4b\u95f4\u901a\u8fc7\u6811\u5f62\u7ed3\u6784\u7ec4\u5408\u5728\u4e86\u4e00\u8d77\uff0c\u6784\u6210\u4e00\u4e2a\u5b8c\u6574\u7684\u9875\u9762\u3002">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.826Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex \u9875\u9762\u7ed3\u6784">
+<meta name="twitter:description" content="Weex \u9875\u9762\u7ed3\u6784\u4e00\u4e2a Weex \u9875\u9762\u5c31\u662f\u4e00\u4e2a\u76f8\u5bf9\u72ec\u7acb\u89e3\u8026\u7684\u79fb\u52a8\u5e94\u7528\u754c\u9762\uff0c\u5b83\u4e0d\u4ec5\u5305\u62ec\u4e86\u754c\u9762\u5c55\u793a\u3001\u66f4\u5305\u542b\u4e86\u903b\u8f91\u5904\u7406\u3001\u8bbe\u5907\u80fd\u529b\u4f7f\u7528\u3001\u751f\u547d\u5468\u671f\u7ba1\u7406\u7b49\u90e8\u5206\u3002
+\u754c\u9762DOM \u6a21\u578bWeex \u9875\u9762\u901a\u8fc7\u7c7b\u4f3c HTML DOM \u7684\u65b9\u5f0f\u7ba1\u7406\u754c\u9762\uff0c\u9996\u5148\u9875\u9762\u4f1a\u88ab\u5206\u89e3\u4e3a\u4e00\u4e2a DOM \u6811\uff0c\uff0c\u6bcf\u4e2a DOM \u7ed3\u70b9\u90fd\u4ee3\u8868\u4e86\u4e00\u4e2a\u76f8\u5bf9\u72ec\u7acb\u7684 native \u89c6\u56fe\u7684\u5355\u5143\u3002\u7136\u540e\u4e0d\u540c\u7684\u89c6\u56fe\u5355\u5143\u4e4b\u95f4\u901a\u8fc7\u6811\u5f62\u7ed3\u6784\u7ec4\u5408\u5728\u4e86\u4e00\u8d77\uff0c\u6784\u6210\u4e00\u4e2a\u5b8c\u6574\u7684\u9875\u9762\u3002">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link current ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link current ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Weex \u9875\u9762\u7ed3\u6784
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.826Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Weex-\u9875\u9762\u7ed3\u6784"><a href="#Weex-\u9875\u9762\u7ed3\u6784" class="headerlink" title="Weex \u9875\u9762\u7ed3\u6784"></a>Weex \u9875\u9762\u7ed3\u6784</h1><p>\u4e00\u4e2a Weex \u9875\u9762\u5c31\u662f\u4e00\u4e2a\u76f8\u5bf9\u72ec\u7acb\u89e3\u8026\u7684\u79fb\u52a8\u5e94\u7528\u754c\u9762\uff0c\u5b83\u4e0d\u4ec5\u5305\u62ec\u4e86\u754c\u9762\u5c55\u793a\u3001\u66f4\u5305\u542b\u4e86\u903b\u8f91\u5904\u7406\u3001\u8bbe\u5907\u80fd\u529b\u4f7f\u7528\u3001\u751f\u547d\u5468\u671f\u7ba1\u7406\u7b49\u90e8\u5206\u3002</p>
+<h2 id="\u754c\u9762"><a href="#\u754c\u9762" class="headerlink" title="\u754c\u9762"></a>\u754c\u9762</h2><h3 id="DOM-\u6a21\u578b"><a href="#DOM-\u6a21\u578b" class="headerlink" title="DOM \u6a21\u578b"></a>DOM \u6a21\u578b</h3><p>Weex \u9875\u9762\u901a\u8fc7\u7c7b\u4f3c HTML DOM \u7684\u65b9\u5f0f\u7ba1\u7406\u754c\u9762\uff0c\u9996\u5148\u9875\u9762\u4f1a\u88ab\u5206\u89e3\u4e3a\u4e00\u4e2a DOM \u6811\uff0c\uff0c\u6bcf\u4e2a DOM \u7ed3\u70b9\u90fd\u4ee3\u8868\u4e86\u4e00\u4e2a\u76f8\u5bf9\u72ec\u7acb\u7684 native \u89c6\u56fe\u7684\u5355\u5143\u3002\u7136\u540e\u4e0d\u540c\u7684\u89c6\u56fe\u5355\u5143\u4e4b\u95f4\u901a\u8fc7\u6811\u5f62\u7ed3\u6784\u7ec4\u5408\u5728\u4e86\u4e00\u8d77\uff0c\u6784\u6210\u4e00\u4e2a\u5b8c\u6574\u7684\u9875\u9762\u3002</p>
+<!-- DOM APIs -->
+<h3 id="\u7ec4\u4ef6"><a href="#\u7ec4\u4ef6" class="headerlink" title="\u7ec4\u4ef6"></a>\u7ec4\u4ef6</h3><p>Weex \u652f\u6301\u6587\u5b57\u3001\u56fe\u7247\u3001\u89c6\u9891\u7b49\u5185\u5bb9\u578b\u7ec4\u4ef6\uff0c\u4e5f\u652f\u6301 div\u3001list\u3001scroller \u7b49\u5bb9\u5668\u578b\u7ec4\u4ef6\uff0c\u8fd8\u5305\u62ec slider\u3001input\u3001textarea\u3001switch \u7b49\u591a\u79cd\u7279\u6b8a\u7684\u7ec4\u4ef6\u3002Weex \u7684\u754c\u9762\u5c31\u662f\u7531\u8fd9\u4e9b\u7ec4\u4ef6\u4ee5 DOM \u6811\u7684\u65b9\u5f0f\u6784\u5efa\u51fa\u6765\u7684\u3002</p>
+<!-- \u7ec4\u4ef6\u5217\u8868 -->
+<h3 id="\u5e03\u5c40\u7cfb\u7edf"><a href="#\u5e03\u5c40\u7cfb\u7edf" class="headerlink" title="\u5e03\u5c40\u7cfb\u7edf"></a>\u5e03\u5c40\u7cfb\u7edf</h3><p>Weex \u9875\u9762\u4e2d\u7684\u7ec4\u4ef6\u4f1a\u6309\u7167\u4e00\u5b9a\u7684\u5e03\u5c40\u89c4\u8303\u6765\u8fdb\u884c\u6392\u5e03\uff0c\u6211\u4eec\u8fd9\u91cc\u63d0\u4f9b\u4e86 CSS \u4e2d\u7684\u76d2\u6a21\u578b\u3001flexbox \u548c \u7edd\u5bf9/\u76f8\u5bf9/\u56fa\u5b9a/\u5438\u9644\u5e03\u5c40\u8fd9\u4e09\u5927\u5757\u5e03\u5c40\u6a21\u578b\u3002</p>
+<ul>
+<li>\u76d2\u6a21\u578b\uff1a\u901a\u8fc7\u5bbd\u3001\u9ad8\u3001\u8fb9\u6846\u3001\u5185\u5916\u8fb9\u8ddd\u3001\u8fb9\u6846\u7b49 CSS \u5c5e\u6027\u63cf\u8ff0\u4e00\u4e2a\u7ec4\u4ef6\u672c\u8eab\u7684\u5c3a\u5bf8\u3002</li>
+<li>flexbox\uff1a\u901a\u8fc7 CSS 3 Flexbox \u5e03\u5c40\u89c4\u8303\u5b9a\u4e49\u548c\u63cf\u8ff0\u7ec4\u4ef6\u4e4b\u95f4\u7684\u7a7a\u95f4\u5206\u5e03\u60c5\u51b5\u3002</li>
+<li>position\uff1a\u652f\u6301 CSS position \u5c5e\u6027\u4e2d\u7684 <code>absolute</code>, <code>relative</code>, <code>fixed</code>, <code>sticky</code> \u4f4d\u7f6e\u7c7b\u578b\uff0c\u5176\u4e2d <code>relative</code> \u662f\u9ed8\u8ba4\u503c\u3002</li>
+</ul>
+<h2 id="\u529f\u80fd"><a href="#\u529f\u80fd" class="headerlink" title="\u529f\u80fd"></a>\u529f\u80fd</h2><p>Weex \u63d0\u4f9b\u4e86\u975e\u5e38\u4e30\u5bcc\u7684\u7cfb\u7edf\u529f\u80fd API\uff0c\u5305\u62ec\u5f39\u51fa\u5b58\u50a8\u3001\u7f51\u7edc\u3001\u5bfc\u822a\u3001\u5f39\u5bf9\u8bdd\u6846\u548c toast \u7b49\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u5728 Weex \u9875\u9762\u901a\u8fc7\u83b7\u53d6\u4e00\u4e2a native module \u7684\u65b9\u5f0f\u5f15\u5165\u5e76\u8c03\u7528\u8fd9\u4e9b\u5ba2\u6237\u7aef\u529f\u80fd API\u3002</p>
+<!-- \u6a21\u5757\u5217\u8868 -->
+<h2 id="\u751f\u547d\u5468\u671f"><a href="#\u751f\u547d\u5468\u671f" class="headerlink" title="\u751f\u547d\u5468\u671f"></a>\u751f\u547d\u5468\u671f</h2><p>\u6bcf\u4e2a Weex \u9875\u9762\u90fd\u6709\u5176\u81ea\u8eab\u7684\u751f\u547d\u5468\u671f\uff0c\u9875\u9762\u4ece\u5f00\u59cb\u88ab\u521b\u5efa\u5230\u6700\u540e\u88ab\u9500\u6bc1\uff0c\u4f1a\u7ecf\u5386\u5230\u6574\u4e2a\u8fc7\u7a0b\u3002\u8fd9\u662f\u901a\u8fc7\u5bf9 Weex \u9875\u9762\u7684\u521b\u5efa\u548c\u9500\u6bc1\uff0c\u5728\u8def\u7531\u4e2d\u901a\u8fc7 SDK \u81ea\u884c\u5b9a\u4e49\u5e76\u5b9e\u73b0\u7684\u3002</p>
+<!-- ios apis -->
+<!-- android apis -->
+<!-- html5 apis -->
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/guide/intro/page-architecture.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/intro/using-vue.html
----------------------------------------------------------------------
diff --git a/content/cn/guide/intro/using-vue.html b/content/cn/guide/intro/using-vue.html
new file mode 100644
index 0000000..5e3b7a4
--- /dev/null
+++ b/content/cn/guide/intro/using-vue.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762Vue &amp; Weex \u4ecb\u7ecdVue.js \u662f Evan You \u5f00\u53d1\u7684\u6e10\u8fdb\u5f0f JavaScript \u6846\u67b6\uff0c\u5728\u6613\u7528\u6027\u3001\u7075\u6d3b\u6027\u548c\u6027\u80fd\u7b49\u65b9\u9762\u90fd\u975e\u5e38\u4f18\u79c0\u3002\u5f00\u53d1\u8005\u80fd\u591f\u901a\u8fc7\u64b0\u5199 *.vue \u6587\u4ef6\uff0c\u57fa\u4e8e &lt;template&gt;, &lt;style&gt;, &lt;script&gt; \u5feb\u901f\u6784\u5efa\u7ec4\u4ef6\u5316\u7684 web \u5e94\u7528\u3002
+
+Vue.js \u5728 2016 \u5e74 10">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762">
+<meta property="og:url" content="https://weex.apache.org/cn/guide/intro/using-vue.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762Vue &amp; Weex \u4ecb\u7ecdVue.js \u662f Evan You \u5f00\u53d1\u7684\u6e10\u8fdb\u5f0f JavaScript \u6846\u67b6\uff0c\u5728\u6613\u7528\u6027\u3001\u7075\u6d3b\u6027\u548c\u6027\u80fd\u7b49\u65b9\u9762\u90fd\u975e\u5e38\u4f18\u79c0\u3002\u5f00\u53d1\u8005\u80fd\u591f\u901a\u8fc7\u64b0\u5199 *.vue \u6587\u4ef6\uff0c\u57fa\u4e8e &lt;template&gt;, &lt;style&gt;, &lt;script&gt; \u5feb\u901f\u6784\u5efa\u7ec4\u4ef6\u5316\u7684 web \u5e94\u7528\u3002
+
+Vue.js \u5728 2016 \u5e74 10">
+<meta property="og:image" content="https://weex.apache.org//cn.vuejs.org/images/vue-component.png">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.827Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762">
+<meta name="twitter:description" content="\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762Vue &amp; Weex \u4ecb\u7ecdVue.js \u662f Evan You \u5f00\u53d1\u7684\u6e10\u8fdb\u5f0f JavaScript \u6846\u67b6\uff0c\u5728\u6613\u7528\u6027\u3001\u7075\u6d3b\u6027\u548c\u6027\u80fd\u7b49\u65b9\u9762\u90fd\u975e\u5e38\u4f18\u79c0\u3002\u5f00\u53d1\u8005\u80fd\u591f\u901a\u8fc7\u64b0\u5199 *.vue \u6587\u4ef6\uff0c\u57fa\u4e8e &lt;template&gt;, &lt;style&gt;, &lt;script&gt; \u5feb\u901f\u6784\u5efa\u7ec4\u4ef6\u5316\u7684 web \u5e94\u7528\u3002
+
+Vue.js \u5728 2016 \u5e74 10">
+<meta name="twitter:image" content="https://weex.apache.org//cn.vuejs.org/images/vue-component.png">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link current ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link current ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.827Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u4f7f\u7528-Vue-\u5f00\u53d1-Weex-\u9875\u9762"><a href="#\u4f7f\u7528-Vue-\u5f00\u53d1-Weex-\u9875\u9762" class="headerlink" title="\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762"></a>\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</h1><h2 id="Vue-amp-Weex-\u4ecb\u7ecd"><a href="#Vue-amp-Weex-\u4ecb\u7ecd" class="headerlink" title="Vue & Weex \u4ecb\u7ecd"></a>Vue & Weex \u4ecb\u7ecd</h2><p><a href="https://vuejs.org/" target="_blank" rel="external">Vue.js</a> \u662f Evan You \u5f00\u53d1\u7684\u6e10\u8fdb\u5f0f JavaScript \u6846\u67b6\uff0c\u5728\u6613\u7528\u6027\u3001\u7075\u6d3b\u6027\u548c\u6027\u80fd\u7b49\u65b9\u9762\u90fd\u975e\u5e38\u4f18\u79c0\u3002\u5f00\u53d1\u8005\u80fd\u591f\u901a\u8fc7\u64b0\u5199 <code>*.vue</code> \u6587\u4ef6\uff0c\u57fa\u4e8e <code><template></code>, <code><style></code>, <code><script></code> \u5feb\u901f\u6784\u5efa\u7ec4\u4ef6\u5316\u7684 web \u5e94\u7528\u3002</p>
+<p><img src="//cn.vuejs.org/images/vue-component.png" alt="a vue file"></p>
+<p>Vue.js \u5728 2016 \u5e74 10 \u6708\u6b63\u5f0f\u53d1\u5e03\u4e86 2.0 \u7248\u672c\uff0c\u8be5\u7248\u672c\u52a0\u5165\u4e86 Virtual-DOM \u548c\u9884\u7f16\u8bd1\u5668\u7684\u8bbe\u8ba1\uff0c\u4f7f\u5f97\u8be5\u6846\u67b6\u5728\u8fd0\u884c\u65f6\u80fd\u591f\u8131\u79bb HTML \u548c CSS \u89e3\u6790\uff0c\u53ea\u4f9d\u8d56 JavaScript\uff1b\u540c\u65f6 Virtual-DOM \u4e5f\u4f7f\u5f97 Vue 2.x \u6e32\u67d3\u6210\u539f\u751f UI \u6210\u4e3a\u4e86\u53ef\u80fd\u3002</p>
+<p><a href="https://weex-project.io/">Weex</a> \u662f\u4e00\u5957\u7b80\u5355\u6613\u7528\u7684\u8de8\u5e73\u53f0\u5f00\u53d1\u65b9\u6848\uff0c\u80fd\u4ee5 Web \u7684\u5f00\u53d1\u4f53\u9a8c\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684\u539f\u751f\u5e94\u7528\u3002 Weex \u4e0e Vue \u6709\u5b98\u65b9\u5408\u4f5c\uff0c\u652f\u6301\u5c06 Vue 2.x \u4f5c\u4e3a\u5185\u7f6e\u7684\u524d\u7aef\u6846\u67b6\uff0cVue \u4e5f\u501f\u6b64\u5177\u5907\u4e86\u5f00\u53d1\u539f\u751f\u5e94\u7528\u7684\u80fd\u529b\u3002</p>
+<h2 id="\u5c1d\u9c9c\u4f53\u9a8c"><a href="#\u5c1d\u9c9c\u4f53\u9a8c" class="headerlink" title="\u5c1d\u9c9c\u4f53\u9a8c"></a>\u5c1d\u9c9c\u4f53\u9a8c</h2><blockquote>
+<p>\u5f00\u59cb\u4e4b\u524d\uff0c\u5e0c\u671b\u4f60\u80fd\u5bf9 Weex \u548c Vue \u6709\u57fa\u672c\u7684\u4e86\u89e3\uff0c\u63a8\u8350\u9605\u8bfb <a href="../index.html">Weex Tutorial</a> \u548c <a href="https://vuejs.org/v2/guide/" target="_blank" rel="external">Vue Introduction</a> \u4e86\u89e3\u66f4\u591a\u4fe1\u606f\u3002</p>
+</blockquote>
+<h3 id="\u5feb\u901f\u521b\u5efa\u9879\u76ee"><a href="#\u5feb\u901f\u521b\u5efa\u9879\u76ee" class="headerlink" title="\u5feb\u901f\u521b\u5efa\u9879\u76ee"></a>\u5feb\u901f\u521b\u5efa\u9879\u76ee</h3><p>Weex \u5b98\u65b9\u63d0\u4f9b\u4e86 <a href="https://github.com/weexteam/weex-toolkit" target="_blank" rel="external">weex-toolkit</a> \u7684\u811a\u624b\u67b6\u5de5\u5177\u6765\u8f85\u52a9\u5f00\u53d1\u548c\u8c03\u8bd5\u3002</p>
+<p>\u9996\u5148\u5b89\u88c5 <code>weex-toolkit</code> \u5de5\u5177\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">npm install weex-toolkit@beta -g</div></pre></td></tr></table></figure>
+<blockquote>
+<p>\u6ce8\uff1a\u76ee\u524d weex-toolkit \u4ec5\u5728 beta \u7248\u4e2d\u624d\u652f\u6301\u521d\u59cb\u5316 Vue \u9879\u76ee\uff0c\u4f7f\u7528\u524d\u8bf7\u786e\u8ba4\u7248\u672c\u662f\u5426\u6b63\u786e\u3002</p>
+</blockquote>
+<p>\u7136\u540e\u521d\u59cb\u5316 Weex \u9879\u76ee\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">weex init awesome-project</div></pre></td></tr></table></figure>
+<p>\u6267\u884c\u5b8c\u547d\u4ee4\u540e\uff0c\u5728 <code>awesome-project</code> \u76ee\u5f55\u4e2d\u5c31\u521b\u5efa\u4e86\u4e00\u4e2a\u4f7f\u7528 Weex \u548c Vue \u7684\u6a21\u677f\u9879\u76ee\uff0c\u751f\u6210\u7684\u9879\u76ee\u529f\u80fd\u548c\u7528\u6cd5\u53ef\u4ee5\u53c2\u8003\u5176 package.json \u548c README \u3002</p>
+<h2 id="\u7f16\u5199\u4ee3\u7801"><a href="#\u7f16\u5199\u4ee3\u7801" class="headerlink" title="\u7f16\u5199\u4ee3\u7801"></a>\u7f16\u5199\u4ee3\u7801</h2><p>\u5728\u521b\u5efa\u4e86\u9879\u76ee\u5e76\u4e14\u914d\u7f6e\u597d\u4e86\u5f00\u53d1\u73af\u5883\u4e4b\u540e\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u5f00\u59cb\u5199\u4ee3\u7801\u4e86\u3002</p>
+<p>\u867d\u7136\u5f00\u53d1\u7684\u662f\u539f\u751f\u5e94\u7528\uff0c\u4f46\u662f\u4ee3\u7801\u5199\u8d77\u6765\u548c Web \u4e2d\u5e76\u6ca1\u4ec0\u4e48\u4e0d\u4e00\u6837\u3002\u4f60\u53ef\u4ee5\u9009\u62e9\u81ea\u5df1\u559c\u6b22\u7684\u524d\u7aef\u5f00\u53d1\u73af\u5883\u3001\u53ef\u4ee5\u5199 <code>.vue</code> \u6587\u4ef6\u3001\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5199 javascript \u6587\u4ef6\u3001\u53ef\u4ee5\u4f7f\u7528 ES6+ \u3001\u53ef\u4ee5\u4f7f\u7528\u53d1\u5e03\u5728 npm \u4e0a\u7684\u6a21\u5757\u3001\u53ef\u4ee5\u6269\u5c55 Weex \u7684\u7ec4\u4ef6\u6216\u8005\u6a21\u5757\u3002</p>
+<h3 id="\u6ce8\u610f\u4e8b\u9879"><a href="#\u6ce8\u610f\u4e8b\u9879" class="headerlink" title="\u6ce8\u610f\u4e8b\u9879"></a>\u6ce8\u610f\u4e8b\u9879</h3><p>Vue.js \u6700\u521d\u662f\u4e3a Web \u8bbe\u8ba1\u7684\uff0c\u867d\u7136\u53ef\u4ee5\u57fa\u4e8e Weex \u5f00\u53d1\u79fb\u52a8\u5e94\u7528\uff0c\u4f46\u662f Web \u5f00\u53d1\u548c\u539f\u751f\u5f00\u53d1\u6bd5\u7adf\u4e0d\u540c\uff0c\u5728\u529f\u80fd\u548c\u5f00\u53d1\u4f53\u9a8c\u4e0a\u90fd\u6709\u4e00\u4e9b\u5dee\u5f02\uff0c\u8fd9\u4e9b\u5dee\u5f02\u4ece\u672c\u8d28\u4e0a\u8bb2\u662f\u539f\u751f\u5f00\u53d1\u5e73\u53f0\u548c Web \u5e73\u53f0\u4e4b\u95f4\u7684\u5dee\u5f02\uff0cWeex \u6b63\u5728\u52aa\u529b\u7f29\u5c0f\u8fd9\u4e2a\u5dee\u5f02\u7684\u8303\u56f4\u3002</p>
+<p>\u53c2\u8003\u6587\u7ae0<a href="../../references/vue/index.html">\u300aVue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02\u300b</a>\u4e86\u89e3\u5b58\u5728\u5dee\u5f02\u7684\u539f\u56e0\u548c\u7ec6\u8282\u3002</p>
+<h3 id="\u4f7f\u7528\u5176\u4ed6\u5de5\u5177\u5e93"><a href="#\u4f7f\u7528\u5176\u4ed6\u5de5\u5177\u5e93" class="headerlink" title="\u4f7f\u7528\u5176\u4ed6\u5de5\u5177\u5e93"></a>\u4f7f\u7528\u5176\u4ed6\u5de5\u5177\u5e93</h3><p>Vue.js \u4e5f\u6709\u8f83\u591a\u5468\u8fb9\u6280\u672f\u4ea7\u54c1\uff0c\u5982 <a href="https://github.com/vuejs/vuex" target="_blank" rel="external">Vuex</a> \u548c <a href="https://github.com/vuejs/vue-router" target="_blank" rel="external">vue-router</a> \u7b49\uff0c\u8fd9\u4e9b\u5e93\u4e5f\u53ef\u4ee5\u5728 Weex \u4e2d\u5f88\u597d\u7684\u5de5\u4f5c\u3002</p>
+<p>\u5173\u4e8e Vuex \u548c vue-louter \u7684\u4f7f\u7528\u65b9\u6cd5\uff0c\u53ef\u4ee5\u53c2\u8003<a href="../../references/vue/difference-of-vuex.html">\u300a\u5728 Weex \u9879\u76ee\u4e2d\u4f7f\u7528 Vuex \u548c vue-router\u300b</a>\u3002</p>
+<blockquote>
+<p>\u6211\u4eec\u57fa\u4e8e Weex \u548c Vue \u5f00\u53d1\u4e86\u4e00\u4e2a\u7684\u5b8c\u6574\u9879\u76ee <a href="https://github.com/weexteam/weex-hackernews" target="_blank" rel="external">weex-hackernews</a> \uff0c\u5f15\u5165\u4e86\u5305\u542b Vue 2.x \u7684 WeexSDK\uff0c\u521b\u5efa\u4e86\u4e09\u7aef\u7684\u9879\u76ee\u548c\u57fa\u672c\u7684\u7f16\u8bd1\u914d\u7f6e\u3002\u5728\u9879\u76ee\u4e2d\u4f7f\u7528\u4e86 Vuex \u548c vue-router \uff0c\u80fd\u591f\u5b9e\u73b0\u540c\u4e00\u4efd\u4ee3\u7801\uff0c\u5728 iOS\u3001Android\u3001Web \u4e0b\u90fd\u80fd\u5b8c\u6574\u5730\u5de5\u4f5c\u3002</p>
+</blockquote>
+<h3 id="\u6269\u5c55-Weex"><a href="#\u6269\u5c55-Weex" class="headerlink" title="\u6269\u5c55 Weex"></a>\u6269\u5c55 Weex</h3><p>Weex \u5185\u7f6e\u4e86\u4e00\u4e9b\u901a\u7528\u7684\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u53ef\u4ee5\u6ee1\u8db3\u57fa\u672c\u4e0a\u4f7f\u7528\u9700\u6c42\u3002\u4e3a\u4e86\u63a7\u5236 SDK \u7684\u4f53\u79ef\u548c\u4fdd\u6301\u6846\u67b6\u7684\u901a\u7528\u6027\uff0c\u6211\u4eec\u4f1a\u8c28\u614e\u5730\u9009\u62e9\u5185\u7f6e\u7684\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u5e76\u4e0d\u4f1a\u5305\u7f57\u4e07\u8c61\u5c06\u6240\u6709\u529f\u80fd\u90fd\u5c01\u88c5\u8fdb SDK\u3002\u4e0d\u8fc7\u6211\u4eec\u63d0\u4f9b\u4e86\u989d\u5916\u7684\u7ec4\u4ef6\u5e02\u573a\uff0c\u5728\u5176\u4e2d\u5c06\u80fd\u627e\u5230\u6ee1\u8db3\u4e0d\u540c\u9700\u6c42\u3001\u5404\u5f0f\u5404\u6837\u7684\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u6b64\u5916 Weex \u4e5f\u5177\u5907\u6a2a\u5411\u6269\u5c55\u7684\u80fd\u529b\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u81ea\u884c\u5b9a\u5236\u548c\u6269\u5c55 Weex \u7ec4\u4ef6\u548c\u6a21\u5757\u3002</p>
+<p>Weex \u7684\u5e95\u5c42\u8bbe\u8ba1\u6bd4\u8f83\u7075\u6d3b\uff0c\u9664\u4e86\u7ec4\u4ef6\u548c\u6a21\u5757\u4ee5\u5916\uff0c\u5f00\u53d1\u8005\u751a\u81f3\u53ef\u4ee5\u5b9a\u5236 Weex \u5185\u7f6e\u7684\u524d\u7aef\u6846\u67b6\uff0cVue 2.x \u5c31\u662f\u4e00\u4e2a\u6210\u529f\u7684\u4f8b\u5b50\u3002</p>
+<p>\u53ef\u4ee5\u9605\u8bfb\u4ee5\u4e0b\u6587\u6863\u4e86\u89e3\u66f4\u591a\u4fe1\u606f\uff1a</p>
+<ul>
+<li><a href="../../references/advanced/index.html">\u300aiOS \u6269\u5c55\u300b</a></li>
+<li><a href="../../references/advanced/extend-to-android.html">\u300aAndroid \u6269\u5c55\u300b</a></li>
+<li><a href="../../references/advanced/extend-to-html5.html">\u300aHTML5 \u6269\u5c55\u300b</a></li>
+<li><a href="../../references/advanced/extend-to-jsfm.html">\u300a\u5b9a\u5236\u81ea\u5df1\u7684 JS Framework\u300b</a></li>
+</ul>
+<h2 id="Vue-2-x-\u5728-Weex-\u4e2d\u7684\u7279\u8272\u529f\u80fd"><a href="#Vue-2-x-\u5728-Weex-\u4e2d\u7684\u7279\u8272\u529f\u80fd" class="headerlink" title="Vue 2.x \u5728 Weex \u4e2d\u7684\u7279\u8272\u529f\u80fd"></a>Vue 2.x \u5728 Weex \u4e2d\u7684\u7279\u8272\u529f\u80fd</h2><p>\u6211\u60f3\uff0c\u4f60\u4e00\u5b9a\u5bf9 <strong>Vue \u4e3a\u4ec0\u4e48\u80fd\u6e32\u67d3\u6210\u539f\u751f\u9875\u9762</strong> \u3001<strong>Weex \u4e3a\u4ec0\u4e48\u80fd\u5c06\u5185\u6838\u5207\u6362\u6210 Vue</strong> \u5fc3\u5b58\u597d\u5947\u3002\u5982\u679c\u4f60\u5bf9\u8fd9\u4e9b\u7ec6\u8282\u611f\u5174\u8da3\uff0c\u53ef\u4ee5\u9605\u8bfb\u8fd9\u7bc7\u6587\u7ae0 <a href="./index.html">\u300ahow it works\u300b</a>\u3002</p>
+<h3 id="\u6d41\u5f0f\u6e32\u67d3"><a href="#\u6d41\u5f0f\u6e32\u67d3" class="headerlink" title="\u6d41\u5f0f\u6e32\u67d3"></a>\u6d41\u5f0f\u6e32\u67d3</h3><p>\u5728 Weex \u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 <code><foo append="tree|node"></code> \u7684\u65b9\u5f0f\u5b9a\u4e49\u9875\u9762\u9996\u6b21\u6e32\u67d3\u65f6\u7684\u6e32\u67d3\u9897\u7c92\u5ea6\uff0c\u8fd9\u8ba9\u5f00\u53d1\u8005\u6709\u673a\u4f1a\u6839\u636e\u754c\u9762\u7684\u590d\u6742\u5ea6\u548c\u4e1a\u52a1\u9700\u6c42\u5bf9\u9996\u6b21\u6e32\u67d3\u8fc7\u7a0b\u8fdb\u884c\u5b9a\u5236\u3002<code>append="tree"</code> \u8868\u793a\u6574\u4e2a\u7ed3\u70b9\u5305\u62ec\u5176\u6240\u6709\u5b50\u7ed3\u70b9\u5168\u90e8\u751f\u6210\u5b8c\u6bd5\u4e4b\u540e\uff0c\u624d\u4f1a\u4e00\u6b21\u6027\u6e32\u67d3\u5230\u754c\u9762\u4e0a\uff1b\u800c <code>append="node"</code> \u5219\u8868\u793a\u8be5\u7ed3\u70b9\u4f1a\u5148\u6e32\u67d3\u5728\u754c\u9762\u4e0a\u4f5c\u4e3a\u4e00\u4e2a\u5bb9\u5668\uff0c\u5176\u5b50\u7ed3\u70b9\u4f1a\u7a0d\u540e\u505a\u8fdb\u4e00\u6b65\u6e32\u67d3\u3002</p>
+<!-- dotwe demo -->
+<h3 id="\u8868\u5355\u63a7\u4ef6\u7ed1\u5b9a"><a href="#\u8868\u5355\u63a7\u4ef6\u7ed1\u5b9a" class="headerlink" title="\u8868\u5355\u63a7\u4ef6\u7ed1\u5b9a"></a>\u8868\u5355\u63a7\u4ef6\u7ed1\u5b9a</h3><p>\u5728 Weex \u4e2d\uff0c\u6211\u4eec\u9488\u5bf9 <code><input></code> \u548c <code><textarea></code> \u8fd9\u4e24\u4e2a\u8868\u5355\u63a7\u4ef6\u63d0\u4f9b\u4e86\u548c web \u4f53\u9a8c\u76f8\u540c\u7684 <code>v-model</code> \u6307\u4ee4\u3002\u901a\u8fc7 <code><input v-model="message"></code> \u6216 <code><textarea v-model="message"></code>\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u628a\u6570\u636e <code>message</code> \u7684\u503c\u81ea\u52a8\u5c55\u793a\u5728\u6587\u672c\u6846\u4e0a\uff0c\u540c\u65f6\u7528\u6237\u4fee\u6539\u4e86\u6587\u672c\u6846\u7684\u503c\u7684\u65f6\u5019\uff0c\u6570\u636e <code>message</code> \u4f1a\u81ea\u52a8\u88ab\u66f4\u65b0\u3002</p>
+<!-- dotwe demo -->
+<h3 id="\u591a\u9875\u9762\u4e0a\u4e0b\u6587\u9694\u79bb"><a href="#\u591a\u9875\u9762\u4e0a\u4e0b\u6587\u9694\u79bb" class="headerlink" title="\u591a\u9875\u9762\u4e0a\u4e0b\u6587\u9694\u79bb"></a>\u591a\u9875\u9762\u4e0a\u4e0b\u6587\u9694\u79bb</h3><p>\u5982 Weex \u5de5\u4f5c\u539f\u7406\u6587\u4e2d\u6240\u8ff0\uff0c\u6240\u6709 Weex \u7684 JS bundle \u516c\u7528\u4e00\u4e2a JavaScript \u5185\u6838\u5b9e\u4f8b\u3002\u6240\u4ee5\u5982\u4f55\u80fd\u591f\u8ba9\u591a\u4e2a JS bundle \u4e2d\u4f7f\u7528\u7684 Vue \u662f\u5b8c\u5168\u9694\u79bb\u7684\uff0c\u5e76\u4e14\u5176\u4e2d\u4e00\u4e2a\u9875\u9762\u5bf9 Vue \u8fdb\u884c\u6269\u5c55\u6216\u6539\u5199\u4e0d\u4f1a\u5f71\u54cd\u5230\u5176\u5b83\u9875\u9762\u5c31\u53d8\u6210\u4e86\u4e00\u4e2a\u95ee\u9898\uff0c\u901a\u8fc7 Weex \u548c Vue \u53cc\u65b9\u7684\u534f\u4f5c\uff0c\u8fd9\u4e00\u95ee\u9898\u5df2\u7ecf\u5f97\u4ee5\u89e3\u51b3\u3002\u5927\u5bb6\u53ef\u4ee5\u653e\u5fc3\u4f7f\u7528\u3002</p>
+<!-- html5 apis -->
+<h3 id="lt-transition-gt-\u8fc7\u6e21\u72b6\u6001"><a href="#lt-transition-gt-\u8fc7\u6e21\u72b6\u6001" class="headerlink" title="<transition> \u8fc7\u6e21\u72b6\u6001"></a><code><transition></code> \u8fc7\u6e21\u72b6\u6001</h3><p>Weex \u652f\u6301\u4e86 Vue 2.x \u4e2d\u7ecf\u5178\u7684 <code><transition></code> \u5199\u6cd5\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u901a\u8fc7 <code><transition></code> \u8f7b\u677e\u5b9a\u4e49\u4e00\u4e2a\u754c\u9762\u5728\u4e24\u79cd\u72b6\u6001\u4e2d\u7684\u8fc7\u6e21\u65b9\u5f0f\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/guide/intro/using-vue.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/guide/intro/using-vue.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/intro/web-dev-experience.html
----------------------------------------------------------------------
diff --git a/content/cn/guide/intro/web-dev-experience.html b/content/cn/guide/intro/web-dev-experience.html
new file mode 100644
index 0000000..769ec83
--- /dev/null
+++ b/content/cn/guide/intro/web-dev-experience.html
@@ -0,0 +1,432 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Web \u5f00\u53d1\u4f53\u9a8c | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Web \u5f00\u53d1\u4f53\u9a8c\u4ec0\u4e48\u662f Web \u5f00\u53d1\u4f53\u9a8c\u57fa\u4e8e Weex \u7684\u5f00\u53d1\u4f53\u9a8c\u548c web \u7684\u5f00\u53d1\u4f53\u9a8c\u662f\u975e\u5e38\u63a5\u8fd1\u7684\uff0c\u6211\u4eec\u9009\u62e9\u901a\u8fc7 HTML \u6216\u7c7b HTML \u6a21\u677f\u7684\u65b9\u5f0f\u6765\u63cf\u8ff0\u754c\u9762\u7684\u7ed3\u6784\u548c\u5185\u5bb9\uff0c\u901a\u8fc7 CSS \u7684\u65b9\u5f0f\u63cf\u8ff0\u754c\u9762\u7684\u5c55\u73b0\u5f62\u5f0f\uff0c\u7528 JavaScript \u6765\u63cf\u8ff0\u7528\u6237\u884c\u4e3a\u548c\u4e1a\u52a1\u903b\u8f91\u3002\u5e76\u4e14\u5c06\u521b\u5efa\u3001\u5f00\u53d1\u3001\u8c03\u8bd5\u3001\u90e8\u7f72\u4e00\u4e2a\u7f51\u9875\u7684\u5de5\u7a0b\u673a\u5236\u4e5f\u5f15\u5165\u4e86 Weex \u5f00\u53d1\u5f53\u4e2d\u3002
+\u4e3a\u4ec0\u4e48\u9009\u62e9 Web \u5f00\u53d1\u4f53\u9a8c\u6211\u4eec\u9009\u62e9\u57fa\u4e8e Web \u5f00\u53d1">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Web \u5f00\u53d1\u4f53\u9a8c">
+<meta property="og:url" content="https://weex.apache.org/cn/guide/intro/web-dev-experience.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Web \u5f00\u53d1\u4f53\u9a8c\u4ec0\u4e48\u662f Web \u5f00\u53d1\u4f53\u9a8c\u57fa\u4e8e Weex \u7684\u5f00\u53d1\u4f53\u9a8c\u548c web \u7684\u5f00\u53d1\u4f53\u9a8c\u662f\u975e\u5e38\u63a5\u8fd1\u7684\uff0c\u6211\u4eec\u9009\u62e9\u901a\u8fc7 HTML \u6216\u7c7b HTML \u6a21\u677f\u7684\u65b9\u5f0f\u6765\u63cf\u8ff0\u754c\u9762\u7684\u7ed3\u6784\u548c\u5185\u5bb9\uff0c\u901a\u8fc7 CSS \u7684\u65b9\u5f0f\u63cf\u8ff0\u754c\u9762\u7684\u5c55\u73b0\u5f62\u5f0f\uff0c\u7528 JavaScript \u6765\u63cf\u8ff0\u7528\u6237\u884c\u4e3a\u548c\u4e1a\u52a1\u903b\u8f91\u3002\u5e76\u4e14\u5c06\u521b\u5efa\u3001\u5f00\u53d1\u3001\u8c03\u8bd5\u3001\u90e8\u7f72\u4e00\u4e2a\u7f51\u9875\u7684\u5de5\u7a0b\u673a\u5236\u4e5f\u5f15\u5165\u4e86 Weex \u5f00\u53d1\u5f53\u4e2d\u3002
+\u4e3a\u4ec0\u4e48\u9009\u62e9 Web \u5f00\u53d1\u4f53\u9a8c\u6211\u4eec\u9009\u62e9\u57fa\u4e8e Web \u5f00\u53d1">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.828Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Web \u5f00\u53d1\u4f53\u9a8c">
+<meta name="twitter:description" content="Web \u5f00\u53d1\u4f53\u9a8c\u4ec0\u4e48\u662f Web \u5f00\u53d1\u4f53\u9a8c\u57fa\u4e8e Weex \u7684\u5f00\u53d1\u4f53\u9a8c\u548c web \u7684\u5f00\u53d1\u4f53\u9a8c\u662f\u975e\u5e38\u63a5\u8fd1\u7684\uff0c\u6211\u4eec\u9009\u62e9\u901a\u8fc7 HTML \u6216\u7c7b HTML \u6a21\u677f\u7684\u65b9\u5f0f\u6765\u63cf\u8ff0\u754c\u9762\u7684\u7ed3\u6784\u548c\u5185\u5bb9\uff0c\u901a\u8fc7 CSS \u7684\u65b9\u5f0f\u63cf\u8ff0\u754c\u9762\u7684\u5c55\u73b0\u5f62\u5f0f\uff0c\u7528 JavaScript \u6765\u63cf\u8ff0\u7528\u6237\u884c\u4e3a\u548c\u4e1a\u52a1\u903b\u8f91\u3002\u5e76\u4e14\u5c06\u521b\u5efa\u3001\u5f00\u53d1\u3001\u8c03\u8bd5\u3001\u90e8\u7f72\u4e00\u4e2a\u7f51\u9875\u7684\u5de5\u7a0b\u673a\u5236\u4e5f\u5f15\u5165\u4e86 Weex \u5f00\u53d1\u5f53\u4e2d\u3002
+\u4e3a\u4ec0\u4e48\u9009\u62e9 Web \u5f00\u53d1\u4f53\u9a8c\u6211\u4eec\u9009\u62e9\u57fa\u4e8e Web \u5f00\u53d1">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link current ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link current ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Web \u5f00\u53d1\u4f53\u9a8c
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.828Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Web-\u5f00\u53d1\u4f53\u9a8c"><a href="#Web-\u5f00\u53d1\u4f53\u9a8c" class="headerlink" title="Web \u5f00\u53d1\u4f53\u9a8c"></a>Web \u5f00\u53d1\u4f53\u9a8c</h1><h2 id="\u4ec0\u4e48\u662f-Web-\u5f00\u53d1\u4f53\u9a8c"><a href="#\u4ec0\u4e48\u662f-Web-\u5f00\u53d1\u4f53\u9a8c" class="headerlink" title="\u4ec0\u4e48\u662f Web \u5f00\u53d1\u4f53\u9a8c"></a>\u4ec0\u4e48\u662f Web \u5f00\u53d1\u4f53\u9a8c</h2><p>\u57fa\u4e8e Weex \u7684\u5f00\u53d1\u4f53\u9a8c\u548c web \u7684\u5f00\u53d1\u4f53\u9a8c\u662f\u975e\u5e38\u63a5\u8fd1\u7684\uff0c\u6211\u4eec\u9009\u62e9\u901a\u8fc7 HTML \u6216\u7c7b HTML \u6a21\u677f\u7684\u65b9\u5f0f\u6765\u63cf\u8ff0\u754c\u9762\u7684\u7ed3\u6784\u548c\u5185\u5bb9\uff0c\u901a\u8fc7 CSS \u7684\u65b9\u5f0f\u63cf\u8ff0\u754c\u9762\u7684\u5c55\u73b0\u5f62\u5f0f\uff0c\u7528 JavaScript \u6765\u63cf\u8ff0\u7528\u6237\u884c\u4e3a\u548c\u4e1a\u52a1\u903b\u8f91\u3002\u5e76\u4e14\u5c06\u521b\u5efa\u3001\u5f00\u53d1\u3001\u8c03\u8bd5\u3001\u90e8\u7f72\u4e00\u4e2a\u7f51\u9875\u7684\u5de5\u7a0b\u673a\u5236\u4e5f\u5f15\u5165\u4e86 Weex \u5f00\u53d1\u5f53\u4e2d\u3002</p>
+<h2 id="\u4e3a\u4ec0\u4e48\u9009\u62e9-Web-\u5f00\u53d1\u4f53\u9a8c"><a href="#\u4e3a\u4ec0\u4e48\u9009\u62e9-Web-\u5f00\u53d1\u4f53\u9a8c" class="headerlink" title="\u4e3a\u4ec0\u4e48\u9009\u62e9 Web \u5f00\u53d1\u4f53\u9a8c"></a>\u4e3a\u4ec0\u4e48\u9009\u62e9 Web \u5f00\u53d1\u4f53\u9a8c</h2><p>\u6211\u4eec\u9009\u62e9\u57fa\u4e8e Web \u5f00\u53d1\u4f53\u9a8c\u6709\u4ee5\u4e0b\u51e0\u65b9\u9762\u539f\u56e0\uff1a</p>
+<ol>
+<li>\u4eca\u5929\u5728\u6280\u672f\u793e\u533a\u6709\u5927\u91cf\u7684 web \u5f00\u53d1\u8005\uff0cWeex \u53ef\u4ee5\u8d4b\u80fd\u66f4\u591a\u7684 web \u5f00\u53d1\u8005\u6784\u5efa\u9ad8\u6027\u80fd\u548c\u9ad8\u4f53\u9a8c\u7684\u79fb\u52a8\u5e94\u7528\u3002</li>
+<li>Web \u5f00\u53d1\u672c\u8eab\u5177\u6709\u975e\u5e38\u5f3a\u7684\u9ad8\u6548\u7387\u548c\u7075\u6d3b\u6027\uff0c\u8fd9\u548c Weex \u60f3\u89e3\u51b3\u7684\u79fb\u52a8\u7aef\u52a8\u6001\u6027\u95ee\u9898\u4e0d\u8c0b\u800c\u5408\u3002</li>
+<li>Web \u6807\u51c6\u548c\u5f00\u53d1\u4f53\u9a8c\u662f\u5f88\u591a\u9876\u5c16\u800c\u4f18\u79c0\u7684\u79d1\u6280\u516c\u53f8\u5171\u540c\u8ba8\u8bba\u548c\u5efa\u8bbe\u7684\u7ed3\u679c\uff0c\u672c\u8eab\u7684\u8bbe\u8ba1\u548c\u7406\u5ff5\u90fd\u6709\u6781\u9ad8\u7684\u54c1\u8d28\u4fdd\u969c\uff0c\u540c\u65f6 Weex \u4e5f\u5e0c\u671b\u53ef\u4ee5\u501f\u6b64\u673a\u4f1a\u52aa\u529b\u4e3a\u6807\u51c6\u8d21\u732e\u4e00\u70b9\u81ea\u5df1\u7684\u5fae\u8584\u4e4b\u529b\u3002</li>
+<li>Web \u662f\u4e00\u79cd\u6807\u51c6\u5316\u7684\u6280\u672f\uff0c\u6807\u51c6\u672c\u8eab\u5c31\u662f\u4e00\u79cd\u529b\u91cf\uff0c\u57fa\u4e8e\u6807\u51c6\u3001\u5c0a\u91cd\u6807\u51c6\u3001\u8d34\u8fd1\u6807\u51c6\u90fd\u610f\u5473\u7740\u62e5\u6709\u66f4\u591a\u7684\u53ef\u80fd\u6027\u3002</li>
+<li>Web \u4eca\u5929\u7684\u751f\u6001\u548c\u793e\u533a\u662f\u975e\u5e38\u7e41\u8363\u7684\uff0c\u6709\u5f88\u591a\u6210\u719f\u7684\u5de5\u5177\u3001\u5e93\u3001\u5de5\u7a0b\u4f53\u7cfb\u3001\u6700\u4f73\u5b9e\u8df5\u53ef\u4ee5\u4f7f\u7528\u3001\u5f15\u5165\u548c\u501f\u9274\u3002</li>
+</ol>
+<h2 id="Weex-\u5bf9-Web-\u6807\u51c6\u7684\u652f\u6301\u60c5\u51b5\u600e\u4e48\u6837\uff1f"><a href="#Weex-\u5bf9-Web-\u6807\u51c6\u7684\u652f\u6301\u60c5\u51b5\u600e\u4e48\u6837\uff1f" class="headerlink" title="Weex \u5bf9 Web \u6807\u51c6\u7684\u652f\u6301\u60c5\u51b5\u600e\u4e48\u6837\uff1f"></a>Weex \u5bf9 Web \u6807\u51c6\u7684\u652f\u6301\u60c5\u51b5\u600e\u4e48\u6837\uff1f</h2><p>\u6211\u4eec\u4ece\u4ee5\u4e0b\u51e0\u4e2a\u65b9\u9762\u8fdb\u884c\u4ecb\u7ecd\u548c\u68b3\u7406\uff1a</p>
+<ul>
+<li>HTML \u6807\u7b7e\uff1a\u76ee\u524d Weex \u652f\u6301\u4e86\u57fa\u672c\u7684\u5bb9\u5668 (div)\u3001\u6587\u672c (text)\u3001\u56fe\u7247 (image)\u3001\u89c6\u9891 (video) \u7b49\u7ec4\u4ef6\uff0cHTML \u4e2d\u51e0\u4e4e\u6240\u6709\u7684\u5757\u7ea7\u6807\u7b7e\u90fd\u53ef\u4ee5\u901a\u8fc7\u5bb9\u5668\u7ec4\u4ef6\u8fdb\u884c\u81ea\u5b9a\u4e49\u6a21\u62df\uff0cinline \u7684\u6807\u7b7e\u5219\u53ef\u4ee5\u901a\u8fc7\u6587\u672c\u7ec4\u4ef6\u8fdb\u884c\u81ea\u5b9a\u4e49\u6a21\u62df\uff0c\u53e6\u5916 Weex \u8fd8\u652f\u6301\u4e86 input/textarea \u8fd9\u6837\u7684\u8868\u5355\u578b\u7ec4\u4ef6</li>
+<li>CSS\uff1aWeex \u652f\u6301\u4e86\u90e8\u5206\u5e38\u7528\u7684 CSS \u5c5e\u6027\u3001\u503c\u7c7b\u578b\u548c\u5355\u4f4d\uff0c\u5e76\u4e14\u4f1a\u6839\u636e\u7528\u6237\u53cd\u9988\u548c\u5728 web \u4e2d\u7684\u4f7f\u7528\u9891\u5ea6\u9646\u7eed\u652f\u6301\u66f4\u591a</li>
+<li>JavaScript\uff1a\u76ee\u524d Weex \u63d0\u4f9b\u4e86\u4e00\u5957\u7b80\u5316\u7248\u7684 DOM APIs\uff0c\u7528\u6765\u64cd\u4f5c\u539f\u751f\u754c\u9762\uff0c\u540c\u65f6 Weex \u5728\u9646\u7eed\u652f\u6301\u66f4\u591a\u7684 W3C Device APIs</li>
+<li>\u5728\u6846\u67b6\u65b9\u9762\uff0cWeex \u5b98\u65b9\u652f\u6301\u4e86 Vue 2.0\uff0c\u4ee5\u53ca\u76f8\u5173\u7684 vuex, vue-router \u7b49\uff0c\u540c\u65f6\u5f00\u53d1\u8005\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u5404\u79cd\u7b2c\u4e09\u65b9 JavaScript \u5de5\u5177\u5e93\u3002</li>
+<li>\u5728\u5de5\u7a0b\u65b9\u9762\uff0cWeex \u63a8\u8350 npm \u5305\u7ba1\u7406\u5de5\u5177\uff0c\u4e5f\u63a8\u8350\u7528 webpack \u8fdb\u884c JS bundle \u6253\u5305\uff0c\u5e76\u63d0\u4f9b\u4e86 weex-devtool \u5f00\u53d1\u5de5\u5177\uff0c\u8ba9\u5f00\u53d1\u8005\u53ef\u4ee5\u50cf\u8c03\u8bd5 Chrome \u4e00\u6837\u8c03\u8bd5 Weex \u539f\u751f\u5e94\u7528\uff0c\u540c\u65f6 Weex \u7684\u9875\u9762\u53d1\u5e03\u7cfb\u7edf\u3001\u5ba2\u6237\u7aef\u7f13\u5b58\u673a\u5236\u90fd\u5c0a\u91cd\u76ee\u524d Web \u7684\u6700\u4f73\u5b9e\u8df5\u3002</li>
+</ul>
+<!-- html \u652f\u6301\u60c5\u51b5 -->
+<!-- css \u652f\u6301\u60c5\u51b5 -->
+<!-- js apis \u652f\u6301\u60c5\u51b5 -->
+<!-- vue -->
+<!-- weex-devtool -->
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/guide/intro/web-dev-experience.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/guide/intro/write-once.html
----------------------------------------------------------------------
diff --git a/content/cn/guide/intro/write-once.html b/content/cn/guide/intro/write-once.html
new file mode 100644
index 0000000..edaee5a
--- /dev/null
+++ b/content/cn/guide/intro/write-once.html
@@ -0,0 +1,450 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884cWeex \u63d0\u4f9b\u4e86\u591a\u7aef\u4e00\u81f4\u7684\u6280\u672f\u65b9\u6848\u3002
+
+\u9996\u5148 web \u5f00\u53d1\u4f53\u9a8c\u5728\u5404\u7aef\u5f53\u4e2d\u662f\u76f8\u540c\u7684\u3002\u5305\u62ec\u8bed\u6cd5\u8bbe\u8ba1\u548c\u5de5\u7a0b\u94fe\u8def\u3002
+\u5176\u6b21\uff0cWeex \u7684\u7ec4\u4ef6\u3001\u6a21\u5757\u8bbe\u8ba1\u90fd\u662f iOS\u3001Android\u3001Web \u7684\u5f00\u53d1\u8005\u5171\u540c\u8ba8\u8bba\u51fa\u6765\u7684\uff0c\u6709\u4e00\u5b9a\u7684\u901a\u7528\u6027\u548c\u666e\u904d\u6027\u3002
+Weex \u5f00\u53d1\u540c\u4e00\u4efd\u4ee3\u7801\uff0c\u53ef\u4ee5\u5728\u4e0d\u540c\u7684\u7aef\u4e0a\u5206\u522b\u6267\u884c\uff0c\u907f\u514d\u4e86\u591a\u7aef\u7684\u91cd\u590d\u7814\u53d1\u6210\u672c\u3002
+
+\u6211\u4eec\u8fd9\u6837\u8bbe\u8ba1\u57fa\u4e8e\u4ee5\u4e0b\u51e0\u70b9\u8bbe\u60f3\uff1a
+
+\u4eca\u5929\u7edd\u5927\u591a\u6570\u7684\u79fb\u52a8\u5e94\u7528\uff0c\u867d\u7136\u8981\u540c\u65f6\u51fa\u73b0">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c">
+<meta property="og:url" content="https://weex.apache.org/cn/guide/intro/write-once.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884cWeex \u63d0\u4f9b\u4e86\u591a\u7aef\u4e00\u81f4\u7684\u6280\u672f\u65b9\u6848\u3002
+
+\u9996\u5148 web \u5f00\u53d1\u4f53\u9a8c\u5728\u5404\u7aef\u5f53\u4e2d\u662f\u76f8\u540c\u7684\u3002\u5305\u62ec\u8bed\u6cd5\u8bbe\u8ba1\u548c\u5de5\u7a0b\u94fe\u8def\u3002
+\u5176\u6b21\uff0cWeex \u7684\u7ec4\u4ef6\u3001\u6a21\u5757\u8bbe\u8ba1\u90fd\u662f iOS\u3001Android\u3001Web \u7684\u5f00\u53d1\u8005\u5171\u540c\u8ba8\u8bba\u51fa\u6765\u7684\uff0c\u6709\u4e00\u5b9a\u7684\u901a\u7528\u6027\u548c\u666e\u904d\u6027\u3002
+Weex \u5f00\u53d1\u540c\u4e00\u4efd\u4ee3\u7801\uff0c\u53ef\u4ee5\u5728\u4e0d\u540c\u7684\u7aef\u4e0a\u5206\u522b\u6267\u884c\uff0c\u907f\u514d\u4e86\u591a\u7aef\u7684\u91cd\u590d\u7814\u53d1\u6210\u672c\u3002
+
+\u6211\u4eec\u8fd9\u6837\u8bbe\u8ba1\u57fa\u4e8e\u4ee5\u4e0b\u51e0\u70b9\u8bbe\u60f3\uff1a
+
+\u4eca\u5929\u7edd\u5927\u591a\u6570\u7684\u79fb\u52a8\u5e94\u7528\uff0c\u867d\u7136\u8981\u540c\u65f6\u51fa\u73b0">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.828Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c">
+<meta name="twitter:description" content="\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884cWeex \u63d0\u4f9b\u4e86\u591a\u7aef\u4e00\u81f4\u7684\u6280\u672f\u65b9\u6848\u3002
+
+\u9996\u5148 web \u5f00\u53d1\u4f53\u9a8c\u5728\u5404\u7aef\u5f53\u4e2d\u662f\u76f8\u540c\u7684\u3002\u5305\u62ec\u8bed\u6cd5\u8bbe\u8ba1\u548c\u5de5\u7a0b\u94fe\u8def\u3002
+\u5176\u6b21\uff0cWeex \u7684\u7ec4\u4ef6\u3001\u6a21\u5757\u8bbe\u8ba1\u90fd\u662f iOS\u3001Android\u3001Web \u7684\u5f00\u53d1\u8005\u5171\u540c\u8ba8\u8bba\u51fa\u6765\u7684\uff0c\u6709\u4e00\u5b9a\u7684\u901a\u7528\u6027\u548c\u666e\u904d\u6027\u3002
+Weex \u5f00\u53d1\u540c\u4e00\u4efd\u4ee3\u7801\uff0c\u53ef\u4ee5\u5728\u4e0d\u540c\u7684\u7aef\u4e0a\u5206\u522b\u6267\u884c\uff0c\u907f\u514d\u4e86\u591a\u7aef\u7684\u91cd\u590d\u7814\u53d1\u6210\u672c\u3002
+
+\u6211\u4eec\u8fd9\u6837\u8bbe\u8ba1\u57fa\u4e8e\u4ee5\u4e0b\u51e0\u70b9\u8bbe\u60f3\uff1a
+
+\u4eca\u5929\u7edd\u5927\u591a\u6570\u7684\u79fb\u52a8\u5e94\u7528\uff0c\u867d\u7136\u8981\u540c\u65f6\u51fa\u73b0">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link current ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">\u5feb\u901f\u4e0a\u624b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/dev-with-weexpack.html" class="sidebar-link ">\u6784\u5efa\u5168\u65b0\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">\u96c6\u6210 Weex \u5230\u5df2\u6709\u5e94\u7528</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">\u5de5\u4f5c\u539f\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web \u5f00\u53d1\u4f53\u9a8c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">\u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/write-once.html" class="sidebar-link current ">\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">\u7528 Weex \u6784\u5efa\u79fb\u52a8\u5e94\u7528</a>
+ </li>
+
+ <li>
+ <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex \u9875\u9762\u7ed3\u6784</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.828Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c"><a href="#\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c" class="headerlink" title="\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c"></a>\u4e00\u6b21\u64b0\u5199\uff0c\u591a\u7aef\u8fd0\u884c</h1><p>Weex \u63d0\u4f9b\u4e86\u591a\u7aef\u4e00\u81f4\u7684\u6280\u672f\u65b9\u6848\u3002</p>
+<ul>
+<li>\u9996\u5148 web \u5f00\u53d1\u4f53\u9a8c\u5728\u5404\u7aef\u5f53\u4e2d\u662f\u76f8\u540c\u7684\u3002\u5305\u62ec\u8bed\u6cd5\u8bbe\u8ba1\u548c\u5de5\u7a0b\u94fe\u8def\u3002</li>
+<li>\u5176\u6b21\uff0cWeex \u7684\u7ec4\u4ef6\u3001\u6a21\u5757\u8bbe\u8ba1\u90fd\u662f iOS\u3001Android\u3001Web \u7684\u5f00\u53d1\u8005\u5171\u540c\u8ba8\u8bba\u51fa\u6765\u7684\uff0c\u6709\u4e00\u5b9a\u7684\u901a\u7528\u6027\u548c\u666e\u904d\u6027\u3002</li>
+<li>Weex \u5f00\u53d1\u540c\u4e00\u4efd\u4ee3\u7801\uff0c\u53ef\u4ee5\u5728\u4e0d\u540c\u7684\u7aef\u4e0a\u5206\u522b\u6267\u884c\uff0c\u907f\u514d\u4e86\u591a\u7aef\u7684\u91cd\u590d\u7814\u53d1\u6210\u672c\u3002</li>
+</ul>
+<p>\u6211\u4eec\u8fd9\u6837\u8bbe\u8ba1\u57fa\u4e8e\u4ee5\u4e0b\u51e0\u70b9\u8bbe\u60f3\uff1a</p>
+<ol>
+<li>\u4eca\u5929\u7edd\u5927\u591a\u6570\u7684\u79fb\u52a8\u5e94\u7528\uff0c\u867d\u7136\u8981\u540c\u65f6\u51fa\u73b0\u5728\u4e0d\u540c\u7684\u79fb\u52a8\u64cd\u4f5c\u7cfb\u7edf\u5e73\u53f0\u4e0a\uff0c\u4f46\u662f\u8981\u89e3\u51b3\u7684\u95ee\u9898\u548c\u7528\u6237\u7684\u9700\u6c42\u662f\u76f8\u540c\u6216\u975e\u5e38\u63a5\u8fd1\u7684\u3002Weex \u5e0c\u671b\u63d0\u4f9b\u7684\u662f\u4e00\u4e2a\u5feb\u901f\u76f4\u63a5\u7edf\u4e00\u63cf\u8ff0\u4e1a\u52a1\u7684\u901a\u7528\u65b9\u5f0f\uff0c\u4e3a\u4e1a\u52a1\u548c\u4ea7\u54c1\u9700\u6c42\u76f4\u63a5\u670d\u52a1\u3002</li>
+<li>\u9488\u5bf9\u5404\u5927\u64cd\u4f5c\u7cfb\u7edf\u5e73\u53f0\u5dee\u5f02\u7684\u73b0\u72b6\uff0c\u6211\u4eec\u503e\u5411\u4e8e\u901a\u8fc7\u4ee5\u4e0b\u4e24\u65b9\u9762\u6765\u89e3\u51b3\u8fd9\u4e00\u95ee\u9898<ol>
+<li>\u628a\u4e0d\u540c\u7aef\u7684\u6837\u5f0f\u548c\u884c\u4e3a\u8bbe\u8ba1\u5e76\u63cf\u8ff0\u6210\u4e3a\u76f8\u540c\u7684 API\uff0c\u8fd9\u6837\u4e0a\u5c42\u7684\u4e1a\u52a1\u903b\u8f91\u662f\u540c\u4e00\u4efd\uff0c\u4f46\u662f\u5728\u4e0d\u540c\u7aef\u4e0a\u53ef\u4ee5\u505a\u5230\u4e0d\u4e00\u6837\u7684\u5c55\u73b0\u6548\u679c\u3002</li>
+<li>\u901a\u8fc7\u6a2a\u5411\u6269\u5c55\u7684\u65b9\u5f0f\u5728\u4e0d\u540c\u7684\u7aef\u4e0a\u6269\u5c55\u4e0d\u4e00\u6837\u7684\u529f\u80fd\u3001\u7279\u6027\u6216\u8868\u73b0\u5f62\u5f0f\u3002</li>
+<li>\u5404\u7aef\u4e0d\u4e00\u81f4\u7684\u4e1a\u52a1\u63cf\u8ff0\u4e5f\u662f\u96be\u514d\u7684\uff0c\u6211\u4eec\u901a\u8fc7\u63d0\u4f9b\u66f4\u591a\u66f4\u4e30\u5bcc\u7684\u73af\u5883\u53d8\u91cf\u6765\u5e2e\u52a9\u5f00\u53d1\u8005\u5728\u540c\u4e00\u5957\u4ee3\u7801\u91cc\u9ad8\u6548\u9002\u914d\u4e0d\u540c\u7684\u8bbe\u5907\u573a\u666f\u3002</li>
+</ol>
+</li>
+<li>\u6211\u4eec\u76f8\u4fe1\u6807\u51c6\u548c\u89c4\u8303\u7684\u529b\u91cf</li>
+</ol>
+<p>\u90e8\u5206\u529f\u80fd\u7279\u6027\u7531\u4e8e native \u7279\u6027\u7684\u5173\u7cfb\uff0c\u4f1a\u7565\u6709\u4e0d\u540c\uff0c\u6211\u4eec\u4f1a\u5728\u76f8\u5e94\u7684\u7ec4\u4ef6\u3001\u6a21\u5757\u3001API \u6587\u6863\u4e2d\u505a\u76f8\u5e94\u7684\u63cf\u8ff0\u548c\u63d0\u793a\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/guide/intro/write-once.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/guide/intro/write-once.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/hello/index.html
----------------------------------------------------------------------
diff --git a/content/cn/hello/index.html b/content/cn/hello/index.html
new file mode 100644
index 0000000..9f2fe2f
--- /dev/null
+++ b/content/cn/hello/index.html
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>hello | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="article">
+<meta property="og:title" content="hello">
+<meta property="og:url" content="https://weex.apache.org/cn/hello/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.798Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="hello">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="blog" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "blog";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="wrapper article-wrapper post-layout">
+
+
+<article class="article article-type-blog">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ hello
+ </h1>
+
+
+ <time class="article-date" datetime="2016-12-27T07:54:28.000Z">Updated time: 27/12/2016</time>
+</header>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/hello/">English</a>
+ </li>
+ <li>
+ <a href="/cn/hello/">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/index.html
----------------------------------------------------------------------
diff --git a/content/cn/index.html b/content/cn/index.html
new file mode 100644
index 0000000..5abb331
--- /dev/null
+++ b/content/cn/index.html
@@ -0,0 +1,413 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="website">
+<meta property="og:title" content="Weex">
+<meta property="og:url" content="https://weex.apache.org/cn/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.829Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="index" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "index";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="index-sidebar">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="scene header" style="background: #00BDFF;">
+ <div class="scene-container">
+ <div class="galaxy left">
+ <canvas width="560" height="560" id="left-canvas"></canvas>
+ </div>
+ <div class="galaxy right">
+ <canvas width="500" height="500" id="right-canvas"></canvas>
+ </div>
+ <div id="slider">
+ <div class="swiper-container swiper-container-horizontal">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide" style="background:url('//gw.alicdn.com/tps/TB1rY5sPXXXXXbfapXXXXXXXXXX-800-800.png') 50% 50% / contain no-repeat">
+ <div class="slide-content">
+ <h1 class="page-title">\u4e00\u5957\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684\u539f\u751f\u5e94\u7528\u8de8\u5e73\u53f0\u5f00\u53d1\u65b9\u6848</h1>
+ <div class="btn-group">
+ <a href="/cn/guide/index.html" class="button get-started">\u4e0a\u624b\u6559\u7a0b</a>
+ <a href="https://github.com/alibaba/weex/" class="button get-started" target="_blank">GitHub</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!--<div class="swiper-button-next iconfont icon-arrow-small"></div>
+ <div class="swiper-button-prev iconfont icon-arrow-small"></div>-->
+ </div>
+</div>
+ </div>
+</div>
+<div class="scene edge overlength horizon">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u4f18\u52bf</h2>
+ </div>
+ <div class="sketch-content">
+ <div class="inner-box">
+ <img src="//gw.alicdn.com/tps/TB17ga7PXXXXXbnXXXXXXXXXXXX-120-121.svg" alt="Lightweight">
+ <h3>\u8f7b\u91cf</h3>
+ <span class="underline"></span>
+ <p>\u4f53\u79ef\u5c0f\u3001\u8bed\u6cd5\u7b80\u5355\u3001\u6613\u4e8e\u638c\u63e1</p>
+ </div>
+ <div class="inner-box">
+ <img src="//gw.alicdn.com/tps/TB1BGSCPXXXXXb1aXXXXXXXXXXX-79-79.svg" alt="Extendable">
+ <h3>\u53ef\u6269\u5c55</h3>
+ <span class="underline"></span>
+ <p>\u53ef\u4ee5\u6a2a\u5411\u6269\u5c55\u548c\u5b9a\u5236\u539f\u751f\u7ec4\u4ef6\u548c\u529f\u80fd</p>
+ </div>
+ <div class="inner-box">
+ <img src="//img.alicdn.com/tps/TB1uMC9PXXXXXaFXXXXXXXXXXXX-80-69.svg" alt="High Performance">
+ <h3>\u9ad8\u6027\u80fd</h3>
+ <span class="underline"></span>
+ <p>\u5bf9\u52a0\u8f7d\u65f6\u95f4\u548c\u8d44\u6e90\u5360\u7528\u6df1\u5ea6\u4f18\u5316\uff0c\u7ed9\u4f60\u66f4\u597d\u7684\u4f53\u9a8c</p>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="scene feature">
+ <div class="scene-container">
+ <div class="feature-content">
+ <div class="left-text">
+ <h2>\u5e2e\u52a9\u4f60\u6784\u5efa\u539f\u751f\u5e94\u7528</h2>
+ <p>\u4e0e Web App\u3001HTML5 App \u6216 hybrid App \u4e0d\u540c\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 Weex \u6784\u5efa\u4e00\u4e2a\u771f\u6b63\u7684\u539f\u751f\u5e94\u7528\u3002\u66f4\u8d34\u5fc3\u7684\u662f\u4f60\u7684\u4ee3\u7801\u53ea\u9700\u4f7f\u7528 HTML\u3001CSS\u3001JavaScript \u53ef\u4ee5\u6784\u5efa\u539f\u751f\u5e94\u7528\uff0c\u4e0a\u624b\u975e\u5e38\u7b80\u5355\u3002\u4f46\u5b9e\u9645\u4e0a\uff0c\u5e94\u7528\u7684\u5e95\u5c42\u662f Objective-C \u6216 Java\uff0c \u540c\u65f6\uff0cWeex \u63d0\u4f9b\u5f88\u591a native \u7ec4\u4ef6\u6216\u6a21\u5757\u4f9b\u5f00\u53d1\u4eba\u5458\u4f7f\u7528\u3002</p>
+ </div>
+ <div class="right-box">
+ <div class="imgbox phone-layer level1">
+ </div>
+ <div class="imgbox phone-layer level2">
+ </div>
+ <div class="imgbox phone-layer level3">
+ </div>
+ <div class="imgbox phone-layer level4">
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="scene cross-platform horizon">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u4e00\u6b21\u7f16\u5199\uff0c\u591a\u7aef\u8fd0\u884c</h2>
+ <p>Weex \u63d0\u4f9b\u5f3a\u5927\u7684\u8de8\u5e73\u53f0\u80fd\u529b\uff0c\u53ef\u4ee5\u4f7f\u7528\u76f8\u540c\u7684 API \u5f00\u53d1 Web\uff0cAndroid \u548c iOS \u5e94\u7528\u3002 \u540c\u65f6\uff0c\u6211\u4eec\u5bf9\u63a5\u53e3\u4e86\u4e30\u5bcc\u7684\u6269\u5c55\u80fd\u529b\u3002 \u8fd9\u6837\uff0c\u5f53\u60a8\u9700\u8981\u6269\u5c55\u539f\u751f\u7ec4\u4ef6\u6216\u6a21\u5757\u65f6\uff0c\u8fd9\u5c06\u975e\u5e38\u65b9\u4fbf\u3002</p>
+ </div>
+ <div class="sketch-content">
+ <div class="inner-box imgbox ios"></div>
+ <div class="inner-box imgbox android"></div>
+ <div class="inner-box imgbox h5"></div>
+ </div>
+ </div>
+</div>
+
+<div class="scene supporting-vue horizon">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u652f\u6301 Vue \u8bed\u6cd5</h2>
+ <p>Weex \u9075\u5faa Web \u6807\u51c6\uff0c\u540c\u65f6\u652f\u6301 vue.js \u7684\u8bed\u6cd5\u3002\u56e0\u6b64\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 vue.js \u8bed\u6cd5\u6765\u5f00\u53d1\u5e94\u7528\u7a0b\u5e8f\u3002</p>
+ </div>
+ <div class="sketch-content imgbox">
+ <div class="imgbox"></div>
+ </div>
+ </div>
+</div>
+
+<div class="scene schematic horizon">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u5de5\u4f5c\u539f\u7406</h2>
+ <p>Weex \u662f\u4e00\u4e2a\u52a8\u6001\u5316\u7684\u9ad8\u6269\u5c55\u8de8\u5e73\u53f0\u89e3\u51b3\u65b9\u6848\u3002 \u5728 Weex \u4ee3\u7801\u4e2d\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 <template>\uff0c<style> \u548c <script> \u6807\u7b7e\u7f16\u5199\u9875\u9762\u6216\u7ec4\u4ef6\uff0c\u7136\u540e\u5c06\u5b83\u4eec\u8f6c\u6362\u4e3a JS bundle \u4ee5\u8fdb\u884c\u90e8\u7f72\u3002\u5f53\u670d\u52a1\u5668\u8fd4\u56de\u7ed9\u5ba2\u6237\u7aef JS bundle \u65f6\uff0cJS bundle \u4f1a\u88ab\u5ba2\u6237\u7aef\u7684 JavaScript \u5f15\u64ce\u5904\u7406\uff0c\u5e76\u7ba1\u7406\u6e32\u67d3 native \u89c6\u56fe\uff0c\u8c03\u7528\u539f\u751f API \u548c\u7528\u6237\u4ea4\u4e92\u3002</p>
+ </div>
+ <div class="sketch-content imgbox">
+ </div>
+ </div>
+</div>
+
+<div class="scene users horizon overlength">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u8c01\u5728\u4f7f\u7528 Weex</h2>
+ </div>
+ <div class="sketch-content">
+ <div class="user-logo tmall-logo">
+ <h3>\u5929\u732b</h3>
+ <div class="user-info">
+ <h4>\u5929\u732b</h4>
+ <p>\u4e2d\u56fd\u6700\u5927\u7684 B2C \u8d2d\u7269\u5e73\u53f0.</p>
+ </div>
+ </div>
+ <div class="user-logo aliyun-logo">
+ <h3>\u963f\u91cc\u4e91</h3>
+ <div class="user-info">
+ <h4>\u963f\u91cc\u4e91</h4>
+ <p>\u963f\u91cc\u5df4\u5df4\u96c6\u56e2\u65d7\u4e0b\u4e91\u8ba1\u7b97\u4e1a\u52a1\uff0c\u963f\u91cc\u4e91\u63d0\u4f9b\u5168\u9762\u7684\u5168\u7403\u4e91\u8ba1\u7b97\u670d\u52a1\uff0c\u4e3a\u56fd\u9645\u5ba2\u6237\u7684\u5728\u7ebf\u4e1a\u52a1\u548c\u963f\u91cc\u5df4\u5df4\u81ea\u5df1\u7684\u7535\u5b50\u5546\u52a1\u751f\u6001\u7cfb\u7edf\u63d0\u4f9b\u652f\u6301\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo taobao-logo">
+ <h3>\u6dd8\u5b9d</h3>
+ <div class="user-info">
+ <h4>\u6dd8\u5b9d</h4>
+ <p>\u4e2d\u56fd\u6700\u5927\u7684\u79fb\u52a8\u7535\u5b50\u8d2d\u7269\u5e73\u53f0\uff0c\u5c55\u793a\u6570\u4ee5\u4ebf\u8ba1\u7684\u4ea7\u54c1\u4e0e\u670d\u52a1\u4fe1\u606f\uff0c\u4e3a\u6d88\u8d39\u8005\u63d0\u4f9b\u591a\u4e2a\u79cd\u7c7b\u7684\u4ea7\u54c1\u548c\u670d\u52a1\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo ding-logo">
+ <h3>\u9489\u9489</h3>
+ <div class="user-info">
+ <h4>\u9489\u9489</h4>
+ <p>\u963f\u91cc\u5df4\u5df4\u96c6\u56e2\u4e13\u4e3a\u4e2d\u5c0f\u4f01\u4e1a\u6253\u9020\u7684\u6c9f\u901a\u548c\u534f\u540c\u5e73\u53f0\u3002\u9489\u9489\u56e0\u4e2d\u5c0f\u4f01\u4e1a\u800c\u751f\uff0c\u5e2e\u52a9\u4e2d\u5c0f\u4f01\u4e1a\u901a\u8fc7\u7cfb\u7edf\u5316\u7684\u89e3\u51b3\u65b9\u6848\uff08\u5fae\u5e94\u7528\uff09\uff0c\u5168\u65b9\u4f4d\u63d0\u5347\u4e2d\u5c0f\u4f01\u4e1a\u6c9f\u901a\u548c\u534f\u540c\u6548\u7387\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo alibaba-logo">
+ <h3>1688</h3>
+ <div class="user-info">
+ <h4>1688</h4>
+ <p>\u4e2d\u56fd\u9886\u5148\u7684\u7f51\u4e0a\u6279\u53d1\u5e73\u53f0\uff0c\u8986\u76d6\u666e\u901a\u5546\u54c1\u3001\u670d\u88c5\u3001\u7535\u5b50\u4ea7\u54c1\u3001\u539f\u6750\u6599\u3001\u5de5\u4e1a\u90e8\u4ef6\u3001\u519c\u4ea7\u54c1\u548c\u5316\u5de5\u4ea7\u54c1\u7b49\u591a\u4e2a\u884c\u4e1a\u7684\u4e70\u5bb6\u548c\u5356\u5bb6\u30021688 \u4e3a\u5728\u963f\u91cc\u5df4\u5df4\u96c6\u56e2\u65d7\u4e0b\u96f6\u552e\u5e02\u573a\u7ecf\u8425\u4e1a\u52a1\u7684\u5546\u5bb6\uff0c\u63d0\u4f9b\u4e86\u4ece\u672c\u5730\u6279\u53d1\u5546\u91c7\u8d2d\u4ea7\u54c1\u7684\u6e20\u9053\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo cainiao-logo">
+ <h3>\u83dc\u9e1f\u88f9\u88f9</h3>
+ <div class="user-info">
+ <h4>\u83dc\u9e1f\u88f9\u88f9</h4>
+ <p>\u83dc\u9e1f\u88f9\u88f9\u662f\u963f\u91cc\u5df4\u5df4\u65d7\u4e0b\u83dc\u9e1f\u7f51\u7edc\u63a8\u51fa\u7684\u4e00\u6b3e\u5feb\u9012\u670d\u52a1 APP\uff0c\u4e3b\u8981\u529f\u80fd\u6709\uff1a\u5feb\u9012\u8fd0\u5355\u67e5\u8be2\u3001\u9884\u7ea6\u5bc4\u5feb\u9012\u3001\u5305\u88f9\u81ea\u52a8\u8ddf\u8e2a\u3001\u83dc\u9e1f\u9a7f\u7ad9\u7f51\u70b9\u4ee3\u6536\u4ee3\u5bc4\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo xiami-logo">
+ <h3>\u867e\u7c73</h3>
+ <div class="user-info">
+ <h4>\u867e\u7c73</h4>
+ <p>\u63d0\u4f9b\u9ad8\u54c1\u8d28\u97f3\u4e50\u7684\u4e2a\u6027\u5316\u63a8\u8350\u670d\u52a1\uff0c\u4ee5\u53ca\u7ebf\u4e0b\u97f3\u4e50\u6d3b\u52a8\u7b49\u4e92\u52a8\u5185\u5bb9\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo youku-logo">
+ <h3>\u4f18\u9177</h3>
+ <div class="user-info">
+ <h4>\u4f18\u9177</h4>
+ <p>\u4e2d\u56fd\u9886\u5148\u7684\u89c6\u9891\u670d\u52a1\u5e73\u53f0\uff0c\u63d0\u4f9b\u89c6\u9891\u64ad\u653e\uff0c\u89c6\u9891\u53d1\u5e03\uff0c\u89c6\u9891\u5206\u4eab\u7b49\u670d\u52a1\u3002</p>
+ </div>
+ </div>
+ </div>
+ <!--<div class="more">
+ <a class="more" href="">More</a>
+ </div>-->
+ </div>
+</div>
+
+<div class="scene feedback horizon overlength">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u4ed6\u4eec\u8bf4</h2>
+ </div>
+ <div class="sketch-content">
+ <div class="user-feedback">
+ <img class="avatar" src="//gw.alicdn.com/tps/TB1xHiYPXXXXXc8XpXXXXXXXXXX-130-130.jpg" alt="avatar">
+ <p class="user-name">\u9648\u5929\u4e88</p>
+ <p class="user-title">\u4f17\u5b89\u4fdd\u9669\u6280\u672f\u603b\u76d1</p>
+ <p class="user-say">\u201c Weex \u4e0d\u4ec5\u5e94\u7528\u7075\u6d3b\u3001\u6027\u80fd\u5f3a\u5927\uff0c\u800c\u4e14\u80fd\u8ba9\u524d\u7aef\u5f00\u53d1\u8005\u6700\u5927\u7a0b\u5ea6\u590d\u7528\u73b0\u6709\u6280\u672f\u79ef\u7d2f\uff0c\u5e2e\u52a9\u6211\u4eec\u7528\u6700\u5c11\u6210\u672c\u8bbe\u8ba1\u5168\u65b0\u7684\u8de8\u5e73\u53f0\u67b6\u6784\u4f53\u7cfb\uff0c\u5e76\u5c3d\u5feb\u8fdb\u5165\u5b9e\u65bd\u9636\u6bb5\u3002\u201d</p>
+ </div>
+ <div class="user-feedback">
+ <img class="avatar" src="//gw.alicdn.com/tps/TB1e.CYPXXXXXcsXpXXXXXXXXXX-130-130.jpg" alt="avatar">
+ <p class="user-name">\u6797\u5efa\u950b</p>
+ <p class="user-title">\u997f\u4e86\u4e48\u5927\u524d\u7aef\u90e8\u8d1f\u8d23\u4eba</p>
+ <p class="user-say">\u201c Weex \u63d0\u4f9b\u4e86\u5ab2\u7f8e HTML5 \u5f00\u53d1\u6548\u7387\u548c Native \u7684\u6027\u80fd\uff0c\u5bf9\u4e8e\u7c7b\u4f3c\u6211\u4eec\u8fd9\u79cd\u8fed\u4ee3\u901f\u5ea6\u8981\u6c42\u6bd4\u8f83\u9ad8\u7684\u56e2\u961f\uff0c\u51e0\u4e4e\u662f\u76ee\u524d\u6700\u597d\u7684\u65b9\u6848\u3002\u201d</p>
+ </div>
+ <div class="user-feedback">
+ <img class="avatar" src="//gw.alicdn.com/tps/TB15MOQPXXXXXbCXFXXXXXXXXXX-130-130.jpg" alt="avatar">
+ <p class="user-name">\u9ec4\u6cf0\u6210</p>
+ <p class="user-title">\u5929\u732b\u6280\u672f\u4e13\u5bb6</p>
+ <p class="user-say">\u201c Weex \u4f5c\u4e3a\u8f7b\u91cf\u6e32\u67d3\u5f15\u64ce\u53c8\u63d0\u4f9b\u4e86\u5f88\u65b9\u4fbf\u7684\u63d2\u4ef6\u673a\u5236\uff0c\u8ba9\u5404\u4e2a\u7aef\u53ef\u4ee5\u628a\u81ea\u5df1\u7684\u80fd\u529b\u53d1\u6325\u51fa\u6765\uff0c\u5145\u5206\u53d1\u6325\u5728\u5929\u732b\u7684\u4e1a\u52a1\u4e0a\uff0c\u5e76\u826f\u597d\u7684\u652f\u6301\u53cc11\u3002\u201d</p>
+ </div>
+ </div>
+ <div class="go-2-doc">
+ <a href="/cn/guide/index.html" class="button get-started">\u4e0a\u624b\u6559\u7a0b \u2192</a>
+ </div>
+ </div>
+</div>
+<a href="javascript:;" id="back2top" class="back2top"><span class="iconfont icon-arrow-small"></span></a>
+<script src="/js/swiper.min.js"></script>
+<script src="/js/velocity.js"></script>
+<script>
+var swiper = new Swiper('.swiper-container', {
+ nextButton: '.swiper-button-next',
+ prevButton: '.swiper-button-prev',
+ slidesPerView: 1,
+ spaceBetween: 30,
+ loop: false,
+ autoplay: false,
+ autoplayDisableOnInteraction: false
+})
+</script>
+
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[05/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/references/api.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/references/api.html b/content/cn/v-0.10/references/api.html
new file mode 100644
index 0000000..eb539e8
--- /dev/null
+++ b/content/cn/v-0.10/references/api.html
@@ -0,0 +1,1111 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>ViewModel APIs | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u63a5\u53e3\u4f60\u53ef\u4ee5\u5728\u7ec4\u4ef6\u7684\u65b9\u6cd5\u4e2d\u901a\u8fc7 this \uff08Vm\uff09\u4e0a\u4e0b\u6587\u8bbf\u95ee\u8fd9\u4e9b API\u3002
+\u4f8b\u5b50\uff1a
+&lt;script&gt;module.exports = &#123; methods: &#123; somemethod: function() &#123; this.$vm('someId'); &#125; &#125;&#125;&lt;/script&gt;
+$(id)\u4e0d\u5efa">
+<meta property="og:type" content="website">
+<meta property="og:title" content="ViewModel APIs">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/references/api.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u63a5\u53e3\u4f60\u53ef\u4ee5\u5728\u7ec4\u4ef6\u7684\u65b9\u6cd5\u4e2d\u901a\u8fc7 this \uff08Vm\uff09\u4e0a\u4e0b\u6587\u8bbf\u95ee\u8fd9\u4e9b API\u3002
+\u4f8b\u5b50\uff1a
+&lt;script&gt;module.exports = &#123; methods: &#123; somemethod: function() &#123; this.$vm('someId'); &#125; &#125;&#125;&lt;/script&gt;
+$(id)\u4e0d\u5efa">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.951Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="ViewModel APIs">
+<meta name="twitter:description" content="\u63a5\u53e3\u4f60\u53ef\u4ee5\u5728\u7ec4\u4ef6\u7684\u65b9\u6cd5\u4e2d\u901a\u8fc7 this \uff08Vm\uff09\u4e0a\u4e0b\u6587\u8bbf\u95ee\u8fd9\u4e9b API\u3002
+\u4f8b\u5b50\uff1a
+&lt;script&gt;module.exports = &#123; methods: &#123; somemethod: function() &#123; this.$vm('someId'); &#125; &#125;&#125;&lt;/script&gt;
+$(id)\u4e0d\u5efa">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link current ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link current ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ ViewModel APIs
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.951Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u63a5\u53e3"><a href="#\u63a5\u53e3" class="headerlink" title="\u63a5\u53e3"></a>\u63a5\u53e3</h1><p>\u4f60\u53ef\u4ee5\u5728\u7ec4\u4ef6\u7684\u65b9\u6cd5\u4e2d\u901a\u8fc7 <code>this</code> \uff08Vm\uff09\u4e0a\u4e0b\u6587\u8bbf\u95ee\u8fd9\u4e9b API\u3002</p>
+<p>\u4f8b\u5b50\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">somemethod</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.$vm(<span class="string">'someId'</span>);</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<h2 id="id"><a href="#id" class="headerlink" title="$(id)"></a>$(id)</h2><p><strong>\u4e0d\u5efa\u8bae\u4f7f\u7528</strong>\uff0c\u8bf7\u4f7f\u7528 <code>$vm</code> \u4ee3\u66ff\u3002</p>
+<h2 id="el-id"><a href="#el-id" class="headerlink" title="$el(id)"></a>$el(id)</h2><p>\u8fd4\u56de\u5bf9\u5e94 id \u7684\u5143\u7d20\u5bf9\u8c61\u7684\u5f15\u7528\u3002</p>
+<h3 id="Arguments"><a href="#Arguments" class="headerlink" title="Arguments"></a>Arguments</h3><ul>
+<li><code>id</code> <em>(string)</em>: \u552f\u4e00\u6807\u8bc6\u7b26\u3002<h3 id="Returns"><a href="#Returns" class="headerlink" title="Returns"></a>Returns</h3></li>
+<li><em>(Element)</em>: \u4e00\u4e2a\u5143\u7d20\u5bf9\u8c61\u7684\u5f15\u7528\u3002<h3 id="Tips"><a href="#Tips" class="headerlink" title="Tips"></a>Tips</h3></li>
+<li>id \u53ea\u80fd\u4fdd\u8bc1\u662f\u5f53\u524d\uff08\u9875\u9762\uff09\u7ec4\u4ef6\u4e2d\u662f\u552f\u4e00\u7684\uff0c\u5982\u679c\u4f60\u9700\u8981\u5bfb\u627e\u7236\u7ec4\u4ef6\u6216\u5b50\u7ec4\u4ef6\uff0c\u4f60\u53ef\u4ee5\u5229\u7528\u7ec4\u4ef6\u95f4\u7684\u901a\u4fe1\u6a21\u5f0f\u5b9e\u73b0\u3002</li>
+<li>\u5ef6\u4f38\u9605\u8bfb\uff1a <a href="../guide/syntax/id.md">id</a>\uff0c<a href="../guide/syntax/comm.md">Communicate Between Components</a><h2 id="vm-id"><a href="#vm-id" class="headerlink" title="$vm(id)"></a>$vm(id)</h2></li>
+</ul>
+<p>\u8fd4\u56de\u5bf9\u5e94 id \u7684 vm \u5bf9\u8c61\u5f15\u7528\u3002</p>
+<h3 id="Arguments-1"><a href="#Arguments-1" class="headerlink" title="Arguments"></a>Arguments</h3><ul>
+<li><code>id</code> <em>(String)</em>: \u552f\u4e00\u6807\u8bc6\u7b26\u3002<h3 id="Returns-1"><a href="#Returns-1" class="headerlink" title="Returns"></a>Returns</h3></li>
+<li><code>vm</code> <em>(Vm)</em>: \u4e00\u4e2a Vm \u5bf9\u8c61\u5f15\u7528\u3002<h3 id="Tips-1"><a href="#Tips-1" class="headerlink" title="Tips"></a>Tips</h3></li>
+<li>id \u53ea\u80fd\u4fdd\u8bc1\u662f\u5f53\u524d\uff08\u9875\u9762\uff09\u7ec4\u4ef6\u4e2d\u662f\u552f\u4e00\u7684\uff0c\u5982\u679c\u4f60\u9700\u8981\u5bfb\u627e\u7236\u7ec4\u4ef6\u6216\u5b50\u7ec4\u4ef6\uff0c\u4f60\u53ef\u4ee5\u5229\u7528\u7ec4\u4ef6\u95f4\u7684\u901a\u4fe1\u6a21\u5f0f\u5b9e\u73b0\u3002</li>
+<li>\u5ef6\u4f38\u9605\u8bfb\uff1a <a href="../guide/syntax/id.md">id</a>\uff0c<a href="../guide/syntax/comm.md">Communicate Between Components</a><h2 id="getConfig"><a href="#getConfig" class="headerlink" title="$getConfig()"></a>$getConfig()</h2></li>
+</ul>
+<p>\u83b7\u53d6\u5f53\u524d\u5168\u5c40\u73af\u5883\u53d8\u91cf\u548c\u914d\u7f6e\u4fe1\u606f\u3002</p>
+<h3 id="Returns-2"><a href="#Returns-2" class="headerlink" title="Returns"></a>Returns</h3><ul>
+<li><code>config</code> <em>(object)</em>: \u914d\u7f6e\u5bf9\u8c61\uff1b</li>
+<li><code>bundleUrl</code> <em>(string)</em>: bundle \u7684 url\uff1b</li>
+<li><code>debug</code> <em>(boolean)</em>: \u662f\u5426\u662f\u8c03\u8bd5\u6a21\u5f0f\uff1b</li>
+<li><code>env</code> <em>(object)</em>: \u73af\u5883\u5bf9\u8c61\uff1b<ul>
+<li><code>weexVersion</code> <em>(string)</em>: Weex sdk \u7248\u672c\uff1b</li>
+<li><code>appName</code> <em>(string)</em>: \u5e94\u7528\u540d\u5b57\uff1b</li>
+<li><code>appVersion</code> <em>(string)</em>: \u5e94\u7528\u7248\u672c\uff1b</li>
+<li><code>platform</code> <em>(string)</em>: \u5e73\u53f0\u4fe1\u606f\uff0c\u662f <code>iOS</code>\u3001<code>Android</code> \u8fd8\u662f <code>Web</code>\uff1b</li>
+<li><code>osVersion</code> <em>(string)</em>: \u7cfb\u7edf\u7248\u672c\uff1b</li>
+<li><code>deviceModel</code> <em>(string)</em>: \u8bbe\u5907\u578b\u53f7 <strong>\uff08\u4ec5\u539f\u751f\u5e94\u7528\uff09</strong>\uff1b</li>
+<li><code>deviceWidth</code> <em>(number)</em>: \u8bbe\u5907\u5bbd\u5ea6\uff0c\u9ed8\u8ba4\u4e3a <code>750</code>\uff1b</li>
+<li><code>deviceHeight</code> <em>(number)</em>: \u8bbe\u5907\u9ad8\u5ea6\u3002<h2 id="call-module-method-\u2026args"><a href="#call-module-method-\u2026args" class="headerlink" title="$call(module, method, \u2026args)"></a>$call(module, method, \u2026args)</h2></li>
+</ul>
+</li>
+</ul>
+<p><strong>\u4e0d\u5efa\u8bae\u4f7f\u7528</strong>\uff0c\u8bf7\u4f7f\u7528 <code>require('@weex-module/module')[method](...args)</code> \u4ee3\u66ff\u3002\u67e5\u770b\u66f4\u591a\u4fe1\u606f\uff1a<a href="./modules/main">modules</a>\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/references/api.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/references/api.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/references/cheatsheet.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/references/cheatsheet.html b/content/cn/v-0.10/references/cheatsheet.html
new file mode 100644
index 0000000..ab88041
--- /dev/null
+++ b/content/cn/v-0.10/references/cheatsheet.html
@@ -0,0 +1,1367 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex \u5feb\u67e5\u624b\u518c | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Weex \u5907\u5fd8\u5f55Native \u7ec4\u4ef6
+code {
+ word-break: break-all;
+}
+
+
+
+
+
+\u7ec4\u4ef6
+\u7279\u6027
+\u6837\u5f0f
+\u4e8b\u4ef6
+\u7279\u6b8a\u7236\u7ec4\u4ef6
+\u5b50\u7ec4\u4ef6
+
+
+
+
+&lt;div&gt;
+-
+box modelflexboxpositionbackground-coloropacity
+clickappeardisappear
+-
+(any)
+
+
+&lt;text&gt;
+value
+box m">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Weex \u5feb\u67e5\u624b\u518c">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/references/cheatsheet.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Weex \u5907\u5fd8\u5f55Native \u7ec4\u4ef6
+code {
+ word-break: break-all;
+}
+
+
+
+
+
+\u7ec4\u4ef6
+\u7279\u6027
+\u6837\u5f0f
+\u4e8b\u4ef6
+\u7279\u6b8a\u7236\u7ec4\u4ef6
+\u5b50\u7ec4\u4ef6
+
+
+
+
+&lt;div&gt;
+-
+box modelflexboxpositionbackground-coloropacity
+clickappeardisappear
+-
+(any)
+
+
+&lt;text&gt;
+value
+box m">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.952Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex \u5feb\u67e5\u624b\u518c">
+<meta name="twitter:description" content="Weex \u5907\u5fd8\u5f55Native \u7ec4\u4ef6
+code {
+ word-break: break-all;
+}
+
+
+
+
+
+\u7ec4\u4ef6
+\u7279\u6027
+\u6837\u5f0f
+\u4e8b\u4ef6
+\u7279\u6b8a\u7236\u7ec4\u4ef6
+\u5b50\u7ec4\u4ef6
+
+
+
+
+&lt;div&gt;
+-
+box modelflexboxpositionbackground-coloropacity
+clickappeardisappear
+-
+(any)
+
+
+&lt;text&gt;
+value
+box m">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link current ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link ">Bootstrap</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/special-element.html" class="sidebar-link ">\u7279\u6b8a\u5143\u7d20</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/component-defs.html" class="sidebar-link ">ViewModel \u9009\u9879</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/api.html" class="sidebar-link ">ViewModel APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-attrs.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/units.html" class="sidebar-link ">CSS \u5355\u4f4d</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/wxc/index.html" class="sidebar-link ">\u5b98\u65b9\u6269\u5c55\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-navpage.html" class="sidebar-link "><wxc-navpage></a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/wxc/wxc-tabbar.html" class="sidebar-link "><wxc-tabbar></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/specs/index.html" class="sidebar-link ">JS Bundle format (\u82f1)</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/js-framework-apis.html" class="sidebar-link ">JS Framework APIs (\u82f1)</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/references/specs/virtual-dom-apis.html" class="sidebar-link ">Virtual DOM APIs</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/cheatsheet.html" class="sidebar-link current ">Weex \u5feb\u67e5\u624b\u518c</a></h3>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Weex \u5feb\u67e5\u624b\u518c
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.952Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Weex-\u5907\u5fd8\u5f55"><a href="#Weex-\u5907\u5fd8\u5f55" class="headerlink" title="Weex \u5907\u5fd8\u5f55"></a>Weex \u5907\u5fd8\u5f55</h1><h2 id="Native-\u7ec4\u4ef6"><a href="#Native-\u7ec4\u4ef6" class="headerlink" title="Native \u7ec4\u4ef6"></a>Native \u7ec4\u4ef6</h2><style>
+code {
+ word-break: break-all;
+}
+</style>
+
+<table>
+<thead>
+<tr>
+<th>\u7ec4\u4ef6</th>
+<th>\u7279\u6027</th>
+<th>\u6837\u5f0f</th>
+<th>\u4e8b\u4ef6</th>
+<th>\u7279\u6b8a\u7236\u7ec4\u4ef6</th>
+<th>\u5b50\u7ec4\u4ef6</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code><div></code></td>
+<td>-</td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code></td>
+<td>-</td>
+<td>(any)</td>
+</tr>
+<tr>
+<td><code><text></code></td>
+<td><code>value</code></td>
+<td><strong>box model</strong><br>flex<br><code>position</code><br><code>background-color</code><br><code>opacity</code><br><code>color</code><br><code>font-size</code><br><code>font-style</code><br><code>font-weight</code><br><code>text-decoration</code><br><code>text-align</code><br><code>text-overflow</code><br><code>line-height</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code></td>
+<td>-</td>
+<td>text only</td>
+</tr>
+<tr>
+<td><code><image></code></td>
+<td><code>src</code></td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code><br><code>resize</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code></td>
+<td>-</td>
+<td>(none)</td>
+</tr>
+<tr>
+<td><code><scroller></code></td>
+<td><code>show-scrollbar</code><br><code>scroll-direction</code></td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code></td>
+<td>-</td>
+<td>(any)</td>
+</tr>
+<tr>
+<td><code><list></code></td>
+<td><code>loadmoreoffset</code></td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code><br><code>loadmore</code><br><code>refresh</code><br><code>loading</code></td>
+<td>-</td>
+<td><code><cell></code><br><code><header></code><br><code><refresh></code><br><code><loading></code></td>
+</tr>
+<tr>
+<td><code><cell></code></td>
+<td>-</td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code></td>
+<td><code><list></code></td>
+<td>(any)</td>
+</tr>
+<tr>
+<td><code><slider></code></td>
+<td><code>auto-play</code></td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code><br><code>change</code></td>
+<td>-</td>
+<td>(any)<br><code><indicator></code></td>
+</tr>
+<tr>
+<td><code><indicator></code></td>
+<td>-</td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>item-color</code><br><code>item-selected-color</code><br><code>item-size</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code></td>
+<td><code><slider></code></td>
+<td>(none)</td>
+</tr>
+<tr>
+<td><code><wxc-navpage></code></td>
+<td><code>height</code><br><code>background-color</code><br><code>title</code><br><code>title-color</code><br><code>left-item-title</code><br><code>left-item-color</code><br><code>right-item-title</code><br><code>right-item-color</code><br><code>left-item-src</code><br><code>right-item-src</code></td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code><br><code>naviBar.leftItem.click</code><br><code>naviBar.rightItem.click</code></td>
+<td>-</td>
+<td>(any)</td>
+</tr>
+<tr>
+<td><code><wxc-tabbar></code></td>
+<td><code>tab-items</code></td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code></td>
+<td><code>tabBar.onClick</code></td>
+<td>-</td>
+<td>(none)</td>
+</tr>
+<tr>
+<td><code><embed></code></td>
+<td><code>src</code></td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code></td>
+<td>-</td>
+<td>(none)</td>
+</tr>
+<tr>
+<td><code><web></code></td>
+<td><code>src</code></td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code><br><code>pagestart</code><br><code>pagefinish</code><br><code>error</code></td>
+<td>-</td>
+<td>(none)</td>
+</tr>
+<tr>
+<td><code><video></code></td>
+<td><code>src</code><br><code>play-status</code><br><code>auto-play</code></td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code><br><code>start</code><br><code>pause</code><br><code>finish</code><br><code>fail</code></td>
+<td>-</td>
+<td>(none)</td>
+</tr>
+<tr>
+<td><code><a></code></td>
+<td><code>href</code></td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code></td>
+<td>-</td>
+<td>(any)</td>
+</tr>
+<tr>
+<td><code><input></code></td>
+<td><code>type</code><br><code>value</code><br><code>placeholder</code><br><code>disabled</code><br><code>autofocus</code></td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code><br><code>placeholder-color</code><br><code>color</code><br><code>font-size</code><br><code>font-style</code><br><code>font-weight</code><br><code>text-align</code></td>
+<td><code>click</code><br><code>appear</code><br><code>disappear</code></td>
+<td>-</td>
+<td>(none)</td>
+</tr>
+<tr>
+<td><code><switch></code></td>
+<td><code>checked</code></td>
+<td><strong>box model</strong><br><strong>flexbox</strong><br><code>position</code><br><code>background-color</code><br><code>opacity</code></td>
+<td><code>appear</code><br><code>disappear</code><br><code>input</code><br><code>change</code><br><code>focus</code><br><code>blur</code></td>
+<td>-</td>
+<td>(none)</td>
+</tr>
+</tbody>
+</table>
+<h2 id="Native-Modules"><a href="#Native-Modules" class="headerlink" title="Native Modules"></a>Native Modules</h2><table>
+<thead>
+<tr>
+<th>module</th>
+<th>apis</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>@weex-module/dom</code></td>
+<td><code>scrollToElement(node, { offset })</code></td>
+</tr>
+<tr>
+<td><code>@weex-module/modal</code></td>
+<td><code>toast({ message, duration })</code><br><code>alert({ message, okTitle }, callback)</code><br><code>confirm({ message, okTitle, cancelTitle }, callback(result))</code><br><code>prompt({ message, okTitle, cancelTitle }, callback(result, data))</code></td>
+</tr>
+<tr>
+<td><code>@weex-module/stream</code></td>
+<td><code>fetch({ method, url, headers, type, body }, callback({ status, ok, statusText, data, headers }), progressCallback({ readyState, status, length, statusText, headers}))</code></td>
+</tr>
+<tr>
+<td><code>@weex-module/webview</code></td>
+<td><code>goBack(ref)</code><br><code>goForward(ref)</code><br><code>reload(ref)</code></td>
+</tr>
+<tr>
+<td><code>@weex-module/navigator</code></td>
+<td><code>push({ url, animated }, callback)</code><br><code>pop({ animated }, callback)</code></td>
+</tr>
+<tr>
+<td><code>@weex-module/animation</code></td>
+<td><code>transition(node, { styles, duration, timingFunction, delay, transform-origin }, callback)</code></td>
+</tr>
+</tbody>
+</table>
+<h2 id="\u7279\u6b8a\u7684\u6a21\u7248\u8bed\u6cd5"><a href="#\u7279\u6b8a\u7684\u6a21\u7248\u8bed\u6cd5" class="headerlink" title="\u7279\u6b8a\u7684\u6a21\u7248\u8bed\u6cd5"></a>\u7279\u6b8a\u7684\u6a21\u7248\u8bed\u6cd5</h2><ul>
+<li><code><foo x="abc"></code></li>
+<li><code><foo x="{{expr}}"></foo></code></li>
+<li><code><foo style="name1: value1; name2: value2"></code></li>
+<li><code><foo style="name1: value1; name2: {{expr}}; name3: ..."></foo></code></li>
+<li><code><foo class="a b c"></code></li>
+<li><code><foo class="a {{expr}} c"></foo></code></li>
+<li><code><foo onclick="methodName"></code></li>
+<li><code><foo id="abc"></code></li>
+<li><code><foo if="expr"></code></li>
+<li><code><foo repeat="item in list"></code></li>
+<li><code><foo repeat="(key,item) in list"></code></li>
+<li><code><component type="foo"></code></li>
+<li><code><component type="{{expr}}"></component></code></li>
+</ul>
+<h2 id="ViewModel-APIs"><a href="#ViewModel-APIs" class="headerlink" title="ViewModel APIs"></a>ViewModel APIs</h2><ul>
+<li><code>this.$vm(el)</code></li>
+<li><code>this.$el(el)</code></li>
+<li><code>this.$getConfig()</code></li>
+<li><code>this.$emit(type, data)</code></li>
+<li><code>this.$dispatch(type, data)</code></li>
+<li><code>this.$broadcast(type, data)</code></li>
+</ul>
+<h2 id="ViewModel-Options"><a href="#ViewModel-Options" class="headerlink" title="ViewModel Options"></a>ViewModel Options</h2><ul>
+<li><code>data</code></li>
+<li><code>methods</code></li>
+<li><code>computed</code></li>
+<li><code>init</code>, <code>created</code>, <code>ready</code></li>
+<li><code>events</code></li>
+</ul>
+<p><strong>\u793a\u4f8b\uff1a</strong></p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"></div><div class="line"> <span class="attr">data</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">x</span>: <span class="number">1</span>,</div><div class="line"> <span class="attr">y</span>: <span class="number">2</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> methods: {</div><div class="line"> <span class="attr">foo</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'foo'</span>)</div><div class="lin
e"> }</div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="attr">computed</span>: {</div><div class="line"> <span class="attr">z</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.x + <span class="keyword">this</span>.y</div><div class="line"> }</div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="attr">events</span>: {</div><div class="line"> <span class="attr">custom</span>: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(e)</div><div class="line"> }</div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="attr">init</span>: <span clas
s="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{},</div><div class="line"> <span class="attr">created</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{},</div><div class="line"> <span class="attr">ready</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{}</div><div class="line">}</div></pre></td></tr></table></figure>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/references/cheatsheet.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/references/cheatsheet.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[20/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/native-dom-api.html
----------------------------------------------------------------------
diff --git a/content/cn/references/native-dom-api.html b/content/cn/references/native-dom-api.html
new file mode 100644
index 0000000..ca21eaf
--- /dev/null
+++ b/content/cn/references/native-dom-api.html
@@ -0,0 +1,1474 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Native DOM APIs | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Native DOM APIsWeex \u5728 JS \u5f15\u64ce\u4e2d\uff0c\u4e3a\u6bcf\u4e2a\u9875\u9762\u90fd\u63d0\u4f9b\u4e86\u4e00\u5957 Native DOM APIs\uff0c\u8fd9\u5957\u63a5\u53e3\u548c HTML DOM APIs \u975e\u5e38\u63a5\u8fd1\uff0c\u5229\u7528\u8fd9\u5957\u63a5\u53e3\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 JavaScript \u63a7\u5236 native \u7684\u6e32\u67d3\u903b\u8f91\u3002\u800c\u4e14 Weex \u4e0a\u5c42\u7684 Vue 2.0 \u4e5f\u662f\u57fa\u4e8e\u8fd9\u5957\u63a5\u53e3\u8fdb\u884c\u9002\u914d\u7684\u3002
+\u7edd\u5927\u591a\u6570\u60c5\u51b5\u4e0b JS \u6846\u67b6\u4f1a\u628a Native DOM APIs \u90fd\u5c01\u88c5\u597d\uff0c\u5f00\u53d1\u8005\u4e0d\u9700\u8981">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Native DOM APIs">
+<meta property="og:url" content="https://weex.apache.org/cn/references/native-dom-api.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Native DOM APIsWeex \u5728 JS \u5f15\u64ce\u4e2d\uff0c\u4e3a\u6bcf\u4e2a\u9875\u9762\u90fd\u63d0\u4f9b\u4e86\u4e00\u5957 Native DOM APIs\uff0c\u8fd9\u5957\u63a5\u53e3\u548c HTML DOM APIs \u975e\u5e38\u63a5\u8fd1\uff0c\u5229\u7528\u8fd9\u5957\u63a5\u53e3\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 JavaScript \u63a7\u5236 native \u7684\u6e32\u67d3\u903b\u8f91\u3002\u800c\u4e14 Weex \u4e0a\u5c42\u7684 Vue 2.0 \u4e5f\u662f\u57fa\u4e8e\u8fd9\u5957\u63a5\u53e3\u8fdb\u884c\u9002\u914d\u7684\u3002
+\u7edd\u5927\u591a\u6570\u60c5\u51b5\u4e0b JS \u6846\u67b6\u4f1a\u628a Native DOM APIs \u90fd\u5c01\u88c5\u597d\uff0c\u5f00\u53d1\u8005\u4e0d\u9700\u8981">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.910Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Native DOM APIs">
+<meta name="twitter:description" content="Native DOM APIsWeex \u5728 JS \u5f15\u64ce\u4e2d\uff0c\u4e3a\u6bcf\u4e2a\u9875\u9762\u90fd\u63d0\u4f9b\u4e86\u4e00\u5957 Native DOM APIs\uff0c\u8fd9\u5957\u63a5\u53e3\u548c HTML DOM APIs \u975e\u5e38\u63a5\u8fd1\uff0c\u5229\u7528\u8fd9\u5957\u63a5\u53e3\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 JavaScript \u63a7\u5236 native \u7684\u6e32\u67d3\u903b\u8f91\u3002\u800c\u4e14 Weex \u4e0a\u5c42\u7684 Vue 2.0 \u4e5f\u662f\u57fa\u4e8e\u8fd9\u5957\u63a5\u53e3\u8fdb\u884c\u9002\u914d\u7684\u3002
+\u7edd\u5927\u591a\u6570\u60c5\u51b5\u4e0b JS \u6846\u67b6\u4f1a\u628a Native DOM APIs \u90fd\u5c01\u88c5\u597d\uff0c\u5f00\u53d1\u8005\u4e0d\u9700\u8981">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link current ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link current ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Native DOM APIs
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.910Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Native-DOM-APIs"><a href="#Native-DOM-APIs" class="headerlink" title="Native DOM APIs"></a>Native DOM APIs</h1><p>Weex \u5728 JS \u5f15\u64ce\u4e2d\uff0c\u4e3a\u6bcf\u4e2a\u9875\u9762\u90fd\u63d0\u4f9b\u4e86\u4e00\u5957 Native DOM APIs\uff0c\u8fd9\u5957\u63a5\u53e3\u548c HTML DOM APIs \u975e\u5e38\u63a5\u8fd1\uff0c\u5229\u7528\u8fd9\u5957\u63a5\u53e3\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 JavaScript \u63a7\u5236 native \u7684\u6e32\u67d3\u903b\u8f91\u3002\u800c\u4e14 Weex \u4e0a\u5c42\u7684 Vue 2.0 \u4e5f\u662f\u57fa\u4e8e\u8fd9\u5957\u63a5\u53e3\u8fdb\u884c\u9002\u914d\u7684\u3002</p>
+<p><em>\u7edd\u5927\u591a\u6570\u60c5\u51b5\u4e0b JS \u6846\u67b6\u4f1a\u628a Native DOM APIs \u90fd\u5c01\u88c5\u597d\uff0c\u5f00\u53d1\u8005\u4e0d\u9700\u8981\u76f4\u63a5\u5bf9 Native DOM \u8fdb\u884c\u64cd\u4f5c\u3002</em></p>
+<ul>
+<li><code>Document</code> \u7c7b\uff0c\u6574\u4e2a\u9875\u9762\u6587\u6863\u3002</li>
+<li><code>Node</code> \u7c7b\uff0c\u7ed3\u70b9\u7684\u57fa\u7840\u7c7b\u3002</li>
+<li><code>Element</code> \u7c7b\uff0c\u5143\u7d20\u7ed3\u70b9\uff0c\u7ee7\u627f\u81ea <code>Node</code>\uff0c\u5355\u4e2a\u89c6\u56fe\u5355\u5143\u3002</li>
+<li><code>Comment</code> \u7c7b\uff0c\u6ce8\u91ca\u7ed3\u70b9\uff0c\u7ee7\u627f\u81ea <code>Node</code>\uff0c\u65e0\u5b9e\u9645\u610f\u4e49\uff0c\u901a\u5e38\u7528\u4f5c\u5360\u4f4d\u7b26\u3002</li>
+</ul>
+<p><strong>\u6bcf\u4e2a Weex \u9875\u9762\u90fd\u6709\u4e00\u4e2a <code>weex.document</code> \u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u5c31\u662f\u4e00\u4e2a <code>Document</code> \u7c7b\u7684\u5b9e\u4f8b\uff0c\u4e5f\u662f\u4e0b\u9762\u6240\u6709\u63a5\u53e3\u8c03\u7528\u7684\u8d77\u70b9\u3002</strong></p>
+<p>\u63a5\u4e0b\u6765\u8be6\u7ec6\u4ecb\u7ecd\u5b83\u4eec\u7684\u7528\u6cd5\uff1a</p>
+<h2 id="Document-\u7c7b"><a href="#Document-\u7c7b" class="headerlink" title="Document \u7c7b"></a><code>Document</code> \u7c7b</h2><p>\u6bcf\u4e2a <code>Document</code> \u5b9e\u4f8b\u5728\u521b\u5efa\u7684\u65f6\u5019\u90fd\u4f1a\u81ea\u52a8\u62e5\u6709\u4e00\u4e2a <code>documentElement</code> \u5c5e\u6027\uff0c\u8868\u793a\u6587\u6863\u7ed3\u70b9\u3002\u8be5\u6587\u6863\u7ed3\u70b9\u53ef\u4ee5\u62e5\u6709\u4e00\u4e2a <code>body</code>\uff0c\u5373\u6587\u6863\u7684\u4e3b\u4f53\u7ed3\u70b9\u3002</p>
+<p><strong>\u6ce8\u610f\u4e8b\u9879</strong>: \u6587\u6863\u7684\u4e3b\u4f53\u7ed3\u70b9\u53ea\u63a5\u53d7 <code><div></code>\u3001<code><list></code> \u6216 <code><scroller></code> \u4e09\u79cd\u7c7b\u578b\u7684\u5143\u7d20\u7ed3\u70b9\u3002</p>
+<h3 id="\u6784\u9020\u51fd\u6570"><a href="#\u6784\u9020\u51fd\u6570" class="headerlink" title="\u6784\u9020\u51fd\u6570"></a>\u6784\u9020\u51fd\u6570</h3><p><strong><code>new Document(id: string, url: string?)</code></strong></p>
+<h3 id="\u6210\u5458\u65b9\u6cd5"><a href="#\u6210\u5458\u65b9\u6cd5" class="headerlink" title="\u6210\u5458\u65b9\u6cd5"></a>\u6210\u5458\u65b9\u6cd5</h3><p><strong><code>createElement(tagName: string, props: Object?): Element</code></strong></p>
+<ul>
+<li>\u521b\u5efa\u4e00\u4e2a\u7279\u5b9a\u7c7b\u578b <code>tagName</code> \u7684 <code>Element</code> \u5b9e\u4f8b\uff0c\u5373\u4e00\u4e2a\u5143\u7d20\u7ed3\u70b9\u3002<code>props</code> \u53ef\u4ee5\u5305\u542b <code>attr</code> \u5bf9\u8c61\u548c <code>style</code> \u5bf9\u8c61\u3002\u6bd4\u5982 <code>createBody('div', {style: {backgroundColor: '#ffffff'}})</code>\u3002</li>
+</ul>
+<p><strong><code>createComment(text: string): Comment</code></strong></p>
+<ul>
+<li>\u521b\u5efa\u4e00\u4e2a <code>Comment</code> \u7684\u5b9e\u4f8b\uff0c\u5373\u4e00\u4e2a\u6ce8\u91ca\u7ed3\u70b9\uff0c\u5e76\u8bbe\u7f6e\u4e00\u6bb5\u6587\u672c\u63cf\u8ff0\u3002</li>
+</ul>
+<p><strong><code>createBody(tagName: string, props: Object?): Element</code></strong></p>
+<ul>
+<li>\u521b\u5efa\u6587\u6863\u4e3b\u4f53\u7ed3\u70b9\uff0c\u5e76\u81ea\u52a8\u6302\u8f7d\u5230 <code>documentElement</code> \u4e0b\u3002</li>
+</ul>
+<p><strong><code>fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)</code></strong></p>
+<ul>
+<li>\u89e6\u53d1\u4e00\u4e2a\u7279\u5b9a\u7c7b\u578b\u7684\u4e8b\u4ef6\uff0c\u5e76\u9644\u5e26\u4e00\u4e2a\u4e8b\u4ef6\u5bf9\u8c61 <code>e</code>\u3002\u5f53\u8be5\u4e8b\u4ef6\u5728\u4ea7\u751f\u8fc7\u7a0b\u4e2d\u4fee\u6539\u4e86 DOM \u7684\u7279\u6027\u6216\u6837\u5f0f\uff0c\u5219\u7b2c\u56db\u4e2a\u53c2\u6570\u7528\u6765\u63cf\u8ff0\u8fd9\u4e9b\u6539\u53d8\uff0c\u53c2\u6570\u683c\u5f0f\u548c\u4e0a\u9762 <code>createElement</code> \u65b9\u6cd5\u7684\u683c\u5f0f\u76f8\u540c\u3002</li>
+</ul>
+<p><strong><code>destroy()</code></strong></p>
+<ul>
+<li>\u9500\u6bc1\u5f53\u524d\u6587\u6863\u3002\u4e00\u65e6\u9500\u6bc1\u4e4b\u540e\u6587\u6863\u5c06\u4e0d\u4f1a\u518d\u5de5\u4f5c\u3002</li>
+</ul>
+<h3 id="\u53ea\u8bfb\u6210\u5458\u53d8\u91cf"><a href="#\u53ea\u8bfb\u6210\u5458\u53d8\u91cf" class="headerlink" title="\u53ea\u8bfb\u6210\u5458\u53d8\u91cf"></a>\u53ea\u8bfb\u6210\u5458\u53d8\u91cf</h3><p><strong><code>id: string</code></strong></p>
+<ul>
+<li>\u6bcf\u4e2a <code>Document</code> \u5b9e\u4f8b\u90fd\u6709\u4e00\u4e2a\u552f\u4e00\u7684 <code>id</code>\u3002\u8fd9\u540c\u65f6\u4e5f\u662f\u6bcf\u4e2a Weex \u9875\u9762\u552f\u4e00\u62e5\u6709\u7684 <code>id</code>\u3002</li>
+</ul>
+<p><strong><code>URL: string?</code></strong></p>
+<ul>
+<li>\u5982\u679c\u5f53\u524d Weex \u9875\u9762\u6709 JS bundle URL \u7684\u8bdd\uff0c\u8fd9\u91cc\u5219\u4f1a\u8fd4\u56de \u8fd9\u4e2a URL\u3002</li>
+</ul>
+<p><strong><code>body: Element</code></strong></p>
+<ul>
+<li>\u6587\u6863\u7684\u4e3b\u4f53\u7ed3\u70b9\uff0c\u6982\u5ff5\u7c7b\u4f3c HTML DOM \u91cc\u7684 <code>document.body</code>\u3002</li>
+</ul>
+<p><strong><code>documentElement: Element</code></strong></p>
+<ul>
+<li>\u6587\u6863\u7684\u5bf9\u5e94\u7ed3\u70b9\uff0c\u6982\u5ff5\u7c7b\u4f3c HTML DOM \u91cc\u7684 <code>document.documentElement</code>\u3002</li>
+<li><code>body</code> \u548c <code>documentElement</code> \u7684\u5173\u7cfb\u662f\uff1a<code>documentElement</code> \u662f <code>body</code> \u7684\u7236\u7ed3\u70b9\u3002</li>
+</ul>
+<p><strong><code>getRef(id): Node</code></strong></p>
+<ul>
+<li>\u6839\u636e\u7ed3\u70b9 id \u83b7\u53d6\u7ed3\u70b9\u3002</li>
+</ul>
+<h2 id="Node-\u7c7b"><a href="#Node-\u7c7b" class="headerlink" title="Node \u7c7b"></a><code>Node</code> \u7c7b</h2><h3 id="\u6784\u9020\u51fd\u6570-1"><a href="#\u6784\u9020\u51fd\u6570-1" class="headerlink" title="\u6784\u9020\u51fd\u6570"></a>\u6784\u9020\u51fd\u6570</h3><p><strong><code>new Node()</code></strong></p>
+<h3 id="\u6210\u5458"><a href="#\u6210\u5458" class="headerlink" title="\u6210\u5458"></a>\u6210\u5458</h3><p><strong><code>destroy()</code></strong></p>
+<h3 id="\u53ea\u8bfb\u6210\u5458\u53d8\u91cf\u6216\u65b9\u6cd5"><a href="#\u53ea\u8bfb\u6210\u5458\u53d8\u91cf\u6216\u65b9\u6cd5" class="headerlink" title="\u53ea\u8bfb\u6210\u5458\u53d8\u91cf\u6216\u65b9\u6cd5"></a>\u53ea\u8bfb\u6210\u5458\u53d8\u91cf\u6216\u65b9\u6cd5</h3><p><strong><code>ref: string</code></strong></p>
+<ul>
+<li>\u6bcf\u4e2a <code>Node</code> \u5b9e\u4f8b\u90fd\u6709\u5404\u81ea\u7684\u5728\u6574\u4e2a <code>Document</code> \u5b9e\u4f8b\u4e2d\u552f\u4e00\u7684 <code>ref</code> \u503c\u3002</li>
+</ul>
+<p><strong><code>nextSibling: Node?</code></strong></p>
+<p><strong><code>previousSibling: Node?</code></strong></p>
+<p><strong><code>parentNode: Node?</code></strong></p>
+<ul>
+<li>\u4e0a\u8ff0\u4e09\u4e2a\u63a5\u53e3\u548c HTML DOM \u7684\u5b9a\u4e49\u543b\u5408\u3002</li>
+</ul>
+<p><strong><code>children: Node[]</code></strong></p>
+<ul>
+<li>\u8be5\u7ed3\u70b9\u62e5\u6709\u7684\u6240\u6709\u5b50\u7ed3\u70b9\u7684\u6570\u7ec4\u3002</li>
+</ul>
+<p><strong><code>pureChildren: Node[]</code></strong></p>
+<ul>
+<li>\u8be5\u7ed3\u70b9\u62e5\u6709\u7684\u6240\u6709\u5b50\u5143\u7d20\u7684\u6570\u7ec4\u3002\u548c <code>children</code> \u7684\u533a\u522b\u662f\uff0c<code>pureChildren</code> \u53ea\u5305\u542b\u4e86 <code>Element</code> \u5b9e\u4f8b\u800c\u4e0d\u5305\u542b <code>Comment</code> \u5b9e\u4f8b\u3002</li>
+</ul>
+<h2 id="Element-\u7c7b-\u7ee7\u627f\u81ea-Node"><a href="#Element-\u7c7b-\u7ee7\u627f\u81ea-Node" class="headerlink" title="Element \u7c7b \u7ee7\u627f\u81ea Node"></a><code>Element</code> \u7c7b <small>\u7ee7\u627f\u81ea <code>Node</code></small></h2><h3 id="\u6784\u9020\u51fd\u6570-2"><a href="#\u6784\u9020\u51fd\u6570-2" class="headerlink" title="\u6784\u9020\u51fd\u6570"></a>\u6784\u9020\u51fd\u6570</h3><p><strong><code>new Element(type: string, props: Object?)</code></strong></p>
+<ul>
+<li>\u521b\u5efa\u4e00\u4e2a\u7279\u5b9a\u7c7b\u578b <code>type</code> \u7684\u5143\u7d20\u7ed3\u70b9\uff0c\u53c2\u6570 <code>props</code> \u53ef\u4ee5\u5305\u542b <code>attr</code> \u5bf9\u8c61\u6216 <code>style</code> \u5bf9\u8c61\u3002</li>
+</ul>
+<h3 id="DOM-\u6811\u64cd\u4f5c"><a href="#DOM-\u6811\u64cd\u4f5c" class="headerlink" title="DOM \u6811\u64cd\u4f5c"></a>DOM \u6811\u64cd\u4f5c</h3><p><strong><code>appendChild(node: Node)</code></strong></p>
+<p><strong><code>insertBefore(node: Node, before: Node?)</code></strong></p>
+<ul>
+<li>\u4e0a\u8ff0\u4e24\u4e2a\u63a5\u53e3\u7c7b\u4f3c HTML DOM\u3002</li>
+</ul>
+<p><strong><code>insertAfter(node: Node, after: Node?)</code></strong></p>
+<ul>
+<li>\u5728\u4e00\u4e2a\u5b50\u7ed3\u70b9\u4e4b\u524d\u63d2\u5165\u65b0\u7ed3\u70b9 after\u3002</li>
+</ul>
+<p><strong><code>removeChild(node: Node, preserved: boolean?)</code></strong></p>
+<ul>
+<li>\u5220\u9664\u5b50\u7ed3\u70b9 <code>node</code>\uff0c\u53c2\u6570 <code>preserved</code> \u8868\u793a\u7acb\u523b\u4ece\u5185\u5b58\u4e2d\u5220\u9664\u8fd8\u662f\u6682\u65f6\u4fdd\u7559\u3002</li>
+</ul>
+<p><strong><code>clear()</code></strong></p>
+<ul>
+<li>\u6e05\u9664\u6240\u6709\u7684\u5b50\u7ed3\u70b9\u3002</li>
+</ul>
+<h3 id="DOM-\u5c5e\u6027\u672c\u8eab\u64cd\u4f5c"><a href="#DOM-\u5c5e\u6027\u672c\u8eab\u64cd\u4f5c" class="headerlink" title="DOM \u5c5e\u6027\u672c\u8eab\u64cd\u4f5c"></a>DOM \u5c5e\u6027\u672c\u8eab\u64cd\u4f5c</h3><p><strong><code>setAttr(key: string, value: string, silent: boolean?)</code></strong></p>
+<p><strong><code>setStyle(key: string, value: string, silent: boolean?)</code></strong></p>
+<ul>
+<li>\u4e0a\u8ff0\u4e24\u4e2a\u63a5\u53e3\u4e2d\uff0c\u5f53 <code>silent</code> \u4e3a\u771f\u7684\u65f6\u5019\uff0c\u7ed3\u70b9\u4ec5\u66f4\u65b0\u81ea\u5df1\uff0c\u4e0d\u4f1a\u4f20\u9012\u547d\u4ee4\u7ed9\u5ba2\u6237\u7aef\u6e32\u67d3\u5c42\u3002\u8be5\u53c2\u6570\u7528\u6765\u5904\u7406\u7528\u6237\u4e8b\u4ef6\u5728\u53d1\u751f\u65f6\u5df2\u7ecf\u6539\u53d8\u7ed3\u70b9\u76f8\u5173\u5c5e\u6027\u7684\u60c5\u51b5\u4e0b\uff0c\u4e0d\u4f1a\u5728 Native DOM \u4e5f\u6539\u53d8\u4e4b\u540e\u91cd\u590d\u53d1\u9001\u547d\u4ee4\u7ed9\u5ba2\u6237\u7aef\u3002</li>
+</ul>
+<p><strong><code>addEvent(type: string, handler: Function)</code></strong></p>
+<p><strong><code>removeEvent(type: string)</code></strong></p>
+<p><strong><code>fireEvent(type: string, e: any)</code></strong></p>
+<ul>
+<li>\u7ed1\u5b9a\u4e8b\u4ef6\u3001\u89e3\u7ed1\u5b9a\u4e8b\u4ef6\u3001\u89e6\u53d1\u4e8b\u4ef6\u3002</li>
+</ul>
+<h4 id="\u7279\u5b9a\u7ec4\u4ef6\u7c7b\u578b\u7684\u7ec4\u4ef6\u65b9\u6cd5"><a href="#\u7279\u5b9a\u7ec4\u4ef6\u7c7b\u578b\u7684\u7ec4\u4ef6\u65b9\u6cd5" class="headerlink" title="\u7279\u5b9a\u7ec4\u4ef6\u7c7b\u578b\u7684\u7ec4\u4ef6\u65b9\u6cd5"></a>\u7279\u5b9a\u7ec4\u4ef6\u7c7b\u578b\u7684\u7ec4\u4ef6\u65b9\u6cd5</h4><p>\u7279\u6b8a\u7684\uff1a\u4e0d\u540c\u7ec4\u4ef6\u7c7b\u578b\u53ef\u4ee5\u62e5\u6709\u81ea\u5df1\u7279\u6709\u7684\u65b9\u6cd5\uff0c\u6bd4\u5982 <code><web></code> \u7ec4\u4ef6\u652f\u6301 <code>refresh</code> \u65b9\u6cd5\uff0c\u8be6\u89c1\u5404\u7ec4\u4ef6\u7684\u63cf\u8ff0\uff0c\u5728\u6b64\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u4f1a\u4ea7\u751f\u7279\u5b9a\u7ec4\u4ef6\u7c7b\u578b\u7684 class\uff0c\u6bd4\u5982 <code>WebElement</code>\uff0c\u5b83\u7ee7\u627f\u81ea <code>Element</code>\u3002</p>
+<p>\u5982\uff1a</p>
+<blockquote>
+<h4 id="WebElement-\u7ee7\u627f\u81ea-Element"><a href="#WebElement-\u7ee7\u627f\u81ea-Element" class="headerlink" title="WebElement \u7ee7\u627f\u81ea Element"></a><code>WebElement</code> <small>\u7ee7\u627f\u81ea <code>Element</code></small></h4><p>\u8868\u793a\u5728 Weex \u9875\u9762\u4e2d\u5d4c\u5165\u4e00\u4e2a webview</p>
+<p><strong><code>refresh()</code></strong>: \u5237\u65b0\u5f53\u524d webview</p>
+</blockquote>
+<h3 id="\u53ea\u8bfb\u6210\u5458\u53d8\u91cf\u6216\u65b9\u6cd5-1"><a href="#\u53ea\u8bfb\u6210\u5458\u53d8\u91cf\u6216\u65b9\u6cd5-1" class="headerlink" title="\u53ea\u8bfb\u6210\u5458\u53d8\u91cf\u6216\u65b9\u6cd5"></a>\u53ea\u8bfb\u6210\u5458\u53d8\u91cf\u6216\u65b9\u6cd5</h3><p><strong><code>ref</code>, <code>nextSibling</code>, <code>previousSibling</code>, <code>parentNode</code></strong></p>
+<ul>
+<li>\u7ee7\u627f\u81ea <code>Node</code>\u3002</li>
+</ul>
+<p><strong><code>nodeType: number</code></strong></p>
+<ul>
+<li>\u6c38\u8fdc\u662f\u6570\u5b57 <code>1</code>\u3002</li>
+</ul>
+<p><strong><code>type: string</code></strong></p>
+<ul>
+<li>\u548c\u6784\u9020\u51fd\u6570\u91cc\u7684 <code>type</code> \u4e00\u81f4\u3002</li>
+</ul>
+<p><strong><code>attr: Object</code></strong></p>
+<ul>
+<li>\u5f53\u524d\u7ed3\u70b9\u7684\u6240\u6709\u7279\u6027\u7684\u952e\u503c\u5bf9\u3002\u63a8\u8350\u901a\u8fc7 <code>setAttr()</code> \u65b9\u6cd5\u8fdb\u884c\u4fee\u6539\uff0c\u800c\u4e0d\u8981\u76f4\u63a5\u4fee\u6539\u8fd9\u91cc\u7684\u5bf9\u8c61\u3002</li>
+</ul>
+<p><strong><code>style: Object</code></strong></p>
+<ul>
+<li>\u5f53\u524d\u7ed3\u70b9\u7684\u6240\u6709\u6837\u5f0f\u7684\u952e\u503c\u5bf9\u3002\u63a8\u8350\u901a\u8fc7 <code>setStyle()</code> \u65b9\u6cd5\u8fdb\u884c\u4fee\u6539\uff0c\u800c\u4e0d\u8981\u76f4\u63a5\u4fee\u6539\u8fd9\u91cc\u7684\u5bf9\u8c61\u3002</li>
+</ul>
+<p><strong><code>event: Object</code></strong></p>
+<ul>
+<li>\u5f53\u524d\u7ed3\u70b9\u7684\u6240\u6709\u4e8b\u4ef6\u7ed1\u5b9a\u3002\u6bcf\u4e2a\u4e8b\u4ef6\u7c7b\u578b\u5bf9\u5e94\u4e00\u4e2a\u4e8b\u4ef6\u53e5\u67c4\u65b9\u6cd5\u3002\u63a8\u8350\u901a\u8fc7 <code>addEvent()</code> / <code>removeEvent()</code> \u65b9\u6cd5\u8fdb\u884c\u4fee\u6539\uff0c\u800c\u4e0d\u8981\u76f4\u63a5\u4fee\u6539\u8fd9\u91cc\u7684\u5bf9\u8c61\u3002</li>
+</ul>
+<p><strong><code>toJSON(): Object</code></strong></p>
+<ul>
+<li>\u8fd4\u56de\u63cf\u8ff0\u8be5\u5143\u7d20\u7ed3\u70b9\u7684\u4e00\u6bb5 JSON \u5bf9\u8c61\uff0c\u5f62\u5982\uff1a<code>{ref: string, type: string, attr: Object, style: Object, event: Array(string), children: Array}</code>\u3002</li>
+</ul>
+<h2 id="Comment-\u7c7b-\u7ee7\u627f\u81ea-Node"><a href="#Comment-\u7c7b-\u7ee7\u627f\u81ea-Node" class="headerlink" title="Comment \u7c7b \u7ee7\u627f\u81ea Node"></a><code>Comment</code> \u7c7b <small>\u7ee7\u627f\u81ea <code>Node</code></small></h2><h3 id="\u6784\u9020\u51fd\u6570-3"><a href="#\u6784\u9020\u51fd\u6570-3" class="headerlink" title="\u6784\u9020\u51fd\u6570"></a>\u6784\u9020\u51fd\u6570</h3><p><strong><code>new Comment(value: string)</code></strong></p>
+<h3 id="\u53ea\u8bfb\u6210\u5458\u53d8\u91cf\u6216\u65b9\u6cd5-2"><a href="#\u53ea\u8bfb\u6210\u5458\u53d8\u91cf\u6216\u65b9\u6cd5-2" class="headerlink" title="\u53ea\u8bfb\u6210\u5458\u53d8\u91cf\u6216\u65b9\u6cd5"></a>\u53ea\u8bfb\u6210\u5458\u53d8\u91cf\u6216\u65b9\u6cd5</h3><p><strong><code>ref</code>, <code>nextSibling</code>, <code>previousSibling</code>, <code>parentNode</code></strong></p>
+<ul>
+<li>\u7ee7\u627f\u81ea <code>Node</code>\u3002</li>
+</ul>
+<p><strong><code>nodeType: number</code></strong></p>
+<ul>
+<li>\u6c38\u8fdc\u662f\u6570\u5b57 <code>8</code>\u3002</li>
+</ul>
+<p><strong><code>type: string</code></strong></p>
+<ul>
+<li>\u6c38\u8fdc\u662f\u5b57\u7b26\u4e32 <code>'comment'</code></li>
+</ul>
+<p><strong><code>value: string</code></strong></p>
+<ul>
+<li>\u548c\u6784\u9020\u51fd\u6570\u91cc\u7684 <code>value</code> \u4e00\u81f4\u3002</li>
+</ul>
+<p><strong><code>toJSON(): Object</code></strong></p>
+<ul>
+<li>\u8fd4\u56de\u63cf\u8ff0\u8be5\u6ce8\u91ca\u7ed3\u70b9\u7684\u4e00\u6bb5 JSON \u5bf9\u8c61\uff0c\u5f62\u5982\uff1a<code><!-- value --></code>\u3002</li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/native-dom-api.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/native-dom-api.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/path.html
----------------------------------------------------------------------
diff --git a/content/cn/references/path.html b/content/cn/references/path.html
new file mode 100644
index 0000000..e545d90
--- /dev/null
+++ b/content/cn/references/path.html
@@ -0,0 +1,1335 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Path (\u82f1) | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Pathv0.9+
+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
+LocalWeex SDK pro">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Path (\u82f1)">
+<meta property="og:url" content="https://weex.apache.org/cn/references/path.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Pathv0.9+
+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
+LocalWeex SDK pro">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.912Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Path (\u82f1)">
+<meta name="twitter:description" content="Pathv0.9+
+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
+LocalWeex SDK pro">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link current ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link current ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ Path (\u82f1)
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.912Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="Path"><a href="#Path" class="headerlink" title="Path"></a>Path</h1><p><span class="weex-version">v0.9+</span></p>
+<p>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. </p>
+<h2 id="Schemes"><a href="#Schemes" class="headerlink" title="Schemes"></a>Schemes</h2><ul>
+<li><p>Local<br>Weex SDK provide <code>local</code> scheme to access resources packaged with application, and of cource, it\u2019s not working in the HTML5 runtime.<br>Currently, developers can use this scheme with <code>image</code> and text\u2019s font file location. </p>
+<ul>
+<li>In iOS, it\u2019s always locate file in \u2018bundle resources\u2019. For example, a <code>image</code> component with <code>local:///app_icon</code> will load image file named \u2018app_icon\u2019 in bundle resouce, and font file work in the same way. </li>
+<li>In Android, image component will load from \u2018drawable\u2019 resource folder like \u2018res/drawable-xxx\u2019. But load font file is different, android framework can not load font file from \u2018res\u2019, so SDK will load it from <code>asserts</code> folder.</li>
+</ul>
+</li>
+<li><p>HTTP/HTTPS<br>It\u2019s working in the same way as in web, Weex support these at very beginning. </p>
+</li>
+<li><p>File<br>Use <code>file</code> 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\u2019s running in different platform(iOS, Android) or not, the content will be totally different in another device, which is depend to the specific device.<br>So one possible case is getting the file url in runtime dynamically, which you can use it to diaplay a local disk image, or maybe upload it later.</p>
+</li>
+</ul>
+<h2 id="Relative-URI"><a href="#Relative-URI" class="headerlink" title="Relative URI"></a>Relative URI</h2><p><a href="https://www.w3.org/TR/html4/types.html#type-uri" target="_blank" rel="external">Like we do in HTML</a>, weex process \u2018relative URI\u2019 in the same way. The relative URI, which start with <code>/</code>,<code>.</code>,<code>..</code>,<code>//</code>, will resolve by the bunle url.<br>Means URL start with <code>/</code> will resolve to the root folder as bundle js file, <code>.</code> and <code>..</code> will resolve to current and parent folder, and <code>//</code> will resolve to same scheme bundle js have.</p>
+<h2 id="URI-Adapter"><a href="#URI-Adapter" class="headerlink" title="URI Adapter"></a>URI Adapter</h2><p>All the above is the default implementation, developers can extend or override these their own by providing a \u2018URI Adapter\u2019. Same as the other adapters, Custom adapter should be set before Weex SDK is initializing.</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/path.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/path.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[38/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/a.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/a.html b/content/cn/references/components/a.html
new file mode 100644
index 0000000..7039820
--- /dev/null
+++ b/content/cn/references/components/a.html
@@ -0,0 +1,1352 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><a> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;a&gt;&lt;a&gt; \u7ec4\u4ef6\u5b9a\u4e49\u4e86\u6307\u5411\u67d0\u4e2a\u9875\u9762\u7684\u4e00\u4e2a\u8d85\u94fe\u63a5. \u6b64\u7ec4\u4ef6\u7684\u4f5c\u7528\u548c\u7528\u6cd5\u4e0eHTML5\u4e2d\u7684 &lt;a&gt; \u975e\u5e38\u7c7b\u4f3c\uff0c\u533a\u522b\u5728\u4e8e Weex \u7684 &lt;a&gt; \u7ec4\u4ef6\u4e0d\u80fd\u76f4\u63a5\u5728\u91cc\u9762\u6dfb\u52a0\u6587\u672c\uff08\u5b57\u7b26\u4e32\uff09\uff0c\u5982\u679c\u8981\u5c55\u793a\u6587\u672c\uff0c\u5e94\u8be5\u6dfb\u52a0 &lt;text&gt; \u7ec4\u4ef6\u3002
+\u5b50\u7ec4\u4ef6\u6b64\u7ec4\u4ef6\u652f\u6301\u9664\u4e86\u81ea\u5df1\u5916\u7684\u6240\u6709 Weex \u7ec4\u4ef6\u4f5c\u4e3a\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+href {string}\uff1a\u5b9a\u4e49\u4e86\u8d85\u94fe\u63a5\u7684 UR">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<a>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/a.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;a&gt;&lt;a&gt; \u7ec4\u4ef6\u5b9a\u4e49\u4e86\u6307\u5411\u67d0\u4e2a\u9875\u9762\u7684\u4e00\u4e2a\u8d85\u94fe\u63a5. \u6b64\u7ec4\u4ef6\u7684\u4f5c\u7528\u548c\u7528\u6cd5\u4e0eHTML5\u4e2d\u7684 &lt;a&gt; \u975e\u5e38\u7c7b\u4f3c\uff0c\u533a\u522b\u5728\u4e8e Weex \u7684 &lt;a&gt; \u7ec4\u4ef6\u4e0d\u80fd\u76f4\u63a5\u5728\u91cc\u9762\u6dfb\u52a0\u6587\u672c\uff08\u5b57\u7b26\u4e32\uff09\uff0c\u5982\u679c\u8981\u5c55\u793a\u6587\u672c\uff0c\u5e94\u8be5\u6dfb\u52a0 &lt;text&gt; \u7ec4\u4ef6\u3002
+\u5b50\u7ec4\u4ef6\u6b64\u7ec4\u4ef6\u652f\u6301\u9664\u4e86\u81ea\u5df1\u5916\u7684\u6240\u6709 Weex \u7ec4\u4ef6\u4f5c\u4e3a\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+href {string}\uff1a\u5b9a\u4e49\u4e86\u8d85\u94fe\u63a5\u7684 UR">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.842Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<a>">
+<meta name="twitter:description" content="&lt;a&gt;&lt;a&gt; \u7ec4\u4ef6\u5b9a\u4e49\u4e86\u6307\u5411\u67d0\u4e2a\u9875\u9762\u7684\u4e00\u4e2a\u8d85\u94fe\u63a5. \u6b64\u7ec4\u4ef6\u7684\u4f5c\u7528\u548c\u7528\u6cd5\u4e0eHTML5\u4e2d\u7684 &lt;a&gt; \u975e\u5e38\u7c7b\u4f3c\uff0c\u533a\u522b\u5728\u4e8e Weex \u7684 &lt;a&gt; \u7ec4\u4ef6\u4e0d\u80fd\u76f4\u63a5\u5728\u91cc\u9762\u6dfb\u52a0\u6587\u672c\uff08\u5b57\u7b26\u4e32\uff09\uff0c\u5982\u679c\u8981\u5c55\u793a\u6587\u672c\uff0c\u5e94\u8be5\u6dfb\u52a0 &lt;text&gt; \u7ec4\u4ef6\u3002
+\u5b50\u7ec4\u4ef6\u6b64\u7ec4\u4ef6\u652f\u6301\u9664\u4e86\u81ea\u5df1\u5916\u7684\u6240\u6709 Weex \u7ec4\u4ef6\u4f5c\u4e3a\u5b50\u7ec4\u4ef6\u3002
+\u7279\u6027
+href {string}\uff1a\u5b9a\u4e49\u4e86\u8d85\u94fe\u63a5\u7684 UR">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link current "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link current "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <a>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.842Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-a-gt"><a href="#lt-a-gt" class="headerlink" title="<a>"></a><a></h1><p><code><a></code> \u7ec4\u4ef6\u5b9a\u4e49\u4e86\u6307\u5411\u67d0\u4e2a\u9875\u9762\u7684\u4e00\u4e2a\u8d85\u94fe\u63a5. \u6b64\u7ec4\u4ef6\u7684\u4f5c\u7528\u548c\u7528\u6cd5\u4e0eHTML5\u4e2d\u7684 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_blank" rel="external"><code><a></code></a> \u975e\u5e38\u7c7b\u4f3c\uff0c\u533a\u522b\u5728\u4e8e Weex \u7684 <code><a></code> \u7ec4\u4ef6<strong>\u4e0d\u80fd</strong>\u76f4\u63a5\u5728\u91cc\u9762\u6dfb\u52a0\u6587\u672c\uff08\u5b57\u7b26\u4e32\uff09\uff0c\u5982\u679c\u8981\u5c55\u793a\u6587\u672c\uff0c\u5e94\u8be5\u6dfb\u52a0 <code><text></code> \u7ec4\u4ef6\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p>\u6b64\u7ec4\u4ef6\u652f\u6301\u9664\u4e86\u81ea\u5df1\u5916\u7684\u6240\u6709 Weex \u7ec4\u4ef6\u4f5c\u4e3a\u5b50\u7ec4\u4ef6\u3002</p>
+<h2 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h2><ul>
+<li><code>href {string}</code>\uff1a\u5b9a\u4e49\u4e86\u8d85\u94fe\u63a5\u7684 URL\u3002</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><p><code><a></code> \u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f\u3002</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a>\u3002</p>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><p><code><a></code> \u652f\u6301\u6240\u6709\u901a\u7528\u4e8b\u4ef6\u3002</p>
+<ul>
+<li><code>click</code><br><strong>\u6ce8\u610f\uff1a</strong>\u6211\u4eec\u4e0d\u80fd\u4fdd\u8bc1 <code>click</code> \u4e8b\u4ef6\u548c <code>href</code> \u8df3\u8f6c\u7684\u6267\u884c\u987a\u5e8f\u3002\u5efa\u8bae\u4e0d\u8981\u4f7f\u7528 <code>click</code> \u4e8b\u4ef6\u6765\u5904\u7406 <code>href</code> \u8df3\u8f6c\u524d\u7684\u903b\u8f91\u5904\u7406\u3002</li>
+<li><code>longpress</code></li>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a>\u3002</p>
+<h2 id="\u7ea6\u675f"><a href="#\u7ea6\u675f" class="headerlink" title="\u7ea6\u675f"></a>\u7ea6\u675f</h2><ol>
+<li><p><strong>\u4e0d\u80fd</strong>\u76f4\u63a5\u5728 <code><a></code> \u4e2d\u6dfb\u52a0\u6587\u672c\u3002<br>\u9519\u8bef\u793a\u4f8b\uff0c\u201cclick\u201d \u65e0\u6cd5\u88ab\u6b63\u5e38\u6e32\u67d3\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://dotwe.org/raw/dist/a468998152ee680413588c38bd61c29e.js"</span>></span></div><div class="line"> click</div><div class="line"> <span class="tag"></<span class="name">a</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"><span class="
selector-class">.wrapper</span> {</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line">}</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+</li>
+</ol>
+<p><a href="http://dotwe.org/0a22d65138691a208e3fb1f8f6392b38" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<ol>
+<li>\u8bf7\u4e0d\u8981\u4e3a <code><a></code> \u6dfb\u52a0 <code>click</code> \u4e8b\u4ef6\u3002\u6211\u4eec\u4e0d\u80fd\u786e\u4fdd <code>click</code> \u4e8b\u4ef6\u548c <code>href</code> \u8df3\u8f6c\u7684\u6267\u884c\u987a\u5e8f\u3002</li>
+</ol>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">class</span>=<span class="string">"button"</span> <span class="attr">href</span>=<span class="string">"http://dotwe.org/raw/dist/3e0e40f9ddad79f98cd236753965ffd8.js"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span>></span>Jump<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">a</span>></span></div><div
class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.button</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">450px</span>;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">150px</sp
an>;</div><div class="line"> <span class="attribute">padding-top</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">padding-bottom</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#DDDDDD</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#F5F5F5</span></div><div class="line"> }</div><div class="line"> <span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">60px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#666666</span>;</div><div class="line"> <span class="attribute">text-align</
span>: center;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/a.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/a.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/a.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/cell.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/cell.html b/content/cn/references/components/cell.html
new file mode 100644
index 0000000..a4c2693
--- /dev/null
+++ b/content/cn/references/components/cell.html
@@ -0,0 +1,1349 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><cell> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;cell&gt;\u7528\u4e8e\u5b9a\u4e49\u5217\u8868\u4e2d\u7684\u5b50\u5217\u8868\u9879\uff0c\u7c7b\u4f3c\u4e8e HTML \u4e2d\u7684 ul \u4e4b\u4e8e li\u3002Weex \u4f1a\u5bf9 &lt;cell&gt; \u8fdb\u884c\u9ad8\u6548\u7684\u5185\u5b58\u56de\u6536\u4ee5\u8fbe\u5230\u66f4\u597d\u7684\u6027\u80fd\uff0c\u8be5\u7ec4\u4ef6\u5fc5\u987b\u4f5c\u4e3a&lt;list&gt; \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6, \u8fd9\u662f\u4e3a\u4e86\u4f18\u5316\u6eda\u52a8\u65f6\u7684\u6027\u80fd\u3002
+\u5b50\u7ec4\u4ef6\u652f\u6301\u6240\u6709 Weex \u7684\u7ec4\u4ef6\u4f5c\u4e3a\u5b83\u7684\u5b50\u7ec4\u4ef6\u3002
+\u6837\u5f0f\u6ce8\u610f\uff1a
+\u4f60\u4e0d\u80fd\u7ed9 &lt;cell&gt; \u8bbe\u5b9aflex\u503c\u3002 &lt;cell&gt;\u7684\u5bbd\u5ea6">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<cell>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/cell.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;cell&gt;\u7528\u4e8e\u5b9a\u4e49\u5217\u8868\u4e2d\u7684\u5b50\u5217\u8868\u9879\uff0c\u7c7b\u4f3c\u4e8e HTML \u4e2d\u7684 ul \u4e4b\u4e8e li\u3002Weex \u4f1a\u5bf9 &lt;cell&gt; \u8fdb\u884c\u9ad8\u6548\u7684\u5185\u5b58\u56de\u6536\u4ee5\u8fbe\u5230\u66f4\u597d\u7684\u6027\u80fd\uff0c\u8be5\u7ec4\u4ef6\u5fc5\u987b\u4f5c\u4e3a&lt;list&gt; \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6, \u8fd9\u662f\u4e3a\u4e86\u4f18\u5316\u6eda\u52a8\u65f6\u7684\u6027\u80fd\u3002
+\u5b50\u7ec4\u4ef6\u652f\u6301\u6240\u6709 Weex \u7684\u7ec4\u4ef6\u4f5c\u4e3a\u5b83\u7684\u5b50\u7ec4\u4ef6\u3002
+\u6837\u5f0f\u6ce8\u610f\uff1a
+\u4f60\u4e0d\u80fd\u7ed9 &lt;cell&gt; \u8bbe\u5b9aflex\u503c\u3002 &lt;cell&gt;\u7684\u5bbd\u5ea6">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.843Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<cell>">
+<meta name="twitter:description" content="&lt;cell&gt;\u7528\u4e8e\u5b9a\u4e49\u5217\u8868\u4e2d\u7684\u5b50\u5217\u8868\u9879\uff0c\u7c7b\u4f3c\u4e8e HTML \u4e2d\u7684 ul \u4e4b\u4e8e li\u3002Weex \u4f1a\u5bf9 &lt;cell&gt; \u8fdb\u884c\u9ad8\u6548\u7684\u5185\u5b58\u56de\u6536\u4ee5\u8fbe\u5230\u66f4\u597d\u7684\u6027\u80fd\uff0c\u8be5\u7ec4\u4ef6\u5fc5\u987b\u4f5c\u4e3a&lt;list&gt; \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6, \u8fd9\u662f\u4e3a\u4e86\u4f18\u5316\u6eda\u52a8\u65f6\u7684\u6027\u80fd\u3002
+\u5b50\u7ec4\u4ef6\u652f\u6301\u6240\u6709 Weex \u7684\u7ec4\u4ef6\u4f5c\u4e3a\u5b83\u7684\u5b50\u7ec4\u4ef6\u3002
+\u6837\u5f0f\u6ce8\u610f\uff1a
+\u4f60\u4e0d\u80fd\u7ed9 &lt;cell&gt; \u8bbe\u5b9aflex\u503c\u3002 &lt;cell&gt;\u7684\u5bbd\u5ea6">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link current "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link current "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <cell>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.843Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-cell-gt"><a href="#lt-cell-gt" class="headerlink" title="<cell>"></a><cell></h1><p>\u7528\u4e8e\u5b9a\u4e49\u5217\u8868\u4e2d\u7684\u5b50\u5217\u8868\u9879\uff0c\u7c7b\u4f3c\u4e8e HTML \u4e2d\u7684 <code>ul</code> \u4e4b\u4e8e <code>li</code>\u3002Weex \u4f1a\u5bf9 <code><cell></code> \u8fdb\u884c\u9ad8\u6548\u7684\u5185\u5b58\u56de\u6536\u4ee5\u8fbe\u5230\u66f4\u597d\u7684\u6027\u80fd\uff0c\u8be5\u7ec4\u4ef6\u5fc5\u987b\u4f5c\u4e3a<a href="./list.html"><code><list></code></a> \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6, \u8fd9\u662f\u4e3a\u4e86\u4f18\u5316\u6eda\u52a8\u65f6\u7684\u6027\u80fd\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p>\u652f\u6301\u6240\u6709 Weex \u7684\u7ec4\u4ef6\u4f5c\u4e3a\u5b83\u7684\u5b50\u7ec4\u4ef6\u3002</p>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><p><strong>\u6ce8\u610f\uff1a</strong></p>
+<p>\u4f60\u4e0d\u80fd\u7ed9 <code><cell></code> \u8bbe\u5b9a<code>flex</code>\u503c\u3002 <code><cell></code>\u7684\u5bbd\u5ea6\u7b49\u4e8e\u7236\u7ec4\u4ef6 <code><list></code> \u7684\u5bbd\u5ea6\uff0c\u5e76\u4e14 <code><cell></code> \u9ad8\u5ea6\u81ea\u9002\u5e94\u3002</p>
+<ul>
+<li><p>\u901a\u7528\u6837\u5f0f\uff1a\u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+</li>
+</ul>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><ul>
+<li><p>\u901a\u7528\u4e8b\u4ef6</p>
+<p>\u652f\u6301\u6240\u6709\u901a\u7528\u4e8b\u4ef6\uff1a</p>
+<ul>
+<li><code>click</code></li>
+<li><code>longpress</code></li>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a></p>
+</li>
+</ul>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">list</span> <span class="attr">class</span>=<span class="string">"list"</span> @<span class="attr">loadmore</span>=<span class="string">"fetch"</span> <span class="attr">loadmoreoffset</span>=<span class="string">"10"</span>></span></div><div class="line"> <span class="tag"><<span class="name">cell</span> <span class="attr">class</span>=<span class="string">"cell"</span> <span class="attr">v-for</span>=<span class="string">"num in lists"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel"</span>></span></div><div class="line"> <span class="tag"><<span class="nam
e">text</span> <span class="attr">class</span>=<span class="string">"text"</span>></span>{{num}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">cell</span>></span></div><div class="line"> <span class="tag"></<span class="name">list</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"> <span class="keyword">const</span> LOADMORE_COUNT = <span class="number">4</span></div><div class="line"></div><div class="line"> <span class="keyword"
>export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">lists</span>: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>]</div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> fetch (event) {</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'loadmore'</span>, <span class="attr">duration</span>: <span class="number">1</span> })</div><div class="line"></div><div class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</div><div class="line"> <span class="keyword">const</span> length
= <span class="keyword">this</span>.lists.length</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = length; i < length + LOADMORE_COUNT; ++i) {</div><div class="line"> <span class="keyword">this</span>.lists.push(i + <span class="number">1</span>)</div><div class="line"> }</div><div class="line"> }, <span class="number">800</span>)</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.panel</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">600px</span>;</div><div class="line"> <
span class="attribute">height</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">75px</span>;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">35px</span>;</div><div class="line"> <span class="attribute">margin-bottom</span>: <span class="number">35px</span>;</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="built_in">rgb</span>(162, 217, 192);</div><div class="line"> <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(162, 217, 192, 0.2);</div>
<div class="line"> }</div><div class="line"> <span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">50px</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/list.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/cell.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/cell.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[21/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/modules/stream.html
----------------------------------------------------------------------
diff --git a/content/cn/references/modules/stream.html b/content/cn/references/modules/stream.html
new file mode 100644
index 0000000..a157056
--- /dev/null
+++ b/content/cn/references/modules/stream.html
@@ -0,0 +1,1373 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>stream | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="stream\u6982\u8ff0\u4ee5\u4e0b\u4e3a stream \u76f8\u5173\u7684 API\uff0c\u7528\u4e8e\u5b9e\u73b0\u7f51\u7edc\u8bf7\u6c42\u3002
+APIfetch(options, callback[,progressCallback])\u53d1\u8d77\u7f51\u7edc\u8bf7\u6c42
+\u53c2\u6570
+options {Object}\uff1a\u8bf7\u6c42\u7684\u4e00\u4e9b\u9009\u9879
+
+method {string}\uff1aHTTP \u65b9\u6cd5 GET \u6216\u662f POST
+url {string}\uff1a\u8bf7\u6c42\u7684 URL
+headers {Object}\uff1aHTTP \u8bf7\u6c42">
+<meta property="og:type" content="website">
+<meta property="og:title" content="stream">
+<meta property="og:url" content="https://weex.apache.org/cn/references/modules/stream.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="stream\u6982\u8ff0\u4ee5\u4e0b\u4e3a stream \u76f8\u5173\u7684 API\uff0c\u7528\u4e8e\u5b9e\u73b0\u7f51\u7edc\u8bf7\u6c42\u3002
+APIfetch(options, callback[,progressCallback])\u53d1\u8d77\u7f51\u7edc\u8bf7\u6c42
+\u53c2\u6570
+options {Object}\uff1a\u8bf7\u6c42\u7684\u4e00\u4e9b\u9009\u9879
+
+method {string}\uff1aHTTP \u65b9\u6cd5 GET \u6216\u662f POST
+url {string}\uff1a\u8bf7\u6c42\u7684 URL
+headers {Object}\uff1aHTTP \u8bf7\u6c42">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.909Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="stream">
+<meta name="twitter:description" content="stream\u6982\u8ff0\u4ee5\u4e0b\u4e3a stream \u76f8\u5173\u7684 API\uff0c\u7528\u4e8e\u5b9e\u73b0\u7f51\u7edc\u8bf7\u6c42\u3002
+APIfetch(options, callback[,progressCallback])\u53d1\u8d77\u7f51\u7edc\u8bf7\u6c42
+\u53c2\u6570
+options {Object}\uff1a\u8bf7\u6c42\u7684\u4e00\u4e9b\u9009\u9879
+
+method {string}\uff1aHTTP \u65b9\u6cd5 GET \u6216\u662f POST
+url {string}\uff1a\u8bf7\u6c42\u7684 URL
+headers {Object}\uff1aHTTP \u8bf7\u6c42">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link current ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link current ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ stream
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.909Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="stream"><a href="#stream" class="headerlink" title="stream"></a>stream</h1><h2 id="\u6982\u8ff0"><a href="#\u6982\u8ff0" class="headerlink" title="\u6982\u8ff0"></a>\u6982\u8ff0</h2><p>\u4ee5\u4e0b\u4e3a stream \u76f8\u5173\u7684 API\uff0c\u7528\u4e8e\u5b9e\u73b0\u7f51\u7edc\u8bf7\u6c42\u3002</p>
+<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><h3 id="fetch-options-callback-progressCallback"><a href="#fetch-options-callback-progressCallback" class="headerlink" title="fetch(options, callback[,progressCallback])"></a><code>fetch(options, callback[,progressCallback])</code></h3><p>\u53d1\u8d77\u7f51\u7edc\u8bf7\u6c42</p>
+<h4 id="\u53c2\u6570"><a href="#\u53c2\u6570" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><p><code>options {Object}</code>\uff1a\u8bf7\u6c42\u7684\u4e00\u4e9b\u9009\u9879</p>
+<ul>
+<li><code>method {string}</code>\uff1aHTTP \u65b9\u6cd5 <code>GET</code> \u6216\u662f <code>POST</code></li>
+<li><code>url {string}</code>\uff1a\u8bf7\u6c42\u7684 URL</li>
+<li><code>headers {Object}</code>\uff1aHTTP \u8bf7\u6c42\u5934</li>
+<li><code>type {string}</code>\uff1a\u54cd\u5e94\u7c7b\u578b, <code>json</code>,<code>text</code> \u6216\u662f <code>jsonp</code> {\u5728\u539f\u751f\u5b9e\u73b0\u4e2d\u5176\u5b9e\u4e0e json \u76f8\u540c)</li>
+<li><p><code>body {string}</code>\uff1aHTTP \u8bf7\u6c42\u4f53\u3002</p>
+<p><strong>\u6ce8\u610f\uff1a</strong></p>
+<ul>
+<li><code>body</code> \u53c2\u6570\u4ec5\u652f\u6301 <code>string</code> \u7c7b\u578b\u7684\u53c2\u6570\uff0c\u8bf7\u52ff\u76f4\u63a5\u4f20\u9012 <code>JSON</code>\uff0c\u5fc5\u987b\u5148\u5c06\u5176\u8f6c\u4e3a\u5b57\u7b26\u4e32\u3002</li>
+<li><code>GET</code> \u8bf7\u6c42\u4e0d\u652f\u6301 <code>body</code> \u65b9\u5f0f\u4f20\u9012\u53c2\u6570\uff0c\u8bf7\u4f7f\u7528 url \u4f20\u53c2\u3002</li>
+</ul>
+</li>
+</ul>
+</li>
+<li><p><code>callback {Function}</code>\uff1a\u54cd\u5e94\u7ed3\u679c\u56de\u8c03\uff0c\u56de\u8c03\u51fd\u6570\u5c06\u6536\u5230\u5982\u4e0b\u7684 <code>response</code> \u5bf9\u8c61\uff1a</p>
+<ul>
+<li><code>status {number}</code>\uff1a\u8fd4\u56de\u7684\u72b6\u6001\u7801</li>
+<li><code>ok {boolean}</code>\uff1a\u5982\u679c\u72b6\u6001\u7801\u5728 200~299 \u4e4b\u95f4\u5c31\u4e3a\u771f\u3002</li>
+<li><code>statusText {string}</code>\uff1a\u72b6\u6001\u63cf\u8ff0\u6587\u672c</li>
+<li><code>data {Object | string}</code>: \u8fd4\u56de\u7684\u6570\u636e\uff0c\u5982\u679c\u8bf7\u6c42\u7c7b\u578b\u662f <code>json</code> \u548c <code>jsonp</code>\uff0c\u5219\u5b83\u5c31\u662f\u4e00\u4e2a object \uff0c\u5982\u679c\u4e0d\u662f\uff0c\u5219\u5b83\u5c31\u662f\u4e00\u4e2a string\u3002</li>
+<li><code>headers {Object}</code>\uff1a\u54cd\u5e94\u5934</li>
+</ul>
+</li>
+<li><code>progressCallback {Function}</code>\uff1a\u5173\u4e8e\u8bf7\u6c42\u72b6\u6001\u7684\u56de\u8c03\u3002 \u8fd9\u4e2a\u56de\u8c03\u51fd\u6570\u5c06\u5728\u8bf7\u6c42\u5b8c\u6210\u540e\u5c31\u88ab\u8c03\u7528:<ul>
+<li><code>readyState {number}</code>\uff1a\u5f53\u524d\u72b6\u6001<br>state:\u20191\u2019: \u8bf7\u6c42\u8fde\u63a5\u4e2d<br>opened:\u20192\u2019: \u8fd4\u56de\u54cd\u5e94\u5934\u4e2d<br>received:\u20193\u2019: \u6b63\u5728\u52a0\u8f7d\u8fd4\u56de\u6570\u636e</li>
+<li><code>status {number}</code>\uff1a\u54cd\u5e94\u72b6\u6001\u7801.</li>
+<li><code>length {number}</code>\uff1a\u5df2\u7ecf\u63a5\u53d7\u5230\u7684\u6570\u636e\u957f\u5ea6. \u4f60\u53ef\u4ee5\u4ece\u54cd\u5e94\u5934\u4e2d\u83b7\u53d6\u603b\u957f\u5ea6</li>
+<li><code>statusText {string}</code>\uff1a\u72b6\u6001\u6587\u672c</li>
+<li><code>headers {Object}</code>\uff1a\u54cd\u5e94\u5934</li>
+</ul>
+</li>
+</ul>
+<h3 id="\u6ce8\u610f"><a href="#\u6ce8\u610f" class="headerlink" title="\u6ce8\u610f"></a>\u6ce8\u610f</h3><ul>
+<li>\u9ed8\u8ba4 Content-Type \u662f \u2018application/x-www-form-urlencoded\u2019\u3002</li>
+<li>\u5982\u679c\u4f60\u9700\u8981\u901a\u8fc7 <code>POST</code> json \uff0c \u4f60\u9700\u8981\u5c06 Content-Type \u8bbe\u4e3a \u2018application/json\u2019\u3002</li>
+</ul>
+<h3 id="Example"><a href="#Example" class="headerlink" title="Example"></a>Example</h3><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"group"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span>></span>Weex Star :<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"count"</span>></span>{{weexStar}}<span class="tag
"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"group"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span>></span>Vue Star :<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"count"</span>></span>{{vueStar}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span
class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> stream = weex.requireModule(<span class="string">'stream'</span>)</div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">weexStar</span>: <span class="string">'unknown'</span>,</div><div class="line"> <span class="attr">vueStar</span>: <span class="string">'unknown'</span></div><div class="line"> }</div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> getStarCount (repo, callback) {</div>
<div class="line"> <span class="keyword">return</span> stream.fetch({</div><div class="line"> <span class="attr">method</span>: <span class="string">'GET'</span>,</div><div class="line"> <span class="attr">type</span>: <span class="string">'json'</span>,</div><div class="line"> <span class="attr">url</span>: <span class="string">'https://api.github.com/repos/'</span> + repo</div><div class="line"> }, callback)</div><div class="line"> }</div><div class="line"> },</div><div class="line"> created () {</div><div class="line"> <span class="keyword">this</span>.getStarCount(<span class="string">'alibaba/weex'</span>, res => {</div><div class="line"> <span class="keyword">this</span>.weexStar = res.ok ? res.data.stargazers_count : <span class="string">'(network error)'</span></div><div class="line"> })</div><div class="line"> <span class="keyword">this</span>.getStarCount(<span c
lass="string">'vuejs/vue'</span>, res => {</div><div class="line"> <span class="keyword">this</span>.vueStar = res.ok ? res.data.stargazers_count : <span class="string">'(network error)'</span></div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.group</span> {</div><div class="line"> <span class="attribute">f
lex-direction</span>: row;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">margin-bottom</span>: <span class="number">40px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.title</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">45px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#888888</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.count</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">45px</span>;</div><div class="line"> <span class="attribute">font-weight</span>: bold;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">12px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class
="number">#41B883</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/stream.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/modules/stream.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/modules/stream.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/modules/webview.html
----------------------------------------------------------------------
diff --git a/content/cn/references/modules/webview.html b/content/cn/references/modules/webview.html
new file mode 100644
index 0000000..4a4703b
--- /dev/null
+++ b/content/cn/references/modules/webview.html
@@ -0,0 +1,1339 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>webview | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="webview\u4e00\u7cfb\u5217\u7684 &lt;web&gt; \u7ec4\u4ef6\u64cd\u4f5c\u63a5\u53e3\u3002 \u6bd4\u5982 goBack\u3001goForward\u3001\u548c reload\u3002webview module \u4e0e &lt;web&gt; \u7ec4\u4ef6\u5171\u7528\u3002
+\u793a\u4f8b\u67e5\u770b \u7b80\u5355\u6d4f\u89c8\u5668 \uff0c\u4e00\u4e2a\u7ed3\u5408 &lt;web&gt; \u7ec4\u4ef6\u548c webview module \u7684\u793a\u4f8b\u3002
+APIgoBack(webElement)\u52a0\u8f7d\u5386\u53f2\u8bb0\u5f55\u91cc\u7684\u524d\u4e00\u4e2a\u8d44\u6e90\u5730\u5740\u3002
+\u53c2\u6570
+webElement">
+<meta property="og:type" content="website">
+<meta property="og:title" content="webview">
+<meta property="og:url" content="https://weex.apache.org/cn/references/modules/webview.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="webview\u4e00\u7cfb\u5217\u7684 &lt;web&gt; \u7ec4\u4ef6\u64cd\u4f5c\u63a5\u53e3\u3002 \u6bd4\u5982 goBack\u3001goForward\u3001\u548c reload\u3002webview module \u4e0e &lt;web&gt; \u7ec4\u4ef6\u5171\u7528\u3002
+\u793a\u4f8b\u67e5\u770b \u7b80\u5355\u6d4f\u89c8\u5668 \uff0c\u4e00\u4e2a\u7ed3\u5408 &lt;web&gt; \u7ec4\u4ef6\u548c webview module \u7684\u793a\u4f8b\u3002
+APIgoBack(webElement)\u52a0\u8f7d\u5386\u53f2\u8bb0\u5f55\u91cc\u7684\u524d\u4e00\u4e2a\u8d44\u6e90\u5730\u5740\u3002
+\u53c2\u6570
+webElement">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.909Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="webview">
+<meta name="twitter:description" content="webview\u4e00\u7cfb\u5217\u7684 &lt;web&gt; \u7ec4\u4ef6\u64cd\u4f5c\u63a5\u53e3\u3002 \u6bd4\u5982 goBack\u3001goForward\u3001\u548c reload\u3002webview module \u4e0e &lt;web&gt; \u7ec4\u4ef6\u5171\u7528\u3002
+\u793a\u4f8b\u67e5\u770b \u7b80\u5355\u6d4f\u89c8\u5668 \uff0c\u4e00\u4e2a\u7ed3\u5408 &lt;web&gt; \u7ec4\u4ef6\u548c webview module \u7684\u793a\u4f8b\u3002
+APIgoBack(webElement)\u52a0\u8f7d\u5386\u53f2\u8bb0\u5f55\u91cc\u7684\u524d\u4e00\u4e2a\u8d44\u6e90\u5730\u5740\u3002
+\u53c2\u6570
+webElement">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link current ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link current ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ webview
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.909Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="webview"><a href="#webview" class="headerlink" title="webview"></a><code>webview</code></h1><p>\u4e00\u7cfb\u5217\u7684 <code><web></code> \u7ec4\u4ef6\u64cd\u4f5c\u63a5\u53e3\u3002 \u6bd4\u5982 <code>goBack</code>\u3001<code>goForward</code>\u3001\u548c <code>reload</code>\u3002<code>webview</code> module \u4e0e <code><web></code> \u7ec4\u4ef6\u5171\u7528\u3002</p>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><p>\u67e5\u770b <a href="../components/web.html">\u7b80\u5355\u6d4f\u89c8\u5668</a> \uff0c\u4e00\u4e2a\u7ed3\u5408 <code><web></code> \u7ec4\u4ef6\u548c <code>webview</code> module \u7684\u793a\u4f8b\u3002</p>
+<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><h3 id="goBack-webElement"><a href="#goBack-webElement" class="headerlink" title="goBack(webElement)"></a><code>goBack(webElement)</code></h3><p>\u52a0\u8f7d\u5386\u53f2\u8bb0\u5f55\u91cc\u7684\u524d\u4e00\u4e2a\u8d44\u6e90\u5730\u5740\u3002</p>
+<h4 id="\u53c2\u6570"><a href="#\u53c2\u6570" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>webElement {Element}</code>\uff1a<code><web></code> \u7ec4\u4ef6\u5bf9\u8c61\u3002</li>
+</ul>
+<h3 id="goForward-webElement"><a href="#goForward-webElement" class="headerlink" title="goForward(webElement)"></a><code>goForward(webElement)</code></h3><p>\u52a0\u8f7d\u5386\u53f2\u8bb0\u5f55\u91cc\u7684\u4e0b\u4e00\u4e2a\u8d44\u6e90\u5730\u5740\u3002</p>
+<h4 id="\u53c2\u6570-1"><a href="#\u53c2\u6570-1" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>webElement {Element}</code>\uff1a<code><web></code> \u7ec4\u4ef6\u5bf9\u8c61\u3002</li>
+</ul>
+<h3 id="reload-webElement"><a href="#reload-webElement" class="headerlink" title="reload(webElement)"></a><code>reload(webElement)</code></h3><p>\u5237\u65b0\u5f53\u524d\u9875\u9762\u3002</p>
+<h4 id="\u53c2\u6570-2"><a href="#\u53c2\u6570-2" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>webElement {Element}</code>\uff1a<code><web></code> \u7ec4\u4ef6\u5bf9\u8c61\u3002</li>
+</ul>
+<p><em>\u6ce8\u610f\u4e8b\u9879\uff1a\u672a\u6765 <code><web></code> \u7ec4\u4ef6\u7684 <code>Element</code> \u5bf9\u8c61\u5c06\u4f1a\u652f\u6301\u76f4\u63a5\u8fd9\u4e9b\u65b9\u6cd5\uff0c\u5c4a\u65f6 <code>webview</code> module \u5c06\u4e0d\u518d\u9700\u8981</em></p>
+<h2 id="Example"><a href="#Example" class="headerlink" title="Example"></a>Example</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"group"</span>></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">class</span>=<span class="string">"input"</span> <span class="attr">ref</span>=<span class="string">"input"</span> <span class="attr">type</span>=<span class="string">"url"</span> <span class="attr">autofocus</span>=<span class="string">"false"</span> <span class="attr">value</span>=<span class="string">"https://m.taobao.com"</span>></sp
an><span class="tag"></<span class="name">input</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"group"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"loadURL"</span>></span>LoadURL<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"reload"</span>></span>reload<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div<
/span>></span></div><div class="line"> <span class="tag"><<span class="name">web</span> <span class="attr">ref</span>=<span class="string">"webview"</span> <span class="attr">:src</span>=<span class="string">"url"</span> <span class="attr">class</span>=<span class="string">"webview"</span> @<span class="attr">pagestart</span>=<span class="string">"start"</span> @<span class="attr">pagefinish</span>=<span class="string">"finish"</span> @<span class="attr">error</span>=<span class="string">"error"</span>></span><span class="tag"></<span class="name">web</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> webview = weex.requi
reModule(<span class="string">'webview'</span>)</div><div class="line"> <span class="keyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">url</span> : <span class="string">'https://m.alibaba.com'</span></div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> loadURL (event) {</div><div class="line"> <span class="keyword">this</span>.url = <span class="keyword">this</span>.$refs.input.value</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'load url:'</span> + <span class="keyword">thi
s</span>.url })</div><div class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'will go back.'</span>)</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'will go back'</span> })</div><div class="line"> webview.goBack(<span class="keyword">this</span>.$refs.webview)</div><div class="line"> }, <span class="number">10000</span>)</div><div class="line"> },</div><div class="line"> reload (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'will reload webview'</span>)</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'reload'</span> })</div><div class="line"> webview.reload(<span class="keyword">this</span>.$refs.web
view)</div><div class="line"> },</div><div class="line"> start (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'pagestart'</span>, event)</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'pagestart'</span> })</div><div class="line"> },</div><div class="line"> finish (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'pagefinish'</span>, event)</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'pagefinish'</span> })</div><div class="line"> },</div><div class="line"> finish (event) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'error'</span>, event)</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="str
ing">'error'</span> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.group</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: row;</div><div class="line"> <span class="attribute">justify-content</span>: space-around;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">20px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.input</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">600px</span>;</div><div class="line"> <span class="attribute">fo
nt-size</span>: <span class="number">36px</span>;</div><div class="line"> <span class="attribute">padding-top</span>: <span class="number">15px</span>;</div><div class="line"> <span class="attribute">padding-bottom</span>: <span class="number">15px</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#BBBBBB</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.button</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">225px</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#D3D3D3</span>;</div><div class="line"> <span class="at
tribute">padding-top</span>: <span class="number">15px</span>;</div><div class="line"> <span class="attribute">padding-bottom</span>: <span class="number">15px</span>;</div><div class="line"> <span class="attribute">margin-bottom</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">30px</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="selector-class">.webview</span> {</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">75px</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">600px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">750px</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>:
solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/web.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/modules/webview.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/modules/webview.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[22/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/modules/picker.html
----------------------------------------------------------------------
diff --git a/content/cn/references/modules/picker.html b/content/cn/references/modules/picker.html
new file mode 100644
index 0000000..e399053
--- /dev/null
+++ b/content/cn/references/modules/picker.html
@@ -0,0 +1,1388 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>picker | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="pickerv0.9+
+\u6982\u8ff0\u4ee5\u4e0b\u4e3a picker \u76f8\u5173\u7684 API\uff0c\u7528\u4e8e\u6570\u636e\u9009\u62e9\uff0c\u65e5\u671f\u9009\u62e9\uff0c\u65f6\u95f4\u9009\u62e9\u3002\uff08\u76ee\u524d H5 \u6682\u4e0d\u652f\u6301\u8be5\u6a21\u5757\uff09
+APIpick(options, callback[options])\u8c03\u7528\u5355\u9009 picker
+\u53c2\u6570
+options {Object}\uff1a\u8c03\u7528\u5355\u9009 picker \u9009\u9879
+
+index {number}\uff1a\u9ed8\u8ba4\u9009\u4e2d\u7684\u9009\u9879
+items {array}\uff1apicker \u6570\u636e\u6e90
+
+
+c">
+<meta property="og:type" content="website">
+<meta property="og:title" content="picker">
+<meta property="og:url" content="https://weex.apache.org/cn/references/modules/picker.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="pickerv0.9+
+\u6982\u8ff0\u4ee5\u4e0b\u4e3a picker \u76f8\u5173\u7684 API\uff0c\u7528\u4e8e\u6570\u636e\u9009\u62e9\uff0c\u65e5\u671f\u9009\u62e9\uff0c\u65f6\u95f4\u9009\u62e9\u3002\uff08\u76ee\u524d H5 \u6682\u4e0d\u652f\u6301\u8be5\u6a21\u5757\uff09
+APIpick(options, callback[options])\u8c03\u7528\u5355\u9009 picker
+\u53c2\u6570
+options {Object}\uff1a\u8c03\u7528\u5355\u9009 picker \u9009\u9879
+
+index {number}\uff1a\u9ed8\u8ba4\u9009\u4e2d\u7684\u9009\u9879
+items {array}\uff1apicker \u6570\u636e\u6e90
+
+
+c">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.907Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="picker">
+<meta name="twitter:description" content="pickerv0.9+
+\u6982\u8ff0\u4ee5\u4e0b\u4e3a picker \u76f8\u5173\u7684 API\uff0c\u7528\u4e8e\u6570\u636e\u9009\u62e9\uff0c\u65e5\u671f\u9009\u62e9\uff0c\u65f6\u95f4\u9009\u62e9\u3002\uff08\u76ee\u524d H5 \u6682\u4e0d\u652f\u6301\u8be5\u6a21\u5757\uff09
+APIpick(options, callback[options])\u8c03\u7528\u5355\u9009 picker
+\u53c2\u6570
+options {Object}\uff1a\u8c03\u7528\u5355\u9009 picker \u9009\u9879
+
+index {number}\uff1a\u9ed8\u8ba4\u9009\u4e2d\u7684\u9009\u9879
+items {array}\uff1apicker \u6570\u636e\u6e90
+
+
+c">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link current ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link current ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ picker
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.907Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="picker"><a href="#picker" class="headerlink" title="picker"></a>picker</h1><p><span class="weex-version">v0.9+</span></p>
+<h2 id="\u6982\u8ff0"><a href="#\u6982\u8ff0" class="headerlink" title="\u6982\u8ff0"></a>\u6982\u8ff0</h2><p>\u4ee5\u4e0b\u4e3a picker \u76f8\u5173\u7684 API\uff0c\u7528\u4e8e\u6570\u636e\u9009\u62e9\uff0c\u65e5\u671f\u9009\u62e9\uff0c\u65f6\u95f4\u9009\u62e9\u3002\uff08\u76ee\u524d H5 \u6682\u4e0d\u652f\u6301\u8be5\u6a21\u5757\uff09</p>
+<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><h3 id="pick-options-callback-options"><a href="#pick-options-callback-options" class="headerlink" title="pick(options, callback[options])"></a><code>pick(options, callback[options])</code></h3><p>\u8c03\u7528\u5355\u9009 picker</p>
+<h4 id="\u53c2\u6570"><a href="#\u53c2\u6570" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><p><code>options {Object}</code>\uff1a\u8c03\u7528\u5355\u9009 picker \u9009\u9879</p>
+<ul>
+<li><code>index {number}</code>\uff1a\u9ed8\u8ba4\u9009\u4e2d\u7684\u9009\u9879</li>
+<li><code>items {array}</code>\uff1apicker \u6570\u636e\u6e90</li>
+</ul>
+</li>
+<li><p><code>callback {function (ret)}</code>\uff1a\u6267\u884c\u5b8c\u8bfb\u53d6\u64cd\u4f5c\u540e\u7684\u56de\u8c03\u51fd\u6570\u3002<code>ret {Object}</code> \u4e3a <code>callback</code> \u51fd\u6570\u7684\u53c2\u6570\uff0c\u6709\u4e24\u4e2a\u5c5e\u6027\uff1a</p>
+<ul>
+<li><code>result {string}</code>\uff1a\u7ed3\u679c\u4e09\u79cd\u7c7b\u578b <code>success</code>, <code>cancel</code>, <code>error</code></li>
+<li><code>data {number}</code>\uff1a\u9009\u62e9\u7684\u9009\u9879,\u4ec5\u6210\u529f\u786e\u8ba4\u65f6\u5019\u5b58\u5728\u3002</li>
+</ul>
+</li>
+</ul>
+<h3 id="pickDate-options-callback-options"><a href="#pickDate-options-callback-options" class="headerlink" title="pickDate(options, callback[options])"></a><code>pickDate(options, callback[options])</code></h3><p>\u8c03\u7528 date picker</p>
+<h4 id="\u53c2\u6570-1"><a href="#\u53c2\u6570-1" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><p><code>options {Object}</code>\uff1a\u8c03\u7528 date picker \u9009\u9879</p>
+<ul>
+<li><code>value {string}</code>\uff1a\u5fc5\u9009\uff0cdate picker \u9009\u4e2d\u7684\u503c\uff0cdate \u7684\u5b57\u7b26\u4e32\u683c\u5f0f\u4e3a<code>yyyy-MM-dd</code></li>
+<li><code>max {string}</code>\uff1a\u53ef\u9009\uff0cdate \u7684\u6700\u5927\u503c</li>
+<li><code>min {string}</code>\uff1a\u53ef\u9009\uff0cdate \u7684\u6700\u5c0f\u503c</li>
+</ul>
+</li>
+<li><p><code>callback {function (ret)}</code>\uff1a\u6267\u884c\u5b8c\u8bfb\u53d6\u64cd\u4f5c\u540e\u7684\u56de\u8c03\u51fd\u6570\u3002<code>ret {Object}</code> \u4e3a <code>callback</code> \u51fd\u6570\u7684\u53c2\u6570\uff0c\u6709\u4e24\u4e2a\u5c5e\u6027\uff1a</p>
+<ul>
+<li><code>result {string}</code>\uff1a\u7ed3\u679c\u4e09\u79cd\u7c7b\u578b <code>success</code>, <code>cancel</code>, <code>error</code></li>
+<li><code>data {string}</code>\uff1a\u9009\u62e9\u7684\u503c date \u7684\u5b57\u7b26\uff0c\u683c\u5f0f\u4e3a <code>yyyy-MM-dd</code>, \u4ec5\u6210\u529f\u786e\u8ba4\u7684\u65f6\u5019\u5b58\u5728\u3002</li>
+</ul>
+</li>
+</ul>
+<h3 id="pickTime-options-callback-options"><a href="#pickTime-options-callback-options" class="headerlink" title="pickTime(options, callback[options])"></a><code>pickTime(options, callback[options])</code></h3><p>\u8c03\u7528 time picker</p>
+<h4 id="\u53c2\u6570-2"><a href="#\u53c2\u6570-2" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><p><code>options {Object}</code>\uff1a\u8c03\u7528 time picker \u9009\u9879</p>
+<ul>
+<li><code>value {string}</code>\uff1a\u5fc5\u9009\uff0ctime \u683c\u5f0f\u4e3a <code>HH:mm</code></li>
+</ul>
+</li>
+<li><p><code>callback {function (ret)}</code>\uff1a\u6267\u884c\u5b8c\u8bfb\u53d6\u64cd\u4f5c\u540e\u7684\u56de\u8c03\u51fd\u6570\u3002<code>ret {Object}</code> \u4e3a <code>callback</code> \u51fd\u6570\u7684\u53c2\u6570\uff0c\u6709\u4e24\u4e2a\u5c5e\u6027\uff1a</p>
+<ul>
+<li><code>result {string}</code>\uff1a\u7ed3\u679c\u4e09\u79cd\u7c7b\u578b <code>success</code>, <code>cancel</code>, <code>error</code></li>
+<li><code>data {string}</code>\uff1atime \u683c\u5f0f\u4e3a <code>HH:mm</code>, \u4ec5\u6210\u529f\u786e\u8ba4\u7684\u65f6\u5019\u5b58\u5728\u3002</li>
+</ul>
+</li>
+</ul>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"group"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"label"</span>></span>Time: <span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span>></span>{{value}}<span class="tag"></<span
class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"group"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"pickTime"</span>></span>Pick Time<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascr
ipt"></span></div><div class="line"> <span class="keyword">const</span> picker = weex.requireModule(<span class="string">'picker'</span>)</div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">value</span>: <span class="string">''</span></div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> pickTime () {</div><div class="line"> picker.pickTime({</div><div class="line"> <span class="attr">value</span>: <span class="keyword">this</span>.value</div><div class="line"> }, event => {</div><div class="line"> <span class="keyword">if</span> (event.result === <span class="string">'success'<
/span>) {</div><div class="line"> <span class="keyword">this</span>.value = event.data</div><div class="line"> }</div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.group</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: row;</div><div class="line">
<span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">margin-bottom</span>: <span class="number">40px</span>;</div><div class="line"> <span class="attribute">align-items</span>: center;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.label</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">40px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#888888</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.title</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">80px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.button</span> {</div><div class="line
"> <span class="attribute">font-size</span>: <span class="number">36px</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">280px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">padding-top</span>: <span class="number">25px</span>;</div><div class="line"> <span class="attribute">padding-bottom</span>: <span class="number">25px</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="built_in">rgb</span>(162, 217, 192);</div><div class="line"> <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(162,
217, 192, 0.2);</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/modules/picker.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/modules/picker.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/modules/storage.html
----------------------------------------------------------------------
diff --git a/content/cn/references/modules/storage.html b/content/cn/references/modules/storage.html
new file mode 100644
index 0000000..3903004
--- /dev/null
+++ b/content/cn/references/modules/storage.html
@@ -0,0 +1,1372 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>storage | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="storage \u672c\u5730\u5b58\u50a8v0.7+
+\u5907\u6ce8\uff1a0.7\u53ca\u4ee5\u4e0a\u7248\u672c\u53ef\u7528
+storage \u662f\u4e00\u4e2a\u5728\u524d\u7aef\u6bd4\u8f83\u5e38\u7528\u7684\u6a21\u5757\uff0c\u53ef\u4ee5\u5bf9\u672c\u5730\u6570\u636e\u8fdb\u884c\u5b58\u50a8\u3001\u4fee\u6539\u3001\u5220\u9664\uff0c\u5e76\u4e14\u8be5\u6570\u636e\u662f\u6c38\u4e45\u4fdd\u5b58\u7684\uff0c\u9664\u975e\u624b\u52a8\u6e05\u9664\u6216\u8005\u4ee3\u7801\u6e05\u9664\u3002\u4f46\u662f\uff0cstorage \u6a21\u5757\u6709\u4e00\u4e2a\u9650\u5236\u5c31\u662f\u6d4f\u89c8\u5668\u7aef\uff08H5\uff09\u53ea\u80fd\u5b58\u50a8\u5c0f\u4e8e5M\u7684\u6570\u636e\uff0c\u56e0\u4e3a\u5728 H5/Web \u7aef\u7684\u5b9e\u73b0\u662f\u91c7\u7528 HTML5 LocalStorage API\u3002\u800c Android \u548c iOS \u8fd9\u5757\u662f\u6ca1\u4ec0">
+<meta property="og:type" content="website">
+<meta property="og:title" content="storage">
+<meta property="og:url" content="https://weex.apache.org/cn/references/modules/storage.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="storage \u672c\u5730\u5b58\u50a8v0.7+
+\u5907\u6ce8\uff1a0.7\u53ca\u4ee5\u4e0a\u7248\u672c\u53ef\u7528
+storage \u662f\u4e00\u4e2a\u5728\u524d\u7aef\u6bd4\u8f83\u5e38\u7528\u7684\u6a21\u5757\uff0c\u53ef\u4ee5\u5bf9\u672c\u5730\u6570\u636e\u8fdb\u884c\u5b58\u50a8\u3001\u4fee\u6539\u3001\u5220\u9664\uff0c\u5e76\u4e14\u8be5\u6570\u636e\u662f\u6c38\u4e45\u4fdd\u5b58\u7684\uff0c\u9664\u975e\u624b\u52a8\u6e05\u9664\u6216\u8005\u4ee3\u7801\u6e05\u9664\u3002\u4f46\u662f\uff0cstorage \u6a21\u5757\u6709\u4e00\u4e2a\u9650\u5236\u5c31\u662f\u6d4f\u89c8\u5668\u7aef\uff08H5\uff09\u53ea\u80fd\u5b58\u50a8\u5c0f\u4e8e5M\u7684\u6570\u636e\uff0c\u56e0\u4e3a\u5728 H5/Web \u7aef\u7684\u5b9e\u73b0\u662f\u91c7\u7528 HTML5 LocalStorage API\u3002\u800c Android \u548c iOS \u8fd9\u5757\u662f\u6ca1\u4ec0">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.908Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="storage">
+<meta name="twitter:description" content="storage \u672c\u5730\u5b58\u50a8v0.7+
+\u5907\u6ce8\uff1a0.7\u53ca\u4ee5\u4e0a\u7248\u672c\u53ef\u7528
+storage \u662f\u4e00\u4e2a\u5728\u524d\u7aef\u6bd4\u8f83\u5e38\u7528\u7684\u6a21\u5757\uff0c\u53ef\u4ee5\u5bf9\u672c\u5730\u6570\u636e\u8fdb\u884c\u5b58\u50a8\u3001\u4fee\u6539\u3001\u5220\u9664\uff0c\u5e76\u4e14\u8be5\u6570\u636e\u662f\u6c38\u4e45\u4fdd\u5b58\u7684\uff0c\u9664\u975e\u624b\u52a8\u6e05\u9664\u6216\u8005\u4ee3\u7801\u6e05\u9664\u3002\u4f46\u662f\uff0cstorage \u6a21\u5757\u6709\u4e00\u4e2a\u9650\u5236\u5c31\u662f\u6d4f\u89c8\u5668\u7aef\uff08H5\uff09\u53ea\u80fd\u5b58\u50a8\u5c0f\u4e8e5M\u7684\u6570\u636e\uff0c\u56e0\u4e3a\u5728 H5/Web \u7aef\u7684\u5b9e\u73b0\u662f\u91c7\u7528 HTML5 LocalStorage API\u3002\u800c Android \u548c iOS \u8fd9\u5757\u662f\u6ca1\u4ec0">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link current ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link current ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ storage
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.908Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="storage-\u672c\u5730\u5b58\u50a8"><a href="#storage-\u672c\u5730\u5b58\u50a8" class="headerlink" title="storage \u672c\u5730\u5b58\u50a8"></a><code>storage</code> \u672c\u5730\u5b58\u50a8</h1><p><span class="weex-version">v0.7+</span></p>
+<p><strong>\u5907\u6ce8</strong>\uff1a0.7\u53ca\u4ee5\u4e0a\u7248\u672c\u53ef\u7528</p>
+<p><code>storage</code> \u662f\u4e00\u4e2a\u5728\u524d\u7aef\u6bd4\u8f83\u5e38\u7528\u7684\u6a21\u5757\uff0c\u53ef\u4ee5\u5bf9\u672c\u5730\u6570\u636e\u8fdb\u884c\u5b58\u50a8\u3001\u4fee\u6539\u3001\u5220\u9664\uff0c\u5e76\u4e14\u8be5\u6570\u636e\u662f\u6c38\u4e45\u4fdd\u5b58\u7684\uff0c\u9664\u975e\u624b\u52a8\u6e05\u9664\u6216\u8005\u4ee3\u7801\u6e05\u9664\u3002\u4f46\u662f\uff0c<code>storage</code> \u6a21\u5757\u6709\u4e00\u4e2a\u9650\u5236\u5c31\u662f\u6d4f\u89c8\u5668\u7aef\uff08H5\uff09\u53ea\u80fd\u5b58\u50a8\u5c0f\u4e8e5M\u7684\u6570\u636e\uff0c\u56e0\u4e3a\u5728 H5/Web \u7aef\u7684\u5b9e\u73b0\u662f\u91c7\u7528 <code>HTML5 LocalStorage API</code>\u3002\u800c Android \u548c iOS \u8fd9\u5757\u662f\u6ca1\u4ec0\u4e48\u9650\u5236\u7684\u3002<br> storage \u5e38\u7528\u5728\u4e00\u4e9b\u88ab\u7528\u6237\u7ecf\u5e38\u67e5\u8be2\uff0c\u4f46\u662f\u53c8\u4e0d\u9891\u7e41\u66f4\u65b0\u7684\u6570\u636e\uff0c\u6bd4\u5982\u641c\u7d22\u5386\u53f2\u3001\u7528\u6237\u7684\u8ba2\u5355\u5217\u8868\u7b49\u3002\u641c\u7d22\u5386\u53f2\u4e00\u822c\u60c5\u51b5\u90fd\u662f\u4f5c\u4e3a\u672c\u5730\u6570\u636e\u5b58\u50a8\u7684\uff0c\u56e0\u6b64\u4f7f\u7528 storage \u6bd4\u8f83\u5408\u9002\u3002\u800c\u7528\u6237\u8ba2\u5355\u5217\u8868\u662f\u9700\u8981\u672c\u5730\u5b58\u50a8\u548c\u670d\u52a1\u7aef\u5668\u68c0\u7d22\u914d\u5408\u7684\u573a\u666f\u3002\u5f53\u4e00\u4e2a\u7528\u6237\u4e0b\u5355\u540e\uff0c\u4f1a\u7ecf\u5e38\u67e5\u9605\u4e2a\u4eba\u7684\u8ba2\u5355\u5217\u8868\u3002\u4f46\u662f\uff0c\u8ba2\u5355\u7684\u5217\u8868\u6570\u636e\u4e0d\u662f\u9891\u7e41\u66f4\u65b0\u7684\uff0c\u5f80\u5f80\u53ea\u6709\u5728\u6536\u5230\u8d27\u54c1\u65f6\uff0c\u624d\u66f4\u65b0\u201c\u5df2\u7b7e\u6536\u201d\uff0c\u5176\u4f59\u5e73\u65f6\u7684\u72b6\u6001\u662f\u201c\u5df2\u53d1\u8d27\u201d\u3002\u56e0\u6b64\uff0c\u53ef\u4ee5\u4f7f\u7528 storage
\u50a8\u8ba2\u5355\u5217\u8868\uff0c\u53ef\u4ee5\u51cf\u5c11\u670d\u52a1\u5668\u7684\u538b\u529b\uff0c\u4f8b\u5982\u51cf\u5c11 SQL \u67e5\u8be2\u6216\u8005\u7f13\u5b58\u7684\u538b\u529b\u3002\u5f53\u7528\u6237\u67e5\u770b\u8ba2\u5355\u8be6\u60c5\u7684\u65f6\u5019\uff0c\u518d\u66f4\u65b0\u6570\u636e\u72b6\u6001\u3002</p>
+<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><p><code>storage</code> \u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u7684 API \u4f9b\u6211\u4eec\u8c03\u7528\u3002\u6211\u4eec\u53ea\u9700\u8981\u5f15\u5165\u8be5\u6a21\u5757\uff0c\u7136\u540e\u8c03\u7528\u5bf9\u5e94\u7684 API \u5373\u53ef\u3002</p>
+<h3 id="setItem-key-value-callback"><a href="#setItem-key-value-callback" class="headerlink" title="setItem(key, value, callback)"></a><code>setItem(key, value, callback)</code></h3><p>\u8be5\u65b9\u6cd5\u53ef\u4ee5\u901a\u8fc7\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u5c06\u6570\u636e\u5b58\u50a8\u5230\u672c\u5730\u3002\u540c\u65f6\u53ef\u4ee5\u901a\u8fc7\u8be5\u65b9\u6cd5\uff0c\u66f4\u65b0\u5df2\u6709\u7684\u6570\u636e\u3002</p>
+<h4 id="\u53c2\u6570"><a href="#\u53c2\u6570" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>key {string}</code>\uff1a\u8981\u5b58\u50a8\u7684\u952e\uff0c\u4e0d\u5141\u8bb8\u662f <code>""</code> \u6216 <code>null</code></li>
+<li><code>value {string}</code>\uff1a\u8981\u5b58\u50a8\u7684\u503c\uff0c\u4e0d\u5141\u8bb8\u662f <code>""</code> \u6216 <code>null</code></li>
+<li><code>callback {function (e)}</code>\uff1a\u6267\u884c\u64cd\u4f5c\u6210\u529f\u540e\u7684\u56de\u8c03<ul>
+<li><code>e.result</code>\uff1a\u8868\u793a\u8bbe\u7f6e\u662f\u5426\u6210\u529f\uff0c\u5982\u679c\u6210\u529f\u8fd4\u56de <code>"success"</code></li>
+<li><code>e.data</code>\uff1a<code>undefined</code> \u8868\u793a\u8bbe\u7f6e\u6210\u529f\uff0c<code>invalid_param</code> \u8868\u793a key/value \u4e3a <code>""</code> \u6216\u8005 <code>null</code></li>
+</ul>
+</li>
+</ul>
+<p>\u8fd9\u91cc\uff0c\u5bf9\u8fd4\u56de\u503c\u505a\u4e00\u4e2a\u7b80\u5355\u7684\u4ecb\u7ecd\uff1a</p>
+<p><code>e</code> \u5305\u542b\u4e24\u4e2a\u5c5e\u6027\uff1a<code>e.result</code> \u548c <code>e.data</code>\u3002\u5982\u679c <code>e.result</code> \u8fd4\u56de\u503c\u662f \u201csuccess\u201d\uff0c\u5219\u8bf4\u660e\u6210\u529f\u3002<code>e.data</code> \u8fd4\u56de <code>undefined</code> \u8868\u793a\u8bbe\u7f6e\u6210\u529f\uff0c\u8fd4\u56de <code>invalid_param</code> \u8868\u793a<code>key/value</code> \u4e3a \u201c\u201d \u6216\u8005 null\u3002\u56e0\u6b64\uff0c\u4f60\u53ef\u4ee5\u5224\u65ad\u4e24\u4e2a\u8fd4\u56de\u5224\u65ad\u662f\u5426\u63d2\u5165\u6210\u529f\u3002</p>
+<h3 id="getItem-key-callback"><a href="#getItem-key-callback" class="headerlink" title="getItem(key, callback)"></a><code>getItem(key, callback)</code></h3><p>\u4f20\u5165\u952e\u540d\u8fd4\u56de\u5bf9\u5e94\u7684\u952e\u503c</p>
+<h4 id="\u53c2\u6570-1"><a href="#\u53c2\u6570-1" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>key {string}</code>\uff1a\u8981\u83b7\u53d6\u7684\u503c\u7684\u540d\u79f0\uff0c\u4e0d\u5141\u8bb8\u662f <code>""</code> \u6216 <code>null</code></li>
+<li><code>callback {function (e)}</code>\uff1a\u6267\u884c\u64cd\u4f5c\u6210\u529f\u540e\u7684\u56de\u8c03<ul>
+<li><code>e.result</code>\uff1a\u8868\u793a\u8bbe\u7f6e\u662f\u5426\u6210\u529f\uff0c\u5982\u679c\u6210\u529f\u8fd4\u56de <code>"success"</code></li>
+<li><code>e.data</code>\uff1a\u83b7\u53d6\u5bf9\u5e94\u7684\u952e\u503c\u5b57\u7b26\u4e32\uff0c\u5982\u679c\u6ca1\u6709\u627e\u5230\u5219\u8fd4\u56de <code>undefined</code></li>
+</ul>
+</li>
+</ul>
+<h3 id="removeItem-key-callback"><a href="#removeItem-key-callback" class="headerlink" title="removeItem(key, callback)"></a><code>removeItem(key, callback)</code></h3><p>\u4f20\u5165\u4e00\u4e2a\u952e\u540d\u5c06\u4f1a\u5220\u9664\u672c\u5730\u5b58\u50a8\u4e2d\u5bf9\u5e94\u7684\u952e\u503c</p>
+<h4 id="\u53c2\u6570-2"><a href="#\u53c2\u6570-2" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>key {string}</code>\uff1a\u8981\u5220\u9664\u7684\u503c\u7684\u540d\u79f0\uff0c\u4e0d\u5141\u8bb8\u662f <code>""</code> \u6216 <code>null</code></li>
+<li><code>callback {function (e)}</code>\uff1a\u6267\u884c\u64cd\u4f5c\u6210\u529f\u540e\u7684\u56de\u8c03.<ul>
+<li><code>e.result</code>\uff1a\u8868\u793a\u5220\u9664\u662f\u5426\u6210\u529f\uff0c\u5982\u679c\u6210\u529f\u8fd4\u56de <code>"success"</code></li>
+<li><code>e.data</code>\uff1a<code>undefined</code> \u8868\u793a\u5220\u9664\u6210\u529f</li>
+</ul>
+</li>
+</ul>
+<h3 id="length-callback"><a href="#length-callback" class="headerlink" title="length(callback)"></a><code>length(callback)</code></h3><p>\u8fd4\u56de\u672c\u5730\u5b58\u50a8\u7684\u6570\u636e\u4e2d\u6240\u6709\u5b58\u50a8\u9879\u6570\u91cf\u7684\u6574\u6570</p>
+<h4 id="\u53c2\u6570-3"><a href="#\u53c2\u6570-3" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>callback {function (e)}</code>\uff1a\u6267\u884c\u64cd\u4f5c\u6210\u529f\u540e\u7684\u56de\u8c03<ul>
+<li><code>e.result</code>\uff1a\u8868\u793a\u8bbe\u7f6e\u662f\u5426\u6210\u529f\uff0c\u5982\u679c\u6210\u529f\u8fd4\u56de <code>"success"</code></li>
+<li><code>e.data</code>\uff1a\u5f53\u524d\u5df2\u5b58\u50a8\u9879\u7684\u6570\u91cf</li>
+</ul>
+</li>
+</ul>
+<h3 id="getAllKeys-callback"><a href="#getAllKeys-callback" class="headerlink" title="getAllKeys(callback)"></a><code>getAllKeys(callback)</code></h3><p>\u8fd4\u56de\u4e00\u4e2a\u5305\u542b\u5168\u90e8\u5df2\u5b58\u50a8\u9879\u952e\u540d\u7684\u6570\u7ec4</p>
+<h4 id="\u53c2\u6570-4"><a href="#\u53c2\u6570-4" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>callback {function (e)}</code>\uff1a\u6267\u884c\u64cd\u4f5c\u6210\u529f\u540e\u7684\u56de\u8c03\u3002<ul>
+<li><code>e.result</code>\uff1a\u8868\u793a\u8bbe\u7f6e\u662f\u5426\u6210\u529f\uff0c\u5982\u679c\u6210\u529f\u8fd4\u56de <code>"success"</code></li>
+<li><code>e.data</code>\uff1a\u6240\u6709\u952e\u540d\u7ec4\u6210\u7684\u6570\u7ec4</li>
+</ul>
+</li>
+</ul>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"list"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"group center"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel"</span>></span><span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span>></span>{{state}}<span class="tag"></<span class="name">text</span>></span><span class="tag"></<span class="name">div</span>></span
></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"group"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel"</span>></span><span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span> @<span class="attr">click</span>=<span class="string">"setItem"</span>></span>set<span class="tag"></<span class="name">text</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel"</span>></span><span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class
="string">"text"</span> @<span class="attr">click</span>=<span class="string">"getItem"</span>></span>get<span class="tag"></<span class="name">text</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel"</span>></span><span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span> @<span class="attr">click</span>=<span class="string">"removeItem"</span>></span>remove<span class="tag"></<span class="name">text</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel"</span>></span><span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string"
>"text"</span> @<span class="attr">click</span>=<span class="string">"getAll"</span>></span>all<span class="tag"></<span class="name">text</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> storage = weex.requireModule(<span class="string">'storage'</span>)</div><div class="line"> <span class="keyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyw
ord">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">keys</span>: <span class="string">'[]'</span>,</div><div class="line"> <span class="attr">length</span>: <span class="number">0</span>,</div><div class="line"> <span class="attr">state</span>: <span class="string">'----'</span></div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> setItem () {</div><div class="line"> storage.setItem(<span class="string">'name'</span>, <span class="string">'Hanks'</span>, event => {</div><div class="line"> <span class="keyword">this</span>.state = <span class="string">'set success'</span></div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'set success'</span>)</di
v><div class="line"> })</div><div class="line"> },</div><div class="line"> getItem () {</div><div class="line"> storage.getItem(<span class="string">'name'</span>, event => {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'get value:'</span>, event.data)</div><div class="line"> <span class="keyword">this</span>.state = <span class="string">'value: '</span> + event.data</div><div class="line"> })</div><div class="line"> },</div><div class="line"> removeItem () {</div><div class="line"> storage.removeItem(<span class="string">'name'</span>, event => {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'delete value:'</span>, event.data)</div><div class="line"> <span class="keyword">this</span>.state = <span class="string">'deleted'</span></div><div class="line"> })</div>
<div class="line"> },</div><div class="line"> getAll () {</div><div class="line"> storage.getAllKeys(<span class="function"><span class="params">event</span> =></span> {</div><div class="line"> <span class="comment">// modal.toast({ message: event.result })</span></div><div class="line"> <span class="keyword">if</span> (event.result === <span class="string">'success'</span>) {</div><div class="line"> modal.toast({</div><div class="line"> <span class="attr">message</span>: <span class="string">'props: '</span> + event.data.join(<span class="string">', '</span>)</div><div class="line"> })</div><div class="line"> }</div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="li
ne"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.panel</span> {</div><div class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="built_in">rgb</span>(162, 217, 192);</div><div class="line"> <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(162, 217, 192, 0.2);</div><div class="line"> }</div><div class="line"> <span clas
s="selector-class">.group</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: row;</div><div class="line"> <span class="attribute">justify-content</span>: space-between;</div><div class="line"> <span class="attribute">width</span>: <span class="number">650px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">50px</span>;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">50px</span>;</div><div class="line"> <span class="attribute">margin-bottom</span>: <span class="number">50px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.center</span> {</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span
class="number">50px</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">padding-left</span>: <span class="number">25px</span>;</div><div class="line"> <span class="attribute">padding-right</span>: <span class="number">25px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.small</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">32px</span>;</div><div class="line"> <span class="attribute">padding-left</span>: <span class="number">35px</span>;</div><div class="line"> <span class="attribute">padding-right</span>: <span class="number">35px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="li
ne"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/storage.html">try it</a></p>
+<h2 id="\u5176\u5b83\u53c2\u8003"><a href="#\u5176\u5b83\u53c2\u8003" class="headerlink" title="\u5176\u5b83\u53c2\u8003"></a>\u5176\u5b83\u53c2\u8003</h2><ul>
+<li><a href="http://www.w3school.com.cn/html5/html_5_webstorage.asp" target="_blank" rel="external">W3school: html5 localStorage</a></li>
+<li><a href="https://github.com/alibaba/weex/blob/dev/examples/module/storage-demo.we" target="_blank" rel="external">storage \u6a21\u5757\u5b8c\u6574\u7684 Demo</a></li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/modules/storage.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/modules/storage.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[26/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/migration/migration-from-weex.html
----------------------------------------------------------------------
diff --git a/content/cn/references/migration/migration-from-weex.html b/content/cn/references/migration/migration-from-weex.html
new file mode 100644
index 0000000..4139534
--- /dev/null
+++ b/content/cn/references/migration/migration-from-weex.html
@@ -0,0 +1,1433 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672cWeex \u672c\u8eab\u6709\u4e00\u5957\u8bed\u6cd5\u89c4\u5219\uff0c\u548c Vue \u672c\u8eab\u5f88\u76f8\u4f3c\uff0c\u73b0\u5728 Weex \u4e0e Vue \u6709\u4e86\u5b98\u65b9\u5408\u4f5c\uff0c\u652f\u6301\u5c06 Vue 2.x \u4f5c\u4e3a\u5185\u7f6e\u7684\u524d\u7aef\u6846\u67b6\uff0c\u6211\u4eec\u4e5f\u63a8\u8350\u5927\u5bb6\u4f7f\u7528 Vue 2.x \u7684\u8bed\u6cd5\u5f00\u53d1\u539f\u751f\u5e94\u7528\u3002\u5bf9\u4e8e\u73b0\u5b58\u65e7\u7248\u7684 .we \u6587\u4ef6\uff0c\u5efa\u8bae\u5927\u5bb6\u5c06\u5176\u6539\u9020\u6210 Vue \u7248\u672c\u3002
+\u8981\u89e3\u51b3\u7684\u95ee\u9898
+\u5c06\u5185\u6838\u5207\u6362\u6210 Vue \u4e4b\u540e\uff0c\u539f\u5148\u57fa\u4e8e Weex \u8bed\u6cd5\u5f00\u53d1\u7684\u9879\u76ee\u5c06\u5982\u4f55\u8fc7\u6e21\u5230 V">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c">
+<meta property="og:url" content="https://weex.apache.org/cn/references/migration/migration-from-weex.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672cWeex \u672c\u8eab\u6709\u4e00\u5957\u8bed\u6cd5\u89c4\u5219\uff0c\u548c Vue \u672c\u8eab\u5f88\u76f8\u4f3c\uff0c\u73b0\u5728 Weex \u4e0e Vue \u6709\u4e86\u5b98\u65b9\u5408\u4f5c\uff0c\u652f\u6301\u5c06 Vue 2.x \u4f5c\u4e3a\u5185\u7f6e\u7684\u524d\u7aef\u6846\u67b6\uff0c\u6211\u4eec\u4e5f\u63a8\u8350\u5927\u5bb6\u4f7f\u7528 Vue 2.x \u7684\u8bed\u6cd5\u5f00\u53d1\u539f\u751f\u5e94\u7528\u3002\u5bf9\u4e8e\u73b0\u5b58\u65e7\u7248\u7684 .we \u6587\u4ef6\uff0c\u5efa\u8bae\u5927\u5bb6\u5c06\u5176\u6539\u9020\u6210 Vue \u7248\u672c\u3002
+\u8981\u89e3\u51b3\u7684\u95ee\u9898
+\u5c06\u5185\u6838\u5207\u6362\u6210 Vue \u4e4b\u540e\uff0c\u539f\u5148\u57fa\u4e8e Weex \u8bed\u6cd5\u5f00\u53d1\u7684\u9879\u76ee\u5c06\u5982\u4f55\u8fc7\u6e21\u5230 V">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.899Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c">
+<meta name="twitter:description" content="\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672cWeex \u672c\u8eab\u6709\u4e00\u5957\u8bed\u6cd5\u89c4\u5219\uff0c\u548c Vue \u672c\u8eab\u5f88\u76f8\u4f3c\uff0c\u73b0\u5728 Weex \u4e0e Vue \u6709\u4e86\u5b98\u65b9\u5408\u4f5c\uff0c\u652f\u6301\u5c06 Vue 2.x \u4f5c\u4e3a\u5185\u7f6e\u7684\u524d\u7aef\u6846\u67b6\uff0c\u6211\u4eec\u4e5f\u63a8\u8350\u5927\u5bb6\u4f7f\u7528 Vue 2.x \u7684\u8bed\u6cd5\u5f00\u53d1\u539f\u751f\u5e94\u7528\u3002\u5bf9\u4e8e\u73b0\u5b58\u65e7\u7248\u7684 .we \u6587\u4ef6\uff0c\u5efa\u8bae\u5927\u5bb6\u5c06\u5176\u6539\u9020\u6210 Vue \u7248\u672c\u3002
+\u8981\u89e3\u51b3\u7684\u95ee\u9898
+\u5c06\u5185\u6838\u5207\u6362\u6210 Vue \u4e4b\u540e\uff0c\u539f\u5148\u57fa\u4e8e Weex \u8bed\u6cd5\u5f00\u53d1\u7684\u9879\u76ee\u5c06\u5982\u4f55\u8fc7\u6e21\u5230 V">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link current ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link current ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.899Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u5982\u4f55\u5c06\u539f\u6709-Weex-\u9879\u76ee\u6539\u9020\u6210-Vue-\u7248\u672c"><a href="#\u5982\u4f55\u5c06\u539f\u6709-Weex-\u9879\u76ee\u6539\u9020\u6210-Vue-\u7248\u672c" class="headerlink" title="\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c"></a>\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</h1><p>Weex \u672c\u8eab\u6709\u4e00\u5957\u8bed\u6cd5\u89c4\u5219\uff0c\u548c Vue \u672c\u8eab\u5f88\u76f8\u4f3c\uff0c\u73b0\u5728 Weex \u4e0e Vue \u6709\u4e86\u5b98\u65b9\u5408\u4f5c\uff0c\u652f\u6301\u5c06 Vue 2.x \u4f5c\u4e3a\u5185\u7f6e\u7684\u524d\u7aef\u6846\u67b6\uff0c\u6211\u4eec\u4e5f\u63a8\u8350\u5927\u5bb6\u4f7f\u7528 Vue 2.x \u7684\u8bed\u6cd5\u5f00\u53d1\u539f\u751f\u5e94\u7528\u3002\u5bf9\u4e8e\u73b0\u5b58\u65e7\u7248\u7684 <code>.we</code> \u6587\u4ef6\uff0c\u5efa\u8bae\u5927\u5bb6\u5c06\u5176\u6539\u9020\u6210 Vue \u7248\u672c\u3002</p>
+<h2 id="\u8981\u89e3\u51b3\u7684\u95ee\u9898"><a href="#\u8981\u89e3\u51b3\u7684\u95ee\u9898" class="headerlink" title="\u8981\u89e3\u51b3\u7684\u95ee\u9898"></a>\u8981\u89e3\u51b3\u7684\u95ee\u9898</h2><blockquote>
+<p>\u5c06\u5185\u6838\u5207\u6362\u6210 Vue \u4e4b\u540e\uff0c\u539f\u5148\u57fa\u4e8e Weex \u8bed\u6cd5\u5f00\u53d1\u7684\u9879\u76ee\u5c06\u5982\u4f55\u8fc7\u6e21\u5230 Vue \uff1f</p>
+</blockquote>
+<p>\u9996\u5148\u9700\u8981\u660e\u786e\u4e00\u70b9\uff1aWeex \u539f\u6709\u7684\u524d\u7aef\u6846\u67b6\u4e5f\u4f1a\u7ee7\u7eed\u5b58\u5728\u4e8e WeexSDK \u4e2d\uff0c\u4f9d\u7136\u652f\u6301 <code>.we</code> \u6587\u4ef6\u683c\u5f0f\u7684\u5199\u6cd5\u3002</p>
+<p>\u6b64\u5916\uff0c\u7531\u4e8e <code>.we</code> \u548c <code>.vue</code> \u6587\u4ef6\u7684\u683c\u5f0f\u672c\u8eab\u5c31\u6bd4\u8f83\u63a5\u8fd1\uff0c\u6240\u4ee5\u8fc1\u79fb\u6210\u672c\u6bd4\u8f83\u5c0f\uff0c\u5efa\u8bae\u5927\u5bb6\u5c06\u73b0\u6709 <code>.we</code> \u683c\u5f0f\u7684\u6587\u4ef6\u90fd\u8f6c\u6362\u6210 <code>.vue</code> \u683c\u5f0f\u3002\u6211\u4eec\u4e5f\u63a8\u51fa\u4e86\u76f8\u5e94\u7684\u5de5\u5177\u548c\u65b9\u6cd5\u8f85\u52a9\u8fc1\u79fb\uff0c\u5728\u5185\u90e8\u4e5f\u6709\u5927\u91cf\u7684\u6210\u529f\u5b9e\u8df5\uff0c\u4e0b\u8fb9\u5c06\u91cd\u70b9\u4ecb\u7ecd\u4e00\u4e0b\u5c06 <code>.we</code> \u6587\u4ef6\u8f6c\u6210 <code>.vue</code> \u6587\u4ef6\u7684\u65b9\u6cd5\u3002</p>
+<h2 id="\u7b2c\u4e00\u6b65\uff0c\u501f\u52a9\u5de5\u5177\u5b9e\u73b0\u8bed\u6cd5\u8f6c\u6362"><a href="#\u7b2c\u4e00\u6b65\uff0c\u501f\u52a9\u5de5\u5177\u5b9e\u73b0\u8bed\u6cd5\u8f6c\u6362" class="headerlink" title="\u7b2c\u4e00\u6b65\uff0c\u501f\u52a9\u5de5\u5177\u5b9e\u73b0\u8bed\u6cd5\u8f6c\u6362"></a>\u7b2c\u4e00\u6b65\uff0c\u501f\u52a9\u5de5\u5177\u5b9e\u73b0\u8bed\u6cd5\u8f6c\u6362</h2><p>\u9996\u5148\u4ecb\u7ecd\u4e00\u4e2a\u5de5\u5177\uff1a <strong><a href="https://github.com/songsiqi/weex-vue-migration" target="_blank" rel="external">weex-vue-migration</a></strong> \uff0c\u5b83\u53ef\u4ee5\u81ea\u52a8\u5c06 <code>.we</code> \u6587\u4ef6\u8f6c\u4e3a <code>.vue</code> \u6587\u4ef6\uff0c\u7edd\u5927\u591a\u6570\u7684\u6a21\u677f\u8bed\u6cd5\u90fd\u80fd\u81ea\u52a8\u8f6c\u6362\uff0c\u8bed\u6cd5\u5dee\u5f02\u5982\u4e0b\uff1a</p>
+<table>
+<thead>
+<tr>
+<th></th>
+<th>Weex</th>
+<th>Vue</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>\u751f\u547d\u5468\u671f</td>
+<td><code>ready: function() {}</code></td>
+<td><code>mounted: function() {}</code></td>
+</tr>
+<tr>
+<td>\u6761\u4ef6\u6307\u4ee4</td>
+<td><code>if="{{!foo}}"</code></td>
+<td><code>v-if="!foo"</code></td>
+</tr>
+<tr>
+<td>\u5faa\u73af\u6307\u4ee4</td>
+<td><code>repeat="{{item in list}}"</code></td>
+<td><code>v-for="item in list"</code></td>
+</tr>
+<tr>
+<td>\u6837\u5f0f\u7c7b\u540d</td>
+<td><code>class="btn btn-{{type}}"</code></td>
+<td><code>:class="['btn', 'btn-' + type]"</code></td>
+</tr>
+<tr>
+<td>\u5185\u8054\u6837\u5f0f</td>
+<td><code>style="color:{{textColor}}"</code></td>
+<td><code>:style="{ color: textColor }"</code></td>
+</tr>
+<tr>
+<td>\u4e8b\u4ef6\u7ed1\u5b9a</td>
+<td><code>onclick="handler"</code></td>
+<td><code>@click="handler"</code></td>
+</tr>
+<tr>
+<td>\u539f\u751f\u4e8b\u4ef6</td>
+<td><code>onclick="xxx"</code></td>
+<td><code>@click.native="xxx"</code></td>
+</tr>
+<tr>
+<td>\u6570\u636e\u7ed1\u5b9a</td>
+<td><code>src="{{rightItemSrc}}"</code></td>
+<td><code>:src="rightItemSrc"</code></td>
+</tr>
+<tr>
+<td>\u5185\u5bb9/\u69fd</td>
+<td><code><content></content></code></td>
+<td><code><slot></slot></code></td>
+</tr>
+<tr>
+<td>\u6570\u636e\u521d\u59cb\u5316</td>
+<td><code>data: { value: 'x' }</code></td>
+<td><code>data: function() { return { value: 'x' } }</code></td>
+</tr>
+<tr>
+<td>\u6807\u7b7e ID</td>
+<td><code>id="xxx"</code></td>
+<td><code>ref="xxx"</code></td>
+</tr>
+<tr>
+<td>\u83b7\u53d6\u8282\u70b9</td>
+<td><code>this.$el('xxx')</code></td>
+<td><code>this.$refs.xxx</code></td>
+</tr>
+</tbody>
+</table>
+<p>\u60f3\u8981\u4e86\u89e3\u66f4\u591a\u8bed\u6cd5\u5dee\u5f02\u7684\u7ec6\u8282\uff0c\u53ef\u4ee5\u53c2\u8003\u8fd9\u7bc7\u6587\u7ae0\uff1a<a href="./difference.html">\u300aWeex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02\u300b</a> \u3002</p>
+<h3 id="\u4f7f\u7528\u65b9\u6cd5"><a href="#\u4f7f\u7528\u65b9\u6cd5" class="headerlink" title="\u4f7f\u7528\u65b9\u6cd5"></a>\u4f7f\u7528\u65b9\u6cd5</h3><p>\u9996\u5148\u5b89\u88c5\u5de5\u5177\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">npm install weex-vue-migration -g</div></pre></td></tr></table></figure>
+<p>\u8f6c\u6362\u6587\u4ef6\uff1a</p>
+<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">weex-vue-migrate demo.we</div></pre></td></tr></table></figure>
+<p>\u8f6c\u6362\u6210\u529f\u540e\uff0c\u5c06\u4f1a\u5728\u5f53\u524d\u76ee\u5f55\u4e0b\u751f\u6210 <code>demo.vue</code> \u6587\u4ef6\uff0c\u63a7\u5236\u53f0\u5c06\u4f1a\u6709\u5982\u4e0b\u8f93\u51fa\uff1a</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">[Success]: Migrate demo.we => demo.vue in 33ms</div><div class="line">Migration finished in 0.035s</div></pre></td></tr></table></figure>
+<p>\u9664\u4e86\u9010\u4e2a\u8f6c\u6362 <code>.we</code> \u6587\u4ef6\u4ee5\u5916\uff0c<code>weex-vue-migration</code> \u8fd8\u652f\u6301\u6279\u91cf\u8f6c\u6362\u6574\u4e2a\u76ee\u5f55\uff0c\u53c2\u8003\u5176<a href="https://github.com/songsiqi/weex-vue-migration/blob/master/README.md" target="_blank" rel="external">\u8bf4\u660e\u6587\u6863</a>\u53ef\u4ee5\u4e86\u89e3\u66f4\u8be6\u7ec6\u7684\u4f7f\u7528\u65b9\u6cd5\u3002</p>
+<h3 id="\u6ce8\u610f\u4e8b\u9879"><a href="#\u6ce8\u610f\u4e8b\u9879" class="headerlink" title="\u6ce8\u610f\u4e8b\u9879"></a>\u6ce8\u610f\u4e8b\u9879</h3><p>\u8f6c\u6362\u5de5\u5177\u5c06\u4e0d\u518d\u652f\u6301 Weex \u4e2d\u5e9f\u5f03\u7684\u8bed\u6cd5\uff0c\u5982\u679c\u4ee3\u7801\u4e2d\u6709\u5982\u4e0b\u5199\u6cd5\uff0c\u5efa\u8bae\u5148\u624b\u52a8\u4fee\u6539\u518d\u505a\u8f6c\u6362\u3002</p>
+<ol>
+<li>\u5ffd\u7565 <code>require('@weex-components')</code> \u8bed\u53e5\uff0c\u53ef\u4ee5\u901a\u8fc7 npm \u5305\u7684\u65b9\u5f0f\u5f15\u5165\u5916\u90e8\u7ec4\u4ef6\u3002</li>
+<li>\u65e0\u6cd5\u8f6c\u6362 <code>repeat="list"</code> \u5199\u6cd5\uff0c\u4ec5\u652f\u6301 <code>repeat="item in list"</code> \u683c\u5f0f\u3002</li>
+<li>\u4e0d\u652f\u6301\u8f6c\u6362 <code><script type="config"></script></code>\uff0c\u76ee\u524d Vue \u4e2d\u4e0d\u652f\u6301\u539f\u6709\u7684\u964d\u7ea7\u914d\u7f6e\u3002</li>
+</ol>
+<h2 id="\u7b2c\u4e8c\u6b65\uff0c\u624b\u52a8\u8c03\u6574\u4ee3\u7801\u7ec6\u8282"><a href="#\u7b2c\u4e8c\u6b65\uff0c\u624b\u52a8\u8c03\u6574\u4ee3\u7801\u7ec6\u8282" class="headerlink" title="\u7b2c\u4e8c\u6b65\uff0c\u624b\u52a8\u8c03\u6574\u4ee3\u7801\u7ec6\u8282"></a>\u7b2c\u4e8c\u6b65\uff0c\u624b\u52a8\u8c03\u6574\u4ee3\u7801\u7ec6\u8282</h2><p>\u6a21\u677f\u548c\u6837\u5f0f\u7684\u8f6c\u6362\u90fd\u53ef\u4ee5\u501f\u52a9\u5de5\u5177\u8f7b\u6613\u8f6c\u6362\u8fc7\u6765\uff0c<code><script></code> \u4e2d\u57fa\u672c\u7684\u8bed\u6cd5\u4e5f\u53ef\u4ee5\u8f6c\u6362\uff1b\u4f46\u662f\u7531\u4e8e javascript \u7684\u5199\u6cd5\u6bd4\u8f83\u7075\u6d3b\uff0c\u4ec5\u4ec5\u4f7f\u7528\u5de5\u5177\u505a\u8f6c\u6362\uff0c\u5e76\u4e0d\u4e00\u5b9a\u80fd\u5b8c\u7f8e\u8fc7\u6e21\u3002\u5de5\u5177\u53ea\u80fd\u5904\u7406\u8bed\u6cd5\u4f46\u662f\u7406\u89e3\u4e0d\u4e86\u4ee3\u7801\u4e2d\u7684\u903b\u8f91\uff0c\u5728 Weex \u548c Vue \u7684\u6846\u67b6\u7279\u6027\u5b58\u5728\u4e00\u4e9b\u5dee\u5f02\uff0c\u6709\u4e9b\u5dee\u5f02\u8fd8\u662f\u9700\u8981\u624b\u52a8\u4fee\u6539\u624d\u53ef\u4ee5\u751f\u6548\u3002</p>
+<blockquote>
+<p>\u63d0\u793a\uff1a\u5728\u4ee3\u7801\u4e2d\u4f7f\u7528\u7684\u201c\u9ed1\u79d1\u6280\u201d\u8d8a\u591a\uff0c\u9879\u76ee\u5c31\u8d8a\u96be\u4ee5\u8f6c\u6362\u3002</p>
+</blockquote>
+<h3 id="\u6837\u5f0f\u5355\u4f4d"><a href="#\u6837\u5f0f\u5355\u4f4d" class="headerlink" title="\u6837\u5f0f\u5355\u4f4d"></a>\u6837\u5f0f\u5355\u4f4d</h3><p>\u5728 <code>.we</code> \u6587\u4ef6\u5199\u6837\u5f0f\u65f6\uff0c\u5f00\u53d1\u8005\u901a\u5e38\u90fd\u4e0d\u5199\u957f\u5ea6\u5355\u4f4d\uff0c\u9ed8\u8ba4\u4f1a\u88ab\u89c6\u4e3a <code>px</code>\u3002\u5728\u65b0\u7684 Vue \u7248\u672c\u7684 Web \u6e32\u67d3\u5668\u4e2d\uff0c<code><style></code> \u4e2d\u7684\u6837\u5f0f\u5c06\u4f1a\u76f4\u63a5\u8f6c\u5316\u6210 CSS class\uff0c\u5982\u679c\u4e0d\u5199\u5355\u4f4d\u3001\u6d4f\u89c8\u5668\u5c06\u65e0\u6cd5\u6b63\u786e\u8bc6\u522b\uff0c\u4f1a\u5bfc\u81f4\u5728 Web \u7aef\u65e0\u6cd5\u6b63\u5e38\u6e32\u67d3\u3002Native \u73af\u5883\u4e2d\u4e0d\u53d7\u5f71\u54cd\u3002</p>
+<p>\u5c3d\u7ba1\u4e0d\u5f71\u54cd Native \u9875\u9762\u7684\u6e32\u67d3\uff0c\u4e5f\u5efa\u8bae\u7ed9\u6837\u5f0f\u957f\u5ea6\u52a0\u4e0a\u5355\u4f4d <code>px</code>\u3002</p>
+<h3 id="\u65e7\u6846\u67b6\u4e2d\u7684\u5185\u7f6e\u5c5e\u6027"><a href="#\u65e7\u6846\u67b6\u4e2d\u7684\u5185\u7f6e\u5c5e\u6027" class="headerlink" title="\u65e7\u6846\u67b6\u4e2d\u7684\u5185\u7f6e\u5c5e\u6027"></a>\u65e7\u6846\u67b6\u4e2d\u7684\u5185\u7f6e\u5c5e\u6027</h3><ul>
+<li><code>vm._app</code><ul>
+<li><code>vm._app.differ</code></li>
+<li><code>vm._app.doc</code></li>
+<li><code>vm._app.updateActions()</code></li>
+</ul>
+</li>
+</ul>
+<h3 id="\u4e8b\u4ef6\u6d3e\u53d1\u673a\u5236"><a href="#\u4e8b\u4ef6\u6d3e\u53d1\u673a\u5236" class="headerlink" title="\u4e8b\u4ef6\u6d3e\u53d1\u673a\u5236"></a>\u4e8b\u4ef6\u6d3e\u53d1\u673a\u5236</h3><ul>
+<li><code>$dispatch</code> \u3001<code>$broadcast</code> \u3001<code>$call</code> \u65b9\u6cd5\u5df2\u7ecf\u5e9f\u5f03\u3002</li>
+<li><code>$emit</code> \u884c\u4e3a\u4e0d\u4e00\u81f4\u3002</li>
+</ul>
+<p>\u53ef\u4ee5\u4f7f\u7528 Vuex \u7ba1\u7406\u6570\u636e\u72b6\u6001\u3002</p>
+<h3 id="\u76f4\u63a5\u64cd\u4f5c-Virtual-DOM"><a href="#\u76f4\u63a5\u64cd\u4f5c-Virtual-DOM" class="headerlink" title="\u76f4\u63a5\u64cd\u4f5c Virtual-DOM"></a>\u76f4\u63a5\u64cd\u4f5c Virtual-DOM</h3><p>Weex \u548c Vue \u4e2d\u7684 Virtual-DOM \u683c\u5f0f\u5e76\u4e0d\u76f8\u540c\uff0c\u5982\u679c\u4f60\u4f7f\u7528\u4e86 <code>this.$el('id')</code> \u83b7\u53d6\u4e86\u67d0\u4e2a\u7ec4\u4ef6\u7684 element \u4e4b\u540e\uff0c\u53c8\u4fee\u6539\u4e86\u5176\u4e2d\u7684\u67d0\u4e9b\u5c5e\u6027\u6216\u8005\u8c03\u7528\u4e86\u67d0\u4e9b\u65b9\u6cd5\uff0c\u8fd9\u4e9b\u64cd\u4f5c\u5728 Vue \u4e2d\u5f88\u96be\u627e\u5230\u76f4\u63a5\u7684\u5bf9\u5e94\u5199\u6cd5\u3002</p>
+<p>\u4ece\u53e6\u4e00\u4e2a\u89d2\u5ea6\u8bb2\uff0c\u6211\u4eec\u4e5f\u975e\u5e38\u4e0d\u5efa\u8bae\u5728 Weex \u6216 Vue \u9879\u76ee\u4e2d\u76f4\u63a5\u64cd\u4f5c Virtual-DOM\uff0c\u8fd9\u4e9b\u5199\u6cd5\u90fd\u5e94\u8be5\u4fee\u6539\u3002</p>
+<h2 id="\u8c03\u6574\u5f00\u53d1\u73af\u5883\u548c\u5de5\u5177"><a href="#\u8c03\u6574\u5f00\u53d1\u73af\u5883\u548c\u5de5\u5177" class="headerlink" title="\u8c03\u6574\u5f00\u53d1\u73af\u5883\u548c\u5de5\u5177"></a>\u8c03\u6574\u5f00\u53d1\u73af\u5883\u548c\u5de5\u5177</h2><p>\u5728\u6587\u4ef6\u8f6c\u6362\u5b8c\u6210\u540e\uff0c\u8fd8\u9700\u8981\u91cd\u65b0\u8c03\u6574\u4e00\u4e0b\u5f00\u53d1\u73af\u5883\u3002</p>
+<h3 id="\u6587\u4ef6\u7684\u7f16\u8bd1"><a href="#\u6587\u4ef6\u7684\u7f16\u8bd1" class="headerlink" title="\u6587\u4ef6\u7684\u7f16\u8bd1"></a>\u6587\u4ef6\u7684\u7f16\u8bd1</h3><p><code>weex-loader</code> \u540c\u65f6\u652f\u6301\u7f16\u8bd1 <code>.we</code> \u548c <code>.vue</code> \u6587\u4ef6\uff0c\u5982\u679c\u4f60\u4f7f\u7528\u7684\u662f <code>webpack</code> \u6765\u914d\u7f6e\u7f16\u8bd1\u73af\u5883\uff0c\u5c06\u4e0d\u9700\u8981\u505a\u4efb\u4f55\u6539\u53d8\u5c31\u80fd\u76f4\u63a5\u7f16\u8bd1 <code>.vue</code> \u6587\u4ef6\u3002</p>
+<p>\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0cVue \u672c\u8eab\u5c31\u662f\u4e00\u4e2a\u72ec\u7acb\u7684\u524d\u7aef\u6846\u67b6\uff0c\u4f7f\u7528 Vue \u7f16\u5199\u7684\u9879\u76ee\u5728 Web \u4e0a\u5b8c\u5168\u53ef\u4ee5\u4e0d\u4f9d\u8d56 Weex \u5bb9\u5668\u8fd0\u884c\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u9700\u8981\u914d\u7f6e\u57fa\u4e8e <code>vue-loader</code> \u7684\u7f16\u8bd1\u811a\u672c\u751f\u6210\u9002\u7528\u4e8e Web \u5e73\u53f0 js \u6587\u4ef6\uff1b\u7136\u540e\u5f15\u5165 Vue \u683c\u5f0f\u7684 Weex \u7ec4\u4ef6\u5e93\u5c31\u53ef\u4ee5\u5728 Web \u4e2d\u3002</p>
+<h3 id="\u8f85\u52a9\u5de5\u5177"><a href="#\u8f85\u52a9\u5de5\u5177" class="headerlink" title="\u8f85\u52a9\u5de5\u5177"></a>\u8f85\u52a9\u5de5\u5177</h3><p>Weex \u63d0\u4f9b\u4e86 <a href="https://github.com/weexteam/weex-toolkit" target="_blank" rel="external">weex-toolkit</a> \u7684\u811a\u624b\u67b6\u5de5\u5177\u6765\u8f85\u52a9\u5f00\u53d1\u548c\u8c03\u8bd5\u3001<a href="https://github.com/weexteam/weex-pack" target="_blank" rel="external">weex-pack</a> \u5b9e\u73b0\u6253\u5305\u539f\u751f\u5e94\u7528\uff1b\u540c\u6837\u5728 Vue \u4e2d\u4e5f\u6709 <a href="https://github.com/vuejs/vue-cli" target="_blank" rel="external">vue-cli</a> \u811a\u624b\u67b6\u5de5\u5177\u3002Weex \u548c Vue \u7684\u5de5\u5177\u4e92\u76f8\u505a\u4e86\u9002\u914d\uff0c\u5efa\u8bae\u5728\u521b\u5efa\u9879\u76ee\u548c\u5f00\u53d1 Vue \u9879\u76ee\u7684\u65f6\u5019\u4f7f\u7528 <code>vue-cli</code> \uff0c\u5728\u8c03\u8bd5\u65f6\u4f7f\u7528 <code>weex-toolkit</code>\uff0c\u5728\u6253\u5305\u539f\u751f\u5e94\u7528\u65f6\u4f7f\u7528 <code>weex-pack</code> \u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/migration/migration-from-weex.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/modules/animation.html
----------------------------------------------------------------------
diff --git a/content/cn/references/modules/animation.html b/content/cn/references/modules/animation.html
new file mode 100644
index 0000000..50b28d6
--- /dev/null
+++ b/content/cn/references/modules/animation.html
@@ -0,0 +1,1443 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>animation | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="animation \u52a8\u753b\u6d41\u7545\u4e14\u6709\u610f\u4e49\u7684\u52a8\u753b\u662f\u4e00\u4e2a\u5341\u5206\u6709\u6548\u7684\u63d0\u5347\u79fb\u52a8\u5e94\u7528\u7528\u6237\u4f53\u9a8c\u7684\u624b\u6bb5\uff0canimation \u6a21\u5757\u88ab\u7528\u4e8e\u5728\u7ec4\u4ef6\u4e0a\u6267\u884c\u52a8\u753b\u3002\u52a8\u753b\u53ef\u4ee5\u5bf9\u7ec4\u4ef6\u6267\u884c\u4e00\u7cfb\u5217\u7b80\u5355\u7684\u53d8\u6362 (\u4f4d\u7f6e\u3001\u5927\u5c0f\u3001\u65cb\u8f6c\u89d2\u5ea6\u3001\u80cc\u666f\u989c\u8272\u548c\u4e0d\u900f\u660e\u5ea6)\u3002\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u5982\u679c\u6709\u4e00\u4e2a &lt;image&gt; \u7ec4\u4ef6\uff0c\u901a\u8fc7\u52a8\u753b\u4f60\u53ef\u4ee5\u5bf9\u5176\u8fdb\u884c\u79fb\u52a8\u3001\u65cb\u8f6c\u3001\u62c9\u4f38\u6216\u6536\u7f29\u7b49\u52a8\u4f5c\u3002
+APItransition(el, options, callback)\u53c2">
+<meta property="og:type" content="website">
+<meta property="og:title" content="animation">
+<meta property="og:url" content="https://weex.apache.org/cn/references/modules/animation.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="animation \u52a8\u753b\u6d41\u7545\u4e14\u6709\u610f\u4e49\u7684\u52a8\u753b\u662f\u4e00\u4e2a\u5341\u5206\u6709\u6548\u7684\u63d0\u5347\u79fb\u52a8\u5e94\u7528\u7528\u6237\u4f53\u9a8c\u7684\u624b\u6bb5\uff0canimation \u6a21\u5757\u88ab\u7528\u4e8e\u5728\u7ec4\u4ef6\u4e0a\u6267\u884c\u52a8\u753b\u3002\u52a8\u753b\u53ef\u4ee5\u5bf9\u7ec4\u4ef6\u6267\u884c\u4e00\u7cfb\u5217\u7b80\u5355\u7684\u53d8\u6362 (\u4f4d\u7f6e\u3001\u5927\u5c0f\u3001\u65cb\u8f6c\u89d2\u5ea6\u3001\u80cc\u666f\u989c\u8272\u548c\u4e0d\u900f\u660e\u5ea6)\u3002\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u5982\u679c\u6709\u4e00\u4e2a &lt;image&gt; \u7ec4\u4ef6\uff0c\u901a\u8fc7\u52a8\u753b\u4f60\u53ef\u4ee5\u5bf9\u5176\u8fdb\u884c\u79fb\u52a8\u3001\u65cb\u8f6c\u3001\u62c9\u4f38\u6216\u6536\u7f29\u7b49\u52a8\u4f5c\u3002
+APItransition(el, options, callback)\u53c2">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.901Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="animation">
+<meta name="twitter:description" content="animation \u52a8\u753b\u6d41\u7545\u4e14\u6709\u610f\u4e49\u7684\u52a8\u753b\u662f\u4e00\u4e2a\u5341\u5206\u6709\u6548\u7684\u63d0\u5347\u79fb\u52a8\u5e94\u7528\u7528\u6237\u4f53\u9a8c\u7684\u624b\u6bb5\uff0canimation \u6a21\u5757\u88ab\u7528\u4e8e\u5728\u7ec4\u4ef6\u4e0a\u6267\u884c\u52a8\u753b\u3002\u52a8\u753b\u53ef\u4ee5\u5bf9\u7ec4\u4ef6\u6267\u884c\u4e00\u7cfb\u5217\u7b80\u5355\u7684\u53d8\u6362 (\u4f4d\u7f6e\u3001\u5927\u5c0f\u3001\u65cb\u8f6c\u89d2\u5ea6\u3001\u80cc\u666f\u989c\u8272\u548c\u4e0d\u900f\u660e\u5ea6)\u3002\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u5982\u679c\u6709\u4e00\u4e2a &lt;image&gt; \u7ec4\u4ef6\uff0c\u901a\u8fc7\u52a8\u753b\u4f60\u53ef\u4ee5\u5bf9\u5176\u8fdb\u884c\u79fb\u52a8\u3001\u65cb\u8f6c\u3001\u62c9\u4f38\u6216\u6536\u7f29\u7b49\u52a8\u4f5c\u3002
+APItransition(el, options, callback)\u53c2">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link current ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link current ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ animation
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.901Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="animation-\u52a8\u753b"><a href="#animation-\u52a8\u753b" class="headerlink" title="animation \u52a8\u753b"></a><code>animation</code> \u52a8\u753b</h1><p>\u6d41\u7545\u4e14\u6709\u610f\u4e49\u7684\u52a8\u753b\u662f\u4e00\u4e2a\u5341\u5206\u6709\u6548\u7684\u63d0\u5347\u79fb\u52a8\u5e94\u7528\u7528\u6237\u4f53\u9a8c\u7684\u624b\u6bb5\uff0c<code>animation</code> \u6a21\u5757\u88ab\u7528\u4e8e\u5728\u7ec4\u4ef6\u4e0a\u6267\u884c\u52a8\u753b\u3002\u52a8\u753b\u53ef\u4ee5\u5bf9\u7ec4\u4ef6\u6267\u884c\u4e00\u7cfb\u5217\u7b80\u5355\u7684\u53d8\u6362 (\u4f4d\u7f6e\u3001\u5927\u5c0f\u3001\u65cb\u8f6c\u89d2\u5ea6\u3001\u80cc\u666f\u989c\u8272\u548c\u4e0d\u900f\u660e\u5ea6)\u3002\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u5982\u679c\u6709\u4e00\u4e2a <code><image></code> \u7ec4\u4ef6\uff0c\u901a\u8fc7\u52a8\u753b\u4f60\u53ef\u4ee5\u5bf9\u5176\u8fdb\u884c\u79fb\u52a8\u3001\u65cb\u8f6c\u3001\u62c9\u4f38\u6216\u6536\u7f29\u7b49\u52a8\u4f5c\u3002</p>
+<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><h3 id="transition-el-options-callback"><a href="#transition-el-options-callback" class="headerlink" title="transition(el, options, callback)"></a><code>transition(el, options, callback)</code></h3><h4 id="\u53c2\u6570"><a href="#\u53c2\u6570" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>el {Element}</code>\uff1a\u5c06\u8981\u6267\u884c\u52a8\u753b\u7684\u5143\u7d20\uff0c\u901a\u5e38\u53ef\u4ee5\u901a\u8fc7\u8c03\u7528 <a href="../api.html"><code>this.$el(id)</code></a> \u6765\u83b7\u53d6\u5143\u7d20\u7684\u5f15\u7528\u3002</li>
+<li><code>options {Object}</code>\uff1a\u63cf\u8ff0\u52a8\u753b\u8fc7\u7a0b\u7684\u5bf9\u8c61\u3002<ul>
+<li><code>options.duration {number}</code>\uff1a\u6307\u5b9a\u52a8\u753b\u7684\u6301\u7eed\u65f6\u95f4 (\u5355\u4f4d\u662f\u6beb\u79d2)\uff0c\u9ed8\u8ba4\u503c\u662f <code>0</code>\uff0c\u8868\u793a\u6ca1\u6709\u52a8\u753b\u6548\u679c\u3002</li>
+<li><code>options.delay {number}</code>\uff1a\u6307\u5b9a\u8bf7\u6c42\u52a8\u753b\u64cd\u4f5c\u5230\u6267\u884c\u52a8\u753b\u4e4b\u95f4\u7684\u65f6\u95f4\u95f4\u9694 (\u5355\u4f4d\u662f\u6beb\u79d2)\uff0c\u9ed8\u8ba4\u503c\u662f <code>0</code>\uff0c\u8868\u793a\u6ca1\u6709\u5ef6\u8fdf\uff0c\u5728\u8bf7\u6c42\u540e\u7acb\u5373\u6267\u884c\u52a8\u753b\u3002</li>
+<li><code>options.timingFunction {string}</code>\uff1a\u63cf\u8ff0\u52a8\u753b\u6267\u884c\u7684\u901f\u5ea6\u66f2\u7ebf\uff0c\u7528\u4e8e\u4f7f\u52a8\u753b\u53d8\u5316\u66f4\u4e3a\u5e73\u6ed1\u3002\u9ed8\u8ba4\u503c\u662f <code>linear</code>\uff0c\u8868\u793a\u52a8\u753b\u4ece\u5f00\u59cb\u5230\u7ed3\u675f\u90fd\u62e5\u6709\u540c\u6837\u7684\u901f\u5ea6\u3002\u4e0b\u8868\u5217\u51fa\u4e86\u6240\u6709\u5408\u6cd5\u7684\u5c5e\u6027\uff1a</li>
+</ul>
+</li>
+</ul>
+<table>
+<thead>
+<tr>
+<th>\u5c5e\u6027\u540d</th>
+<th>\u63cf\u8ff0</th>
+<th>\u793a\u4f8b</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>linear</code></td>
+<td>\u52a8\u753b\u4ece\u5934\u5230\u5c3e\u7684\u901f\u5ea6\u662f\u76f8\u540c\u7684</td>
+</tr>
+<tr>
+<td><code>ease-in</code></td>
+<td>\u52a8\u753b\u901f\u5ea6\u7531\u6162\u5230\u5feb</td>
+</tr>
+<tr>
+<td><code>ease-out</code></td>
+<td>\u52a8\u753b\u901f\u5ea6\u7531\u5feb\u5230\u6162</td>
+</tr>
+<tr>
+<td><code>ease-in-out</code></td>
+<td>\u52a8\u753b\u5148\u52a0\u901f\u5230\u8fbe\u4e2d\u95f4\u70b9\u540e\u51cf\u901f\u5230\u8fbe\u7ec8\u70b9</td>
+</tr>
+<tr>
+<td><code>cubic-bezier(x1, y1, x2, y2)</code></td>
+<td>\u5728\u4e09\u6b21\u8d1d\u585e\u5c14\u51fd\u6570\u4e2d\u5b9a\u4e49\u53d8\u5316\u8fc7\u7a0b\uff0c\u51fd\u6570\u7684\u53c2\u6570\u503c\u5fc5\u987b\u5904\u4e8e 0 \u5230 1 \u4e4b\u95f4\u3002\u66f4\u591a\u5173\u4e8e\u4e09\u6b21\u8d1d\u585e\u5c14\u7684\u4fe1\u606f\u8bf7\u53c2\u9605 <a href="http://cubic-bezier.com/" target="_blank" rel="external">cubic-bezier</a> \u548c <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve" target="_blank" rel="external">B�zier curve</a>.</td>
+</tr>
+</tbody>
+</table>
+<ul>
+<li><code>options.styles {Object}</code>\uff1a\u8bbe\u7f6e\u4e0d\u540c\u6837\u5f0f\u8fc7\u6e21\u6548\u679c\u7684\u952e\u503c\u5bf9\uff0c\u4e0b\u8868\u5217\u51fa\u4e86\u6240\u6709\u5408\u6cd5\u7684\u53c2\u6570\uff1a</li>
+</ul>
+<table>
+<thead>
+<tr>
+<th>\u53c2\u6570\u540d</th>
+<th>\u63cf\u8ff0</th>
+<th>\u503c\u7c7b\u578b</th>
+<th>\u9ed8\u8ba4\u503c</th>
+<th>\u793a\u4f8b</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>width</td>
+<td>\u52a8\u753b\u6267\u884c\u540e\u5e94\u7528\u5230\u7ec4\u4ef6\u4e0a\u7684\u5bbd\u5ea6\u503c</td>
+<td>length</td>
+<td>\u65e0</td>
+</tr>
+<tr>
+<td>height</td>
+<td>\u52a8\u753b\u6267\u884c\u540e\u5e94\u7528\u5230\u7ec4\u4ef6\u4e0a\u7684\u9ad8\u5ea6\u503c</td>
+<td>length</td>
+<td>\u65e0</td>
+</tr>
+<tr>
+<td>backgroundColor</td>
+<td>\u52a8\u753b\u6267\u884c\u540e\u5e94\u7528\u5230\u7ec4\u4ef6\u4e0a\u7684\u80cc\u666f\u989c\u8272</td>
+<td>string</td>
+<td>none</td>
+</tr>
+<tr>
+<td>opacity</td>
+<td>\u52a8\u753b\u6267\u884c\u540e\u5e94\u7528\u5230\u7ec4\u4ef6\u4e0a\u7684\u4e0d\u900f\u660e\u5ea6\u503c</td>
+<td>\u4ecb\u4e8e 0 \u5230 1 \u95f4\u7684\u6570\u503c</td>
+<td><code>1</code></td>
+</tr>
+<tr>
+<td>transformOrigin</td>
+<td>\u5b9a\u4e49\u53d8\u5316\u8fc7\u7a0b\u7684\u4e2d\u5fc3\u70b9. \u53c2\u6570 <code>x-aris</code> \u53ef\u80fd\u7684\u503c\u4e3a <code>left</code>\u3001<code>center</code>\u3001<code>right</code>\u3001\u957f\u5ea6\u503c\u6216\u767e\u5206\u6bd4\u503c, \u53c2\u6570 <code>y-axis</code> \u53ef\u80fd\u7684\u503c\u4e3a <code>top</code>\u3001<code>center</code>\u3001<code>bottom</code>\u3001\u957f\u5ea6\u503c\u6216\u767e\u5206\u6bd4\u503c</td>
+<td><code>x-axis y-axis</code></td>
+<td><code>center center</code></td>
+</tr>
+<tr>
+<td>transform</td>
+<td>\u5b9a\u4e49\u5e94\u7528\u5728\u5143\u7d20\u4e0a\u7684\u53d8\u6362\u7c7b\u578b\uff0c\u652f\u6301\u4e0b\u8868\u5217\u51fa\u7684\u5c5e\u6027</td>
+<td>object</td>
+<td>\u65e0</td>
+</tr>
+</tbody>
+</table>
+<p><code>transform</code>\u5c5e\u6027\u7684\u5408\u6cd5\u503c:</p>
+<table>
+<thead>
+<tr>
+<th>\u540d\u79f0</th>
+<th>\u63cf\u8ff0</th>
+<th>\u503c\u7c7b\u578b</th>
+<th>\u9ed8\u8ba4\u503c</th>
+<th>\u793a\u4f8b</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>translate</code>/<code>translateX</code>/<code>translateY</code></td>
+<td>\u6307\u5b9a\u5143\u7d20\u5c06\u5df2\u88ab\u79fb\u52a8\u5230\u7684\u65b0\u4f4d\u7f6e</td>
+<td>\u50cf\u7d20\u503c\u6216\u767e\u5206\u6bd4</td>
+<td>\u65e0</td>
+</tr>
+<tr>
+<td><code>rotate</code></td>
+<td>\u6307\u5b9a\u5143\u7d20\u5c06\u88ab\u65cb\u8f6c\u7684\u89d2\u5ea6\uff0c\u5355\u4f4d\u662f\u5ea6</td>
+<td>number</td>
+<td>\u65e0</td>
+</tr>
+<tr>
+<td><code>scale</code>/<code>scaleX</code>/<code>scaleY</code></td>
+<td>\u6309\u6bd4\u4f8b\u653e\u5927\u6216\u7f29\u5c0f\u5143\u7d20</td>
+<td>number</td>
+<td>\u65e0</td>
+</tr>
+</tbody>
+</table>
+<ul>
+<li><code>callback {Function}</code>\uff1a\u52a8\u753b\u6267\u884c\u5b8c\u6bd5\u4e4b\u540e\u7684\u56de\u8c03</li>
+</ul>
+<h2 id="Example"><a href="#Example" class="headerlink" title="Example"></a>Example</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">ref</span>=<span class="string">"test"</span> @<span class="attr">click</span>=<span class="string">"move"</span> <span class="attr">class</span>=<span class="string">"box"</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><
<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> animation = weex.requireModule(<span class="string">'animation'</span>)</div><div class="line"> <span class="keyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> move () {</div><div class="line"> <span class="keyword">var</span> testEl = <span class="keyword">this</span>.$refs.test;</div><div class="line"> animation.transition(testEl, {</div><div class="line"> <span class="attr">styles</span>: {</div><div class="line"> <span class="attr">color</span>: <span class="string">'#FF0000'</span>,</div><div class="line"> <span class="attr">tr
ansform</span>: <span class="string">'translate(250, 100)'</span>,</div><div class="line"> <span class="attr">transformOrigin</span>: <span class="string">'center center'</span></div><div class="line"> },</div><div class="line"> <span class="attr">duration</span>: <span class="number">800</span>, <span class="comment">//ms</span></div><div class="line"> timingFunction: <span class="string">'ease'</span>,</div><div class="line"> <span class="attr">delay</span>: <span class="number">0</span> <span class="comment">//ms</span></div><div class="line"> }, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> modal.toast({ <span class="attr">message</span>: <span class="string">'animation finished.'</span> })</div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="
line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> {</div><div class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.box</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">250px</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#DDD</span>;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</s
pan>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/animation.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/modules/animation.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/modules/animation.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[09/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/index.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/index.html b/content/cn/v-0.10/guide/index.html
new file mode 100644
index 0000000..b55d9eb
--- /dev/null
+++ b/content/cn/v-0.10/guide/index.html
@@ -0,0 +1,538 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u4e0a\u624b\u6559\u7a0b | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u8d77\u6b65\u6559\u7a0bWeex \u662f\u4e00\u5957\u7b80\u5355\u6613\u7528\u7684\u8de8\u5e73\u53f0\u5f00\u53d1\u65b9\u6848\uff0c\u80fd\u4ee5 web \u7684\u5f00\u53d1\u4f53\u9a8c\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684 native \u5e94\u7528\uff0c\u4e3a\u4e86\u505a\u5230\u8fd9\u4e9b\uff0cWeex \u4e0e Vue \u5408\u4f5c\uff0c\u4f7f\u7528 Vue \u4f5c\u4e3a\u4e0a\u5c42\u6846\u67b6\uff0c\u5e76\u9075\u5faa W3C \u6807\u51c6\u5b9e\u73b0\u4e86\u7edf\u4e00\u7684 JSEngine \u548c DOM API\uff0c\u8fd9\u6837\u4e00\u6765\uff0c\u4f60\u751a\u81f3\u53ef\u4ee5\u4f7f\u7528\u5176\u4ed6\u6846\u67b6\u9a71\u52a8 Weex\uff0c\u6253\u9020\u4e09\u7aef\u4e00\u81f4\u7684 native \u5e94\u7528\u3002
+\u5c1d\u8bd5 Weex \u6700\u7b80\u5355\u7684\u65b9\u6cd5\u662f\u4f7f\u7528 Playgroun">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u4e0a\u624b\u6559\u7a0b">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u8d77\u6b65\u6559\u7a0bWeex \u662f\u4e00\u5957\u7b80\u5355\u6613\u7528\u7684\u8de8\u5e73\u53f0\u5f00\u53d1\u65b9\u6848\uff0c\u80fd\u4ee5 web \u7684\u5f00\u53d1\u4f53\u9a8c\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684 native \u5e94\u7528\uff0c\u4e3a\u4e86\u505a\u5230\u8fd9\u4e9b\uff0cWeex \u4e0e Vue \u5408\u4f5c\uff0c\u4f7f\u7528 Vue \u4f5c\u4e3a\u4e0a\u5c42\u6846\u67b6\uff0c\u5e76\u9075\u5faa W3C \u6807\u51c6\u5b9e\u73b0\u4e86\u7edf\u4e00\u7684 JSEngine \u548c DOM API\uff0c\u8fd9\u6837\u4e00\u6765\uff0c\u4f60\u751a\u81f3\u53ef\u4ee5\u4f7f\u7528\u5176\u4ed6\u6846\u67b6\u9a71\u52a8 Weex\uff0c\u6253\u9020\u4e09\u7aef\u4e00\u81f4\u7684 native \u5e94\u7528\u3002
+\u5c1d\u8bd5 Weex \u6700\u7b80\u5355\u7684\u65b9\u6cd5\u662f\u4f7f\u7528 Playgroun">
+<meta property="og:image" content="https://img.alicdn.com/tps/TB1Ymw3OpXXXXcvXpXXXXXXXXXX-500-1013.jpg">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.940Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u4e0a\u624b\u6559\u7a0b">
+<meta name="twitter:description" content="\u8d77\u6b65\u6559\u7a0bWeex \u662f\u4e00\u5957\u7b80\u5355\u6613\u7528\u7684\u8de8\u5e73\u53f0\u5f00\u53d1\u65b9\u6848\uff0c\u80fd\u4ee5 web \u7684\u5f00\u53d1\u4f53\u9a8c\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684 native \u5e94\u7528\uff0c\u4e3a\u4e86\u505a\u5230\u8fd9\u4e9b\uff0cWeex \u4e0e Vue \u5408\u4f5c\uff0c\u4f7f\u7528 Vue \u4f5c\u4e3a\u4e0a\u5c42\u6846\u67b6\uff0c\u5e76\u9075\u5faa W3C \u6807\u51c6\u5b9e\u73b0\u4e86\u7edf\u4e00\u7684 JSEngine \u548c DOM API\uff0c\u8fd9\u6837\u4e00\u6765\uff0c\u4f60\u751a\u81f3\u53ef\u4ee5\u4f7f\u7528\u5176\u4ed6\u6846\u67b6\u9a71\u52a8 Weex\uff0c\u6253\u9020\u4e09\u7aef\u4e00\u81f4\u7684 native \u5e94\u7528\u3002
+\u5c1d\u8bd5 Weex \u6700\u7b80\u5355\u7684\u65b9\u6cd5\u662f\u4f7f\u7528 Playgroun">
+<meta name="twitter:image" content="https://img.alicdn.com/tps/TB1Ymw3OpXXXXcvXpXXXXXXXXXX-500-1013.jpg">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link current ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link current ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u4e0a\u624b\u6559\u7a0b
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.940Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u8d77\u6b65\u6559\u7a0b"><a href="#\u8d77\u6b65\u6559\u7a0b" class="headerlink" title="\u8d77\u6b65\u6559\u7a0b"></a>\u8d77\u6b65\u6559\u7a0b</h1><p>Weex \u662f\u4e00\u5957\u7b80\u5355\u6613\u7528\u7684\u8de8\u5e73\u53f0\u5f00\u53d1\u65b9\u6848\uff0c\u80fd\u4ee5 web \u7684\u5f00\u53d1\u4f53\u9a8c\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684 native \u5e94\u7528\uff0c\u4e3a\u4e86\u505a\u5230\u8fd9\u4e9b\uff0cWeex \u4e0e Vue \u5408\u4f5c\uff0c\u4f7f\u7528 Vue \u4f5c\u4e3a\u4e0a\u5c42\u6846\u67b6\uff0c\u5e76\u9075\u5faa W3C \u6807\u51c6\u5b9e\u73b0\u4e86\u7edf\u4e00\u7684 JSEngine \u548c DOM API\uff0c\u8fd9\u6837\u4e00\u6765\uff0c\u4f60\u751a\u81f3\u53ef\u4ee5\u4f7f\u7528\u5176\u4ed6\u6846\u67b6\u9a71\u52a8 Weex\uff0c\u6253\u9020\u4e09\u7aef\u4e00\u81f4\u7684 native \u5e94\u7528\u3002</p>
+<p>\u5c1d\u8bd5 Weex \u6700\u7b80\u5355\u7684\u65b9\u6cd5\u662f\u4f7f\u7528 <a href="https://alibaba.github.io/weex/download.html" target="_blank" rel="external">Playground App</a> \u548c\u5728 <a href="http://dotwe.org" target="_blank" rel="external">dotWe</a> \u7f16\u5199\u4e00\u4e2a <a href="http://dotwe.org/656345423a7ef46f4b897ff471fd2ab5" target="_blank" rel="external">Hello World</a> \u4f8b\u5b50\u3002\u4f60\u4e0d\u9700\u8981\u8003\u8651\u5b89\u88c5\u5f00\u53d1\u73af\u5883\u6216\u7f16\u5199 native \u4ee3\u7801\uff0c\u53ea\u9700\u8981\u505a\u4e0b\u9762\u4e24\u4ef6\u4e8b\uff1a</p>
+<ul>
+<li>\u4e3a\u4f60\u7684\u624b\u673a\u5b89\u88c5 <a href="https://alibaba.github.io/weex/download.html" target="_blank" rel="external">Playground App</a>\uff0c\u5f53\u7136\uff0cWeex \u662f\u8de8\u5e73\u53f0\u7684\u6846\u67b6\uff0c\u4f60\u4f9d\u7136\u53ef\u4ee5\u4f7f\u7528\u6d4f\u89c8\u5668\u8fdb\u884c\u9884\u89c8\uff0c\u53ea\u662f\u8fd9\u6837\u4f60\u5c31\u65e0\u6cd5\u611f\u53d7\u5230 native \u4f18\u79c0\u7684\u4f53\u9a8c\u4e86\u3002</li>
+<li>\u5728\u65b0\u6807\u7b7e\u9875\u4e2d\u6253\u5f00 <a href="http://dotwe.org/656345423a7ef46f4b897ff471fd2ab5" target="_blank" rel="external">Hello World</a> \u4f8b\u5b50\uff0c\u70b9\u51fb\u9884\u89c8\uff0c\u7136\u540e\u7528 Playground \u626b\u7801\u5373\u53ef\u3002</li>
+</ul>
+<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u770b\u5230\u4e86\u719f\u6089\u7684 HTML \u8bed\u4e49\u5316\u6807\u7b7e\u3001CSS \u6837\u5f0f\u548c Javascript \u4ee3\u7801\u3002\u8fd9\u662f\u4e00\u4e2a\u6700\u7b80\u5355\u7684 Weex \u793a\u4f8b\uff0c\u5b83\u5728\u9875\u9762\u4e2d\u6e32\u67d3\u4e86\u4e00\u4e2a \u201cHello World\u201d\u3002</p>
+<p><img src="https://img.alicdn.com/tps/TB1Ymw3OpXXXXcvXpXXXXXXXXXX-500-1013.jpg" alt="mobile_preview"></p>
+<h2 id="\u53d1\u751f\u4e86\u4ec0\u4e48\uff1f"><a href="#\u53d1\u751f\u4e86\u4ec0\u4e48\uff1f" class="headerlink" title="\u53d1\u751f\u4e86\u4ec0\u4e48\uff1f"></a>\u53d1\u751f\u4e86\u4ec0\u4e48\uff1f</h2><p>\u5c31\u5982\u793a\u4f8b\u4ee3\u7801\u6240\u793a\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span>></span>{{text}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">50</span>;</div><div class=
"line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">text</span>: <span class="string">'Hello World.'</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p>\u6211\u4eec\u6682\u65f6\u4e0d\u53bb\u5173\u5fc3 Weex \u7684\u6280\u672f\u7ec6\u8282\uff0c\u4ec5\u770b\u5927\u81f4\u7684\u4ee3\u7801\u7ed3\u6784\u3002Weex \u4ee3\u7801\u7531\u4e09\u90e8\u5206\u6784\u6210\uff1a<code>template</code>\u3001<code>style</code>\u3001<code>script</code>\uff0c\u8fd9\u4e09\u4e2a\u6982\u5ff5\u4e4b\u4e8e Weex \u5c31\u5982 HTML\uff0cCSS\uff0cJavaScript \u4e4b\u4e8e Web\u3002</p>
+<p>\u6a21\u677f\u90e8\u5206\u8d4b\u4e88 Weex \u4ee5\u9aa8\u67b6\uff0c\u7531\u6807\u7b7e\u4ee5\u53ca\u6807\u7b7e\u5305\u56f4\u7684\u5185\u5bb9\u6784\u6210\uff0c\u6807\u7b7e\u4e2d\u80fd\u6dfb\u52a0 <code>attribute\uff08\u7279\u6027\uff09</code>\uff0c\u4e0d\u540c\u7684 <code>attribute</code> \u6709\u4e0d\u540c\u7684\u542b\u4e49\uff0c\u4f8b\u5982 class \u7279\u6027\u8ba9\u540c\u6837\u7684\u6837\u5f0f\u53ef\u4ee5\u4f5c\u7528\u4e8e\u591a\u7ec4 Weex \u6807\u7b7e\uff0c onclick \u7279\u6027\u8ba9\u6807\u7b7e\u80fd\u5bf9\u7528\u6237\u70b9\u51fb\u4e8b\u4ef6\u4f5c\u51fa\u56de\u5e94\u3002</p>
+<p>\u6837\u5f0f\u90e8\u5206\u63cf\u8ff0 Weex \u6807\u7b7e\u5982\u4f55\u663e\u793a\u3002\u548c\u4f60\u4e00\u6837\uff0c\u6211\u4eec\u559c\u6b22 CSS\uff0c\u6240\u4ee5 Weex \u4e2d\u7684\u6837\u5f0f\u5c3d\u91cf\u548c CSS \u6807\u51c6\u4e00\u81f4\u3002Weex \u652f\u6301\u5f88\u591a CSS \u4e2d\u7684\u7279\u6027\uff1a margin, padding, fixed\u2026\u2026 \u66f4\u597d\u7684\u662f\uff0c flexbox \u5e03\u5c40\u6a21\u578b\u5728 Weex \u4e2d\u83b7\u5f97\u4e86\u5f88\u597d\u7684\u652f\u6301\u3002</p>
+<p>\u811a\u672c\u90e8\u5206\u4e3a Weex \u6807\u7b7e\u6dfb\u52a0\u6570\u636e\u4e0e\u903b\u8f91\uff0c\u5728\u8fd9\u91cc\u4f60\u80fd\u65b9\u4fbf\u7684\u8bbf\u95ee\u672c\u5730\u6216\u8fdc\u7a0b\u7684\u6570\u636e\u5e76\u52a8\u6001\u66f4\u65b0\u3002\u4f60\u8fd8\u80fd\u5b9a\u4e49\u65b9\u6cd5\u5e76\u8ba9\u8fd9\u4e9b\u65b9\u6cd5\u54cd\u5e94\u4e0d\u540c\u7684\u4e8b\u4ef6\u3002Weex \u811a\u672c\u7684\u7ec4\u7ec7\u65b9\u5f0f\u57fa\u672c\u9075\u5faa\u4e8e CommonJS module \u89c4\u8303\u3002</p>
+<p>\u662f\u4e0d\u662f\u89c9\u5f97\u8fd9\u4e9b\u8bed\u6cd5\u6709\u4e9b\u773c\u719f\uff1f\u6ca1\u9519\uff0cWeex \u8bed\u6cd5\u53c2\u8003\u4e86 <a href="https://github.com/vuejs/vue" target="_blank" rel="external">Vue</a>\uff0c\u5982\u679c\u4f60\u719f\u6089 Vue\uff0c\u4f60\u4f1a\u5f88\u5feb\u9002\u5e94 Weex \u8bed\u6cd5\uff08\u6700\u65b0\u7684 Weex framework \u5c06\u4f1a\u57fa\u4e8e <a href="https://github.com/vuejs/vue" target="_blank" rel="external">Vue 2.0</a> \u5f00\u53d1\uff0c\u5b8c\u5168\u517c\u5bb9 Vue\uff0c\u53ef\u53c2\u89c1\u6211\u4eec\u7684 <a href="https://github.com/weexteam/weex-vue-framework/issues/9" target="_blank" rel="external">Roadmap</a>\uff09\uff0c\u66f4\u597d\u7684\u662f\uff0c\u6211\u4eec\u62e5\u62b1\u89c4\u8303\uff0c\u5c3d\u53ef\u80fd\u7684\u6309\u7167 W3C \u6807\u51c6\u8fdb\u884c\u5b9e\u73b0\uff0c\u56e0\u6b64\uff0c\u4f60\u5927\u53ef\u4e0d\u5fc5\u62c5\u5fc3 Weex \u4e09\u7aef\u5dee\u5f02\u3002</p>
+<p>\u4f60\u53ef\u4ee5\u8bd5\u7740\u4fee\u6539 <a href="http://dotwe.org/656345423a7ef46f4b897ff471fd2ab5" target="_blank" rel="external">Hello World</a> \u7684\u4ee3\u7801\uff0c\u518d\u6b21\u70b9\u51fb\u9884\u89c8\u5373\u53ef\u751f\u6210\u65b0\u7684\u4e8c\u7ef4\u7801\u8fdb\u884c\u626b\u63cf\u3002</p>
+<p>Weex \u4e0d\u6b62\u662f\u4e2a Demo\uff0c\u5728\u63a5\u4e0b\u6765\u7684\u7ae0\u8282\u4e2d\uff0c\u4f60\u8fd8\u4f1a\u770b\u5230\u66f4\u591a Weex \u5f00\u53d1 native \u5e94\u7528\u5e76\u5c06\u5176\u96c6\u6210\u5230\u4f60\u7684 App \u4e2d\u7684\u7cbe\u5f69\u6559\u7a0b\u3002\u4e0d\u8981\u5fd8\u4e86\u968f\u65f6\u5728 <a href="http://dotwe.org" target="_blank" rel="external">dotWe</a> \u4e2d\u7f16\u5199\u4ee3\u7801\u9a8c\u8bc1\u5e76\u901a\u8fc7 <a href="https://alibaba.github.io/weex/download.html" target="_blank" rel="external">Playground App</a> \u9884\u89c8\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/syntax/comm.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/syntax/comm.html b/content/cn/v-0.10/guide/syntax/comm.html
new file mode 100644
index 0000000..7477425
--- /dev/null
+++ b/content/cn/v-0.10/guide/syntax/comm.html
@@ -0,0 +1,533 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u7ec4\u4ef6\u901a\u4fe1 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u7ec4\u4ef6\u95f4\u901a\u4fe1\u81ea\u5b9a\u4e49\u4e8b\u4ef6Weex \u652f\u6301\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u8fd9\u91cc\u6709\u4e24\u4e2a\u76f8\u5173\u7684\u8bbe\u8ba1\uff1a1\uff0c\u76d1\u542c\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff1b2\uff0c\u521b\u5efa\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002
+\u76d1\u542c\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u6bcf\u4e2a Weex \u7684 ViewModel \u90fd\u652f\u6301 this.$on(type, handler) \u548c this.$off(type[, handler]) \u7684 API\u3002type \u662f\u76d1\u542c\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7c7b\u578b\uff0chandler \u662f\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u3002
+\u5f53 handler \u88ab\u89e6\u53d1\u65f6\uff0c\u4f1a\u6709\u4e00\u4e2a\u4e8b\u4ef6">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u7ec4\u4ef6\u901a\u4fe1">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/syntax/comm.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u7ec4\u4ef6\u95f4\u901a\u4fe1\u81ea\u5b9a\u4e49\u4e8b\u4ef6Weex \u652f\u6301\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u8fd9\u91cc\u6709\u4e24\u4e2a\u76f8\u5173\u7684\u8bbe\u8ba1\uff1a1\uff0c\u76d1\u542c\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff1b2\uff0c\u521b\u5efa\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002
+\u76d1\u542c\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u6bcf\u4e2a Weex \u7684 ViewModel \u90fd\u652f\u6301 this.$on(type, handler) \u548c this.$off(type[, handler]) \u7684 API\u3002type \u662f\u76d1\u542c\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7c7b\u578b\uff0chandler \u662f\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u3002
+\u5f53 handler \u88ab\u89e6\u53d1\u65f6\uff0c\u4f1a\u6709\u4e00\u4e2a\u4e8b\u4ef6">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.941Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u7ec4\u4ef6\u901a\u4fe1">
+<meta name="twitter:description" content="\u7ec4\u4ef6\u95f4\u901a\u4fe1\u81ea\u5b9a\u4e49\u4e8b\u4ef6Weex \u652f\u6301\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u8fd9\u91cc\u6709\u4e24\u4e2a\u76f8\u5173\u7684\u8bbe\u8ba1\uff1a1\uff0c\u76d1\u542c\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff1b2\uff0c\u521b\u5efa\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002
+\u76d1\u542c\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u6bcf\u4e2a Weex \u7684 ViewModel \u90fd\u652f\u6301 this.$on(type, handler) \u548c this.$off(type[, handler]) \u7684 API\u3002type \u662f\u76d1\u542c\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7c7b\u578b\uff0chandler \u662f\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u3002
+\u5f53 handler \u88ab\u89e6\u53d1\u65f6\uff0c\u4f1a\u6709\u4e00\u4e2a\u4e8b\u4ef6">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link current ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link current ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u7ec4\u4ef6\u901a\u4fe1
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.941Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u7ec4\u4ef6\u95f4\u901a\u4fe1"><a href="#\u7ec4\u4ef6\u95f4\u901a\u4fe1" class="headerlink" title="\u7ec4\u4ef6\u95f4\u901a\u4fe1"></a>\u7ec4\u4ef6\u95f4\u901a\u4fe1</h1><h2 id="\u81ea\u5b9a\u4e49\u4e8b\u4ef6"><a href="#\u81ea\u5b9a\u4e49\u4e8b\u4ef6" class="headerlink" title="\u81ea\u5b9a\u4e49\u4e8b\u4ef6"></a>\u81ea\u5b9a\u4e49\u4e8b\u4ef6</h2><p>Weex \u652f\u6301\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u8fd9\u91cc\u6709\u4e24\u4e2a\u76f8\u5173\u7684\u8bbe\u8ba1\uff1a1\uff0c\u76d1\u542c\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff1b2\uff0c\u521b\u5efa\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002</p>
+<h2 id="\u76d1\u542c\u81ea\u5b9a\u4e49\u4e8b\u4ef6"><a href="#\u76d1\u542c\u81ea\u5b9a\u4e49\u4e8b\u4ef6" class="headerlink" title="\u76d1\u542c\u81ea\u5b9a\u4e49\u4e8b\u4ef6"></a>\u76d1\u542c\u81ea\u5b9a\u4e49\u4e8b\u4ef6</h2><p>\u6bcf\u4e2a Weex \u7684 ViewModel \u90fd\u652f\u6301 <code>this.$on(type, handler)</code> \u548c <code>this.$off(type[, handler])</code> \u7684 API\u3002<code>type</code> \u662f\u76d1\u542c\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7c7b\u578b\uff0c<code>handler</code> \u662f\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u3002</p>
+<p>\u5f53 <code>handler</code> \u88ab\u89e6\u53d1\u65f6\uff0c\u4f1a\u6709\u4e00\u4e2a\u4e8b\u4ef6\u5bf9\u8c61 <code>event</code> \u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\u88ab\u4f20\u5165\uff0c\u4e8b\u4ef6\u5bf9\u8c61\u7684\u6570\u636e\u683c\u5f0f\u57fa\u4e8e<a href="./events.html">\u4e8b\u4ef6\u673a\u5236</a>\u4e2d\u63d0\u5230\u7684\u4e8b\u4ef6\u63cf\u8ff0\u5bf9\u8c61\u3002</p>
+<h2 id="\u521b\u5efa\u81ea\u5b9a\u4e49\u4e8b\u4ef6"><a href="#\u521b\u5efa\u81ea\u5b9a\u4e49\u4e8b\u4ef6" class="headerlink" title="\u521b\u5efa\u81ea\u5b9a\u4e49\u4e8b\u4ef6"></a>\u521b\u5efa\u81ea\u5b9a\u4e49\u4e8b\u4ef6</h2><p>\u6bcf\u4e2a Weex \u7684 ViewModel \u90fd\u652f\u6301 <code>this.$emit(type, detail)</code> \u7684 API\uff0c\u53ef\u4ee5\u5728\u5f53\u524d ViewModel \u4e2d\u4ea7\u751f\u4e00\u4e2a\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002<code>type</code> \u662f\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7684\u7c7b\u578b\uff0c<code>detail</code> \u5219\u662f\u4e00\u4e2a\u5bf9\u8be5\u4e8b\u4ef6\u7ec6\u8282\u8865\u5145\u63cf\u8ff0\u7684 JSON \u5bf9\u8c61\uff0c\u4f1a\u4ee5 <code>event.detail</code> \u7684\u5f62\u5f0f\u51fa\u73b0\u5728\u5904\u7406\u6b64\u4e8b\u4ef6\u7684\u51fd\u6570\u4e2d\u3002</p>
+<h2 id="\u4ece\u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u901a\u4fe1"><a href="#\u4ece\u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u901a\u4fe1" class="headerlink" title="\u4ece\u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u901a\u4fe1"></a>\u4ece\u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u901a\u4fe1</h2><p>\u9996\u5148\u7236\u7ec4\u4ef6\u8981\u76d1\u542c\u7279\u5b9a\u7c7b\u578b\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u800c\u5b50\u7ec4\u4ef6\u53ef\u4ee5\u4f7f\u7528 <code>this._parent</code> \u627e\u5230\u7236\u7ec4\u4ef6\uff0c\u7136\u540e\u518d\u8c03\u7528 <code>this._parent.$emit(type, detail)</code> \u65b9\u6cd5\uff0c\u5373\u53ef\u5b9e\u73b0\u81ea\u4e0b\u800c\u4e0a\u7684\u901a\u4fe1\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">element</span> <span class="attr">name</span>=<span class="string">"foo"</span>></span></div><div class="line"> <span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">src</span>=<span class="string">"{{imageUrl}}"</span> <span class="attr">class</span>=<span class="string">"thumb"</span> <span class="attr">onclick</span>=<span class="string">"test"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{title}}<span class="tag"></<span class="name">text</span>></span></div><div class="line">
<span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.thumb</span> { <span class="attribute">width</span>: <span class="number">200</span>; <span class="attribute">height</span>: <span class="number">200</span>; }</div><div class="line"> <span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">title</span>: <span class="string">''</span>,</div><div class="line"> <span
class="attr">imageUrl</span>: <span class="string">''</span></div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">test</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="comment">// Emit notify to parent</span></div><div class="line"> <span class="keyword">this</span>._parent.$emit(<span class="string">'notify'</span>, {<span class="attr">a</span>: <span class="number">1</span>})</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="tag"></<span class="name">script</span>></span></div><div class="line"><span class="tag"></<span class="name">element</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">t
emplate</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">foo</span> <span class="attr">title</span>=<span class="string">"Hello"</span> <span class="attr">image-url</span>=<span class="string">"https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"</span>></span><span class="tag"></<span class="name">foo</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">if</span>=<span class="string">"eventType"</span>></span>event: {{eventType}} - {{eventDetail}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class=
"line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">eventType</span>: <span class="string">''</span>,</div><div class="line"> <span class="attr">eventDetail</span>: {}</div><div class="line"> },</div><div class="line"> <span class="attr">created</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.$on(<span class="string">'notify'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>{</div><div class="line"> <span class="comment">// When a notify comes, this handler will be run.</span></div><div class="line"> <span cla
ss="comment">// `event.detail` will be `{a: 1}`</span></div><div class="line"> <span class="keyword">this</span>.eventType = event.type</div><div class="line"> <span class="keyword">this</span>.eventDetail = <span class="built_in">JSON</span>.stringify(event.detail)</div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/51e553ef43e5c744d05da1bb811903bf" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<h2 id="\u4ece\u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u901a\u4fe1"><a href="#\u4ece\u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u901a\u4fe1" class="headerlink" title="\u4ece\u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u901a\u4fe1"></a>\u4ece\u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u901a\u4fe1</h2><p>\u540c\u7406\uff0c\u9996\u5148\u5b50\u7ec4\u4ef6\u8981\u76d1\u542c\u7279\u5b9a\u7c7b\u578b\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u800c\u7236\u7ec4\u4ef6\u53ef\u4ee5\u4f7f\u7528 <code>this.$vm(id)</code> \u627e\u5230\u7236\u7ec4\u4ef6\uff0c\u7136\u540e\u518d\u8c03\u7528 <code>this.$vm(id).$emit(type, detail)</code> \u65b9\u6cd5\uff0c\u5373\u53ef\u5b9e\u73b0\u81ea\u4e0a\u800c\u4e0b\u7684\u901a\u4fe1\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">element</span> <span class="attr">name</span>=<span class="string">"foo"</span>></span></div><div class="line"> <span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">if</span>=<span class="string">"imageUrl"</span> <span class="attr">src</span>=<span class="string">"{{imageUrl}}"</span> <span class="attr">class</span>=<span class="string">"thumb"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Foo<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<s
pan class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.thumb</span> { <span class="attribute">width</span>: <span class="number">200</span>; <span class="attribute">height</span>: <span class="number">200</span>; }</div><div class="line"> <span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">imageUrl</span>: <span class="string">''</span></div><div class="line"> },</div><div class="line">
<span class="attr">created</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.$on(<span class="string">'changeImage'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.imageUrl = e.detail</div><div class="line"> }.bind(<span class="keyword">this</span>))</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="tag"></<span class="name">script</span>></span></div><div class="line"><span class="tag"></<span class="name">element</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div c
lass="line"> <span class="tag"><<span class="name">foo</span> <span class="attr">id</span>=<span class="string">"sub"</span>></span><span class="tag"></<span class="name">foo</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"test"</span>></span>click to update foo<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">test</span>: <span class="f
unction"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.$vm(<span class="string">'sub'</span>).$emit(</div><div class="line"> <span class="string">'changeImage'</span>,</div><div class="line"> <span class="string">'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png'</span></div><div class="line"> )</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/ea616d180620648e66554d42f57db82b" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u4e0b\u4e00\u8282\uff1a<a href="./config-n-data.html">\u9875\u9762\u6574\u4f53\u914d\u7f6e</a> </p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/syntax/comm.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/syntax/composed-component.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/syntax/composed-component.html b/content/cn/v-0.10/guide/syntax/composed-component.html
new file mode 100644
index 0000000..04f8f70
--- /dev/null
+++ b/content/cn/v-0.10/guide/syntax/composed-component.html
@@ -0,0 +1,548 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u7ec4\u4ef6\u5c01\u88c5 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u7ec4\u4ef6\u5c01\u88c5\u7ecf\u5e38\u6211\u4eec\u4f1a\u53d1\u73b0 Weex \u7684 &lt;template&gt; \u4e2d\u6709\u5f88\u591a\u53ef\u590d\u7528\u7684\u90e8\u5206\uff0c\u8fd9\u65f6\u5019\u6211\u4eec\u53ef\u4ee5\u5c06\u5176\u5c01\u88c5\u6210\u4e0a\u5c42\u7684\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5e76\u91cd\u7528\u3002\u4f8b\u5982\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a foo.we \u7684\u6587\u4ef6\uff0c&lt;foo&gt; \u5c31\u662f\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u7684\u7ec4\u4ef6\u540d\u79f0\uff1a
+&lt;!-- foo.we --&gt;&lt;template&gt; &lt;div style="flex-direction: row;"&g">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u7ec4\u4ef6\u5c01\u88c5">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/syntax/composed-component.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u7ec4\u4ef6\u5c01\u88c5\u7ecf\u5e38\u6211\u4eec\u4f1a\u53d1\u73b0 Weex \u7684 &lt;template&gt; \u4e2d\u6709\u5f88\u591a\u53ef\u590d\u7528\u7684\u90e8\u5206\uff0c\u8fd9\u65f6\u5019\u6211\u4eec\u53ef\u4ee5\u5c06\u5176\u5c01\u88c5\u6210\u4e0a\u5c42\u7684\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5e76\u91cd\u7528\u3002\u4f8b\u5982\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a foo.we \u7684\u6587\u4ef6\uff0c&lt;foo&gt; \u5c31\u662f\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u7684\u7ec4\u4ef6\u540d\u79f0\uff1a
+&lt;!-- foo.we --&gt;&lt;template&gt; &lt;div style="flex-direction: row;"&g">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.942Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u7ec4\u4ef6\u5c01\u88c5">
+<meta name="twitter:description" content="\u7ec4\u4ef6\u5c01\u88c5\u7ecf\u5e38\u6211\u4eec\u4f1a\u53d1\u73b0 Weex \u7684 &lt;template&gt; \u4e2d\u6709\u5f88\u591a\u53ef\u590d\u7528\u7684\u90e8\u5206\uff0c\u8fd9\u65f6\u5019\u6211\u4eec\u53ef\u4ee5\u5c06\u5176\u5c01\u88c5\u6210\u4e0a\u5c42\u7684\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5e76\u91cd\u7528\u3002\u4f8b\u5982\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a foo.we \u7684\u6587\u4ef6\uff0c&lt;foo&gt; \u5c31\u662f\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u7684\u7ec4\u4ef6\u540d\u79f0\uff1a
+&lt;!-- foo.we --&gt;&lt;template&gt; &lt;div style="flex-direction: row;"&g">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link current ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link current ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u7ec4\u4ef6\u5c01\u88c5
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.942Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u7ec4\u4ef6\u5c01\u88c5"><a href="#\u7ec4\u4ef6\u5c01\u88c5" class="headerlink" title="\u7ec4\u4ef6\u5c01\u88c5"></a>\u7ec4\u4ef6\u5c01\u88c5</h1><p>\u7ecf\u5e38\u6211\u4eec\u4f1a\u53d1\u73b0 Weex \u7684 <code><template></code> \u4e2d\u6709\u5f88\u591a\u53ef\u590d\u7528\u7684\u90e8\u5206\uff0c\u8fd9\u65f6\u5019\u6211\u4eec\u53ef\u4ee5\u5c06\u5176\u5c01\u88c5\u6210\u4e0a\u5c42\u7684\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5e76\u91cd\u7528\u3002\u4f8b\u5982\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a <code>foo.we</code> \u7684\u6587\u4ef6\uff0c<code><foo></code> \u5c31\u662f\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u7684\u7ec4\u4ef6\u540d\u79f0\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment"><!-- foo.we --></span></div><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"flex-direction: row;"</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">src</span>=<span class="string">"{{image}}"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{title}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>&g
t;</span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> env = <span class="string">'foo'</span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">title</span>: <span class="literal">null</span>,</div><div class="line"> <span class="attr">image</span>: <span class="literal">null</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><code>foo.we</code> \u7684\u4e5f\u5305\u542b <code><template></code>\uff0c<code><style></code> \u548c <code><script></code>\uff0c\u5b9a\u4e49\u597d\u4e86\u540e\uff0c\u76f4\u63a5\u7528 <code><foo></code> \u6807\u7b7e\u5373\u53ef\u5c06\u5176\u5f15\u5165\u5230\u5176\u5b83\u7ec4\u4ef6\u7684 <code><template></code> \u4e2d\uff0c\u5e76\u4e14\u5728 <code><foo></code> \u6807\u7b7e\u4e0a\u8bbe\u7f6e\u5176 <code>data</code> \u540c\u540d\u7684\u7279\u6027\u4f1a\u5c06\u8fd9\u4e2a\u503c\u8d4b\u7ed9 <code><foo></code> \u7684\u4e0a\u4e0b\u6587\uff1a</p>
+<p><em>\u6ce8\u610f\u4e8b\u9879\uff1a\u7531\u4e8e HTML \u8bed\u6cd5\u4e2d\u7279\u6027\u540d\u662f\u4e0d\u533a\u5206\u5927\u5c0f\u5199\u7684\uff0c\u6240\u4ee5\u60a8\u65e0\u6cd5\u76f4\u63a5\u7528\u9a7c\u5cf0\u547d\u540d\uff0c\u6211\u4eec\u63d0\u4f9b\u4e86 hyphenated \u8bed\u6cd5\uff0c\u5728\u89e3\u6790\u4e4b\u540e\u8fd9\u4e9b\u540d\u79f0\u4f1a\u81ea\u52a8\u8f6c\u6362\u4e3a\u9a7c\u5cf0\u547d\u540d (\u6bd4\u5982\u5728 <code><template></code> \u7684\u7ec4\u4ef6\u7279\u6027\u91cc\u7528 <code>aaa-bbb-ccc</code> \u8868\u793a\u5176 <code>data</code> \u6216\u4e0a\u4e0b\u6587\u91cc\u7684 <code>aaaBbbCcc</code>)\u3002</em></p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment"><!-- bar.we --></span></div><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">foo</span> <span class="attr">title</span>=<span class="string">"..."</span> <span class="attr">image</span>=<span class="string">"..."</span>></span><span class="tag"></<span class="name">foo</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> env = <span class="string">'bar'</span></div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><em>\u6ce8\u610f\u4e8b\u9879\uff1a\u8fd9\u91cc <code>bar.we</code> \u548c <code>foo.we</code> \u5fc5\u987b\u5728\u540c\u76ee\u5f55\u4e0b\u624d\u80fd\u81ea\u52a8\u5efa\u7acb\u4f9d\u8d56\u5173\u7cfb\u3002</em></p>
+<p><em>\u6ce8\u610f\u4e8b\u9879\uff1a<code>foo.we</code> \u6587\u4ef6\u7684 <code><script></code> \u5177\u6709\u76f8\u5bf9\u72ec\u7acb\u7684\u4f5c\u7528\u57df\uff0c\u4e0d\u4f1a\u548c <code>bar.we</code> \u4e2d\u7684 <code><script></code> \u4ea7\u751f\u5e72\u6270\u3002\u540c\u65f6 <code><foo></code> \u5bf9\u8c61\u5177\u6709\u76f8\u5bf9\u72ec\u7acb\u7684\u5b50\u7ec4\u4ef6\u4e0a\u4e0b\u6587\uff0c\u5373 <code>this</code>\uff0c\u4e5f\u5305\u62ec\u5176\u5b9a\u4e49\u7684\u5b8c\u5168\u4e0d\u540c\u7684\u6570\u636e\u548c\u65b9\u6cd5\u3002</em></p>
+<h2 id="\u7ec4\u4ef6\u5d4c\u5957"><a href="#\u7ec4\u4ef6\u5d4c\u5957" class="headerlink" title="\u7ec4\u4ef6\u5d4c\u5957"></a>\u7ec4\u4ef6\u5d4c\u5957</h2><p>\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u4e5f\u652f\u6301\u5d4c\u5957\uff0c\u5982\u4e0b\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment"><!-- somepath/foo.we --></span></div><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"flex-direction: row;"</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">src</span>=<span class="string">"{{image}}"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{title}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template
</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="comment">// These keys must be declared explicitly here</span></div><div class="line"> <span class="comment">// or data-binding will not work from its parent.</span></div><div class="line"> title: <span class="literal">null</span>,</div><div class="line"> <span class="attr">image</span>: <span class="literal">null</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment"><!-- samepath/foo.list.we --></span></div><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{description}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">foo</span> <span class="attr">repeat</span>=<span class="string">"item in list"</span> <span class="attr">title</span>=<span class="string">"{{item.text}}"</span> <span class="attr">image</span>=<span class="string">"{{item.img}}"</span>></span><span class="tag"></<span class="name">foo</span>></span></div><div class="line"> <span class="tag"></<span class="
name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">description</span>: <span class="string">''</span>,</div><div class="line"> <span class="comment">// This key must be declared explicitly here</span></div><div class="line"> <span class="comment">// or data-binding will not work from its parent.</span></div><div class="line"> list: []</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment"><!-- samepath/main.we --></span></div><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">foo-list</span> <span class="attr">list</span>=<span class="string">"{{list}}"</span>></span><span class="tag"></<span class="name">foo-list</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">list</span>: [</div><div class="line"> {<span class="attr">text</span>: <span class="string">'
...'</span>, <span class="attr">img</span>: <span class="string">'...'</span>},</div><div class="line"> {<span class="attr">text</span>: <span class="string">'...'</span>, <span class="attr">img</span>: <span class="string">'...'</span>},</div><div class="line"> {<span class="attr">text</span>: <span class="string">'...'</span>, <span class="attr">img</span>: <span class="string">'...'</span>},</div><div class="line"> ...</div><div class="line"> ]</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p>\u8fd9\u91cc\u7684 <code>main.we</code> \u5d4c\u5957\u4e86 <code><foo-list></code>\uff0c<code><foo-list></code> \u5d4c\u5957\u4e86 <code><foo></code>\uff0c\u540c\u65f6\u7ec4\u4ef6\u53ef\u4ee5\u6b63\u5e38\u7684\u914d\u5408\u6570\u636e\u7ed1\u5b9a\u3001<code>repeat</code> \u7279\u6027\u7b49\u4f7f\u7528\u3002</p>
+<h2 id="\u66f4\u591a\u5b50\u7ec4\u4ef6\u7684\u5b9a\u4e49\u548c\u4e66\u5199\u65b9\u5f0f"><a href="#\u66f4\u591a\u5b50\u7ec4\u4ef6\u7684\u5b9a\u4e49\u548c\u4e66\u5199\u65b9\u5f0f" class="headerlink" title="\u66f4\u591a\u5b50\u7ec4\u4ef6\u7684\u5b9a\u4e49\u548c\u4e66\u5199\u65b9\u5f0f"></a>\u66f4\u591a\u5b50\u7ec4\u4ef6\u7684\u5b9a\u4e49\u548c\u4e66\u5199\u65b9\u5f0f</h2><p>\u9664\u4e86\u5728\u4e3b\u6587\u4ef6\u540c\u76ee\u5f55\u4e0b\u521b\u5efa\u548c\u88ab\u5c01\u88c5\u7ec4\u4ef6\u540c\u540d\u7684 <code>we</code> \u6587\u4ef6\u4e4b\u5916\uff0cWeex \u8fd8\u652f\u6301\u53e6\u5916\u51e0\u79cd\u5b50\u7ec4\u4ef6\u7684\u4e66\u5199\u65b9\u5f0f\uff1a</p>
+<ul>
+<li>\u5728 <code><script></code> \u4e2d\u901a\u8fc7 <code>require</code> \u5176\u5b83\u76ee\u5f55\u7684 <code>we</code> \u6587\u4ef6\u5b9a\u4e49\u540c\u540d\u7ec4\u4ef6</li>
+<li>\u5728\u4e3b\u6587\u4ef6\u4e0b\u65b0\u589e <code><element name="xxx"></code> \u6807\u7b7e\uff0c<code>name</code> \u7279\u6027\u7684\u503c\u4e3a\u65b0\u521b\u5efa\u7684\u7ec4\u4ef6\u540d\uff0c\u5176 <code><element></code> \u5185\u90e8\u7684\u5185\u5bb9\u662f\u5b9a\u4e49\u8be5\u7ec4\u4ef6\u7684\u4ee3\u7801</li>
+</ul>
+<p>\u6bd4\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment"><!-- path-a/main.we --></span></div><div class="line"><span class="tag"><<span class="name">element</span> <span class="attr">name</span>=<span class="string">"foo"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Foo<span class="tag"></<span class="name">text</span>></span></div><div class="line"><span class="tag"></<span class="name">element</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">foo</span>></span><span class="tag"></<span class="name">foo</span>></span></div><div class="line"> <span class="tag"><<span class="name">bar</span>></span><span cla
ss="tag"></<span class="name">bar</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">require</span>(<span class="string">'path-b/bar.we'</span>)</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment"><!-- path-b/bar.we --></span></div><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Bar<span class="tag"></<span class="name">text</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure>
+<p>\u8fd9\u6837\u7684\u8bdd\uff0c<code>path-a/main.we</code> \u6700\u7ec8\u5c55\u793a\u7684\u7ed3\u679c\u662f\u201cFoo\u201d\u548c\u201cBar\u201d\u4e24\u6bb5\u6587\u672c\u3002</p>
+<h2 id="\u6ce8\u610f\u4e8b\u9879"><a href="#\u6ce8\u610f\u4e8b\u9879" class="headerlink" title="\u6ce8\u610f\u4e8b\u9879"></a>\u6ce8\u610f\u4e8b\u9879</h2><ul>
+<li>\u7ec4\u4ef6\u5404\u81ea\u7684 <code><style></code> \u662f\u76f8\u4e92\u72ec\u7acb\u7684\uff0c\u4e0d\u4f1a\u62c5\u5fc3\u4e0d\u540c\u7ec4\u4ef6\u4e2d\u76f8\u540c\u7684 class name \u76f8\u4e92\u5e72\u6270\u3002</li>
+<li>\u5982\u679c\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5728\u7236\u7ec4\u4ef6\u4e2d\u6709 <code>id</code> \u7279\u6027\uff0c\u5219\u53ef\u4ee5\u5728\u7236\u7ec4\u4ef6\u4e0a\u4e0b\u6587\u4e2d\u901a\u8fc7 <code>this.$vm(id)</code> \u63a5\u53e3\u6765\u8bbf\u95ee\u8be5\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u7684\u4e0a\u4e0b\u6587\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 <code>this.$el(id)</code> \u6765\u627e\u5230\u5176\u80cc\u540e\u771f\u5b9e\u7684\u539f\u751f\u7ec4\u4ef6\u3002\u66f4\u591a\u8be6\u89c1<a href="./id.html">\u83b7\u53d6\u5b50\u7ec4\u4ef6\u4fe1\u606f</a></li>
+<li>\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u4e4b\u95f4\u901a\u4fe1\u7684\u95ee\u9898\u53ef\u4ee5\u53c2\u8003<a href="./comm.html">\u7ec4\u4ef6\u95f4\u901a\u4fe1</a></li>
+<li>\u4e0d\u8bba\u901a\u8fc7\u7236\u7ec4\u4ef6\u628a\u6570\u636e\u4f20\u9012\u8fdb\u6765\u8fd8\u662f\u5728\u5f53\u524d\u7ec4\u4ef6\u5185\u90e8\u5bf9\u6570\u636e\u53d1\u8d77\u4fee\u6539\uff0c\u53ea\u6709\u5728\u7ec4\u4ef6\u7684 <code>data</code> \u9009\u9879\u4e2d\u660e\u786e\u5199\u660e\u7684\u5b57\u6bb5\u624d\u4f1a\u88ab\u6b63\u5e38\u7684\u76d1\u542c\u3002</li>
+<li>\u4efb\u4f55\u7ec4\u4ef6\u76ee\u524d\u5747\u4e0d\u652f\u6301\u81ea\u95ed\u5408\u6807\u7b7e\u7684\u5199\u6cd5\uff0c\u8bf7\u52ff\u4f7f\u7528\u3002</li>
+</ul>
+<p>\u4e0b\u4e00\u8282\uff1a<a href="./id.html">\u83b7\u53d6\u5b50\u7ec4\u4ef6\u4fe1\u606f</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/syntax/composed-component.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[33/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/scroller.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/scroller.html b/content/cn/references/components/scroller.html
new file mode 100644
index 0000000..8eec4fc
--- /dev/null
+++ b/content/cn/references/components/scroller.html
@@ -0,0 +1,1387 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><scroller> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;scroller&gt;v0.6.1+
+&lt;scroller&gt; \u662f\u4e00\u4e2a\u7ad6\u76f4\u7684\uff0c\u53ef\u4ee5\u5bb9\u7eb3\u591a\u4e2a\u6392\u6210\u4e00\u5217\u7684\u5b50\u7ec4\u4ef6\u7684\u6eda\u52a8\u5668\u3002\u5982\u679c\u5b50\u7ec4\u4ef6\u7684\u603b\u9ad8\u5ea6\u9ad8\u4e8e\u5176\u672c\u8eab\uff0c\u90a3\u4e48\u6240\u6709\u7684\u5b50\u7ec4\u4ef6\u90fd\u53ef\u6eda\u52a8\u3002
+\u6ce8\u610f\uff1a &lt;scroller&gt; \u53ef\u4ee5\u5f53\u4f5c\u6839\u5143\u7d20\u6216\u8005\u5d4c\u5957\u5143\u7d20\u4f7f\u7528\u3002\u6b64\u7ec4\u4ef6\u7684\u6eda\u52a8\u65b9\u5411\u662f\u5782\u76f4\u65b9\u5411\u7684\u5f62\u5f0f\u3002
+\u5b50\u7ec4\u4ef6\u652f\u6301\u4efb\u610f\u7c7b\u578b\u7684 Weex \u7ec4\u4ef6\u4f5c\u4e3a\u5176\u5b50\u7ec4\u4ef6\u3002 \u5176\u4e2d\uff0c\u8fd8\u652f\u6301\u4ee5\u4e0b\u4e24\u4e2a\u7279\u6b8a\u7ec4\u4ef6\u4f5c\u4e3a\u5b50\u7ec4\u4ef6\uff1a
+
+&">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<scroller>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/scroller.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;scroller&gt;v0.6.1+
+&lt;scroller&gt; \u662f\u4e00\u4e2a\u7ad6\u76f4\u7684\uff0c\u53ef\u4ee5\u5bb9\u7eb3\u591a\u4e2a\u6392\u6210\u4e00\u5217\u7684\u5b50\u7ec4\u4ef6\u7684\u6eda\u52a8\u5668\u3002\u5982\u679c\u5b50\u7ec4\u4ef6\u7684\u603b\u9ad8\u5ea6\u9ad8\u4e8e\u5176\u672c\u8eab\uff0c\u90a3\u4e48\u6240\u6709\u7684\u5b50\u7ec4\u4ef6\u90fd\u53ef\u6eda\u52a8\u3002
+\u6ce8\u610f\uff1a &lt;scroller&gt; \u53ef\u4ee5\u5f53\u4f5c\u6839\u5143\u7d20\u6216\u8005\u5d4c\u5957\u5143\u7d20\u4f7f\u7528\u3002\u6b64\u7ec4\u4ef6\u7684\u6eda\u52a8\u65b9\u5411\u662f\u5782\u76f4\u65b9\u5411\u7684\u5f62\u5f0f\u3002
+\u5b50\u7ec4\u4ef6\u652f\u6301\u4efb\u610f\u7c7b\u578b\u7684 Weex \u7ec4\u4ef6\u4f5c\u4e3a\u5176\u5b50\u7ec4\u4ef6\u3002 \u5176\u4e2d\uff0c\u8fd8\u652f\u6301\u4ee5\u4e0b\u4e24\u4e2a\u7279\u6b8a\u7ec4\u4ef6\u4f5c\u4e3a\u5b50\u7ec4\u4ef6\uff1a
+
+&">
+<meta property="og:image" content="https://weex.apache.org/../images/scroller_1.jpg">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.849Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<scroller>">
+<meta name="twitter:description" content="&lt;scroller&gt;v0.6.1+
+&lt;scroller&gt; \u662f\u4e00\u4e2a\u7ad6\u76f4\u7684\uff0c\u53ef\u4ee5\u5bb9\u7eb3\u591a\u4e2a\u6392\u6210\u4e00\u5217\u7684\u5b50\u7ec4\u4ef6\u7684\u6eda\u52a8\u5668\u3002\u5982\u679c\u5b50\u7ec4\u4ef6\u7684\u603b\u9ad8\u5ea6\u9ad8\u4e8e\u5176\u672c\u8eab\uff0c\u90a3\u4e48\u6240\u6709\u7684\u5b50\u7ec4\u4ef6\u90fd\u53ef\u6eda\u52a8\u3002
+\u6ce8\u610f\uff1a &lt;scroller&gt; \u53ef\u4ee5\u5f53\u4f5c\u6839\u5143\u7d20\u6216\u8005\u5d4c\u5957\u5143\u7d20\u4f7f\u7528\u3002\u6b64\u7ec4\u4ef6\u7684\u6eda\u52a8\u65b9\u5411\u662f\u5782\u76f4\u65b9\u5411\u7684\u5f62\u5f0f\u3002
+\u5b50\u7ec4\u4ef6\u652f\u6301\u4efb\u610f\u7c7b\u578b\u7684 Weex \u7ec4\u4ef6\u4f5c\u4e3a\u5176\u5b50\u7ec4\u4ef6\u3002 \u5176\u4e2d\uff0c\u8fd8\u652f\u6301\u4ee5\u4e0b\u4e24\u4e2a\u7279\u6b8a\u7ec4\u4ef6\u4f5c\u4e3a\u5b50\u7ec4\u4ef6\uff1a
+
+&">
+<meta name="twitter:image" content="https://weex.apache.org/../images/scroller_1.jpg">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link current "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link current "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <scroller>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.849Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-scroller-gt"><a href="#lt-scroller-gt" class="headerlink" title="<scroller>"></a><scroller></h1><p><span class="weex-version">v0.6.1+</span></p>
+<p><code><scroller></code> \u662f\u4e00\u4e2a\u7ad6\u76f4\u7684\uff0c\u53ef\u4ee5\u5bb9\u7eb3\u591a\u4e2a\u6392\u6210\u4e00\u5217\u7684\u5b50\u7ec4\u4ef6\u7684\u6eda\u52a8\u5668\u3002\u5982\u679c\u5b50\u7ec4\u4ef6\u7684\u603b\u9ad8\u5ea6\u9ad8\u4e8e\u5176\u672c\u8eab\uff0c\u90a3\u4e48\u6240\u6709\u7684\u5b50\u7ec4\u4ef6\u90fd\u53ef\u6eda\u52a8\u3002</p>
+<p><strong>\u6ce8\u610f\uff1a</strong> <code><scroller></code> \u53ef\u4ee5\u5f53\u4f5c\u6839\u5143\u7d20\u6216\u8005\u5d4c\u5957\u5143\u7d20\u4f7f\u7528\u3002\u6b64\u7ec4\u4ef6\u7684\u6eda\u52a8\u65b9\u5411\u662f\u5782\u76f4\u65b9\u5411\u7684\u5f62\u5f0f\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p>\u652f\u6301\u4efb\u610f\u7c7b\u578b\u7684 Weex \u7ec4\u4ef6\u4f5c\u4e3a\u5176\u5b50\u7ec4\u4ef6\u3002 \u5176\u4e2d\uff0c\u8fd8\u652f\u6301\u4ee5\u4e0b\u4e24\u4e2a\u7279\u6b8a\u7ec4\u4ef6\u4f5c\u4e3a\u5b50\u7ec4\u4ef6\uff1a</p>
+<ul>
+<li><p><code><refresh></code></p>
+<p>\u7528\u4e8e\u7ed9\u5217\u8868\u6dfb\u52a0\u4e0b\u62c9\u5237\u65b0\u7684\u529f\u80fd\u3002</p>
+<p>\u4f7f\u7528\u6587\u6863\u8bf7\u67e5\u770b <a href="./refresh.html"><code><refresh></code></a></p>
+</li>
+<li><p><code><loading></code></p>
+<p><code><loading></code> \u7528\u6cd5\u4e0e\u7279\u6027\u548c <code><refresh></code> \u7c7b\u4f3c\uff0c\u7528\u4e8e\u7ed9\u5217\u8868\u6dfb\u52a0\u4e0a\u62c9\u52a0\u8f7d\u66f4\u591a\u7684\u529f\u80fd\u3002</p>
+<p>\u4f7f\u7528\u6587\u6863\u8bf7\u67e5\u770b <a href="./loading.html"><code><loading></code></a></p>
+</li>
+</ul>
+<h2 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h2><ul>
+<li><code>show-scrollbar {boolean}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>true</code>/ <code>false</code>\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>true</code>\u3002\u63a7\u5236\u662f\u5426\u51fa\u73b0\u6eda\u52a8\u6761\u3002</li>
+<li><code>scroll-direction {string}</code>\uff1a\u53ef\u9009\u4e3a <code>horizontal</code> \u6216\u8005 <code>vertical</code>\uff0c\u9ed8\u8ba4\u503c\u4e3a <code>vertical</code> \u3002\u5b9a\u4e49\u6eda\u52a8\u7684\u65b9\u5411\u3002</li>
+<li><p><code>loadmoreoffset {number}</code>\uff1a\u9ed8\u8ba4\u503c\u4e3a 0\uff0c\u89e6\u53d1 <code>loadmore</code> \u4e8b\u4ef6\u6240\u9700\u8981\u7684\u5782\u76f4\u504f\u79fb\u8ddd\u79bb\uff08\u8bbe\u5907\u5c4f\u5e55\u5e95\u90e8\u4e0e\u9875\u9762\u5e95\u90e8\u4e4b\u95f4\u7684\u8ddd\u79bb\uff09\u3002\u5f53\u9875\u9762\u7684\u6eda\u52a8\u6761\u6eda\u52a8\u5230\u8db3\u591f\u63a5\u8fd1\u9875\u9762\u5e95\u90e8\u65f6\u5c06\u4f1a\u89e6\u53d1 <code>loadmore</code> \u8fd9\u4e2a\u4e8b\u4ef6\u3002</p>
+<p><img src="../images/scroller_1.jpg" alt="mobile_preview"></p>
+</li>
+<li><p><code>loadmoreretry {number}</code>\uff1a\u9ed8\u8ba4\u503c\u4e3a 0\uff0c\u5f53 <code>loadmore</code> \u5931\u8d25\u65f6\u662f\u5426\u91cd\u7f6e <code>loadmore</code> \u76f8\u5173\u7684 UI\uff0c\u503c\u4e0d\u4e00\u6837\u5c31\u4f1a\u91cd\u7f6e\u3002</p>
+</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><ul>
+<li><p>\u901a\u7528\u6837\u5f0f\uff1a\u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+</li>
+</ul>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><ul>
+<li><code>loadmore</code> <sup class="wx-v">v0.5+</sup>\uff1a\u5982\u679c\u6eda\u52a8\u5230\u5e95\u90e8\u5c06\u4f1a\u7acb\u5373\u89e6\u53d1\u8fd9\u4e2a\u4e8b\u4ef6\uff0c\u4f60\u53ef\u4ee5\u5728\u8fd9\u4e2a\u4e8b\u4ef6\u7684\u5904\u7406\u51fd\u6570\u4e2d\u52a0\u8f7d\u4e0b\u4e00\u9875\u7684\u5217\u8868\u9879\u3002</li>
+<li><p>\u901a\u7528\u4e8b\u4ef6</p>
+<p>\u652f\u6301\u6240\u6709\u901a\u7528\u4e8b\u4ef6\uff1a</p>
+<ul>
+<li><code>click</code></li>
+<li><code>longpress</code></li>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a></p>
+</li>
+</ul>
+<h2 id="\u6269\u5c55"><a href="#\u6269\u5c55" class="headerlink" title="\u6269\u5c55"></a>\u6269\u5c55</h2><h3 id="scrollToElement-node-options"><a href="#scrollToElement-node-options" class="headerlink" title="scrollToElement(node, options)"></a>scrollToElement(node, options)</h3><p>\u6eda\u52a8\u5230\u5217\u8868\u67d0\u4e2a\u6307\u5b9a\u9879\u662f\u5e38\u89c1\u9700\u6c42\uff0c<code><list></code> \u62d3\u5c55\u4e86\u8be5\u529f\u80fd\u652f\u6301\u6eda\u52a8\u5230\u6307\u5b9a <code><cell></code>\u3002\u901a\u8fc7 <code>dom</code> module \u8bbf\u95ee\uff0c\u66f4\u591a\u4fe1\u606f\u53ef\u53c2\u8003 <a href="../modules/dom.html">dom module</a> \u3002</p>
+<h4 id="\u53c2\u6570"><a href="#\u53c2\u6570" class="headerlink" title="\u53c2\u6570"></a>\u53c2\u6570</h4><ul>
+<li><code>node {node}</code>\uff1a\u6307\u5b9a\u76ee\u6807\u8282\u70b9\u3002</li>
+<li><code>options {Object}</code>\uff1a<ul>
+<li><code>offset {number}</code>\uff1a\u4e00\u4e2a\u5230\u5176\u53ef\u89c1\u4f4d\u7f6e\u7684\u504f\u79fb\u8ddd\u79bb\uff0c\u9ed8\u8ba4\u662f0</li>
+</ul>
+</li>
+</ul>
+<h2 id="\u7ea6\u675f"><a href="#\u7ea6\u675f" class="headerlink" title="\u7ea6\u675f"></a>\u7ea6\u675f</h2><p><strong>\u4e0d\u5141\u8bb8</strong>\u76f8\u540c\u65b9\u5411\u7684 <code><list></code> \u6216\u8005 <code><scroller></code> \u4e92\u76f8\u5d4c\u5957\uff0c\u6362\u53e5\u8bdd\u8bf4\u5c31\u662f\u5d4c\u5957\u7684 <code><list></code>/<code><scroller></code> \u5fc5\u987b\u662f\u4e0d\u540c\u7684\u65b9\u5411\u3002</p>
+<p>\u4e3e\u4e2a\u4f8b\u5b50\uff0c<strong>\u4e0d\u5141\u8bb8</strong>\u4e00\u4e2a\u5782\u76f4\u65b9\u5411\u7684 <code><list></code> \u5d4c\u5957\u7684\u4e00\u4e2a\u5782\u76f4\u65b9\u5411\u7684 <code><scroller></code> \u4e2d\uff0c\u4f46\u662f\u4e00\u4e2a\u5782\u76f4\u65b9\u5411\u7684 <code><list></code> \u662f\u53ef\u4ee5\u5d4c\u5957\u7684\u4e00\u4e2a\u6c34\u5e73\u65b9\u5411\u7684 <code><list></code> \u6216\u8005 <code><scroller></code> \u4e2d\u7684\u3002</p>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">scroller</span> <span class="attr">class</span>=<span class="string">"scroller"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span> <span class="attr">v-for</span>=<span class="string">"(name, index) in rows"</span> <span class="attr">:ref</span>=<span class="string">"'item'+index"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span cl
ass="string">"text"</span> <span class="attr">:ref</span>=<span class="string">"'text'+index"</span>></span>{{name}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">scroller</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"group"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> @<span class="attr">click</span>=<span class="string">"goto10"</span> <span class="attr">class</span>=<span class="string">"button"</span>></span>Go to 10<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> @<span class="attr">click</span>=<span class="string">"goto2
0"</span> <span class="attr">class</span>=<span class="string">"button"</span>></span>Go to 20<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">const</span> dom = weex.requireModule(<span class="string">'dom'</span>)</div><div class="line"></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">rows<
/span>: []</div><div class="line"> }</div><div class="line"> },</div><div class="line"> created () {</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < <span class="number">30</span>; i++) {</div><div class="line"> <span class="keyword">this</span>.rows.push(<span class="string">'row '</span> + i)</div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> goto10 (count) {</div><div class="line"> <span class="keyword">const</span> el = <span class="keyword">this</span>.$refs.item10[<span class="number">0</span>]</div><div class="line"> dom.scrollToElement(el, {})</div><div class="line"> },</div><div class="line"> goto20 (count) {</div><div class="line"> <span class="keyword">const</span> el = <span
class="keyword">this</span>.$refs.item20[<span class="number">0</span>]</div><div class="line"> dom.scrollToElement(el, { <span class="attr">offset</span>: <span class="number">0</span> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.scroller</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">3px</span>;</div><div class="line"> <span class="attr
ibute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="built_in">rgb</span>(162, 217, 192);</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">25px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.row</span> {</div><div class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</div><div class="line"> <span class="attribute">flex-direction</span>: column;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">padding-left</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">border-bottom-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-bottom-style</span>: solid;</div><div class="line"> <span class="attribute">border-bo
ttom-color</span>: <span class="number">#DDDDDD</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.text</span> {</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">45px</span>;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#666666</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.group</span> {</div><div class="line"> <span class="attribute">flex-direction</span>: row;</div><div class="line"> <span class="attribute">justify-content</span>: center;</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">60px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.button</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</div><div class="line"> <span class="attribute
">padding-top</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">padding-bottom</span>: <span class="number">20px</span>;</div><div class="line"> <span class="attribute">font-size</span>: <span class="number">40px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">margin-right</span>: <span class="number">30px</span>;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="built_in">rgb</span>(162, 217, 192);</div><div class="line"> <span
class="attribute">background-color</span>: <span class="built_in">rgba</span>(162, 217, 192, 0.2);</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/scroller.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/scroller.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/scroller.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/components/slider.html
----------------------------------------------------------------------
diff --git a/content/cn/references/components/slider.html b/content/cn/references/components/slider.html
new file mode 100644
index 0000000..649e4fa
--- /dev/null
+++ b/content/cn/references/components/slider.html
@@ -0,0 +1,1372 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title><slider> | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="&lt;slider&gt;&lt;slider&gt; \u7ec4\u4ef6\u7528\u4e8e\u5728\u4e00\u4e2a\u9875\u9762\u4e2d\u5c55\u793a\u591a\u4e2a\u56fe\u7247\uff0c\u5728\u524d\u7aef\uff0c\u8fd9\u79cd\u6548\u679c\u88ab\u79f0\u4e3a \u8f6e\u64ad\u56fe\u3002
+\u5b50\u7ec4\u4ef6\u652f\u6301\u4efb\u610f\u7c7b\u578b\u7684 Weex \u7ec4\u4ef6\u4f5c\u4e3a\u5176\u5b50\u7ec4\u4ef6\u3002 \u5176\u4e2d\uff0c\u8fd8\u652f\u6301\u4ee5\u4e0b\u7ec4\u4ef6\u4f5c\u4e3a\u5b50\u7ec4\u4ef6\u5c55\u793a\u7279\u6b8a\u6548\u679c\uff1a
+
+&lt;indicator&gt;\uff1a\u7528\u4e8e\u663e\u793a\u8f6e\u64ad\u56fe\u6307\u793a\u5668\u6548\u679c\uff0c\u5fc5\u987b\u5145\u5f53 &lt;slider&gt; \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\u4f7f\u7528\u3002
+
+\u7279\u6027
+auto-play {boolean}\uff1a\u53ef\u9009">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<slider>">
+<meta property="og:url" content="https://weex.apache.org/cn/references/components/slider.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="&lt;slider&gt;&lt;slider&gt; \u7ec4\u4ef6\u7528\u4e8e\u5728\u4e00\u4e2a\u9875\u9762\u4e2d\u5c55\u793a\u591a\u4e2a\u56fe\u7247\uff0c\u5728\u524d\u7aef\uff0c\u8fd9\u79cd\u6548\u679c\u88ab\u79f0\u4e3a \u8f6e\u64ad\u56fe\u3002
+\u5b50\u7ec4\u4ef6\u652f\u6301\u4efb\u610f\u7c7b\u578b\u7684 Weex \u7ec4\u4ef6\u4f5c\u4e3a\u5176\u5b50\u7ec4\u4ef6\u3002 \u5176\u4e2d\uff0c\u8fd8\u652f\u6301\u4ee5\u4e0b\u7ec4\u4ef6\u4f5c\u4e3a\u5b50\u7ec4\u4ef6\u5c55\u793a\u7279\u6b8a\u6548\u679c\uff1a
+
+&lt;indicator&gt;\uff1a\u7528\u4e8e\u663e\u793a\u8f6e\u64ad\u56fe\u6307\u793a\u5668\u6548\u679c\uff0c\u5fc5\u987b\u5145\u5f53 &lt;slider&gt; \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\u4f7f\u7528\u3002
+
+\u7279\u6027
+auto-play {boolean}\uff1a\u53ef\u9009">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.850Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="<slider>">
+<meta name="twitter:description" content="&lt;slider&gt;&lt;slider&gt; \u7ec4\u4ef6\u7528\u4e8e\u5728\u4e00\u4e2a\u9875\u9762\u4e2d\u5c55\u793a\u591a\u4e2a\u56fe\u7247\uff0c\u5728\u524d\u7aef\uff0c\u8fd9\u79cd\u6548\u679c\u88ab\u79f0\u4e3a \u8f6e\u64ad\u56fe\u3002
+\u5b50\u7ec4\u4ef6\u652f\u6301\u4efb\u610f\u7c7b\u578b\u7684 Weex \u7ec4\u4ef6\u4f5c\u4e3a\u5176\u5b50\u7ec4\u4ef6\u3002 \u5176\u4e2d\uff0c\u8fd8\u652f\u6301\u4ee5\u4e0b\u7ec4\u4ef6\u4f5c\u4e3a\u5b50\u7ec4\u4ef6\u5c55\u793a\u7279\u6b8a\u6548\u679c\uff1a
+
+&lt;indicator&gt;\uff1a\u7528\u4e8e\u663e\u793a\u8f6e\u64ad\u56fe\u6307\u793a\u5668\u6548\u679c\uff0c\u5fc5\u987b\u5145\u5f53 &lt;slider&gt; \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\u4f7f\u7528\u3002
+
+\u7279\u6027
+auto-play {boolean}\uff1a\u53ef\u9009">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link current "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link current "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ <slider>
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.850Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="lt-slider-gt"><a href="#lt-slider-gt" class="headerlink" title="<slider>"></a><slider></h1><p><code><slider></code> \u7ec4\u4ef6\u7528\u4e8e\u5728\u4e00\u4e2a\u9875\u9762\u4e2d\u5c55\u793a\u591a\u4e2a\u56fe\u7247\uff0c\u5728\u524d\u7aef\uff0c\u8fd9\u79cd\u6548\u679c\u88ab\u79f0\u4e3a <code>\u8f6e\u64ad\u56fe</code>\u3002</p>
+<h2 id="\u5b50\u7ec4\u4ef6"><a href="#\u5b50\u7ec4\u4ef6" class="headerlink" title="\u5b50\u7ec4\u4ef6"></a>\u5b50\u7ec4\u4ef6</h2><p>\u652f\u6301\u4efb\u610f\u7c7b\u578b\u7684 Weex \u7ec4\u4ef6\u4f5c\u4e3a\u5176\u5b50\u7ec4\u4ef6\u3002 \u5176\u4e2d\uff0c\u8fd8\u652f\u6301\u4ee5\u4e0b\u7ec4\u4ef6\u4f5c\u4e3a\u5b50\u7ec4\u4ef6\u5c55\u793a\u7279\u6b8a\u6548\u679c\uff1a</p>
+<ul>
+<li><code><indicator></code>\uff1a\u7528\u4e8e\u663e\u793a\u8f6e\u64ad\u56fe\u6307\u793a\u5668\u6548\u679c\uff0c\u5fc5\u987b\u5145\u5f53 <a href="./slider.html"><code><slider></code></a> \u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\u4f7f\u7528\u3002</li>
+</ul>
+<h2 id="\u7279\u6027"><a href="#\u7279\u6027" class="headerlink" title="\u7279\u6027"></a>\u7279\u6027</h2><ul>
+<li><p><code>auto-play {boolean}</code>\uff1a\u53ef\u9009\u503c\u4e3a <code>true</code>/<code>false</code>\uff0c\u9ed8\u8ba4\u7684\u662f <code>false</code>\u3002</p>
+<p>\u8be5\u503c\u51b3\u5b9a\u662f\u5426\u81ea\u52a8\u64ad\u653e\u8f6e\u64ad\u3002\u91cd\u7f6e <code>loadmore</code> \u76f8\u5173\u7684 UI\uff0c\u503c\u4e0d\u4e00\u6837\u5c31\u4f1a\u91cd\u7f6e\u3002</p>
+</li>
+<li><p><code>interval {number}</code>\uff1a\u503c\u4e3a\u6beb\u79d2\u6570\uff0c\u6b64\u503c\u8bbe\u5b9a slider \u5207\u6362\u65f6\u95f4\u95f4\u9694\u3002\u5f53 <code>auto-play</code> \u503c\u4e3a <code>true</code> \u65f6\u751f\u6548\u3002</p>
+</li>
+</ul>
+<h2 id="\u6837\u5f0f"><a href="#\u6837\u5f0f" class="headerlink" title="\u6837\u5f0f"></a>\u6837\u5f0f</h2><ul>
+<li><p>\u901a\u7528\u6837\u5f0f\uff1a\u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f</p>
+<ul>
+<li>\u76d2\u6a21\u578b</li>
+<li><code>flexbox</code> \u5e03\u5c40</li>
+<li><code>position</code></li>
+<li><code>opacity</code></li>
+<li><code>background-color</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-style.html">\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f</a></p>
+</li>
+</ul>
+<h2 id="\u4e8b\u4ef6"><a href="#\u4e8b\u4ef6" class="headerlink" title="\u4e8b\u4ef6"></a>\u4e8b\u4ef6</h2><ul>
+<li><p><code>change</code>: \u5f53\u8f6e\u64ad\u7d22\u5f15\u6539\u53d8\u65f6\uff0c\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002</p>
+<p>\u4e8b\u4ef6\u4e2d event \u5bf9\u8c61\u5c5e\u6027\uff1a</p>
+<ul>
+<li><code>index</code>\uff1a\u5c55\u793a\u7684\u56fe\u7247\u7d22\u5f15</li>
+</ul>
+</li>
+<li><p>\u901a\u7528\u4e8b\u4ef6</p>
+<p>\u652f\u6301\u6240\u6709\u901a\u7528\u4e8b\u4ef6\uff1a</p>
+<ul>
+<li><code>click</code></li>
+<li><code>longpress</code></li>
+<li><code>appear</code></li>
+<li><code>disappear</code></li>
+</ul>
+<p>\u67e5\u770b <a href="../common-event.html">\u901a\u7528\u4e8b\u4ef6</a></p>
+</li>
+</ul>
+<h2 id="\u793a\u4f8b"><a href="#\u793a\u4f8b" class="headerlink" title="\u793a\u4f8b"></a>\u793a\u4f8b</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">slider</span> <span class="attr">class</span>=<span class="string">"slider"</span> <span class="attr">interval</span>=<span class="string">"3000"</span> <span class="attr">auto-play</span>=<span class="string">"true"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"frame"</span> <span class="attr">v-for</span>=<span class="string">"img in imageList"</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">class</span>=<span class="stri
ng">"image"</span> <span class="attr">resize</span>=<span class="string">"cover"</span> <span class="attr">:src</span>=<span class="string">"img.src"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">slider</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.image</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">
height</span>: <span class="number">700px</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.slider</span> {</div><div class="line"> <span class="attribute">margin-top</span>: <span class="number">25px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: <span class="number">25px</span>;</div><div class="line"> <span class="attribute">width</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line"> <span class="attribute">border-style</span>: solid;</div><div class="line"> <span class="attribute">border-color</span>: <span class="number">#41B883</span>;</div><div class="line"> }</div><div class="line"> <span class="selector-class">.frame</span> {</div><div class="line"> <s
pan class="attribute">width</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">700px</span>;</div><div class="line"> <span class="attribute">position</span>: relative;</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> data () {</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">imageList</span>: [</div><div class="line"> { <span class="attr">src</span>: <span class="string">'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'</span>},</div><div
class="line"> { <span class="attr">src</span>: <span class="string">'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'</span>},</div><div class="line"> { <span class="attr">src</span>: <span class="string">'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'</span>}</div><div class="line"> ]</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="../../../examples/slider.html">try it</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/components/slider.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/components/slider.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
[44/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
Posted by ji...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/advanced/extend-to-ios.html
----------------------------------------------------------------------
diff --git a/content/cn/references/advanced/extend-to-ios.html b/content/cn/references/advanced/extend-to-ios.html
new file mode 100644
index 0000000..fff7168
--- /dev/null
+++ b/content/cn/references/advanced/extend-to-ios.html
@@ -0,0 +1,1435 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>iOS \u6269\u5c55 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="Module \u6269\u5c55swift \u6269\u5c55 module
+Weex SDK \u53ea\u63d0\u4f9b\u6e32\u67d3\uff0c\u800c\u4e0d\u662f\u5176\u4ed6\u7684\u80fd\u529b\uff0c\u5982\u679c\u4f60\u9700\u8981 \u50cf\u7f51\u7edc\uff0c\u56fe\u7247\uff0cURL\u8df3\u8f6c\u8fd9\u4e9b\u7279\u6027\uff0c\u9700\u8981\u81ea\u5df1\u52a8\u624b\u5b9e\u73b0\u4ed6\u4eec\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u60f3\u5b9e\u73b0\u4e00\u4e2aurl\u5730\u5740\u8df3\u8f6c\u51fd\u6570\uff0c\u4f60\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u6b65\u9aa4\u5b9e\u73b0\u4e00\u4e2a Module
+
+\u81ea\u5b9a\u4e49module\u7684\u6b65\u9aa4
+
+\u81ea\u5b9a\u4e49\u7684module\u7c7b \u5fc5\u987b\u5b9e\u73b0 WXModuleProtocol
+\u5fc5\u987b\u6dfb\u52a0\u5b8fWX_EXPORT_METHOD, \u5b83\u53ef\u4ee5">
+<meta property="og:type" content="website">
+<meta property="og:title" content="iOS \u6269\u5c55">
+<meta property="og:url" content="https://weex.apache.org/cn/references/advanced/extend-to-ios.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="Module \u6269\u5c55swift \u6269\u5c55 module
+Weex SDK \u53ea\u63d0\u4f9b\u6e32\u67d3\uff0c\u800c\u4e0d\u662f\u5176\u4ed6\u7684\u80fd\u529b\uff0c\u5982\u679c\u4f60\u9700\u8981 \u50cf\u7f51\u7edc\uff0c\u56fe\u7247\uff0cURL\u8df3\u8f6c\u8fd9\u4e9b\u7279\u6027\uff0c\u9700\u8981\u81ea\u5df1\u52a8\u624b\u5b9e\u73b0\u4ed6\u4eec\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u60f3\u5b9e\u73b0\u4e00\u4e2aurl\u5730\u5740\u8df3\u8f6c\u51fd\u6570\uff0c\u4f60\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u6b65\u9aa4\u5b9e\u73b0\u4e00\u4e2a Module
+
+\u81ea\u5b9a\u4e49module\u7684\u6b65\u9aa4
+
+\u81ea\u5b9a\u4e49\u7684module\u7c7b \u5fc5\u987b\u5b9e\u73b0 WXModuleProtocol
+\u5fc5\u987b\u6dfb\u52a0\u5b8fWX_EXPORT_METHOD, \u5b83\u53ef\u4ee5">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.835Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="iOS \u6269\u5c55">
+<meta name="twitter:description" content="Module \u6269\u5c55swift \u6269\u5c55 module
+Weex SDK \u53ea\u63d0\u4f9b\u6e32\u67d3\uff0c\u800c\u4e0d\u662f\u5176\u4ed6\u7684\u80fd\u529b\uff0c\u5982\u679c\u4f60\u9700\u8981 \u50cf\u7f51\u7edc\uff0c\u56fe\u7247\uff0cURL\u8df3\u8f6c\u8fd9\u4e9b\u7279\u6027\uff0c\u9700\u8981\u81ea\u5df1\u52a8\u624b\u5b9e\u73b0\u4ed6\u4eec\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u60f3\u5b9e\u73b0\u4e00\u4e2aurl\u5730\u5740\u8df3\u8f6c\u51fd\u6570\uff0c\u4f60\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u6b65\u9aa4\u5b9e\u73b0\u4e00\u4e2a Module
+
+\u81ea\u5b9a\u4e49module\u7684\u6b65\u9aa4
+
+\u81ea\u5b9a\u4e49\u7684module\u7c7b \u5fc5\u987b\u5b9e\u73b0 WXModuleProtocol
+\u5fc5\u987b\u6dfb\u52a0\u5b8fWX_EXPORT_METHOD, \u5b83\u53ef\u4ee5">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link current ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link current ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ iOS \u6269\u5c55
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.835Z">Updated time: 01/02/2017</time>
+</header>
+ <h2 id="Module-\u6269\u5c55"><a href="#Module-\u6269\u5c55" class="headerlink" title="Module \u6269\u5c55"></a>Module \u6269\u5c55</h2><p><a href="https://github.com/weexteam/article/issues/55" target="_blank" rel="external">swift</a> \u6269\u5c55 module </p>
+<p>Weex SDK \u53ea\u63d0\u4f9b\u6e32\u67d3\uff0c\u800c\u4e0d\u662f\u5176\u4ed6\u7684\u80fd\u529b\uff0c\u5982\u679c\u4f60\u9700\u8981 \u50cf\u7f51\u7edc\uff0c\u56fe\u7247\uff0cURL\u8df3\u8f6c\u8fd9\u4e9b\u7279\u6027\uff0c\u9700\u8981\u81ea\u5df1\u52a8\u624b\u5b9e\u73b0\u4ed6\u4eec<br>\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u60f3\u5b9e\u73b0\u4e00\u4e2aurl\u5730\u5740\u8df3\u8f6c\u51fd\u6570\uff0c\u4f60\u53ef\u4ee5\u6309\u7167\u5982\u4e0b\u6b65\u9aa4\u5b9e\u73b0\u4e00\u4e2a Module</p>
+<ol>
+<li><p><strong>\u81ea\u5b9a\u4e49module\u7684\u6b65\u9aa4</strong></p>
+<ol>
+<li>\u81ea\u5b9a\u4e49\u7684module\u7c7b \u5fc5\u987b\u5b9e\u73b0 <code>WXModuleProtocol</code></li>
+<li>\u5fc5\u987b\u6dfb\u52a0\u5b8f<code>WX_EXPORT_METHOD</code>, \u5b83\u53ef\u4ee5\u88abweex\u8bc6\u522b\uff0c\u5b83\u7684\u53c2\u6570\u662f JavaScript\u8c03\u7528 module\u6307\u5b9a\u65b9\u6cd5\u7684\u53c2\u6570</li>
+<li>\u6dfb\u52a0<code>@synthesized weexInstance</code>\uff0c\u6bcf\u4e2amoudle\u5bf9\u8c61\u88ab\u7ed1\u5b9a\u5230\u4e00\u4e2a\u6307\u5b9a\u7684\u5b9e\u4f8b\u4e0a</li>
+<li>Module \u65b9\u6cd5\u4f1a\u5728UI\u7ebf\u7a0b\u4e2d\u88ab\u8c03\u7528\uff0c\u6240\u4ee5\u4e0d\u8981\u505a\u592a\u591a\u8017\u65f6\u7684\u4efb\u52a1\u5728\u8fd9\u91cc\uff0c\u5982\u679c\u8981\u5728\u5176\u4ed6\u7ebf\u7a0b\u6267\u884c\u6574\u4e2amodule \u65b9\u6cd5\uff0c\u9700\u8981\u5b9e\u73b0<code>WXModuleProtocol</code>\u4e2d<code>- (NSThread *)targetExecuteThread</code>\u7684\u65b9\u6cd5\uff0c\u8fd9\u6837\uff0c\u5206\u53d1\u5230\u8fd9\u4e2amodule\u7684\u4efb\u52a1\u4f1a\u5728\u6307\u5b9a\u7684\u7ebf\u7a0b\u4e2d\u8fd0\u884c</li>
+<li>Weex \u7684\u53c2\u6570\u53ef\u4ee5\u662f String \u6216\u8005Map</li>
+<li><p>Module \u652f\u6301\u8fd4\u56de\u503c\u7ed9 JavaScript\u4e2d\u7684\u56de\u8c03\uff0c\u56de\u8c03\u7684\u7c7b\u578b\u662f<code>WXModuleCallback</code>,\u56de\u8c03\u7684\u53c2\u6570\u53ef\u4ee5\u662fString\u6216\u8005Map</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">@implementation WXEventModule</div><div class="line">@synthesize weexInstance;</div><div class="line"> WX_EXPORT_METHOD(@selector(openURL:callback))</div><div class="line">- (void)openURL:(NSString *)url callback:(WXModuleCallback)callback</div><div class="line">{</div><div class="line"> NSString *newURL = url;</div><div class="line"> if ([url hasPrefix:@"//"]) {</div><div class="line"> newURL = [NSString stringWithFormat:@"http:%@", url];</div><div class="line"> } else if (![url hasPrefix:@"http"]) {</div><div class="line"> newURL = [NSURL URLWithString:url relativeToURL:weexInstance.scriptURL].absoluteString;</div><div class="line"> }</div><div class="line"></div><div class="line"> UIViewController *controller = [[WXDemoViewController alloc] init];</div><div class="line"> ((WXDemoViewController *)controller).url
= [NSURL URLWithString:newURL];</div><div class="line"></div><div class="line"> [[weexInstance.viewController navigationController] pushViewController:controller animated:YES];</div><div class="line"> callback(@{@"result":@"success"});</div><div class="line">}</div><div class="line"></div><div class="line">@end</div></pre></td></tr></table></figure>
+</li>
+</ol>
+</li>
+<li><p><strong>Register the module</strong><br>\u901a\u8fc7\u8c03\u7528 WXSDKEngine \u4e2d\u7684 <code>registerModule:withClass</code>\u65b9\u6cd5\u6765\u6ce8\u518c\u81ea\u5df1\u7684module</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">WXSDKEngine.h</div><div class="line">/**</div><div class="line">* @abstract Registers a module for a given name</div><div class="line">* @param name The module name to register</div><div class="line">* @param clazz The module class to register</div><div class="line">**/</div><div class="line">+ (void)registerModule:(NSString *)name withClass:(Class)clazz;</div><div class="line">[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];</div></pre></td></tr></table></figure>
+</li>
+<li><p><strong>\u4f7f\u7528\u81ea\u5df1\u7684module</strong><br> \u8fd9\u91cc\u7684 require \u91cc\u9762\u7684event \u5c31\u662f\u5728 \u4e0a\u4e00\u6b65\u8c03\u7528<code>registerModule:</code> \u6ce8\u518cmodule \u65f6\u5019\u7684name</p>
+<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> eventModule = <span class="built_in">require</span>(<span class="string">'@weex-module/event'</span>); </div><div class="line">eventModule.openURL(<span class="string">'url'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">ret</span>) </span>{ </div><div class="line"> nativeLog(ret);</div><div class="line">});</div></pre></td></tr></table></figure>
+</li>
+</ol>
+<p> Weex SDK\u6ca1\u6709 \u56fe\u7247\u4e0b\u8f7d\uff0cnavigation \u64cd\u4f5c\u7684\u80fd\u529b\uff0c\u8bf7\u5927\u5bb6\u81ea\u5df1\u5b9e\u73b0\u8fd9\u4e9b protocol</p>
+<ol>
+<li><p><strong>WXImgLoaderProtocol</strong> </p>
+<p>weexSDK \u6ca1\u6709\u56fe\u7247\u4e0b\u8f7d\u7684\u80fd\u529b\uff0c\u9700\u8981\u5b9e\u73b0 WXImgLoaderProtocol,\u53c2\u8003\u4e0b\u9762\u7684\u4f8b\u5b50</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">WXImageLoaderProtocol.h</div><div class="line">@protocol WXImgLoaderProtocol <WXModuleProtocol></div><div class="line">/**</div><div class="line"> * @abstract Creates a image download handler with a given URL</div><div class="line"> * @param imageUrl The URL of the image to download</div><div class="line"> * @param imageFrame The frame of the image you want to set</div><div class="line"> * @param options : The options to be used for this download</div><div class="line"> * @param completedBlock : A block called once the download is completed.</div><div class="line"> image : the image which has been download to local.</div><div class="line"> error : the error which has happened in download.</div><div class="line"> finished : a Boolean value indicating whether download action has finished.</div><div class="line">*/</div><div class="line">-(id<WXImageOperationProtocol>)downloadImageWith
URL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;</div><div class="line">@end</div></pre></td></tr></table></figure>
+</li>
+</ol>
+<p> \u5b9e\u73b0\u4e0a\u8ff0\u534f\u8bae </p>
+ <figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">@implementation WXImgLoaderDefaultImpl</div><div class="line">#pragma mark -</div><div class="line">#pragma mark WXImgLoaderProtocol</div><div class="line"></div><div class="line">- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock</div><div class="line">{</div><div class="line"> if ([url hasPrefix:@"//"]) {</div><div class="line"> url = [@"http:" stringByAppendingString:url];</div><div class="line"> }</div><div class="line"> return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) { </div><div class="line"> } completed:^(UIImage *
image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {</div><div class="line"> if (completedBlock) {</div><div class="line"> completedBlock(image, error, finished);</div><div class="line"> }</div><div class="line"> }];</div><div class="line">}</div><div class="line">@end</div></pre></td></tr></table></figure>
+<ol>
+<li><p><strong>handler\u6ce8\u518c</strong> </p>
+<p>\u4f60\u53ef\u4ee5\u901a\u8fc7WXSDKEngine \u4e2d\u7684 <code>registerHandler:withProtocol</code>\u6ce8\u518chandler</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">WXSDKEngine.h</div><div class="line">/**</div><div class="line">* @abstract Registers a handler for a given handler instance and specific protocol</div><div class="line">* @param handler The handler instance to register</div><div class="line">* @param protocol The protocol to confirm</div><div class="line">*/</div><div class="line">+ (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;</div><div class="line"></div><div class="line">[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)]</div></pre></td></tr></table></figure>
+</li>
+</ol>
+<h2 id="Components-\u6269\u5c55"><a href="#Components-\u6269\u5c55" class="headerlink" title="Components \u6269\u5c55"></a>Components \u6269\u5c55</h2><p>\u867d\u7136 WeexSDK \u4e2d\u6709\u5f88\u591a\u7684 native \u7684 Component\uff0c\u4f46\u8fd9\u6709\u53ef\u80fd\u5e76\u4e0d\u80fd\u6ee1\u8db3\u4f60\u7684\u9700\u6c42\u3002\u5728\u4e4b\u524d\u4f60\u53ef\u80fd\u5df2\u7ecf\u5199\u4e86\u4e00\u4e9b\u5f88\u9177\u70ab native \u7684\u7ec4\u4ef6\uff0c\u60f3\u5305\u88c5\u4e00\u4e0b\uff0c\u5bfc\u5165\u5230 Weex \u4e2d\uff0c\u56e0\u6b64\u6211\u4eec\u63d0\u4f9b\u4e86\u8ba9\u5f00\u53d1\u8005\u5b9e\u73b0\u81ea\u5df1\u7684 native Component\u3002\u4e0b\u9762\u5c06\u4ee5 WeexSDK \u4e2d\u5df2\u7ecf\u5b58\u5728\u7684 Component\uff1a<code>image</code> \u4e3a\u4f8b\u5b50\uff0c\u4ecb\u7ecd\u4e00\u4e0b\u5982\u4f55\u6784\u5efa\u4e00\u4e2a native Component\u3002\u5047\u8bbe\u4f60\u5df2\u7ecf\u4e86\u89e3 iOS \u5f00\u53d1</p>
+<h3 id="\u6ce8\u518c-Component"><a href="#\u6ce8\u518c-Component" class="headerlink" title="\u6ce8\u518c Component"></a>\u6ce8\u518c Component</h3><p>\u6ce8\u518c\u4e00\u4e2a component \u6bd4\u8f83\u7b80\u5355\uff0c\u8c03\u7528 <code>WXSDKEngine</code> \u4e2d\u7684 <code>registerComponent:withClass:</code> \u65b9\u6cd5\uff0c\u4f20\u5165\u7ec4\u4ef6\u7684\u6807\u7b7e\u540d\u79f0\uff0c\u8fd8\u6709\u5bf9\u5e94\u7684 class \u7136\u540e\u4f60\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a <code>WXImageComponent</code> \u8868\u793a <code>image</code> \u7ec4\u4ef6\u7684\u5b9e\u73b0\u3002\u5728 <code>.we</code> \u6587\u4ef6\u4e2d\uff0c\u53ea\u9700\u8981\u5199 <code><image></image></code></p>
+<h3 id="\u6dfb\u52a0\u5c5e\u6027"><a href="#\u6dfb\u52a0\u5c5e\u6027" class="headerlink" title="\u6dfb\u52a0\u5c5e\u6027"></a>\u6dfb\u52a0\u5c5e\u6027</h3><p>\u73b0\u5728\u6211\u4eec\u8981\u505a\u4e00\u4e9b\u8ba9 image component \u66f4\u52a0\u5f3a\u5927\u7684\u4e8b\u60c5\u3002\u65e2\u7136\u4f5c\u4e3a\u4e00\u4e2a\u56fe\u7247\u7684 component\uff0c\u90a3\u5b83\u5e94\u8be5\u8981\u6709\u6e90\uff0c\u7ed9\u4ed6\u52a0\u4e0a\u4e00\u4e2a <code>src</code> \u7684\u5c5e\u6027\uff0c\u540c\u65f6\u7ed9\u5b83\u52a0\u4e0a\u4e00\u4e2a <code>resize</code> \u7684\u5c5e\u6027\uff08\u53ef\u4ee5\u914d\u7f6e\u7684\u6709 <code>contain/cover/stretch</code>\uff09</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">@interface WXImageComponent ()</div><div class="line"></div><div class="line">@property (nonatomic, strong) NSString *imageSrc;</div><div class="line">@property (nonatomic, assign) UIViewContentMode resizeMode;</div><div class="line"></div><div class="line">@end</div></pre></td></tr></table></figure>
+<p>component \u4e2d\u6240\u6709\u7684 style\uff0cattribute\uff0cevents \u90fd\u4f1a\u88ab\u4f20\u9012\u5230 Component \u7684\u521d\u59cb\u5316\u65b9\u6cd5\u4e2d\uff0c\u6240\u4ee5\uff0c\u4f60\u53ef\u4ee5\u5728\u521d\u59cb\u5316\u65b9\u6cd5\u4e2d\u5b58\u50a8\u4f60\u611f\u5174\u8da3\u7684\u4e00\u4e9b\u5c5e\u6027\u503c</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">@implementation WXImageComponent</div><div class="line"></div><div class="line">- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance</div><div class="line">{</div><div class="line"> if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {</div><div class="line"> _imageSrc = [WXConvert NSString:attributes[@"src"]];</div><div class="line"> _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];</div><div class="line">}</div><div class="line"></div><div class="line"> return self;</div><div class="line">}</div><div class="line"></div><div class="line">@end</div></pre></td></tr></table></figure>
+<p>attribute \u4e2d\u62ff\u5230\u7684\u503c\u7684\u7c7b\u578b\u90fd\u662f <code>id</code>\uff0c\u6211\u4eec\u53ef\u4ee5\u7528\u8f6c\u6362\u65b9\u6cd5\u628a\u5b83\u8f6c\u6362\u5230\u4efb\u4f55\u503c\u3002Weex SDK \u63d0\u4f9b\u4e86\u4e00\u4e9b\u57fa\u7840\u7684\u8f6c\u6362\u65b9\u6cd5\uff0c\u53ef\u4ee5\u53c2\u8003 <code>WXConvert</code> \u7c7b\uff0c\u6216\u8005\u4f60\u53ef\u4ee5\u6dfb\u52a0\u81ea\u5df1\u7684\u8f6c\u6362\u51fd\u6570\u3002</p>
+<h3 id="Hooking-\u6e32\u67d3\u751f\u547d\u5468\u671f"><a href="#Hooking-\u6e32\u67d3\u751f\u547d\u5468\u671f" class="headerlink" title="Hooking \u6e32\u67d3\u751f\u547d\u5468\u671f"></a>Hooking \u6e32\u67d3\u751f\u547d\u5468\u671f</h3><p>native \u7684 component \u662f\u7531 Weex \u7ba1\u7406\u7684\uff0cWeex \u521b\u5efa\uff0c\u5e03\u5c40\uff0c\u6e32\u67d3\uff0c\u9500\u6bc1\u3002Weex \u7684 component \u751f\u547d\u5468\u671f\u90fd\u662f\u53ef\u4ee5 hook \u7684\uff0c\u4f60\u53ef\u4ee5\u5728\u8fd9\u4e9b\u751f\u547d\u5468\u671f\u4e2d\u53bb\u505a\u81ea\u5df1\u7684\u4e8b\u60c5\u3002</p>
+<table>
+<thead>
+<tr>
+<th style="text-align:center">\u65b9\u6cd5</th>
+<th>\u63cf\u8ff0</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:center">initWithRef:type:\u2026</td>
+<td>\u7528\u7ed9\u5b9a\u7684\u5c5e\u6027\u521d\u59cb\u5316\u4e00\u4e2acomponent.</td>
+</tr>
+<tr>
+<td style="text-align:center">layoutDidFinish</td>
+<td>\u5728component\u5b8c\u6210\u5e03\u5c40\u65f6\u5019\u4f1a\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">loadView</td>
+<td>\u521b\u5efacomponent\u7ba1\u7406\u7684view.</td>
+</tr>
+<tr>
+<td style="text-align:center">viewWillLoad</td>
+<td>\u5728component\u7684view\u52a0\u8f7d\u4e4b\u524d\u4f1a\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">viewDidLoad</td>
+<td>\u5728component\u7684view\u52a0\u8f7d\u5b8c\u4e4b\u540e\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">viewWillUnload</td>
+<td>\u5728component\u7684view\u88ab\u91ca\u653e\u4e4b\u524d\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">viewDidUnload</td>
+<td>\u5728component\u7684view\u88ab\u91ca\u653e\u4e4b\u540e\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">updateStyles:</td>
+<td>\u5728component\u7684style\u66f4\u65b0\u65f6\u5019\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">updateAttributes:</td>
+<td>\u5728component\u7684attribute\u66f4\u65b0\u65f6\u5019\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">addEvent:</td>
+<td>\u7ed9component\u6dfb\u52a0event\u7684\u65f6\u5019\u8c03\u7528.</td>
+</tr>
+<tr>
+<td style="text-align:center">removeEvent:</td>
+<td>\u5728event\u79fb\u9664\u7684\u65f6\u5019\u8c03\u7528.</td>
+</tr>
+</tbody>
+</table>
+<p>\u5728 image component \u7684\u4f8b\u5b50\u91cc\u9762\uff0c\u5982\u679c\u6211\u4eec\u9700\u8981\u6211\u4eec\u81ea\u5df1\u7684 image view \u7684\u8bdd\uff0c\u53ef\u4ee5\u590d\u5199 <code>loadView</code>\u8fd9\u4e2a\u65b9\u6cd5.</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">- (UIView *)loadView</div><div class="line">{</div><div class="line">return [[WXImageView alloc] init];</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u73b0\u5728\u6211\u4eec\u4f7f\u7528 <code>WXImageView</code> \u6e32\u67d3 <code>image</code> component\u3002<br>\u4f5c\u4e3a\u4e00\u4e2a image component\uff0c\u6211\u4eec\u9700\u8981\u62ff\u5230\u670d\u52a1\u5668\u56fe\u7247\uff0c\u800c\u4e14\u628a\u5b83\u8bbe\u7f6e\u8fdb image view \u91cc. \u8fd9\u4e2a\u64cd\u4f5c\u53ef\u4ee5\u5728 <code>viewDidLoad</code> \u65b9\u6cd5\u4e2d\u505a\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u662f\u5728 view \u5df2\u7ecf\u88ab\u521b\u5efa\u800c\u4e14\u52a0\u8f7d\u4e86\u65f6\u5019 Weex SDK \u4f1a\u8c03\u7528\u5230\uff0c\u800c\u4e14 <code>viewDidLoad</code> \u8fd9\u4e2a\u65b9\u6cd5\u662f\u4f60\u505a\u989d\u5916\u521d\u59cb\u5316\u5de5\u4f5c\u6bd4\u5982\u6539\u53d8 content mode(\u4e5f\u5c31\u662f\u8bbe\u7f6eresize) \u7684\u6700\u597d\u65f6\u95f4.</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">- (void)viewDidLoad</div><div class="line">{</div><div class="line"> UIImageView *imageView = (UIImageView *)self.view;</div><div class="line"> imageView.contentMode = _resizeMode;</div><div class="line"> imageView.userInteractionEnabled = YES;</div><div class="line"> imageView.clipsToBounds = YES;</div><div class="line"> imageView.exclusiveTouch = YES;</div><div class="line"></div><div class="line"> // Do your image fetching and updating logic</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u5982\u679c\u53ef\u4ee5\u6539\u53d8 image \u7684 src\uff0c\u4e5f\u53ef\u4ee5 hook <code>updateAttributes:</code> \u65b9\u6cd5\u6765\u505a\u5c5e\u6027\u66f4\u65b0\u64cd\u4f5c\uff0c\u5f53 <code>updateAttributes:</code> \u6216\u8005 <code>updateStyles:</code> \u88ab\u8c03\u7528\u7684\u65f6\u5019\uff0c component \u7684 view \u5df2\u7ecf\u52a0\u8f7d\u5b8c\u6210</p>
+<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">- (void)updateAttributes:(NSDictionary *)attributes</div><div class="line">{</div><div class="line"> if (attributes[@"src"]) {</div><div class="line"> _imageSrc = [WXConvert NSString:attributes[@"src"]];</div><div class="line"> // Do your image updating logic</div><div class="line"> }</div><div class="line"></div><div class="line"> if (attributes[@"resize"]) {</div><div class="line"> _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];</div><div class="line"> self.view.contentMode = _resizeMode;</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u6216\u8bb8\u4f60\u9700\u8981\u8003\u8651\u66f4\u591a\u7684\u751f\u547d\u5468\u671f\u65b9\u6cd5\u53bb Hook\uff0c\u5f53\u5e03\u5c40\u5b8c\u6210\u65f6\u5019\uff0c\u50cf <code>layoutDidFinish</code>\uff0c\u5982\u679c\u4f60\u60f3\u4e86\u89e3\u66f4\u591a\uff0c\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b<code>WXComponent.h</code> \u58f0\u660e\u7684\u65b9\u6cd5\u3002</p>
+<p>\u73b0\u5728\u4f60\u53ef\u4ee5\u7528\u5728\u4efb\u4f55 <code>.we</code> \u6587\u4ef6\u91cc\u9762\u4f7f\u7528 <code><image></code>\uff0c\u800c\u4e14\u53ef\u4ee5\u52a0\u4e0a image \u7684\u5c5e\u6027\u3002</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">image</span> <span class="attr">style</span>=<span class="string">"your-custom-style"</span> <span class="attr">src</span>=<span class="string">"image-remote-source"</span> <span class="attr">resize</span>=<span class="string">"contain/cover/stretch"</span>></span><span class="tag"></<span class="name">image</span>></span></div></pre></td></tr></table></figure>
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/advanced/extend-to-ios.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/references/advanced/index.html
----------------------------------------------------------------------
diff --git a/content/cn/references/advanced/index.html b/content/cn/references/advanced/index.html
new file mode 100644
index 0000000..9065b9c
--- /dev/null
+++ b/content/cn/references/advanced/index.html
@@ -0,0 +1,1336 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u9ad8\u9636\u77e5\u8bc6 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u9ad8\u9636\u77e5\u8bc6
+iOS \u6269\u5c55
+Android \u6269\u5c55
+HTML5 \u6269\u5c55
+JS framework \u6269\u5c55
+\u96c6\u6210 Devtools \u5230 Android
+\u96c6\u6210 Devtools \u5230 iOS">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u9ad8\u9636\u77e5\u8bc6">
+<meta property="og:url" content="https://weex.apache.org/cn/references/advanced/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u9ad8\u9636\u77e5\u8bc6
+iOS \u6269\u5c55
+Android \u6269\u5c55
+HTML5 \u6269\u5c55
+JS framework \u6269\u5c55
+\u96c6\u6210 Devtools \u5230 Android
+\u96c6\u6210 Devtools \u5230 iOS">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.836Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u9ad8\u9636\u77e5\u8bc6">
+<meta name="twitter:description" content="\u9ad8\u9636\u77e5\u8bc6
+iOS \u6269\u5c55
+Android \u6269\u5c55
+HTML5 \u6269\u5c55
+JS framework \u6269\u5c55
+\u96c6\u6210 Devtools \u5230 Android
+\u96c6\u6210 Devtools \u5230 iOS">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="references" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "references";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link current ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u624b\u518c
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/index.html" class="sidebar-link ">\u901a\u7528\u7279\u6027</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/ios-apis.html" class="sidebar-link ">iOS APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/android-apis.html" class="sidebar-link ">Android APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/jsfm-apis.html" class="sidebar-link ">JS Framework APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/html5-apis.html" class="sidebar-link ">HTML5 APIs</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/common-style.html" class="sidebar-link ">\u901a\u7528\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/text-style.html" class="sidebar-link ">\u6587\u672c\u6837\u5f0f</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/color-names.html" class="sidebar-link ">\u989c\u8272\u540d\u79f0\u5217\u8868</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/gesture.html" class="sidebar-link ">\u624b\u52bf</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/path.html" class="sidebar-link ">Path (\u82f1)</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/components/index.html" class="sidebar-link ">\u5185\u5efa\u7ec4\u4ef6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/components/a.html" class="sidebar-link "><a></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/slider.html" class="sidebar-link "><slider></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/indicator.html" class="sidebar-link "><indicator></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/switch.html" class="sidebar-link "><switch></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/text.html" class="sidebar-link "><text></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/textarea.html" class="sidebar-link "><textarea></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/video.html" class="sidebar-link "><video></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/web.html" class="sidebar-link "><web></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/div.html" class="sidebar-link "><div></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/image.html" class="sidebar-link "><image></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/list.html" class="sidebar-link "><list></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/input.html" class="sidebar-link "><input></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/cell.html" class="sidebar-link "><cell></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/loading.html" class="sidebar-link "><loading></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/refresh.html" class="sidebar-link "><refresh></a>
+ </li>
+
+ <li>
+ <a href="/cn/references/components/scroller.html" class="sidebar-link "><scroller></a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/modules/index.html" class="sidebar-link ">\u5185\u5efa\u6a21\u5757</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/modules/animation.html" class="sidebar-link ">animation</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/picker.html" class="sidebar-link ">picker</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/clipboard.html" class="sidebar-link ">clipboard</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/dom.html" class="sidebar-link ">dom</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/modal.html" class="sidebar-link ">modal</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/navigator.html" class="sidebar-link ">navigator</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/storage.html" class="sidebar-link ">storage</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/stream.html" class="sidebar-link ">stream</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/webview.html" class="sidebar-link ">webview</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/modules/globalevent.html" class="sidebar-link ">globalEvent</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/unit.html" class="sidebar-link ">CSS \u5355\u4f4d</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/common-event.html" class="sidebar-link ">\u901a\u7528\u4e8b\u4ef6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html" class="sidebar-link ">Native DOM APIs</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/weex-variable.html" class="sidebar-link ">Weex \u5b9e\u4f8b\u53d8\u91cf</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/web-standards.html" class="sidebar-link ">Web \u6807\u51c6</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/vue/index.html" class="sidebar-link ">Vue</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/vue/difference-with-web.html" class="sidebar-link ">Vue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/vue/difference-of-vuex.html" class="sidebar-link ">\u4f7f\u7528 Vuex \u548c vue-router</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/advanced/index.html" class="sidebar-link current ">\u9ad8\u9636\u77e5\u8bc6</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-ios.html" class="sidebar-link ">iOS \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-android.html" class="sidebar-link ">Android \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-to-html5.html" class="sidebar-link ">HTML5 \u6269\u5c55</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/extend-jsfm.html" class="sidebar-link ">\u62d3\u5c55 JS framework</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-android.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 Android</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/advanced/integrate-devtool-to-ios.html" class="sidebar-link ">\u96c6\u6210 Devtools \u5230 iOS</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/migration/index.html" class="sidebar-link ">\u8fc1\u79fb</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/references/migration/migration-from-weex.html" class="sidebar-link ">\u5982\u4f55\u5c06\u539f\u6709 Weex \u9879\u76ee\u6539\u9020\u6210 Vue \u7248\u672c</a>
+ </li>
+
+ <li>
+ <a href="/cn/references/migration/difference.html" class="sidebar-link ">Weex \u548c Vue 2.x \u7684\u8bed\u6cd5\u5dee\u5f02</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/references/platform-difference.html" class="sidebar-link ">Weex \u548c Web \u5e73\u53f0\u7684\u5dee\u5f02</a></h3>
+
+ </li>
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html" class="sidebar-link">\u65e7\u6587\u6863</a></h3>
+ </li>
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-references">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u9ad8\u9636\u77e5\u8bc6
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.836Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u9ad8\u9636\u77e5\u8bc6"><a href="#\u9ad8\u9636\u77e5\u8bc6" class="headerlink" title="\u9ad8\u9636\u77e5\u8bc6"></a>\u9ad8\u9636\u77e5\u8bc6</h1><ul>
+<li><a href="./extend-to-ios.html">iOS \u6269\u5c55</a></li>
+<li><a href="./extend-to-android.html">Android \u6269\u5c55</a></li>
+<li><a href="./extend-to-html5.html">HTML5 \u6269\u5c55</a></li>
+<li><a href="./extend-jsfm.html">JS framework \u6269\u5c55</a></li>
+<li><a href="./integrate-devtool-to-android.html">\u96c6\u6210 Devtools \u5230 Android</a></li>
+<li><a href="./integrate-devtool-to-ios.html">\u96c6\u6210 Devtools \u5230 iOS</a></li>
+</ul>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/references/advanced/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/references/advanced/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>