一、前言

在小程序、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 项目实战
• 登录、列表、上拉加载
• 支付、分享、推送
• 性能优化与分包

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