Labrador是专门为微信小程序开发的模块化前端开发框架。在微信小程序开发的三宗罪及解决方案一文中，我为大家讲解了微信小程序开发的三大弊端，并提供了解决这些弊端的拉布拉多框架。在拉布拉多之前的版本中，组件复用的功能并不完善。今天，拉布拉多发布了0.3版本。与上一版本相比，提供了更强大的组件化功能，改变了部分模块接口。以下是拉布拉多0.3.x版的介绍手册。如果您已经基于老版本的Labrador构建了工程，请参考下面的说明升级工程，将全局的labrador-cli库升级到0.3版本。QQ交流群282140496特点使用Labrador框架可以让微信开发者工具支持加载海量NPM包，支持ES6/ES7标准代码。使用async/await可以有效避免回调地狱组件复用，微信小程序框架二次封装实现组件复用和嵌套使用EditorConfig和ESLint规范代码风格，方便团队协作安装npminstall-glabrador-cli初始化项目mkdirdemocddemonpminitlabradorinit项目目录结构demo#项目根目录├──.babelrc#babel配置文件├──.editorconfig#编辑器配置├──.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目录下的源码，然后在项目根目录下运行labradorbuild命令构建项目，然后在调试界面点击左侧菜单中的重启按钮微信网页开发者工具查看效果。我们在开发过程中，微信网页开发工具仅用于调试和预览，请勿在微信网页开发工具的编辑界面修改代码。微信网页开发者工具偶发错误，点击重启按钮无反应，调试台输出大量无法require文件的错误，编辑界面不显示代码文件。这是因为labradorbuild命令会更新整个dist目录，微信web开发者工具在监控代码变化时会出现异常。这种情况下，只需要关闭微信网页开发者工具，重新启动即可。我们还可以使用labradorwatch命令来监控src目录下的代码，当有变化时自动构建，而不是每次编辑代码时都手动运行labradorbuild。所以最好的姿势是：在项目中运行labradorwatch，在WebStorm中编码，保存并切换到微信web开发者工具进行调试，预览然后返回在WebStorm中编码...labradorlibrarylabrador库对全局wx变量进行封装，wx对象中的大多数方法都是Promise支持的，除了以on*开头或以*Sync结尾的方法。在以下代码中使用labrador库。从“拉布拉多”导入wx；我们建议不要使用wx.getStorageSync()等同步阻塞方法，在async函数中使用awaitwx.getStorage()异步非阻塞方法来提高性能，除非有特殊情况。app.jssrc/app.js示例代码如下：importwxfrom'labrador';import{sleep}from'./utils/util';exportdefaultclass{globalData={userInfo:null};asynconLaunch(){//调用API从本地缓存获取数据letlogs=awaitwx.getStorage({key:'logs'})||[];logs.unshift(Date.now());awaitwx.setStorage({key:'logs'',data:logs});这个。计时器（）；}asynctimer(){while(true){console.log('hello');等待睡眠（10000）；}}asyncgetUserInfo(){if(this.globalData.userInfo){returnthis.globalData.userInfo;}等待wx.login();让res=awaitwx.getUserInfo();this.globalData.userInfo=res.userInfo;返回res.userInfo;}}代码中全部使用ES6/ES7标准语法。代码不必声明usestrict，因为所有代码都在编译时强制执行严格模式。代码没有调用全局的App()方法，而是默认使用export语法导出一个类。Labrador编译后会自动添加App()方法调用，请不要手动调用App()方法。自定义组件拉布拉多的自定义组件是在微信小程序框架的组件基础上，进一步自定义组合，具有逻辑处理和样式。这样做的目的，请参考微信小程序开发的三宗罪及解决方法。项目中常用的自定义组件存放在src/components目录下。一个组件一般由三个文件组成，*.js、*.xml和*.less分别对应微信小程序框架的js、wxml和wxss文件。在Labardor项目的源码中，我们特意使用了后缀xml和less来表示区别。自定义组件示例下面是一个简单的自定义组件代码示例：logicsrc/components/title/title.jsimportwxfrom'labrador';importrandomColorfrom'../../utils/random-color';exportdefaultclassTitleextendswx.Component{data={text:'',color:randomColor()};handleTap(){this.setData({color:randomColor()});}}布局src/组件/标题/标题。js
