当前位置: 首页 > news >正文

07--组件

一、小程序组件分类

微信团队为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。小程序中的组件也是非常丰富的,开发者可以基于组件快速搭建出漂亮的页面结构。小程序中的组件其实相当于网页中的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

相关文章:

07--组件

一、小程序组件分类微信团队为开发者提供了一系列基础组件&#xff0c;开发者可以通过组合这些基础组件进行快速开发。小程序中的组件也是非常丰富的&#xff0c;开发者可以基于组件快速搭建出漂亮的页面结构。小程序中的组件其实相当于网页中的HTML标签&#xff0c;只不过标签…...

怎么做好一个完整的项目复盘

复盘&#xff0c;是运营必不可少的能力&#xff0c;小到一次买菜的经历&#xff0c;大到百亿千亿的投资项目&#xff0c;都可以通过复盘来总结规律、提升水平。简单说来&#xff0c;复盘可以达到的效果有两条&#xff1a;优化弱项&#xff0c;强化强项明确自己的价值&#xff0…...

浅谈一下mysql8.0与5.7的字符集

修改字符集 修改步骤 在MySQL8.0版本之前&#xff0c;默认字符集为1atin1,utf8字符集指向的是utf8mb3。网站开发人员在数据库设计的时候往往会将编码修改为ut8字符集。如果遗忘修改默认的编码&#xff0c;就会出现乱码的问题。从MySQL8.0开始&#xff0c;数据库的默认编码将改…...

paddle推理部署(cpu)

我没按照官方文档去做&#xff0c;吐槽一下&#xff0c;官方文档有点混乱。。一、概述总结起来&#xff0c;就是用c示例代码&#xff0c;用一个模型做推理。二、示例代码下载https://www.paddlepaddle.org.cn/paddle/paddleinferencehttps://github.com/PaddlePaddle/Paddle-In…...

想开发IM集群?先搞懂什么是RPC!

即时通讯网官方技术群和社区里&#xff0c;经常有开发者在纠结怎么开发IM集群&#xff0c;虽然真正的使用人数&#xff0c;可能用个人电脑单机都能支撑。你也许会说&#xff0c;明明不需要用到IM集群&#xff0c;干吗要自找麻烦&#xff1f;答曰&#xff1a;“老板说这个得有&a…...

案例13-前端对localStorage的使用分析

一&#xff1a;背景介绍 前端在调用后端接口获取某一个人的评论次数、获赞次数、回复次数。调用之后判断后端返回过来的值。如果返回回来的值是0的话&#xff0c;从缓存中获取对应的值&#xff0c;如果从缓存中获取的评论次数为空那么其他两个的次数也为0。 二&#xff1a;思路…...

CNNIC第51次中国互联网络发展状况统计报告用户规模变化发布、解读与白杨SEO看法

一、第51次《中国互联网络发展状况统计报告》发布 3月2日&#xff0c;中国互联网络信息中心&#xff08;简称CNNIC&#xff09;在京发布第51次《中国互联网络发展状况统计报告》。《报告》显示&#xff0c;截至2022年12月&#xff0c;我国网民规模达10.67亿&#xff0c;较2021…...

【数据结构】单链表的实现

本篇主要总结单链表是如何实现的&#xff0c;数据结构是如何管理数据的&#xff0c;详细的介绍每一步是如何实现以及各种注意事项。&#x1f680;1.单链表的实现&#x1f680;&#x1f36d;1.1单链表的尾插&#x1f36d;1.2单链表的头插&#x1f36d;1.3单链表的打印&#x1f3…...

从0到1做产品!产品设计的6个步骤

相信不少产品经理在刚入行时&#xff0c;都遇到过这样的情况&#xff1a; 接到需求后不知所措&#xff0c;然后下意识地照着竞品开始盲目地画原型。 其实&#xff0c;这样的设计过程不仅缺乏逻辑性&#xff0c;在后续阶段也很容易出现各种问题。 在此&#xff0c;跟大家分享一下…...

ESP32遥控器软硬件设计

一. 前言 做智能车 或者 四轴飞控怎么能少得了遥控器呢&#xff01;在这里给大家分享一个简单的基于ESP32遥控器的设计&#xff0c;包括软硬件以及3D外壳。 二. 硬件设计 1. 功能介绍 遥控器嘛&#xff0c;通信方式是最重要的&#xff0c;本设计支持 WIFI、蓝牙 和 2.4G&…...

vue-template-admin的keep-alive缓存与移除缓存

一&#xff0c;场景 A页面是表单页面&#xff0c;填写后需要跳转B页面。如果B页面不操作返回的话&#xff0c;应该能还原A页面的内容&#xff0c;而如果B页面点击提交&#xff0c;再回到A页面的时候&#xff0c;应该清除缓存。 二&#xff0c;实现方法 A页面要缓存数据&…...

【人工智能 AI】机器学习快速入门教程(Google)

目录 机器学习术语 标签 特性 示例 模型 回归与分类 深入了解机器学习&#xff1a;线性回归 深入了解机器学习&#xff1a;训练和损失 平方损失函数&#xff1a;一种常用的损失函数 机器学习术语 预计用时&#xff1a;8 分钟 什么是&#xff08;监督式&#xff…...

适配器模式

概览 适配器模式是一种结构型设计模式&#xff0c;用于将一个类的接口转换为客户端所期望的另一种接口。通常情况下&#xff0c;这种转换是由一个适配器类完成的&#xff0c;适配器类包装了原始类&#xff0c;并实现了客户端所期望的接口。这种模式非常适用于在不修改现有代码…...

00后跨专业学软件测试,斩获8.5K高薪逆袭职场

我想说的第一句&#xff1a;既然有梦想&#xff0c;就应该去拼搏还记得&#xff0c;我大学毕业前&#xff0c;就已经暗下决心到xxx培训机构接受培训。那个时候&#xff0c;没有任何海同公司的人主动找我或者联系过我&#xff0c;我是自己在网上发现了xxxx培训机构的&#xff01…...

数据结构和算法学习

文章目录精通一个领域切题四件套算法算法的五个条件流程图数据结构数据与信息数据信息数据结构和算法数据结构算法时间复杂度空间复杂度数组 Array优点缺点数组和链表的区别时间复杂度链表 Linked List优点缺点时间复杂度单向链表双向链表循环链表双向循环链表堆栈 Stack队列 Q…...

剑指 Offer II 012. 左右两边子数组的和相等

题目链接 剑指 Offer II 012. 左右两边子数组的和相等 easy 题目描述 给你一个整数数组 nums&#xff0c;请计算数组的 中心下标 。 数组 中心下标 是数组的一个下标&#xff0c;其左侧所有元素相加的和等于右侧所有元素相加的和。 如果中心下标位于数组最左端&#xff0c;那…...

Java货物摆放

题目描述 小蓝有一个超大的仓库&#xff0c;可以摆放很多货物。 现在&#xff0c;小蓝有 &#xfffd; n 箱货物要摆放在仓库&#xff0c;每箱货物都是规则的正方体。小蓝规定了长、宽、高三个互相垂直的方向&#xff0c;每箱货物的边都必须严格平行于长、宽、高。 小蓝希望所…...

计算机求解满足三角形各边数字之和相等的数字填充

圆圈处不重复的填入1至9&#xff0c;使得每条边的四个数字相加的总和相等。 求解思路&#xff1a; 数组中存放1到9的数字&#xff0c;每次随机交换两个数字&#xff0c;构建出新的数字组合&#xff0c;计算这个数字组合是否符合要求。 #include <stdio.h> #include <…...

python魔术方法

魔术方法 魔术方法就是一个类中的方法&#xff0c;和普通方法唯一的不同是普通方法需要调用&#xff0c;而魔术方法是在特定时刻自动触发。这些魔术方法的名字特定&#xff0c;不能更改&#xff0c;但是入口参数的名字可以自己命名。 基本魔术方法 new(cls[,…]) _new_ 是在…...

从0开始学python -48

Python CGI编程-3 CGI中使用Cookie 在 http 协议一个很大的缺点就是不对用户身份的进行判断&#xff0c;这样给编程人员带来很大的不便&#xff0c; 而 cookie 功能的出现弥补了这个不足。 cookie 就是在客户访问脚本的同时&#xff0c;通过客户的浏览器&#xff0c;在客户硬…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...