当前位置:首页 > 技术文章 > 正文内容

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

zonemu3个月前 (07-16)技术文章31

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

相关文章

学习ES6- 入门Vue(大量源代码及笔记,带你起飞)

ES6学习网站: https://es6.ruanyifeng.com/箭头函数普通函数//普通函数 this 指向调用时所在的对象(可变) let fn = function fn(a, b) {...

同事git push到主分支上了,技术总监怒了

事情是这样的,同事前几天提交使用git提交代码的时候不小心提交到主分支上了,关键还提交成功了,这可是他自己开发的模块,还没测试的呢。技术总监也知道了,这下他慌乱了。最后还是技术总监给他兜底了。为了防止...

在 Spring Boot3 中操作 GitLab API 的全面指南

在当今互联网大厂的后端开发工作中,高效管理代码版本和项目协作至关重要。GitLab 作为强大的版本控制系统,其 API 为开发人员提供了丰富的操作可能性。本文将深入探讨如何在 Spring Boot3...

编写简单的.gitlab-ci.yml打包部署项目

服务器说明:192.168.192.120:项目服务器192.168.192.121:GitLab为了可以使用gitlab的cicd功能,我们需要先安装GitLab Runner安装GitLab Ru...

Jenkins 学习笔记(jenkins要学多久)

本学习笔记参考《Jenkins 2.x实践指南》。1. Jenkins 简介#Jenkins 是一款自动化的任务执行工具。通常用于持续集成/持续交付领域。可以通过界面或Jenkinsfile告诉Jen...

我常在使用的几个 VIM 插件(我常在使用的几个 vim 插件)

今天给你分享几个我觉得还不错的 VIM 插件,也许能给你带来一点「惊喜感」。vim主题插件 你完全可以让你的编辑器按照你喜欢的样子呈现,在 vimcolors 这个网站中,汇集了很多的主题,你可以进去...