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
。
所以最好的姿态是:
在项目中运转
labrador watch
在WebStorm中编码,保留
切换到 微信web开辟者东西 中调试、预览
再回到WebStorm中编码
…
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
<view class="text-view">
<text class="title-text" catchtap="handleTap" style="color:{{color}};">{{text}}</text>
</view>
款式 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
<view class="container">
<view bindtap="handleViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{ userInfo.avatarUrl }}" background-size="cover"/>
<text class="userinfo-nickname">{{ userInfo.nickName }}</text>
</view>
<view class="usermotto">
<component key="motto" name="title"/>
</view>
<component key="list"/>
</view>
款式
@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供应的 <component/>
标签,此标签的作用是导入一个自定义子组件的规划文件,标签有两个属性,离别为 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开源协定宣布,许可任何构造和个人免费运用。