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

前端(小程序)学习笔记(CLASS 1):组件

1、小程序中组件的分类

小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类,分别是:

* 视图容器,* 基础内容,* 表单组件,* 导航组件

媒体组件,map地图组件,canvas画布组件,开放能力,无障碍访问

2、常用的视图容器类组件

1、view

普通视图区域

类似于HTML中的div,是一个块级元素

常用来实现页面的布局效果

2、scroll-view

可滚动的视图区域

常用来实现滚动列表效果

* 给组件添加scroll-y表示可以在纵向上滑动,需要加一个固定的高度

3、swiper和swiper-item

轮播图容器组件 和 轮播图item组件

* swiper组件的常用属性
属性类型默认值说明
indicator-dotsbooleanfalse是否显示面板指示点
indicator-colorcolorrgba(0,0,0,.3)指示点颜色
indicator-active-colorcolor#000000当前选中的指示点颜色
autoplaybooleanfalse是否自动切换
intervalnumber5000自动切换时间间隔
circularbooleanfalse是否采用衔接滑动

3、常用的基础内容组件

1、text

文本组件

类似于HTML中的span标签,是一个行内元素

通过text组件的selectable属性,实现长按选中文本内容的效果

2、rich-text

通过rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构

即可以识别文本中的标签

4、其他常用组件

1、button

按钮组件

功能比HTML中的button按钮丰富

通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

type="primary" 主色调按钮

type="warn" 警告按钮

size="mini" 小尺寸按钮

加上plain为镂空按钮

2、image

图片组件

image组件默认宽度约为300px、高度约为240px

image组件的mode属性用来指定图片的裁剪和缩放功能,常用的mode属性值如下:

mode值说明
scaleToFill(默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素
aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来,也就是说,可以完整地将图片显示出来
aspectFill缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取
widthFix缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix缩放模式,高度不变,宽度自动变化,保持原图宽高比不变
3、navigator

页面导航组件

类似于HTML中的a链接

5、小程序的宿主环境-API

概述:小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等 

分类:

1、事件监听API

特点:以on开头,用来监听某些事件的触发

举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件 

2、同步API

特点1:以Sync结尾的API都是同步API

特点2:同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常

举例:wx.setStorageSync('key','value')向本地存储中写入内容

3、异步API

特点:类似于JQuery中的$.ajax(options)函数,需要通过success、fail、complete接收调用的结果

举例:wx.request()发起网络数据请求,通过success回调函数接收数据

相关文章:

前端(小程序)学习笔记(CLASS 1):组件

1、小程序中组件的分类 小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类,分别是: * 视图容器,* 基础内容,* 表单组件,* 导航组件 媒体…...

Python MD5加密算法脚本

基本概念 MD5(Message Digest Algorithm 5)是一种常用的哈希函数,用于将任意长度的数据转换为固定长度的哈希值,通常为128位(16字节)。 特点 不可逆性:无法从哈希值还原出原始数据。无论原始…...

Python数据分析实战:Pandas高效处理Excel数据指南

目录 引言:为什么选择Pandas处理Excel? 一、环境搭建与数据读取 1.1 基础环境配置 1.2 数据高效载入技巧 二、数据清洗核心战术 三、数据加工实战案例 3.1 销售数据透视分析 3.2 异常值检测 3.3 跨表关联分析 四、性能优化秘籍 4.1 大文件处理…...

使用Starrocks制作拉链表

5月1日向ods_order_info插入3条数据: CREATE TABLE ods_order_info(dt string,id string COMMENT 订单编号,total_amount decimal(10,2) COMMENT 订单金额 ) PRIMARY KEY(dt, id) PARTITION BY (dt) DISTRIBUTED BY HASH(id) PROPERTIES ( "replication_num&q…...

【npm】npm命令大全

掌握 NPM:前端与 Node.js 开发者必备命令大全 NPM (Node Package Manager) 无疑是现代 JavaScript 开发的基石。无论是前端项目还是 Node.js 后端服务,NPM 都扮演着管理依赖、执行脚本、发布模块等关键角色。熟悉并熟练使用 NPM 命令,能够极…...

最新版Chrome浏览器调用ActiveX控件技术——alWebPlugin中间件V2.0.42版发布

allWebPlugin简介 allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件产品,致力于将浏览器插件重新应用到所有浏览器。它将现有ActiveX控件直接嵌入浏览器,实现插件加载、界面显示、接口调用、事件回调等。支持Chrome、Firefo…...

32核64G内存的物理机上,Netty理论能承载多少连接?

在 32核64G内存 的机器上,Netty 能承载的连接数取决于 业务场景、配置优化 和 操作系统调优。 以下是详细分析和实测数据参考: 1. 理论估算(基于资源限制) 资源影响内存每个连接占用 10KB~1MB(取决于业务&#xff0…...

对于final、finally和finalize不一样的理解

目录 1、final 1.1、不可变性(Immutability) 1.2、内存可见性(Visibility) 1.3、初始化安全(Initialization Safety) 1.4、禁止重排序(Reordering) 1、静态常量 2、实例常量 …...

Open CASCADE学习|刚体沿曲线运动实现方法

在三维几何建模中,刚体沿参数化曲线的运动模拟是机械运动仿真、机器人路径规划等领域的核心需求。本文基于Open Cascade几何内核,系统阐述刚体沿曲线运动的实现方法,重点解析标架构建、坐标变换及鲁棒性控制等关键技术。 一、基于标架的刚体运…...

工作流引擎-03-聊一聊什么是流程引擎(Process Engine)?

前言 大家好,我是老马。 最近想设计一款审批系统,于是了解一下关于流程引擎的知识。 下面是一些的流程引擎相关资料。 工作流引擎系列 工作流引擎-00-流程引擎概览 工作流引擎-01-Activiti 是领先的轻量级、以 Java 为中心的开源 BPMN 引擎&#x…...

centos7 p8p1使用ip addr查看时有的时候有两个ip,有的时候只有一个ip,有一个ip快,有一个ip慢

在CentOS 7系统中,网络接口 p8p1 出现IP地址数量变化且访问速度不一致的问题,通常与以下原因相关。以下是逐步排查与解决方案: 1. 检查网络配置文件 可能原因:存在多个配置文件或重复配置(如静态IP与DHCP冲突&#xf…...

回溯算法——排列篇

目录 一、全排列 二、全排列II 一、全排列 46. 全排列 - 力扣&#xff08;LeetCode&#xff09; class Solution {List<List<Integer>> resultnew ArrayList<>();LinkedList<Integer> pathnew LinkedList<>();boolean[] used;public List<…...

Unity中SRP Batcher使用整理

SRP Batcher 是一种绘制调用优化,可显著提高使用 SRP 的应用程序的性能,SRP Batcher 减少了Unity为使用相同着色器变体的材质准备和调度绘制调用所需的CPU 时间。 工作原理: 传统优化方法通过减少绘制调用次数提升性能,而SRP Batcher的核心理念在于降低绘制调用间的渲染状…...

【JAVA学习】泛型

传统方法不能对加入到集合ArrayList中的数据类型进行约束&#xff0c;遍历的时候需要进行类型转换&#xff0c;如果集合中的数据量较大&#xff0c;对效率有影响。泛型又称参数化类型&#xff0c;是JDK5.0出现的新特性&#xff0c;解决数据类型的安全性问题&#xff0c;在类声明…...

实验分享|基于千眼狼sCMOS科学相机的流式细胞仪细胞核成像实验

实验背景 流式细胞仪与微流控技术&#xff0c;为细胞及细胞核成像提供新的路径。传统流式细胞仪在细胞核成像检测方面存在检测通量低&#xff0c;荧光信号微弱等局限&#xff0c;故某光学重点实验室开发一种基于高灵敏度sCMOS科学相机并集成在自组荧光显微镜的微流控细胞核成像…...

MySQL中的JSON_CONTAINS函数用法

MySQL中的JSON_CONTAINS函数用于检查一个JSON文档&#xff08;目标&#xff09;是否包含另一个JSON文档&#xff08;搜索值&#xff09;。以下是其详细用法&#xff1a; 函数语法​ JSON_CONTAINS(target_json, search_json [, path]) ​target_json​&#xff1a;要检查的目…...

如何在 Windows 11 或 10 上将 DNS 更改为 Cloudflare提供的 DNS 服务

域名解析服务(DNS)对于互联网来说至关重要,因为它使我们能够轻松地通过在浏览器中输入域名来访问网站。DNS 的作用是将域名解析为 IP 地址;你可以将其视为互联网上的电话簿。这是因为互联网上的计算机或服务器是通过 IPv4 或 IPv6(数字格式)来识别的,然而,要用户去记住…...

解除diffusers库的prompt长度限制(SDXL版)

2025-5-21 注&#xff1a;本文只提供思路&#xff0c;没有解决“权重识别”、“BREAK”问题。 要想实现与webui一样的绘图效果与无限prompt&#xff0c;可参考diffusers/examples/community/lpw_stable_diffusion_xl.py 1、上代码 from diffusers import StableDiffusionXLP…...

RISC-V 开发板 MUSE Pi Pro CSI测试,一把点亮ov5647摄像头

视频讲解&#xff1a; RISC-V 开发板 MUSE Pi Pro CSI测试&#xff0c;一把点亮ov5647摄像头 手上正好有一颗ov5674&#xff0c;看了下接口排线都是一致的&#xff0c;硬件条件满足的情况下&#xff0c;剩下的就是驱动软件的问题&#xff0c;直接接上CSI排线 https://bianbu-li…...

Word2Vec模型学习和Word2Vec提取相似文本体验

文章目录 说明Word2Vec模型核心思想两种经典模型关键技术和算法流程优点和局限应用场景 Word2Vec提取相似文本完整源码执行结果 说明 本文适用于初学者&#xff0c;体验Pytorch框架在自然语言处理中的使用。简单了解学习Word2Vec模型&#xff0c;体验其使用。 Word2Vec模型 …...

[测试_3] 生命周期 | Bug级别 | 测试流程 | 思考

目录 一、软件测试的生命周期&#xff08;重点&#xff09; 1、软件测试 & 软件开发生命周期 &#xff08;1&#xff09;需求分析 &#xff08;2&#xff09;测试计划 &#xff08;3&#xff09;测试设计与开发 &#xff08;4&#xff09;测试执行 &#xff08;5&am…...

epoll_wait未触发的小Bug

上次看了一下epoll监听的原理&#xff0c;在Android Jni里使用epoll&#xff0c;来监听Gpio口的变化事件&#xff0c;具体代码如下&#xff1a; 打开 GPIO 文件描述符&#xff0c;因为该文件是内核虚拟出来的&#xff0c;不是实际文件&#xff0c;所以无法使用FileObserver来监…...

Unity异步加载image的材质后,未正确显示的问题

简述&#xff1a; 此问题涉及到Unity的UI刷新机制 问题描述&#xff1a; 如图所示&#xff0c;想要实现在打开新的界面时候&#xff0c;通过修改材质的方式&#xff0c;修改image的显示内容。 明明已经给image添加上材质了&#xff0c;可还是一片空白&#xff1f; 先看看代…...

Python----循环神经网络(Word2Vec)

一、Word2Vec Word2Vec是word to vector的简称&#xff0c;字面上理解就是把文字向量化&#xff0c;也就是词嵌入 的一种方式。 它的核心就是建立一个简单的神经网络实现词嵌入。 其模型仅仅包括输入层、隐藏层和输出层&#xff0c;模型框架根据输入输出的不同&#xff0c;主要…...

Oracle Enqueue Names

Oracle Enqueue Names Enqueue&#xff08;排队锁&#xff09;是Oracle数据库中用于协调多进程并发访问共享资源的锁机制。 This appendix lists Oracle enqueues. Enqueues are shared memory structures (locks) that serialize access to database resources. They can be…...

微服务中API网关作用(统一入口、路由转发、协议转换、认证授权、请求聚合、负载均衡、熔断限流、监控日志)

文章目录 在微服务架构中&#xff0c;API网关主要有以下作用1. 统一入口&#xff1a;作为所有客户端请求的单一入口点&#xff0c;隐藏后端服务的复杂性2. 路由转发&#xff1a;将客户端请求准确路由到适当的微服务&#xff08;如图中的服务A、B、C&#xff09;3. 协议转换&…...

Linux `cat` 命令深度解析与高阶应用指南

Linux `cat` 命令深度解析与高阶应用指南 一、核心功能解析1. 基本作用2. 与类似命令对比二、选项系统详解1. 常用选项矩阵2. 组合使用技巧三、高阶应用场景1. 数据流处理2. 系统维护操作3. 开发调试应用四、安全与权限管理1. 访问控制策略2. 二进制文件处理五、性能优化策略1.…...

融云 uni-app IMKit 上线,1 天集成,多端畅行

融云 uni-app IMKit 正式上线&#xff0c;支持一套代码同时运行在 iOS、Android、H5、小程序主流四端&#xff0c;集成仅需 1 天&#xff0c;并可确保多平台的一致性体验。 融云 uni-app IMKit 在 Vue 3 的高性能加持下开发实现&#xff0c;使用 Vue 3 Composition API&#x…...

VLA模型:自动驾驶与机器人行业的革命性跃迁,端到端智能如何重塑未来?

当AI开始操控方向盘和机械臂&#xff0c;人类正在见证一场静默的产业革命。 2023年7月&#xff0c;谷歌DeepMind抛出一枚技术核弹——全球首个视觉语言动作模型&#xff08;VLA&#xff09;RT-2横空出世。这个能将“把咖啡递给穿红衣服的阿姨”这类自然语言指令直接转化为机器人…...

IP地址详解

IP地址详解(技术向) 一、核心定义 IP地址(Internet Protocol Address)是 网络层逻辑地址,用于在网络中唯一标识设备。本质上是 32位(IPv4)或128位(IPv6)二进制数。 本机的地址为127.0.0.1,主机名:localhost192.168.0.0-192.168.255.255为私有地址,属于非注册地址,…...

C++网络编程入门学习(四)-- GDB 调试 学习 笔记

GDB 调试 学习 笔记 GDB 调试 学习 笔记调试准备启动和退出gdbgdb中启动程序退出gdb查看代码断点调试命令继续运行gdb手动打印信息 自动打印信息单步调试step 可简写 snext 可简写成 nfinish 可简写成 finuntil 可简写成 u 设置变量值 GDB 调试 学习 笔记 学习地址&#xff1a…...

C#面:Server.UrlEncode、HttpUtility.UrlDecode的区别

在C#编程中&#xff0c;Server.UrlEncode 和 HttpUtility.UrlDecode 是两个常用的方法&#xff0c;用于处理URL编码和解码操作。理解它们的区别对于确保数据在Web应用程序中的正确传输和解析至关重要。 Server.UrlEncode 和 HttpUtility.UrlDecode的区别 Server.UrlEncode 和…...

kafka配置SASL_PLAINTEXT简单认证

Kafka ZooKeeper 开启 SASL_PLAINTEXT 认证&#xff08;PLAIN机制&#xff09;最全实战教程 &#x1f4a1; 本教程将手把手教你如何为 Kafka 配置基于 SASL_PLAINTEXT PLAIN 的用户名密码认证机制&#xff0c;包含 Kafka 与 ZooKeeper 的全部配置&#xff0c;适合入门。 &…...

Flink SQL 计算实时指标同比的实现方法

在 Flink SQL 中计算实时指标的同比(Year-on-Year),核心是通过时间窗口划分周期(如日、月、周),并关联当前周期与去年同期的指标值。以下是结合流数据处理特性的具体实现方法,包含数据准备、窗口聚合、历史数据关联等关键步骤。 一、同比的定义与场景 同比指当前周期指…...

Vue Router动态路由与导航守卫实战

在 Vue Router 中&#xff0c;动态路由与导航守卫的结合使用能够实现复杂的路由控制逻辑&#xff0c;例如权限验证、动态路由加载、数据预取等功能。以下是一个结合实战的详细说明&#xff1a; 一、动态路由基础 动态路由通过路径参数&#xff08;:&#xff09;实现动态匹配&a…...

数据库健康监测器(BHM)实战:如何通过 HTML 报告识别潜在问题

在数据库运维中,健康监测是保障系统稳定性与性能的关键环节。通过 HTML 报告,开发者可以直观查看数据库的运行状态、资源使用情况与潜在风险。 本文将围绕 数据库健康监测器(Database Health Monitor, BHM) 的核心功能展开分析,结合 Prometheus + Grafana + MySQL Export…...

Oracle基础知识(二)

目录 1.聚合函数 2.COUNT(1)&COUNT(*)&COUNT(字段)区别&#xff08;面试常问&#xff09; 3.分组聚合——group by 4.去重&#xff1a;DISTINCT 、GROUP BY 5.聚合函数的过滤HAVING 6.oracle中having与where的区别 (面试常问) 7.ROUND与TRUNC函数 8.ROLLUP上卷…...

轻量化MEC终端 特点

MEC&#xff08;多接入边缘计算&#xff09;解决方案通过将计算能力下沉至网络边缘&#xff0c;结合5G网络特性&#xff0c;已在多个行业实现低延迟、高可靠、高安全的应用部署。以下从技术架构、核心优势及典型场景三方面进行总结&#xff1a; 一、技术架构 分层设计‌ MEC架…...

Git 提交大文件 this exceeds GitHub‘s file size limit of 100.00 MB

报错核心&#xff1a; File …/encoder-epoch-99-avg-1.int8.onnx is 173.47 MB File …/encoder-epoch-99-avg-1.onnx is 314.79 MB this exceeds GitHub’s file size limit of 100.00 MB 正确做法&#xff1a;使用 Git LFS 上传大文件 GitHub 对 单个文件最大限制是 100MB&…...

前后端的双精度浮点数精度不一致问题解决方案,自定义Spring的消息转换器处理JSON转换

在 Java 中&#xff0c;Long 是一个 64 位的长整型&#xff0c;通常用于表示很大的整数。在后端&#xff0c;Long 类型的数据没有问题&#xff0c;因为 Java 本身使用的是 64 位的整数&#xff0c;可以表示的范围非常大。 但是&#xff0c;在前端 JavaScript 中&#xff0c;Lo…...

C语言—Linux环境下CMake设置库(动态/静态)

1. Yesterday Once More 由于昨日我们在VSCode设置了如何使用CMake构建与编译c语言项目&#xff0c;如有疑问&#xff0c;请看以下链接&#xff0c;今日根据昨天的配置来进一步完成项目的构建。 c语言- 如何构建CMake项目&#xff08;Linux/VSCode&#xff09;-CSDN博客 2. 动态…...

C语言---内存函数

memcpy函数的使用及模拟实现 memcpy的功能和strcpy类似&#xff0c;都是用来拷贝数据的。与strcpy不同的是&#xff0c;memcpy的适用性更广并且是以字节为单位来拷贝的。 void * memcpy ( void * destination, const void * source, size_t num ) memcpy函数的作用就是拷贝从so…...

vue项目启动报错(node版本与Webpack)

一、问题 因为项目需要将node版本从v14.17.0升级到v20.9.1了&#xff0c;然后启动项目报错 报错有些多&#xff0c;直接省略部分 building 2/2 modules 0 activeError: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:79:19) …...

Vite + Vue 工程中,为什么需要关注 `postcss.config.ts`?

&#x1f4dc; 前言&#xff1a;当传统 CSS 遇见现代工程 在 Vue 项目开发中&#xff0c;CSS 管理一直是一个容易被忽视但极其重要的环节。传统的 CSS 编写方式&#xff08;如手动处理浏览器兼容性、全局样式污染&#xff09;已无法适应现代前端工程的需求。而 PostCSS 作为 C…...

LeetCode热题100:Java哈希表中等难度题目精解

49. 字母异位词分组 题目描述 给定一个字符串数组&#xff0c;要求将字母异位词组合在一起。可以按任意顺序返回结果列表。 字母异位词是由重新排列源单词的所有字母得到的一个新单词。 示例 示例 1: 输入: strs ["eat", "tea", "tan", &…...

设计模式1 ——单例模式

定义 在 C 里&#xff0c;单例模式是一种常用的设计模式&#xff0c;其目的是保证一个类仅存在一个实例&#xff0c;并且为该实例提供一个全局访问点。 实现 1 饿汉式 class Singleton { private:static Singleton instance;Singleton() default;~Singleton() default;Si…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(26):のは ・ のが ・ のを

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(26):のは ・ のが ・ のを 1、前言(1)情况说明(2)工程师的信仰2、知识点(1)復習:(2)のは ・ のが ・ のを3、单词(1)日语(2)日语片假名单词4、相近词练习5、单词辨析记录6、总结1、前言 (1)情况说明…...

第18天-NumPy + Pandas + Matplotlib多维度直方图

示例1:带样式的柱状图 python 复制 下载 import numpy as np import pandas as pd import matplotlib.pyplot as plt# 生成数据 df = pd.DataFrame(np.random.randint(10, 100, size=(8, 4)),columns=[Spring, Summer, Autumn, Winter],index=[2015, 2016, 2017, 2018, 20…...

Qt初识.

认识 QLabel 类&#xff0c;能够在界面上显示字符串. 通过 setText 来设置的。参数 QString (Qt 中把 C 里的很多容器类&#xff0c;进行了重新封装。历史原因) 内存泄露 / 文件资源泄露对象树. Qt 中通过对象树&#xff0c;来统一的释放界面的控件对象. Qt 还是推荐使用 new 的…...

linux系统查看硬盘序列号

Linux系统查看硬盘信息指南 方法一&#xff1a;hdparm工具 sudo hdparm -i /dev/sda输出示例&#xff1a;在返回信息中查找"SerialNo"字段为序列号&#xff0c;"Model"字段为硬盘型号注意&#xff1a;必须使用root权限&#xff0c;普通用户需在命令前加s…...