This article brings you relevant knowledge about WeChat mini programs , which mainly introduces issues related to the host environment. WeChat mobile is the host environment for mini programs. Mini programs can implement many ordinary web pages with the help of the capabilities provided by the host environment. Let’s take a look at the functions that cannot be completed. I hope it will be helpful to everyone.
[Related learning recommendations: Mini program learning tutorial ]
Mini program hosting environment
WeChat mobile is the host environment for mini programs. With the help of the capabilities provided by the host environment, mini programs can realize many functions that ordinary web pages cannot complete. For example: the mini program calls the API provided by WeChat to implement functions such as QR code scanning and payment.
The hosting environment of the mini program includes:
communication model
Operating mechanism
components
API
communication model
1. The subject of communication
The main body of communication in the applet is the rendering layer and the logic layer, among which:
WXML templates and WXSS styles work in the rendering layer
JS scripts work at the logic layer
2. Communication model of mini program
The communication model of the mini program is divided into two parts:
Communication between rendering layer and logic layer
Communication between the logic layer and third-party servers
Both are forwarded through the WeChat client
Operating mechanism
1. The startup process of the mini program
Download the code package of the mini program locally
Parse app.json global configuration file
Execute the app.js applet entry file and call App() to create an applet instance.
Rendering applet homepage
Mini program startup completed
2. Page rendering process
Load the .json configuration file of the parsed page
Load the .wxml template and .wxss style of the page
Execute the .js file of the page and call Page() to create a page instance
Page rendering completed
components
1. Classification of components in mini programs:
The components in the mini program are also provided by the host environment, and developers can quickly build beautiful page structures based on the components. Officially, the components of mini programs are divided into 9 categories, namely:
-
view container
-
Basic content
-
form component
-
Navigation component
-
body component
-
map map component
-
canvas canvas component
-
Open capabilities
-
Accessibility
2. Commonly used view container components
view
Normal view area
Similar to a div in HTML, it is a block-level element
Commonly used to achieve page layout effects
For example: use flex to implement horizontal layout.
wxml code:
wxss code:
Realization effect:
scroll-view
-
scrollable view area
-
Commonly used to achieve scrolling list effects
Use scroll-view to achieve the effect of scrolling up and down
wxml code:
Modified wxss code:
Realization effect:
swiper 和 swiper-item
Carousel container component and carousel item component
Use these two components to achieve the carousel effect:
wxml code:
wxss code:
Realization effect:
3. Commonly used basic content components
text
text component
Similar to the span tag in HTML, it is an inline element
Realize the effect of long pressing the selected text content
rich-text
The rich text component supports rendering HTML strings into WXML structures
Render HTML strings into corresponding UI structures
4. Other commonly used components
button
button component
Richer functions than buttons in HTML
Various functions provided by WeChat can be called through the open-type attribute (customer service, forwarding, obtaining user authorization, obtaining user information, etc.)
image
Picture component
The default width of the image component is about 300px and the height is about 240px.
navigator
Page navigation component
Similar to a link in HTML, realize page jump
5.API
The APIs in mini programs are provided by the host environment. Through these rich mini program APIs, developers can easily call the capabilities provided by WeChat, such as realizing payment, QR code scanning and other functions.
Three major categories of mini program APIs:
Event listening API
-
Features: Starting with on, used to monitor the triggering of certain events
-
Example: wx.onWindowResize(function callback) listens for window size change events
Sync API
-
Feature 1: APIs ending with Sync are all synchronous APIs
-
Feature 2: The execution result of the synchronous API can be obtained directly through the function return value. If an execution error occurs, an exception will be thrown.
-
Example: wx.setStorageSync('key', 'value') writes content to local storage
Asynchronous API
-
Features: Similar to the $.ajax(options) function in jQuery, it needs to receive the result of the call through success, fail, and complete
-
Example: wx.request() initiates a network data request and receives data through the success callback function