《uni-app跨平台开发完全指南》- 05 - 基础组件使用

基础组件

欢迎回到《uni-app跨平台开发完全指南》系列！在之前的文章中，我们搭好了开发环境，了解了项目目录结构、Vue基础以及基本的样式，这一章节带大家了解基础组件如何使用。掌握了基础组件的使用技巧，就能独立拼装出应用的各个页面了！

一、 初识uni-app组件

在开始之前，先自问下什么是组件？

你可以把它理解为一个封装了结构（WXML）、样式（WXSS）和行为（JS）的、可复用的自定义标签。比如一个按钮、一个导航栏、一个商品卡片，都可以是组件。

uni-app的组件分为两类：

1. 基础组件：框架内置的，如<view>, <text>, <image>等。这些是官方为我们准备好的标准组件。
2. 自定义组件：开发者自己封装的，用于实现特定功能或UI的组件，可反复使用。

就是这些基础组件，它们遵循小程序规范，同时被映射到各端，是实现“一套代码，多端运行”的基础。

为了让大家对基础组件有个全面的认识，参考下面的知识脉络图：

接下来，我们详细介绍下这些内容。

---

二、 视图与内容：View、Text、Image

这三个组件是构建页面最基础、最核心的部分，几乎无处不在。

2.1 一切的容器：View

<view> 组件是一个视图容器。它相当于传统HTML中的 <div> 标签，是一个块级元素，主要用于布局和包裹其他内容。

核心特性：

• 块级显示：默认独占一行。
• 样式容器：通过为其添加class或style，可以轻松实现Flex布局、Grid布局等。
• 事件容器：可以绑定各种触摸事件，如@tap（点击）、@touchstart（触摸开始）等。

以一个简单的Flex布局为例：

<!-- 模板部分 -->
<template>
  <view class="container">
    <view class