微信小程序【浅提WXSS样式】

(一) 尺寸问题

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

其实和原来的 CSS 没差特别多，不过先说一个挺重要的点，就是微信小程序官方提供的一种，解决尺寸问题的方案 rpx

例如设计师给你的设计稿是px为单位的，但是如果你直接使用这样固定的写法，就会导致在不同的机型上，出现内容尺寸比例不一的现象，当然我们也可以使用百分比来解决这个问题，而今天我们简单说一说 rpx

(1) 存在的问题

首先我们，随便写一个 200px * 200px 的方框

view{
    width: 200px;
    height: 200px;
    background-color: deeppink;
}

在不同的机型下，实际上大小可以说写死了，在其他机型下，很清晰就可以看到，右边的留白，发生了很大的变化

（下图为 750 * 550 自定义的）

(2) 尺寸单位

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

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况

知道了这些，接着看上面的问题，首先，1px=rpx*(750/设备屏幕宽度)，因为原型图我们以iphone6为标准，所以公式就是1px=rpx*(750/375)，所以1px=2rpx，这也对应了上面的表格，所以我们只需要将原来固定的 200px 修改一下，成为 400rpx，这样就会发现方框就会根据不同屏幕的尺寸来变化了

(3) 总结

使⽤步骤：

1. 确定设计稿宽度 pageWidth
2. 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth
3. 在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可

(二) 引入样式

刚才，我们简单说了一下比例尺寸的问题，在同一个页面下的 样式文件，是不需要引入的，也就是说 例如 test 文件夹下的 test.wxml 中就可以自动匹配上 test.wxss 中的样式

但是，如果想自定义一些样式供多个页面使用，怎么做呢，例如我们在根目录下创建一个文件夹，在其中创建一个名为 commom.wxss 的样式文件，为了效果显著一些，把字体改一下样式

view{
    color: red;
    font-size: 30px;
}

我们在需要页面的 WXSS 中引入一下

注：路径只能写相对路径哈

@import"../../styles/common.wxss";

效果一下就显出来了

(三) 选择器

(1) 支持的选择器：

注意：通配符 * 是不支持的，即下列代码是无效的

*{
    margin:0;
    padding:0;
    box-sizing:border-box; 
}

(2) 全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

(四) 原生小程序使用 less 的方法

原生的小程序是不支持使用 less 的，当然了，你可以选择直接写样式，如果想要使用 less 的话，可以在 vscode 中安装例如 Easy LESS插件（此插件需要在 vscode 配置中加入）

"less.compile": {
    "outExt": ".wxss"
},

在编写样式的地方，直接新建 less 文件，例如 test.less 编辑保存后，会生成对应的WXSS文件