《三》微信小程序中的 WXSS

WXSS 用于描述页面的样式，页面样式有三种写法，优先级为 行内样式 > 页面样式 > 全局样式。

background-image 不支持本地图片。

1. 全局样式：定义在 app.wxss 中的样式为全局样式。作用于全局，在小程序内的任意一个页面中都会生效。

2. 页面样式：在页面的 wxss 文件中定义的样式为页面样式。只在对应的页面中生效。

   // index.html
   <view class="nav">静态 class</view>
   <view class="{{activited === 0 ? 'activitedNav' : ''}}">动态 class</view>
   <view class="nav {{activited === 0 ? 'activitedNav' : ''}}">静态 class 和动态 class</view>
   
   // index.wxss
   .nav {
   	color: gray;
   }
   .activitedNav {
   	color: red;
   }
   
   // index.js
   data: {
   	activited: 0，
   }
   

3. 行内样式：在页面的组件上使用 style 属性来控制样式。

   要尽量避免将静态的样式写进 style 中，以免影响渲染速度。

   // index.wxml
   <view style="color: gray;">静态 style</view>
   <view style="color:{{color}};">动态 style</view>
   <view style="color:{{color}}; background-color: black;">静态和动态 style</view>
   
   // index.js
   data:{
   	color: '#FFF'
   }
   

<view> 不支持 \n 的换行，可以添加 css 属性 white-space:pre-wrap; 来让其支持；但是 <text> 是支持的。

超出文本显示省略号：

.box {
   width: xxx; // 宽度
   display: -webkit-box; // 设置为弹性盒子。非标准属性，所以要加兼容性代码
   -webkit-box-orient: vertical;  // 从上到下垂直排列子元素
   -webkit-line-clamp: 1; // 显示几行文本。设置为第一行超出后显示省略号
   overflow: hidden; // 超出隐藏
   text-overflow: ellipsis; // 显示省略号
   word-break: break-all; // 强制英文单词自动换行
}

尺寸单位：

rpx：可以根据屏幕宽度进行自适应。微信小程序规定屏幕宽为 750rpx。例如：在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 750 物理像素 = 375px，1rpx = 1 物理像素 = 0.5px。

一般情况下，UI 给出的设计稿都是使用 iPhone6 作为标准的，因此在开发中，对于 px 需要乘以 2 来换算成 rpx。

样式导入：

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

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

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