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（标准版免费）；
内容摘要

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

你将了解到：

  • 原理背景
  • 分步操作
  • 调用接口渲染列表
  • 常见错误排查
  • 进阶实战与生产最佳实践

适合人群：需要动手落地、想补齐技术短板的开发者。

全文共 6 个章节，按「原理背景 → 进阶实战与生产最佳实践」的顺序展开，每节都能单独查阅，配有可直接照做的清单与模板。

内容侧重可落地的操作流程与常见坑点，读完就能对照自己的情况动手，不需要额外补理论基础。

以上为全文要点速览，完整内容需解锁后阅读

🔒 登录后查看全文

登录后即可查看完整内容