uni-app 零基础入门精讲：从环境搭建到多端发布

一、前言

在小程序、App、H5 多端并行的今天，重复开发成本高、效率低。uni-app 凭借一套代码、多端发布的能力，成为前端跨端开发首选框架。本文以极简、清晰、可落地的方式，带你零基础快速掌握 uni-app 核心知识，学完即可独立开发项目。

---

二、uni-app 到底是什么？

uni-app 是 DCloud 推出的跨平台应用开发框架，基于 Vue 语法构建。一次编写，可发布到：iOS / Android / 微信小程序 / 支付宝小程序 / 抖音小程序 / H5 / 百度小程序 等十多个平台。

核心优势：

• 学习成本极低（会 Vue 就能上手）
• 开发效率提升 50% 以上
• 性能接近原生
• 生态丰富、插件齐全
• 条件编译轻松处理多端差异

---

三、开发环境搭建（100% 新手友好）

1. 安装编辑器（必装）

下载HBuilderX： https://www.dcloud.io/hbuilderx.html

2. 安装调试工具

• 微信开发者工具（调试小程序）
• 手机开启 USB 调试（运行 App）

新手推荐：HBuilderX + 微信开发者工具，无需配置命令行。

---

四、创建并运行项目（超简单）

1. 新建项目

文件 → 新建 → 项目 → 选择uni-app→ 默认模板 → 创建

2. 运行项目

• 运行 → 运行到浏览器（H5）
• 运行 → 运行到小程序模拟器（微信小程序）
• 运行 → 运行到手机（真机 App）

五、项目结构说明（看懂就能开发

plaintext

pages 页面目录 static 图片、静态资源 App.vue 全局入口 main.js 入口文件 pages.json 路由、导航栏配置 manifest.json 应用配置（名称、图标、权限）

六、基础页面代码（标准模板）

vue

<template> <view class="page"> <text>{{ title }}</text> <button @click="showMsg">点击测试</button> </view> </template> <script> export default { data() { return { title: "Hello uni-app" }; }, methods: { showMsg() { uni.showToast({ title: "学习成功", icon: "success" }); } } }; </script> <style scoped> .page { padding: 30rpx; } </style>

---

七、pages.json 路由配置

json

{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } } ], "globalStyle": { "navigationBarTextStyle": "white", "navigationBarBackgroundColor": "#42b983", "backgroundColor": "#f5f5f5" } }

---

八、最常用 API（必会）

js

运行

// 页面跳转 uni.navigateTo({ url: "/pages/detail/detail" }); // 网络请求 uni.request({ url: "https://xxx.com/api" }); // 本地存储 uni.setStorageSync("token", "123456"); // 提示框 uni.showToast({ title: "操作成功" });

---

九、条件编译（跨端必备）

只在某平台显示内容：

vue

<!-- #ifdef MP-WEIXIN --> <view>仅微信小程序显示</view> <!-- #endif --> <!-- #ifdef APP-PLUS --> <view>仅 App 显示</view> <!-- #endif -->

---

十、打包发布（快速上线）

1. 小程序

发行 → 小程序 → 微信开发者工具上传 → 提交审核

2. H5

发行 → 网站 H5 → 部署到服务器

3. App

发行 → 云打包 → 生成 APK / IPA

---

十一、学习建议（非常重要）

1. 先掌握 Vue 基础（data、methods、指令）
2. 优先练小程序和 H5
3. 多用 rpx 单位（自动适配）
4. 多看官方文档
5. 多写小项目练手

---

十二、总结

uni-app 是入门最简单、就业最广、效率最高的跨端框架，非常适合新手学习。 只要会基础 HTML + CSS + JS 或 Vue，就能快速开发出可上线的多端应用。

未来我将继续更新：

• uni-app 项目实战
• 登录、列表、上拉加载
• 支付、分享、推送
• 性能优化与分包

欢迎点赞、收藏、关注，持续更新前端干货！