前言

什么是WXML

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

什么是WXSS

WXSS (WeiXin Style Sheets)是-套样式语言,用于描述WXML的组件样式,类似于网页开发中的CSS。

小程序中的js文件

一个项目仅仅提供界面展示是不够的，在小程序中，我们通过.js文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。

一、 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中的模板语法

数据绑定

列表渲染

条件渲染

二、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文件

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

四、组件/标签的变化

以uni-app开发，参考小程序规范，提供了一批内置组件。点击可直接跳转官网

div 改成 view(opens new window)
span、font 改成 text(opens new window)
a 改成 navigator(opens new window)
img 改成 image(opens new window)
input (opens new window)仅仅是输入框。原html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在uni-app和小程序规范中，input仅仅是输入框。其他功能uni-app有单独的组件或API：radio组件 (opens new window)、checkbox组件 (opens new window)、时间选择 (opens new window)、日期选择 (opens new window)、图片选择 (opens new window)、视频选择 (opens new window)、多媒体文件选择(含图片视频) (opens new window)、通用文件选择 (opens new window)。
form (opens new window)、button (opens new window)、label (opens new window)、textarea (opens new window)、canvas (opens new window)、video (opens new window)这些还在。
select 改成 picker(opens new window)
iframe 改成 web-view(opens new window)
ul、li没有了，都用view替代。做列表一般使用uList组件(opens new window)
audio 不再推荐使用，改成api方式，背景音频api文档 (opens new window)其实老的HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签，比如把div编译成view。但不推荐这种用法，调试H5端时容易混乱。

除了改动外，新增了一批手机端常用的新组件

scroll-view 可区域滚动视图容器(opens new window)
swiper 可滑动区域视图容器(opens new window)
icon 图标(opens new window)
rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）(opens new window)
progress 进度条(opens new window)
slider 滑块指示器(opens new window)
switch 开关选择器(opens new window)
camera 相机(opens new window)
live-player 直播(opens new window)
map 地图(opens new window)
cover-view 可覆盖原生组件的视图容器(opens new window)

cover-view需要多强调几句，uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，则需要使用cover-view组件。详见层级介绍

结束语

本次分享的内容就结束啦！有问题都可以私聊我，让我们一起进步

【小程序】了解WXML模板WXSS样式和小程序中的js文件

前言