文渊小筑

主题

Uni-app ​

欢迎来到 Uni-app 开发知识库！

🦄 Uni-app 简介 ​

Uni-app 是 DCloud 推出的使用 Vue.js 开发所有前端应用的框架。一套代码，可编译到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）等多个平台。在国内有很高的市场占有率。

🎯 适用场景 ​

✅ 非常适合 ​

  • 小程序开发（尤其是多平台小程序）
  • 快速开发 App + 小程序
  • 中小型项目
  • Vue 开发者
  • 国内市场应用

⚠️ 不太适合 ​

  • 复杂的原生功能需求
  • 追求极致性能
  • 纯海外市场
  • 大型复杂应用

🎯 学习路线 ​

第一阶段：基础入门 (1-2周) ​

前置要求：

  • Vue 2/3 基础
  • HTML/CSS/JavaScript

  1. Uni-app 基础

    • 项目结构
    • 页面配置
    • 生命周期

  2. 内置组件

    • 视图容器
    • 基础内容
    • 表单组件

  3. 开发工具

    • HBuilderX 使用
    • 条件编译

第二阶段：进阶学习 (2-3周) ​

  1. API 使用

    • 网络请求
    • 数据存储
    • 路由跳转

  2. 跨平台适配

    • 条件编译
    • 平台差异处理
    • 响应式布局

  3. 状态管理

    • Vuex / Pinia
    • 数据共享

第三阶段：实战优化 (1-2个月) ​

  1. 性能优化

    • 分包加载
    • 图片优化
    • 请求优化

  2. 插件与扩展

    • uni-ui 组件库
    • 原生插件使用
    • 云开发

✨ Uni-app 特点 ​

✅ 核心优势 ​

  • 真正的多端 - 一套代码发布到 10+ 个平台
  • Vue 生态 - 使用熟悉的 Vue.js
  • 学习成本低 - 会 Vue 就会 uni-app
  • 生态完善 - 插件市场丰富
  • 国内支持好 - 中文文档、社区活跃
  • 开发效率高 - HBuilderX 集成开发

⚠️ 注意事项 ​

  • 性能略低于原生
  • 某些平台特性受限
  • 主要面向国内市场
  • 复杂交互可能需要原生

📊 与其他框架对比 ​

特性Uni-appTaroFlutter
语言Vue.jsReact/VueDart
性能⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
学习成本🟢 低🟢 低🟡 中
多端支持⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
小程序支持⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
社区生态⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
适合场景小程序为主小程序为主App 为主

🏗️ 项目结构 ​

my-uniapp/
├── pages/                  # 页面
│   ├── index/
│   │   ├── index.vue
│   │   └── index.json     # 页面配置
│   ├── mine/
│   │   └── mine.vue
│   └── tabBar/
├── components/            # 组件
│   ├── uni-nav/
│   └── custom-button/
├── static/                # 静态资源
│   ├── images/
│   └── fonts/
├── store/                 # 状态管理
│   ├── index.js
│   └── modules/
├── utils/                 # 工具函数
│   ├── request.js
│   └── common.js
├── uni_modules/          # uni-app 插件
├── App.vue               # 应用配置
├── main.js               # 入口文件
├── manifest.json         # 应用配置
├── pages.json            # 页面路由
└── uni.scss             # 全局样式

📦 支持的平台 ​

移动端 ​

  • App (iOS、Android)
  • H5 (浏览器)

小程序 ​

  • 微信小程序 ⭐⭐⭐⭐⭐
  • 支付宝小程序 ⭐⭐⭐⭐
  • 百度小程序 ⭐⭐⭐
  • 字节跳动小程序 ⭐⭐⭐
  • QQ 小程序 ⭐⭐⭐
  • 钉钉小程序 ⭐⭐⭐
  • 快应用 ⭐⭐

📖 学习资源 ​

官方资源 ​

推荐课程 ​

中文资源 ​

常用插件 ​

🎯 开始学习 ​

选择一个方向开始深入学习：

💡 学习建议 ​

  1. 先学 Vue - Uni-app 基于 Vue
  2. 用 HBuilderX - 官方 IDE，开发效率高
  3. 多端调试 - 在不同平台测试
  4. 条件编译 - 掌握平台差异处理
  5. 使用插件市场 - 避免重复造轮子
  6. 关注更新 - Uni-app 更新很频繁

🚀 第一个 Uni-app 项目 ​

创建项目 ​

使用 HBuilderX：

  1. 文件 → 新建 → 项目
  2. 选择 uni-app 项目
  3. 选择模板（默认模板 / uni-ui 模板）

或使用 Vue CLI：

bash
vue create -p dcloudio/uni-preset-vue my-uniapp

Hello World 示例 ​

vue
<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <view class="title">你好，Uni-app！</view>
    
    <view class="counter">
      计数：{{ count }}
    </view>
    
    <button type="primary" @click="increment">
      点击 +1
    </button>
    
    <view class="platform">
      当前平台：{{ platform }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      platform: ''
    }
  },
  onLoad() {
    // 获取平台信息
    this.platform = uni.getSystemInfoSync().platform
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
  text-align: center;
}

.title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 30px;
}

.counter {
  font-size: 24px;
  margin: 20px 0;
}

.platform {
  margin-top: 30px;
  color: #666;
  font-size: 14px;
}
</style>

配置页面路由 ​

json
// pages.json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Uni-app Demo",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

运行项目：

  • H5：浏览器运行
  • 微信小程序：微信开发者工具
  • App：真机调试或模拟器

你的第一个 Uni-app 项目完成了！🎉

准备好了吗？让我们用 Vue 开发多端应用！