騰訊工程師教你 微信小程序代碼怎么寫？

微信小程序代碼怎么寫已經(jīng)是當(dāng)下最熱門的話題，下面將從多方面來談?wù)勎⑿判〕绦虼a怎么寫相關(guān)的內(nèi)容。

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

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

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

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

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

目標(biāo)

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

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

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

這兩個(gè)需求其實(shí)很簡(jiǎn)單，不需要 GUI，所以我們可以做一個(gè) npm 命令行工具。想象一下這個(gè)命令行用起來應(yīng)該是什么樣的呢：

用流程圖示意就是：

實(shí)現(xiàn)

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

我們把問題分解為三步：

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

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

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

不用擔(dān)心，都很容易解決，我們一個(gè)個(gè)看。

命令行工具

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

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

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

命令行參數(shù)

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

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

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

筆者選擇分開管理。

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

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

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

使用

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

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

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

使用起來是這樣的：

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

發(fā)布 npm 插件

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

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

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

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

模板詳解

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

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

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

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

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

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

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

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

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

2.將需要變化的 class 寫到 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)重，在頁面開發(fā)的階段就可以完成 UI 上的變化。從這個(gè)角度上看，小程序反而能給 UI 工程師更多控制 UI 邏輯的能力，確定好代碼規(guī)范和接口。

總結(jié)

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