前端框架

uni-app 完整技术文档（基于你已学的 Vue 栈，零门槛吃透）

结合你已经掌握的 Vue3、Vite、SCSS、小程序知识，本文用最直白、最贴合你学习路线的方式，讲透：uniapp 是什么、为什么存在、怎么用、和 Vue / 小程序的关系、企业实战价值。

作者：洋柿子·2026-09-01·共 14 篇 · 当前 10

uni-app 完整技术文档（基于你已学的 Vue 栈，零门槛吃透）

结合你已经掌握的 Vue3、Vite、SCSS、小程序 知识，本文用最直白、最贴合你学习路线的方式，讲透：uni-app 是什么、为什么存在、怎么用、和 Vue / 小程序的关系、企业实战价值。

一、uni-app 到底是什么？

官方定义

uni-app 是 DCloud 公司推出的 跨端前端开发框架。

核心一句话：

用 Vue 语法 写一套代码，直接编译发布到 全平台（微信小程序、H5、安卓 APP、iOS APP、支付宝 / 抖音小程序等）。

你的通俗理解

你现在学的 Vue3 代码，稍微改一点点（标签、单位），就能同时变成：

✅ 微信小程序

✅ 手机 H5 网页

✅ 安卓原生 APP

✅ iOS 原生 APP

✅ 支付宝 / 抖音 / 百度小程序

不用为每个平台单独写代码，一次开发，多端运行。

二、为什么会出现 uni-app？（解决了行业致命痛点）

在 uni-app 出现前，前端开发极度痛苦：

写一个产品，要开发 5~8 遍

微信小程序一套、H5 一套、安卓一套、iOS 一套、抖音小程序一套…… 重复劳动、成本爆炸。
技术栈不统一

原生小程序用原生语法、APP 用 Java/Object-C、H5 用 Vue，维护难度极高。
小公司养不起多端开发团队

没钱雇小程序、安卓、iOS、H5 多个开发，只能选一个平台。

uni-app 直接解决：一套 Vue 代码 = 全端产品，是中小厂 / 外包 / 创业公司的跨端终极方案。

三、uni-app 核心优势（对你来说，全是红利）

1. 100% 基于 Vue 语法

你现在学的 Vue3、setup、响应式、v-if/v-for、Pinia、SCSS，全部通用，几乎不用重新学！

写逻辑 = 写 Vue
写样式 = 写 SCSS
写数据驱动 = 和 Vue 一模一样

2. 真正全平台覆盖（行业最强）

一套代码编译输出：

小程序：微信、支付宝、抖音、百度、QQ、快手
网页：H5、PC 网页
APP：Android（安卓）、iOS（苹果）
其他：快应用、360 小程序等

3. 兼容微信小程序语法

你刚了解的小程序标签、API、rpx 适配，直接能用：

标签：view / text / image（替代 div/span/img）
API：uni.request 替代 wx.request，uni.navigateTo 替代路由
适配：rpx 自动全端适配

4. 原生能力拉满

比普通 H5 强得多：调用摄像头、定位、蓝牙、指纹、支付、推送……

APP 端媲美原生体验。

5. 工程化完全匹配你学的栈

支持 Vite 极速构建
支持 pnpm 包管理
支持 SCSS / Less 预处理器
支持 Pinia 状态管理
支持组件化、路由、分包

四、uni-app 对比：Vue / 原生小程序 /uni-app

表格

维度	普通 Vue (Web)	原生微信小程序	uni-app (跨端)
语法	Vue 专属	小程序专属	Vue 语法
运行平台	仅浏览器 / H5	仅微信小程序	全平台
标签	div/p/span	view/text/image	view/text/image
样式单位	px/%/vw	rpx	rpx (推荐)/px
路由	Vue Router	wx.switchTab	uni.navigateTo
网络请求	axios/fetch	wx.request	uni.request
学习成本	高	中	极低（会 Vue 就会）
企业使用率	高	中	极高（跨端首选）

五、对你来说：uni-app 怎么写？（和你写 Vue 几乎一样）

1. 页面结构（完全是 Vue 单文件组件）

vue

<template>
  <!-- 唯一区别：不用 div，用 view 标签（小程序/APP兼容） -->
  <view class="container">
    <text class="title">{{ msg }}</text>
    <button @click="changeMsg">点击我</button>
  </view>
</template>

<script setup>
// 完全是 Vue3 setup 语法！！！
import { ref } from 'vue'
const msg = ref('Hello uni-app')

function changeMsg() {
  msg.value = '我用Vue写了全端应用'
  // 全端通用路由API
  uni.navigateTo({ url: '/pages/list/list' })
}
</script>

<style lang="scss" scoped>
// 直接写 SCSS，和你学的一模一样
$color: #42b983;
.container {
  padding: 40rpx; // rpx 全端适配
  .title {
    color: $color;
    font-size: 32rpx;
  }
}
</style>

2. 只有 3 个微小区别（记完就能开发）

HTML 标签替换

div → view

span → text

img → image
JS API 替换

小程序 wx.xxx → 全端 uni.xxx
样式单位优先用 rpx（自动适配手机，不用算 vw）

其他 95% 的代码，和你写 Vue3 完全一样！

六、开发工具（极简）

两种选择，都匹配你的技能：

HBuilderX（官方推荐，一键运行，零配置）
VS Code + Vite（你现在用的工具，直接开发）

安装命令（pnpm，你学过）：

bash

运行

# Vite + Vue3 + uni-app 项目创建
pnpm create unibest

七、uni-app 在企业里的地位（真实职场）

中小公司 / 外包公司 100% 用

一个前端搞定小程序 + APP + H5，人力成本砍半
大型公司主流跨端方案

淘宝、京东、美团等，跨端业务都用类 uni-app 框架
私活 / 接单王者

接一个小程序 + APP 的单子，用 uni-app 一天写完，报价翻倍
前端进阶必备技能

只会 Vue 只能做网页，会 uni-app = 全端前端工程师

八、结合你的学习路线：你现在就能直接上手 uni-app

你已经掌握的技能：

✅ Vue3 /setup 语法

✅ 响应式 /v-if/v-for

✅ SCSS 样式

✅ Vite /pnpm 工程化

✅ 小程序基础概念

你现在的水平，只需要 1 小时，就能独立开发 uni-app 项目

不用学新语法，不用重新打基础，无缝衔接。

九、总结一句话

uni-app = 用 Vue 写全平台应用的神器

它让你学一份 Vue 技能，能干网页、小程序、安卓、iOS 四份工作，

是前端求职、接单、职业发展的核心加分项。

给你的下一步建议

你现在的知识栈已经完全达标，可以直接开始练 uni-app 实战项目了！

需要我给你一份：

uni-app 从 0 到 1 入门教程（Vue3 版）+ 必备 API 速查手册 吗？

← 返回课程首页