微信小程序开发入门教程（十一）

微信小程序基础组件介绍

最新推荐文章于 2024-04-07 06:29:35 发布

原创

最新推荐文章于 2024-04-07 06:29:35 发布 · 638 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

本文是微信小程序开发入门教程的一部分，详细介绍了icon、text和progress三种基础组件的用法和属性。icon组件常用于表示状态，支持多种预设样式和自定义图标；text组件用于展示文本，支持嵌套实现特殊样式；progress组件则用于显示进度状态，可通过属性定制样式和动画效果。

背景

终于入职了，线上入职远程办公，感概还是很多的，有机会专门写一下，刚入职熟悉项目，适应新的节奏还是需要时间的，所以时间可能不肯像以前那么充裕了，我尽力保持日更吧，其实之前的两篇都是之前的存稿，确实没什么精力，虽然没做什么事，但是还是觉得很累，可能就是如此吧，无论你是否愿意，生活总是推着我们不断向前。话不多说，之前我们介绍了微信小程序中的容器组件view和scroll-view,而容器内放置的就是各种基本组件，这篇文章就会主要介绍基本组件。

基础组件

icon组件

icon是页面中非常常见的组件，通常表示状态如👍和👎等，起到引导作用，微信小程序提供了一套符合微信设计规范的样式类型，同时也支持通过自定义样式创建自定义图标，icon有一下属性

type：icon的类型有效值包括：success、success_no_circle、info、warn、waiting、cancel、download、search和clear。
size：icon的大小，单位是px，默认值是23px。
color：icon的颜色，同CSS的color

示例如下

<view style="padding: 20px; display: flex; justify-content: space-around;">
<icon type="waiting" size="30"></icon>
<icon type="cancel" size="30"></icon>
<icon type="download" size="30"></icon>
<icon type="search" size="30"></icon>
</view>

<view style