uni-app — Write Once, Run Everywhere with Vue for Mobile and Web

Introduction

uni-app is a cross-platform development framework that lets developers write apps using Vue.js syntax and compile them to iOS, Android, H5 web, and over 10 mini-program platforms including WeChat, Alipay, and Baidu. It eliminates the need to maintain separate codebases per platform.

What uni-app Does

• Compiles Vue single-file components to native apps via a custom runtime
• Targets WeChat, Alipay, Baidu, Toutiao, QQ, and Kuaishou mini-programs
• Generates H5 web apps and native iOS/Android via a built-in rendering engine
• Provides a rich plugin marketplace with thousands of community extensions
• Offers conditional compilation directives for platform-specific code

Architecture Overview

uni-app uses a compiler-plus-runtime architecture. At build time, Vue templates are transformed into platform-specific output (WXML for WeChat, AXML for Alipay, HTML for web). The runtime layer normalizes lifecycle hooks, event handling, and API calls across platforms. Native rendering on mobile uses a custom bridge similar to React Native.

Self-Hosting & Configuration

• Install HBuilderX IDE for visual project management or use CLI
• Configure target platforms in manifest.json with app IDs and keys
• Set conditional compilation with #ifdef and #ifndef blocks
• Use pages.json for routing, tab bar, and navigation configuration
• Build production bundles per platform with npm run build:<platform>

Key Features

• Single codebase targeting 13+ deployment platforms
• Conditional compilation for platform-divergent logic
• Native-level performance on mobile via optimized rendering
• HBuilderX IDE integration with debugging and hot reload
• Massive plugin ecosystem at ext.dcloud.net.cn

Comparison with Similar Tools

• Taro — React-based alternative, stronger React ecosystem integration
• Flutter — Dart-based, better performance but no mini-program support
• React Native — Only targets iOS/Android, no mini-program output
• mpvue — Earlier Vue mini-program tool, now largely superseded by uni-app
• Weex — Alibaba project, less actively maintained

FAQ

Q: Does uni-app support Vue 3? A: Yes. uni-app has full Vue 3 and Composition API support in its latest releases with Vite as the build tool.

Q: How is native mobile performance? A: uni-app uses a custom rendering engine (not WebView) for native apps, achieving near-native scroll and animation performance.

Q: Can I use npm packages? A: Yes for H5 and native app targets. Mini-program targets have restrictions on packages that rely on DOM or Node.js APIs.

Q: Is uni-app free for commercial use? A: The framework and CLI are fully open source under Apache 2.0. HBuilderX IDE is free but proprietary.

Sources

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