Labrador
是一个专为微信小程序开发的模块化的前端开发框架在微信小程序开发三宗罪和解决方案一文中我向大家阐述了微信小程序开发的三个弊端,并提供了Labrador框架来解决这些弊端。在上一个版本的Labrador中,组件重用部分功能不完善,今天Labrador发布了0.3版本,相对上一个版本,提供了更强大的组件化功能,并更改了一些模块接口。下面是Labrador
0.3.x版本的入门手册,如果你已经基于老版本Labrador构建了项目,请参照下面的说明对应升级项目,并升级一下全局的
labrador-cli
库到0.3版本。特性使用Labrador框架可以使微信开发者工具支持加载海量NPM包

第五章:微信小程序名片夹详情页开发今天加了新干货!除了开发日志本身,还回答了一些朋友的问题。闲话不多说,先看下「名片盒」详情页的效果图:

第三章:微信小程序项目结构以及配置

支持ES6/ES7标准代码,使用async/await能够有效避免回调地狱

图片 1图片 2备注下大致需求:顶部背后是轮播图,二维码按钮弹出模态框信息、点击微信栏、点击存入手机,地址栏需要地图展示,名片分享也是模态框指引。首先是轮播图,autoplay
自动播放,interval 轮播的时间,duration
切换速度,可以根据自己需求去添加。Delete:是删除按钮,加载进来是隐藏的,需用户点轮播图进去后,轮播图全屏显示才出来。noClickImg
与 ClickImg:切换全屏与非全屏轮播图,绑定了点击事件 changeClick
来切换,只是改变样式即可。Block:图片列表。Number_img:当前轮播
index(currentNumber),与图片 length 集合。其中 currentNumber:

找到创建的 demo 文件夹,把项目导入到你的编辑器,这里使用的是Sublime
Text编辑器。

组件重用,对微信小程序框架进行了二次封装,实现了组件重用和嵌套

//轮播图发生改变时改变数字

图片 3

使用Editor Config及ESLint标准化代码风格,方便团队协作

//初始化数据

这个时候需要根据自己的项目需求结构进行更改了,项目根目录下面是首页渲染的几个
tabBar 页面,以及 app 的一些配置文件,如名片盒项目的 tabBar 是 3
个切换菜单

安装npm install -g labrador-cli

Data:{

图片 4

初始化项目mkdir democd demonpm initlabrador init

currentNumber:1

我们先找到 app.json 文件打开配置好这几个菜单,配置好
tabBar,这个直接把配置文件改成你自己设计的即可。

项目目录结构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/

}

图片 5

注意 dist目录中的所有文件是由labrador命令生成,请勿直接修改

slidechange:function{

App.json 里面有几个配置项:

配置开发工具项目初始化后使用WebStorm或Sublime等你习惯的IDE打开项目根目录。然后打开
微信web开发者工具
新建项目,本地开发目录选择dist目标目录。开发流程在WebStorm或Sublime等IDE中编辑
src目录下的源码,然后在项目根目录中运行labrador
build命令构建项目,然后在 微信web开发者工具 的调试界面中点击左侧菜单的
重启 按钮即可查看效果。我们在开发中, 微信web开发者工具
仅仅用来做调试和预览,不要在 微信web开发者工具
的编辑界面修改代码。微信web开发者工具 会偶尔出错,表现为点击 重启
按钮没有反应,调试控制台输出大量的无法require文件的错误,编辑
界面中代码文件不显示。这是因为 labrador build命令会更新整个 dist目录,而
微信web开发者工具 在监测代码改变时会出现异常,遇到这种情况只需要关掉
微信web开发者工具 再启动即可。

var number = e.detail.current;

  • Pages:这个是编写的js文件,后缀.js这里不需要使用,配置好正确路径即可正常调用(若调用不到,在重启微信开发者工具会直接报
    page 错误)。 * Window:配置顶部的一些样式,文档介绍比较详细。*
    tabBar:底部的几项配置,见名知意。*
    networkTimeout:暂时没发现用处,建议看文档。根据实际项目需求进行添加与更改。 *
    iconPath和selectedIconPath:底部菜单按钮图片与得到切换点击高亮。*
    text:可以去掉,全部去掉会发现底部 tabar 高度会减少很多。

我们还可以使用 labrador watch命令来监控
src目录下的代码,当发生改变后自动构建,不用每一次编辑代码后手动运行
labrador build。所以最佳的姿势是:在项目中运行 labrador watch

this.setData({

图片 6

在WebStorm中编码,保存

currentNumber:number+1

Json
文件配置好后,根据项目进行文件创建。Demo:存放的是假数据,这一期的开发工具支持
require,假数据使用的是 .js 文件形式,里面的数据结构 json 一致,把 data
暴露出去即可

切换到 微信web开发者工具 中调试、预览

})

图片 7图片 8

再回到WebStorm中编码

},

然后取数据 require
进来即可,这一点使用很方便;Images:图片路径;Page:除 tabar
以外的页面;Servise:服务交付层(与后台联调真实数据时使用);
Wxss:一些公共的 css
文件;看到这里大家发现每个页面都被连带好三个不同的后缀。分别页面,css,js
目前只能依照这样,是微信应用号的一个规范吧。

图片 9

图片 10

labrador 库labrador库对全局的 wx变量进行了封装,将大部分
wx对象中的方法进行了Promise支持, 除了以 on*开头或以
*Sync结尾的方法。在如下代码中使用 labrador库。import wx from
‘labrador’;

这里可以看到全屏状态下当关闭按钮被点击后 getBackStyle,把 changeClick
切换到 imgFullScrenn 待命。

Wxss 文件是引入你写的样式文件,也可以直接在里面写样式。

我们建议不要再使用 wx.getStorageSync()等同步阻塞方法,而在
async函数中使用 await
wx.getStorage()异步非阻塞方法提高性能,除非特殊情况。app.jssrc/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 {
console.log; await sleep; } } 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; }}

图片 11

图片 12

代码中全部使用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

再次点击返回原样式,

Js 文件需全部配置到 pages 里面才能生效。

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

图片 13切换后事件又走回到
getBackStyle
了,灵活运用。图片 14刷新下开发者工具可以看到具体效果如下:图片 15

图片 16

布局 src/compontents/title/title.js

详情页可以看到信息基本都是样式一样,可以使用微信提供的循环
block。下面是详情页里面的个人信息数据,
如果有信息就显示出来,没有数据的不显示,这里使用

下一章:微信小程序首页面开发。

<view > <text catchtap=”handleTap”
style=”color:{{color}};”>{{text}}</text></view>

图片 17

第四章 微信小程序首页面开发

样式 src/compontents/title/title.less

//中文信息

进行了各种准备与配置后,来到首页开发。首先需要实现首页效果图如下:

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

 var chinaMessage = res.card.groups[0].fields;

图片 18图片 19

代码和微信小程序框架中的page很相似。最大的区别是在js逻辑代码中,没有调用全局的Page()函数声明页面,而是用
export语法导出了一个默认的类,这个类需要继承与
labrador.Component组件基类。注意 组件中事件响应方法必须以
handle开头!例如上文中的 handleTap

var personMessage= []

Template 名片很多,需要用模板、 这里需要微信提供的基础组件大致是
input、action-sheet(右边是个底部下拉菜单,需要下拉菜单)、 Scroll-view
(右边 ABC 跳转)、(这个目前实现还有点问题,正在攻克中)。

页面我们要求所有的页面必须存放在
pages目录中,每个页面的子目录中的文件格式和自定义组件一致,只是可以多出一个
*.json配置文件。页面示例下面是默认首页的示例代码:逻辑
src/pages/index/index.js

 for(var i = 0;i personMessage.push(chinaMessage[i]) } //为空或者null是不显示判断 for(var k in personMessage){ if(personMessage[k].value==null || personMessage[k].value==""){ personMessage[k]["display"] = "none"; }else{ personMessage[k]["display"] = "block"; } }

图片 20图片 21

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(); }}

具体以 json 数据格式来处理,我们需要做的就是给它绑定 display
的值,然后我们调用即可。

View是块元素,整个搜索框的一个样式。

布局 src/pages/index/index.xml

图片 22

图片 23

<view > <view bindtap=”handleViewTap” > <image src=”{{
userInfo.avatarUrl }}” background-size=”cover”/> <text >{{
userInfo.nickName }}</text> </view> <view >
<component key=”motto” name=”title”/> </view> <component
key=”list”/></view>

微信此版本的 setData
不支持异步更新数据,故而我们在发生真实网络数据请求时一定要在后面加上
forceUpdata(),强制触发视图渲染,否则会出现很多莫名其妙的 bug。

  • 名片夹:由于该项目主打名片功能,故很多地方使用,所以需要把名片以
    template 分离出来。* Template:定义一个模板,name
    模板的名字其实是个作用域。 *
    Block:循环控制,名片很多,必须用循环出来,和很多操作数据的前端框架循环差不多。*
    支持自定义属性 data,这里用作判断线上名片以及线下名片。 * View
    里面是一些数据引入,里面是支持三目运算符。

样式@import ‘list’;@import ‘title’;.motto-title-text { font-size: 3em;
padding-bottom: 1rem;}/* … */

图片 24这里说明下:如是服务器真实数据。图片 25

图片 26

发表评论

电子邮件地址不会被公开。 必填项已用*标注