This article introduces what mini programs are, the mainstream technology stacks for mini programs, as well as how to select the right one.
What is a Mini-App
Mini-programs represent a novel open platform capability, offering richer functionality and outstanding user experience. Through mini-programs, users can access services with enhanced convenience.
Developing mini-programs shares a high degree of similarity with developing H5 applications, with JavaScript serving as the principal language. Mini-programs predominantly operate on mobile devices that feature mini-program container capabilities. Not only do they inherit the benefits of H5 applications-such as cross-platform compatibility, low cost, and rapid iteration-but also gain access to more system permissions compared to H5 applications. These permissions include network communication status, data caching capabilities, and device sensor access, enabling mini-programs to offer more extensive features and a user experience closer to that of native applications.
Key advantages of mini-programs:
Cross-platform: A single codebase can run on both Android and iOS platforms.
Low cost: Ensuring a minimal migration cost for developers transitioning from H5 application development to mini-programs.
Rapid iteration: Like H5 applications, mini-programs support real-time publishing and updates.
User experience akin to native applications: Owing to expanded system permission access and enhanced device capabilities, mini-programs provide an experience virtually indistinguishable from native applications.
Mini-program Tech Stack
WindVane
WindVane mini programs denote Web Apps that incorporate
windvane.jsand operate with in the WindVane container-a specific environment designed to enhance functionality. These mini programs address the shortcomings of standard H5 applications, which typically struggle with acquiring system permissions and accessing native device capabilities. Note that "H5 applications" refer to web applications built using HTML5, and "windvane.js" is a proprietary script that facilitates smoother operation within the WindVane framework.Upon integrating the
windvane.jslibrary, a WindVane mini-program can communicate with the native environment through the JSAPI provided by WindVane, thereby acquiring additional system permissions and activating device-specific functionalities. WindVane is preloaded with numerous JSAPIs that provide a plethora of native functionalities. Moreover, WindVane facilitates the customization and expansion of JSAPIs. In contrast to standard H5 apps, WindVane mini-programs grant web developers enhanced access to native capabilities, aiding in the creation of apps boasting richer features and superior user experiences.uni-app
uni-app is a framework for developing all frontend apps using Vue.js. With a single codebase, you can publish to major platforms like Alipay, WeChat, and more, including iOS, Android, Web, and others. uni-app boasts a rich community ecosystem with millions of developers and apps. The project actively embraces the open-source movement, with its source code openly available on GitHub for developers to share and use.
For more information about uni-app, please see our documentation uni-app community.
How to choose
Features
Windvane
uni-app
Language Development
Javascript/Typescript
Javascript/Typescript
Framework for Development
Unlimited
Vue.js
Render Container
Windvane software container, Default WebView Container, Can render Windvane mini-programs and standard web applications.
uni-app container.Supports rendering for uni-app mini-programs.Supports simultaneous hybrid rendering of Native components and mini programs
Arrangement style
Standard HTML+DIV+CSS
Need to adhere to Vue Single-File Component (SFC) Spec
Structural engineering
Typical Web Application Project Structure
Include pages.json;manifest.json;uni-app distinct configuration profile
Label
Standard HTML Label such us div,img.etc.
Custom component names for the uni-app development framework, such as 'view', 'image', etc.
UI Element Collection
abundant
abundant
API abundance
abundant
abundant
API Expandability
Highly customizable and it supports customization.
Highly customizable and it supports customization.
Size of Native SDK Package
Smaller
Larger
Form of the Product
WindVane mini program
uni-app mini program/Web App/Native App
Product size
KB~MB
MB
In summary:
Development barrier
WindVane has a lower development threshold compared to uni-app. Beginners aiming to ramp up swiftly should opt for WindVane.
WindVane mini-programs aren't confined to any particular framework, allowing development with any framework or through standard web development techniques like HTML + CSS. Windvane mini-programs follow universal technical standards, so developers just need proficiency in standard web development skills to build Windvane mini-programs.
uni-app mini-programs are bound to the Vue.js framework, necessitating that developers initially learn and become adept at Vue.js,The layout must be followed Vue Single-File Component (SFC) Spec, The engineering structure has its own unique profile for uni-app.
Product size
If you are sensitive to product size and occupy device storage, WindVane is recommended. The product of WindVane applets is generally in the KB level, and particularly complex WindVane applets may reach the MB level. uni-app applet products are generally at the MB level. Since uni-app applet needs to be installed on the Native terminal, the installation will occupy device storage.
cross-platform
If you want to achieve the effect of one set of code supporting multiple platform artifacts, it is recommended to choose the uni-app applet.
Both WindVane applet and uni-app applet support cross-platform, but uni-app supports one set of code to achieve the effect of products from multiple platforms, and uni-app supports one set of code to build applet for multiple platforms (Alipay, wechat, etc.). It also supports packaging the same set of code to build Web apps and Native apps.