Three major problems and solutions in mini program development

After WeChat released the documentation and development tools for the mini program, Pulse Software learned and experienced it immediately. We found that the technical architecture and development experience of the WeChat mini program made us very disappointed.

Since the running environment of WeChat applet is not a standard browser environment, and WeChat's packaging work is not perfect, many of our previous development experiences are not applicable.

This is not simply a matter of incompatibility with development habits, but more importantly, our development processes and specifications will not apply.

The first sin of WeChat applet development: Unable to call NPM package

Although the WeChat applet development tool implements the require function to load dependencies when packaging, it is not a complete CommonJS dependency management. Because the require function can only load JS files in the project, and the JS file path must be strictly defined, the path does not support the CommonJS path style. For example, the following loading methods will cause errors:

require('lodash');
require('lodash/map');
require('./foo');

In the WeChat applet development tool, we must write the corresponding format as follows:

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

Although we can load the node_modules directory like the above code library, but the actual runtime happens:

In the Network tab of the Debug tool, we see that the runtime is loaded There are more than 1,000 files, the total data volume is 1.8MB, and we just loaded a lodash library in the code! This is because the WeChat applet development tool will regard js files under all projects as project files and package them. In actual development, we need toinstallmany NPM extension libraries, and there are a large number of files in these extension libraries that do not need to be packaged. For example, there are thousands of files in lodash, and we only need to use some of them. A very small part.

In addition, during development, we often need to install babal, eslient, webpack, grunt and other development tools. The WeChat applet development tool will package the source code of these tools equally... Actual test development Or the tool will crash! Developers will crash! I collapse!

So the reason why NPM packages are not supported is that the WeChat developer tools do not support the CommonJS standard. The reason why the CommonJS standards are not supported is that the WeChat developer tools take it for granted that the js files in the project directory must be project files. So only a simple require function is implemented, and the reason is taken for granted. . .

The second sin of WeChat mini program development: Unable to use Babel to transcode

The reason why you cannot use Babel to transcode is actually still due to the inability to load the NPM library. But the consequences will be serious. Because you will no longer be able to safely use ES6/7 features, you will not be able to use async/await functions, and you will struggle with endless callbacks. How should you describe yourself? Suffering programmer in callback hell?

If you see this and don’t understand what Babel is, then congratulations, because you don’t know what hell is if you haven’t seen heaven. You don’t need to worry about not supporting ES6/7. But once your brain supports ES6/7 and you have used Babel, you will never go back. Like me, you can’t code without Babel.

The third sin of WeChat mini program development: the inability to reuse components

In fact, it is not impossible to reuse components in WeChat mini program development. For example, WXML syntax supports import and include. But that is only the reusability of the viewtemplate, not the reusability of the component, because we believe that the component should contain the view and logic.

WXML is actually based on reusable components, but it does not allow us to define components by ourselves. If you have React experience, you'll know what I mean.

For example, your mini program is an e-commerce APP, and there are two pages in the project that contain product list groups, such as product list and search# under a certain category. ##Result list, we know that these two lists are actually just different parameters. But in small program development, you can only abstract the template of the list, but not the logic, so you need to implement the control logic of the list component on both pages, such as refreshing and loading more. . .

Our Practice

It is unethical to just complain, control and kill but not bury it. Now that we have discovered various shortcomings in the development of WeChat mini programs, our Pulse Software has summarized the following during development A set of processes and tools designed to solve the above three problems and released to the open source community for free, this is Labrador. Next, let’s try out the development experience of our pulse software.

Install Labrador

Through the command

npm install -g labrador-cli Install the Labrador control line tool globally.

初始化项目

通过如下命令新建一个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进行了封装，使用 const wx = require('labrador'); 覆盖默认的全局变量wx; 封装后的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中无法使用连级选择语法，但是可以定义变量，方便开发。

The XML file corresponds to WeChat's WXML file, which is a component view description file. The content of list.xml is:

A template named list is exported from the file.
Components can not only be stored in the src/components directory, but can also be made into NPM packages separately, so that components can be easily shared across projects.

After the component definition is completed, the next step is to call it on the page. There is the following code in src/pages/index/index.js:

Code First, the labrador library is introduced to replace the global default wx object, and labrador.createPage method is used to replace the global Page function declaration page. Then load the List component class, add the components attribute in the page declaration configuration, and pass in the instantiation of the List component class. The labrador.createPage method is a layer of encapsulation of the Page method. The purpose is to associate with the component object when the page is initialized.

Add the code @import 'list' to src/pages/index/index.less to call the style of the list component. If list.less is not found in src/components/list, then compile the command Will look for node_modules/list/index.less in the NPM package.

Add the code a2d1a87164e49e5846672f4898cba5de in src/pages/index/index.xml to call the template file of the list component. The component is a component customized by Labrador and corresponds to it after compilation. Generate import and template. If list.xml is not found in src/components/list, the compilation command will look for node_modules/list/index.xml in the NPM package.

The specific experience requires you to do it yourself. The article is here That's the end, thank you!

【Related Recommendations】

1. Complete source code of WeChat Mini Program

2. WeChat Mini Program demo: imitating NetEase Cloud Music

The above is the detailed content of Three major problems and solutions in mini program development. For more information, please follow other related articles on the PHP Chinese website!