UniApp 基础组件详解

UniApp 提供了一套丰富的基础组件，这些组件在不同平台上都有良好的兼容性表现。下面我将分类介绍最常用的基础组件及其使用方法。

一、视图容器组件

1. view 视图容器

<view 
  class="container" 
  hover-class="hover-style" 
  hover-start-time="50" 
  hover-stay-time="400"
>
  这是一个视图容器
</view>

属性：

hover-class: 点击时添加的样式类
hover-start-time: 按住后多久出现点击态（ms）
hover-stay-time: 手指松开后点击态保留时间（ms）

2. scroll-view 可滚动视图

<scroll-view 
  scroll-y 
  :scroll-top="scrollTop"
  @scroll="handleScroll"
  style="height: 300px;"
>
  <view v-for="item in 50" :key="item">第{{item}}项</view>
</scroll-view>

常用属性：

scroll-x/y: 允许横向/纵向滚动
scroll-top/left: 设置滚动条位置
@scroll: 滚动时触发事件

3. swiper 轮播图

<swiper 
  :indicator-dots="true" 
  :autoplay="true" 
  :interval="3000"
>
  <swiper-item v-for="(item,index) in banners" :key="index">
    <image :src="item.image" mode="aspectFill"></image>
  </swiper-item>
</swiper>

重要属性：

indicator-dots: 显示指示点
autoplay: 自动播放
interval: 自动切换时间间隔

二、基础内容组件

1. text 文本

<text 
  selectable 
  space="ensp" 
  decode
>
  这段文本可以被选中，&nbsp;会被转义为空格
</text>

特性：

支持长按选择文本
decode: 可以解析   < 等 HTML 实体

2. rich-text 富文本

<rich-text :nodes="htmlContent"></rich-text>

data() {
  return {
    htmlContent: `
      <div style="color: red;">
        <h1>标题</h1>
        <p>段落内容</p>
      </div>
    `
  }
}

三、表单组件

1. button 按钮

<button 
  type="primary" 
  size="mini" 
  :loading="isLoading"
  @click="handleClick"
>
  提交
</button>

类型：

default: 默认
primary: 主色
warn: 警告色
size: default/mini

2. input 输入框

<input 
  v-model="inputValue" 
  type="number" 
  placeholder="请输入数字"
  @focus="onFocus"
  @blur="onBlur"
/>

常用类型：

text: 文本输入
number: 数字输入
password: 密码输入
digit: 带小数点的数字键盘

3. picker 选择器

<picker 
  mode="selector" 
  :range="options" 
  @change="handlePickerChange"
>
  <view>当前选择：{{options[currentIndex]}}</view>
</picker>

模式：

selector: 普通选择器
multiSelector: 多列选择器
time: 时间选择器
date: 日期选择器
region: 省市区选择器

四、媒体组件

1. image 图片

<image 
  src="/static/logo.png" 
  mode="aspectFit" 
  lazy-load
  @load="imageLoaded"
></image>

mode 取值：

scaleToFill: 缩放填充（默认）
aspectFit: 保持宽高比
aspectFill: 保持宽高比填充
widthFix: 宽度不变高度自动变化

2. video 视频

<video 
  src="http://example.com/video.mp4" 
  controls 
  :autoplay="false"
  @play="onPlay"
></video>

常用功能：

danmu-list: 弹幕数据
enable-danmu: 是否显示弹幕按钮
controls: 是否显示默认播放控件

五、地图组件

map 地图

<map 
  id="myMap" 
  :latitude="latitude" 
  :longitude="longitude"
  :markers="markers"
  @markertap="onMarkerTap"
></map>

基本使用：

data() {
  return {
    latitude: 39.909,
    longitude: 116.39742,
    markers: [{
      id: 1,
      latitude: 39.909,
      longitude: 116.39742,
      title: '北京市'
    }]
  }
},
methods: {
  onMarkerTap(e) {
    console.log('点击了标记点', e.markerId)
  }
}

六、画布组件

canvas 画布

<canvas 
  canvas-id="myCanvas" 
  style="width: 300px; height: 200px;"
></canvas>

绘制示例：

onReady() {
  const ctx = uni.createCanvasContext('myCanvas', this)
  ctx.setFillStyle('#FF0000')
  ctx.fillRect(10, 10, 150, 75)
  ctx.draw()
}

七、web-view 组件

<web-view 
  src="https://uniapp.dcloud.io/" 
  @message="handleWebViewMessage"
></web-view>

注意事项：

需要配置业务域名（小程序平台）
可通过 uni.postMessage 与网页通信

八、扩展组件

1. uni-ui 官方组件库

需先安装 @dcloudio/uni-ui：

npm install @dcloudio/uni-ui

使用示例：

<uni-badge text="99+" type="error"></uni-badge>
<uni-icons type="contact" size="30"></uni-icons>

2. 常用扩展组件

uni-swipe-action: 滑动操作
uni-collapse: 折叠面板
uni-segmented-control: 分段器
uni-popup: 弹出层

九、组件使用注意事项

平台差异：
- 某些组件在不同平台有不同表现（如 checkbox 在H5和小程序的样式差异）
- 可通过条件编译处理差异：
```

<ad unit-id="xxxx"></ad>

```
样式控制：
- 部分组件样式需要使用组件提供的属性而非CSS（如 button 的边框）
性能优化：
- 长列表使用 scroll-view 时注意性能问题
- 图片使用 lazy-load 懒加载
事件处理：
- 组件事件通常使用 @ 绑定，如 @change、@click
- 部分组件有特有事件（如 scroll-view 的 @scrolltoupper）

UniApp 的基础组件经过精心设计，可以满足大多数跨平台开发需求。开发者应熟悉各组件特性和平台差异，才能开发出体验良好的应用。