Extended features

Use the mPaaS miniapp IDE extension Toolbox to configure whitelist access, inspect miniapp settings, export packages, and set up multi-platform development for WeChat Mini Program and HTML5.

Extension toolbox

The extension Toolbox gives you access to all mPaaS miniapp IDE extensions from a single panel. Click the Toolbox icon () on the left side of the IDE interface.

Settings

Whitelist settings

Whitelist settings control which users can download miniapp packages for preview and debug. Only users whose userId matches an entry in the whitelist can access these packages. The userId corresponds to the identifier used to log in to the app client.

To configure the whitelist, click Settings > Whitelist Settings in the Toolbox, enter the user IDs, and click Confirm.

Miniapp settings

Miniapp settings highlight error-prone configuration items based on the current miniapp code, helping you catch common configuration problems before exporting or previewing.

In the Toolbox, click Settings > Miniapp Settings to open the settings page. Review any highlighted items and fix them before proceeding.

Features

Export

Export pulls the latest official miniapp package from the server and downloads it to your local machine.

In the Toolbox, click Features > Export, select a miniapp version, and click Export.

Purge cache

Purge cache removes locally cached miniapp files, forcing a clean reload. Use this when cached files cause unexpected behavior during testing.

In the Toolbox, click Features > Purge Cache.

Multi-platform development

Miniapps built in the mPaaS miniapp IDE can be released to apps on the mPaaS framework. The IDE also supports joint debugging with WeChat Mini Program and building HTML5 previews for real-device testing. Multi-platform projects must be created from a multi-terminal development template (uni-app) or multi-terminal development template (remax).

WeChat Mini Program

Use this workflow to run your miniapp in WeChat Mini Program Developer Tools alongside the mPaaS IDE. Both IDEs display the miniapp simultaneously so you can debug across platforms.

Prerequisites: Download and install WeChat Mini Program Developer Tools before starting. Log in to the WeChat IDE and enable the service port.

1. Open the miniapp IDE. In the Select Template window, create a project from the multi-terminal development template (uni-app) or multi-terminal development template (remax). You can also open an existing multi-platform project.

2. If creating a new multi-platform project, install its dependencies when prompted. Click Install All Dependencies.

   Alternatively, click the dependency management icon () on the left side of the interface and install dependencies through the dependency management extension. After installation, preview the miniapp in the IDE emulator.

   Note

   If an error occurs after installation, switch to the terminal and manually install dependencies using yarn, as shown in the following figure.

   

3. Download and install WeChat Mini Program Developer Tools. Log in and enable the service port.

4. Click the mPaaS Toolbox icon () on the left side of the IDE interface, then select the Multi-platform Development tab.

5. Select WeChat Mini Program and fill in the configuration fields:

   • Configure Developer Tools: The local installation path of WeChat Developer Tools on your machine. The mPaaS IDE uses this path to launch WeChat Developer Tools automatically.

   • Project Name: The miniapp project name as it appears in WeChat Developer Tools.

   • appid: The project ID in WeChat Developer Tools that you want to associate with this miniapp.

6. Click Start Debugging. WeChat Mini Program Developer Tools launches and displays a real-time preview of the miniapp.

7. To preview on a real device, click Preview in the upper-right corner of WeChat Mini Program Developer Tools. Scan the generated QR code with WeChat on your phone.

HTML5

Use this workflow to build and preview your miniapp as an HTML5 application on a real mobile device or in a desktop browser. No additional configuration is needed beyond selecting HTML5 as the target.

Prerequisites: Make sure your phone and computer are on the same network for real-device preview.

1. Open the miniapp IDE and select the multi-platform project to preview.

2. Click the mPaaS Toolbox icon () on the left side of the IDE interface, then select the Multi-platform Development tab.

3. Select and expand HTML5. No additional configuration is needed.

4. Click Start Debugging. The IDE opens an HTML Debug window, starts the build process, and generates a QR code.

5. Preview the application using either method:

   • Real-device preview: On your phone, open an app that supports HTML5 and scan the QR code. To open in the phone's browser instead, select Open in Browser.

     Note

     When previewing on a mobile phone, make sure your phone and computer are on the same network.

   • Browser preview: Copy the URL from the Local field, as shown in the following figure, and paste it into a browser on your computer.