运用Labrador0.3构建ES6/ES7规范模块化微信小顺序

Labrador 是一个专为微信小顺序开辟的模块化的前端开辟框架

在微信小顺序开辟三宗罪和处置惩罚方案一文中我向人人论述了微信小顺序开辟的三个弊病，并供应了Labrador框架来处置惩罚这些弊病。

在上一个版本的Labrador中，组件重用部份功用不完善，本日Labrador宣布了0.3版本，相对上一个版本，供应了更壮大的组件化功用，并更改了一些模块接口。

下面是Labrador 0.3.x版本的入门手册，假如你已基于老版本Labrador构建了项目，请参照下面的申明对应晋级项目，并晋级一下全局的 labrador-cli 库到0.3版本。

QQ交换群 282140496

特征

• 运用Labrador框架能够使微信开辟者东西支撑加载海量NPM包

• 支撑ES6/ES7规范代码,运用async/await能够有用防止回调地狱

• 组件重用,对微信小顺序框架进行了二次封装,完成了组件重用和嵌套

• 运用Editor Config及ESLint规范化代码作风，轻易团队合作

装置

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/ # 目标目次
├── node_modules/
└── src/ # 源码目次
├── app.js
├── app.json
├── app.less
├── components/ # 通用组件目次
├── pages/ # 页面目次
└── utils/


注重 dist目次中的一切文件是由labrador敕令天生，请勿直接修正

设置开辟东西

项目初始化后运用WebStorm或Sublime等你习气的IDE翻开项目根目次。然后翻开 微信web开辟者东西 新建项目，当地开辟目次挑选 dist 目标目次。

开辟流程

在WebStorm或Sublime等IDE中编辑 src 目次下的源码，然后在项目根目次中运转labrador build 敕令构建项目，然后在 微信web开辟者东西 的调试界面中点击左边菜单的 重启 按钮即可检察结果。

我们在开辟中， 微信web开辟者东西 仅仅用来做调试和预览，不要在 微信web开辟者东西 的编辑界面修正代码。

微信web开辟者东西 会偶然失足，表现为点击 重启 按钮没有反应，调试控制台输出大批的没法require文件的毛病，编辑 界面中代码文件不显现。这是因为 labrador build 敕令会更新悉数 dist 目次，而 微信web开辟者东西 在监测代码转变时会出现异常，碰到这类状况只须要关掉 微信web开辟者东西 再启动即可。

我们还能够运用 labrador watch 敕令来监控 src 目次下的代码，当发作转变后自动构建，没必要每一次编辑代码后手动运转 labrador build 。

所以最好的姿态是：

1. 在项目中运转 labrador watch

2. 在WebStorm中编码，保留

3. 切换到 微信web开辟者东西 中调试、预览

4. 再回到WebStorm中编码

5. &＃8230;

labrador 库

labrador 库对全局的 wx 变量进行了封装，将大部份 wx 对象中的要领进行了Promise支撑， 除了以 on* 开首或以 *Sync 末端的要领。在以下代码中运用 labrador 库。

import wx from 'labrador';

我们发起不要再运用 wx.getStorageSync() 等同步壅塞要领，而在 async 函数中运用 await wx.getStorage() 异步非壅塞要领进步机能，除非特殊状况。

app.js

src/app.js 示例代码以下：

import wx from 'labrador';
import { sleep } from './utils/util';
export default class {
globalData = {
userInfo: null
};
async onLaunch() {
//挪用API从当地缓存中猎取数据
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规范语法。代码没必要声明 use strict ，因为在编译时，一切代码都邑强迫运用严厉形式。

代码中并未挪用全局的 App() 要领，而是运用 export 语法默许导出了一个类，在编译后，Labrador会自动增添 App() 要领挪用，一切请勿手动挪用 App() 要领。

自定义组件

Labrador的自定义组件，是基于微信小顺序框架的组件之上，进一步自定义组合，具有逻辑处置惩罚和款式。如许做的目标请拜见 微信小顺序开辟三宗罪和处置惩罚方案

项目中通用自定义组件寄存在 src/compontents 目次，一个组件平常由三个文件构成，*.js 、 *.xml 和 *.less 离别对应微信小顺序框架的 js 、 wxml 和 wxss 文件。在Labardor项目源码中，我们特地采用了 xml 和 less 后缀以示区分。

自定义组件示例

下面是一个简朴的自定义组件代码实例：

逻辑 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很类似。最大的区分是在js逻辑代码中，没有挪用全局的Page()函数声明页面，而是用 export 语法导出了一个默许的类，这个类须要继续与 labrador.Component 组件基类。

注重 组件中事宜相应要领必需以 handle 开首！比方上文中的 handleTap

页面

我们请求一切的页面必需寄存在 pages 目次中，每一个页面的子目次中的文件花样和自定义组件一致，只是能够多出一个 *.json 设置文件。

页面示例

下面是默许首页的示例代码：

逻辑 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' })
};
//事宜处置惩罚函数
handleViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
}
async onLoad() {
//挪用运用实例的要领猎取全局数据
let userInfo = await wx.app.getUserInfo();
//更新数据
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 语句导出了一个默许类，也不能手动挪用 Page() 要领，因为在编译后，pages 目次下的一切js文件悉数会自动挪用 Page() 要领声明页面。

我们看到组件类中，有一个对象属性 children ，这个属性定义了该组件依靠、包括的其他自定义组件，在上面的代码中页面包括了两个自定义组件 list 和 title ，这个两个自定义组件的 key 离别为 list 和 motto 。

xml规划代码中，运用了Labrador供应的 标签，此标签的作用是导入一个自定义子组件的规划文件，标签有两个属性，离别为 key (必选)和 name (可选，默许为key的值)。key 与js逻辑代码中的组件 key 对应，name 用来在src/componets 和 node_modules 目次中寻觅子组件模板。运转时，key对应的子组件逻辑代码类中的 data 将衬着至子组件模板中。

less款式文件中，我们运用了两条 @import 语句加载子组件款式，这里的 @import 'list' 语句根据LESS的语法，会起首寻觅当前目次 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、函数等功用轻易开辟。

别的Labrador支撑多层组件嵌套，在上述的实例中，index 包括子组件 list 和 title，list 包括子组件 title，所以在终究显现时，index 页面上回显现两个 title 组件。

细致代码请参阅 labrador init 敕令天生的示例项目。

总结

页面也是组件，一切的组件都具有一样的性命周期函数onLoad, onReady, onShow, onHide, onUnload 以及setData函数。

componets 和 pages 两个目次的区分在于，componets 中寄存的组件能够被智能加载，pages 目次中的组件在编译时自动加上 Page() 挪用，所以，pages 目次中的组件不能被其他组件挪用，假如某个组件须要重用，请寄存在 componets 目次或打包成NPM包。

贡献者

郑州脉冲软件科技有限公司

梁兴臣

开源协定

本项目根据MIT开源协定宣布，许可任何构造和个人免费运用。