在小程序中如何实现页面布局与页面样式，这里先来介绍WXML。
关于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就是不错的方法。