騰訊工程師教你 微信小程序代碼怎么寫?
微信小程序代碼怎么寫已經(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ā)了解。
第二部分:如何開通一個(gè)小商店