Shulou(Shulou.com)06/01 Report--

What are the three problems and solutions developed by WeChat Mini Programs? in view of this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

After Wechat released Mini Program's documents and development tools, we immediately carried out learning and experience, and found that WeChat Mini Programs's technical architecture and development experience let us down. As WeChat Mini Programs's running environment is not a standard browser environment, and the encapsulation of Wechat is not perfect, a lot of our previous development experience is not applicable. This is not a simple development habit does not adapt, more importantly, our development process, specifications will not be applicable.

WeChat Mini Programs developed the first sin: unable to call the NPM package

Although WeChat Mini Programs's development tools are packaged to implement require function loading dependencies, it is not a complete CommonJS dependency management. Because the require function can only load JS files in the project, and the path of the JS file must be strictly defined, the path does not support the path style of CommonJS. For example, the following loading methods will cause errors:

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

In the WeChat Mini Programs development tool, we must write it in the following format:

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

Although we can load the libraries in the node_modules directory as we did in the above code, this happens at run time:

In the Network tab of the debugger, we see that the runtime loads more than 1000 files, with a total amount of data 1.8MB, while we just load a lodash library in the code! This is because the WeChat Mini Programs development tool will treat the js files under all projects as project files and package them. In actual development, we need to install a lot of NPM extension libraries, and these extension libraries have a large number of files that do not need to be packaged, such as thousands of files in lodash, and we only need to use a very small part of them.

In addition, in development, we often need to install babal, eslient, webpack, grunt and other development tools. WeChat Mini Programs development tools will package the source code of these tools equally. The actual developer tool will crash! The developer will collapse! I'm devastated!

Therefore, the reason why the NPM package is not supported is that Wechat developer tools do not support CommonJS standard and CommonJS standard, and that Wechat developer tools take it for granted that the js files in the project directory must be project files, so they only implement a simple require function. No, no, no.

WeChat Mini Programs developed the second sin: unable to transcode with Babel

The reason why you can't transcode with Babel is 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 the ES6/7 feature, you will no longer be able to use the async/await function, and you will struggle with endless callback. How would you describe yourself? Call back the tough programmer in hell?

If you see here and don't understand what Babel is, congratulations, because if you haven't seen heaven, you don't know what hell is, and you don't have to worry about not supporting ES6/7. But once your brain supports ES6/7 and uses Babel, you can't go back. Like me, you can't code without Babel.

WeChat Mini Programs developed the third sin: unable to reuse components

In fact, WeChat Mini Programs development is not completely unable to reuse components, such as WXML syntax to support import and include. But that's just view template reusability, not component reusability, because we think components should contain views and logic.

WXML is actually based on reusable components, but it doesn't allow us to customize components. If you have React experience, you will know what I mean.

For example, your Mini Program is an e-commerce APP, and two pages of a project contain item list components, such as a product list under a certain category and a search results list. We know that the two lists are just different parameters. But in Mini Program development, you can only abstract the list template, 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 immoral to just complain and kill regardless of burying. Since we have found various drawbacks in WeChat Mini Programs's development, we have summed up a set of processes and tools in our development to solve the above three problems, and released them to the open source community for free, which is Labrador. Next, let's try our development experience.

Install Labrador

Through the command npm install-g labrador-cli

Install the Labrador control line tool globally.

Initialize the project

Create a new Labrador project with the following command:

Mkdir democd demonpm initlabrador init

After the project is initialized, the directory looks like this:

The src in the figure is our source directory, node_modules is the NPM package directory, and dist is the target output directory. Please create a new project in the developer tool and set the path to the dist directory. Do not set it to the demo directory! Use WebStorm or Sublime to open the demo directory. During the development process, we use WebStorm or Sublime to modify the source code in the src directory. Do not modify the files in the dist directory directly, because the dist directory is generated by the labrador command.

Run labrador build in the demo directory

Command to compile the project, which processes the files in the src directory one by one and generates the corresponding files in the dist directory. We can also run the labrador watch command to monitor the file changes in the src directory so that we don't have to run the compile command manually after each modification.

Load NPM package

Let's take the lodash package as an example and type the code const _ = require ('lodash') in src/app.js

After compiling, we see that the file in the dist directory looks like this: [picture upload. (3)]

We see a npm/lodash directory under the dist directory, and there is only one lodash.js file in this directory, so package the preview in Wechat web developer tool, and this is the only file that will be loaded for lodash's library.

How did all this happen?

Let's take a look at the source code of dist/app.js and find that const _ = require ('lodash') in the source code

Compiled to var _ = require ('. / npm/lodash/lodash.js')

Then the labrador command sets the node_modules/lodash/lodash.js

The file was copied to dist/npm/lodash/lodash.js

. This is how the NPM package can be called through labrador.

Importantly, only the js files that are actually used are added to the project directory by the labrador command. Such a small improvement symbolizes that our Mini Program can easily access the massive extension libraries in the NPM repository!

Babel transcoding

The content in the initialized sample code src/app.js looks like this:

[picture uploaded. (4)]

In the figure, both the timer and getUserInfo properties are async functions, and the function body uses await to call asynchronous operations. The labrador library encapsulates Wechat API with const wx = require ('labrador'); the asynchronous methods provided by the encapsulated wx object override the default global variable wx; and return Promise asynchronous objects. Combined with the async/await function, it completely terminates callback, writes asynchronous code synchronously, and easily escapes callback hell!

However, the async/await function is not supported by browsers. We need to transcode it using babel. Babel transcoding has been built into the labrador compilation command. The transcoded code can view dist/app.js. The content is too long and will no longer be posted.

Reuse component

The most important problem to be solved in reusing components is how to reuse the logical code of components. In the example code, there is a src/components directory to store the reusable components within the project, and its structure is as follows: [picture upload. (5)]

A reusable component is stored in the subdirectory src/components/list. List.js / list.less / list.xml corresponds to WeChat Mini Programs's js / wxss / wxml file, respectively. JS is the logic layer of the control, and its code is as follows: [picture upload. (6)]

The file exports a List class that has lifecycle functions like Page onLoad, onReady, onShow, onHide, onUnload, and setData functions. The LESS file corresponds to the WXSS file of Wechat. Because of the restrictions achieved by WeChat Mini Programs, the concatenated selection syntax can not be used in LESS, but variables can be defined to facilitate development. The XML file corresponds to the WXML file of Wechat. It is a component view description file. The list.xml content is: [picture upload. (7)] Export a template named list in the file. Components can not only be stored in the src/components directory, but can also be made into separate NPM packages, so that components can be easily shared across projects.

After the component definition is completed, the next step is to call it in the page. There is the following code in src/pages/index/index.js: [picture upload. (8)] the code first introduces the labrador library to replace the global default wx object, and uses the labrador.createPage method instead of the global Page function declaration page. Then load the List component class, add the components attribute to the page declaration configuration, and instantiate the List component class. The labrador.createPage method is a layer of encapsulation of the Page method to associate with the component object when the page is initialized.

The style of the list component can be invoked by adding the code @ import 'list' to the src/pages/index/index.less, and if the list.less is not found in the src/components/list, the compilation command will look for the node_modules/list/index.less in the NPM package.

You can call the template file of the list component by adding code in src/pages/index/index.xml. Component is a custom component of Labrador, and import and template are generated after compilation. 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 answers to the three questions and solutions developed by WeChat Mini Programs are shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.