[微信小程序之小白教程系列] -- 样式（WXSS）

官方文档地址 mp.weixin.qq.com/debug/wxado…

问题来了？既然如此，咱们为什么还要写这篇文章？

答案只有一个，让你更快的“易懂”，换换思路，接下来的文章会对官方文档作一个段落类的解释。

为了适应广大的前端开发者，WXSS 具备 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比，WXSS 扩展的特性有：尺寸单位和样式导入。

补充：关于扩展的特性咱们下面会说，既然文档说了WXSS具备CSS 大部分特性，那么有什么不一样那？

一、没有body
是的，在小程序的每个page里是没有body属性的，不过你能够经过在wxss中对page的设置来影响整个页面的样式，好比下面的代码

page {
    background:#F8F8F8
}复制代码

诸如此类，固然你也能够设置page的xxx.json中的backgroundColor属性来影响一个page页面下拉时出现的空白区域的颜色，通常来讲当你页面有下拉刷新和上拉加载功能时，每每要设置backgroundColor属性。

二、没有父子关系
在使用css的时候，咱们常常让样式的层级关系和html接点的层级关系保持一致，好比你的html代码中有下面代码

<div class="box">
    <p class="content">
        <strong ></strong>
    </p>
</div>复制代码

咱们习惯于css的写法以下

.box .content strong {}复制代码

这样写的好处是strong的样式不会去影响其余地方的strong。可是在小程序中并不支持这种父子的层级关系。你只能一个一个的设置，看下面的小程序代码

<view class="box">
    <text class="box-txt"></text>
</view>复制代码

针对于上面的视图，对应的wxss应该如何写那？看下面代码

// 正确的
.box {}
.box-txt {}

// 错误的
.box .box-txt {}复制代码

这样说你明白了吧？！

三、尺寸的变化
在css中咱们有不少衡量尺寸的单位，好比px、em等等，固然这些在小程序中也依然可使用，可是小程序又为本身增长了一个单位，那就是rpx。

小程序做为移动端的应用须要适配不一样规格的设备而且兼容愈来愈大的手机（话说我依然喜欢iphone5的尺寸，单手可控并且床上看电影不会砸到头）。

因此rpx最重要的特性就是能够根据屏幕宽度进行自适应。它规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

算明白了么？官方给了一个表格，很浅显易懂，见下图。

alt

这个换算比较简单，不在讲解，若是你真不懂能够留言。

四、样式导入
小程序的wxss支持样式的导入，这个功能至关有用，尤为是咱们使用一些其余库的时候能够直接导入第三方的wxss文件，何其乐哉。

用法也很简单，看看下面代码。

@import "common.wxss";
.middle-p {
  padding:15px;
}复制代码

五、内联样式
和css同样，wxss支持class和style两种样式，可是在用法上仍是有区别的，一句话归纳：“若是你的样式中存在动态内容，将其写到style中，其余的都放到class文件，

好比这段代码

<view style="color:{{color}};" />复制代码

将过多的样式写到style中带来的问题就是小程序在渲染视图的时候还要伴随着解析对应的样式布局等，必然对性能有一些影响。

六、选择器
另外对于css中的选择器，wxss基本都支持了，好比类、ID、组件等，看看下面官方给的图

alt

并且相似于last-child等css的高级属性，在wxss你也能够愉快的使用。

七、全局样式与局部样式
原则上一个在小程序中一个wxss负责一个wxml视图文件，可是对于一个应用来讲总会有一些公用的属性，所以小程序为应用自身提供了一个wxss，那就是app.wxss，固然你无需人工引入，它会自动的加载到每个视图上，这点要记住。

一点总结

关于wxss到底对css支持了哪些，微信官方并无给出相应的文档，更多细节咱们要慢慢挖掘，毕竟腾讯不是百度，会把文档写的那么好。