你真的会使用 “WXSS” 吗?

站长

2023年03月11日 15:46 · 阅读数 15

在温故知新计划中.重新认真阅读文档.并以实践来验证文档的过程中.又有了一些新的收获.下面我们来一起记录一下吧.

您能在这里看到啥

快速回顾

重新收获

快速回顾

尺寸单位

rpx:根据屏幕宽度进行界面自适应.UI以Iphone6作为视觉标准.
计算规则
1. rpx换算成px(屏幕宽/750)
2. px换算成rpx(750/屏幕宽度)
3. 一个小Tip
  
  实战中,我们会发现,在刘海屏中,底部会有安全区域.如果不适配的话.如下所示.
  - 这样的写法,有两个不好处
    1. UI不美观
    2. 触发事件误触率高.会误触到系统事件.
  - 怎么解决呢
    1. 获取底部安全距离
```
// 获取底部安全距离
configSafeAreaBottom () {
    wx.getSystemInfo({
        success:(res) => {
           let safeAreaBottom = res.screenHeight - res.safeArea.bottom;        
           console.log(safeAreaBottom)
        }
    });
}
```
    2. 界面配置底部距离
      
      只需要配置底部bottom即可.如下所示.
```
<view class="bottom_btn_bg" style="padding-bottom: {{safeAreaBottom}}px;">
```
    3. 最终效果
    4. 建议优化点
      
      从上面简单的修改中,我们会发现.这样的需求基本上贯穿你整个App.总不能每一个界面.用到底部按钮的时候,都添加一下style="padding-bottom: {{safeAreaBottom}}px;这个代码吧.从我现在了解知识中.我有两个思路
      - 把通用布局UI写成组件.(可以实现)
      - 在app.wxss统一配置底部安全距离.(暂时未实现)

样式导入

配置app.wxss

把通用的布局样式统一添加到app.wxss里.除独立分包外.任何地方可以用使用app.wxss里包含的样式.不需要手动在当前.wxss引入.
导入外部样式

导入格式: @import + wxss相对路径 + ***.wxss;

eg: @import "../test/test.wxss";

内联样式

组件上支持使用style和class属性来配置组件的样式.

区别

class用于指定样式规则,可以多个样式组合在一起.并已空格分隔.
style用于动态样式使用,尽量减少使用静态样式写在style中,以避免渲染速度

重新收获

wxss中使用var

之前动态更改样式,我一般选择都是style.在使用过程中,发现还可以使用var来实现动态化

使用app.wxss中定义好的var

page {--democolor:#aaa}
.demo {
   background: var(--democolor)
}

使用js文件中定义好的var

如上面中计算规则模块中配置底部安全距离的事例中.我们可以改写使用var,如下所示

index.wxml

 <view class="bottom_btn_bg" style="--bgcolor:{{bgcolor}};--bottom:{{safeAreaBottom}}px">

index.wxss

.bottom_btn_bg{
    padding-bottom: var(--bottom);
    background-color: var(--bgcolor);
}

当然也可以是文字、图片地址等等

动态配置图片


 wxml文件
 <view style="{{--imageurl:"url('xxxx')"}}" class="bottom_btn_bg">
 wxss文件使用
 .bottom_btn_bg{
    background-image:var(--imageurl);
}

动态配置文字


wxml文件
<view style="{{--content:"我是content"}}" class="bottom_btn_bg">
wxss文件使用
.bottom_btn_bg{
    content:var(--content);
}

注意事项:

使用var动态获取参数.其key必须以--开头.否则将不生效

选择器

在系统提供的6个选择器中,如下所示唯独对::before和::after不太了解,然后查看文档事例后,才恍然大悟.下面我们举例说明.看一下怎么使用.
- 需求
  
  实现下面效果.
- 没认真学习::before和::after之前实现方式.
  
  那必须是rich-text
```
<rich-text nodes="{{nodes}}"></rich-text>
```
- 学习后,代码实现方式
  1. wxml文件如下
```
<view class="demo">设备发出一声</view>
```
  2. wxss 文件内容如下
```
.demo {
      color: white;
      font-size: 40rpx;
  }
  .demo::before {
      content: "短按设备顶部白色蓝牙按钮";
      font-size: 36rpx;
      color: #30F0FE;
  }
  .demo::after {
      content: "滴";
      font-size: 36rpx;
      color: #30F0FE;
  }
```
rich-text和::before都可以达到我们的需求.但两者还是有所不同.如果你的需求是动态显示文本样式,推荐使用rich-text.如果只是静态样式.两者都可以.
wxss优先级

样式优先级权重优先级排序
!important ∞ 1
style 1000 2
id 100 3
class 10 4
tagName 1 5
外部样式 同级权重,后者覆盖前者 6

简单举例一下外部样式.如上面导入外部样式中,我们已经创建的test.wxss文件,并在index.wxss引用.执行下面步骤.我们看一下效果,就会很明了
1. 添加test.wxss样式
```
page {
  background-color: red;
}
```
2. index.wxss中@import 在最前
```
@import "../test/test.wxss";
page {
    background: white;
}
```
  执行结果:
3. index.wxss中@import在page之后.

样式	优先级权重	优先级排序
`!important`	∞	1
`style`	1000	2
`id`	100	3
`class`	10	4
`tagName`	1	5
`外部样式`	同级权重,后者覆盖前者	6

Demo

微信小程序学习笔记

系列文章

学习资料

微信官方文档

转载自:https://juejin.cn/post/7176164044242419770