请注意，本文的相应版本已过期，请参阅该文档的最新版本

QQ交流组282140496

微信宣布小程序的文档和开发工具后，Pulse Software首次学习并体验了它。我们发现微信小程序的技术架构和开发经验使我们感到失望。

由于微信小程序的操作环境不是标准的浏览器环境，并且微信的包装也不完美，因此我们以前的许多开发经验均不适用。

这不是一个不适合的简单开发习惯，但更重要的是，我们的开发过程和规范将不适用。

微信小程序第一项发展罪：无法调用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目录中，但这是在实际操作中发生的：

在调试工具的[网络]选项卡中，我们看到在运行时加载了1000多个文件，总数据量为1.8MB，我们刚刚在代码中加载了一个lodash库！这是因为微信小程序开发工具会将项目下的所有js文件都视为项目文件并将其打包。在实际开发中，我们需要安装许多NPM扩展库，并且这些扩展库具有大量不需要打包的文件。例如，lodash中有成千上万个文件，我们只需要使用其中很小的一部分即可。

此外，在开发中，我们经常需要安装babal，eslient，webpack，grunt来等待开发工具，微信小程序开发工具将平等对待这些工具的源代码...测得的开发人员工具将崩溃！开发人员将崩溃！我崩溃了！

之所以不支持NPM软件包，是因为微信开发人员工具不支持CommonJS标准，而它们不支持CommonJS标准的原因是微信开发人员工具假设项目中的js文件目录必须是项目文件，因此仅实现了一个简单的require函数，其原因是理所当然的。 。

微信小程序第二种犯罪的发展：无法使用Babel进行转码

无法对Babel进行转码的原因实际上是由于无法加载NPM库。但是后果将非常严重。因为您将不再能够安全地使用ES6 / 7功能，所以您将无法使用异步/等待功能，并且将面临无尽的回调。您如何形容自己？回调地狱中的铁杆程序员？

如果您不了解Babel在这里，那就恭喜您，因为您不知道如果您从未见过天堂，那该死的是什么。您无需担心不支持ES6 / 7。但是一旦您的大脑支持ES6 / 7，并且已经使用过Babel，就无法再回头了。像我一样，没有Babel就没有编码。

微信小程序第三种犯罪的发展：无法重用组件

实际上，微信小程序开发并非完全不可能重用组件，例如，WXML语法支持导入和包含。但这只是视图模板是可重用的，而组件不是可重用的，因为我们认为组件应包含视图和逻辑。

WXML实际上是基于可重用的组件，但是它不允许我们自定义组件。如果您有React的经验，您将理解我的意思。

例如，您的小程序是一个电子商务应用程序，项目中的两个页面同时包含产品列表组件，例如某个类别下的产品列表和搜索结果列表。我们知道这两个列表实际上只是参数而已。但是在小程序开发中，您只能抽象列表的模板，而不能抽象逻辑，因此您需要在两个页面上都实现列表组件的控制逻辑，例如刷新和加载更多内容。 。

我们的实践

抱怨它并杀死它而不管它是否被埋葬都是不道德的。由于我们发现了微信小程序开发中的各种弊端，因此我们总结了Pulse软件开发中的一组过程和工具，专门用于解决上述三个问题，并免费发布给了开源社区，这是拉布拉多犬。接下来，让我们一起尝试我们的脉冲软件开发经验。

安装拉布拉多犬

使用命令npm install -g labrador-cli全局安装Labrador控制工具。

初始化项目

使用以下命令创建一个新的Labrador项目：

mkdir democd demonpm initlabrador init

项目初始化后，目录如下：

图中的src是我们的源目录，node_modules是NPM软件包目录，而dist是目标输出目录。请在开发人员工具中创建一个新项目，并将路径设置为dist目录，请不要将其设置为demo目录！使用WebStorm或Sublime打开演示目录。在开发过程中，我们使用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。这就是可以通过拉布拉多调用NPM程序包的方式。

重要的是，通过labrador命令将仅实际使用的js文件添加到项目目录中。如此小的改进意味着我们的小程序可以轻松调用NPM仓库中的庞大扩展库！

Babel转码

初始化的示例代码src / app.js中的内容如下：

在图中，timer和getUserInfo属性都是异步函数，并且函数主体使用await来调用异步操作。拉布拉多库使用const wx = require（'labrador'）;封装微信 API。覆盖默认的全局变量wx；封装的wx对象提供的异步方法返回所有Promise异步对象，并与async / await结合使用。该函数完全终止回调，同步编写异步代码，并轻松逃脱回调地狱！

但是当前浏览器不支持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的模板。

不仅可以将组件存储在src / components目录中，还可以将它们分别打包到NPM软件包中，以便可以在项目之间轻松共享组件。

完成组件定义后，下一步是在页面上调用它。 src / pages / index / index.js中有以下代码：

代码首先引入了labrador库来替换全局默认wx对象，并使用labrador.createPage方法来替换全局Page函数来声明页面。然后加载List组件类，在页面声明配置中添加components属性，并实例化List组件类。 labrador.createPage方法是Page方法的封装层，其目的是在初始化页面时与组件对象关联。

在src / pages / index / index.less中添加代码@ import'list'以调用列表组件的样式。如果您无法在src / components / list中找到list.less，则编译命令将位于NPM中。在软件包中查找node_modules / list / index.less。

在src / pages / index / index.xml中添加代码以调用列表组件的模板文件。该组件是Labrador的自定义组件，导入和模板是在编译后生成的。如果在src / components / list中找不到list.xml，则编译命令将在NPM软件包中查找node_modules / list / index.xml

特定的经验要求您自己做。文章到此结束，谢谢！

请注意，拉布拉多发布了0.3版本。最新的界面和本文的内容将提供源代码。如果您不了解拉布拉多，则可以阅读本文以初步了解拉布拉多。如果您已开始构建基于Labrador的项目，请参阅使用Labrador 0.3构建ES6 / ES7标准模块化微信小程序，以查看最新界面。