Summarize and share the development steps of WeChat mini programs

This article brings you relevant knowledge aboutWeChat mini program development. It mainly introduces the steps of WeChat mini program development, including preparation work, framework introduction, program development and design specifications. Related questions, I hope it will be helpful to everyone.

【Related learning recommendations:小program development tutorial】

This article briefly describes the steps to develop WeChat applet, please refer to it for details WeChat Development Document

1. Preparation

1: Register https://mp.weixin.qq.com/wxopen/waregister?action=step1
Have you ever registered for WeChat public? Register a WeChat official account using the platform's email address, apply for an account, fill in the information and submit the corresponding materials according to the guidelines, and you can have your own mini program account. After registration is completed, log in.

2: Log in to https://mp.weixin.qq.com

We can see the AppID of the mini program in the menu "Settings" - "Development Settings". The AppID of the mini program is equivalent to an ID card on the mini program platform. You will use the AppID in many places later (note that this must be different from the AppID of the service account or subscription account). After we have a mini program account, we need a tool to develop mini programs.
Develop according to the official tutorial https://developers.weixin.qq.com/miniprogram/dev/framework/

3: Install development tools

Go to the developer tool download page, Download the corresponding installation package according to your own operating system and install it. For a more detailed introduction to developer tools, please see "Introduction to Developer Tools". Open the mini program developer tool, use WeChat to scan the QR code to log in to the developer tool, and get ready to develop your first mini program!
For relevant information about development tools, you can learn more through [WeChat Developer Tools]

4: Open the first mini program

Create a new project, select the mini program project, and select code storage The hard drive path, fill in the AppID of the applet you just applied for, give your project a nice name, and finally, check "Create QuickStart Project" (Note: You must choose an empty directory to have this option) , click OK, and you will get your first applet. Click Compile on the top menu to preview your first applet in the IDE.

5: Compilation Preview

Click the compile button on the tool. You can see the performance of this small program in the simulator interface on the left side of the tool. You can also click the preview button to scan through WeChat. Scan to experience your first mini program on your phone.

The content of the above sections can be viewed in [Start]-[Start] in WeChat Open Documents.

2. Framework introduction

The goal of the mini program development framework is to allow developers to develop services with native APP experience in WeChat in the simplest and most efficient way possible.

The entire mini program framework system is divided into two parts:Logic layer(App Service) andView layer(View). The applet provides its own view layer description language WXML and WXSS, as well as a JavaScript-based logic layer framework, and provides data transmission and event systems between the view layer and the logic layer, allowing developers to focus on data and logic.

Responsive data binding
The core of the framework is a responsive data binding system that allows data and views to be synchronized very simply. When modifying data, you only need to modify the data in the logical layer, and the view layer will update accordingly.

Page Management
The framework manages the page routing of the entire mini program, enabling seamless switching between pages and giving the page a complete life cycle. All the developer needs to do is to register the page's data, methods, and life cycle functions into the framework, and all other complex operations are handled by the framework.

Basic components
The framework provides a set of basic components. These components come with WeChat-style styles and special logic. Developers can create powerful components by combining basic components. WeChat applet.

Rich API
Framework provides a rich set of WeChat native APIs, which can easily activate the capabilities provided by WeChat, such as obtaining user information, local storage, payment functions, etc.

3. Program development

When you learn HTML CSS js and read the WeChat development documentation, you can easily start developing WeChat mini programs~~

• Entry
  Each applet needs to call the App method in app.js to register the applet instance, bind the life cycle callback function, error monitoring and page non-existence monitoring functions, etc.

// app.jsApp({ onLaunch (options) { // Do something initial when launch. }, onShow (options) { // Do something when show. }, onHide () { // Do something when hide. }, onError (msg) { console.log(msg) }, globalData: 'I am global data'})

The entire mini program has only one App instance, which is shared by all pages. Developers can obtain the globally unique App instance through the getApp method, obtain data on the App, or call functions registered by the developer on the App.

// xxx.jsconst appInstance = getApp()console.log(appInstance.globalData) // I am global data

• 全局配置
  小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
  详见【全局配置】

• 页面配置
  每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
  详见【页面配置】

• 小程序生命周期
  注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
  详细api详见https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

• 页面生命周期
  注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
  生命周期对象详见https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

• 组件
  自带组件库weUI

• API
  丰富的api
  https://developers.weixin.qq.com/miniprogram/dev/api/

详细信息可具体参考《小程序开发指南》

【相关学习推荐：小程序开发教程】

The above is the detailed content of Summarize and share the development steps of WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!