2.1 微信小程序代码构成
微信小程序与前端比较类似，主要文件类型为WXML、WXSS、WXS，分别对应了前端的HTML、CSS、JS，所以有前端基础的读者，能更好地理解并掌握小程序的代码结构。值得一提的是，虽然两种技术非常相似，但是它们还是有明显区别的，在接下来的内容中，我们会基于与前端的区别来进行讲解。
2.1.1 WXML
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统可以构建出页面的结构。与传统的HTML相比，WXML的标签更少一些，HTML中分为<div>、<p>、<span>、<h1>等，种类繁多，而常用的是<view>、<text>、<image>等。小程序通过封装使得选择变少，基本上视图容器用<view>、文本用<text>就可以满足大多数需求。
虽然标签变少了，但是小程序给标签封装了很多实用的功能。以<text>举例，它的selectable属性可以控制文本是否可以选择，space控制是否可以连续显示空格，decode控制是否将文本解码。所以，对于常用的自带属性，我们需要牢牢记住，否则重复造轮子将无法提高开发效率。
最后说说WXML的一些语法。熟悉Angular、Vue等前端框架的读者可能会知道数据绑定、列表渲染、条件渲染，使用这些功能可以轻易实现在标签页中使用for、if等语句。WXML也提供了类似的功能，具体的使用方式我们会在后面的章节中进行讲解。
2.1.2 WXSS
WXSS（WeiXin Style Sheets）是一套样式语言，用于描述WXML的组件样式。比起WXML和HTML，WXSS与CSS的区别不是很大，基本上CSS能用的WXSS都可以用。
为了更适应小程序，WXSS有两个比较明显的改动——尺寸单位与样式导入。
尺寸单位上推出了一种叫rpx（responsive pixel）的单位。相比px，rpx可以根据屏幕宽度进行自适应，效果见表2.1。
表2.1 rpx的换算
可以看到在iPhone 6上，1px正好等于2rpx，所以官方也建议设计师使用iPhone 6的尺寸作为设计稿视觉标准。
样式导入使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用“;”表示语句结束。示例代码如下：
2.1.3 WXS
WXS（WeiXin Script）是小程序的一套脚本语言，跟JavaScript比较相似，但也有自己独特的特性。WXS的运行环境和其他JavaScript代码是隔离的，WXS中不能调用其他JavaScript文件中定义的函数，也不能调用小程序提供的API。根据官方公布的内容，在iOS设备上小程序内的WXS会比JavaScript代码快2～20倍。在Android设备上，二者的运行效率无差异，这种差异是由运行环境造成的。
虽然官方说WXS与JavaScript是不同的语言，有自己的语法，但是整体使用下来会发现很多内容还是十分相似的，比如数据类型基本相同，声明变量还是var，if、for的写法也没有区别，slice、replace等用法也都一样。所以，拥有JavaScript基础还是对学习小程序有很大帮助的。
提示
在开发的过程中难免遇到一些小问题，如果关键词用小程序搜不到，就直接搜JavaScript，比如“JavaScript如何分割字符串”，将方法复制过来基本都能直接用，最多改两行就可以。
WXML、WXSS、WXS与前端HTML、CSS、JS的区别，读者大概了解了，可以看出小程序与前端的技术重合度相对来说比较高，毕竟小程序的实现也是建立在封装之上的。所以，没有前端基础的读者最好把前端的知识补一补，这样知其然更知其所以然。