1) Preparation

a) Complete the registration process to obtain the Mini Program AppID. After successful registration, log in to the Mini Program console on Weixin Official Accounts Platform by scanning the QR code. You can find the AppID under "Development & Services -> Development Settings" or "Account Profile Photo -> Account Settings -> Basic Settings -> Account Information".

Note: The Mini Program AppID serves as an identifier and will be needed in various places. It is different from the AppID for Service Accounts or Subscription Accounts.

b) Bind developers: Log in to the Mini Program console on Weixin Official Accounts Platform  by scanning the QR code. Go to "Management -> Member Management -> Add Member" to bind developers. For details on member permissions, see Mini Program Member Management | Weixin Open Community.

i) Mini Programs that are verified but not yet launched, or not verified but already launched, can bind up to 60 project members and 60 temporary members.

ii) Verified and launched Mini Programs can bind up to 90 project members and 90 temporary members.

c) Install the development tools: Download and install  Weixin Developer Tools for developing and debugging Mini Programs.

2) Creating a Mini Program project

a) On the login page, use the Weixin account of the developer for the AppID to scan and access the developer tools. This Weixin ID will be able to use the developer tools for Mini Program development and debugging. 

b) Select an empty directory or a non-empty directory that contains either app.json or project.config.json. If you choose an empty directory, you can also opt to generate a simple project within it.

c) Select the backend service mode. Weixin Cloud Development allows you to use cloud functions, cloud databases, cloud storage, and Weixin Cloud Hosting without needing a server.

d) The developer tools offer various templates. You can also create a Mini Program using one of the templates.

e) Click "Create" to complete the creation of the Mini Program.

3) Main page development: The main page of a Mini Program includes a menu bar, a toolbar, an emulator, a directory tree, an editor, and a debugger.

a) Menu bar: Serves as the main entry point for global operations and offers features such as account switching, access to help documents, tool debugging, and development mode switching.

b) Toolbar: Allows for easy account switching, access to visual programming mode, management of cloud development resources, selection of development modes, and code uploading and version management.

c) Emulator: Simulates the performance of Mini Programs in the Weixin app, allowing developers to test compatibility and functionality on different devices.

d) Directory tree: Shows the file structure, making it easy to browse and find specific files.

e) Editor: Provides space for code writing and editing, supporting multiple programming languages and file formats.

4) Code editing

a) The editor allows you to write code and perform basic operations like adding, deleting, and renaming files.

b) The directory tree displays the project's file structure. By right-clicking and selecting "New Page", the necessary files for a page are automatically generated.

c) The development page includes different file formats for various features. Weixin Mini Programs support five file types: WXML (page structure), WXSS (page styling), JS (script logic), JSON (configuration files), and WXS (scripts for direct execution in WXML). Only UTF-8 encoding is supported on iOS.

d) The tools provide an auto-save feature to ensure that your code is not lost when closing one of the tools or switching projects.

e) If "Auto-compile Mini Program on File Save" is enabled in the Settings (Settings - Edit Settings - Auto-compile on Save), you can preview changes in real-time via the simulator when compiled files are modified.

f) An enhanced auto-completion feature is provided to support fast coding in JS, WXML, and JSON files, including API completion, code template support, and real-time prompts.

g) When a Git repository exists in the Mini Program project directory, the editor can display Git status, showing information on file modifications, additions, conflicts, and deletions.

5) Debugging and preview

a) During the development process, test and debug to ensure that the Mini Program's functionality and user experience meet expectations.

b) Developers can compile code on the emulator to test Mini Programs in the Weixin app. This lets them see how the Mini Program works in real time.

c) The emulator allows the developers to simulate operations such as muting and returning to the chat window, helping them test how the Min Program works in different situations.

d) Use the emulator with customizable compilation to compile code using the shortcut Ctrl (⌘) + B and automatically refresh the preview in the emulator.

e) The developer tools also provide a rich set of debugging tools including Wxml, Console, Sources, Network, Appdata, Storage, Sensor, and Trace.  

For details, see Mini Program Debugging Documentation.

f) Based on debugging results, enhance the Mini Program's performance and user experience by reducing network requests, optimizing code logic, and improving page load speed.

6) Enhancing Mini Program Functionality

a) Continue developing and refining other pages and features of the Mini Program based on requirements.

b) Use the APIs provided by Weixin Mini Programs for data interaction, network requests, and local storage operations.

c) Accelerate the development process by using component libraries and open-source libraries, such as the  WeUI UI component library.

Please note that the above is a brief outline of the Weixin Mini Program development process. The specific development process may vary depending on project requirements and complexity. During development, see the official Weixin Mini Program documentation for more detailed guidance and assistance.

For more information about developer tools guidance and introduction, see:

Mini Program Developer Documentation: Introduction to Developer Tools

If you have any questions, please refer to the official documents or ask in the community, we will get back to you soon.