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:13 UTC
[13/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
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>