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

This article mainly introduces "what three things WeChat Mini Programs needs to know before development". In daily operation, I believe many people have doubts about which three things WeChat Mini Programs needs to know before development. The editor consulted all kinds of materials and sorted out simple and useful methods of operation. I hope it will be helpful to answer the doubts of "which three things WeChat Mini Programs needs to know before development!" Next, please follow the editor to study!

Preface

"I have been a programmer for many years, and I think we should do something for the development team," Zhang Xiaolong, the father of Wechat, said in a speech at the beginning of the year. A few months later, Wechat officially launched its Wechat app account (WeChat Mini Programs), setting off another wave of craze on the Internet.

Therefore, many people are ready to develop Wechat's Mini Program, if you really want to develop Mini Program, you must first learn a set of Wechat special "development language". In order to better use the development language, here are three things you must know:

Language and documents

The biggest difference between WeChat Mini Programs Laifa and other platforms is that the development language and files used by Wechat are very "personalized".

The types of program files used by Mini Program can be roughly divided into the following types:

WXML (WeiXin Mark Language, Wechat markup language)

WXSS (WeiXin Style Sheet, Wechat style sheet)

JS (JavaScript, the main body of Mini Game)

In terms of language, the program seems to redefine a set of standards. But in fact, they are not much different from the "front-end three-piece set" (HTML, CSS and JavaScript). Let's take a look at the similarities and differences between WeChat Mini Programs's development language and the "front-end three-piece set".

Interface building

1. Basic logic

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

The most important feature of WXML is that the interface elements are concatenated in the way of View, and the information updates are transmitted to the view layer in real time through program logic (AppService).

View is similar to the div element in HTML. When building, View can be nested at multiple levels, and any visual element can be placed in View.

It should be noted that once the element is outside the screen, the user cannot see it, which is quite different from HTML yo. Mini Program yo is specially used for scrolling views. If you want the interface to be a freely scrolling interface (such as a list, etc.), you can use the scroll-view view, resize it to the entire screen in WXSS, and set scroll-y (scroll up and down) or scroll-x (scroll left and right) to true

Note that you cannot use DOM to control the WXML element directly in Mini Program. If you need to update your data, you should use the data binding and element rendering methods provided by WXML. In addition, 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, the developer can update the information using the data binding method. The bound data can be updated not only when it is loaded, but also as a function in the JS main program, and the update can also be reflected in the bound data on the interface.

3. Conditional rendering and list (loop) rendering

Conditional rendering is suitable for pages that are prompted by unexpected conditions (such as prompting when lists or details cannot be loaded, and so on). Its rendering comes with a trigger condition, that is, to render the page when the condition is met, otherwise ignore or render the code on the other side. The variables in the judgment condition contained in the two curly braces are declared in data in the JS code of the main program. Assemble the rendering code of the same element. The cyclic data can be written into data as an array for WXML to access. After rendering, the change of rendering judgment condition can affect the change of interface.

4. Templates and references

WXML supports the use of templates and references to reduce code size. A template is 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 an entire page reference, you need to use include.

5. Style

With WXSS stylesheets, developers can define element styles in WXML. WXSS, like CSS code, can use selectors to select elements directly, and you can also define the id and class of elements directly in WXML to facilitate style definition in WXSS files.

6. User actions and event responses

Since Wechat does not use HTML, it cannot detect user click events by adding a hyperlink (an element). For elements that need to listen for click events, you should bind them in WXML using either the bindtap attribute or the catchtap attribute. In addition to one click, Wechat also provides event responses such as pressing and holding, starting to touch, and letting go. After binding an event in WXML, it can be used in the main program. There are also corresponding events in other API, which would like to be found in WeChat Mini Programs's official documents. When you need to jump between Mini Program pages, you should use the wx.navigateTo () method.

Note that with regard to the page level jump, Wechat limits the level jump to 5 layers. Be careful not to exceed the corresponding limits when developing.

Network request mode

Network access to Mini Program supports three request methods: HTTP connection, WebSocket, and file sending and receiving connection.

HTTP connection: the result is returned directly after the request, and the connection ends.

Socket connection: persistent connection, when one party actively closes the connection, the connection ends

File sending and receiving connection: as the name implies, a connection that occurs during file transfer. This connection is required for both the recorded voice and the selected photos.

Note that access to the network through Mini Program requires that the server must support an HTTPS connection and the port must be 443. At the same time, Mini Program can only access the server address that the developer set when registering Mini Program.

Similarities and differences between development language and "front-end three-piece set"

HTML and WXML: there is a big difference between the two. If you haven't been exposed to Android development before, you may feel a bit of a headache. In fact, WXML is more like an interface XML description file in Android development, suitable for the construction of program interfaces, while HTML tends to show articles (which 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, so they can be used directly.

JS file: the JS file of Mini Program is almost no different from the JS used by front-end developers, except that the JS of Mini Program adds some API interfaces of Wechat and removes some unnecessary features (such as DOM).

In view of it, Mini Program is completely on a par with the front-end development with the lowest learning cost, but this does not mean that all developers can migrate seamlessly. If you are moving from front-end development to Mini Program, you should pay attention to these two points:

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

2. Although Mini Program uses the front-end language, it does not mean that you can continue to use the development ideas for development. Mini Program's requirements for front-end development have been upgraded from [building interface] to [developing complete applications], and front-end development needs to be changed in consciousness.

At this point, the study of "which three things WeChat Mini Programs needs to know before development" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.