微信小程序，学习笔记（二）样式（WXSS）及一个简单的小测试用例

微信小程序，学习笔记（二）样式（WXSS）及一个简单的小测试用例

WXSS（WeiXin Style Sheets）

这东西其实是微信自己的一种 CSS 语言，大部分都还是 CSS 语法，也有自己的东西，主要针对微信自己的 WXML 标记语言而生的，用来丰富其组件的显示效果。

• WXSS 相对 CSS 并没有太大差别，只是需要注意以下几点

  1. rpx 像素单位，具体值是：1rpx == 0.5px == 1物理像素，物理像素说的是硬件上表达的像素概念；
  2. 样式导入：在WXSS 文件中使用 @import test.wxss; 方式导入，后面的分号不要省略；
  3. 样式使用方式：内联和行内，由于组件的 style 属性接受动态参数形式去在运行时改变样式，因此建议：静态样式即不太会改变的样式不要使用行内style形式，避免运行时重复渲染，而需要动态发生变化的采取行内方式，比如：style="width:{ {myWidth}};color:{ {myColor}};"，列表中的焦点行，获取到焦点时改变其宽度和字体颜色，就只要把这两个属性放到行内去运行时渲染。

  例子： （预期达到的效果：点击表内行，背景框变亮，字体颜色变成白色）

  <!--index.wxml-->
  <view   id="ctl-list-date" class="ctl-list-date">
    <view bindtap="tapDateRow" wx:for="{
       
       {
       
       dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{
       
       {
       
       idx}}" class="ctl-list-row" style="background: