uni-app 系列（一）：入门与跨端原理

一、uni-app 是什么

uni-app 是 DCloud 推出的、使用 Vue 语法开发所有前端应用的跨端框架。 一句话概括它的价值主张：

写一次代码，同时发布到 iOS / Android App、H5、以及微信/支付宝/抖音/百度/QQ/快手等各家小程序。

它的定位是"最全的跨端方案"——尤其在中国的小程序生态里，uni-app 的多端覆盖是同类框架里最广的。这也是它在国内被大量中小团队采用的核心原因：一套人马、一份代码，覆盖所有主流流量入口。

能编译到哪些端

二、核心：uni-app 是怎么做到"一套代码多端"的

这是入门最该理解的原理，也是面试最爱问的。uni-app 的跨端能力由两条技术路线共同完成：编译时 + 运行时。

1. 编译时（Compile-time）

uni-app 的构建工具（基于 Vite / webpack + @dcloudio/vite-plugin-uni）会针对目标平台把你的源码"翻译"成该平台自己的代码：

              ┌──────────────► 微信小程序 (wxml + wxss + js)
              │
你的 .vue 源码 ├──────────────► H5 (标准 HTML + CSS + JS)
  (Vue 语法)  │
              └──────────────► App (原生渲染 / webview)

比如你写的 <view>，编译到微信小程序会变成 <view>（小程序原生组件），编译到 H5 会变成 <div>。同一份模板，按目标平台产出不同产物。

2. 运行时（Runtime）

光编译还不够，各端的 API 差异由运行时抹平。uni-app 提供统一的 uni. 前缀 API，运行时再把它映射到各端的原生 API：

uni.request({ url })   // 你只写这一句
// → 微信端运行时调用 wx.request
// → 支付宝端运行时调用 my.httpRequest
// → H5 端运行时用 fetch / XMLHttpRequest
// → App 端走原生网络模块

一句话总结原理：编译时翻译"模板与语法"，运行时抹平"API 差异"。 这两条线合起来，才实现了真正的一套代码多端跑。

三、环境搭建：两种方式

方式一：HBuilderX（官方推荐，可视化）

DCloud 自家的 IDE，内置 uni-app 编译器，开箱即用、无需配置：

1. 官网下载 HBuilderX；
2. 文件 → 新建 → 项目 → uni-app，选模板（Vue3）；
3. 工具栏"运行"→ 运行到浏览器 / 手机模拟器 / 小程序开发者工具。

uni-app x（后面系列会讲）必须用 HBuilderX，因为它的 App 端原生编译器内置其中。

方式二：CLI（工程化、便于团队协作 + CI/CD）

适合喜欢用 VS Code、需要接入 Git/CI 的团队：

# 用官方脚手架创建 Vue3 + TS 工程
npx degit dcloudio/uni-preset-vue#vite-ts my-uni-app
cd my-uni-app
npm install
npm run dev:h5          # H5
npm run dev:mp-weixin   # 微信小程序（产物在 dist/dev/mp-weixin，用微信开发者工具打开）
npm run dev:app         # App（配合 HBuilderX 基座运行）

四、项目结构（必须熟悉）

├── src/
│   ├── pages/              页面（每个页面一个文件夹）
│   ├── components/         自定义组件（easycom 自动引入）
│   ├── static/             静态资源（不会被编译，原样打包）
│   ├── App.vue             应用根组件（全局样式、应用生命周期）
│   ├── main.js/ts          入口，创建 Vue 应用实例
│   ├── pages.json          【核心】页面路由、导航栏、tabBar 配置
│   ├── manifest.json       【核心】应用名、appid、各端能力/权限配置
│   └── uni.scss            全局 SCSS 变量
├── package.json

其中 pages.json 和 manifest.json 是 uni-app 独有的两个灵魂配置文件：

• pages.json：声明所有页面路径、每个页面的导航栏样式、全局样式、tabBar 底部导航、分包等。页面必须在这里注册才能访问。
• manifest.json：应用级配置——名称、版本、各小程序 appid、App 的权限与模块、SDK 配置等。

五、一个最小页面长什么样

<template>
  <view class="container">
    <text class="title">{{ title }}</text>
    <button @click="onTap">点我</button>
  </view>
</template>

<script setup>
import { ref } from "vue";
const title = ref("Hello uni-app");
function onTap() {
  uni.showToast({ title: "点击成功", icon: "none" });
}
</script>

<style>
.container { padding: 40rpx; }
.title { font-size: 36rpx; color: #333; }
</style>

注意几个 uni-app 特征：用 <view>/<text> 而不是 <div>/<span>（为了跨端统一）；尺寸单位用 rpx（响应式像素，下一步系列细讲）；调用能力用 uni. 前缀。

六、本阶段必须掌握的知识点

• uni-app 的定位：用 Vue 语法开发全端应用，尤其国内小程序生态覆盖最全。
• 跨端原理 = 编译时（翻译模板/语法）+ 运行时（抹平 API 差异）。
• 能编译的端：App / H5 / 各家小程序。
• 两种开发方式：HBuilderX（可视化、uni-app x 必需）与 CLI（工程化）。
• 项目结构，尤其 **pages.json（路由）与 manifest.json（应用配置）**两个核心文件的职责。
• 组件用 <view>/<text>、单位用 rpx、能力用 uni. 前缀。

七、高频面试题

Q1：uni-app 是如何实现"一套代码多端运行"的？

A：靠编译时 + 运行时两条路线。编译时，构建工具把 .vue 源码按目标平台翻译成各端产物（如小程序的 wxml/wxss、H5 的 html/css）；运行时，统一的 uni. API 被映射到各端原生 API（wx. / my. / fetch / 原生模块）。前者解决"结构与语法"的跨端，后者解决"能力调用"的跨端。

追问：那它和 Taro 的实现思路有什么不同？

A：思路相近（都是编译 + 运行时），主要差异在语法生态与多端覆盖：uni-app 以 Vue 为主、DCloud 自研运行时，国内小程序平台覆盖最全、插件市场最厚；Taro 由京东出品，以 React 为主（也支持 Vue），App 端走 React Native。选型上：Vue 团队 + 要覆盖尽可能多小程序 → uni-app；重度 React 团队 → Taro。

---

Q2：pages.json 和 manifest.json 分别是干什么的？

A：pages.json 是页面级路由与样式配置——注册所有页面路径、配置导航栏、全局窗口样式、tabBar、分包等，页面不在这里注册就无法访问；manifest.json 是应用级配置——应用名称、版本号、各平台 appid、App 权限与原生模块、各端 SDK 配置等。一个管"页面路由"，一个管"应用身份与能力"。

追问：新建一个页面需要做哪几步？

A：① 在 src/pages/ 下建页面文件夹与 .vue 文件；② 在 pages.json 的 pages 数组里注册它的 path 和 style；③ 用 uni.navigateTo 等 API 跳转过去（若是 tabBar 页则配到 tabBar.list 并用 uni.switchTab）。

---

Q3：为什么 uni-app 里要用 <view> 而不是 <div>？单位为什么用 rpx？

A：因为要跨端统一。<div> 是 HTML 标签，小程序里并不存在；uni-app 用 <view>/<text> 这类"抽象组件"，编译时再翻译成各端对应的真实组件（H5 → <div>，小程序 → <view>）。rpx（responsive px）是响应式像素，以 750rpx 为屏幕宽度基准自动换算，能在不同宽度的设备上保持等比例布局，避免为每种屏宽写适配。

追问：rpx 的换算规则是什么？

A：uni-app 规定屏幕宽度恒为 750rpx。所以在设计稿宽度为 750px 时，1rpx = 1 设计稿 px，可直接照搬设计稿数值。实际渲染时，设备会按 真实宽度 / 750 的比例把 rpx 换算成物理像素。例如在 375pt 宽的设备上，750rpx = 375pt，即 2rpx ≈ 1pt。

---

Q4：uni-app、H5、小程序三者是什么关系？

A：uni-app 是上层框架/源码形态，H5 和小程序是它的编译目标（产物）之一。你写的是 uni-app 代码，通过编译分别产出 H5 站点或某家小程序包。它不是"运行时套壳"，而是"编译期分发 + 运行时适配"。