首页 前沿速递 服务器教程 网页设计教程 网络编辑教程
移动端
AI智能体脚本 智能办公脚本 自动化游戏脚本 浏览器自动化脚本 服务器脚本
当前位置：首页 > 网页设计教程 > Javascript教程 > 给 Vue 开发者的 uni-app 快速指南

给 Vue 开发者的 uni-app 快速指南

作者：互联网

2026-03-05

Javascript教程

作为一名熟悉 Vue 的开发者，当你第一次接触 uni-app 时，好消息是：你已经掌握了 uni-app 80% 的知识。uni-app 的核心就是 Vue 语法加上一套跨端编译机制。

但剩下的 20% 往往是新手踩坑的重灾区。这篇文章将用大白话，从底层原理到实战技巧，带你迅速跨越这 20% 的认知鸿沟，看完即可直接上手企业级项目。

一、 核心认知转换：你不再只写网页了

在写纯 Vue 时，你的代码运行在浏览器里，你可以肆无忌惮地操作 DOM（document.getElementById）、使用 BOM（window.location）。

但在 uni-app 中，你的代码可能要运行在微信小程序或原生 App 中。 官方文档明确指出：App 和小程序的逻辑层和渲染层是分离的。

  • 逻辑层：运行在独立的 JS 引擎中（App 上是 V8 或 JSCore，小程序是微信的 JS 引擎）。
  • 渲染层：运行在 WebView 或原生渲染引擎（nvue/uts）中。

结论与习惯改变：

  1. 彻底戒掉 DOM/BOM 操作：你的 JS 代码环境里压根没有 window 和 document。
  2. 数据驱动一切：严格遵守 Vue 的响应式数据驱动视图理念。如果非要操作视图元素（比如获取节点高度），必须使用 uni-app 提供的 uni.createSelectorQuery()。

二、 主要的语法与开发差异

1. 标签（组件）的降维打击

在 Web 开发中，我们用 HTML 标签（div, span, img）。在 uni-app 中，为了兼容小程序和 App，必须使用基础组件（靠近微信小程序规范）。

  • ️
  • ️
  • ️ （注意：image 默认有宽高，不像 img 默认由内容撑开）
  • ️

2. 路由管理的剥离

Vue 开发者习惯用 vue-router。但在 uni-app 中，不需要也不建议使用 vue-router。 uni-app 采用类似小程序的路由配置方式：

  • 配置：所有页面必须在 pages.json 中注册。
  • 跳转：使用 uni.navigateTo()、uni.redirectTo()、uni.switchTab() 等 API，或者 标签。
// 伪代码对比
// Vue Router 跳转
router.push({ path: '/pages/detail', query: { id: 1 } })
​
// uni-app 跳转
uni.navigateTo({
  url: '/pages/detail/detail?id=1'
})

3. 生命周期的“加戏”

除了 Vue 原生的生命周期（onMounted, onUnmounted 等），uni-app 引入了应用生命周期和页面生命周期。

  • 页面生命周期：最常用的是 onLoad(options)（页面加载，接收路由参数）和 onShow()（页面每次显示）。
  • 注意点：Vue 的 created / setup 会在 onLoad 之前执行。建议初始化网络请求写在 onLoad 中，而不是 onMounted，因为 onLoad 能直接拿到路由参数。

三、 API 与组件库选择

1. API 的替换

所有 Web 专属 API 都被 uni-app 重新封装成了跨端 API：

  • 网络请求：axios / fetch ️ uni.request()
  • 本地存储：localStorage.setItem ️ uni.setStorageSync()
  • 弹窗提示：alert / ElMessage ️ uni.showToast() / uni.showModal()

2. UI 组件库的断舍离

千万不要在 uni-app 中使用 Element Plus、Ant Design 等基于 DOM 的 Web UI 库！ 它们在小程序和 App 中会直接报错。

推荐的跨端组件库：

  1. uni-ui：官方出品，最稳妥，兼容性最好，按需引入，体积小。
  2. uView Plus：目前生态最火的 Vue3 跨端组件库，功能极其丰富，适合快速外包和后台系统。
  3. ThorUI / GraceUI：部分收费，设计感较好。

四、 版本差异：Vue 与 uni-app 的恩怨情仇

1. Vue 2 vs Vue 3

uni-app 目前全面拥抱 Vue 3。