uni-app:常见组件view、text、icon

**uni-app 常见组件**

在 uni-app 中，视图组件是最基本的组件之一，它们可以用来展示各种类型的内容。下面我们将介绍一些常见的视图组件。

###1. View 组件`View` 组件是最基础的视图组件，可以用来包裹其他组件或元素。它支持多种样式属性，如背景颜色、边框等。

**示例代码**

html<template>
 <view class="container">
 <text>这是一个 View 组件</text>
 </view>
</template>

<script>
export default {
 data() {
 return {}
 }
}
</script>

<style>
.container {
 background-color: #f7f7f7;
 padding:20px;
 border-radius:10px;
}
</style>

**注释**

* `view` 组件可以包裹其他组件或元素。
* `class` 属性用于设置样式类。
* `background-color` 属性用于设置背景颜色。
* `padding` 属性用于设置内边距。
* `border-radius` 属性用于设置圆角。

###2. Text 组件`Text` 组件用于展示文本内容。它支持多种样式属性，如字体大小、颜色等。

**示例代码**

html<template>
 <view class="container">
 <text class="title">这是一个 Text 组件</text>
 <text class="content">这是一行普通的文本内容</text>
 </view>
</template>

<script>
export default {
 data() {
 return {}
 }
}
</script>

<style>
.container {
 background-color: #f7f7f7;
 padding:20px;
}

.title {
 font-size:24px;
 color: #333;
}

.content {
 font-size:16px;
 color: #666;
}
</style>

**注释**

* `text` 组件用于展示文本内容。
* `class` 属性用于设置样式类。
* `font-size` 属性用于设置字体大小。
* `color` 属性用于设置颜色。

###3. Icon 组件`Icon` 组件用于展示图标。它支持多种样式属性，如大小、颜色等。

**示例代码**

html<template>
 <view class="container">
 <icon name="star" size="24" color="#333" />
 <icon name="heart" size="32" color="#f00" />
 </view>
</template>

<script>
export default {
 data() {
 return {}
 }
}
</script>

<style>
.container {
 background-color: #f7f7f7;
 padding:20px;
}
</style>

**注释**

* `icon` 组件用于展示图标。
* `name` 属性用于设置图标名称。
* `size` 属性用于设置大小。
* `color` 属性用于设置颜色。

以上就是 uni-app 中常见的视图组件的介绍。这些组件可以用来展示各种类型的内容，支持多种样式属性，可以根据需求进行定制。