uni-app

uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。

DCloud公司拥有上千万开发者、数百万应用、几十亿手机端月活用户、数万款uni-app插件，开发者可以放心选择。

uni-app分 uni-app 和 uni-app x。

• uni-app：基于前端技术栈，App引擎采用与小程序相同的技术架构，逻辑层使用js，渲染层使用web-view。
• uni-app x：是新一代 uni-app，基于uts语言和uvue原生渲染引擎。

uts是一门类ts的、跨平台的语言。

uts在Android平台编译为kotlin、在iOS平台编译为swift、在鸿蒙next平台上编译为ArkTS、在Web和小程序平台编译为js。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的Web开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

快速体验

仓库介绍

uni-app x 分支，为 uni-app x 版本的开源仓库。

uni-app，分 vue2 和 vue3，分支分别是：uni-app-vue2、uni-app-vue3。

uni-app x分支目录说明：

• benchmark 目录下为性能评测报告
• docs 目录为文档
• examples 目录为示例项目
• src 目录为源码
• test 目录为测试例
• CHANGELOG.md 为更新日志

一套代码，运行到多个平台

uni-app实现了一套代码，同时运行到多个平台；如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、web、微信开发者工具、支付宝小程序Studio、百度开发者工具、抖音开发者工具、QQ开发者工具（底部每个终端选项卡，代表1个终端模拟器）：

实际运行效果如下（点击图片可放大）：

实战开发指南

快速创建项目

# 方式1: Vue CLI（推荐）
npx degit dcloudio/uni-preset-vue#vite-ts my-app

# 方式2: HBuilderX（可视化）
# 下载 HBuilderX → 新建 → 项目 → uni-app

编译到各端

# 微信小程序
npm run dev:mp-weixin
npm run build:mp-weixin

# 支付宝小程序
npm run build:mp-alipay

# 抖音小程序
npm run build:mp-toutiao

# H5
npm run build:h5

常见问题与解决方案

1. 条件编译：uni-app 强大的条件编译能力，解决跨端差异：

// #ifdef MP-WEIXIN
// 仅微信小程序执行
// #endif

// #ifndef MP-ALIPAY
// 非支付宝小程序执行
// #endif

2. 状态管理：

   • 小型项目：Pinia（推荐，Vue3）
   • 大型项目：Vuex 4（兼容性好）

3. UI 库集成：

   • uni-ui：官方组件库，npm install @dcloudio/uni-ui
   • uView UI：npm install uview-ui，完整移动端组件
   • Wot Design Uni：npm install wot-design-uni，Vue3+TS 原生

4. 类型安全：使用 @dcloudio/types 获取 uni API 类型定义：

npm install @dcloudio/types -D

5. uni-app x（新一代）：基于 uts 语言和 uvue 原生渲染引擎，性能接近原生。适合对性能要求高的场景。