UniApp — Cross-Platform Framework Using Vue.js

Introduction

UniApp lets you write one Vue.js codebase and compile it to iOS, Android, H5, and over a dozen mini-program platforms including WeChat, Alipay, and Baidu. It bridges the gap between native performance and web developer productivity by providing a unified API layer across all target runtimes.

What UniApp Does

• Compiles Vue 3 single-file components to native and web targets from one project
• Supports conditional compilation for platform-specific code paths
• Provides a rich set of built-in UI components optimized for mobile
• Integrates with native plugins through a unified plugin marketplace
• Offers HBuilderX IDE with visual debugging and hot reload across platforms

Architecture Overview

UniApp uses a compiler-driven architecture that transforms Vue SFCs into platform-specific bundles. For H5 it produces standard web output via Vite; for native apps it leverages a custom runtime built on top of the platform's native rendering engine; for mini-programs it transpiles to each platform's template and scripting format. The conditional compilation system uses preprocessor directives to include or exclude code per platform at build time.

Self-Hosting & Configuration

• Install via npm or use HBuilderX IDE for a visual workflow
• Configure target platforms in manifest.json with app IDs and permissions
• Use pages.json for routing, navigation bar, and tab bar settings
• Environment variables and platform conditions set in vue.config.js
• Native plugins managed via the DCloud plugin marketplace or local integration

Key Features

• Single codebase targets 13+ platforms including native iOS/Android
• Vue 3 composition API and TypeScript support
• Conditional compilation with #ifdef directives for platform branching
• Extensive component and API compatibility across all targets
• Large ecosystem with thousands of community plugins and templates

Comparison with Similar Tools

• React Native — React-based, targets iOS/Android only, no mini-program support
• Flutter — Dart language, strong native performance but no mini-program output
• Taro — React-based cross-platform for mini-programs, narrower native support
• Weex — Vue-based but limited maintenance and smaller ecosystem
• Ionic — Web-first hybrid apps, relies on WebView for native feel

FAQ

Q: Does UniApp support Vue 3? A: Yes. UniApp fully supports Vue 3 with the Composition API, script setup, and TypeScript.

Q: Can I use npm packages in UniApp? A: Most npm packages that do not depend on browser-specific APIs work. Platform-specific packages may need conditional compilation.

Q: How does performance compare to fully native apps? A: For most business apps the difference is minimal. UniApp compiles to native views on mobile, not WebView, so rendering performance is close to native.

Q: Is UniApp free to use? A: The framework and CLI are open source under the Apache 2.0 license. HBuilderX IDE is free with optional cloud services.

Sources

• https://github.com/dcloudio/uni-app
• https://uniapp.dcloud.net.cn/