uni-app 认识

uni-app 是一个使用 Vue 语法开发所有前端应用的跨平台开发框架。

它最核心的理念只有八个字，一次开发，多端发布。开发者用 Vue 写一套代码，就可以编译发布到 iOS、Android、鸿蒙 Next、Web，以及微信、支付宝、百度、抖音、QQ 等十余种小程序平台。

本文带你先建立对 uni-app 的整体认知，后面每一篇再逐个攻破细节。

uni-app 的组成

uni-app 的本质可以拆成两个部分，编译器和运行时。

编译器负责把 Vue 代码转换，转换为对应平台能运行的代码。同一个项目，编译到微信小程序时输出小程序原生的代码，编译到 H5 时输出网页代码，编译到 App 时输出原生应用代码。

运行时负责在各平台提供一套统一的执行环境。你的代码里写的 uni.request、uni.showToast 这些 API，在不同平台被翻译成对应的原生实现，让你不用关心平台差异。

用一句话概括，uni-app = Vue 语法 + 小程序 API。界面和逻辑用你熟悉的 Vue 写，跨端能力用 uni. 开头的 API 拿，平台差异交给框架处理。

为什么需要它

先看传统做法。如果一个产品要覆盖三个平台，就需要三套代码、三个团队：

三套代码意味着三份开发、三份测试、三份维护。一个功能改完 iOS 改 Android，改完 Android 改小程序，改动成本直接乘以三。

用 uni-app 则是另一番景象，一套 Vue 代码，编译产物覆盖所有平台。大部分业务逻辑和界面只用写一次，只有少部分平台差异用条件编译单独处理（后面有专门一篇讲）。

适合用 uni-app 的场景

• 中小型跨端产品，希望在 App、小程序、Web 同时上线
• 团队主要熟悉 Vue，不想为每个平台单独招人
• 工具类、业务类应用，对原生能力要求不极端

不适合的场景

• 对性能要求极高的大型游戏
• 需要深度调用 iOS/Android 原生能力且依赖大量原生库的应用

和微信小程序的对比

很多人是先接触微信小程序再来学 uni-app，两者对比能帮你快速定位：

可以看到，uni-app 的内置组件、生命周期、API 命名与微信小程序高度一致，甚至可以说是「把小程序那套跨端了」。如果你会 Vue，学 uni-app 几乎没有门槛；如果你会小程序，迁移成本也非常低。

认识一个最简单的页面

无论编译到哪个平台，页面代码都长这样，一个 .vue 文件包含结构、逻辑、样式三部分：

<template>
  <view class="container">
    <text class="title">你好，uni-app</text>
    <button type="primary" @click="sayHello">点我</button>
  </view>
</template>

<script setup>
function sayHello() {
  uni.showToast({ title: 'hello uni-app' })
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100rpx;
}
.title {
  font-size: 40rpx;
  color: #333;
}
</style>

注意几个和普通 Vue 网页不一样的地方：

• 模板里用的是 view、text、button 这类内置组件，而不是 div、span。这些是 uni-app 参考小程序规范封装的，保证各端渲染一致。
• 样式的单位是 rpx，一个会根据屏幕宽度自动缩放的响应式单位，后面有专门一篇讲。
• 弹提示用的是 uni.showToast，而不是 alert。

总结

一句话总结：uni-app 让你用 Vue 写一套代码，由框架负责翻译成各平台的「方言」，这就是「一次开发，多端发布」。