Summary of WeChat mini-program development experience

This article mainly introduces the summary of public comments on small program development experience, which has some reference value. interested friends can refer to public comments + main pages

The features above in applets require that we only provide core services for users, and from products to technologies, we must make a fuss about the word "simplicity. Therefore, combined with the public comments business scenario, we provide the following two basic services in "public comments +:

Quick store searching: Allows users to quickly find merchants by searching, category list, and recommendation, and provides information about merchants including location, phone number, comment, and dishes to help users make decisions.

Buy group buying: Recommends group buying items for users and implements closed transaction loops to help users get benefits

The product layer is simple enough. let's take a look at how the technology layer is simple.

Let's take a look at the confusions of developers at the beginning of the project:

Applets are new things. colleagues who participate in development generally know little about the development process and operating principles.

Without knowing how many pitfalls a small program has, we still need to ensure that all the basic functions are developed before the small program is opened. There are many risks.

What is the stability and richness, security, and connection speed of the applet interface?

We can understand the development environment, tools, and framework of any new application scenario, but how can we ensure the simplicity of the development process and provide certain normative and engineering capabilities? To this end, we have made the following technical selection and simple encapsulation on the premise of complying with the basic framework of small programs:

Projects differentiate development directories and build directories, develop them in the development directory, and then build the development Directory through gulp (mainly processing basic functions such as compression ), creating a directory is the real code run by the applet.

The package. json of npm is introduced to manage development dependencies and versionized management of request interfaces, but no npm package is used (only one promise copy is used for implementation)

Use only ES6 syntax and eslint to quickly check for basic JS errors. (at this stage, the prompt for minor program errors is unfriendly, and some errors are caused by JS syntax errors)

Promise encapsulation of the JS-API provided by the applet, code written in promise style to catch various runtime errors

Differences in the "small program platform" during development

Applets run on developer tools, iOS devices, and Android devices. different platforms may have implementation differences, resulting in a little inconsistent presentation. But in general, the compatibility problem is much less than the previous development method. we hope that the small program team can further develop the underlying compatibility for the benefit of front-end programmers.

Development thinking and technical restrictions

No BOM \ DOM operation, views can only be changed through data

Again, it is emphasized that applets support up to 5 levels of pages.

Development Code + small program compilation and encapsulation code = final compilation package <1 M

In view of the problems mentioned above, we have summarized a set of solutions through our own practices. here we also share the discussion with developers:

During the development process, we must use developer tools to complete development and debugging. However, this does not mean that the real functions are displayed exactly as expected. In our past experiences in developing the hybrid framework, we will always encounter inconsistencies in the performance of iOS, Android, and H5. This involves both underlying implementation differences, communication between different development teams is also involved, which is difficult to solve once and for all.

Web service support

Web interface version

Development thinking transformation

Therefore, the implementation of some common solutions will change, including but not limited to the following operations:

Similar to address book anchor switching (scroll-view can be used)

The height of the calculated content determines the line truncation + display the "expand/collapse" switch.

There are three ways to solve this problem:

Optimize the product interaction process, simplify the product process as much as possible until less than 5 levels

RedirectTo. after the page reaches the fifth level, all subsequent pages will be opened through redirectTo. The problem is also obvious, if the user in the N page click back, he can only see the fourth page, the middle of the N-5 pages are gone, suitable for specific scenarios

GoBack uses technical means to ensure that the main process is only 5 levels (in our implementation, we use the search function as a page state rather than a page, the method of destroying the current page by redirectTo after the order is submitted). then, the getCurrentPages interface is used to determine whether the current page is in the history stack through unified page routing, if no parameter is displayed, it is opened through the navigateTo interface. If yes, it is returned through goBack. The latest parameter information is read from the onShow event on the page to update the page.

Finally, let's talk about code volume optimization separately.

Although the public comment + currently only provides two main functions: shop searching and group buying, the 1 M code is too small, in order to bring more functions and better experience to users in a 1 MB volume, we do not reserve enough space for future expansion, this requires that we have to worry about the size of the code 」.

All the json, wxml, wxss, and js of our project will be converted to js and merged into a file and uploaded to the ECS. When the user opens the applet for the first time, download and parse it from the service. Taking our project as an example, through tool compression and statistics, we calculated that the project volume has reached ~ 370 K. after compilation and uploading, the downloaded file reaches ~ 540 K, which is exactly the size of the compiled package shown by the developer tool.

Development level:

Simplified wxml, we found that when wxml is compiled into js, it will occupy a very large volume (reduce a compressed 4 K wxml, can reduce the compilation package 9 K)

The above is a summary of the public comments on small program development experience. For more information, see other related articles in the first PHP community!