应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

梁兴臣:微信小程序开发三宗罪和解决方案

发布时间:2024-01-01 00:00 浏览次数:25

在微信发布小程序的文档和开发工具后,脉冲软件在第一时间展开了自学和体验,我们辨认出微信小程序的技术架构和研发体验使我们非常沮丧。


由于微信小程序的运转环境并不是一个标准的浏览器环境,而且微信的PCB工作并不健全,所以我们以往研发中的很多经验并不适用于。


这并非直观的研发习惯不适应环境,更关键的就是我们的研发流程、规范将不适用于。


微信小程序开发第一宗罪: 无法调用NPM纸盒


虽然微信小程序开发工具装箱时同时实现了require函数读取倚赖,但并不是完备的CommonJS倚赖管理。因为require函数仅仅能读取项目中的JS文件,而且必须严苛定义JS文件路径,路径不积极支持CommonJS的路径风格。比如如下读取方式都将失效:


require('lodash');


require('lodash/map');


require('./foo');


在微信小程序开发工具中,我们必须对应记为如下格式:


require('node_modules/lodash/lodash.js');


require('node_modules/lodash/map.js');


require('./foo.js');


虽然我们可以像是上面代码一样读取node_modules目录中的库,但是实际运转时却出现了:


在调试工具的Network选项卡中,我们看见运转时读取了1000多个文件,总数据量1.8MB,而我们仅仅就是在代码中读取了一个lodash库而已!这是因为微信小程序开发工具可以将所有项目下的js文件视作项目文件,并展开装箱。而实际研发中,我们须要加装很多的NPM拓展库,而这些拓展库中存有大量的不能须要装箱的文件,比如lodash中存有上千文件,而我们只须要使用其中的非常少的一部分。


另外,在研发中,我们往往须要加装babal、eslient、webpack、grunt等候开发工具,微信小程序开发工具可以一视同仁将这些工具的源码也展开装箱......量测开发者工具将崩盘!开发者将崩盘!我崩盘!


所以不积极支持NPM纸盒的原因,就是微信开发者工具不积极支持CommonJS标准,不积极支持CommonJS标准的原因,就是微信开发者工具想当然地指出项目目录下的js文件一定就是项目文件,所以只同时实现了直观的require函数,想当然的原因就是。。。


微信小程序开发第二宗罪: 无法采用Babel转码


无法采用Babel转码的原因其实仍然肇因于无法读取NPM库。但是后果将十分轻微。因为你将无法再安全采用ES6/7特性,你将无法采用async/await函数,你将和无尽的callback搞斗争,你该怎样叙述自己?反弹地狱中的苦逼程序员?


如果你看见这里不明白Babel为何物,那么祝贺你,因为不曾见过天堂就无人知晓何为地狱,你无须为不能积极支持ES6/7而苦恼。但一旦你的大脑积极支持了ES6/7,用过了Babel,你就回不来了,像是我一样,无Babel不编码。


微信小程序开发第三宗罪: 无法器重组件


其实微信小程序开发就是并非全然无法器重组件,比如说WXML语法中积极支持import和 include。但是那仅仅就是视图模板可以器重,并非组件可以器重,因为我们指出组件在应涵盖视图和逻辑。


WXML其实就是基于可以器重的组件,但是不容许我们自定义组件。如果你存有React经验,你就可以明白我的意思。


比如,你的小程序就是个电商APP,项目中存有两个页面中同时涵盖了商品列表组件,比如说某分类下商品列表和搜寻结果列表,我们晓得这两个列表其实仅仅就是参数相同而已。但是在小程序开发中,你就可以将列表的模板抽象化出,无法将逻辑抽象化出,所以你就须要在两个页面上都同时实现一遍列表组件的掌控逻辑,比如说创下、读取更多。。。


我们的课堂教学


只吐槽、管杀不管掩埋就是不道德的,既然辨认出了微信小程序开发中的各种弊端,我们脉冲软件在研发之中总结出来了一套流程和工具,专为化解上述三个问题,并免费公布至了开源社区,这就是Labrador。接下来我们一起来尝试一下我们脉冲软件的研发体验。


加装Labrador


通过命令 npm install -g labrador-cli 全局加装Labrador掌控行工具。


初始化项目


通过如下命令新建一个Labrador项目:


mkdir demo


cd demo


npm init


labrador init


项目初始化顺利完成后,该目录就是这个样子的:


图中的src就是我们的源码目录,node_modules就是NPM纸盒目录,dist就是目标输入目录。恳请在开发者工具中新建一个项目,并设置路径至dist目录,切勿设置为demo目录!采用WebStorm或Sublime关上demo目录,研发过程中,我们采用WebStorm或Sublime修正src目录下的源码,切勿轻易修正dist目录中的文件,因为dist目录就是通过labrador命令分解成的。


在demo目录中运转 labrador build 命令编程项目,该命令可以将src目录下的文件一一处置并分解成dist目录下对应的文件。我们也可以运转 labrador watch 命令监控src目录下的文件变化,这样就不必每次修正后手动运转编程命令。


读取NPM纸盒


我们以lodash圣塞雷县基准,在src/app.js中键入代码 const _ = require('lodash'); 编程后,我们看见dist目录下的文件就是这样的:


我们看见dist目录下存有一个npm/lodash目录,该目录下只有一个lodash.js文件,那么在微信web开发者工具中装箱预览,lodash的库将只有这个文件被读取。


这一切就是怎么出现的?


我们看看一下dist/app.js的源码,辨认出源码中const _ = require('lodash'); 被编程为 var _ = require('./npm/lodash/lodash.js'); 然后labrador命令将node_modules/lodash/lodash.js 文件导入到了dist/npm/lodash/lodash.js 。这就是通过labrador可以调用NPM纸盒的原理。


关键的就是,只有真正使用的js文件才被labrador命令重新加入至项目目录中。这样一个小小的改良寓意着我们的小程序可以方便快捷调用NPM仓库中海量的拓展库!


Babel转码


在初始化的示例代码src/app.js中的内容就是这样的:


图中timer和getUserInfo属性都为async函数,函数体内采用await调用异步操作方式。labrador 库对微信API展开了PCB,采用 const wx = require('labrador'); 全面覆盖预设的全局变量wx; PCB后的wx对象提供更多的异步方法回到的都就是Promise异步对象,融合async/await函数全盘破灭callback,将异步代码同步写下,随心所欲逃出反弹地狱!


但目前async/await函数就是不被浏览器积极支持的,我们须要采用babel对其转码,labrador编程命令已经内置了babel转码,转码后的代码可以查阅dist/app.js,内容过长,不再张贴。


器重组件


器重组件最须要化解的问题就是组件的逻辑代码怎样器重。在实例代码中存有一个src/components目录,用以放置项目内的可以器重组件,其结构就是这样的:


子目录src/components/list中放置着一个可以器重的组件。list.js / list.less / list.xml 分别对应微信小程序的 js / wxss / wxml 文件。JS为控件的逻辑层,其代码如下:


文件求出一个List类,这个组件类具有像是Page一样的生命周期函数onLoad, onReady, onShow, onHide, onUnload 以及setData函数。


LESS文件对应微信的WXSS文件,因为微信小程序实现的管制,LESS中无法采用团级挑选语法,但是可以定义变量,便利研发。


XML文件对应微信的WXML文件,就是组件视图叙述文件,list.xml内容为:


文件中求出一个名叫list的template。


组件不但可以存放在src/components目录内,还可以单独制成NPM纸盒,这样就可以随心所欲努力做到横跨项目间的组件共享资源。


组件定义顺利完成后,接下来就是在页面中调用,在 src/pages/index/index.js 中存有如下代码:


代码中首先导入了labrador库替代全局的预设wx对象,并采用labrador.createPage方法替代全局的Page函数声明页面。然后读取List组件类,在页面声明布局中,减少了components属性,并将List组件类实例化传至。labrador.createPage方法就是对Page方法的一层PCB,目的就是在页面初始化时和组件对象展开关联。


在 src/pages/index/index.less 中重新加入代码 @import 'list' 即可调用list组件的样式,如果在src/components/list中打听没list.less,那么编程命令将在NPM机内找寻 node_modules/list/index.less 。


在 src/pages/index/index.xml 中重新加入代码 即可调用list组件的模板文件,component 就是Labrador自定义的组件,编程后对应分解成 import 和 template。如果在src/components/list中打听没list.xml,那么编程命令将在NPM机内找寻 node_modules/list/index.xml

TAG标签:
阅读推荐