3分钟入门微信小程序开发组件分类常用基本组件

liuian 2025-01-20 14:46 65 浏览

微信为小程序提供的组件，可以帮助开发者快速搭建出漂亮的页面结构，共9大类，包括：

1.视图容器：view布局组件（相当于div）、scroll-view滚动列表组件、swiper和swiper-item轮播图组件

2.基础内容：

text文本组件（相当于span，selectable支持长按选中效果）、rich-text富文本组件（通过nodes属性，支持把html字符串渲染为wxml结构）。

button按钮组件，有type、size、plain三个参数，且通过open-type属性调用微信提供的各功能，如转发、获取用户信息等。（注意在app.json文件中style：v2控制着整体的风格）

image图片组件，默认宽300px，高240像素，可通过src加载指定路径的图片，指定mode属性确定缩放方式，mode属性值有scaleToFill默认不保持纵横比缩放、aspectFit保持纵横比长边完全显示缩放、aspectFill保持纵横比短边完全显示缩放、widthFix原图宽度不变缩放高度自动、heightFix原图高度不变缩放宽度自动。

3.表单组件：input用户输入单行文本，textarea接收用户输入的多行文本，form将表单内的输入项进行组合，实现数据的提交，radio-group和radio单选按钮选择器，checkbox-group和checkbox：复选框选择器。

4.导航组件：navigator页面链接的导航组件，用于实现页面间的跳转。其中，open-type属性可以实现不同的跳转方式，如switchTab用于切换到tabBar页面，reLaunch用于关闭所有页面，打开到应用内的某个页面等。

5.媒体组件：audio和video分别用于播放音频和视频文件。

6.map地图组件

7.canvas画布组件

8.开放能力：API接口，如获取用户信息、支付功能等。这些API接口可以帮助开发者更方便地调用微信提供的功能，增强应用的功能性和用户体验。

9.无障碍访问：虽然这个组件类型对于提升应用的包容性和可访问性非常重要，但在实际开发中，它的使用频率可能不如其他组件高。这主要是因为无障碍访问的考虑更多是在应用的设计和开发过程中融入的，而不是通过单独的组件来实现的。

小程序image