http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/f3d58bd0/cn/v-0.10/advanced/extend-to-android.html ---------------------------------------------------------------------- diff --git a/cn/v-0.10/advanced/extend-to-android.html b/cn/v-0.10/advanced/extend-to-android.html deleted file mode 100644 index d877239..0000000 --- a/cn/v-0.10/advanced/extend-to-android.html +++ /dev/null @@ -1,429 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="utf-8"> - - <title>Android æ©å± | Weex</title> - <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> - <meta name="description" content="Android æ©å±Weex æä¾äºæ©å±æºå¶ï¼å¯ä»¥æ ¹æ®èªå·±çä¸å¡è¿è¡å®å¶èªå·±çåè½ã主è¦å为两类æ©å±ï¼ Module æ©å± é UI çç¹å®åè½ãä¾å¦ sendHttpãopenURL çã Component æ©å± å®ç°ç¹å«åè½ç Native æ§ä»¶ãä¾å¦ï¼RichTextviewï¼RefreshListview çã Adapter æ©å± Weex 对ä¸äºåºç¡åè½å®ç°äºç»ä¸çæ¥å£ï¼å¯å®ç°"> -<meta property="og:type" content="website"> -<meta property="og:title" content="Android æ©å±"> -<meta property="og:url" content="https://weex-project.io/cn/v-0.10/advanced/extend-to-android.html";> -<meta property="og:site_name" content="Weex"> -<meta property="og:description" content="Android æ©å±Weex æä¾äºæ©å±æºå¶ï¼å¯ä»¥æ ¹æ®èªå·±çä¸å¡è¿è¡å®å¶èªå·±çåè½ã主è¦å为两类æ©å±ï¼ Module æ©å± é UI çç¹å®åè½ãä¾å¦ sendHttpãopenURL çã Component æ©å± å®ç°ç¹å«åè½ç Native æ§ä»¶ãä¾å¦ï¼RichTextviewï¼RefreshListview çã Adapter æ©å± Weex 对ä¸äºåºç¡åè½å®ç°äºç»ä¸çæ¥å£ï¼å¯å®ç°"> -<meta property="og:updated_time" content="2017-04-28T02:36:21.000Z"> -<meta name="twitter:card" content="summary"> -<meta name="twitter:title" content="Android æ©å±"> -<meta name="twitter:description" content="Android æ©å±Weex æä¾äºæ©å±æºå¶ï¼å¯ä»¥æ ¹æ®èªå·±çä¸å¡è¿è¡å®å¶èªå·±çåè½ã主è¦å为两类æ©å±ï¼ Module æ©å± é UI çç¹å®åè½ãä¾å¦ sendHttpãopenURL çã Component æ©å± å®ç°ç¹å«åè½ç Native æ§ä»¶ãä¾å¦ï¼RichTextviewï¼RefreshListview çã Adapter æ©å± Weex 对ä¸äºåºç¡åè½å®ç°äºç»ä¸çæ¥å£ï¼å¯å®ç°"> - - <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml"> - - - <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png"> - - - <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css"> - - <link rel="stylesheet" href="/css/style.css"> - <link rel="stylesheet" href="/css/swiper.min.css"> -</head> - -<body id="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">æç¨</a></li> - <li><a href="/cn/references">æå</a></li> - <li class="dropdown"> - <a href="javascript:;">åè</a> - <ul class="dropdown-menu subnav"> - <li> - <a href="/cn/faq.html">FAQ</a> - </li> - <li> - <a href="/cn/releasenote.html">çæ¬è¯´æ</a> - </li> - </ul> - </li> - <li class="dropdown"> - <a href="javascript:;">å·¥å ·åæå¡</a> - <ul class="dropdown-menu subnav"> - <li> - <a href="/cn/playground.html">Playground</a> - </li> - <li> - <a href="/cn/guide/tools/toolkit.html">Weex-toolkit</a> - </li> - <li> - <a href="http://dotwe.org"; target="_blank">Code Snippets</a> - </li> - <li> - <a href="https://market.dotwe.org"; target="_blank">Market</a> - </li> - </ul> - </li> - </ul> - <ul class="info"> - <li><a href="https://github.com/apache/incubator-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"> <!-- æç´¢æ¡ç¸å ³ --> - <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-android.html" data-lang="en">English</a> - </li> - <li> - <a href="/cn/v-0.10/advanced/extend-to-android.html" data-lang="zh-cn">ä¸æ</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"> <!-- æç´¢æ¡ç¸å ³ --> - <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"> - æç¨ - </a> - </li> - <li> - <a class="" href="/cn/references"> - æå - </a> - </li> - <li> - <a href="/cn/faq.html"> - FAQ - </a> - </li> - <li> - <p>å·¥å ·åæå¡</p> - <ul class="subnav"> - <li> - <a href="/cn/playground.html">Playground</a> - </li> - <li> - <a href="/cn/guide/tools/devtools.html">Devtools</a> - </li> - <li> - <a href="/cn/guide/tools/weexpack.html">Weexpack</a> - </li> - <li> - <a href="http://dotwe.org"; target="_blank">Snippets</a> - </li> - <li> - <a href="https://market.dotwe.org"; target="_blank">Market</a> - </li> - </ul> - </li> - <li> - <a href="https://github.com/apache/incubator-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"> - - é«é¶ç¥è¯ - - </h2> - <ul class="doc-summary"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex å·¥ä½åç</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">æ°æ®ç»å®åç</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">å¦ä½å建ä¸ä¸ª Weex 项ç®</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">éæå° Android</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">éæå° iOS</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">éæå° web</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">èªå®ä¹ native ç»ä»¶</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">èªå®ä¹ native API</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-android.html" class="sidebar-link current ">Android æ©å±</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS æ©å±</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 æ©å±</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">éæ Devtools å° Android</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">éæ Devtools å° iOS</a></h3> - - </li> - - - - </ul> -</div> - </div> - - -<article class="article article-type-advanced"> - <div class="article-entry" itemprop="articleBody"> - <header class="article-header"> - - - <h1 class="article-title" itemprop="name"> - Android æ©å± - </h1> - - - <time class="article-date" datetime="2017-04-28T02:36:21.000Z">Updated time: 28/04/2017</time> -</header> - <h1 id="Android-æ©å±"><a href="#Android-æ©å±" class="headerlink" title="Android æ©å±"></a>Android æ©å±</h1><p>Weex æä¾äºæ©å±æºå¶ï¼å¯ä»¥æ ¹æ®èªå·±çä¸å¡è¿è¡å®å¶èªå·±çåè½ã<br>主è¦å为两类æ©å±ï¼ </p> -<ul> -<li>Module æ©å± é UI çç¹å®åè½ãä¾å¦ sendHttpãopenURL çã</li> -<li>Component æ©å± å®ç°ç¹å«åè½ç Native æ§ä»¶ãä¾å¦ï¼RichTextviewï¼RefreshListview çã</li> -<li>Adapter æ©å± Weex 对ä¸äºåºç¡åè½å®ç°äºç»ä¸çæ¥å£ï¼å¯å®ç°è¿äºæ¥å£æ¥å®å¶èªå·±çä¸å¡ãä¾å¦ï¼å¾çä¸è½½çã</li> -</ul> -<h2 id="Module-æ©å±"><a href="#Module-æ©å±" class="headerlink" title="Module æ©å±"></a>Module æ©å±</h2><ol> -<li>Module æ©å±å¿ é¡»ç»§æ¿ WXModule ç±»ã</li> -<li>æ©å±æ¹æ³å¿ é¡»å ä¸ @WXModuleAnno 注解ãWeex ä¼æ ¹æ®æ³¨è§£æ¥å¤æå½åæ¹æ³æ¯å¦è¦è¿è¡å¨ UI 线ç¨ï¼åå½åæ¹æ³æ¯å¦æ¯æ©å±æ¹æ³ã</li> -<li>Weexæ¯æ ¹æ®åå°æ¥è¿è¡è°ç¨ Module æ©å±æ¹æ³ï¼æ以Moduleä¸çæ©å±æ¹æ³å¿ é¡»æ¯ public ç±»åã</li> -<li>åæ ·å 为æ¯éè¿åå°è°ç¨ï¼Module ä¸è½è¢«æ··æ·ã请å¨æ··æ·æ件ä¸æ·»å 代ç ï¼<code>-keep public class * extends com.taobao.weex.common.WXModule{*;}</code></li> -<li>Module æ©å±çæ¹æ³å¯ä»¥ä½¿ç¨ int, double, float, String, Map, List ç±»åçåæ°</li> -<li>å®æ Module åä¸å®è¦å¨åå§åæ¶æ³¨å <code>WXSDKEngine.registerModule("myModule", MyModule.class);</code> å¦åä¼æ¥ç±»ä¼¼é误ï¼<code>ReportException :undefined:9: TypeError: Object #<Object> has no method 'printLog'</code></li> -</ol> -<p>示ä¾å¦ä¸ï¼</p> -<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MyModule</span> <span class="keyword">extends</span> <span class="title">WXModule</span> </span>{</div><div class="line"></div><div class="line"> <span class="meta">@WXModuleAnno</span>(runOnUIThread = <span class="keyword">true</span>)</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">printLog</span><span class="params">(String msg)</span> </span>{</div><div class="line"> Toast.makeText(mWXSDKInstance.getContext(),msg,Toast.LENGTH_SHORT).show();</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure> -<p>JS è°ç¨å¦ä¸ï¼</p> -<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"click"</span>></span>ç¹å»ææµè¯<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="att r">click</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">require</span>(<span class="string">'@weex-module/myModule'</span>).printLog(<span class="string">"ææ¯ä¸ä¸ªæµè¯!"</span>);</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure> -<h2 id="Component-æ©å±"><a href="#Component-æ©å±" class="headerlink" title="Component æ©å±"></a>Component æ©å±</h2><ol> -<li>Component æ©å±ç±»å¿ é¡»éæ WXComponent.</li> -<li>Component 对åºç设置å±æ§çæ¹æ³å¿ 须添å 注解 @WXComponentProp(name=value(value is attr or style of dsl))</li> -<li>Weex sdk éè¿åå°è°ç¨å¯¹åºçæ¹æ³ï¼æ以 Component 对åºçå±æ§æ¹æ³å¿ é¡»æ¯ publicï¼å¹¶ä¸ä¸è½è¢«æ··æ·ã请å¨æ··æ·æ件ä¸æ·»å 代ç <code>-keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}</code></li> -<li>Component æ©å±çæ¹æ³å¯ä»¥ä½¿ç¨ int, double, float, String, Map, List ç±»åçåæ°</li> -<li>å®æ Component åä¸å®è¦å¨åå§åæ¶æ³¨å <code>WXSDKEngine.registerComponent("richtext",RichText.class);</code></li> -</ol> -<p>示ä¾å¦ä¸:</p> -<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">RichText</span> <span class="keyword">extends</span> <span class="title">WXComponent</span> </span>{</div><div class="line"></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="title">RichText</span><span class="params">(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, <span class="keyword">boolean</span> isLazy)</span> </span>{</div><div class="line"> <span class="keyword">super</span>(instance, dom, parent, isLazy);</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">initView</span><span class="params">()</span> </span> {</div><div class="line"> mHost=<span class="keyword">new</span> TextView(mContext);</div><div class="line"> ((TextView)mHost).setMovementMethod(LinkMovementMethod.getInstance());</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@WXComponentProp</span>(name = <span class="string">"tel"</span>)</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setTelLink</span><span class="params">(String tel)</span></span>{</div><div class="line"> SpannableString spannable=<span class="keyword">new</span> SpannableString(tel);</div><div class="line"> spannable.setSpan(<span class="keyword">new</span> URLSpan(<span class="string">"tel:"</span>+tel),<span class="number">0</span>,tel.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);</div><div class="line"> ((TextView)mHost).setText(spannable);</div><div class="line"> }</div><div class="line ">}</div></pre></td></tr></table></figure> -<p>JS è°ç¨å¦ä¸ï¼</p> -<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">richText</span> <span class="attr">tel</span>=<span class="string">"12305"</span> <span class="attr">style</span>=<span class="string">"width:200;height:100"</span>></span>12305<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure> -<h2 id="Adapteræ©å±"><a href="#Adapteræ©å±" class="headerlink" title="Adapteræ©å±"></a>Adapteræ©å±</h2><p>å¾çä¸è½½ï¼</p> -<p>éè¦æ¶éææ¥å£ IWXImgLoaderAdapterï¼å®ç° setImage æ¹æ³ã</p> -<p>示ä¾å¦ä¸ï¼</p> -<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">ImageAdapter</span> <span class="keyword">implements</span> <span class="title">IWXImgLoaderAdapter</span> </span>{</div><div class="line"></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="title">ImageAdapter</span><span class="params">()</span> </span>{</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setImage</span><span class="params">(<span class="keyword">final</span> String url, <span class="keyword">final</span> ImageView view,</span></span></div><div class="line"> WXImageQuality quality, WXImageStrategy s trategy) {</div><div class="line"></div><div class="line"> WXSDKManager.getInstance().postOnUiThread(<span class="keyword">new</span> Runnable() {</div><div class="line"></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">run</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">if</span>(view==<span class="keyword">null</span>||view.getLayoutParams()==<span class="keyword">null</span>){</div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"> <span class="keyword">if</span> (TextUtils.isEmpty(url)) {</div><div class="line"> view.setImageBitmap(<span class="keyword">null</span>);</div><div class="line"> <span class="keyword">return</span>;</div><div class="lin e"> }</div><div class="line"> String temp = url;</div><div class="line"> <span class="keyword">if</span> (url.startsWith(<span class="string">"//"</span>)) {</div><div class="line"> temp = <span class="string">"http:"</span> + url;</div><div class="line"> }</div><div class="line"> <span class="keyword">if</span> (view.getLayoutParams().width <= <span class="number">0</span> || view.getLayoutParams().height <= <span class="number">0</span>) {</div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"> Picasso.with(WXEnvironment.getApplication())</div><div class="line"> .load(temp)</div><div class="line"> .into(view);</div><div class="line"> }</div><div class="line"> },<span class="number">0</span>);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure> -<h4 id="ç»ä»¶æ¹æ³æ¯æ"><a href="#ç»ä»¶æ¹æ³æ¯æ" class="headerlink" title="ç»ä»¶æ¹æ³æ¯æ"></a>ç»ä»¶æ¹æ³æ¯æ</h4><p>ä»WeexSDK 0.9.5å¼å§ï¼ä½ å¯ä»¥å®ä¹ç»ä»¶æ¹æ³</p> -<ul> -<li><p>å¨ç»ä»¶ä¸å¦ä¸å£°æä¸ä¸ªç»ä»¶æ¹æ³</p> -<figure class="highlight java"><table><tr><td class="code"><pre><div class="line"><span class="meta">@JSMethod</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">focus</span><span class="params">()</span></span>{</div><div class="line"><span class="comment">//method implementation</span></div><div class="line">}</div></pre></td></tr></table></figure> -</li> -<li><p>注åç»ä¹åï¼ä½ å¯ä»¥å¨weex æ件ä¸è°ç¨</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">mycomponent</span> <span class="attr">id</span>=<span class="string">'mycomponent'</span>></span><span class="tag"></<span class="name">mycomponent</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">created</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.$el(<span class="string">'mycomponent'</span>).focus();</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure> -</li> -</ul> -<p>注:å·¥ç¨è¦æ·»å ä¾èµ <code>compile 'com.squareup.picasso:picasso:2.5.2'</code></p> - - </div> - -</article> -</div> - - <footer id="footer"> - <div class="row clearfix"> - <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-android.html" data-lang="en">English</a> - </li> - <li> - <a href="/cn/v-0.10/advanced/extend-to-android.html" data-lang="zh-cn">ä¸æ</a> - </li> - </ul> - </div> - </div> - <div class="disclaimer"> - <div><img src="//gw.alicdn.com/tfs/TB1pTBZQFXXXXX9XXXXXXXXXXXX-794-280.png" width="200px" alt="Apache Incubator"></div> - <div><span class="title">Disclaimer:</span> Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</div> - <br/> - </div> - <hr> - <div class="row"> - <p> <img src="//gw.alicdn.com/tfs/TB1bg8SQFXXXXcHXXXXXXXXXXXX-85-170.png" height="50px" alt="Apache"><span>Copyright(c) 2017 The Apache Software Foundation. Licensed under the </span> <a href="http://www.apache.org/licenses/LICENSE-2.0";>Apache License, Version 2.0</a></p> - </div> - <div class="row clearfix"> - <div></div> - </div> -</footer> - <div style="display: none;"> - <script src="//s95.cnzz.com/z_stat.php?id=1261496509&web_id=1261496509" 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/f3d58bd0/cn/v-0.10/advanced/extend-to-html5.html ---------------------------------------------------------------------- diff --git a/cn/v-0.10/advanced/extend-to-html5.html b/cn/v-0.10/advanced/extend-to-html5.html deleted file mode 100644 index 236e699..0000000 --- a/cn/v-0.10/advanced/extend-to-html5.html +++ /dev/null @@ -1,438 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="utf-8"> - - <title>weex-html5 æ©å± | Weex</title> - <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> - <meta name="description" content="æ©å± weex-html5ç®ä»Weex æ¯ä¸ä¸ªé«å¯æ©å±æ§ç跨平å°å¨æåå¼åæ¹æ¡ï¼ä½ å¯ä»¥å¨ç°æç»ä»¶åºç¡ä¸å®å¶èªå·±éè¦çä¸ç«¯ç»ä»¶ãä½ å¯ä»¥ä¸º Weex API 模åæ·»å æ°çæ¹æ³ï¼æè å建æ°ç API 模ååæ°çå è½½å¨ãæç §ä»¥ä¸å 个æ¥éª¤æ©å±ä½ çç»ä»¶ï¼API æè å è½½å¨ã é¦å è¦æç¡®çæ¯ï¼ç»ä»¶å API 模åæ¯åºäº Weex çæ©å±ï¼ä½æ¯ç¬ç«äº Weexï¼ç»ä»¶çå®ä¹æ¬èº«æ¯ä¸éè¦ä¾èµäº Weex çï¼è¿æ ·æå©"> -<meta property="og:type" content="website"> -<meta property="og:title" content="weex-html5 æ©å±"> -<meta property="og:url" content="https://weex-project.io/cn/v-0.10/advanced/extend-to-html5.html";> -<meta property="og:site_name" content="Weex"> -<meta property="og:description" content="æ©å± weex-html5ç®ä»Weex æ¯ä¸ä¸ªé«å¯æ©å±æ§ç跨平å°å¨æåå¼åæ¹æ¡ï¼ä½ å¯ä»¥å¨ç°æç»ä»¶åºç¡ä¸å®å¶èªå·±éè¦çä¸ç«¯ç»ä»¶ãä½ å¯ä»¥ä¸º Weex API 模åæ·»å æ°çæ¹æ³ï¼æè å建æ°ç API 模ååæ°çå è½½å¨ãæç §ä»¥ä¸å 个æ¥éª¤æ©å±ä½ çç»ä»¶ï¼API æè å è½½å¨ã é¦å è¦æç¡®çæ¯ï¼ç»ä»¶å API 模åæ¯åºäº Weex çæ©å±ï¼ä½æ¯ç¬ç«äº Weexï¼ç»ä»¶çå®ä¹æ¬èº«æ¯ä¸éè¦ä¾èµäº Weex çï¼è¿æ ·æå©"> -<meta property="og:updated_time" content="2017-04-28T02:36:21.000Z"> -<meta name="twitter:card" content="summary"> -<meta name="twitter:title" content="weex-html5 æ©å±"> -<meta name="twitter:description" content="æ©å± weex-html5ç®ä»Weex æ¯ä¸ä¸ªé«å¯æ©å±æ§ç跨平å°å¨æåå¼åæ¹æ¡ï¼ä½ å¯ä»¥å¨ç°æç»ä»¶åºç¡ä¸å®å¶èªå·±éè¦çä¸ç«¯ç»ä»¶ãä½ å¯ä»¥ä¸º Weex API 模åæ·»å æ°çæ¹æ³ï¼æè å建æ°ç API 模ååæ°çå è½½å¨ãæç §ä»¥ä¸å 个æ¥éª¤æ©å±ä½ çç»ä»¶ï¼API æè å è½½å¨ã é¦å è¦æç¡®çæ¯ï¼ç»ä»¶å API 模åæ¯åºäº Weex çæ©å±ï¼ä½æ¯ç¬ç«äº Weexï¼ç»ä»¶çå®ä¹æ¬èº«æ¯ä¸éè¦ä¾èµäº Weex çï¼è¿æ ·æå©"> - - <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml"> - - - <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png"> - - - <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css"> - - <link rel="stylesheet" href="/css/style.css"> - <link rel="stylesheet" href="/css/swiper.min.css"> -</head> - -<body id="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">æç¨</a></li> - <li><a href="/cn/references">æå</a></li> - <li class="dropdown"> - <a href="javascript:;">åè</a> - <ul class="dropdown-menu subnav"> - <li> - <a href="/cn/faq.html">FAQ</a> - </li> - <li> - <a href="/cn/releasenote.html">çæ¬è¯´æ</a> - </li> - </ul> - </li> - <li class="dropdown"> - <a href="javascript:;">å·¥å ·åæå¡</a> - <ul class="dropdown-menu subnav"> - <li> - <a href="/cn/playground.html">Playground</a> - </li> - <li> - <a href="/cn/guide/tools/toolkit.html">Weex-toolkit</a> - </li> - <li> - <a href="http://dotwe.org"; target="_blank">Code Snippets</a> - </li> - <li> - <a href="https://market.dotwe.org"; target="_blank">Market</a> - </li> - </ul> - </li> - </ul> - <ul class="info"> - <li><a href="https://github.com/apache/incubator-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"> <!-- æç´¢æ¡ç¸å ³ --> - <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-html5.html" data-lang="en">English</a> - </li> - <li> - <a href="/cn/v-0.10/advanced/extend-to-html5.html" data-lang="zh-cn">ä¸æ</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"> <!-- æç´¢æ¡ç¸å ³ --> - <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"> - æç¨ - </a> - </li> - <li> - <a class="" href="/cn/references"> - æå - </a> - </li> - <li> - <a href="/cn/faq.html"> - FAQ - </a> - </li> - <li> - <p>å·¥å ·åæå¡</p> - <ul class="subnav"> - <li> - <a href="/cn/playground.html">Playground</a> - </li> - <li> - <a href="/cn/guide/tools/devtools.html">Devtools</a> - </li> - <li> - <a href="/cn/guide/tools/weexpack.html">Weexpack</a> - </li> - <li> - <a href="http://dotwe.org"; target="_blank">Snippets</a> - </li> - <li> - <a href="https://market.dotwe.org"; target="_blank">Market</a> - </li> - </ul> - </li> - <li> - <a href="https://github.com/apache/incubator-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"> - - é«é¶ç¥è¯ - - </h2> - <ul class="doc-summary"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex å·¥ä½åç</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">æ°æ®ç»å®åç</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">å¦ä½å建ä¸ä¸ª Weex 项ç®</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">éæå° Android</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">éæå° iOS</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">éæå° web</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">èªå®ä¹ native ç»ä»¶</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">èªå®ä¹ 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 æ©å±</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link ">iOS æ©å±</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link current ">weex-html5 æ©å±</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">éæ Devtools å° Android</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">éæ Devtools å° iOS</a></h3> - - </li> - - - - </ul> -</div> - </div> - - -<article class="article article-type-advanced"> - <div class="article-entry" itemprop="articleBody"> - <header class="article-header"> - - - <h1 class="article-title" itemprop="name"> - weex-html5 æ©å± - </h1> - - - <time class="article-date" datetime="2017-04-28T02:36:21.000Z">Updated time: 28/04/2017</time> -</header> - <h1 id="æ©å±-weex-html5"><a href="#æ©å±-weex-html5" class="headerlink" title="æ©å± weex-html5"></a>æ©å± weex-html5</h1><h3 id="ç®ä»"><a href="#ç®ä»" class="headerlink" title="ç®ä»"></a>ç®ä»</h3><p>Weex æ¯ä¸ä¸ªé«å¯æ©å±æ§ç跨平å°å¨æåå¼åæ¹æ¡ï¼ä½ å¯ä»¥å¨ç°æç»ä»¶åºç¡ä¸å®å¶èªå·±éè¦çä¸ç«¯ç»ä»¶ãä½ å¯ä»¥ä¸º Weex API 模åæ·»å æ°çæ¹æ³ï¼æè å建æ°ç API 模ååæ°çå è½½å¨ãæç §ä»¥ä¸å 个æ¥éª¤æ©å±ä½ çç»ä»¶ï¼API æè å è½½å¨ã</p> -<p>é¦å è¦æç¡®çæ¯ï¼ç»ä»¶å API 模åæ¯åºäº Weex çæ©å±ï¼ä½æ¯ç¬ç«äº Weexï¼ç»ä»¶çå®ä¹æ¬èº«æ¯ä¸éè¦ä¾èµäº Weex çï¼è¿æ ·æå©äºç»ä»¶çåæ£å管çï¼å»é¤ä¸å¿åä¾èµã</p> -<p>å ¶æ¬¡ï¼å½ä½ æ©å±ä¸ä¸ªç»ä»¶ï¼ä½ éè¦åæ¶æ©å±ä¸ç«¯çç»ä»¶ï¼android, ios å web 端ï¼ï¼æ¯ç« Weex æ¯ä¸ä¸ªéè§ä¸ç«¯ä¸è´ä½éªç跨平å°ç§»å¨æ¡æ¶ãä½ å¯ä»¥ä¸ä¸ªç«¯ä¸ä¸ªç«¯çæ©å±ï¼ä¹å¯ä»¥å¬å¤å ¶ä»ç«¯ä¸çå¼åè æ¥å ±åå®æä½ å¨å ¶ä»ç«¯ä¸çç»ä»¶ï¼ä½ æ»æ¯å¯ä»¥å¨ç¤¾åºæ¾å°å¯¹æ个åè½æå ±åéæ±çå¼åè ï¼ãè¿éæä¸äºå¨ <a href="./extend-to-android.md">android 端</a>å <a href="./extend-to-ios.md">ios 端</a>åæ©å±çææ¡£å¯ä»¥åèã</p> -<p>ä½ åºè¯¥å°ä½ çæ©å±åå¸å° Weex å¼åè å¯ä»¥æ¹ä¾¿æ¾å°å使ç¨çæ¸ éï¼æ¯å¦ <code>npm</code>ãæ们æ¨èä½ å°ä½ å¼åçç»ä»¶åå¸å° <code>npm</code> ä¾å ¶ä» Weex å¼åè 使ç¨ã</p> -<p>æéè¦çæ¯ï¼ä½ çç»ä»¶çå½åéè¦éµå® Weex ç»ä»¶å½åè§èï¼ä»¥ <code>weex-</code> å¼å¤´ä½ä¸ºç»ä»¶çåç¼ï¼å¹¶ä¸ä»¥ <code>-<platform></code> å为ç»å°¾åç¼ï¼é¤éä½ åå¸çå æ¯ä¸ç«¯çå®ç°é½å å«å¨å çãè¿éæ个 <a href="https://github.com/MrRaindrop/weex-hello-web"; target="_blank" rel="external"><code><weex-hello-web</code>></a> çä¾åä½ä¸ºåèï¼è¿é注åäºä¸ä¸ªç®åçèªå®ä¹çç»ä»¶ã</p> -<h3 id="å建æ°ç»ä»¶"><a href="#å建æ°ç»ä»¶" class="headerlink" title="å建æ°ç»ä»¶"></a>å建æ°ç»ä»¶</h3><p>æ¥éª¤:</p> -<ol> -<li>å¨ä½ çç»ä»¶å®ç°ä¸å¿ é¡»ç»§æ¿ <code>Weex.Component</code> è¿ä¸ªç±», 并éæ©æ§çéåå ¶ä¸çä¸äºæ¹æ³ã</li> -<li>ä½ çç»ä»¶ç exports éè¦æ´é²ä¸ä¸ª <code>init</code> æ¹æ³ï¼å¹¶å¨å ¶ä¸ä½¿ç¨ <code>Weex.registerComponent</code> 注åä½ çç»ä»¶ã</li> -</ol> -<p><strong>è¿éç¨ä¸ä¸ªä¾åå±ç¤ºå¦ä½æ©å±ä¸ä¸ªæ°çç»ä»¶</strong></p> -<p>çè¿ä¸ªç»ä»¶æ©å±ç代ç ( web 端ä¸çç»ä»¶)ï¼</p> -<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">const</span> attr = {</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"><span class="keyword">const</span> style = {</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"><span class="keyword">const</span> event = {</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"><span class="comment">// æ¯ä¸ªæ©å±ç»ä»¶é½éè¦å®ç°ä¸ä¸ªinitæ¹æ³ï¼Weexä¼éè¿è¿æ¹æ³è¿è¡å®è£ å注å.</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">init</span> (<span class="params">Weex</span>) </span>{</div><div class="line"> <span class="keyword">const</span> Component = Weex.Component</div><div class="line"> <span class= "keyword">const</span> extend = Weex.utils.extend</div><div class="line"></div><div class="line"> <span class="comment">// ç»ä»¶çæé å½æ°</span></div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">Hello</span> (<span class="params">data</span>) </span>{</div><div class="line"> Component.call(<span class="keyword">this</span>, data)</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="comment">// prototype继æ¿</span></div><div class="line"> Hello.prototype = <span class="built_in">Object</span>.create(Component.prototype)</div><div class="line"> extend(Hello.prototype, proto)</div><div class="line"></div><div class="line"> <span class="comment">// é ç½®å±æ§ãæ ·å¼ä»¥åäºä»¶</span></div><div class="line"> extend(Hello.prototype, { attr })</div><div class="line"> extend(Hello.prototype, {</div><div class="line"> <span class="attr">style</span>: extend(<span class="built_in">Object</span>.create(Component.prototype.style), style)</div><div class="line"> })</div><div class="line"> extend(Hello.prototype, { event })</div><div class="line"></div><div class="line"> Weex.registerComponent(<span class="string">'weex-hello'</span>, Hello)</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// æ´é²initæ¹æ³æ¥å£.</span></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> { init }</div></pre></td></tr></table></figure> -<p>ä¸è¿°ä»£ç æå¼èª <a href="https://github.com/MrRaindrop/weex-hello-web/blob/master/src/index.js#L46-L65"; target="_blank" rel="external">weex-hello-web/src/index.js</a></p> -<p>è¿ä¸ªdemoéåäºåºç±» <code>Component</code>ä¸ç<code>create</code>æ¹æ³ãä½ ä¹å¯ä»¥éæ©éå<code>Component</code>ä¸çä¸äºå ¶ä»æ¹æ³æ¥å®å¶ç»ä»¶çè¡ä¸ºãå ¸åçæ¹æ³å æ¬ï¼</p> -<ul> -<li><code>create</code>: å建ç»ä»¶çèç¹ï¼å¨æ¹æ³ä½ä¸returnè¿ä¸ªèç¹.</li> -<li><code>createChildren</code> å建åèç¹.</li> -<li><code>insertBefore</code> å¨æ个åèç¹ä¹åæå ¥ä¸ä¸ªæ°çåèç¹.</li> -<li><code>appendChild</code> å¨åèç¹å表çæåå ä¸ä¸ä¸ªèç¹.</li> -<li><code>removeChild</code> 移é¤ä¸ä¸ªåèç¹.</li> -</ul> -<p><strong>è¿é¶</strong>ï¼æ´å¤å ³äºç»ä»¶å®å¶åæ©å±çç»èå代ç å±ç¤ºï¼å¯ä»¥åè <a href="https://github.com/apache/incubator-weex/tree/dev/html5"; target="_blank" rel="external">weex 主ä»åºç代ç </a>ï¼è¿éçç»ä»¶åºæ¬ä¸é½æ¯éè¿ä¸è¿°æ¹å¼è¿è¡å®ä¹çã</p> -<p>éè¦çä¸ç¹ï¼æ³¨åç»ä»¶çå ³é®æ¹æ³æ¯ <code>Weex.registerComponent</code>ï¼å¦ç¤ºä¾éç <code>weex-hello</code> ç»ä»¶ç注åï¼</p> -<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line">Weex.registerComponent(<span class="string">'weex-hello'</span>, Hello)</div></pre></td></tr></table></figure> -<p>ä¸è¿°ä»£ç å¼èª <a href="https://github.com/MrRaindrop/weex-hello-web/blob/master/src/index.js#L62"; target="_blank" rel="external">weex-hello-web/src/index.js</a></p> -<p>å¨æ个éè¦ä½¿ç¨è¯¥ç»ä»¶çweex项ç®ä¸ä½¿ç¨ <code>Weex.install</code> æ¹æ³å®è£ 该ç»ä»¶ï¼</p> -<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="comment">// import the original weex-html5.</span></div><div class="line"><span class="keyword">import</span> weex <span class="keyword">from</span> <span class="string">'weex-html5'</span></div><div class="line"><span class="keyword">import</span> hello <span class="keyword">from</span> <span class="string">'weex-hello-web'</span></div><div class="line"><span class="comment">// install the component.</span></div><div class="line">weex.install(hello)</div></pre></td></tr></table></figure> -<p>ä¸è¿°ä»£ç å¼èª <a href="https://github.com/MrRaindrop/weex_extend_demo/blob/master/src/main.js#L1-L5"; target="_blank" rel="external">weex_extend_demo/src/main.js</a></p> -<p>å¨ä½ ç <code>.we</code> æ件ä¸ç´æ¥ä½¿ç¨è¿ä¸ªç»ä»¶ï¼</p> -<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">weex-hello</span> <span class="attr">class</span>=<span class="string">"hello"</span> <span class="attr">style</span>=<span class="string">"txt-color:#fff;bg-color:green"</span></span></div><div class="line"> <span class="attr">value</span>=<span class="string">"WEEX"</span> <span class="attr">onclick</span>=<span class="string">"handleClick"</span>></div><div class="line"> <span class="tag"></<span class="name">weex-hello</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure> -<p>ä¸è¿°ä»£ç å¼èª<a href="https://github.com/MrRaindrop/weex_extend_demo/blob/master/demo/index.we#L10-L15"; target="_blank" rel="external">weex_extend_demo/demo/index.we</a></p> -<h3 id="æ©å±API"><a href="#æ©å±API" class="headerlink" title="æ©å±API"></a>æ©å±API</h3><p>ä½ å¯ä»¥æ©å±æ°ç API 模åï¼æè 为æ个已æç模åæ·»å æ°ç API. æ¯å¦ï¼ä½ å¯ä»¥æ·»å ä¸ä¸ª API 模åå«å <code>user</code>ï¼å¨éé¢æ·»å ä¸äºç¨æ·ç»å½ç»åºå¤çç APIï¼æ¯å¦ <code>login</code>, <code>logout</code> ççãä½ å¯ä»¥éè¿ <code>require('@weex-module/moduleName)[methodName](arg1, arg2, ...)</code> (<a href="../references/api.md">Module APIs</a>) çæ¹å¼è°ç¨ä½ ç API.</p> -<p>æ¥éª¤:</p> -<ol> -<li>å®ç°ä½ ç API module.</li> -<li>å¨ä½ ç API å®è£ 模åéæ´é²ä¸ä¸ª <code>init</code> æ¹æ³ï¼å¹¶å¨è¿ä¸ªæ¹æ³éé¢ä½¿ç¨ <code>Weex.registerAPIModules</code> 注åä½ ç API module.</li> -</ol> -<p><strong>è¿éç¨ä¸ä¸ªä¾åå±ç¤ºå¦ä½æ©å±ä¸ä¸ªæ°ç API 模å</strong></p> -<p>å建ä¸ä¸ªæ件 <code>user.js</code>ï¼å¨å ¶ä¸å®ä¹ç»å½ç»åº <code>login/logout</code> æ¹æ³.</p> -<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">const</span> user = {</div><div class="line"> <span class="comment">// å®ä¹ç¨æ·ç»å½æ¹æ³.</span></div><div class="line"> login (callbackId) {</div><div class="line"> login.then(<span class="function"><span class="params">res</span> =></span> {</div><div class="line"> <span class="keyword">this</span>.sender.performCallback(callbackId, res)</div><div class="line"> }).catch(<span class="function"><span class="params">err</span> =></span> {</div><div class="line"> <span class="keyword">this</span>.sender.performCallback(callbackId, err)</div><div class="line"> })</div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="comment">// å®ä¹ç¨æ·ç»åºæ¹æ³.</span></div><div class="line"> logout (callbackId) {</div><div class="line"> logout.then(<span class="function"><s pan class="params">res</span> =></span> {</div><div class="line"> <span class="keyword">this</span>.sender.performCallback(callbackId, res)</div><div class="line"> }).catch(<span class="function"><span class="params">err</span> =></span> {</div><div class="line"> <span class="keyword">this</span>.sender.performCallback(callbackId, err)</div><div class="line"> })</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// å®ä¹user模åçå (meta) ä¿¡æ¯.</span></div><div class="line"><span class="keyword">const</span> meta = {</div><div class="line"> <span class="attr">user</span>: [{</div><div class="line"> <span class="attr">name</span>: <span class="string">'login'</span>,</div><div class="line"> <span class="attr">args</span>: [<span class="string">'function'</span>]</div><div class="line"> }, {</div><div class="line"> <span class ="attr">name</span>: <span class="string">'logout'</span>,</div><div class="line"> <span class="attr">args</span>: [<span class="string">'function'</span>]</div><div class="line"> }]</div><div class="line">}</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> init (Weex) {</div><div class="line"> <span class="comment">// 注åè¿ä¸ªæ¨¡åï¼æåä¸ä¸ªåæ°æ¯æ¨¡åçå ä¿¡æ¯.</span></div><div class="line"> Weex.registerApiModule(<span class="string">'user'</span>, user, meta)</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure> -<p>è¿ä¸ªç®åç user helper 模åå°±å®ç°å¥½äºï¼å¯ä»¥åå¸å° npm ä¸ï¼æ们å¯ä»¥ç»è¿ä¸ªæ¨¡åå个ååï¼æ¯å¦è¯´ <code>weex-user-helper</code>ã</p> -<p>å¨ä½ çæ°ç Weex 项ç®éå®è£ è¿ä¸ªæ¨¡å:</p> -<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">import</span> Weex <span class="keyword">from</span> <span class="string">'weex-html5'</span></div><div class="line"><span class="keyword">import</span> user <span class="keyword">from</span> <span class="string">'weex-user-helper'</span></div><div class="line"></div><div class="line">Weex.install(user)</div></pre></td></tr></table></figure> -<p>å®è£ äºè¿ä¸ªæ¨¡åï¼ä½ å°±å¯ä»¥å¨ DSL 代ç éå¼ç¨è¿ä¸ªæ¨¡åå¹²ç¹äºæ äº:</p> -<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"btn"</span> <span class="attr">onclick</span>=<span class="string">"handleClick"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>LOGIN<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">scrip t</span>></span><span class="javascript"></span></div><div class="line"> <span class="keyword">var</span> userHelper = <span class="built_in">require</span>(<span class="string">'@weex-module/user'</span>)</div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">handleClick</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> userHelper.login(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="comment">// ... do sth. in callback.</span></div><div class="line"> })</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>&g t;</span></div></pre></td></tr></table></figure> -<h3 id="å®å¶å è½½å¨loader"><a href="#å®å¶å è½½å¨loader" class="headerlink" title="å®å¶å è½½å¨loader"></a>å®å¶å è½½å¨loader</h3><p><strong>Loaderä» ç¨äºweex-html5 (web端)å è½½dslæå åºæ¥çbundle代ç ï¼nativeå¹³å°æå ¶ä»çå è½½æºå¶</strong></p> -<p>å·²æçå è½½å¨å æ¬ <code>xhr</code>, <code>jsonp</code> å <code>source</code>. ä½ å¯ä»¥ä½¿ç¨ <code>weex.registerLoader</code> 注åä¸ä¸ªæ°çå è½½å¨ãä¾å¦ï¼ä½ æä¸ä¸ªè·å Weex bundle çæå¡ <code>myServe.getWeexBundle</code> , éè¿è¿ä¸ªæå¡å¯ä»¥å è½½ weex bundleï¼ä¸ºæ¤ä½ å¯ä»¥å®ä¹ä¸ä¸ªå è½½å¨ï¼</p> -<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">loadByMyServe</span>(<span class="params">pageId, callback</span>) </span>{</div><div class="line"> myServe.getWeexBundle(pageId).then(<span class="function"><span class="keyword">function</span> (<span class="params">bundle</span>) </span>{</div><div class="line"> callback(bundle)</div><div class="line"> }).catch(<span class="function"><span class="keyword">function</span>(<span class="params">err</span>) </span>{</div><div class="line"> callback(err)</div><div class="line"> })</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// æ´é²initæ¹æ³ç¨äºWeexå®è£ æ¤å è½½å¨.</span></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</div><div class="line"> init (Weex) {</div><di v class="line"> Weex.registerLoader(<span class="string">'myserve'</span>, loadByMyServe)</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure> -<p>å¨ä½ ç weex-html5 项ç®çå¯å¨æ件éå®è£ 并使ç¨è¿ä¸ªå è½½å¨ï¼</p> -<figure class="highlight javascript"><table><tr><td class="code"><pre><div class="line"><span class="keyword">import</span> Weex <span class="keyword">from</span> <span class="string">'weex-html5'</span></div><div class="line"></div><div class="line"><span class="comment">// æè import from './myserve.js'ï¼ä¸ç®¡æ¯importä¸ä¸ªnpm模åè¿æ¯importä¸ä¸ªæ件.</span></div><div class="line"><span class="keyword">import</span> loader <span class="keyword">from</span> <span class="string">'myLoader'</span></div><div class="line"></div><div class="line">Weex.install(loader)</div><div class="line"></div><div class="line"><span class="comment">// å¨initæ¹æ³é使ç¨è¿ä¸ªå è½½å¨å è½½bundleæ件.</span></div><div class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">getUrlParam</span> (<span class="params">key </span>) </span>{</div><div class="line"> <span class="keyword">const</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">'[?|&]'</span> + key + <span class="string">'=([^&]+)'</span>)</div><div class="line"> <span class="keyword">const</span> match = location.search.match(reg)</div><div class="line"> <span class="keyword">return</span> match && match[<span class="number">1</span>]</div><div class="line"> }</div><div class="line"> <span class="keyword">const</span> page = getUrlParam(<span class="string">'page'</span>) || <span class="string">'examples/build/index.js'</span></div><div class="line"> Weex.init({</div><div class="line"> <span class="attr">appId</span>: location.href,</div><div class="line"> <span class="attr">loader</span>: <span class="string">'myserve'</span>, <span class="comment">// 使ç¨åæå®ä¹çloaderç±»å</span></div><div class="line"> source: page,</ div><div class="line"> <span class="attr">rootId</span>: <span class="string">'weex'</span></div><div class="line"> })</div><div class="line">})();</div></pre></td></tr></table></figure> -<p>以ä¸æ¯ Weex 带æ¥çæ©å±æ§éæ¯è¾ä¸»è¦çä¸é¨åï¼æ´å¤å®ç°ç»èå¯ä»¥å¨ <a href="https://github.com/alibaba/weex"; target="_blank" rel="external">weex 项ç®ä»£ç åº</a>以å weex çå¼æºç¤¾åºéæ¾å°ã</p> - - </div> - -</article> -</div> - - <footer id="footer"> - <div class="row clearfix"> - <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-html5.html" data-lang="en">English</a> - </li> - <li> - <a href="/cn/v-0.10/advanced/extend-to-html5.html" data-lang="zh-cn">ä¸æ</a> - </li> - </ul> - </div> - </div> - <div class="disclaimer"> - <div><img src="//gw.alicdn.com/tfs/TB1pTBZQFXXXXX9XXXXXXXXXXXX-794-280.png" width="200px" alt="Apache Incubator"></div> - <div><span class="title">Disclaimer:</span> Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</div> - <br/> - </div> - <hr> - <div class="row"> - <p> <img src="//gw.alicdn.com/tfs/TB1bg8SQFXXXXcHXXXXXXXXXXXX-85-170.png" height="50px" alt="Apache"><span>Copyright(c) 2017 The Apache Software Foundation. Licensed under the </span> <a href="http://www.apache.org/licenses/LICENSE-2.0";>Apache License, Version 2.0</a></p> - </div> - <div class="row clearfix"> - <div></div> - </div> -</footer> - <div style="display: none;"> - <script src="//s95.cnzz.com/z_stat.php?id=1261496509&web_id=1261496509" 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/f3d58bd0/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 deleted file mode 100644 index 7ac541a..0000000 --- a/cn/v-0.10/advanced/extend-to-ios.html +++ /dev/null @@ -1,473 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="utf-8"> - - <title>iOS æ©å± | Weex</title> - <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> - <meta name="description" content="iOS æ©å±Module æ©å±swift æ©å± module Weex SDK åªæä¾æ¸²æï¼èä¸æ¯å ¶ä»çè½åï¼å¦æä½ éè¦ åç½ç»ï¼å¾çï¼URL跳转è¿äºç¹æ§ï¼éè¦èªå·±å¨æå®ç°ä»ä»¬ä¾å¦ï¼å¦æä½ æ³å®ç°ä¸ä¸ªurlå°å跳转å½æ°ï¼ä½ å¯ä»¥æç §å¦ä¸æ¥éª¤å®ç°ä¸ä¸ª Module èªå®ä¹moduleçæ¥éª¤ èªå®ä¹çmoduleç±» å¿ é¡»å®ç° WXModuleProtocol å¿ é¡»æ·»å å®WX_EXPORT_METHO"> -<meta property="og:type" content="website"> -<meta property="og:title" content="iOS æ©å±"> -<meta property="og:url" content="https://weex-project.io/cn/v-0.10/advanced/extend-to-ios.html";> -<meta property="og:site_name" content="Weex"> -<meta property="og:description" content="iOS æ©å±Module æ©å±swift æ©å± module Weex SDK åªæä¾æ¸²æï¼èä¸æ¯å ¶ä»çè½åï¼å¦æä½ éè¦ åç½ç»ï¼å¾çï¼URL跳转è¿äºç¹æ§ï¼éè¦èªå·±å¨æå®ç°ä»ä»¬ä¾å¦ï¼å¦æä½ æ³å®ç°ä¸ä¸ªurlå°å跳转å½æ°ï¼ä½ å¯ä»¥æç §å¦ä¸æ¥éª¤å®ç°ä¸ä¸ª Module èªå®ä¹moduleçæ¥éª¤ èªå®ä¹çmoduleç±» å¿ é¡»å®ç° WXModuleProtocol å¿ é¡»æ·»å å®WX_EXPORT_METHO"> -<meta property="og:updated_time" content="2017-04-28T02:36:21.000Z"> -<meta name="twitter:card" content="summary"> -<meta name="twitter:title" content="iOS æ©å±"> -<meta name="twitter:description" content="iOS æ©å±Module æ©å±swift æ©å± module Weex SDK åªæä¾æ¸²æï¼èä¸æ¯å ¶ä»çè½åï¼å¦æä½ éè¦ åç½ç»ï¼å¾çï¼URL跳转è¿äºç¹æ§ï¼éè¦èªå·±å¨æå®ç°ä»ä»¬ä¾å¦ï¼å¦æä½ æ³å®ç°ä¸ä¸ªurlå°å跳转å½æ°ï¼ä½ å¯ä»¥æç §å¦ä¸æ¥éª¤å®ç°ä¸ä¸ª Module èªå®ä¹moduleçæ¥éª¤ èªå®ä¹çmoduleç±» å¿ é¡»å®ç° WXModuleProtocol å¿ é¡»æ·»å å®WX_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">æç¨</a></li> - <li><a href="/cn/references">æå</a></li> - <li class="dropdown"> - <a href="javascript:;">åè</a> - <ul class="dropdown-menu subnav"> - <li> - <a href="/cn/faq.html">FAQ</a> - </li> - <li> - <a href="/cn/releasenote.html">çæ¬è¯´æ</a> - </li> - </ul> - </li> - <li class="dropdown"> - <a href="javascript:;">å·¥å ·åæå¡</a> - <ul class="dropdown-menu subnav"> - <li> - <a href="/cn/playground.html">Playground</a> - </li> - <li> - <a href="/cn/guide/tools/toolkit.html">Weex-toolkit</a> - </li> - <li> - <a href="http://dotwe.org"; target="_blank">Code Snippets</a> - </li> - <li> - <a href="https://market.dotwe.org"; target="_blank">Market</a> - </li> - </ul> - </li> - </ul> - <ul class="info"> - <li><a href="https://github.com/apache/incubator-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"> <!-- æç´¢æ¡ç¸å ³ --> - <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">ä¸æ</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"> <!-- æç´¢æ¡ç¸å ³ --> - <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"> - æç¨ - </a> - </li> - <li> - <a class="" href="/cn/references"> - æå - </a> - </li> - <li> - <a href="/cn/faq.html"> - FAQ - </a> - </li> - <li> - <p>å·¥å ·åæå¡</p> - <ul class="subnav"> - <li> - <a href="/cn/playground.html">Playground</a> - </li> - <li> - <a href="/cn/guide/tools/devtools.html">Devtools</a> - </li> - <li> - <a href="/cn/guide/tools/weexpack.html">Weexpack</a> - </li> - <li> - <a href="http://dotwe.org"; target="_blank">Snippets</a> - </li> - <li> - <a href="https://market.dotwe.org"; target="_blank">Market</a> - </li> - </ul> - </li> - <li> - <a href="https://github.com/apache/incubator-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"> - - é«é¶ç¥è¯ - - </h2> - <ul class="doc-summary"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/index.html" class="sidebar-link ">Weex å·¥ä½åç</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/how-data-binding-works.html" class="sidebar-link ">æ°æ®ç»å®åç</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/create-a-weex-project.html" class="sidebar-link ">å¦ä½å建ä¸ä¸ª Weex 项ç®</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-android.html" class="sidebar-link ">éæå° Android</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-ios.html" class="sidebar-link ">éæå° iOS</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-to-html5.html" class="sidebar-link ">éæå° web</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/customize-a-native-component.html" class="sidebar-link ">èªå®ä¹ native ç»ä»¶</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/cuszomize-native-apis.html" class="sidebar-link ">èªå®ä¹ 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 æ©å±</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-ios.html" class="sidebar-link current ">iOS æ©å±</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/extend-to-html5.html" class="sidebar-link ">weex-html5 æ©å±</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-android.html" class="sidebar-link ">éæ Devtools å° Android</a></h3> - - </li> - - <li> - <h3 class="chapter-title"><a href="/cn/v-0.10/advanced/integrate-devtools-to-ios.html" class="sidebar-link ">éæ Devtools å° 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 æ©å± - </h1> - - - <time class="article-date" datetime="2017-04-28T02:36:21.000Z">Updated time: 28/04/2017</time> -</header> - <h2 id="iOS-æ©å±"><a href="#iOS-æ©å±" class="headerlink" title="iOS æ©å±"></a>iOS æ©å±</h2><h3 id="Module-æ©å±"><a href="#Module-æ©å±" class="headerlink" title="Module æ©å±"></a>Module æ©å±</h3><p><a href="https://github.com/weexteam/article/issues/55"; target="_blank" rel="external">swift</a> æ©å± module </p> -<p>Weex SDK åªæä¾æ¸²æï¼èä¸æ¯å ¶ä»çè½åï¼å¦æä½ éè¦ åç½ç»ï¼å¾çï¼URL跳转è¿äºç¹æ§ï¼éè¦èªå·±å¨æå®ç°ä»ä»¬<br>ä¾å¦ï¼å¦æä½ æ³å®ç°ä¸ä¸ªurlå°å跳转å½æ°ï¼ä½ å¯ä»¥æç §å¦ä¸æ¥éª¤å®ç°ä¸ä¸ª Module</p> -<ol> -<li><p><strong>èªå®ä¹moduleçæ¥éª¤</strong></p> -<ol> -<li>èªå®ä¹çmoduleç±» å¿ é¡»å®ç° <code>WXModuleProtocol</code></li> -<li>å¿ é¡»æ·»å å®<code>WX_EXPORT_METHOD</code>, å®å¯ä»¥è¢«weexè¯å«ï¼å®çåæ°æ¯ JavaScriptè°ç¨ moduleæå®æ¹æ³çåæ°</li> -<li>æ·»å <code>@synthesized weexInstance</code>ï¼æ¯ä¸ªmoudle对象被ç»å®å°ä¸ä¸ªæå®çå®ä¾ä¸</li> -<li>Module æ¹æ³ä¼å¨UI线ç¨ä¸è¢«è°ç¨ï¼æ以ä¸è¦å太å¤èæ¶çä»»å¡å¨è¿éï¼å¦æè¦å¨å ¶ä»çº¿ç¨æ§è¡æ´ä¸ªmodule æ¹æ³ï¼éè¦å®ç°<code>WXModuleProtocol</code>ä¸<code>- (NSThread *)targetExecuteThread</code>çæ¹æ³ï¼è¿æ ·ï¼ååå°è¿ä¸ªmoduleçä»»å¡ä¼å¨æå®ç线ç¨ä¸è¿è¡</li> -<li>Weex çåæ°å¯ä»¥æ¯ String æè Map</li> -<li><p>Module æ¯æè¿åå¼ç» JavaScriptä¸çåè°ï¼åè°çç±»åæ¯<code>WXModuleCallback</code>,åè°çåæ°å¯ä»¥æ¯Stringæè Map</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>éè¿è°ç¨ WXSDKEngine ä¸ç <code>registerModule:withClass</code>æ¹æ³æ¥æ³¨åèªå·±çmodule</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>使ç¨èªå·±çmodule</strong><br> è¿éç require éé¢çevent å°±æ¯å¨ ä¸ä¸æ¥è°ç¨<code>registerModule:</code> 注åmodule æ¶åçname</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没æ å¾çä¸è½½ï¼navigation æä½çè½åï¼è¯·å¤§å®¶èªå·±å®ç°è¿äº protocol</p> -<h3 id="handler-æ©å±"><a href="#handler-æ©å±" class="headerlink" title="handler æ©å±"></a>handler æ©å±</h3><p> <strong>WXImgLoaderProtocol</strong> </p> -<p> weexSDK 没ææä¾å¾çä¸è½½çè½åï¼éè¦å®ç° WXImgLoaderProtocol,åèä¸é¢çä¾å</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> å®ç°ä¸è¿°åè®® </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注å</strong> </p> -<p>ä½ å¯ä»¥éè¿WXSDKEngine ä¸ç <code>registerHandler:withProtocol</code>注åhandler</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-æ©å±"><a href="#Component-æ©å±" class="headerlink" title="Component æ©å±"></a>Component æ©å±</h4><p> è½ç¶WeexSDKä¸ææä¾å ç½®çä¸äºComponentï¼ä½è¿æå¯è½å¹¶ä¸è½æ»¡è¶³ä½ çéæ±ãå¨ä¹åä½ å¯è½å·²ç»åäºä¸äºå¾é ·ç«nativeçç»ä»¶ï¼æ³å è£ ä¸ä¸ï¼å¯¼å ¥å°Weexä¸ï¼å æ¤æ们æä¾äºè®©å¼åè å®ç°èªå·±çnative Component<br> ä¸é¢å°ä»¥WeexSDK ä¸å·²ç»åå¨ç Componentï¼<code>image</code>为ä¾åï¼ä»ç»ä¸ä¸å¦ä½æ建ä¸ä¸ªnative Component.<br> åè®¾ä½ å·²ç»äºè§£IOSå¼å </p> -<ol> -<li>注å Component<br>注åä¸ä¸ªcomponentæ¯è¾ç®åï¼è°ç¨ <code>WXSDKEngine</code> ä¸ç <code>registerComponent:withClass:</code>æ¹æ³ï¼ä¼ å ¥ç»ä»¶çæ ç¾å称ï¼è¿æ对åºçclass<br>ç¶åä½ å¯ä»¥å建ä¸ä¸ª <code>WXImageComponent</code> 表示<code>image</code>ç»ä»¶çå®ç° å¨.we æ件ä¸ï¼åªéè¦å <pre><code><image></image> -</code></pre></li> -<li><p>æ·»å å±æ§<br>ç°å¨æ们è¦åä¸äºè®©image componentæ´å 强大çäºæ ãæ¢ç¶ä½ä¸ºä¸ä¸ªå¾ççcomponentï¼é£å®åºè¯¥è¦ææºï¼ç»ä»å ä¸ä¸ä¸ª <code>src</code>çå±æ§ï¼åæ¶ç»å®å ä¸ä¸ä¸ª<code>resize</code>çå±æ§ï¼å¯ä»¥é ç½®çæ<code>contain/cover/stretch</code>ï¼</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ä¸ææçstyleï¼attributeï¼eventsé½ä¼è¢«ä¼ éå° Componentçåå§åæ¹æ³ä¸ï¼æ以ï¼ä½ å¯ä»¥å¨åå§åæ¹æ³ä¸åå¨ä½ æå ´è¶£çä¸äºå±æ§å¼</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ä¸æ¿å°çå¼çç±»åé½æ¯<code>id</code>,æ们å¯ä»¥ç¨è½¬æ¢æ¹æ³æå®è½¬æ¢å°ä»»ä½å¼ãWeex SDKæä¾äºä¸äºåºç¡ç转æ¢æ¹æ³ï¼å¯ä»¥åè <code>WXConvert</code>ç±»ï¼æè ä½ å¯ä»¥æ·»å èªå·±ç转æ¢å½æ°</p> -<ol> -<li><p>Hooking 渲æçå½å¨æ<br> native çcomponent æ¯ç±Weex管ççï¼weex å建ï¼å¸å±ï¼æ¸²æï¼éæ¯ãweexçcomponentçå½å¨æé½æ¯å¯ä»¥hookçï¼ä½ å¯ä»¥å¨è¿äºçå½å¨æä¸å»åèªå·±çäºæ </p> -<p>| æ¹æ³ | æè¿° |<br>| :-: | â |<br>| initWithRef:type:⦠| ç¨ç»å®çå±æ§åå§åä¸ä¸ªcomponent. |<br>| layoutDidFinish | å¨componentå®æå¸å±æ¶åä¼è°ç¨. |<br>| loadView | å建component管ççview. |<br>| viewWillLoad | å¨componentçviewå è½½ä¹åä¼è°ç¨. |<br>| viewDidLoad | å¨componentçviewå è½½å®ä¹åè°ç¨. |<br>| viewWillUnload | å¨componentçview被éæ¾ä¹åè°ç¨. |<br>| viewDidUnload | å¨componentçview被éæ¾ä¹åè°ç¨. |<br>| updateStyles: | å¨componentçstyleæ´æ°æ¶åè°ç¨. |<br>| updateAttributes: | å¨componentçattributeæ´æ°æ¶åè°ç¨. |<br>| addEvent: | ç»componentæ·»å eventçæ¶åè°ç¨. |<br>| removeEvent: | å¨event移é¤çæ¶åè°ç¨. |</p> -<p>å¨image componentçä¾åéé¢ï¼å¦ææ们éè¦æ们èªå·±çimage view çè¯ï¼å¯ä»¥å¤å <code>loadView</code>è¿ä¸ªæ¹æ³.</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> ç°å¨æä»¬ä½¿ç¨ <code>WXImageView</code> 渲æ <code>image</code> componentã </p> -<ol> -<li><p>ä½ä¸ºä¸ä¸ªimage componentï¼æ们éè¦æ¿å°æå¡å¨å¾çï¼èä¸æå®è®¾ç½®è¿image view é. è¿ä¸ªæä½å¯ä»¥å¨ <code>viewDidLoad</code> æ¹æ³ä¸åï¼è¿ä¸ªæ¹æ³æ¯å¨viewå·²ç»è¢«å建èä¸å è½½äºæ¶åweex SDKä¼è°ç¨å°ï¼èä¸<code>viewDidLoad</code>è¿ä¸ªæ¹æ³æ¯ä½ åé¢å¤åå§åå·¥ä½æ¯å¦æ¹åcontent mode(ä¹å°±æ¯è®¾ç½®resize) çæ好æ¶é´.</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>å¦æå¯ä»¥æ¹åimageçsrc,ä¹å¯ä»¥hook <code>updateAttributes:</code>æ¹æ³æ¥åå±æ§æ´æ°æä½ï¼å½<code>updateAttributes:</code>æè <code>updateStyles:</code>被è°ç¨çæ¶åï¼ componentçview å·²ç»å è½½å®æ</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> æè®¸ä½ éè¦èèæ´å¤ççå½å¨ææ¹æ³å»Hookï¼å½å¸å±å®ææ¶åï¼å<code>layoutDidFinish</code>ï¼å¦æä½ æ³äºè§£æ´å¤ï¼å¯ä»¥åèä¸ä¸<code>WXComponent.h</code> 声æçæ¹æ³<br> ç°å¨ä½ å¯ä»¥ç¨å¨ä»»ä½ .weæ件éé¢ä½¿ç¨ <code><image></code>ï¼èä¸å¯ä»¥å ä¸ imageçå±æ§</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-æ¹æ³"><a href="#component-æ¹æ³" class="headerlink" title="component æ¹æ³"></a>component æ¹æ³</h5><p>WeexSDK 0.9.5 ä¹åæ¯æäºå¨jsä¸ç´æ¥è°ç¨componentçæ¹æ³ï¼è¿éæä¾ä¸ä¸ªä¾åï¼</p> -<ul> -<li><p>èªå®ä¹ä¸ä¸ªWXMyCompoenent çç»ä»¶</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)) // æ´é²è¯¥æ¹æ³ç»js</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>注åç»ä»¶ <code>[WXSDKEngine registerComponent:@"mycomponent" withClass:[WXMyComponent class]]</code></li> -<li><p>å¨weex æ件ä¸è°ç¨</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="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">ä¸æ</a> - </li> - </ul> - </div> - </div> - <div class="disclaimer"> - <div><img src="//gw.alicdn.com/tfs/TB1pTBZQFXXXXX9XXXXXXXXXXXX-794-280.png" width="200px" alt="Apache Incubator"></div> - <div><span class="title">Disclaimer:</span> Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</div> - <br/> - </div> - <hr> - <div class="row"> - <p> <img src="//gw.alicdn.com/tfs/TB1bg8SQFXXXXcHXXXXXXXXXXXX-85-170.png" height="50px" alt="Apache"><span>Copyright(c) 2017 The Apache Software Foundation. Licensed under the </span> <a href="http://www.apache.org/licenses/LICENSE-2.0";>Apache License, Version 2.0</a></p> - </div> - <div class="row clearfix"> - <div></div> - </div> -</footer> - <div style="display: none;"> - <script src="//s95.cnzz.com/z_stat.php?id=1261496509&web_id=1261496509" language="JavaScript"></script> -</div> - - <script src="/js/reqwest.js"></script> - <script src="/js/common.js"></script> -</body> -</html>
