Style (WXSS) 小北微信小程序小白教程系列

正式文件地址https://mp.weixin.qq.com/debu.

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

答案只有一个，会让你更快“通俗易懂”，改变思维，下面的文章会以段落类的形式对公文进行解释。

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

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

1.没有尸体

是的，小程序的每个页面都没有body属性，但是你可以通过在wxss中设置页面来影响整个页面的样式，比如下面的代码。

第{ background : # f8f8 }页等等。当然，您也可以在页面的xxx.json中设置backgroundColor属性，以便在下拉页面时影响空白区域的颜色。一般来说，当您的页面具有下拉刷新和上拉加载功能时，您通常需要设置backgroundColor属性。

2.没有亲子关系。

在使用css时，我们经常保持样式的层次关系与html联系人的层次关系一致。例如，您的html代码包含以下代码

strong/strong/p/div我们习惯于这样写css。盒子。内容强{}这种写法的优点是文风强不会影响其他地方的强。但是这种父子等级关系在小程序中是不支持的。只能一个一个设置。请看下面的小程序代码。

view class=' box ' text class=' box-txt '/text/view对于上面的视图，对应的wxs应该怎么写呢？看看下面的代码。

//正确。box {}。box-txt {}//错误。盒子。box-txt {}你明白吗？

3.尺寸变化

在css中，我们有很多度量尺寸的单位，比如px，em等。当然，这些仍然可以在小程序中使用，但是小程序已经为自己增加了另一个单元，那就是rpx。

作为移动应用，小程序需要适应不同规格的设备，兼容越来越大的手机(换句话说，我还是喜欢iphone5的尺寸，单手可控，躺在床上看电影不会撞到头)。

因此，rpx最重要的特点是可以适应屏幕宽度。它指定屏幕宽度为750rpx。比如在iPhone6上，屏幕宽度是375px，有750个物理像素，那么750rpx=375px=750个物理像素，1rpx=0.5px=1个物理像素。

你明白吗？官方给出了一个表格，很容易理解，如下图所示。

这个转换比较简单，就不解释了。如果你真的不明白，可以留言。

4.样式导入

小程序的wxss支持导入样式，非常有用，尤其是当我们使用其他一些库的时候，可以直接导入第三方的wxss文件。多幸福啊！

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

@ import ' common.wxss。middle-p { padd :15 px；}5.内嵌样式

像css一样，wxss支持两种样式，类和样式，但是用法有所不同。一句话：“如果你的风格里有动态内容，就写进风格里，剩下的放到类文件里。

就像这段代码。

视图样式=' color: { { color } }'/将太多样式写入样式所带来的问题是，applet在渲染视图时必须分析相应的样式布局，这不可避免地会对性能产生一些影响。

6.选择器

另外，wxss基本上支持css中的选择器，比如类、ID、组件等。看下面的官方图。

类似于css的高级属性，比如last-child，你也可以在wxss中愉快地使用它们。

7.全球风格和本地风格

原则上，小程序中的一个wxss负责一个wxml视图文件，但是对于一个应用程序来说总有一些共同的属性，所以小程序为应用程序本身提供了一个wxss，也就是app.wxss，当然不需要手动引入，它会自动加载到每个视图中，这一点要记住。

一点总结

关于wxss支持css什么，微信官方没有给出相应的文档。我们需要慢慢挖掘更多的细节。毕竟腾讯不是百度，会把文档写得这么好。