The SuperApp solution provides a Visual Studio Code extension for initializing, building, and packaging WindVane scaffolding projects, with publishing managed through the Application Open Platform. This guide walks you through the steps to quickly develop a WindVane MiniApp using VS Code.
1. Prerequisites
Before starting development, ensure the following preparations are completed:
You have an existing native app project.
The MiniApp container has been integrated into the native app:
For Android integration steps, see Integrate a MiniApp container into a native app.
For iOS integration steps, see Integrate a MiniApp container into a native app.
WindVane MiniApps can only be loaded and run in a native app that has successfully integrated the MiniApp container.
Before developing a MiniApp, ensure that at least one app has been created and configured as the deployment host (also known as the carrier app).
2. Process Overview
The complete development process for UniApp MiniApps involves two roles: Native App Developer and UniApp MiniApp Developer. This guide is primarily intended for UniApp MiniApp Developers, covering the full lifecycle from project creation to release.
Role | Responsibilities |
Native App Developer | Integrates SuperApp solutions (e.g., MiniApp container) into the native app |
UniApp MiniApp Developer | Uses the scaffolding tool to quickly create projects and completes MiniApp development, debugging, and publishing |
The basic operation process is as follows:
3. Detailed Steps
Step 1: Install the VS Code Plugin
Download and install the WindVane MiniApp VS Code Plugin to gain unified support for project initialization, debugging, building, and publishing, see Install the VS Code Plugin.
Step 2: Initialize Project with Scaffolding
Use the WindVane scaffolding tool in VS Code to quickly generate a MiniApp project. This automatically creates a standard directory structure and configuration files based on predefined templates.see Use the MiniApp Project Template.
Step 3: Link to Application Platform
Log in to the SuperApp Open Platform and create a new application to serve as the management and publishing entity for your MiniApp. In VS Code, associate your local MiniApp project with this platform application.see Bind your MiniApp project to SuperApp.
After linking, your project will be connected to the Open Platform, enabling subsequent operations such as build packaging and publishing.
Step 4: Preview and Debug
Preview and debug your MiniApp directly within VS Code, with support for hot reloading and breakpoint debugging. Alternatively, use the WindVane MiniApp plugin to test on Android/iOS simulators. see Preview and debug a MiniApp.
Step 5: Build and Submit for Publishing
Once the preview meets expectations, use the VS Code plugin to package and build the project. After a successful build, submit the package to the Open Platform for review and publishing.see Package, Build, and Publish.
Step 6: Gradual Rollout
For approved versions, create a gray-scale release task on the Open Platform to gradually roll out the update to a targeted user group for validation.see Publish a version.
Step 7: Officially Release
After successful gray-scale verification, publish the MiniApp version to all users via the Application Open Platform.see Publish a version.
Step 8: Scan to Preview (Verify Deployment)
After the MiniApp is live, the platform generates a dedicated QR code. Use the scanning feature in SuperApp to scan this code and verify the running behavior of the MiniApp.
