004-微信小程序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物理像素。
设备 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

建议: 开发微信小程序时设计师可以用 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) 支持的选择器:

选择器 样例 样例描述
.class .intro 选择所有拥有 class=”intro” 的组件
#id #firstname 选择拥有 id=”firstname” 的组件
element view 选择所有 view 组件
element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容
::before view::before 在 view 组件前边插入内容

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

*{
    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文件

结尾

如果文章中有什么不足,欢迎大家留言交流,感谢朋友们的支持!

如果能帮到你的话,那就来关注我吧!如果您更喜欢微信文章的阅读方式,可以关注我的公众号

在这里的我们素不相识,却都在为了自己的梦而努力 ❤

一个坚持推送原创开发技术文章的公众号:理想二旬不止


   转载规则


《004-微信小程序WXSS样式》 BWH_Steven 采用 知识共享署名 4.0 国际许可协议 进行许可。
  目录