微信小程序代碼怎么寫已經(jīng)是當下最熱門的話題，下面將從多方面來談談微信小程序代碼怎么寫相關的內容。

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

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

因此，閱讀本文需要對小程序開發(fā)稍有了解(微信公眾平臺-簡易教程指路)

電商小程序，選擇移動云商城小程序：傳播快，易分享，能夠幫你輕松將微信十億用戶池中的社交流量變現(xiàn)，加上移動云商城小程序發(fā)布速度快，消費者使用無需下載，即用即走，是傳統(tǒng)零售轉型電商的不二選擇!

移動云商城，是HiShop旗下一款全渠道零售商城系統(tǒng)，擁有小程序、PC、微信、H5、APP-iOS、APP-安卓、支付寶生活號多個端口，七大商城統(tǒng)一后臺管理，商品、訂單、會員、營銷、數(shù)據(jù)同步。

目標

我們現(xiàn)在有兩個目標：

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

一鍵新建頁面目錄以及在目錄中的三個文件 ：.wxml、 .wxss 和 .js也可以直接在 app.json 的 pages 字段創(chuàng)建頁面，保存后生成這三個文件。筆者沒有采用這個方法的緣由一個是開始時不知道有此功能，另一個是不合平時的操作習慣，再者想到 js 文件初始化后，需要引入常用庫，要插入代碼片段，所以保留了這個功能。

這兩個需求其實很簡單，不需要 GUI，所以我們可以做一個 npm 命令行工具。想象一下這個命令行用起來應該是什么樣的呢：

用流程圖示意就是：

實現(xiàn)

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

我們把問題分解為三步：

實現(xiàn)命令行工具，可以在任意目錄直接運行

通過輸入不同的命令行參數(shù)，以執(zhí)行不同的功能

考慮項目模板的存放位置，是集成到工具中，還是和工具分開呢

不用擔心，都很容易解決，我們一個個看。

命令行工具

package.json 中有一個字段是 bin：

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

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

命令行參數(shù)

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

項目模板的存放位置

考慮項目模板的存放位置，是集成到工具中，還是和工具分開呢?

筆者選擇分開管理。

在一個單獨的模板代碼倉庫中管理模板內容，方便我們維護。目前的模板還比較簡單(詳見下文“模板詳解”)，只有標準目錄結構，預期后面會加上自動化的部分(比如 less -> wxss)，所以未來會改動比較頻繁。

download-git-repo 可以把給定地址的倉庫內容拷貝到執(zhí)行目錄中。API 簡單，所以就是它了。

問題都解決了，現(xiàn)在就讓我們看看偽代碼(注意：偽碼中沒有考慮出錯情況)：

使用

在編寫好了這個工具之后，只需要在本地全局使用的話：

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

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

使用起來是這樣的：

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

發(fā)布 npm 插件

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

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

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

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

模板詳解

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

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

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

一共有兩種播放器：minibar 和 全屏的播放器，播放器的播放按鈕有“播放”和“暫停”兩種狀態(tài)(圖片)切換，這個可以通過 class 來控制。

當播放器進入全屏模式后，節(jié)目列表將被隱藏;點擊箭頭以后，節(jié)目列表將重新顯示出來。

上文的文件結構中的 view.js 就是 UI 邏輯的代碼。pages/ 目錄中的 js 文件將通過 import 引用 view.js，view.js 中的接口分為“通用”和“頁面使用”這兩個類型：

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

舉個超級簡單的例子(如下)，模擬工作流程：

1.在 wxss 中定義好控制不同樣式的 class

2.將需要變化的 class 寫到 view.js 中，并暴露接口

3.在 wxml 中的對應結構中綁定 event handler

4.在對應的 page.js 里實現(xiàn) event handler 的具體內容，也就是切換 class 的觸發(fā)條件

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

總結

初始化一個項目是開始編碼的第一步，值得多花一些時間找到合適團隊合適自己的項目模板。想了解更多微信小程序開發(fā)和微信小程序大全都可以進入微信小程序商城系統(tǒng)開發(fā)了解。