The use of mini-program development tools

Basic Introduction to Mini Program Development Tools

The WeChat Mini Program Development Tools is an official integrated development environment (IDE) that supports code editing, debugging, previewing, and publishing. The tool includes a built-in simulator to view the mini program's runtime effects in real time, along with comprehensive debugging tools to help developers quickly identify issues. The tool supports both Windows and macOS systems. After downloading and installing, users can log in via WeChat QR code scanning.

The interface is divided into four main areas: the editor, simulator, debugger, and project directory tree. The editor supports syntax highlighting and auto-completion, the simulator allows switching between different device models and network environments, and the debugger provides panels such as Console, Sources, and Network.

Project Creation and Configuration

When creating a new project, users can choose between a quick-start template or a blank template. The quick-start template includes a basic directory structure and sample code, making it ideal for beginners. After project creation, the following key files are automatically generated:

• app.json: Global configuration file
• app.js: Mini program logic
• app.wxss: Global styles
• project.config.json: Project configuration file

// Example of app.json  
{  
  "pages": [  
    "pages/index/index",  
    "pages/logs/logs"  
  ],  
  "window": {  
    "navigationBarTitleText": "Demo",  
    "navigationBarBackgroundColor": "#ffffff"  
  }  
}  

In project configuration, special attention should be paid to the project.config.json file, which stores personalized settings such as the app ID and project configurations. This file should be included in version control to ensure team members share the same development environment.

Code Editing Features

The development tool provides powerful code editing capabilities, including:

1. Syntax Highlighting: Supports WXML, WXSS, JS, and JSON files.
2. Code Completion: Intelligent suggestions for components or APIs.
3. Real-time Compilation: Automatic recompilation upon saving files.
4. Error Checking: Real-time syntax error and common issue detection.

When writing WXML, the tool offers auto-completion for component attributes:

<!-- Typing "v-" prompts attributes for the view component -->  
<view   
  hover-class="none"  
  hover-stop-propagation="false"  
  hover-start-time="50"  
></view>  

For JavaScript files, the tool supports ES6 syntax and provides code hints for Mini Program APIs:

// Typing "wx." displays all available APIs  
wx.request({  
  url: 'https://example.com/api',  
  success(res) {  
    console.log(res.data)  
  }  
})  

Debugging Features Explained

The development tool offers multiple debugging methods:

Simulator Debugging

The simulator supports switching between different device models (iPhone/Android), screen orientations, and DPI settings. The "Compilation Conditions" feature allows setting startup pages and parameters to simulate various entry scenarios.

Debugger Panels

1. Console Panel: View log output and execute JavaScript code.
2. Sources Panel: Debug JavaScript code and set breakpoints.
3. Network Panel: Monitor network requests.
4. AppData Panel: View page data in real time.
5. Storage Panel: Manage local cache.

// The Console panel allows direct interaction with the mini program context  
getApp()  // Retrieve the App instance  
getCurrentPages()  // Retrieve the current page stack  

Real Device Debugging

By clicking the "Real Device Debugging" button, users can preview and debug the mini program in real time on a mobile device via WeChat QR code scanning. During real device debugging, operation logs and error messages from the device are synchronized to the debugger in the development tool.

Performance Optimization Tools

The development tool includes a performance panel for analyzing mini program runtime performance:

1. CPU Profiler: Records JavaScript execution time.
2. Memory: Monitors memory usage.
3. Layer: Displays view hierarchy.
4. FPS: Tracks frame rate changes.

Common performance issues identified through the panel include:

• Excessive setData calls
• Large data transfer volumes
• Complex page structures causing rendering performance degradation

// Not recommended: Frequent setData calls  
for(let i=0; i<100; i++) {  
  this.setData({count: i})  
}  

// Recommended: Batch data updates  
let updates = {}  
for(let i=0; i<100; i++) {  
  updates['count'] = i  
}  
this.setData(updates)  

Cloud Development Integration

For mini programs using cloud development, the tool provides additional features:

1. Local Cloud Function Debugging: Test and debug cloud functions locally.
2. Database Simulation: Provides a local database environment.
3. File Storage Management: Upload and manage cloud storage files.
4. Cloud API Testing: Test cloud API calls.

After creating a cloud function, users can test it locally:

// Example of calling a local cloud function  
wx.cloud.callFunction({  
  name: 'addData',  
  data: {a: 1, b: 2},  
  success: res => {  
    console.log(res.result)  
  }  
})  

Version Management and Publishing

The development tool integrates version management features:

1. Upload Code: Upload code as a development version.
2. Experience Version: Generate a QR code for testing.
3. Submit for Review: Directly submit for review.
4. Publish: Release the approved version.

When uploading code, users must specify a version number and project notes, which are displayed in the mini program management backend. It is recommended to perform a "Preview" test before uploading to ensure basic functionality.

Custom Preprocessing

Custom preprocessing can be configured via project.config.json:

{  
  "setting": {  
    "urlCheck": false,  
    "es6": true,  
    "postcss": true,  
    "minified": true,  
    "newFeature": true  
  },  
  "scripts": {  
    "beforeCompile": "",  
    "beforePreview": "",  
    "beforeUpload": ""  
  }  
}  

These configurations enable:

• Disabling URL domain verification (for development)
• Enabling ES6-to-ES5 conversion
• Automatic code minification
• Custom compilation script execution

Plugin Development Support

For mini program plugin development, the tool provides specialized support:

1. Plugin Project Type: Select "Plugin Project" during creation.
2. Plugin Debugging: Debug plugins independently.
3. Plugin Referencing: Test plugins in host mini programs.

Plugin projects have a unique directory structure, including a plugin folder and specific configuration files:

plugin/  
  ├── components/  // Plugin components  
  ├── pages/       // Plugin pages  
  └── plugin.json  // Plugin configuration file  

Multi-Project Management

The development tool supports opening multiple mini program projects simultaneously. Users can quickly switch between projects via the "Project" menu. Each project retains its last-opened state, including:

• Open editor files
• Simulator settings
• Debugger panel states

For related projects (e.g., main package and subpackages), users can associate them via the "Add Project" feature for simultaneous development and debugging.

Shortcuts and Efficiency Tips

Mastering shortcuts can significantly improve development efficiency:

• Ctrl+S / Cmd+S: Save file
• Ctrl+F / Cmd+F: Search within file
• Ctrl+Shift+F / Cmd+Shift+F: Global search
• Ctrl+P / Cmd+P: Quick file open
• Ctrl+ / Cmd+: Zoom in simulator
• Ctrl- / Cmd-: Zoom out simulator

Other useful tips:

• Right-click files for context menus
• Drag files to rearrange
• Hold Alt and click to open files in new tabs
• Use the color picker in .wxss files for quick color selection

Common Issue Troubleshooting

Common issues and solutions during development:

1. Unable to Preview or Upload

   • Verify the app ID is correct
   • Ensure the logged-in account has project permissions
   • Check if the development tool is up to date

2. Styles Not Applying

   • Verify selector correctness
   • Confirm style files are properly referenced
   • Check for higher-priority style overrides

3. Data Binding Failure

   • Ensure data is set via setData
   • Verify data paths are correct
   • Check console for error messages

// Example of common data binding errors  
Page({  
  data: {list: []},  
  onLoad() {  
    // Incorrect: Direct assignment  
    this.data.list = [1,2,3]  
      
    // Correct: Use setData  
    this.setData({list: [1,2,3]})  
  }  
})  

Extensions and Plugins

The development tool supports plugins for extended functionality, such as:

• Code Formatting Plugins: Beautify code
• API Documentation Plugins: Quick API reference
• Mock Data Plugins: Generate test data
• Internationalization Plugins: Manage multilingual resources

Plugins can be managed via "Settings" -> "Extensions." Some plugins may require a tool restart to take effect.