SuperApp Miniapp Developer Tool

Features

Create a new miniapp

Create a new miniapp quickly.

Select a scaffold to create a new miniapp

1. Click "SuperApp" icon in the Activity Bar, click "Create Miniapp". A panel appears, there are seven scallfolds you can choose.
2. Select a scaffold, click "OK" button.
3. Enter the name of your miniapp, and select the storage path.
4. Click "Create" to create miniapp, the extension will open the new miniapp automatically.

SuperApp Application Open Platform

• Login to Application Open Platform.
• Bind Miniapp to Application Open Platform.

You can create an application in Application Open Platform of Enterprise Mobile Application Studio (SuperApp) to bind the application to your miniapp project in Visual Studio Code. After the application is bound, the miniapp project is connected to Application Open Platform. Then, you can use Application Open Platform to package, build, and publish the miniapp

Preview Miniapp

You can preview and debug miniapps in Visual Studio Code or use the Visual Studio Code extension for WindVane on an Android or iOS simulator.

• If you do not need to debug WindVane JavaScript APIs, use Visual Studio Code.
• If you need to debug WindVane JavaScript APIs, use the Visual Studio Code extension for WindVane on an Android or iOS simulator.

Preview Miniapp in Visual Studio Code

Click "SuperApp" icon in the Activity Bar, click "Preview Miniapp". The following message appears in the upper part of Visual Studio Code: Is your miniapp started? Select one of the following options from the drop-down list:

• Yes (The miniapp can be previewed.): Your miniapp is running. You can preview the miniapp by entering the URL of the miniapp. If you select this option, a text box appears in the upper part of Visual Studio Code. Enter the URL of your miniapp. Then, the preview window appears.

• No (The miniapp must be started first.'npm start' will be called.): Your miniapp is not started. If you select this option, the Visual Studio Code extension will run start command to start the miniapp. After the miniapp is started, a text box appears at the top window. You can enter the miniapp's preview URL. After you enter the URL, the preview panel will appear.

Preview Miniapp in Android Emulator

Click "SuperApp" icon in the Activity Bar, click "Preview Miniapp in Android Emulator". The extension will start an Android Emulator. After the emulator is started, a input dialog appears at the top of window, you can enter the miniapp's preview URL. After you enter the URL, the Android Emulator will open your miniapp.

Preview Miniapp in iOS Simulator

Click "SuperApp" icon in the Activity Bar, click "Preview Miniapp in iOS Simulator", choose a simulator, then the extension will start the simulator you choosed. After the simulator is started, a input dialog appears at the top of window, you can enter the miniapp's preview URL. After you enter the URL, the iOS Simualtor will open your miniapp.

Publish Miniapp

Click "SuperApp" icon in the Activity Bar, click "Publish Miniapp". The extension automatically calls the server API, calculates the latest version number of the miniapp based on the return value of the API, and then updates it in package.json. The extension will run the build command to build miniapp and compressed the build product to a zip file, then upload the zip file to Application Open Platform and create a new version of this miniapp.

Commands

• superapp.initWindvane: Select a template and create a new miniapp
• superapp.login: Login to Application Open Platform
• superapp.openAndroidEmulator: Preview Miniapp in Android emulator
• superapp.createAndroidEmulator: Create an Android emulator
• superapp.previewWindvane: Preview Miniapp in VSCode
• superapp.openIOSEmulator: Preview Miniapp in iOS Simulator
• superapp.publishMiniapp: Build miniapp and publish Miniapp to Application Open Platform
• superapp.bindApp: Bind Miniapp to Application Open Platform
• superapp.howDG: Show how to debug miniApp
• superapp.clearAllState: Clear all user state
• superapp.viewAppInfo: View Application information
• superapp.addDependency: Add new dependency
• superapp.upgradeDependency: Upgrade dependency,
• superapp.runNpmCommand: Run npm script

It seems like your question is outside the scope of program development. The currently supported modification operations are as follows:

• Layout for category navigation, advertisement spaces, and product promotions
• Font color and size
• Theme color