1. Download of Mini Program Development Tool
1.1 Installation of Mini Program Development Tools:
Click on the link: WeChat applet development tool download site .
Installation diagram of applet development tools:
2. Configuration of the global app.json file
Documents you can refer to for the production of Mini Programs: Link: Official WeChat Mini Program Documents .
2.1 Examples of using official Mini Program documents:
The configuration in the global app.json file should be used in the picture "Global Configuration-Framework-Options in Configuration Items"
2.1.1 Examples of using global pages configuration
2.1.2 Examples of using global window configuration
2.1.3 Examples of using global tabBar configuration
3. (Single) page configuration
3.1 The addition of new pages:
3.2 New page configuration
When configuring a new page, you should refer to the official WeChat applet documentation for configuration.
Link: WeChat applet page configuration reference . Examples of pictures are as follows:
4. Data Binding
wxml file:
Basically, the usage is similar to that of vue, with only a slight difference, such as the representation method of view tags and checked attribute values.
The corresponding js file:
5. Calculation
wxml file
Note:
(1) Do not ignore the double curly braces of the checked attribute value
(2) In the WeChat applet development software: if there is a space between the quotation marks and the curly braces, the whole will be parsed as a string! ! !
Corresponding js file
6. List rendering
note
wxml file
Corresponding wxss file:
7.wxss related
Note : In the development tools of the WeChat applet, wxml does not need to specifically introduce wxss files, js files, etc., because these files have been automatically associated.
7.1 Size and width adaptation (rpx)
That is, the size of the style changes with the size of the mobile phone screen.
Image example of wxss file:
7.2 Import of outreach styles
Three steps:
The first step: create an external style file wxss
as shown in the figure
Step 2: Import external styles in the target page as shown in the
figure
The third step: use the external style in the wxml file of the target page as shown in the
figure
7.3 Inline style
Note : The "//" symbol cannot be used for comments in wxss files, and the "/**/" symbol should be used for comments.
Two kinds:
7.3.1 Define directly in the label: style="...";
Picture example:
7.3.2 Define the style in wxss, class={ {xxx}} xxx is the variable name.
Step 1: Define the class attribute variable in the wxml file
Step 2: Assign the variable in the js file of the target page
Step 3: Set relevant styles in the wxss file of the target page
8. Global style and local style
Note :
The global style (under the pages file) will be applied to all pages in the pages file; the
local style will only apply to local pages
9. Common components in WeChat Mini Programs
Link: WeChat applet reference document . The
following are only commonly used components, which have many attributes, which can be viewed in the link on the previous line.
9.1 view
9.2 text
9.3 image
1. The iamge tag is different from the img tag in js.
2. It has a default width and height: 320x240
3. Does not support the writing of the background image in the previous web
4. Pay special attention to the mode attribute in the image tag (the mode of image cropping and zooming) )