WeChat Mini Program Entry Development and Problem Sorting

The problems, solutions, and specific development process encountered during the development of the picture modification assistant applet

Applet development process

Demand confirmation

When confirming the demand, pay attention to some restrictions of WeChat. Here are the points I encountered.

• The total size of the bag does not exceed 1m

• The total number of pages does not exceed 5

• There are different api effects between the editor and the real machine (for example: the canvasToTempFilePath editor cannot be executed)

• Only after adding the appid can there be preview function and real machine debugging . However, at this time, all requests must be configured third-party servers .

Front scaffolding determined

Reasons for choosing scaffolding

• WeChat applet comes with an editor (the hot update configuration file is not supported, comments are not supported, no code compression ... etc.)

Introduction to Scaffolding

• Integrated Redux, data management is more convenient

• During the development process, the use of xmlreplacement is wxmlmore friendly to development tools

• In the development process, use lessreplace wxss, more powerful

• Introduced es-promiseso that it can be created and usedPromise

• Add promisifytool function, you can easily convert the official Apiinto a Pormisemodel

• Introduced to normalizrflatten data and make data management more convenient

• Introduce babelautomatic ES2015feature conversion

• The compression of wxml / wxss / js / img will reduce the loss volume compared to the compression provided by the developer tools.

Here is mainly a ready-made scaffold

It is recommended to learn redux

1. All states are stored in a single store in the form of an object tree

2. The only changeable state is the action, which describes what happened.

3. Describe how actions change state. Write reducers

You should turn the changes you want to make into a normal object. This object is called an action instead of directly modifying the state. Then write a special function to determine how each action changes the state of the application. This function is called a reducer.

Develop applet

The official document can be found on: https: //mp.weixin.qq.com/debu ...

Problem log

• Mobile adaptation issues

Using the small program rpx unit directly according to the design drawing can be equivalent to the upgraded version of rem

• Theme color title bar color configuration

Can be configured in app.json

• Canvas drawing cannot use network resources and base64, only local files

Use the built-in api to store local temporary files for production rendering

• Style switch

1) You can directly bind a variable class or style 2) Use wx: if wx: else

• Some build folders are missing

Pay attention to whether there is an error in the compilation information

• Put it on the local server and use the applet to open the flashback

At present, the reason can only be placed locally

Chinese documentation for webpack

This article is reproduced in: Ape 2048 → https://www.mk2048.com/blog/blog.php?id=h00c2c2cb0j