Environment Setup and Debugging Guide for WeChat Mini Programs Across Different Frameworks

Environment Preparation

1. To develop and test mini‑programs, download the official WeChat Developer Tools from the official website according to your operating system: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html .

2. Apply for a mini‑program administrator account to obtain a developer AppID. The AppID is needed for identity verification when opening a project in the developer tools. Find the AppID at: Mini‑Program Management Platform → Developer Settings → Developer ID.

3. Log in to the developer tools by scanning the QR code with an authorized WeChat account.

4. Import the test project into the developer tools.

Preview and Debugging of Mini‑Programs Using Different Frameworks

01. Native WeChat Framework

After importing a native framework project without errors, click Compile to preview the mini‑program in the right‑hand simulator. You can also preview on a real device by either scanning the QR code for real‑device debugging or using automatic real‑device debugging. After code changes, re‑click Compile to see updates.

02. WePY Framework

WePY is an official Vue‑like framework for mini‑programs. Install it with:

npm install wepy

Verify the installation in the command line:

wepy -V (example output shown in the image).

If the project shows errors when imported, navigate to the project directory in a command prompt and run:

wepy build

After each modification, run wepy build again to re‑compile and refresh the mini‑program.

03. Taro Framework

Taro, created by Aotu Lab, follows React syntax for multi‑platform development. Install the Taro development tools with npm (command shown in the image) and then import the Taro project into the developer tools. In the project directory execute:

npm run dev:weapp

If the command fails, first run npm update and then retry. Successful execution shows a listening status, and any code changes are automatically compiled and refreshed without manual clicks.

04. mpvue Framework

mpvue is an open‑source framework from Meituan that shares Vue.js syntax. First install the Vue CLI:

npm install -g @vue/cli

Import the mpvue project into the developer tools and run:

npm run dev

If it fails, run npm update and then npm run dev again. A successful build displays “DONE: Compiled successfully in XXms”. After that, any code changes are automatically detected, compiled, and refreshed.

By following the steps above, you can test mini‑programs built with the four frameworks.

Reference

https://www.jianshu.com/p/4d3190111eb0

Additional Notes

Long‑press the QR code to follow the official WeChat public account for more updates.

If you find this article helpful, feel free to share it and follow the author for more information.