一、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 也支持基本的动画和过渡功能，但在性能和兼容性方面，需要根据微信小步伐的运行情况举行优化和调整。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
