摘要：是一個專為微信小程序開發(fā)的模塊化的前端開發(fā)框架在微信小程序開發(fā)三宗罪和解決方案一文中我向大家闡述了微信小程序開發(fā)的三個弊端，并提供了框架來解決這些弊端。注意雖然我們采用了文件，但是由于微信小程序框架的限制，不能使用的層級選擇及嵌套語法。

Labrador 是一個專為微信小程序開發(fā)的模塊化的前端開發(fā)框架

在微信小程序開發(fā)三宗罪和解決方案一文中我向大家闡述了微信小程序開發(fā)的三個弊端，并提供了Labrador框架來解決這些弊端。

在上一個版本的Labrador中，組件重用部分功能不完善，今天Labrador發(fā)布了0.3版本，相對上一個版本，提供了更強(qiáng)大的組件化功能，并更改了一些模塊接口。

下面是Labrador 0.3.x版本的入門手冊，如果你已經(jīng)基于老版本Labrador構(gòu)建了項目，請參照下面的說明對應(yīng)升級項目，并升級一下全局的 labrador-cli 庫到0.3版本。

QQ交流群 282140496

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

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

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

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

npm install -g labrador-cli

mkdir demo
cd demo
npm init
labrador init

demo                 # 項目根目錄
├── .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命令生成，請勿直接修改

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

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

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

微信web開發(fā)者工具 會偶爾出錯，表現(xiàn)為點(diǎ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)建，不用每一次編輯代碼后手動運(yùn)行 labrador build 。

所以最佳的姿勢是：

在項目中運(yùn)行 labrador watch

在WebStorm中編碼，保存

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

再回到WebStorm中編碼

...

labrador 庫對全局的 wx 變量進(jìn)行了封裝，將大部分 wx 對象中的方法進(jìn)行了Promise支持， 除了以 on* 開頭或以 *Sync 結(jié)尾的方法。在如下代碼中使用 labrador 庫。

import wx from "labrador";

我們建議不要再使用 wx.getStorageSync() 等同步阻塞方法，而在 async 函數(shù)中使用 await wx.getStorage() 異步非阻塞方法提高性能，除非特殊情況。

src/app.js 示例代碼如下：

import wx from "labrador";
import { sleep } from "./utils/util";

export default class {
  globalData = {
    userInfo: null
  };

  async onLaunch() {
    //調(diào)用API從本地緩存中獲取數(shù)據(jù)
    let logs = await wx.getStorage({ key: "logs" }) || [];
    logs.unshift(Date.now());
    await wx.setStorage({ key: "logs", data: logs });
    this.timer();
  }

  async timer() {
    while (true) {
      console.log("hello");
      await sleep(10000);
    }
  }

  async getUserInfo() {
    if (this.globalData.userInfo) {
      return this.globalData.userInfo;
    }
    await wx.login();
    let res = await wx.getUserInfo();
    this.globalData.userInfo = res.userInfo;
    return res.userInfo;
  }
}

代碼中全部使用ES6/ES7標(biāo)準(zhǔn)語法。代碼不必聲明 use strict ，因為在編譯時，所有代碼都會強(qiáng)制使用嚴(yán)格模式。

代碼中并未調(diào)用全局的 App() 方法，而是使用 export 語法默認(rèn)導(dǎo)出了一個類，在編譯后，Labrador會自動增加 App() 方法調(diào)用，所有請勿手動調(diào)用 App() 方法。

Labrador的自定義組件，是基于微信小程序框架的組件之上，進(jìn)一步自定義組合，擁有邏輯處理和樣式。這樣做的目的請參見 微信小程序開發(fā)三宗罪和解決方案

項目中通用自定義組件存放在 src/compontents 目錄，一個組件一般由三個文件組成，*.js 、 *.xml 和 *.less 分別對應(yīng)微信小程序框架的 js 、 wxml 和 wxss 文件。在Labardor項目源碼中，我們特意采用了 xml 和 less 后綴以示區(qū)別。

下面是一個簡單的自定義組件代碼實(shí)例：

邏輯 src/compontents/title/title.js

import wx from "labrador";
import randomColor  from "../../utils/random-color";

export default class Title extends wx.Component {
  data = {
    text: "",
    color: randomColor()
  };

  handleTap() {
    this.setData({
      color: randomColor()
    });
  }
}

布局 src/compontents/title/title.js

  {{text}}

樣式 src/compontents/title/title.less

.title-text {
  font-weight: bold;
  font-size: 2em;
}

代碼和微信小程序框架中的page很相似。最大的區(qū)別是在js邏輯代碼中，沒有調(diào)用全局的Page()函數(shù)聲明頁面，而是用 export 語法導(dǎo)出了一個默認(rèn)的類，這個類需要繼承與 labrador.Component 組件基類。

注意 組件中事件響應(yīng)方法必須以 handle 開頭！例如上文中的 handleTap

我們要求所有的頁面必須存放在 pages 目錄中，每個頁面的子目錄中的文件格式和自定義組件一致，只是可以多出一個 *.json 配置文件。

下面是默認(rèn)首頁的示例代碼：

邏輯 src/pages/index/index.js

import wx from "labrador";
import List from "../../components/list/list";
import Title from "../../components/title/title";

export default class Index extends wx.Component {
  data = {
    userInfo: {}
  };
  children = {
    list: new List(),
    motto: new Title({ text: "Hello world" })
  };

  //事件處理函數(shù)
  handleViewTap() {
    wx.navigateTo({
      url: "../logs/logs"
    })
  }

  async onLoad() {
    //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
    let userInfo = await wx.app.getUserInfo();
    //更新數(shù)據(jù)
    this.setData({
      userInfo: userInfo
    });
    this.update();
  }
}

布局 src/pages/index/index.xml

  
    
    {{ userInfo.nickName }}
  
  
    
  
  

樣式

@import "list";
@import "title";

.motto-title-text {
  font-size: 3em;
  padding-bottom: 1rem;
}

/* ... */

頁面代碼的格式和自定義組件的格式一模一樣，我們的思想是 頁面也是組件，頁面和自定義組件的唯一差別是頁面的代碼存放在 pages 目錄中。

js邏輯代碼中同樣使用 export 語句導(dǎo)出了一個默認(rèn)類，也不能手動調(diào)用 Page() 方法，因為在編譯后，pages 目錄下的所有js文件全部會自動調(diào)用 Page() 方法聲明頁面。

我們看到組件類中，有一個對象屬性 children ，這個屬性定義了該組件依賴、包含的其他自定義組件，在上面的代碼中頁面包含了兩個自定義組件 list 和 title ，這個兩個自定義組件的 key 分別為 list 和 motto 。

xml布局代碼中，使用了Labrador提供的 標(biāo)簽，此標(biāo)簽的作用是導(dǎo)入一個自定義子組件的布局文件，標(biāo)簽有兩個屬性，分別為 key (必選)和 name (可選，默認(rèn)為key的值)。key 與js邏輯代碼中的組件 key 對應(yīng)，name 用來在src/componets 和 node_modules 目錄中尋找子組件模板。運(yùn)行時，key對應(yīng)的子組件邏輯代碼類中的 data 將渲染至子組件模板中。

less樣式文件中，我們使用了兩條 @import 語句加載子組件樣式，這里的 @import "list" 語句按照LESS的語法，會首先尋找當(dāng)前目錄 src/pages/index/ 中的 list.less 文件，如果找不到就會嘗試尋找 src/componets 和 node_modules 目錄中的組件樣式。

接下來，我們定義了 .motto-title-text 樣式，這樣做是因為 motto key 代表的title組件的模板中有一個view 屬于 title-text 類，編譯時，Labrador將自動為其增加一個前綴 motto- ，所以編譯后這個view所屬的類為 title-text motto-title-text 那么我們就可以在父組件的樣式代碼中使用 .motto-title-text 重新定義子組件的樣式。

注意 雖然我們采用了LESS文件，但是由于微信小程序框架的限制，不能使用LESS的層級選擇及嵌套語法。但是我們可以使用LESS的變量、mixin、函數(shù)等功能方便開發(fā)。

另外Labrador支持多層組件嵌套，在上述的實(shí)例中，index 包含子組件 list 和 title，list 包含子組件 title，所以在最終顯示時，index 頁面上回顯示兩個 title 組件。

詳細(xì)代碼請參閱 labrador init 命令生成的示例項目。

頁面也是組件，所有的組件都擁有一樣的生命周期函數(shù)onLoad, onReady, onShow, onHide, onUnload 以及setData函數(shù)。

componets 和 pages 兩個目錄的區(qū)別在于，componets 中存放的組件能夠被智能加載，pages 目錄中的組件在編譯時自動加上 Page() 調(diào)用，所以，pages 目錄中的組件不能被其他組件調(diào)用，如果某個組件需要重用，請存放在 componets 目錄或打包成NPM包。

鄭州脈沖軟件科技有限公司

梁興臣

本項目依據(jù)MIT開源協(xié)議發(fā)布，允許任何組織和個人免費(fèi)使用。