07--组件
一、小程序组件分类
微信团队为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。小程序中的组件也是非常丰富的,开发者可以基于组件快速搭建出漂亮的页面结构。小程序中的组件其实相当于网页中的HTML标签,只不过标签名字不一样。官方把小程序的组件分为了 9 大类,分别是:
① 视图容器
② 基础内容
③ 表单组件
④ 导航组件
⑤ 媒体组件
⑥ 地图组件
⑦ 画布组件
⑧ 开放能力
⑨ 无障碍访问
官方地址:https://developers.weixin.qq.com/miniprogram/dev/component/

二、小程序常用组件
视图容器

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

相关文章:
07--组件
一、小程序组件分类微信团队为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。小程序中的组件也是非常丰富的,开发者可以基于组件快速搭建出漂亮的页面结构。小程序中的组件其实相当于网页中的HTML标签,只不过标签…...
怎么做好一个完整的项目复盘
复盘,是运营必不可少的能力,小到一次买菜的经历,大到百亿千亿的投资项目,都可以通过复盘来总结规律、提升水平。简单说来,复盘可以达到的效果有两条:优化弱项,强化强项明确自己的价值࿰…...
浅谈一下mysql8.0与5.7的字符集
修改字符集 修改步骤 在MySQL8.0版本之前,默认字符集为1atin1,utf8字符集指向的是utf8mb3。网站开发人员在数据库设计的时候往往会将编码修改为ut8字符集。如果遗忘修改默认的编码,就会出现乱码的问题。从MySQL8.0开始,数据库的默认编码将改…...
paddle推理部署(cpu)
我没按照官方文档去做,吐槽一下,官方文档有点混乱。。一、概述总结起来,就是用c示例代码,用一个模型做推理。二、示例代码下载https://www.paddlepaddle.org.cn/paddle/paddleinferencehttps://github.com/PaddlePaddle/Paddle-In…...
想开发IM集群?先搞懂什么是RPC!
即时通讯网官方技术群和社区里,经常有开发者在纠结怎么开发IM集群,虽然真正的使用人数,可能用个人电脑单机都能支撑。你也许会说,明明不需要用到IM集群,干吗要自找麻烦?答曰:“老板说这个得有&a…...
案例13-前端对localStorage的使用分析
一:背景介绍 前端在调用后端接口获取某一个人的评论次数、获赞次数、回复次数。调用之后判断后端返回过来的值。如果返回回来的值是0的话,从缓存中获取对应的值,如果从缓存中获取的评论次数为空那么其他两个的次数也为0。 二:思路…...
CNNIC第51次中国互联网络发展状况统计报告用户规模变化发布、解读与白杨SEO看法
一、第51次《中国互联网络发展状况统计报告》发布 3月2日,中国互联网络信息中心(简称CNNIC)在京发布第51次《中国互联网络发展状况统计报告》。《报告》显示,截至2022年12月,我国网民规模达10.67亿,较2021…...
【数据结构】单链表的实现
本篇主要总结单链表是如何实现的,数据结构是如何管理数据的,详细的介绍每一步是如何实现以及各种注意事项。🚀1.单链表的实现🚀🍭1.1单链表的尾插🍭1.2单链表的头插🍭1.3单链表的打印dz…...
从0到1做产品!产品设计的6个步骤
相信不少产品经理在刚入行时,都遇到过这样的情况: 接到需求后不知所措,然后下意识地照着竞品开始盲目地画原型。 其实,这样的设计过程不仅缺乏逻辑性,在后续阶段也很容易出现各种问题。 在此,跟大家分享一下…...
ESP32遥控器软硬件设计
一. 前言 做智能车 或者 四轴飞控怎么能少得了遥控器呢!在这里给大家分享一个简单的基于ESP32遥控器的设计,包括软硬件以及3D外壳。 二. 硬件设计 1. 功能介绍 遥控器嘛,通信方式是最重要的,本设计支持 WIFI、蓝牙 和 2.4G&…...
vue-template-admin的keep-alive缓存与移除缓存
一,场景 A页面是表单页面,填写后需要跳转B页面。如果B页面不操作返回的话,应该能还原A页面的内容,而如果B页面点击提交,再回到A页面的时候,应该清除缓存。 二,实现方法 A页面要缓存数据&…...
【人工智能 AI】机器学习快速入门教程(Google)
目录 机器学习术语 标签 特性 示例 模型 回归与分类 深入了解机器学习:线性回归 深入了解机器学习:训练和损失 平方损失函数:一种常用的损失函数 机器学习术语 预计用时:8 分钟 什么是(监督式ÿ…...
适配器模式
概览 适配器模式是一种结构型设计模式,用于将一个类的接口转换为客户端所期望的另一种接口。通常情况下,这种转换是由一个适配器类完成的,适配器类包装了原始类,并实现了客户端所期望的接口。这种模式非常适用于在不修改现有代码…...
00后跨专业学软件测试,斩获8.5K高薪逆袭职场
我想说的第一句:既然有梦想,就应该去拼搏还记得,我大学毕业前,就已经暗下决心到xxx培训机构接受培训。那个时候,没有任何海同公司的人主动找我或者联系过我,我是自己在网上发现了xxxx培训机构的!…...
数据结构和算法学习
文章目录精通一个领域切题四件套算法算法的五个条件流程图数据结构数据与信息数据信息数据结构和算法数据结构算法时间复杂度空间复杂度数组 Array优点缺点数组和链表的区别时间复杂度链表 Linked List优点缺点时间复杂度单向链表双向链表循环链表双向循环链表堆栈 Stack队列 Q…...
剑指 Offer II 012. 左右两边子数组的和相等
题目链接 剑指 Offer II 012. 左右两边子数组的和相等 easy 题目描述 给你一个整数数组 nums,请计算数组的 中心下标 。 数组 中心下标 是数组的一个下标,其左侧所有元素相加的和等于右侧所有元素相加的和。 如果中心下标位于数组最左端,那…...
Java货物摆放
题目描述 小蓝有一个超大的仓库,可以摆放很多货物。 现在,小蓝有 � n 箱货物要摆放在仓库,每箱货物都是规则的正方体。小蓝规定了长、宽、高三个互相垂直的方向,每箱货物的边都必须严格平行于长、宽、高。 小蓝希望所…...
计算机求解满足三角形各边数字之和相等的数字填充
圆圈处不重复的填入1至9,使得每条边的四个数字相加的总和相等。 求解思路: 数组中存放1到9的数字,每次随机交换两个数字,构建出新的数字组合,计算这个数字组合是否符合要求。 #include <stdio.h> #include <…...
python魔术方法
魔术方法 魔术方法就是一个类中的方法,和普通方法唯一的不同是普通方法需要调用,而魔术方法是在特定时刻自动触发。这些魔术方法的名字特定,不能更改,但是入口参数的名字可以自己命名。 基本魔术方法 new(cls[,…]) _new_ 是在…...
从0开始学python -48
Python CGI编程-3 CGI中使用Cookie 在 http 协议一个很大的缺点就是不对用户身份的进行判断,这样给编程人员带来很大的不便, 而 cookie 功能的出现弥补了这个不足。 cookie 就是在客户访问脚本的同时,通过客户的浏览器,在客户硬…...
嵌入式开发实战:用状态机+事件驱动框架搞定串口通信(附完整代码)
嵌入式开发实战:状态机与事件驱动框架在串口通信中的高效应用 串口通信作为嵌入式系统中最基础也最常用的外设接口之一,其稳定性和效率直接影响着整个系统的性能表现。传统的轮询式串口处理方式不仅占用大量CPU资源,还难以应对复杂通信协议和…...
实战必备:快马AI打造ensp实验室级安装方案,保障网络教学顺利进行
作为一名网络工程专业的教师,我深知ensp(Enterprise Network Simulation Platform)在实验教学中的重要性。但每次新学期开始,最头疼的就是帮学生们搭建实验环境。不同电脑配置、系统版本、驱动兼容性问题,常常让简单的…...
终极指南:如何让2007年旧Mac运行最新macOS系统
终极指南:如何让2007年旧Mac运行最新macOS系统 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 还在为那台陪伴多年的老Mac无法升级最新系统而烦恼吗࿱…...
Leptin30;YQQVLTSLPSQNVLQIANDLENLRDLLHLL (mouse)
一、基本信息名称: Leptin30(小鼠源瘦素功能片段肽)单字母序列: YQQVLTSLPSQNVLQIANDLENLRDLLHLL三字母序列: Tyr-Gln-Gln-Val-Leu-Thr-Ser-Leu-Pro-Ser-Gln-Asn-Val-Leu-Gln-Ile-Ala-Asn-Asp-Leu-Glu-Asn-Leu-Arg-Asp…...
利用通义千问模型辅助C语言学习:从基础语法到指针难题解析
利用通义千问模型辅助C语言学习:从基础语法到指针难题解析 学C语言,是不是经常卡在某个概念上,比如那个让人又爱又恨的“指针”?或者写了一段代码,运行结果和预想的完全不一样,却死活找不到原因࿱…...
s2-pro语音合成教程:参考音频采样率/格式/信噪比最佳实践
s2-pro语音合成教程:参考音频采样率/格式/信噪比最佳实践 1. 认识s2-pro语音合成工具 s2-pro是Fish Audio开源的专业级语音合成模型镜像,它不仅能将文本转换为自然流畅的语音,还能通过参考音频来复用特定的音色。这意味着你可以上传一段样本…...
Nacos集群启动时,那个神秘的cluster.conf文件到底是怎么被找到和监控的?
Nacos集群启动时cluster.conf文件的寻址与监控机制深度解析 从一次集群配置失效事件说起 上周深夜,我们的分布式系统监控平台突然发出警报——Nacos集群中的三个节点相继失联。紧急排查时发现,明明已经更新了cluster.conf文件新增了两个节点,…...
如何用kill-doc解决30+文档平台下载难题:免费高效的文档获取方案
如何用kill-doc解决30文档平台下载难题:免费高效的文档获取方案 【免费下载链接】kill-doc 看到经常有小伙伴们需要下载一些免费文档,但是相关网站浏览体验不好各种广告,各种登录验证,需要很多步骤才能下载文档,该脚本…...
智慧医疗泡罩药板药片缺失缺陷检测数据集VOC+YOLO格式1300张3类别
注意数据集中图片大约500张是原图剩余为增强图片数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数):1300标注数量(xml文件个数):1300…...
Gemma-3-270m量化压缩实战:4位精度模型部署
Gemma-3-270m量化压缩实战:4位精度模型部署 1. 开篇:小模型的大能量 最近在折腾边缘设备部署时,发现一个挺有意思的现象:很多团队还在用"大炮打蚊子",明明只需要处理一些简单的文本分类任务,却…...
