何六六：微信小程序是一個(gè)工程，就和蓋房子一樣，打好了地基，才能保證后續(xù)工程師建立在可靠牢固的基礎(chǔ)上。筆者需要經(jīng)常新建項(xiàng)目，每次都要重復(fù)“修改項(xiàng)目結(jié)構(gòu) -> 從老項(xiàng)目中復(fù)制粘貼文件 -> 刪除一些老項(xiàng)目中代碼”這樣的過(guò)程，實(shí)在費(fèi)心費(fèi)力。如何高效編寫(xiě)微信小程序呢？來(lái)看騰訊工程師總結(jié)的這個(gè)方法！

另一個(gè)痛點(diǎn)是：每次新建小程序頁(yè)面要生成三個(gè)文件名相同的文件 ( .wxml、.wxss 和 .js )，命令行太長(zhǎng)（據(jù)微信同事：也可以在 app.json 的 pages 字段下添加新頁(yè)面的路徑，保存后也會(huì)生成對(duì)應(yīng)的文件）。

因此，閱讀本文需要對(duì)小程序開(kāi)發(fā)稍有了解（簡(jiǎn)易教程指路）

目標(biāo)

我們現(xiàn)在有兩個(gè)目標(biāo)：

根據(jù)通用模板新建項(xiàng)目

一鍵新建頁(yè)面目錄以及在目錄中的三個(gè)文件 ：.wxml、 .wxss 和 .js也可以直接在 app.json 的 pages 字段創(chuàng)建頁(yè)面，保存后生成這三個(gè)文件。筆者沒(méi)有采用這個(gè)方法的緣由一個(gè)是開(kāi)始時(shí)不知道有此功能，另一個(gè)是不合平時(shí)的操作習(xí)慣，再者想到 js 文件初始化后，需要引入常用庫(kù)，要插入代碼片段，所以保留了這個(gè)功能。
這兩個(gè)需求其實(shí)很簡(jiǎn)單，不需要 GUI，所以我們可以做一個(gè) npm 命令行工具。想象一下這個(gè)命令行用起來(lái)應(yīng)該是什么樣的呢：

用流程圖示意就是：

實(shí)現(xiàn)

正式開(kāi)始之前，請(qǐng)先確認(rèn)本地的開(kāi)發(fā)環(huán)境，筆者的本地環(huán)境是：

我們把問(wèn)題分解為三步：

實(shí)現(xiàn)命令行工具，可以在任意目錄直接運(yùn)行
通過(guò)輸入不同的命令行參數(shù)，以執(zhí)行不同的功能
考慮項(xiàng)目模板的存放位置，是集成到工具中，還是和工具分開(kāi)呢
不用擔(dān)心，都很容易解決，我們一個(gè)個(gè)看。

命令行工具

package.json 中有一個(gè)字段是 bin：

這個(gè)字段可以將開(kāi)發(fā)者希望執(zhí)行的腳本注冊(cè)到環(huán)境變量 (PATH) 中，不同的 key 對(duì)應(yīng)執(zhí)行不同的腳本。也就是說(shuō)現(xiàn)在，當(dāng)我們直接在命令行中執(zhí)行：

等價(jià)于在 terminal 中執(zhí)行：

第一個(gè)問(wèn)題輕松解決，關(guān)于 bin 字段更多信息請(qǐng)參考 npm 文檔中 package.json 一節(jié)。

命令行參數(shù)

執(zhí)行 index.js 時(shí)，可以通過(guò) process.argv 獲取執(zhí)行時(shí)的參數(shù)，但是要從參數(shù)數(shù)組中拆分出參數(shù)無(wú)疑很麻煩。不過(guò)，npm 發(fā)展至今，處理命令行參數(shù)的庫(kù)肯定存在，就是 commander。簡(jiǎn)單好用易上手，那么第二個(gè)問(wèn)題也解決啦。

項(xiàng)目模板的存放位置

考慮項(xiàng)目模板的存放位置，是集成到工具中，還是和工具分開(kāi)呢？

筆者選擇分開(kāi)管理。

在一個(gè)單獨(dú)的模板代碼倉(cāng)庫(kù)中管理模板內(nèi)容，方便我們維護(hù)。目前的模板還比較簡(jiǎn)單（詳見(jiàn)下文“模板詳解”），只有標(biāo)準(zhǔn)目錄結(jié)構(gòu)，預(yù)期后面會(huì)加上自動(dòng)化的部分（比如 less -> wxss），所以未來(lái)會(huì)改動(dòng)比較頻繁。

download-git-repo 可以把給定地址的倉(cāng)庫(kù)內(nèi)容拷貝到執(zhí)行目錄中。API 簡(jiǎn)單，所以就是它了。

問(wèn)題都解決了，現(xiàn)在就讓我們看看偽代碼（注意：偽碼中沒(méi)有考慮出錯(cuò)情況）：

使用

在編寫(xiě)好了這個(gè)工具之后，只需要在本地全局使用的話(huà)：

在本地開(kāi)發(fā)過(guò)程中，如果更新了開(kāi)發(fā)版本的代碼，需要更新同步到全局，這時(shí)候需要執(zhí)行：

就會(huì)看到安裝到環(huán)境變量中的工具目錄地址已經(jīng)和開(kāi)發(fā)目錄關(guān)聯(lián)起來(lái)了：

使用起來(lái)是這樣的：

△ ?模板和插件地址將附在參考資料一節(jié)中

發(fā)布 npm 插件

如果和筆者一樣，希望在多個(gè)機(jī)器上使用這個(gè)工具，可以選擇發(fā)布到 npm 官網(wǎng)上。發(fā)布步驟非常簡(jiǎn)單，基本上就是：

不過(guò)筆者考慮到，項(xiàng)目模板畢竟是因人而異的東西，所以選擇了發(fā)布 scope package，也就是在插件的 package.json 中的 name 字段使用 @scopeName/wxapp-generator 這樣的值。

如果你也有類(lèi)似的想法，并且也是個(gè) npm 免費(fèi)用戶(hù)，那么發(fā)布的時(shí)候要執(zhí)行：

scope 對(duì)使用沒(méi)有任何影響，但是安裝的時(shí)候要記得帶上 scope name 執(zhí)行：

模板詳解

一千個(gè)人中有一千種項(xiàng)目模板。根據(jù)業(yè)務(wù)/個(gè)人愛(ài)好不同，大家的項(xiàng)目模板可能也相去甚遠(yuǎn)。筆者自覺(jué)目前的模板用起來(lái)還不錯(cuò)，將在這一節(jié)介紹一下。以下是項(xiàng)目的文件結(jié)構(gòu)：

之所以采用這樣的結(jié)構(gòu)，是希望盡可能解耦 UI 邏輯與業(yè)務(wù)邏輯。但是由于完全解耦是不可能的，基本思路是單純的“變量分離”。通常 UI 的改變是通過(guò) class 的切換或者內(nèi)聯(lián)樣式的調(diào)整，所以筆者的思路，是將“要切換的 class”或者“要調(diào)整的內(nèi)聯(lián)樣式”作為變量，由于大部分情況下業(yè)務(wù)邏輯和 UI 變化是聯(lián)動(dòng)的，通過(guò)抽離出來(lái)的變量，實(shí)現(xiàn)在業(yè)務(wù)邏輯中簡(jiǎn)單直白地改變 UI。

可能看到這里，讀者會(huì)有些困惑，那讓我們直接以「企鵝聽(tīng)書(shū)」為例，具象地看看筆者是怎么做的吧。聽(tīng)書(shū)的界面會(huì)出現(xiàn)變化的時(shí)以下兩種場(chǎng)景：

1. 一共有兩種播放器：minibar 和 全屏的播放器，播放器的播放按鈕有“播放”和“暫停”兩種狀態(tài)（圖片）切換，這個(gè)可以通過(guò) class 來(lái)控制。
2. 當(dāng)播放器進(jìn)入全屏模式后，節(jié)目列表將被隱藏；點(diǎn)擊箭頭以后，節(jié)目列表將重新顯示出來(lái)。

上文的文件結(jié)構(gòu)中的 view.js 就是 UI 邏輯的代碼。pages/ 目錄中的 js 文件將通過(guò) import 引用 view.js，view.js 中的接口分為“通用”和“頁(yè)面使用”這兩個(gè)類(lèi)型：

如果未來(lái)出現(xiàn)更多 UI 變化的場(chǎng)景，可以再通過(guò)變量添加上去，比如 pageView.id。

舉個(gè)超級(jí)簡(jiǎn)單的例子（如下），模擬工作流程：

1. 在 wxss 中定義好控制不同樣式的 class
2. 將需要變化的 class 寫(xiě)到 view.js 中，并暴露接口
3. 在 wxml 中的對(duì)應(yīng)結(jié)構(gòu)中綁定 event handler
4. 在對(duì)應(yīng)的 page.js 里實(shí)現(xiàn) event handler 的具體內(nèi)容，也就是切換 class 的觸發(fā)條件

老司機(jī)一看就知道是 MVVC 模式，這樣分離也就是為了 UI 有獨(dú)立的控制器，不至于和業(yè)務(wù)邏輯耦合嚴(yán)重，在頁(yè)面開(kāi)發(fā)的階段就可以完成 UI 上的變化。從這個(gè)角度上看，小程序反而能給 UI 工程師更多控制 UI 邏輯的能力，確定好代碼規(guī)范和接口。

總結(jié)

初始化一個(gè)項(xiàng)目是開(kāi)始編碼的第一步，值得多花一些時(shí)間找到合適團(tuán)隊(duì)合適自己的項(xiàng)目模板。

結(jié)束之前，先允許筆者打一個(gè)廣告，企鵝 FM 有兩個(gè)小程序：致敬傳統(tǒng)電臺(tái)，聽(tīng)廣播節(jié)目的「小電臺(tái)」；聽(tīng)有聲小說(shuō)專(zhuān)用的「企鵝聽(tīng)書(shū)」。以及輕量版的「微云」。大家可以?huà)叽a體驗(yàn)。性能的優(yōu)化和功能的完善也在一步步迭代中，希望大家多多使用多多反饋意見(jiàn)~ 比心

「幫你跟上微信小程序的好文合集」

1. 設(shè)計(jì)規(guī)范丨《微信小程序的官方設(shè)計(jì)指南和建議》
2. 開(kāi)發(fā)流程丨《做了4個(gè)微信小程序后，我總結(jié)了一個(gè)快速開(kāi)發(fā)流程》
3. 開(kāi)發(fā)體驗(yàn)丨《超全面的微信小程序初體驗(yàn)（上）》

參考資料

npm 參考

1. 筆者寫(xiě)的小程序項(xiàng)目模板以及小程序生成器
2. 其他開(kāi)發(fā)者寫(xiě)的工具：MeCKodo/wxapp-cli
3. ES2015 & babel 實(shí)戰(zhàn)：開(kāi)發(fā) NPM 模塊
4. Creating Your First Node.js Command-line Application
5. Writing Command-Line Applications in NodeJS
6. Building command line tools with Node.js
7. npm-developers Developer Guide
8. 如何使用NPM來(lái)管理你的Node.js依賴(lài)

小程序參考

1. 推薦 · 還不錯(cuò)用的小程序 ST snippet
2. 更新及時(shí)的小程序開(kāi)發(fā)匯總
3. 小程序框架 wepy
4. 另一個(gè)小程序框架 labrador

原文地址：騰訊ISUX

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com