微信小程序組件庫(kù)

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

微信小程序組件化開(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è)試，非常容易編寫(xiě)單元測(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命令行工具。

npm install -g labrador-cli

初始化項(xiàng)目

mkdir demo           # 新建目錄
cd demo              # 跳轉(zhuǎn)目錄
npm init             # 初始化npm包
labrador init        # 初始化labrador項(xiàng)目

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

demo                 # 項(xiàng)目根目錄├── .labrador        # Labrador項(xiàng)目配置文件├── .babelrc         # babel配置文件├── .editorconfig    # Editor Config├── .eslintignore    # ESLint 忽略配置├── .eslintrc        # ESLint 語(yǔ)法檢查配置├── package.json
├── dist/            # 目標(biāo)目錄├── node_modules/
└── src/             # 源碼目錄
    ├── app.js
    ├── app.json
    ├── app.less
    ├── components/  # 通用組件目錄
    ├── pages/       # 頁(yè)面目錄
    └── utils/

注意 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)?nbsp;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è)面線(xiàn)性按鈕上文字標(biāo)準(zhǔn)

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

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

微信小程序：