小程序WXML，WXSS与原生HTML，CSS，JS之间的区别

一、WXML 的概念以及和 HTML 之间的区别

1、什么是 WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言（组件），用来构建小程序页面的结构，其作用类似于网页开发中的 HTML

2、WXML 和 HTML 的区别

（1）标签名称不同

• HTML --- div、span、img、a
• WXML --- view、text、image、navigator

（2）标签属性不同

• <a href="#">超链接</a>
• <navigator url="/pages/home/home"></navigator>

（3）提供了类似于 Vue 中的模板语法

• 数据绑定 -- 插值表达式
• 列表渲染 -- wx:for 类比 -- v-for
• 条件渲染 -- wx:if 类比 -- v-if

二、WXSS 的概念以及和 CSS 之间的区别

1、什么是 WXSS

（1）WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式

（2）类似于网页开发中的 CSS

2、WXSS 和 CSS 之间的区别

（1）新增了 rpx 自适应尺寸单位

• CSS 中需要手动进行像素单位换算，例如 rem
• WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算

（2）提供了全局的样式和局部样式

• 项目根目录中的 app.wxss 会作用于所有小程序页面
• 局部页面的 .wxss 样式仅对当前页面生效

（3）WXSS 仅支持部分 CSS 选择器

• .class 和 #id
• element（标签选择器）
• 并集选择器和后代选择器
• ::after 和 ::before 等伪类选择器

三、小程序中的 JS 文件

小程序中的 JS 文件分为三大类，分别是：

1、app.js

是整个小程序项目的入口文件，通过调用 App() 函数 来启动整个小程序

2、页面的 .js 文件

是页面的入口文件，通过调用 Page() 函数来创建小程序页面，并运行小程序页面

3、普通的 .js 文件

是普通的功能模块文件，用来封装公共的函数或属性供页面使用