07--组件

news2024/12/25 0:56:22

一、小程序组件分类

微信团队为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。小程序中的组件也是非常丰富的,开发者可以基于组件快速搭建出漂亮的页面结构。小程序中的组件其实相当于网页中的HTML标签,只不过标签名字不一样。官方把小程序的组件分为了 9 大类,分别是:

① 视图容器

② 基础内容

③ 表单组件

④ 导航组件

⑤ 媒体组件

⑥ 地图组件

⑦ 画布组件

⑧ 开放能力

⑨ 无障碍访问

官方地址:https://developers.weixin.qq.com/miniprogram/dev/component/

二、小程序常用组件

  1. 视图容器

1)view容器

视图容器(View)是小程序框架组件中最常见的基础组件,它的作用跟 HTML中的DIV功能非常相似,用来布局 WXML界面。

示例代码:

2)可滚动视图区域 scroll-view

可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

示例代码:

3)滑块视图容器 swiper

滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

4)可移动视图容器 movable-view

可移动的视图容器,在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中,并且必须是直接子节点,否则不能移动

2.基础组件

1.图标 icon

图标。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

2.进度条 progress

进度条。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

3.Text

3 .表单组件

1.按钮 button

示例代码:

2.checkbox及checkbox-group

多项选择器(checkbox - group),内部由多个-checkbox组成。checkbox多项选择器组件,和HTML中的多选框是一样的,用来进行多项选择。

3.富文本编辑器 editor

富文本编辑器,可以对图片、文字进行编辑。

编辑器导出内容支持带标签的 html 和纯文本的 text ,编辑器内部采用 delta 格式进行存储。

通过 setContents 接口设置内容时,解析插入的 html 可能会由于一些非法标签导致解析错误,建议开发者在小程序内使用时通过 delta 进行插入。

富文本组件内部引入了一些基本的样式使得内容可以正确的展示,开发时可以进行覆盖。需要注意的是,在其它组件或环境中使用富文本组件导出的html时,需要额外引入 这段样式,并维护 <qlcontainer><ql-editor></ql-editor></ql-container> 的结构。

图片控件仅初始化时设置有效。

4.表单 form

表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

4.导航组件

1.页面导航 navigator

页面导航(navigator)组件,它类似于HTML中的a标签;

5.媒体组件

1.音频audio

从基础库 1.6.0 开始,本接口停止维护,请使用 wx.createInnerAudioContext 代替

2.camera系统相机

扫码二维码功能,需升级微信客户端至6.7.3。需要用户授权 scope.camera 。 2.10.0起initdone 事件返回 maxZoom,最大变焦范围,相关接口 CameraContext.setZoom。

3.Image

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式,2.3.0 起支持云文件ID

4. Video 视频播放

如果是本地视频,需要搭建nginx服务器。如:http://localhost:81/5321.mp4

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/386460.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

5年测试路,终于爬到了半山腰,结果碰到00后入场,我该拿什么争,我不想35岁被淘汰......

软件测试是一个付出就有回报的工作&#xff0c;可能很多人会说软件测试就是吃青春饭&#xff0c;然而其他工作又何尝不是&#xff1f;没有哪一家公司养尸位素餐之人&#xff0c;大龄员工有被辞退的&#xff0c;也有没被辞退的。干任何职业&#xff0c;抱着一劳永逸的心态&#…

关于k8s集群备份和恢复工具Velero 的一些笔记整理

写在前面 分享一个k8s集群容灾备份恢复开源工具 Velero博文内容涉及&#xff1a; Velero 的简单介绍Velero 安装下载备份恢复 Demo&#xff0c;以及容灾测试 Demo恢复失败情况分析 理解不足小伙伴帮忙指正 我所渴求的&#xff0c;無非是將心中脫穎語出的本性付諸生活&#xff0…

第九届蓝桥杯省赛 C++ A/B组 - 全球变暖

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?spm1011.2415.3001.5343 &#x1f4da;专栏地址&#xff1a;蓝桥杯题解集合 &#x1f4dd;原题地址&#xff1a;全球变暖 &#x1f4e3;专栏定位&#xff1a;为想参加蓝桥杯的小伙伴整理常考算法题解&#xff0c;祝大家…

分布式架构设计模式

咖啡不冲&#xff0c;你一定会成功 分布式架构设计模式一、什么是设计模式&#xff1f;1.1 设计模式的由来1.2 设计模式有哪些种类1.3 如何学习设计模式二、六大设计原则2.1 开闭原则2.2 单一职责原则2.3 里氏替换原则2.4 迪米特法则2.5 接口隔离原则2.6 依赖倒置原则三、创建型…

websocket原理及简单应用

websocket是什么&#xff1f; 一般做系统开发前后端交互使用最多的就是http协议&#xff0c;但http协议是无状态协议每一次前端发起的请求都认为是一次单独的请求和之前的请求无任何关系&#xff0c;所以我们需要http协议分别用户信息时&#xff0c;就需要使用cookie、session…

Rust学习总结之if,while,loop,for使用

目录 一&#xff1a;if的使用 二&#xff1a;while的使用 三&#xff1a;loop的使用 四&#xff1a;for的使用 本文总结的四种语句&#xff08;if&#xff0c;while&#xff0c;loop&#xff0c;for&#xff09;除了loop&#xff0c;其他的三个在C语言或者Python中都是常见…

DDD系列 - 第1讲 DDD相关概念入门

目录一、引言二、 统一语言Ubiquitous Language三、 三个阶段&#xff08;战略、战术、实现&#xff09;阶段1&#xff1a;战略设计阶段阶段2&#xff1a;战术设计阶段阶段3&#xff1a;技术实现阶段四、限界上下文Bounded Context五、上下文映射Context Map防腐层Anti-Corrupt…

深度学习代码怎么读-小白阶段性思路

深度学习代码怎么读-小白阶段性思路目前思路学习资料读代码工具-chatgpt目前思路 努力上路的小白一枚&#xff0c;麻烦路过的大佬指导一二&#xff0c;同时希望能和大家交流学习~ 和学长、实习老师们交流后的目前思路&#xff1a; 先找到自己研究领域的顶级期刊&#xff0c;…

21 Nacos客户端本地缓存及故障转移

Nacos客户端本地缓存及故障转移 在Nacos本地缓存的时候有的时候必然会出现一些故障&#xff0c;这些故障就需要进行处理&#xff0c;涉及到的核心类为ServiceInfoHolder和FailoverReactor。 本地缓存有两方面&#xff0c;第一方面是从注册中心获得实例信息会缓存在内存当中&a…

AGV机器人出圈:助力产线物流自动化

随着开年档电影《流浪地球2》的热映&#xff0c;里面的四足仿生机器人机械狗“笨笨”、可穿戴的外骨骼机器人等“黑科技”&#xff0c;都让人对机器人的魅力刮目相看&#xff0c;机器人成功“出圈”了&#xff0c;随着智能技术的发展与进步&#xff0c;我们常见的机器人种类越来…

Linux命令之sed

sed&#xff0c;Stream Editor&#xff08;字符流编辑器&#xff09;的缩写&#xff0c;简称流编辑器&#xff0c;是操作、过滤、转换文本内容的工具。 常用功能包括结合正则表达式对文件实现快速的增删改查。 工作原理 sed有2个空间来缓存数据&#xff0c;paattern space&am…

Qt交叉编译环境搭建

环境及版本&#xff1a;Deepin 20.3 Qt 5.12.9 arm编译工具 gcc-linaro-7.5.0-2019.12-x86_64_arm-linux-gnueabihf.tar.xz 1.下载Qt源码&#xff1a;qt-everywhere-src-5.12.9.tar.xz&#xff0c;并解压 2.下载arm编译工具&#xff1a; gcc-linaro-7.5.0-2019.12-x86_64_arm…

央企集团是怎么设置信息化、数字化部门的?

在数字经济大潮中&#xff0c;数字化转型已不是企业的“选修课”&#xff0c;而是关乎企业生存和长远发展的“必修课”。在企业数字化转型中&#xff0c;国有企业特别是中央企业普遍将数字化转型战略作为“十四五”时期业务规划的重要内容之一&#xff0c;数字化能力也成为衡量…

代码随想录【Day31】| 455. 分发饼干、376. 摆动序列、53. 最大子数组和

455. 分发饼干 题目链接 题目描述&#xff1a; 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最小尺寸&#xff…

用Docker搭建yolov5开发环境

拉取镜像 sudo docker pull pytorch/pytorch:latest 创建容器 sudo docker run -it -d --gpus "device0" pytorch/pytorch bash 查看所有容器 sudo docker ps -a 查看运行中的容器 sudo docker ps 进入容器 docker start -i 容器ID 将依赖包全都导入到requiremen…

如何将图数据库应用于电影智能推荐

导读 电影&#xff0c;是一种结合视觉与听觉的现代艺术。如今&#xff0c;电影已不单是人们娱乐消遣的生活方式&#xff0c;也逐渐成为国家文化软实力的重要标志之一。据有关数据统计&#xff0c;2021年中国影视行业市场规模达2349亿元&#xff0c;同比增长23.2%&#xff0c;预…

java--IO

IO1.文件流2.常用的文件操作&#xff08;1&#xff09;根据路径构建一个File对象&#xff08;2&#xff09;根据父目录文件子路径构建&#xff08;3&#xff09;根据父目录子路径构建&#xff08;4&#xff09;获取文件相关信息&#xff08;5&#xff09;目录的操作和文件的删除…

计算机图形学07:有效边表法的多边形扫描转换

作者&#xff1a;非妃是公主 专栏&#xff1a;《计算机图形学》 博客地址&#xff1a;https://blog.csdn.net/myf_666 个性签&#xff1a;顺境不惰&#xff0c;逆境不馁&#xff0c;以心制境&#xff0c;万事可成。——曾国藩 文章目录专栏推荐专栏系列文章序一、算法原理二、…

Git 企业级分支提交流程

Git 企业级分支提交流程 首先在本地分支hfdev上进行开发&#xff0c;开发后要经过测试。 如果测试通过了&#xff0c;那么久可以合并到本地分支develop&#xff0c;合并之后hfdev和development应该完全一样。 git add 文件 git commit -m ‘注释’ git checkout develop //切换…

svn使用

一、SVN概述 1.1为什么需要SVN版本控制软件 1.2解决之道 SCM&#xff1a;软件配置管理 所谓的软件配置管理实际就是对软件源代码进行控制与管理 CVS&#xff1a;元老级产品 VSS&#xff1a;入门级产品 ClearCase&#xff1a;IBM公司提供技术支持&#xff0c;中坚级产品 1.…