WXML,WXSS和HTML,CSS的区别

一、WXML(WeiXin Markup Language)与 HTML(HyperText Markup Language)

 

(一)语法和标签

 

1. 标签系统:HTML 拥有一套完整且丰富的标签体系,涵盖了文档结构、文本格式、多媒体嵌入、表单元素等多个方面。而 WXML 的标签库是微信小程序自定义的一套标签,如  <view> 、 <text> 、 <button>  等,并且这些标签的功能和特性是为了适应小程序的应用场景和需求专门设计的。

2. 属性设置:在 HTML 中,属性的设置方式和种类非常丰富。而在 WXML 中,属性的设置和使用方式也有自身的规则和限制,并且部分属性的功能和行为与 HTML 中的对应属性有所不同。

 

(二)事件处理

 

1. 事件模型:HTML 中的事件可以通过在标签的属性中添加事件处理函数来实现,例如  onclick 、 onmouseover  等。WXML 中的事件处理机制也是通过在组件标签上添加相应的事件属性来实现,如  bindtap 、 bindinput  等,但事件的触发条件和处理方式是基于微信小程序的运行环境和框架来实现的,与传统的 HTML 事件模型有所不同。

 

(三)数据绑定

 

1. 数据绑定方式:HTML 本身并没有内置强大的数据绑定功能。而 WXML 支持数据绑定,可以将数据从逻辑层传递到视图层,实现动态的数据展示和更新,通过  {{}}  双花括号的方式来引用数据。

 

二、WXSS(WeiXin Style Sheets)与 CSS(Cascading Style Sheets)

 

(一)选择器

 

1. 选择器种类:CSS 提供了丰富的选择器,如类选择器、ID 选择器、属性选择器、伪类选择器和伪元素选择器等。WXSS 的选择器相对较少,主要支持类选择器和 ID 选择器等基本选择器。

2. 选择器权重计算:在 CSS 中,选择器的权重计算有一套复杂的规则来确定样式的优先级。WXSS 中的选择器权重计算方式可能与 CSS 有所不同,并且在小程序的渲染环境中,样式的应用和覆盖规则也需要遵循微信小程序的相关规范和机制。

 

(二)单位和尺寸

 

1. 尺寸单位:CSS 中常用的尺寸单位有像素(px)、百分比(%)、em、rem 等。WXSS 也支持这些单位,但在一些特定的场景下,如响应式布局和屏幕适配方面,WXSS 的处理方式和效果可能会因为微信小程序的运行环境和设备特性而有所不同。

 

(三)样式特性和兼容性

 

1. 样式特性支持:CSS 随着版本的更新和发展,不断增加新的样式特性和功能。WXSS 是基于微信小程序的运行环境和需求开发的,它只会支持部分与小程序应用场景相关的样式特性,并且在不同版本的微信客户端和不同设备上的兼容性表现也需要进行针对性的测试和优化。

 

 

 WXML、WXSS 与 HTML、CSS 在语法上的区别:

 

 

 

一、WXML(WeiXin Markup Language)与 HTML(HyperText Markup Language)语法区别

 

(一)标签

 

1. 标签种类与功能

 

- HTML 具有众多的标签,如  <div> 、 <p> 、 <img> 、 <a>  等,功能涵盖了文档结构搭建、内容展示、超链接、多媒体嵌入等各个方面。

- WXML 则是一套为微信小程序定制的标签集,如  <view>  用于视图容器、 <text>  用于文本展示、 <button>  用于按钮组件等。WXML 的标签功能更侧重于小程序的页面元素展示和交互。

2. 标签属性

 

- HTML 标签的属性丰富多样,例如  <img>  标签的  src 、 alt 、 width 、 height  属性, <a>  标签的  href 、 target  属性等。

- WXML 中标签的属性也是根据小程序的需求和功能设计的。例如,在  <button>  标签中有  size 、 type  等属性来控制按钮的大小和类型; <text>  标签中有  space  属性来控制文本的空格处理方式等。

3. 数据绑定

 

- 在 HTML 中,没有像 WXML 中那样内置的数据绑定机制。

- WXML 支持数据绑定,通过使用双花括号  {{}}  来引用数据。例如  <text>{{message}}</text> ,其中  message  是在对应的数据对象中定义的属性,通过这种方式可以实现数据与视图的动态绑定和更新。

 

(二)事件

 

1. 事件名称与触发方式

- HTML 中的常见事件,如  click (点击)、 mouseover (鼠标悬停)、 submit (表单提交)等,通过在标签的属性中添加对应的事件处理函数来响应,如  <button οnclick="myFunction()">点击我</button> 。

- WXML 中的事件名称和触发方式有所不同,例如  tap (点击)、 input (输入)等事件,通过在组件标签上添加相应的事件属性来绑定事件处理函数,如  <button bindtap="myFunction">点击我</button> 。

 

二、WXSS(WeiXin Style Sheets)与 CSS(Cascading Style Sheets)语法区别

 

(一)选择器

 

1. 基本选择器

 

- CSS 中的基本选择器包括类选择器( .class )、ID 选择器( #id )、元素选择器( element )等。

- WXSS 同样支持这些基本选择器,语法上没有太大差异。

2. 复合选择器

 

- CSS 中的复合选择器如后代选择器( selector1 selector2 )、子代选择器( selector1 > selector2 )、相邻兄弟选择器( selector1 + selector2 )、通用兄弟选择器( selector1 ~ selector2 )等,可以实现对元素之间关系的精确选择。

- WXSS 出于小程序的性能和设计需求,对这些复合选择器的支持有限,主要还是以基本选择器和一些简单的组合使用为主。

3. 属性选择器

 

- CSS 的属性选择器可以根据元素的属性和属性值来选择元素,例如  [attribute] 、 [attribute=value] 、 [attribute^=value] 、 [attribute$=value] 、 [attribute*=value]  等多种形式。

- WXSS 对属性选择器的支持相对较少,在实际开发中使用频率较低。

 

(二)单位

 

1. 长度单位

 

- CSS 中常用的长度单位有像素( px )、百分比( % )、 em 、 rem 、 vw 、 vh  等,以适应不同的布局和响应式设计需求。

- WXSS 同样支持这些长度单位,但在小程序的特定场景下,对于单位的使用和效果可能会因微信客户端的渲染机制和设备屏幕特性而有所不同。

2. 颜色表示

 

- 在 CSS 中,可以使用颜色名称(如  red 、 blue )、十六进制值(如  #ff0000 )、RGB 函数(如  rgb(255, 0, 0) )、HSL 函数(如  hsl(0, 100%, 50%) )等多种方式来表示颜色。

- WXSS 也支持这些颜色表示方式,语法上完全相同。

 

(三)样式特性

 

1. 盒模型

 

- CSS 中的盒模型包括内容( content )、内边距( padding )、边框( border )和外边距( margin ),可以通过设置相应的属性来控制元素的尺寸和布局。

- WXSS 中的盒模型原理与 CSS 相同,但在某些细节的计算和表现上,可能会因微信小程序的渲染引擎和设备差异而有所不同。

2. 动画与过渡

 

- CSS 提供了丰富的动画和过渡功能,如  transition  属性用于过渡效果、 animation  属性用于动画定义,可以实现复杂的元素动态效果。

- WXSS 也支持基本的动画和过渡功能,但在性能和兼容性方面,需要根据微信小程序的运行环境进行优化和调整。

 

 

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

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

相关文章

CSS实现table表格:隔行换色的效果

表格是网页中十分重要的组成元素。表格用来存储数据&#xff0c;包含标题、表头、行和单元格。在HTML语言中&#xff0c;表格标记使用符号<table>表示。定义表格光使用<table>是不够的&#xff0c;还需要定义表格中的行、列、标题等内容。推荐博文&#xff1a;《HT…

Mac M1安装配置Hadoop+Flink SQL环境

Flink 1.18.1 Hadoop 3.4.0 一、准备工作 系统&#xff1a;Mac M1 (MacOS Sonoma 14.3.1) JDK&#xff1a;jdk1.8.0_381 &#xff08;注意&#xff1a;尽量一定要用JDK8&#xff0c;少用高版本&#xff09; Scala&#xff1a;2.12 JDK安装在本机的/opt/jdk1.8.0_381.jdk/C…

OpenCV中的轮廓检测cv2.findContours()

文章目录 前言一、查找轮廓二、绘制轮廓轮廓面积轮廓周长 前言 轮廓提取的前提&#xff0c;将背景置为黑色&#xff0c;目标为白色&#xff08;利用二值化或Canny&#xff09; 边缘检测&#xff0c;例如Canny等&#xff0c;利用梯度变化&#xff0c;记录图像中的边缘像素点&a…

Uniapp鸿蒙项目实战

Uniapp鸿蒙项目实战 24.7.6 Dcloud发布了uniapp兼容鸿蒙的文档&#xff1a;Uniapp开发鸿蒙应用 在实际使用中发现一些问题&#xff0c;开贴记录一下 设备准备 windows电脑准备&#xff08;家庭版不行&#xff0c;教育版、企业版、专业版也可以&#xff0c;不像uniapp说的只有…

html5——CSS3_文本样式属性

目录 字体样式 字体类型 字体大小 字体风格 字体的粗细 文本样式 文本颜色 排版文本段落 文本修饰和垂直对齐 文本阴影 字体样式 字体类型 p{font-family:Verdana,"楷体";} body{font-family: Times,"Times New Roman", "楷体";} …

html5——CSS高级选择器

目录 属性选择器 E[att^"value"] E[att$"http"] E[att*"http"] 关系选择器 子代&#xff1a; 相邻兄弟&#xff1a; 普通兄弟&#xff1a; 结构伪类选择器 链接伪类选择器 伪元素选择器 CSS的继承与层叠 CSS的继承性 CSS的层叠性 …

华为HCIP Datacom H12-821 卷37

1.多选题 下面关于Network- Summary-LSA 描述正确的是 A、Network- Summary-LSA中的Metric被设置成从该ABR到达目的网段的开销值 B、Network- Sumary-LSA中的Net mask 被设置成目的网段的网络掩码 C、Network- Summary-LSA 是由ASBR产生的 D、Network- Summary-LSA 中的Li…

三级_网络技术_14_局域网技术基础及应用

1.下列关于集线器的描述中&#xff0c;错误的是()。 集线器基于MAC地址完成数据帧转发 连接到集线器的结点发送数据时采用CSMA/CD算法 通过在网络链路中串接一个集线器可以监听该链路中的数据包 连接到一个集线器的所有结点共享一个冲突域 2.下列关于集线器的描述中&#…

php安装Imagick扩展 处理pdf为图片

这个方法是使用源码编译安装&#xff0c;适用于php编译安装和包安装。如果有pecl&#xff0c;直接安装就行&#xff0c;我这是因为多个环境怕直接使用pecl工具导致混乱。 由于浏览器显示大量pdf不方便&#xff0c;我这先将pdf转化为图片再显示 如果没有安装php&#xff0c;这是…

视频使用操作说明书-T80002系列视频编码器如何对接海康NVR硬盘录像机,包括T80002系列高清HDMI编码器、4K超高清HDMI编码器

视频使用操作说明书-T80002系列视频编码器如何对接海康NVR硬盘录像机&#xff0c;包括T80002系列高清HDMI编码器、4K超高清HDMI编码器。 视频使用操作说明书-T80002系列视频编码器如何对接海康NVR硬盘录像机&#xff0c;包括T80002系列高清HDMI编码器、4K超高清HDMI编码器 同三…

网络层的角色与重要性:互联网通信的关键

本章讨论网络层及网络互连问题&#xff0c;也就是讨论多个网络通过路由器互连成为一个互连网络的各种问题。在介绍网络层提供的两种不同服务后&#xff0c;我们开始讲解本章的核心内容——网际协议&#xff08;IP&#xff09;&#xff0c;这是本书的一项重点内容。只有较深入地…

P6. 对局列表和排行榜功能

P6. 对局列表和排行榜功能 0 概述1 对局列表功能1.1 分页配置1.2 后端按页获取对局列表接口1.3 前端展示传回来的对局列表1.4 录像回放功能1.4.1 录像回放的流程1.4.2 录像回放的实现 1.5 前端分页展示 2 排行榜功能2.1 排行榜的实现 0 概述 本节主要介绍了如何实现对局列表和…

登录/注册

目录 1.HTML 2.CSS 3.JS 4.资源 5.运行结果 6.下载链接 7.注意事项 1.HTML <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-sca…

Zabbix配置JAVA JMX监控

JAVA JMX监控简介 官方文档&#xff1a;https://www.zabbix.com/documentation/current/zh/manual/concepts/java Zabbix Java gateway以 Zabbix 守护进程方式原生支持监控 JMX 应用程序。Zabbix Java gateway 的守护进程是用 Java 编写。为了在特定主机上找到 JMX 计数器的值…

Java设计模式的7个设计原则

Java设计模式的7个设计原则是面向对象设计领域中的重要指导方针&#xff0c;它们旨在提高软件系统的可维护性、可扩展性、可复用性和灵活性。以下是这7个设计原则的详细解释&#xff1a; 1. 开闭原则&#xff08;Open-Closed Principle, OCP&#xff09; 定义&#xff1a;一个…

使用 Spring Boot + POI 实现动态 DOCX 模版导出

使用 Spring Boot POI 实现动态 DOCX 模版导出 在企业级应用开发中&#xff0c;根据业务逻辑动态生成Word文档&#xff08;如报告、合同、通知等&#xff09;的需求十分常见。Apache POI 是一个强大的 Java 库&#xff0c;能读写 Microsoft Office 格式的文件&#xff0c;包括…

LCM通讯的使用

本文主要介绍LCM通讯的基本使用&#xff0c;内容主要整理自官网 https://lcm-proj.github.io/lcm/index.html LCM&#xff0c;即Library for Communication and Marshalling&#xff0c;是一组用于消息传递与数据封装的库和工具&#xff0c;它主要的面向对象是要求高带宽、低延…

保证 WebSocket 连接之前的身份验证过程的安全性

以下是一些保证在 WebSocket 连接之前的身份验证过程安全性的方法: 一、使用加密的通信通道 (一)启用 SSL/TLS 如果您的 WebSocket 连接使用 ws:// 协议,升级为 wss:// 协议。wss:// 是基于 SSL/TLS 的安全 WebSocket 连接,它对连接中的所有数据进行加密,包括身份验证过程…

Cesium--获取当前相机中心与地面的射线焦点

本文记录获取当前相机中心与地面的射线焦点的方法&#xff0c;可用于视角缩放过程中&#xff0c;控制视角自动平滑切换到二维等场景&#xff1a; 方法一定是视角中心能与地面有交集&#xff0c;如果对着地平线或对着天空肯定是没效果的。直接放代码&#xff1a; //调整相机到正…

Objective-C 自定义渐变色Slider

文章目录 一、前情概要二、具体实现 一、前情概要 系统提供UISlider&#xff0c;但在开发过程中经常需要自定义&#xff0c;本次需求内容是实现一个拥有渐变色的滑动条&#xff0c;且渐变色随着手指touch的位置不同改变区域&#xff0c;类似如下 可以使用CAGradientLayer实现渐…