UniApp 的核心理念是：用 Vue 的语法写一套代码，编译时将它转换成各个平台可运行的原生代码，而不是在运行时用一个 WebView 去模拟所有平台。
它是怎么做到的？
UniApp 并不是一个“浏览器套壳”，而是一个编译时框架。当你写好 .vue 文件后，它的编译器会做两件事：
- 把模板编译成各平台的原生组件树
例如，<view> 标签在小程序端会直接编译成小程序的 <view>，在 App 端会映射为原生的 UIView（iOS）或 View（Android），在 H5 端则是 <div>。你写的点击事件 @click，在 H5 端是真实的 DOM 事件，在小程序端则是 bindtap，在 App 端是原生手势识别。
- 把 JS 逻辑层适配到各平台的运行环境
小程序的逻辑层和视图层是分离的，数据通过 setData 通信；App 端则直接操作原生渲染引擎。UniApp 内置了一个跨平台的响应式桥接层，自动把 Vue 的响应式更新翻译成各平台的数据更新机制。
开发者实际感受到的是什么？
你打开一个 .vue 文件，写的就是标准的 Vue 语法：
<template>
<view class="container">
<text>{{ message }}</text>
<button @click="handleClick">点击</button>
</view>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Hello')
function handleClick() {
message.value = '你好，多端！'
}
</script>当你选择编译目标为“微信小程序”时，这套代码会被转换成微信小程序的 .wxml、.wxss、.js、.json 文件；选择“H5”时，则是标准的 HTML/CSS/JS；选择“App”时，则打包成原生安装包。整个过程你不需要为不同平台写不同的业务逻辑。
平台差异怎么办？条件编译
“一套代码”不是一句空口号，真实场景中不同平台确实有差异（比如小程序没有 document，App 端可以调用蓝牙）。UniApp 提供了条件编译，让你在必要时用简单的注释标记出平台专属代码：
<script setup>
// #ifdef MP-WEIXIN
console.log('这段代码只在微信小程序中执行')
// #endif
// #ifdef APP-PLUS
console.log('这段代码只在 App 中执行')
// #endif
</script>编译时，编译器会根据目标平台自动删除或保留这些条件块，最终产出的代码只包含当前平台需要的部分，不增加额外体积。
实用边界：哪些能“一套代码”，哪些不能？
- 能：页面结构、业务逻辑、网络请求、数据状态管理、大部分 CSS 样式，这些 90% 的代码可以复用。
- 不能：依赖原生硬件能力（如指纹识别、NFC）、平台独有的 UI 风格（如 iOS 的毛玻璃效果）。此时需要用条件编译或编写原生插件来弥补，但这部分通常只占项目的很小比例。
总结
UniApp 的“一套代码多端编译”原理，本质是在编译阶段用编译器充当“翻译官”，把一份 Vue 代码翻译成各个平台能理解的“方言”。你不用学习小程序、iOS、Android 各自的开发语言，只需要掌握 Vue，就能同时产出多端应用。这为团队节省了大量人力，特别适合需要快速覆盖多个渠道的项目（如电商、资讯类应用）。但也要清楚它的边界：它不是“万能适配”，而是在 90% 通用 + 10% 条件适配 的现实下，把跨端开发的成本降到最低。