uni-app 跨端开发完全教程：一套 Vue 代码同时发布小程序 / H5 / App

uni-app 是 DCloud 出品、国内最流行的跨端框架，用 Vue 语法一套代码编译到微信小程序、支付宝小程序、H5、App。本文带你从零做出一个能跑的多端应用。

一、原理背景

1.1 为什么选 uni-app

如果你是前端、会用 Vue，就几乎零成本上手 uni-app。它的价值在于：

  • 一次开发，多端发布：同一份代码条件编译到 11+ 平台；
  • 生态成熟：插件市场（uni-app 插件市场）有上万现成模块；
  • 国内友好：对微信/支付宝/抖音小程序、各家 App 打包支持开箱即用。

1.2 与普通 Vue 的区别

uni-app 运行在小程序里没有 DOM/BOM，所以：

  • 用 uni.request 替代 axios；
  • 用 uni.navigateTo 替代 vue-router；
  • 标签用 <view>、<text> 替代 <div>、<span>（编译时自动转换）。

1.3 编译模型

.vue 源文件 → 条件编译(#ifdef MP-WEIXIN) → 编译器 → 微信小程序 / H5 / App

二、分步操作

步骤 1：安装 HBuilderX（最省事）

  1. 下载 HBuilderX（标准版免费）

🔒 付费文档

支付 5 积分后即可解锁全部内容