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

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

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

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

下面是Labrador 0.3.x版本的入門(mén)手冊(cè)，如果你已經(jīng)基于老版本Labrador構(gòu)建了項(xiàng)目，請(qǐng)參照下面的說(shuō)明對(duì)應(yīng)升級(jí)項(xiàng)目，并升級(jí)一下全局的 labrador-cli 庫(kù)到0.3版本。

QQ交流群 282140496

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

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

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

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

npm install -g labrador-cli

mkdir demo
cd demo
npm init
labrador init

demo                 # 項(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)勿直接修改

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

在WebStorm或Sublime等IDE中編輯 src 目錄下的源碼，然后在項(xiàng)目根目錄中運(yùn)行labrador 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)行 labrador build 。

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

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

在WebStorm中編碼，保存

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

再回到WebStorm中編碼

...

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

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)語(yǔ)法。代碼不必聲明 use strict ，因?yàn)樵诰幾g時(shí)，所有代碼都會(huì)強(qiáng)制使用嚴(yán)格模式。

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

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

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

下面是一個(gè)簡(jiǎn)單的自定義組件代碼實(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邏輯代碼中，沒(méi)有調(diào)用全局的Page()函數(shù)聲明頁(yè)面，而是用 export 語(yǔ)法導(dǎo)出了一個(gè)默認(rèn)的類(lèi)，這個(gè)類(lèi)需要繼承與 labrador.Component 組件基類(lèi)。

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

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

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

邏輯 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;
}

/* ... */

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

js邏輯代碼中同樣使用 export 語(yǔ)句導(dǎo)出了一個(gè)默認(rèn)類(lèi)，也不能手動(dòng)調(diào)用 Page() 方法，因?yàn)樵诰幾g后，pages 目錄下的所有js文件全部會(huì)自動(dòng)調(diào)用 Page() 方法聲明頁(yè)面。

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

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

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

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

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

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

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

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

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

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

梁興臣

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