微信小程序組件庫

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

微信小程序組件化開發(fā)框架：

特性

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

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

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

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

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

安裝

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

npm install -g labrador-cli

初始化項目

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

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

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

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

配置開發(fā)工具

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

開發(fā)流程

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

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

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

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

所以最佳的姿勢是：

在項目中運行 labrador watch

在WebStorm中編碼，保存

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

再回到WebStorm中編碼

使用須知：

1、字體規(guī)范

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

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

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

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

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

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

4、按鈕使用原則

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

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

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

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

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

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

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

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

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

微信小程序：