1. Column introduction
The main content of this column is an introduction to the development process of common functions of WeChat Mini Programs, including the packaging of common components for developing WeChat Mini Programs, the development of common functions, etc., providing source codes, videos explaining the development process, and complete courses, etc.
Component encapsulation: drop-down selection component, image upload component, video upload component, rich text component, list interface component, filter component, multi-select box component, radio box component, table component, etc.
Commonly used functions: login registration, authorization interface, product details, product list, personal information, modify information, modify password, about us, FAQ, article details, form interface, chart interface, etc.
&
2. Contents of this chapter
This chapter mainly introduces the basic knowledge of WeChat Mini Program development, including related preparations before development, common tools, precautions during development, project creation process, directory structure after project creation, etc.
The basic development knowledge of Mini Programs can be learned through the official documents of Mini Programs. View: Official Documents of Mini Programs
In addition, it also provides courses on the basic knowledge of small program development, including basic knowledge of small program development, component packaging, use of common interface components and common function realization, etc., as follows: 1. CSDN course
: https://edu.csdn.net/ course/detail/37977
2. 51CTO course: https://edu.51cto.com/course/100044719.html
3. B station video collection:
Pull down and select component packaging under the collection of native development functions of WeChat applets Section 1: Component planning
4. Xigua video collection: https://www.ixigua.com/7188178861195002407
5. Baidu video collection: https://baijiahao.baidu.com/builder/preview/s?id=1754693753661777020
Note: CSDN and 51CTO courses are relatively complete and specific, and provide corresponding source code and Q&A services. Bilibili and the source code of this column require additional charges, and no special Q&A service is provided.
3. Basic knowledge
WeChat Mini Programs
Mini Programs are a new open capability that allows developers to quickly develop a small program. Mini Programs can be easily obtained and disseminated within WeChat, and at the same time have an excellent user experience.
WeChat Mini Program development needs to apply for an account first. Accounts include personal accounts and enterprise accounts. Personal accounts do not need to be authenticated, and enterprise accounts need to be audited and authenticated.
Some interfaces of personal accounts cannot be used, and some interfaces need to be applied separately to use even after enterprise certification. The corresponding qualifications are required when applying, mainly audio and video playback, location-related interfaces, etc. The specific specifications are as follows:
When registering the Mini Program, you need to fill in the email address, and you can register through the email address. After the email address is activated, you need to register the information. When registering, you can choose a personal account or a business account, and you need to bind the manager’s WeChat account. Later, you can use the bound manager’s WeChat Account to log in to the management applet. Specific process reference: Mini Program Access Guide
3.1 Official website:
WeChat mini program official website
3.2 Documentation:
WeChat Mini Program Development Documentation
3.3 Others:
After the Mini Program is registered, you need to configure basic information, including the basic information of the Mini Program, server information, and developer information.
- Improve Mini Program Information
Fill in the basic information of the Mini Program, including name, logo, etc.
- Obtain APPID
Obtain the appid and sercret information of the applet, which is needed for subsequent development. In the development settings, you can configure server-related information, including service ip address, domain name and other information.
Please refer to the official website document for other related operation procedures of staff configuration : Mini Program Access Guide
.
3.4 Precautions
- Interface Design Specifications
The Mini Program officially provides a set of interface design specifications. For details, please refer to: Mini Program Interface Design Specifications . The main contents are as follows: friendly and polite, clear and clear, convenient and elegant, uniform and stable, visual norms, and provide special design resources: design resources
In addition, the applet also provides a special ui component library WeUI, including form components, basic components, operation feedback, navigation-related components, search-related components, hierarchy specifications ,
etc. Configuration guide, which mainly introduces the adaptation method, layout method, design guidelines, etc. For details, refer to: Adaptation guide for small programs and large screens
- The platform operation specification
applet has clear operation specifications, including various codes of conduct, dispute resolution, user privacy, special interface restrictions, industry category restrictions, etc., and has relatively strict restrictions on some functions and interfaces that design user privacy and experience Description, mainly including restrictions on location information, restrictions on audio and video related interfaces, restrictions on user development information modification interfaces, etc. For details, please refer to WeChat Operation Specifications: WeChat Operation Specifications
- Subject Qualification Issues
Mini Programs require specific qualifications when opening corresponding industries. Some interfaces require specific industries to be used, such as video, background positioning, background playback and other interfaces. For the qualification specifications required for specific categories, please refer to: Service categories open to Mini Programs head
4. Development tools
There are special official development tools for WeChat Mini Programs. The download address is: WeChat Developer Tools . This development tool can be used to develop WeChat Mini Programs, mini games, plug-ins, and WeChat web development, etc.
5. Project creation
When creating a new WeChat project, you can choose the project type: small program, small game, plug-in, etc., and you can also choose the specific development method used, including cloud development, general development, etc.
When creating a project, you can choose a specific development language, including JavaScript and TypeScript:
6. Structure directory
After the applet is created, the project framework will be automatically generated, including the pages file, the utils folder and project configuration related files. You can add the static folder to store static resources, and add the components folder to store the applet components. The specific folder The effect is as follows:
| folder | illustrate |
|---|---|
| pages | Store the code directory of the applet project page |
| utils | Directory for storing applet tools and methods js files |
| static | Store the directory related to the static resources of the applet, such as pictures, videos, etc. |
| components | Store the code directory of applet custom components |
| app.js | applet logic |
| app.json | Mini Program Public Configuration |
| app.wxss | Mini Program public style sheet |
For others, please refer to the official website: directory structure
7. References
Mainly refer to relevant documents on the official website of the WeChat Mini Program, and some screenshots are from the official website of the Mini Program and the help document interface.