前言

UniApp 是一个基于 Vue.js 的多端开发框架，可以使用一套代码同时发布到小程序、H5、iOS、Android 等多个平台。对于初学者而言，如何从零开始学习并掌握 UniApp？本文将为你提供一个清晰的学习路径。

1. 基础知识准备

在学习 UniApp 之前，需要掌握以下基础知识：

HTML: 熟悉基本标签、结构和语义化。
CSS: 掌握布局（Flexbox、Grid）、常见样式属性，以及移动端适配（如媒体查询）。
JavaScript: 熟悉基础语法、ES6+ 特性（如箭头函数、解构赋值、模板字符串等）。
Vue.js: 掌握 Vue2 或 Vue3 的基础知识，包括组件化开发、生命周期、数据绑定、指令等。

学习资源推荐：
菜鸟教程 HTML/CSS/JS
Vue 官方文档

2. 初识 UniApp

2.1 UniApp 是什么

UniApp 是一个跨平台框架，基于 Vue 语法开发，通过编译转换，可以运行在多个平台。其核心特点包括：

一套代码，多端运行：支持 H5、小程序、App 等。
丰富的插件和生态：拥有大量官方/第三方插件和组件。
强大的社区支持：文档齐全，案例丰富。

2.2 环境搭建

安装 HBuilderX：HBuilderX 是专门为 UniApp 提供支持的 IDE。
下载 HBuilderX
创建项目：
打开 HBuilderX，选择 新建 -> UniApp 项目。
选择空白模板或默认模板。

3. UniApp 基础知识

3.1 项目结构

UniApp 的典型项目结构如下：

1
2
3
4
5
6
7
8
├── pages/            # 页面目录
├── static/           # 静态资源（图片、字体等）
├── components/       # 自定义组件目录
├── unpackage/        # 打包目录
├── main.js           # 项目入口文件
├── App.vue           # 应用配置
├── manifest.json     # 应用配置文件（平台相关）
├── pages.json        # 页面配置文件

3.2 核心配置文件

pages.json：配置页面路由、导航栏等。
manifest.json：配置应用信息（如 App 名称、图标、平台适配等）。
App.vue：全局布局、样式文件。

3.3 常用组件

基础组件：如 view、text、image、scroll-view 等。
表单组件：如 input、button、picker 等。
媒体组件：如 video、audio。
示例代码
创建一个简单页面，展示按钮点击计数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <view class="container">
    <text>{{ count }}</text>
    <button @click="increment">点击 +1</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count += 1;
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>

4. 进阶学习

4.1 API 使用

UniApp 提供了丰富的 API，可以调用设备功能和平台能力，例如：

网络请求：uni.request
存储：uni.setStorage、uni.getStorage
导航：uni.navigateTo、uni.redirectTo
多媒体：uni.chooseImage、uni.previewImage

示例：网络请求

1
2
3
4
5
6
7
8
9
10
uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error(err);
  }
});

4.2 自定义组件

在 components/ 目录下创建一个自定义组件：

定义组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <view class="custom-component">
    <slot></slot>
  </view>
</template>

<style>
.custom-component {
  padding: 20rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
}
</style>

在页面中引入和使用：

1
2
3
4
5
6
7
import CustomComponent from '@/components/CustomComponent.vue';

export default {
  components: {
    CustomComponent
  }
};
1
2
3
<custom-component>
  <text>这是一个自定义组件</text>
</custom-component>

5. 多端适配

5.1 媒体查询

使用 uni.scss 中的变量：

1
2
3
4
5
6
@import 'uni.scss';

.container {
  padding: 10rpx;
  font-size: var(--font-size-base);
}

5.2 平台差异

通过 process.env.UNI_PLATFORM 判断当前运行环境：

1
2
3
if (process.env.UNI_PLATFORM === 'mp-weixin') {
  console.log('当前是微信小程序');
}

6. 学习资源推荐

官方文档：UniApp 官方文档
插件市场：UniApp 插件市场
社区交流：UniApp 社区论坛
视频教程：B站 UniApp 视频教程

7. 总结

学习 UniApp 是一个循序渐进的过程。通过掌握基础知识、熟悉框架核心功能，再结合实战项目逐步提升开发能力，你将能熟练开发各种跨平台应用。希望本文能为你的学习提供清晰的方向和指引！