【小程序】使用WXSS编写样式介绍以及与CSS的区别

痛定思痛。 2023-09-28 20:42 2阅读 0赞

#### 文章目录 ####

*   *  WXSS编写样式
     *   *  小程序的样式写法
         *  WXSS支持的选择器
         *  WXSS扩展-尺寸单位
         *  WXSS样式导入

### WXSS编写样式 ###

**WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式, WXSS 用来决定 WXML 的组件应该怎么显示**。

> WXSS和CSS之间没有太大的区别, 为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

**官方文档中说到: 与 CSS 相比，WXSS 扩展的特性有**：

> 尺寸单位  
> 样式导入

--------------------

#### 小程序的样式写法 ####

**页面样式的三种写法**：

> 行内样式、页面样式(当前页面生效)、全局样式(全部页面生效)
> 
> 三种样式都可以作用于页面的组件

*  行内样式: 针对当前组件生效

<text style="color: red">哈哈哈哈</text>

*  页面样式: 编写在页面单独的wxss文件当中的, 只在当前页面生效

.active {
        
    	color: skyblue;
    	font-size: 20px;
    	font-weight: 700;
    }

<text class="active">哈哈哈哈</text>

*  全局样式: 声明在app.wxss文件中的样式, 在任何页面中都会生效

.title {
        
    	color: red;
    	font-size: 20px;
    }

<text class="title">哈哈哈哈</text>

**如果有相同的样式**：

> 优先级依次是：行内样式 > 页面样式 > 全局样式

--------------------

#### WXSS支持的选择器 ####

**官方支持的选择器如下 (*其实除此之外还有一些选择器也是支持的, 但是官方推荐使用的就是下面这些*)**

<table> 
 <thead> 
  <tr> 
   <th align="left">选择器</th> 
   <th align="left">样例</th> 
   <th align="left">样例描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">.class</td> 
   <td align="left"><code>.intro</code></td> 
   <td align="left">选择所有拥有 class=“intro” 的组件</td> 
  </tr> 
  <tr> 
   <td align="left">#id</td> 
   <td align="left"><code>#firstname</code></td> 
   <td align="left">选择拥有 id=“firstname” 的组件</td> 
  </tr> 
  <tr> 
   <td align="left">element</td> 
   <td align="left"><code>view</code></td> 
   <td align="left">选择所有 view 组件</td> 
  </tr> 
  <tr> 
   <td align="left">element, element</td> 
   <td align="left"><code>view, checkbox</code></td> 
   <td align="left">选择所有文档的 view 组件和所有的 checkbox 组件</td> 
  </tr> 
  <tr> 
   <td align="left">::after</td> 
   <td align="left"><code>view::after</code></td> 
   <td align="left">在 view 组件后边插入内容</td> 
  </tr> 
  <tr> 
   <td align="left">::before</td> 
   <td align="left"><code>view::before</code></td> 
   <td align="left">在 view 组件前边插入内容</td> 
  </tr> 
 </tbody> 
</table>

**WXSS选择器优先级与CSS类似，权重如图**

![在这里插入图片描述][e7872a26ec104aa5a3a42b9fa8ebbb5e.png_pic_center]

#### WXSS扩展-尺寸单位 ####

> 尺寸单位也是和我们css最大的区别

**尺寸单位**

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

![在这里插入图片描述][fe9ca5502e2f4314bdc109832db5a60c.png_pic_center]

**建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准, 一般情况下也都是会以iPhone6位标准**。

> 也就是说, 我们使用rpx单位, 以iPhone6位设计稿的话, 当我们想要设置100px的大小时, 改为设置200rpx (*px单位的值 \* 2 = rpx的值*)
> 
> 设置rpx单位后的元素, 会根据屏幕的大小自适应

--------------------

#### WXSS样式导入 ####

**使用`@import`语句可以导入外联样式表，`@import`后跟需要导入的外联样式表的相对路径，用 `;`表示语句结束**。

*  例如在test.wxss文件中定义一些css文件

/** test.wxss **/
    .small-p {
        
      padding:5px;
    }

*  在app.wxss中导入test.wxss文件, 可以使用test.wxss文件中的样式

/** app.wxss **/
    @import "test.wxss";
    .middle-p {
        
      padding:15px;
    }

[e7872a26ec104aa5a3a42b9fa8ebbb5e.png_pic_center]: https://img-blog.csdnimg.cn/e7872a26ec104aa5a3a42b9fa8ebbb5e.png#pic_center
[fe9ca5502e2f4314bdc109832db5a60c.png_pic_center]: https://img-blog.csdnimg.cn/fe9ca5502e2f4314bdc109832db5a60c.png#pic_center