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/03/10 10:07:46 UTC
[08/51] [partial] incubator-weex-site git commit: Site updated:
2017-03-10 18:07:21
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/95bb2077/cn/v-0.10/advanced/extend-to-ios.html
----------------------------------------------------------------------
diff --git a/cn/v-0.10/advanced/extend-to-ios.html b/cn/v-0.10/advanced/extend-to-ios.html
new file mode 100644
index 0000000..9ea9644
--- /dev/null
+++ b/cn/v-0.10/advanced/extend-to-ios.html
@@ -0,0 +1,481 @@
+<!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-24T16:39:42.000Z">
+<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" class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu pick-lang">
+ <li>
+ <a href="/v-0.10/advanced/extend-to-ios.html" data-lang="en">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/extend-to-ios.html" data-lang="zh-cn">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </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" 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.html">
+ 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-24T16:39:42.000Z">Updated time: 25/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>
+<h3 id="handler-\u6269\u5c55"><a href="#handler-\u6269\u5c55" class="headerlink" title="handler \u6269\u5c55"></a>handler \u6269\u5c55</h3><p> <strong>WXImgLoaderProtocol</strong> </p>
+<p> weexSDK \u6ca1\u6709\u63d0\u4f9b\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>)downloadImageW
ithURL:(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>
+<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>
+<h4 id="Component-\u6269\u5c55"><a href="#Component-\u6269\u5c55" class="headerlink" title="Component \u6269\u5c55"></a>Component \u6269\u5c55</h4><p> \u867d\u7136WeexSDK\u4e2d\u6709\u63d0\u4f9b\u5185\u7f6e\u7684\u4e00\u4e9bComponent\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\u70abnative\u7684\u7ec4\u4ef6\uff0c\u60f3\u5305\u88c5\u4e00\u4e0b\uff0c\u5bfc\u5165\u5230Weex\u4e2d\uff0c\u56e0\u6b64\u6211\u4eec\u63d0\u4f9b\u4e86\u8ba9\u5f00\u53d1\u8005\u5b9e\u73b0\u81ea\u5df1\u7684native Component<br> \u4e0b\u9762\u5c06\u4ee5WeexSDK \u4e2d\u5df2\u7ecf\u5b58\u5728\u7684 Component\uff1a<code>image</code>\u4e3a\u4f8b\u5b50\uff0c\u4ecb\u7ecd\u4e00\u4e0b\u5982\u4f55\u6784\u5efa\u4e00\u4e2anative Component.<br> \u5047\u8bbe\u4f60\u5df2\u7ecf\u4e86\u89e3IOS\u5f00\u53d1 </p>
+<ol>
+<li>\u6ce8\u518c Component<br>\u6ce8\u518c\u4e00\u4e2acomponent\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\u7684class<br>\u7136\u540e\u4f60\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a <code>WXImageComponent</code> \u8868\u793a<code>image</code>\u7ec4\u4ef6\u7684\u5b9e\u73b0 \u5728.we \u6587\u4ef6\u4e2d\uff0c\u53ea\u9700\u8981\u5199 <pre><code><image></image>
+</code></pre></li>
+<li><p>\u6dfb\u52a0\u5c5e\u6027<br>\u73b0\u5728\u6211\u4eec\u8981\u505a\u4e00\u4e9b\u8ba9image component\u66f4\u52a0\u5f3a\u5927\u7684\u4e8b\u60c5\u3002\u65e2\u7136\u4f5c\u4e3a\u4e00\u4e2a\u56fe\u7247\u7684component\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\u7684style\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>
+</li>
+</ol>
+<p> attribute\u4e2d\u62ff\u5230\u7684\u503c\u7684\u7c7b\u578b\u90fd\u662f<code>id</code>,\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</p>
+<ol>
+<li><p>Hooking \u6e32\u67d3\u751f\u547d\u5468\u671f<br> native \u7684component \u662f\u7531Weex\u7ba1\u7406\u7684\uff0cweex \u521b\u5efa\uff0c\u5e03\u5c40\uff0c\u6e32\u67d3\uff0c\u9500\u6bc1\u3002weex\u7684component\u751f\u547d\u5468\u671f\u90fd\u662f\u53ef\u4ee5hook\u7684\uff0c\u4f60\u53ef\u4ee5\u5728\u8fd9\u4e9b\u751f\u547d\u5468\u671f\u4e2d\u53bb\u505a\u81ea\u5df1\u7684\u4e8b\u60c5</p>
+<p>| \u65b9\u6cd5 | \u63cf\u8ff0 |<br>| :-: | \u2014 |<br>| initWithRef:type:\u2026 | \u7528\u7ed9\u5b9a\u7684\u5c5e\u6027\u521d\u59cb\u5316\u4e00\u4e2acomponent. |<br>| layoutDidFinish | \u5728component\u5b8c\u6210\u5e03\u5c40\u65f6\u5019\u4f1a\u8c03\u7528. |<br>| loadView | \u521b\u5efacomponent\u7ba1\u7406\u7684view. |<br>| viewWillLoad | \u5728component\u7684view\u52a0\u8f7d\u4e4b\u524d\u4f1a\u8c03\u7528. |<br>| viewDidLoad | \u5728component\u7684view\u52a0\u8f7d\u5b8c\u4e4b\u540e\u8c03\u7528. |<br>| viewWillUnload | \u5728component\u7684view\u88ab\u91ca\u653e\u4e4b\u524d\u8c03\u7528. |<br>| viewDidUnload | \u5728component\u7684view\u88ab\u91ca\u653e\u4e4b\u540e\u8c03\u7528. |<br>| updateStyles: | \u5728component\u7684style\u66f4\u65b0\u65f6\u5019\u8c03\u7528. |<br>| updateAttributes: | \u5728component\u7684attribute\u66f4\u65b0\u65f6\u5019\u8c03\u7528. |<br>| addEvent: | \u7ed9component\u6dfb\u52a0event\u7684\u65f6\u5019\u8c03\u7528. |<br>| removeEvent: | \u5728event\u79fb\u9664\u7684\u65f6\u5019\u8c03\u7528. |</p>
+<p>\u5728image component\u7684\u4f8b\u5b50\u91cc\u9762\uff0c\u5982\u679c\u6211\u4eec\u9700\u8981\u6211\u4eec\u81ea\u5df1\u7684image 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>
+</li>
+</ol>
+<p> \u73b0\u5728\u6211\u4eec\u4f7f\u7528 <code>WXImageView</code> \u6e32\u67d3 <code>image</code> component\u3002 </p>
+<ol>
+<li><p>\u4f5c\u4e3a\u4e00\u4e2aimage component\uff0c\u6211\u4eec\u9700\u8981\u62ff\u5230\u670d\u52a1\u5668\u56fe\u7247\uff0c\u800c\u4e14\u628a\u5b83\u8bbe\u7f6e\u8fdbimage view \u91cc. \u8fd9\u4e2a\u64cd\u4f5c\u53ef\u4ee5\u5728 <code>viewDidLoad</code> \u65b9\u6cd5\u4e2d\u505a\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u662f\u5728view\u5df2\u7ecf\u88ab\u521b\u5efa\u800c\u4e14\u52a0\u8f7d\u4e86\u65f6\u5019weex 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\u53d8content 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>
+</li>
+</ol>
+<ol>
+<li><p>\u5982\u679c\u53ef\u4ee5\u6539\u53d8image\u7684src,\u4e5f\u53ef\u4ee5hook <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\u7684view \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>
+</li>
+</ol>
+<p> \u6216\u8bb8\u4f60\u9700\u8981\u8003\u8651\u66f4\u591a\u7684\u751f\u547d\u5468\u671f\u65b9\u6cd5\u53bbHook\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<br> \u73b0\u5728\u4f60\u53ef\u4ee5\u7528\u5728\u4efb\u4f55 .we\u6587\u4ef6\u91cc\u9762\u4f7f\u7528 <code><image></code>\uff0c\u800c\u4e14\u53ef\u4ee5\u52a0\u4e0a image\u7684\u5c5e\u6027</p>
+ <figure class="highlight plain"><table><tr><td class="code"><pre><div class="line"><image style="your-custom-style" src="image-remote-source" resize="contain/cover/stretch"></image></div></pre></td></tr></table></figure>
+<h5 id="component-\u65b9\u6cd5"><a href="#component-\u65b9\u6cd5" class="headerlink" title="component \u65b9\u6cd5"></a>component \u65b9\u6cd5</h5><p>WeexSDK 0.9.5 \u4e4b\u540e\u652f\u6301\u4e86\u5728js\u4e2d\u76f4\u63a5\u8c03\u7528component\u7684\u65b9\u6cd5\uff0c\u8fd9\u91cc\u63d0\u4f9b\u4e00\u4e2a\u4f8b\u5b50\uff0c</p>
+<ul>
+<li><p>\u81ea\u5b9a\u4e49\u4e00\u4e2aWXMyCompoenent \u7684\u7ec4\u4ef6</p>
+ <figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">@implementation WXMyComponent</div><div class="line">WX_EXPORT_METHOD(@selector(focus)) // \u66b4\u9732\u8be5\u65b9\u6cd5\u7ed9js</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"> // handle your attributes</div><div class="line"> // handle your styles</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">- (void)focus</div><div class="line">{</div><div class="line"> NSLog(@"you got it"
);</div><div class="line">}</div><div class="line">@end</div></pre></td></tr></table></figure>
+</li>
+</ul>
+<ul>
+<li>\u6ce8\u518c\u7ec4\u4ef6 <code>[WXSDKEngine registerComponent:@"mycomponent" withClass:[WXMyComponent class]]</code></li>
+<li><p>\u5728weex \u6587\u4ef6\u4e2d\u8c03\u7528</p>
+<pre><code class="html"><span class="tag"><<span class="name">template</span>></span>
+ <span class="tag"><<span class="name">mycomponent</span> <span class="attr">id</span>=<span class="string">'mycomponent'</span>></span><span class="tag"></<span class="name">mycomponent</span>></span>
+<span class="tag"></<span class="name">template</span>></span>
+<span class="tag"><<span class="name">script</span>></span><span class="javascript">
+ <span class="built_in">module</span>.exports = {
+ <span class="attr">created</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
+ <span class="keyword">this</span>.$el(<span class="string">'mycomponent'</span>).focus();
+ }
+ }
+</span><span class="tag"></<span class="name">script</span>></span>
+</code></pre>
+</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 pick-lang">
+ <li>
+ <a href="/v-0.10/advanced/extend-to-ios.html" data-lang="en">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/extend-to-ios.html" data-lang="zh-cn">\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>Designed 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/95bb2077/cn/v-0.10/advanced/how-data-binding-works.html
----------------------------------------------------------------------
diff --git a/cn/v-0.10/advanced/how-data-binding-works.html b/cn/v-0.10/advanced/how-data-binding-works.html
new file mode 100644
index 0000000..a7f1b8c
--- /dev/null
+++ b/cn/v-0.10/advanced/how-data-binding-works.html
@@ -0,0 +1,393 @@
+<!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-24T16:39:42.000Z">
+<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" class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu pick-lang">
+ <li>
+ <a href="/v-0.10/advanced/how-data-binding-works.html" data-lang="en">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/how-data-binding-works.html" data-lang="zh-cn">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </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" 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.html">
+ 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-24T16:39:42.000Z">Updated time: 25/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 pick-lang">
+ <li>
+ <a href="/v-0.10/advanced/how-data-binding-works.html" data-lang="en">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/how-data-binding-works.html" data-lang="zh-cn">\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>Designed 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/95bb2077/cn/v-0.10/advanced/images/how-arch.png
----------------------------------------------------------------------
diff --git a/cn/v-0.10/advanced/images/how-arch.png b/cn/v-0.10/advanced/images/how-arch.png
new file mode 100644
index 0000000..a13df7a
Binary files /dev/null and b/cn/v-0.10/advanced/images/how-arch.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/95bb2077/cn/v-0.10/advanced/images/how-render.png
----------------------------------------------------------------------
diff --git a/cn/v-0.10/advanced/images/how-render.png b/cn/v-0.10/advanced/images/how-render.png
new file mode 100644
index 0000000..db9b0f4
Binary files /dev/null and b/cn/v-0.10/advanced/images/how-render.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/95bb2077/cn/v-0.10/advanced/index.html
----------------------------------------------------------------------
diff --git a/cn/v-0.10/advanced/index.html b/cn/v-0.10/advanced/index.html
new file mode 100644
index 0000000..4fbfa7f
--- /dev/null
+++ b/cn/v-0.10/advanced/index.html
@@ -0,0 +1,426 @@
+<!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-24T16:39:42.000Z">
+<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" class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu pick-lang">
+ <li>
+ <a href="/v-0.10/advanced/index.html" data-lang="en">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/index.html" data-lang="zh-cn">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </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" 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.html">
+ 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-24T16:39:42.000Z">Updated time: 25/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 pick-lang">
+ <li>
+ <a href="/v-0.10/advanced/index.html" data-lang="en">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/advanced/index.html" data-lang="zh-cn">\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>Designed 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>