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 就是在客户访问脚本的同时,通过客户的浏览器,在客户硬…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
Qemu arm操作系统开发环境
使用qemu虚拟arm硬件比较合适。 步骤如下: 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载,下载地址:https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...
第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10+pip3.10)
第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10pip3.10) 一:前言二:安装编译依赖二:安装Python3.10三:安装PIP3.10四:安装Paddlepaddle基础框架4.1…...
js 设置3秒后执行
如何在JavaScript中延迟3秒执行操作 在JavaScript中,要设置一个操作在指定延迟后(例如3秒)执行,可以使用 setTimeout 函数。setTimeout 是JavaScript的核心计时器方法,它接受两个参数: 要执行的函数&…...
python打卡第47天
昨天代码中注意力热图的部分顺移至今天 知识点回顾: 热力图 作业:对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图,展示模…...
C#最佳实践:为何优先使用as或is而非强制转换
C#最佳实践:为何优先使用as或is而非强制转换 在 C# 的编程世界里,类型转换是我们经常会遇到的操作。就像在现实生活中,我们可能需要把不同形状的物品重新整理归类一样,在代码里,我们也常常需要将一个数据类型转换为另…...
运行vue项目报错 errors and 0 warnings potentially fixable with the `--fix` option.
报错 找到package.json文件 找到这个修改成 "lint": "eslint --fix --ext .js,.vue src" 为elsint有配置结尾换行符,最后运行:npm run lint --fix...
深入理解 C++ 左值右值、std::move 与函数重载中的参数传递
在 C 编程中,左值和右值的概念以及std::move的使用,常常让开发者感到困惑。特别是在函数重载场景下,如何合理利用这些特性来优化代码性能、确保语义正确,更是一个值得深入探讨的话题。 在开始之前,先提出几个问题&…...
