【前端微信小程序】第七章 样式WXSS

WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML的组件样式。与CSS相⽐，WXSS扩展的特性有：

1. 响应式⻓度单位rpx。
2. 样式导⼊。

1. 尺寸单位

1. 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
iPhone6Plus	1rpx = 0.552px	1px = 1.81rpx

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

1.1 使⽤步骤：

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

1.2 像素计算案例

1.2.1 wxml

    rpx

1.2.2 wxss

    /* 
    1. 小程序中是不需要主动来进行样式的引入的
    2. 需要将页面中某些元素的单位有 px 修改为 rpx 
        a. 设计稿 750px
        b. 1px = 1rpx
    3.如果将屏幕的宽度修改为 375px
        a. 375px = 750rpx 
        b. 1rpx = 0.5px
    4. 存在一个设计稿宽度是 414 或者 位置 page
        a. 设计稿 page中存在一个元素 宽度为 100 px
        b. 拿以上的需求去实现不同宽度的页面进行适配

        page = 750rpx
        
        1px = 750rpx / page 
        100px = 750rpx * 100 / page 
    5. 利用一个属性 calc 属性css 和wxss都是支持的  
        a. 750 和 rpx 之间不能出现空格。
        b. 运算符的两遍不能留空格
*/

view {
    /* width: 200rpx; */
    width: calc(750rpx*100/(375));
    height: 200rpx;
    font-size: 40rpx;
    background-color: aqua;
}

1.3 样式导入

1. wxss中直接就⽀持，样式导⼊功能。
2. 也可以和less中的导⼊混⽤。
3. 使⽤ @import语句可以导⼊外联样式表，只⽀持相对路径。
4. 样式文件是以.wxss为后缀，不能以.css为后缀。

1.3.1 wxml

    
  
      @import引入全局样式文件
  

1.3.2 外部 wxss

    /*  将其作为一个全局样式文件  */

view {
    font-size: 100rpx;
    color: aqua;
}

1.3.3 导入 wxss

    /* 
    1. 使用@import 引入全局样式文件。
    2. 只能使用相对路径
    3. 这里的样式文件的后缀必须是 .wxss 不能是 css
*/

@import "../style/style.wxss";
view {
    background-color: pink;
}

2. 选择器

1. 特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效！

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

2. ⽬前⽀持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有class= intro 的组件
#id	#firstname	选择拥有id= firstname的组件
element	view	选择所有view组件
element,element	view,checkbox	选择所有⽂档的view组件和所有的checkbox组件
nth-child(n)	view:nth-child(n)	选择某个索引的标签
::after	view::after	在view组件后边插⼊内容
::before	view::before	在view组件前边插⼊内容

3.⼩程序中使⽤less

1. 原⽣⼩程序不⽀持 less，其他基于⼩程序的框架⼤体都⽀持，如wepy， mpvue ， taro 等。但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。因此可以⽤以下⽅式来实现。

2. 使用编辑器 vscode 安装插件 easy less。

easy less插件

3. 在vscode中设置插件：

打开settings.json文件进行设置

4. 在settings.json文件中配置如下:

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

设置位置

3.1 编写less文件测试

less

@color:red;

view {
    color: @color;
}

3.2 修改原来的wxss文件为 less文件并引入全局的less文件

1. 修改原来的wxss文件为 less文件并引入全局的less文件。引入方式还是和引入 wxss一样使用 @import "文件相对路径" 。

    @import "../style/reset.less";