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

boyanx7个月前技术教程44

微信为小程序提供的组件,可以帮助开发者快速搭建出漂亮的页面结构,共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.无障碍访问:虽然这个组件类型对于提升应用的包容性和可访问性非常重要,但在实际开发中,它的使用频率可能不如其他组件高。这主要是因为无障碍访问的考虑更多是在应用的设计和开发过程中融入的,而不是通过单独的组件来实现的。

相关文章

鸿蒙开发:如何解决软键盘弹出后的间距

前言本文基于Api13近日在查看github中的issue时,发现了一个问题,说的是当自定义弹窗中有TextInput组件时,触摸焦点弹起软键盘后,组件和软键盘之间有一个间距,看到问题后,“我就在想,...

JavaScript 控制文本框和文本域(js设置文本框的值)

文本框是表单中与用户打交道最多的元素之一,它包括单行文本框<input type="text">和多行文本框<textarea>,更广义的还可以包括密码输入框&...

QML控件:TextInput, TextField, TextEdit, TextArea用法及自定义

本文主要介绍基本元素 TextInput, TextField, TextEdit, TextArea 等的基本属性。Textlnput 与 TextField 为行编辑控件,TextEdit 与 T...

行内元素和块级元素-html教程(html中行内元素和块级元素的区别)

块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table行内元素:span, strong, em,...

简单了解CSS3的all属性(css全部属性)

作者:张鑫旭(@张鑫旭)网址:http://www.zhangxinxu.com/wordpress/2016/03/know-about-css3-all/一、兼容性一些CSS文章,或者CSS文档,...

前端入门——html 表单控件使用(html表单应用)

上篇介绍了表单的使用,表单有很多控件,比如输入框,密码框、文本域,按钮等。按类型可分如下:输入类控件菜单类控件输入类组件 —— input此类控件有很多种类型,使用<input type=...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。