Mini Program Academy

English

中文

English

中文

Theme

个人中心

暂无收藏内容

WeChat Developer Tools Guide ​

WeChat Developer Tools is the official integrated development environment (IDE) for creating WeChat Mini Programs. This comprehensive guide will walk you through the installation, configuration, and effective use of WeChat Developer Tools to develop, debug, and publish your mini programs.

Installation and Setup ​

System Requirements ​

Before installing WeChat Developer Tools, ensure your system meets the following requirements:

  • Windows: Windows 7 or later, 64-bit
  • macOS: macOS 10.10 or later
  • Linux: Currently not officially supported

Download and Installation ​

  1. Visit the official WeChat Developer Tools download page
  2. Download the appropriate version for your operating system
  3. Run the installer and follow the on-screen instructions
  4. Launch WeChat Developer Tools after installation

Initial Configuration ​

When you first launch WeChat Developer Tools, you'll need to:

  1. Scan the QR code with your WeChat account to log in
  2. Accept the terms of service
  3. Configure default settings for your development environment

Creating a New Project ​

Project Types ​

WeChat Developer Tools supports several project types:

  • Mini Program: Standard WeChat Mini Program
  • Mini Game: WeChat Mini Game
  • Plugin: Mini Program Plugin
  • Cloud Base: Mini Program with Cloud Development

Creating a Mini Program Project ​

To create a new Mini Program project:

  1. Click "Create Project" on the start screen
  2. Select "Mini Program" as the project type
  3. Enter your AppID (or use the test AppID if you don't have one yet)
  4. Choose a project location on your computer
  5. Select a project template (JavaScript or TypeScript)
  6. Click "Create" to generate the project

Project Structure ​

A typical Mini Program project structure includes:

project/
├── pages/              # Pages of the mini program
│   ├── index/          # Index page
│   │   ├── index.js    # Logic
│   │   ├── index.wxml  # Structure
│   │   ├── index.wxss  # Style
│   │   └── index.json  # Configuration
│   └── logs/           # Another page
├── utils/              # Utility functions
├── app.js              # App logic
├── app.json            # Global configuration
├── app.wxss            # Global styles
├── project.config.json # Project configuration
└── sitemap.json        # SEO configuration

Development Features ​

Code Editor ​

WeChat Developer Tools includes a powerful code editor with features like:

  • Syntax highlighting for WXML, WXSS, JavaScript, and JSON
  • IntelliSense and auto-completion
  • Code formatting
  • Error and warning highlighting
  • Quick navigation between files

WXML Visual Editor ​

For visual development of user interfaces:

  1. Open a WXML file in the editor
  2. Click the "Visual Editor" tab at the bottom of the editor
  3. Use drag-and-drop to add and arrange components
  4. Modify component properties in the right panel
  5. Switch back to code view to see the generated WXML

Simulator ​

The built-in simulator allows you to test your mini program:

  • Multiple device models (iPhone, Android, etc.)
  • Different screen sizes and resolutions
  • Portrait and landscape orientations
  • Various system themes (light/dark mode)

To use the simulator:

  1. Click the "Compile" button or press Ctrl+S (Cmd+S on Mac)
  2. Wait for the compilation to complete
  3. Interact with your mini program in the simulator
  4. Use the device toolbar to change device settings

Debugging Tools ​

Console ​

The console panel displays:

  • Log messages from console.log(), console.info(), etc.
  • JavaScript errors and exceptions
  • Network requests and responses
  • System messages

Network Inspector ​

To monitor network activity:

  1. Open the "Network" tab in the developer panel
  2. Perform actions in your mini program that trigger network requests
  3. Examine request details, headers, parameters, and responses
  4. Filter requests by type, status, or domain

Storage Inspector ​

To view and modify local storage:

  1. Open the "Storage" tab in the developer panel
  2. Browse through different storage types:
    • Local Storage
    • Session Storage
    • System Information
    • Cookies
  3. Add, edit, or delete storage items for testing

Performance Analysis ​

To analyze performance issues:

  1. Open the "Performance" tab in the developer panel
  2. Click "Start Recording"
  3. Perform actions in your mini program
  4. Click "Stop Recording"
  5. Analyze the performance timeline, focusing on:
    • JavaScript execution time
    • Rendering performance
    • Network activity
    • Memory usage

Remote Debugging ​

To debug on a physical device:

  1. Open your mini program in the WeChat app
  2. Go to "Settings" > "Developer Options" in the mini program
  3. Enable "Remote Debugging"
  4. In WeChat Developer Tools, click "Remote Debug"
  5. Scan the QR code with your WeChat app
  6. Debug your mini program running on the physical device

Testing ​

Automated Testing ​

WeChat Developer Tools supports automated testing:

  1. Create test files in the miniprogram_npm/miniprogram-automator directory
  2. Write test cases using the Mini Program Automator API
  3. Run tests from the command line or the IDE

Example test case:

javascript
const automator = require('miniprogram-automator');

(async () => {
  const miniProgram = await automator.launch({
    projectPath: 'path/to/your/project'
  });
  
  const page = await miniProgram.reLaunch('/pages/index/index');
  await page.waitFor(500);
  
  const element = await page.$('.element-class');
  await element.tap();
  
  await miniProgram.close();
})();

Mock API ​

To mock API responses during development:

  1. Open "Project Settings" > "Project Configuration"
  2. Enable "Mock API"
  3. Configure mock rules in the "Mock" panel
  4. Define response data for specific API endpoints

Deployment and Publishing ​

Preview and Testing ​

Before publishing, you can generate preview versions:

  1. Click the "Preview" button in the toolbar
  2. Scan the generated QR code with your WeChat app
  3. Test your mini program in the WeChat environment

Code Uploading ​

To upload your code for review:

  1. Click the "Upload" button in the toolbar
  2. Enter a version number and description
  3. Select the appropriate experience version
  4. Click "Upload" to submit your code

CI/CD Integration ​

For continuous integration:

  1. Use the command-line interface (CLI) version of WeChat Developer Tools
  2. Integrate with your CI/CD pipeline using scripts
  3. Automate building, testing, and uploading processes

Example CI script:

bash
# Install CLI
npm install -g miniprogram-ci

# Preview
miniprogram-ci preview --project-path ./project --desc "Preview version"

# Upload
miniprogram-ci upload --project-path ./project --version 1.0.0 --desc "Release version"

Advanced Features ​

NPM Support ​

To use NPM packages in your mini program:

  1. Initialize NPM in your project: npm init
  2. Install packages: npm install package-name
  3. Click "Tools" > "Build NPM"
  4. Import the package in your code: const package = require('package-name')

Cloud Development ​

To use Cloud Development features:

  1. Enable Cloud Development in your project settings
  2. Use the "Cloud" panel to manage:
    • Database collections
    • Storage buckets
    • Cloud functions
    • HTTP endpoints

Example cloud function:

javascript
// cloud-functions/function-name/index.js
const cloud = require('wx-server-sdk');
cloud.init();

exports.main = async (event, context) => {
  // Function logic here
  return {
    result: 'success',
    data: event.data
  };
};

Custom Compilation ​

To customize the compilation process:

  1. Open "Project Settings" > "Compilation Options"
  2. Configure options such as:
    • ES6 to ES5 conversion
    • Minification and compression
    • Source map generation
    • Custom preprocessors

Best Practices ​

Performance Optimization ​

  1. Minimize package size:

    • Use subpackages for less frequently used features
    • Optimize images and media files
    • Remove unused code and resources

  2. Reduce rendering time:

    • Minimize the use of complex WXML structures
    • Use wx:if instead of hidden for elements that are rarely shown
    • Implement lazy loading for images and content

  3. Optimize network requests:

    • Batch API requests when possible
    • Implement proper caching strategies
    • Use connection pooling for frequent requests

Security Considerations ​

  1. Data validation:

    • Validate all user inputs
    • Implement proper error handling
    • Use HTTPS for all network communications

  2. Sensitive information:

    • Never store API keys or secrets in client-side code
    • Use secure storage for sensitive user data
    • Implement proper authentication and authorization

  3. Code protection:

    • Enable code obfuscation in production builds
    • Implement anti-debugging measures for sensitive operations
    • Regularly update dependencies to patch security vulnerabilities

Troubleshooting Common Issues ​

Compilation Errors ​

If you encounter compilation errors:

  1. Check the console for specific error messages
  2. Verify syntax in your JavaScript, WXML, and WXSS files
  3. Ensure all required files are present and properly referenced
  4. Clear the cache and rebuild the project

Performance Issues ​

If your mini program is slow:

  1. Use the Performance panel to identify bottlenecks
  2. Check for excessive re-renders or unnecessary computations
  3. Optimize large lists using virtualization
  4. Reduce the complexity of your WXML structure

API Errors ​

If API calls are failing:

  1. Verify your AppID and permissions
  2. Check network connectivity in the Network panel
  3. Ensure API endpoints are correctly configured
  4. Verify that required parameters are properly formatted

Resources and Support ​

Official Documentation ​

Community Resources ​

Next Steps ​

Now that you're familiar with WeChat Developer Tools, you might want to explore:

Connecting Multiple Platforms, Empowering Innovation

Copyright © 2025 Mini Program Academy