Pitfalls encountered in WeChat mini program development

Preface

From internal beta to open beta, WeChat mini programs have become the hottest topic in the IT field. In addition to different types of applications, In addition to exploring possibilities, for the development team, the most important thing is the pitfalls that have been stepped on.

What does the mini program provide developers

What is a Mini Program

A Mini Program is a new form of public account launched by WeChat. It is an application that can be used in WeChat without downloading and installation. At the same time, it should be noted that mini programs, subscription accounts, service accounts, and enterprise accounts are parallel systems.

The following is the "WeChat Development" knowledge map launched by php Chinese website, which can better help readers understand the role of WeChat mini programs in WeChat Location under development.

WeChat Mini Program MINA Framework

The Mini Program provides a framework, which WeChat calls “MINA”. This framework mainly It is divided into two levels, the view layer and the logic layer. At the core of the framework is a reactive data binding system. WXML The dynamic data in are all from the corresponding Page data, this data binding is one-way. Only when the data changes, the view will adjust accordingly. This mode allows developers to focus on event processing, changing object status, and implementing view updates.

In order to facilitate and restrict developer development, WeChat has defined a series of basic components, which are the components of the view layer (form components, media components, navigation, etc.). The component comes with some functions and WeChat-style styles, similar to HTML tags. WeChat also provides many native APIs for calling functions provided internally by WeChat, as well as a WeChat applet developer tool.

WeChat applet source code structure:

●View layer (display the data of the logical layer on the view)

●Logical layer (Change the view by changing the data [setData method])

●Configuration file

In the mini program, WeChat stipulates the composition mode of the interface, which consists of four files:

●.wxml file (page structure file) tag language, similar to HTML, the file that is really responsible for the page structure, can bind data;

●.wxss file (style sheet file) is similar to CSS, Most of the CSS styles are the same;

●.js files (script files) are used to run our logic, using JS language;

●.json files (configuration files) mainly configure common Styles, such as Tab bar, window style, etc.

Mini program development
The initial attempt to develop mini programs focuses on JS files and WXML files.
Since the development field is subdivided into certain areas, such as technical language, operation and maintenance systems, industry applications, etc., a network map is designed for each technology and knowledge point to summarize the aspects involved in a certain aspect of the technology. knowledge, and at the same time prepare some high-quality content for the knowledge structure to facilitate everyone to learn knowledge more systematically. Therefore, on this product, content recommendation, personal center and search need to be implemented. Both the user side and content recommendation include four layers: library-》knowledge structure-》content list-》content details page. The search function can find relevant content on the user side or in the recommended knowledge base based on the search keywords, which is convenient for everyone to read or collect.

Page design
The applet component meets all display functions and structures (lists, windows, buttons, events, etc.), and has a complete API to facilitate logic development. Different functional modules are placed on different pages, specifically as follows:

●View layer: Tab bar, list page, knowledge structure page, content details page, search page

●Logical layer:

●Tab column->Select the first-level page by binding data index;

●List page->Control the list display and Dynamic loading;

●Search page->By binding data searchValue, user input can be obtained in time through events.

Pitfalls on the road to small program development
1. Open Page number limit (redirectTo or navigateTo)
WeChat provides Tab bar settings, which can be configured in app.json. The Tab bar configured in the App will appear on all first-level pages. But there is a problem with it. Clicking Tab for the first time will open a new page. WeChat’s limit on the number of open pages is five.

WeChat provides several ways to jump to pages, including redirectto, navigateto, and return. Focus on these two, redirectto will open a new page directly on the original page, and navigateto will open a new page. Since WeChat has a limit on the number of pages, our products have many levels, making it impossible to set them directly in app.json. Tab bar. So we designed the Tab bar separately. Clicking Tab does not open a new page. Reference it on every primary page, and do not use Tab on subsequent secondary and tertiary pages. To switch, you need to return to the primary page.

2. Display of tree structure

Every library has a tree-like knowledge structure, please take a look at this example. The display method of each level is the same, so under normal circumstances, we will use the recursive method to display. For example, in this picture, when we determine that this node has child nodes, we want to call the same method again to display it. But unfortunately, in the mini program, whether using templates or using include to reference files, there is no way to adjust yourself.

Fortunately, we know how deep the level is, so we can write several identical files and templates and call them with different names. If it is a tree structure with unknown levels, it will be very difficult to handle. Here I would like to suggest that you change the tree structure into an array, add hierarchical identifiers, and use a loop to process hierarchical display in WXML files.

3. Display of HTML pages in WeChat mini programs

This is a very difficult problem to solve. WeChat does not support the display of HTML pages, so all HTML pages need to be displayed. The tags are converted into tags allowed within the mini program. We use an application called wxParse, whose function is to convert HTML pages into JSON through regular expressions form, and then use templates to display it. The style (WXSS) of each label is specified here. Unfortunately, it also has hierarchical problems, and it also writes many identical templates repeatedly.

HTML to JSON tool

Converted HTML page

Sequential call
If HTML The label hierarchy exceeds the number of templates, and the excess parts will not be displayed. This application runs in WeChat. It is recommended that you perform data conversion on the server side and send the converted data to the mini program. In addition, the mini program setData() cannot exceed 1024K at a time. If your If the JSON format data exceeds this limit, it will be difficult to splice.

4. Bubbling events

After an event on a component is triggered, the event will be passed to the parent node, causing unnecessary logical processing and affecting the This uses fee bubbling event handling.

5. The network request interface wx.request() does not carry Cookies

If the server side has logic for processing by obtaining Cookies, it cannot be combined with the applet. , new interfaces can only be developed separately for small programs.

WeChat initiates network request API

##SummaryThe operational advantage of mini programs is that WeChat has a large number of users and is suitable for promotion. Some apps with a single function can be implemented in mini programs without downloading the app. Developers do not need to consider the platform, and development costs are low. But at the same time, it is not suitable for developing programs with complex logic and rich interfaces. It is limited by the framework, has little arbitrariness, and cannot satisfy all functions. ​