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
1. Homepage
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" |
Animation instances can call the following methods to describe animations. After the call is completed, they will return to themselves and support chain call writing.
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment