Complete development outline of WeChat mini program

The development language and files used by WeChat are very "special".

Mini programThe program file types used are roughly divided into the following categories:

①WXML (WeiXin Mark Language, WeChat markup language)

②WXSS (WeiXin Style Sheet, WeChat style sheet)

③JS (Java, small The main body of the program)

In terms of language, mini programs seem to redefine a set of standards. But in fact, they are not much different from the "front-end three-piece set" - HTML, CSS and Java.

Related learning recommendations: 小program development tutorial

Now, let’s compare Let’s take a look at the similarities and differences between small program development languages ​​and the “three-piece front-end set”:

HTML and WXML: There is a big difference between the two. If you have not been exposed to Android development before, you may feel that Some headache. In fact, WXML is more like the interface XML description file in Android development, suitable for the construction of program interfaces; while HTML is inclined to the display of articles (this is related to the history of HTML) and the construction of Internet pages.

WXSS and CSS: There is almost no difference in language between the two and they can be used directly.

JS file: The JS file of the mini program is almost the same as the JS used in front-end development. It is just that the JS of the mini program adds some API interfaces of WeChat and removes some unnecessary functions (such as DOM).

In terms of language, small programs are completely aligned with front-end development with the lowest learning costs, but this does not mean that all front-end developers can migrate seamlessly.

If you are switching from front-end development to small programs, you need to pay attention to these two points:

The construction ideas of HTML and WXML files are quite different. If I have only been exposed to front-end development before, so it will take some time to adapt to the WXML writing method.

Although Mini Program uses front-end language, it does not mean that you can continue to use front-end development ideas for development. The requirements for front-end development of small programs have been upgraded from "building interfaces" to "developing complete applications." Front-end development requires a change in consciousness.

Interface construction

1. Basic logic

WXML and WXSS files are small Program interface element declaration and style description file.

The biggest feature of WXML is that it connects interface elements in the form of views and transmits information updates to the view layer in real time through program logic (AppService).

view is similar to the p element in HTML. When building, views can be nested at multiple levels, and any visual elements can be placed inside the view.

It should be noted that once the element goes beyond the screen, the user cannot see it, which is quite different from HTML.

For example, we imagine the mobile phone screen as a stage, and actors outside the stage cannot be seen by the audience.

The applet has a dedicated view for scrolling.

If you want the interface to be a freely scrollable interface (such as a list, etc.), you can use the scroll-view view, adjust its size to the entire screen in WXSS, and set scroll- y (scroll up and down) or scroll-x (scroll left and right) is true.

The DOM cannot be used directly to control WXML elements in the applet. If you need to update data, you have to use the data binding and element rendering methods provided by WXML.

Another thing to note is that the mini program’s grid typesetting system uses Flex layout, which is a typesetting standard proposed by W3C in 2009.

2. Bind data

For a single field, developers can use the data binding method to update information.

In addition to being updated during loading, the bound data can also be updated in the form of functions in the JS main program. The updates can also be reflected in the bound data on the interface. .

3. Conditional rendering and list (loop) rendering

Conditional rendering is suitable for pages with unexpected situation prompts (such as the failure to load the list or details, make prompts, etc.).

Its rendering has trigger conditions, that is, the page will be rendered when the conditions are met, otherwise it will be ignored or another piece of code will be rendered.

The variables in the judgment condition contained in the two curly braces are the data in the JS code of the main program statement.

If you need to build a list in the interface, you can use the loop rendering in WXML to collect the rendering codes of the same element. The looped data can be written to data in the form of an array for WXML access.

After rendering is completed, changes in rendering judgment conditions can affect interface changes.

4. Templates and references

WXML supports the use of templates and references to reduce code size.

Templates are a way to reuse the same code in WXML code.

You can write multiple templates to the same file and use import to reference them in other files.

If you need to reference the entire page, you need to use include.

5. Style

Through WXSS style sheet, Developers can define styles for elements in WXML.

WXSS Just like CSS code, you can select elements directly using selectors. In WXML, you can also directly define the id and class of elements to facilitate style definition in WXSS files.

6. User operation and event response

Since WeChat does not use HTML, it cannot monitor user clicks by adding hyperlinks (a elements) event.

For elements that need to listen for click events, they should be bound using the bindtap attribute or catchtap attribute in WXML.

In addition to one click, WeChat also provides event responses such as press and hold, start touching, and release.

After binding an event in WXML, it can be used in the main program JS.

There are also other corresponding events in other APIs. These events can be found in the official documentation of the WeChat applet Check it out.

When you need to jump between pages of the mini program, you should use the wx.navigateTo() method.

##It should be noted that regarding page level jumps, WeChat limits level jumps to five layer. When developing, you need to pay attention to whether the corresponding limits are exceeded.

Network access

The applet supports three request methods.

One is a direct HTTP connection request, the result is returned directly after the request, and the connection ends. The other is Socket persistent connection. When one party actively closes the connection, the connection ends.

In addition to the above two connection methods for sending and receiving plain text, WeChat also provides a file sending and receiving interface. The voices recorded in the mini program and the photos selected need to be uploaded in this way.

Accessing the network through the mini program requires that the server must support HTTPS secure connections, and the port number must be 443.

At the same time, the mini program can only access the server address set by the developer when registering the mini program.

Multimedia and storage

If you need to play multimedia (including audio and video) or store data in the mini program, you cannot use HTML 5 The standards provided must use the mini program multimedia playback control interface and storage interface provided by WeChat.

Regarding the sound interface, there are two types: audio playback and music playback.

Audio playback provides three interfaces: play, pause and stop playback. It does not provide the function of jumping to a certain playback time point, nor can it obtain the current playback progress.

The music playback interface provides functions such as music status checking and monitoring in addition to the above basic playback controls.

The applet provides a photo and video data exchange interface. Through this interface, the applet can access photos and videos selected or taken by the user.

The multimedia information obtained through the audio recording and video photo interface is temporary, and the files need to be permanently saved through the mini program storage file interface.

For text data, the applet also provides an interface for storing this type of data. Developers switching from Android or other app platforms need to note that mini programs do not provide a database-style local data storage form, but save it in a one-to-one form of "field-value".

Hardware related

The mini program relies on WeChat and provides many hardware-related APIs.

The applet can obtain the following data through the API:

System related information (including network status, device model, window size, etc.)

Gravity sensing data

Compass data

Through the above API, it should be easy to write " "Shake" and other interactive pages.

But please note: These data can only be obtained actively and cannot be obtained in real time through callbacks of changes in these values.

Push service

The mini program provides push service and can send necessary notifications to users at any time. However, please note that the push service can only be used for notification reminders and cannot be used for mass sending.

In the mini program, the push service is called "template message" (developers who have developed service accounts before should be familiar with it). Developers need to register new template push messages (such as purchase success notifications, etc.) in the WeChat mini program background and approve them before they can use the template message push service in the mini program. It is recommended to refer to the corresponding documents for specific review standards.

After the template message is approved, the developer needs to obtain the Access Token from the WeChat server first, and then add the value, template number, and dynamic variables in the template (such as order number, price, etc. ) is submitted to WeChat, which will push notifications to users.

User information and WeChat payment

The mini program can obtain the user's information with the user's consent.

First of all, the mini program must allow users to authorize login through the WeChat login interface. After that, the applet can display and use user information.

When logging in using WeChat, please note that the message needs to be signed to confirm its integrity to ensure that the data has not been tampered with.

WeChat payment can also be used in the mini program. It should be noted that when sending a payment request, a signature needs to be added to the sent message to confirm the integrity of the message.

Related learning recommendations: WeChat Mini Program Tutorial

The above is the detailed content of Complete development outline of WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!