微信小程序組件化開(kāi)發(fā)框架由西西為大家?guī)?lái)，微信小程序已經(jīng)正式上線了，無(wú)論是因?yàn)楣ぷ?、學(xué)習(xí)或是愛(ài)好，大家現(xiàn)在都可以開(kāi)始做點(diǎn)什么了，微信小程序以微信為平臺(tái)，勢(shì)必要快速進(jìn)入全國(guó)用戶的視野，而相關(guān)的軟件開(kāi)發(fā)也是十分有必要的。

特性

使用Labrador框架可以使微信開(kāi)發(fā)者工具支持加載海量NPM包

支持ES6/7標(biāo)準(zhǔn)代碼，使用async/await能夠有效避免回調(diào)地獄

組件重用，對(duì)微信小程序框架進(jìn)行了二次封裝，實(shí)現(xiàn)了組件重用和嵌套

自動(dòng)化測(cè)試，非常容易編寫單元測(cè)試腳本，不經(jīng)任何額外配置即可自動(dòng)化測(cè)試

使用Editor Config及ESLint標(biāo)準(zhǔn)化代碼風(fēng)格，方便團(tuán)隊(duì)協(xié)作

安裝

首先您的系統(tǒng)中安裝Node.js和npm v3?下載Node.js，然后運(yùn)行下面的命令將全局安裝Labrador命令行工具。

初始化項(xiàng)目

項(xiàng)目目錄結(jié)構(gòu)

注意?dist目錄中的所有文件是由labrador命令編譯生成，請(qǐng)勿直接修改

配置開(kāi)發(fā)工具

項(xiàng)目初始化后使用WebStorm或Sublime等你習(xí)慣的IDE打開(kāi)項(xiàng)目根目錄。然后打開(kāi)?微信web開(kāi)發(fā)者工具?新建項(xiàng)目，本地開(kāi)發(fā)目錄選擇?dist?目標(biāo)目錄。

開(kāi)發(fā)流程

在WebStorm或Sublime等IDE中編輯?src?目錄下的源碼，然后在項(xiàng)目根目錄中運(yùn)行l(wèi)abrador build?命令構(gòu)建項(xiàng)目，然后在微信web開(kāi)發(fā)者工具?的調(diào)試界面中點(diǎn)擊左側(cè)菜單的?重啟?按鈕即可查看效果。

我們?cè)陂_(kāi)發(fā)中，?微信web開(kāi)發(fā)者工具?僅僅用來(lái)做調(diào)試和預(yù)覽，不要在?微信web開(kāi)發(fā)者工具?的編輯界面修改代碼。

微信web開(kāi)發(fā)者工具?會(huì)偶爾出錯(cuò)，表現(xiàn)為點(diǎn)擊?重啟?按鈕沒(méi)有反應(yīng)，調(diào)試控制臺(tái)輸出大量的無(wú)法require文件的錯(cuò)誤，編輯界面中代碼文件不顯示。這是因?yàn)?labrador build?命令會(huì)更新整個(gè)?dist?目錄，而?微信web開(kāi)發(fā)者工具?在監(jiān)測(cè)代碼改變時(shí)會(huì)出現(xiàn)異常，遇到這種情況只需要關(guān)掉?微信web開(kāi)發(fā)者工具?再啟動(dòng)即可。

我們還可以使用?labrador watch?命令來(lái)監(jiān)控?src?目錄下的代碼，當(dāng)發(fā)生改變后自動(dòng)構(gòu)建，不用每一次編輯代碼后手動(dòng)運(yùn)行l(wèi)abrador build?。

所以最佳的姿勢(shì)是：

在項(xiàng)目中運(yùn)行?labrador watch

在WebStorm中編碼，保存

切換到?微信web開(kāi)發(fā)者工具?中調(diào)試、預(yù)覽

再回到WebStorm中編碼

1、字體規(guī)范

微信內(nèi)字體的使用與所運(yùn)行的系統(tǒng)字體保持一致，常用字號(hào)為20, 18, 17, 16,14 13, 11(pt)，使用場(chǎng)景具體如下：

5種字體顏色，每一種顏色都有嚴(yán)格的使用場(chǎng)合。

主內(nèi)容 Black 黑色，次要內(nèi)容 Grey 灰色；時(shí)間戳與表單缺省值 Light 灰色；大段的說(shuō)明內(nèi)容而且屬于主要內(nèi)容用 Semi 黑；

藍(lán)色為鏈接用色，綠色為完成字樣色，紅色為出錯(cuò)用色 Press與 Disable狀態(tài)分別降低透明度為20%與10%；

2、列表視覺(jué)規(guī)范

3、表單輸入視覺(jué)規(guī)范

4、按鈕使用原則

列表外按鈕上文字標(biāo)準(zhǔn)

按鈕高度為44px下使用: 顏色 ＃000000 / ＃353535 字號(hào) 18pt

可點(diǎn)狀態(tài)下文字調(diào)整透明度為60%

不可點(diǎn)狀態(tài)下文字調(diào)整透明度為30%

列表外按鈕上文字標(biāo)準(zhǔn)

按鈕高度為25px下使用: 顏色 ＃000000 / ＃353535 字號(hào) 14pt

頁(yè)面線性按鈕上文字標(biāo)準(zhǔn)

按鈕高度為35px下使用: 顏色 ＃09BB07 / ＃353535 字號(hào) 16pt

5、圖標(biāo)使用原則