<div class="htmledit_views" id="content_views">
<h3 style="font-size:16px;line-height:1.5;color:rgb(0,0,0);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);"><a name="t0"></a>轉自：http://www.cnblogs.com/erbingbing/p/7086212.html#3723909</h3><h3 style="font-size:16px;line-height:1.5;color:rgb(0,0,0);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);"><br></h3><h3 style="font-size:16px;line-height:1.5;color:rgb(0,0,0);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);"><a name="t2"></a>小程式項目開發</h3><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">在時隔半年以後，又開始了小程式之旅。
在它剛開始出現的時候，隻是簡單的做了 技術預研的工作。
現在 又回到 原點，發現變化已經很大了
之前的開發過程的體驗不是很友好，在寫完 代碼之後依然需要手動重新整理，
檔案夾中 存放的檔案 繁雜、容易讓新手混亂。
現在，為了滿足開發環境的需要 wepy 這個架構就出現了。
現在，我們對于 wepy 這個架構進行一系列的深入了解，
并同原生的 小程式開發做一個對比。
看看 新架構開發體驗如何？ </code><div class="hljs-button" data-title="複制"></div></pre><h4 style="font-size:14px;color:rgb(51,51,51);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);">變化一、 項目的 檔案 以及目錄結構的變化。</h4><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs fortran perl" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);"><span class="hljs-number"><span class="hljs-number">1</span>.</span> 在原生的小程式的開發過程中，它的目錄結構是這樣的
project
├── pages
| ├── <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">index</span></span>
| | ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">index</span>.json <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">index</span></span> 頁面配置
| | ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">index</span>.js <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">index</span></span> 頁面邏輯
| | ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">index</span>.wxml <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">index</span></span> 頁面結構
| | └── <span class="hljs-built_in" style="color:rgb(0,0,255);">index</span>.wxss <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">index</span></span> 頁面樣式表
| └── <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">log</span></span>
| ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">log</span>.json <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">log</span></span> 頁面配置
| ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">log</span>.wxml <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">log</span></span> 頁面邏輯
| ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">log</span>.js <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">log</span></span> 頁面結構
| └── <span class="hljs-built_in" style="color:rgb(0,0,255);">log</span>.wxss <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">log</span></span> 頁面樣式表
├── app.js 小程式邏輯
├── app.json 小程式公共設定
└── app.wxss 小程式公共樣式表
在 wepy 這個架構中的 目錄結構，是這樣的
project
└── src
├── pages
| ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">index</span>.wpy <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">index</span></span> 頁面配置、結構、樣式、邏輯
| └── <span class="hljs-built_in" style="color:rgb(0,0,255);">log</span>.wpy <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">log</span></span> 頁面配置、結構、樣式、邏輯
└──app.wpy 小程式配置項（全局樣式配置、聲明鈎子等）
是不是 很類似于 vue 的 .vue 檔案？ 意不意外？</code><div class="hljs-button" data-title="複制"></div></pre><h4 style="font-size:14px;color:rgb(51,51,51);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);">變化二、 預設使用 babel編譯， 那麼就是支援 ES6/7 的新特性。</h4><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);"><span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">app</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span> 檔案</code><div class="hljs-button" data-title="複制"></div></pre><div class="sourceCode" style="color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;text-align:left;background-color:rgb(255,255,255);"><pre onclick="hljs.copyCode(event)"><code class="language-javascript hljs"><code class="sourceCode javascript hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">
<span class="im"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">import</span></span></span> wepy form <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'wepy'</span></span></span>
<span class="im"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">export</span></span></span> <span class="im"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">default</span></span></span> <span class="kw"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-class"><span class="hljs-keyword">class</span></span></span></span></span><span class="hljs-class"><span class="hljs-class"> </span></span><span class="kw"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-class"><span class="hljs-keyword">extends</span></span></span></span></span><span class="hljs-class"><span class="hljs-class"> </span></span><span class="va"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="hljs-class"><span class="hljs-title">wepy</span></span></span></span></span><span class="hljs-class"><span class="hljs-class">.</span></span><span class="at"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="hljs-class"><span class="hljs-title">app</span></span></span></span></span><span class="hljs-class"><span class="hljs-class"> </span></span><span class="op">{</span>
config <span class="op">=</span> <span class="op">{</span>
<span class="dt"><span class="hljs-attr">pages</span></span><span class="op">:</span> [
<span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'pages/index'</span></span></span>
]<span class="op">,</span>
<span class="dt"><span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-attr">window</span></span></span><span class="op">:</span> <span class="op">{</span>
<span class="dt"><span class="hljs-attr">backgroundTextStyle</span></span><span class="op">:</span> <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'light'</span></span></span><span class="op">,</span>
<span class="dt"><span class="hljs-attr">navigationBarBackgroundColor</span></span><span class="op">:</span> <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'#fff'</span></span></span><span class="op">,</span>
<span class="dt"><span class="hljs-attr">navigationBarTitleText</span></span><span class="op">:</span> <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'WeChat'</span></span></span><span class="op">,</span>
<span class="dt"><span class="hljs-attr">navigationBarTextStyle</span></span><span class="op">:</span> <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'black'</span></span></span>
<span class="op">}</span>
<span class="op">}</span>
<span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">async</span></span> <span class="at">testAsync</span> () <span class="op">{</span>
<span class="kw"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">const</span></span></span> data <span class="op">=</span> <span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">await</span></span> <span class="kw"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">this</span></span></span>.<span class="at">sleep</span>(<span class="dv"><span class="hljs-number"><span class="hljs-number">3</span></span></span>)
<span class="va"><span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-built_in">console</span></span></span>.<span class="at">log</span>(data)
<span class="op">}</span>
<span class="op">}</span></code></code><div class="hljs-button" data-title="複制"></div></pre></div><h4 style="font-size:14px;color:rgb(51,51,51);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);">三、支援元件化開發。</h4><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">元件的代碼同 頁面的代碼
<span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">components</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span></code><div class="hljs-button" data-title="複制"></div></pre><div class="sourceCode" style="color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;text-align:left;background-color:rgb(255,255,255);"><pre onclick="hljs.copyCode(event)"><code class="language-html hljs xml"><code class="sourceCode html hljs xml" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">panel</span></span></span><span class="hljs-tag">></span></span></span>test<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">panel</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">import</span></span></span></span></span><span class="javascript"><span class="javascript"> wepy </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">from</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">'wepy'</span></span></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">export</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">default</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">class</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">Components</span></span></span></span><span class="javascript"><span class="hljs-class"> </span></span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">extends</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="va"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">wepy</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class">.</span></span></span><span class="at"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">component</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
components </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
</span></span><span class="dt"><span class="javascript"><span class="hljs-attr">child</span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript"> Child
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span></span></span><span class="ss"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span></code></code><div class="hljs-button" data-title="複制"></div></pre></div><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">這裡需要強調一點，這個同 vuejs 的開發模式太像了。
建議，如果沒有 vuejs 開發經驗的同學，先去使用下 vuejs 來開發
再回來看這個架構你會非常爽的。</code><div class="hljs-button" data-title="複制"></div></pre><h4 style="font-size:14px;color:rgb(51,51,51);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);">四、 關于 wepy.config.js 配置說明</h4><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">看到 這個 檔案的 命名方式，内心一驚，這不就是 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">webpack</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.config</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.js</span></span> 嘛
然後帶着這個疑問 回到 檢視 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">wepy</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.config</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.js</span></span> 檔案内容</code><div class="hljs-button" data-title="複制"></div></pre><div class="sourceCode" style="color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;text-align:left;background-color:rgb(255,255,255);"><pre onclick="hljs.copyCode(event)"><code class="language-javascript hljs"><code class="sourceCode javascript hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">
<span class="va"><span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-built_in">module</span></span></span>.<span class="at">exports</span> <span class="op">=</span> <span class="op">{</span>
<span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'output'</span></span></span><span class="op">:</span> <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'dist'</span></span></span><span class="op">,</span>
<span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'source'</span></span></span><span class="op">:</span> <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'src'</span></span></span>
...
<span class="op">}</span></code></code><div class="hljs-button" data-title="複制"></div></pre></div><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);"> 這簡直就是 webpack 的翻版嘛，搞定這個配置。 我們繼續往下看</code><div class="hljs-button" data-title="複制"></div></pre><p style="color:rgb(0,0,0);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);">五、為什麼能實作這麼一個功能？</p><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">我們先來看一個圖</code><div class="hljs-button" data-title="複制"></div></pre><p style="color:rgb(0,0,0);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);"><img src="https://cloud.githubusercontent.com/assets/2182004/22774706/422375b0-eee3-11e6-9046-04d9cd3aa429.png" style="border:0px;" alt=""></p><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">我覺得 這個架構的作者是講 webpack 的建構工具 了解的很透徹，拆分， 合并。
組裝，壓縮等等。 最後成為 小程式官方規定的樣子。</code><div class="hljs-button" data-title="複制"></div></pre><p style="color:rgb(0,0,0);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);">六、API 以及相關 入口問題</p><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">一、程式入口檔案 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">app</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span></code><div class="hljs-button" data-title="複制"></div></pre><div class="sourceCode" style="color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;text-align:left;background-color:rgb(255,255,255);"><pre onclick="hljs.copyCode(event)"><code class="language-html hljs xml"><code class="sourceCode html hljs xml" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span></span></span><span class="ot"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"> </span><span class="hljs-attr" style="color:#FF0000;"><span class="hljs-tag"><span class="hljs-attr">lang</span></span></span><span class="hljs-tag">=</span></span></span><span class="st"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-tag"><span class="hljs-string">"less"</span></span></span></span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">></span></span></span><span class="css"><span class="css">
</span></span><span class="co"><span class="css"><span class="hljs-comment" style="color:#008000;"><span class="css"><span class="hljs-comment">/** less **/</span></span></span></span></span><span class="css"><span class="css">
</span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">import</span></span></span></span></span><span class="javascript"><span class="javascript"> wepy </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">from</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">'wepy'</span></span></span></span></span><span class="op"><span class="javascript">;</span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">export</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">default</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">class</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">extends</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="va"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">wepy</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class">.</span></span></span><span class="at"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">app</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
config </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"pages"</span></span></span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript">[
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"pages/index/index"</span></span></span></span></span><span class="javascript"><span class="javascript">
]</span></span><span class="op"><span class="javascript">,</span></span><span class="javascript"><span class="javascript">
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"window"</span></span></span></span></span><span class="op"><span class="javascript">:{</span></span><span class="javascript"><span class="javascript">
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"backgroundTextStyle"</span></span></span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"light"</span></span></span></span></span><span class="op"><span class="javascript">,</span></span><span class="javascript"><span class="javascript">
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"navigationBarBackgroundColor"</span></span></span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"#fff"</span></span></span></span></span><span class="op"><span class="javascript">,</span></span><span class="javascript"><span class="javascript">
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"navigationBarTitleText"</span></span></span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"WeChat"</span></span></span></span></span><span class="op"><span class="javascript">,</span></span><span class="javascript"><span class="javascript">
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"navigationBarTextStyle"</span></span></span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"black"</span></span></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">};</span></span><span class="javascript"><span class="javascript">
</span></span><span class="at"><span class="javascript">onLaunch</span></span><span class="javascript"><span class="javascript">() </span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
</span></span><span class="va"><span class="javascript"><span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-built_in">console</span></span></span></span></span><span class="javascript"><span class="javascript">.</span></span><span class="at"><span class="javascript">log</span></span><span class="javascript"><span class="javascript">(</span></span><span class="kw"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">this</span></span></span></span></span><span class="javascript"><span class="javascript">)</span></span><span class="op"><span class="javascript">;</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span></span></span><span class="ss"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span></code></code><div class="hljs-button" data-title="複制"></div></pre></div><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">入口檔案中的 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">config</span></span> 對象，對應着 原生小程式中的 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">app</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.json</span></span> 檔案的功能一模一樣。
然後 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">app</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span> 繼承自 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">wepy</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.app</span></span>
二、頁面 檔案 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">index</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span></code><div class="hljs-button" data-title="複制"></div></pre><div class="sourceCode" style="color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;text-align:left;background-color:rgb(255,255,255);"><pre onclick="hljs.copyCode(event)"><code class="language-html hljs xml"><code class="sourceCode html hljs xml" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span></span></span><span class="ot"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"> </span><span class="hljs-attr" style="color:#FF0000;"><span class="hljs-tag"><span class="hljs-attr">lang</span></span></span><span class="hljs-tag">=</span></span></span><span class="st"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-tag"><span class="hljs-string">"less"</span></span></span></span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">></span></span></span><span class="css"><span class="css">
</span></span><span class="co"><span class="css"><span class="hljs-comment" style="color:#008000;"><span class="css"><span class="hljs-comment">/** less **/</span></span></span></span></span><span class="css"><span class="css">
</span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span></span></span><span class="ot"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"> </span><span class="hljs-attr" style="color:#FF0000;"><span class="hljs-tag"><span class="hljs-attr">lang</span></span></span><span class="hljs-tag">=</span></span></span><span class="st"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-tag"><span class="hljs-string">"wxml"</span></span></span></span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">counter1</span></span></span><span class="hljs-tag">></span></span><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">counter1</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">import</span></span></span></span></span><span class="javascript"><span class="javascript"> wepy form </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">'wepy'</span></span></span></span></span><span class="op"><span class="javascript">;</span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">import</span></span></span></span></span><span class="javascript"><span class="javascript"> Counter </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">from</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">'../components/counter'</span></span></span></span></span><span class="op"><span class="javascript">;</span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">export</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">default</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">class</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">Index</span></span></span></span><span class="javascript"><span class="hljs-class"> </span></span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">extends</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="va"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">wepy</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class">.</span></span></span><span class="at"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">page</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
config </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
components </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{</span></span><span class="dt"><span class="javascript"><span class="hljs-attr">counter1</span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript"> Counter</span></span><span class="op"><span class="javascript">};</span></span><span class="javascript"><span class="javascript">
data </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
methods </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
events </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
</span></span><span class="at"><span class="javascript">onLoad</span></span><span class="javascript"><span class="javascript">() </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
</span></span><span class="co"><span class="javascript"><span class="hljs-comment" style="color:#008000;"><span class="javascript"><span class="hljs-comment">// Other properties</span></span></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span></span></span><span class="ss"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span></code></code><div class="hljs-button" data-title="複制"></div></pre></div><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">這個是 頁面的 具體檔案， 其中 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">index</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span> 繼承自 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">wepy</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.page</span></span> 這個對象
那這個頁面中的 屬性 （鈎子） <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">api</span></span> 具體有哪些？</code><div class="hljs-button" data-title="複制"></div></pre><div class="table-box"><table style="border-spacing:0px;border:1px solid #C0C0C0;color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;background-color:rgb(255,255,255);"><thead><tr class="header"><th style="border-color:#C0C0C0;border-collapse:collapse;">屬性</th><th align="center" style="border-color:#C0C0C0;border-collapse:collapse;">說明</th></tr></thead><tbody><tr class="odd"><td style="border-color:#C0C0C0;border-collapse:collapse;">config</td><td align="center" style="border-color:#C0C0C0;border-collapse:collapse;">頁面config，相當于原來的index.json，同app.wpy中的config</td></tr><tr class="even"><td style="border-color:#C0C0C0;border-collapse:collapse;">components</td><td align="center" style="border-color:#C0C0C0;border-collapse:collapse;">頁面引入的元件清單</td></tr><tr class="odd"><td style="border-color:#C0C0C0;border-collapse:collapse;">data</td><td align="center" style="border-color:#C0C0C0;border-collapse:collapse;">頁面需要渲染的資料</td></tr><tr class="even"><td style="border-color:#C0C0C0;border-collapse:collapse;">methods</td><td align="center" style="border-color:#C0C0C0;border-collapse:collapse;">wmxl的事件捕捉，如bindtap，bindchange</td></tr><tr class="odd"><td style="border-color:#C0C0C0;border-collapse:collapse;">events</td><td align="center" style="border-color:#C0C0C0;border-collapse:collapse;">元件之間通過broadcast，emit傳遞的事件</td></tr><tr class="even"><td style="border-color:#C0C0C0;border-collapse:collapse;">其它</td><td align="center" style="border-color:#C0C0C0;border-collapse:collapse;">如onLoad，onReady等小程式事件以及其它自定義方法與屬性</td></tr></tbody></table></div><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">三、元件檔案 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">components</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span></code><div class="hljs-button" data-title="複制"></div></pre><div class="sourceCode" style="color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;text-align:left;background-color:rgb(255,255,255);"><pre onclick="hljs.copyCode(event)"><code class="language-html hljs xml"><code class="sourceCode html hljs xml" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span></span></span><span class="ot"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"> </span><span class="hljs-attr" style="color:#FF0000;"><span class="hljs-tag"><span class="hljs-attr">lang</span></span></span><span class="hljs-tag">=</span></span></span><span class="st"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-tag"><span class="hljs-string">"less"</span></span></span></span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">></span></span></span><span class="css"><span class="css">
</span></span><span class="co"><span class="css"><span class="hljs-comment" style="color:#008000;"><span class="css"><span class="hljs-comment">/** less **/</span></span></span></span></span><span class="css"><span class="css">
</span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span></span></span><span class="ot"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"> </span><span class="hljs-attr" style="color:#FF0000;"><span class="hljs-tag"><span class="hljs-attr">lang</span></span></span><span class="hljs-tag">=</span></span></span><span class="st"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-tag"><span class="hljs-string">"wxml"</span></span></span></span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">></span></span></span> <span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">import</span></span></span></span></span><span class="javascript"><span class="javascript"> wepy form </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">'wepy'</span></span></span></span></span><span class="op"><span class="javascript">;</span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">export</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">default</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">class</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">Com</span></span></span></span><span class="javascript"><span class="hljs-class"> </span></span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">extends</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="va"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">wepy</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class">.</span></span></span><span class="at"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">component</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
components </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
data </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
methods </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
events </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
</span></span><span class="co"><span class="javascript"><span class="hljs-comment" style="color:#008000;"><span class="javascript"><span class="hljs-comment">// Other properties</span></span></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span></span></span><span class="ss"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span></code></code><div class="hljs-button" data-title="複制"></div></pre></div><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">元件的 頁面入口是 繼承自 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">wepy</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.component</span></span>， 其 屬性和頁面屬性是 一樣的，除了不要 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">config</span></span> 對象， 和 頁面特有的 一些小程式 事件等。</code><div class="hljs-button" data-title="複制"></div></pre> </div>
![微信小程式課設-簡單幾步實作登入功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)