深入解析微信小程序开发：组件分类与应用指南
️关于作者：大家好，我是易事繁花，一名渴望积累知识的大学生。
个人主页：一石繁花，
专栏系列：微信小程序
座右铭：生命也会燃烧和腐败。我愿意燃烧并耗尽所有的光芒。
介绍
⚡学习了Web前端开发，相信大家对前端开发都有了一定深入的了解。今天我开了一个微信小程序专栏。我主要是想从移动端开发的方向进一步发展，而对我来说，写移动博文是第一位的。一站式是小程序开发。希望阅读我文章的朋友能够对您有所帮助。
目录
小程序—组件
小程序中的组件由宿主环境提供，开发者可以基于组件快速构建漂亮的页面结构。
组件分类：（红色标注的是关键知识）
① 视图容器 ② 基本内容 ③ 表单组件 ④ 导航组件 ⑤ 媒体组件 ⑥ 地图组件 ⑦ 组件 ⑧ 开放能力 ⑨ 原生组件 ⑩ 辅助功能、导航栏和页面属性配置节点。
原来的成分分为九类，现在分为十二类。新增了原生组件、导航栏、页面属性配置节点的描述。如果想了解更多组件的知识，建议阅读微信官方文档中组件的说明。 。
查看容器类组件名称功能描述名称功能描述
-
覆盖在本机组件上的图像视图
页-
页面容器
-看法
文本视图覆盖原生组件
-看法
可滚动视图区域
-
匹配检测节点
-
共享元素
-区域
-移动视野范围
滑块视图容器
-看法
可在页面上拖动、滑动的可移动视图容器
看法
查看容器
-物品
只能放置在组件中，宽度和高度自动设置为100%
常用视图容器组件
①视图
●普通视野区
●类似于HTML中的div，是块级元素
●常用于实现页面布局效果
②-视图
●可滚动视图区域
●常用于实现滚动列表效果
③ 与项
●轮播容器组件和轮播项目组件
view组件的使用（类似于web前端的div，只是用了一个而已）
我是相当于 div 的容器组件 大家想了解更多微信小程序可以关注一下作者 csdn搜索亦世凡华、哦
/* pages/person/person.wxss */ .view{ color: #f00; text-align: center; font-weight: bold; } .content span{ font-size: 1.5em; color: #008c8c; } .content{ color: #0f0; margin-top: 30px; } .content1{ margin-top: 30px; color: #ffd345; font-size: 25px; }
-view组件的使用（实现垂直滚动效果）
手机 电脑 平板 键盘
/* pages/person/person.wxss */ .container1 view{ width: 100px; height: 100px; text-align: center; line-height: 100px; } .container1 view:nth-child(1){ background-color: #f00; } .container1 view:nth-child(2){ background-color: #0f0; } .container1 view:nth-child(3){ background-color: #00f; } .container1 view:nth-child(4){ background-color: gold; } .container1{ border: 1px solid red; width: 100px; height: 200px; }
微信小程序中有默认样式，其中：flex不起作用。建议编写类名时避免使用有特殊含义的关键字，否则程序中可能会出现一些Bug。
以及-item组件的使用（实现轮播图片的效果）
手机 电脑 平板 键盘
/* pages/person/person.wxss */ .swiper-container{ height: 150px; /* 轮播图容器的宽度 */ } .item{ height: 100%; line-height: 150px; text-align: center; } swiper-item:nth-child(1) .item{ background-color: #f00; } swiper-item:nth-child(2) .item{ background-color: #0f0; } swiper-item:nth-child(3) .item{ background-color: #00f; } swiper-item:nth-child(4) .item{ background-color: #ff0; }
组件常用属性介绍、属性类型说明、默认值
-点
是否显示面板指示点
-
rgba(0,0,0,.3)
指针颜色
--
#
当前所选指示点的颜色
是否自动切换
5000
自动切换时间间隔
是否使用连接滑动
根据以上属性就可以制作一个简单的动画了。让我们仔细看看这些变化。
基本内容 组件名称 功能说明
文本
文本
富文本
富文本
图标
图标组件
进度条
常用的基本内容组件
①正文
●文本组件
●类似于HTML中的span标签，是一个内联元素
② 富文本
●富文本组件
●支持将HTML字符串渲染为WXML结构
文本组件的使用（实现长按选中文本内容的效果）
之前官方文档中使用的已经废弃，现在使用user-。您可以在这里了解它。
进行手机号的复制： 13333333333
使用富文本组件（将 HTML 字符串呈现为相应的 UI 结构）
其他常用组件
①
●按钮组件
●比HTML中的按钮更多的功能
●可以通过open类型属性调用微信提供的各种功能（客服、转发、获取用户授权等）
②
●图片组件
●元件默认宽度约为，高度约为
按钮的基本使用
-------通过 type 指定按钮类型--------- 默认按钮 主色调按钮 警告按钮 --------size="mini" 小尺寸按钮-------- 默认按钮 主色调按钮 警告按钮 ------------plain 镂空按钮-------------- 普通按钮 主色调按钮 警告按钮
组件的基本使用
image{ border: 1px solid red; }
组件中mode属性说明
组件中的mode属性用于指定图像的剪切和缩放模式。常用的模式属性如下：
模式值说明
（默认值）缩放模式，在不保持长宽比的情况下缩放图像，使图像的宽度和高度完全拉伸以填充元素
缩放模式，保持宽高比并缩放图片，使图片的长边能够完整显示
缩放模式，保持图像的长宽比，仅保证图像短边能够完整显示
缩放模式，宽度不变，高度自动变化，保持原图长宽比不变。
缩放模式，高度不变，宽度自动变化，保持原图长宽比不变。
今天的讲解就到此为止，下一期我们将继续讲解认知小程序的开发！