关于WXML

WXML全称WeiXin Markup Language（微信标记语言），与HTML有些不同的是，这是微信框架提供的一套标签语言。

我们在写HTML页面时，总是习惯使用div进行整体布局，使用span描述文本信息，使用img装载图片等等，但在WXML中会有一些差异。WXML提供的每个标签都是一个组件，使用过vue，react或angular的同学对于组件概念一定不会陌生，鉴于刚入门的前端同学，这里做个简单解释。

我们在编程时总会考虑代码复用性，比如一个页面有好几处的样式完全相同，那么我们可以将这一块样式定义在一个class中，接下来只要把这个class加在你需要展示的地方就可以了。

组件的概念也是如此，比如提示类弹窗在整个网站中的多个页面都会使用，那我们为什么不把这个弹窗功能封装成一个组件呢，之后不管哪个页面需要此功能，只要添加这个组件就可以了。要实现这个组件我们都得先定义好组件模板（HTML，决定组件结构），组件默认样式（CSS，决定组件外观），组件功能（JS，决定组件负责做哪些事）等。

而在小程序框架中，官方已经提前帮我们实现了大量的组件，比如基本视图组件中的view相当于HTML中的div可用来布局；基本内容组件中的text相当于span，可以用来装载多段行内文本，再如媒体组件中的image，它相当于img标签用来承载图片信息。

小程序官方提供的组件数量较多，很遗憾没办法一一介绍，但官方已经做了明细的组件分类，我们要做的就是拿到一个页面清楚知道需要用到哪些组件，一个组件需要用到哪些属性，就像搭积木一样，用这些组件来组成小程序的页面，还记得最初学HTML时标签使用的陌生感吗？它并没有难度，只是需要多加练习而已。

关于WXSS

可以放心的是WXSS并没有对于样式高度拓展，之前CSS样式怎么玩，现在在小程序还是一样的玩。

关于WXSS，小程序也做了亮点拓展，我们先说新增的尺寸单位rpx，官方描述如下：

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

并提供了如下几个手机型号的转换例子：

设备型号	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

WXSS第二个拓展就是关于样式导入，以前我们写HTML都是通过link来引入样式，但大家发现没，小程序中WXML与WXSS都是放在一个文件下就会自动引入样式，根本就没看到引入样式的标签，那我要引入别处的样式咋整，所以小程序提供了@import导入外联样式的方法，写过less的同学看到这个一定就特别熟悉了，我们来看个例子：

注意，小程序根目录的app.wxss是指全局样式，只要在里面写的样式，会对所有页面生效，就相当于小程序默认为每个页面引入了这个样式表。所以当有一些样式可复用，而我们又想手动控制是否引入时，利用@import就是不错的方法。