Home > Article > WeChat Applet > Share a personal experience in developing small programs
WeChat mini programs have been out for a while. I have recently written several WeChat mini program projects. Today I will talk about my feelings.
First develop a WeChat mini program, the most important thing is to operate it for the company, because when applying for appid (WeChat mini program ID number), you need to fill in relevant company certification information such as business license Wait
The next step is to use a QQ account or WeChat ID that has not yet opened a public account to register a WeChat mini program account.
Finally, download the WeChat applet development tool.
Because here, we focus more on how to develop some apps rather than the Kepu WeChat applet, so we will not explain too much here. For detailed instructions, you can go to the official website help documentation.
First of all, let’s explain and develop our own project step by step. Below is a screenshot of a WeChat app
After seeing the picture above, friends have a general understanding. This is in the debugging tool, and some effects are not as good as on the real machine.
Due to the development, I thought the picture was not very smooth. In fact, it was completely beyond my expectation. The animation effect is very smooth, comparable to ios and andriod apps. I will talk about developing other apps when I have time in the future. Related examples.
Before introducing this article, it is assumed that the user has read the relevant documents of the WeChat applet.
This project is basically based on the original file structure of WeChat, and there is no extra file structure to add, because the WeChat applet stipulates that the project file size cannot exceed 1M, requiring us to try our best to Compressed applet code or other image files, etc. The following is a screenshot of the overall file structure of the WeChat app
1.app.js is mainly globally public The file where the js method declaration and call are located
2.app.json is the entire configuration file of the mini program, so some pages require registration here, otherwise access is not allowed (as shown in the figure below)
3.app.wxss is the global css file of the mini program. It is best to write public css here.
4.pages corresponds to all pages. Each page can add four types. Type files, .json, .wxss, .wxml, .js (as shown in the figure below)
5.utils is where our public js is stored, because the WeChat applet requires that in each js file The method cannot be directly referenced or called, and must be exported using the module.exports method, so that the .js file under pages can call the js method we wrote here. Special attention should be paid to this point
1)app.json page configuration and registration:
2)pages page structure:
Let’s start to explain each page in detail
The homepage is divided into four files , as shown in the figure below, the specific page functions have been mentioned above.
Let’s take a look at the effect of index.wxml
The title “Let’s Luck” at the top is It is defined in the index.json file. Each file can be defined with a different .json. Of course, the code can also dynamically change it.
It’s very simple, the title is just like this Simple appears.
1) Next, look at the horizontal scrolling banner,
Type | Default value | Description | |
---|---|---|---|
Boolean | false | Whether to display panel indicator dots | |
Boolean | false | Whether to switch automatically | |
Number | 0 | The index of the current page | |
Number | 5000 | Automatic switching time interval | |
Number | 500 | Sliding animation duration | |
Boolean | false | Whether to use connecting sliding | |
EventHandle | The change event will be triggered when current changes, event.detail = {current: current} |
Parameter | Type | Required | Description |
---|---|---|---|
Integer | No | Animation duration, unit ms, default value 400 | |
String | No | Define the effect of the animation, the default value is "linear", valid values: "linear", "ease", "ease-in", "ease-in-out", "ease-out", " step-start","step-end" | |
Integer | No | Animation delay time, unit ms, Default value 0 | |
String | No | Set transform-origin, the default is "50% 50% 0" |
Style:
Parameters | Description | |
---|---|---|
value | Transparency, parameter range 0~1 | |
color | Color value | |
length | Length value, if Number is passed in, px is used by default, other custom units can be passed in The length value of | |
length | length value, if Number is passed in, px is used by default, and the length of other custom units can be passed in Value | |
length | Length value, if Number is passed in, px is used by default, and length values in other custom units can be passed in | |
length | The length value, if Number is passed in, px is used by default, and length values in other custom units can be passed in | |
length | The length value, if Number is passed in, px is used by default, and length values in other custom units can be passed in | |
length | The length value, if Number is passed in, px is used by default, and length values in other custom units can be passed in |
Method | Parameters | Description |
---|---|---|
rotate | deg | The range of deg is -180~180, rotate one deg angle clockwise from the origin |
rotateX | deg | The range of deg is -180~180, rotate one deg angle on the X-axis |
rotateY | deg | The range of deg is -180~180, rotate a deg angle on the Y axis |
rotateZ | deg | The range of deg is -180~180, on Rotate the Z axis by one deg angle |
rotate3d | (x,y,z,deg) | Same as transform-function rotate3d |
Zoom:
Method | Parameters | Description |
---|---|---|
scale | sx,[sy] | With one parameter, it means scaling the sx multiple on the X-axis and Y-axis at the same time; with two parameters, it means scaling the Scale sx multiples on the X-axis and sy multiples on the Y-axis |
scaleX | sx | Scale sx multiples on the |
sy | Scale the sy multiple on the Y axis | |
sz | Scale sy multiples on the Z axis | |
(sx,sy,sz) | Scale sx multiples on the X axis, on the Y axis Scale the sy multiple, scale the sz multiple on the Z axis |
Parameter | Description | |
---|---|---|
When there is one parameter, it means in The X-axis offset is tx, the unit is px; when there are two parameters, it means the X-axis offset is tx, and the Y-axis offset is ty, the unit is px. | translateX | |
Offset tx on the X axis, unit px | translateY | |
Offset tx on Y axis, unit px | translateZ | |
Offset on Z axis Move tx, unit px | translate3d | |
Offset tx on the X axis, offset ty on the Y axis , offset tz on the Z axis, unit px |
Description | ||
---|---|---|
Parameter range -180~180; When there is one parameter, the Y-axis coordinate remains unchanged, and the X-axis coordinate is tilted clockwise by ax degrees; when there are two parameters, the X-axis is tilted by ax degrees, and the Y-axis is tilted by ay degrees | skewX | |
Parameter range -180~180; Y-axis coordinate remains unchanged, X-axis coordinate is tilted clockwise by a degree | skewY | |
Parameter range -180~180; Matrix transformation: |
matrix | (a,b,c,d,tx,ty) | |
---|---|---|
Same as transform-function matrix3d | ||
The above is the detailed content of Share a personal experience in developing small programs. For more information, please follow other related articles on the PHP Chinese website!