微信小程序样式（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:url({{rowStyle.bgImgUrl}}) no-repeat center;color:{{rowStyle.color}};">{{dates[index + idx].desc}}</view>
  </view>

  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

  页面图： 

  

  // index.js
  
  Page({
      data: {
          rowStyle: {
            bgImgUrl: '../resources/images/dlist_bg.png',
            color: '#727374'
          }
      },
  
      // 点击日期行
      tapDateRow: function ( event ) {
  
          console.log( event );
          // console.log( event.currentTarget );
          // console.log( event.currentTarget == event.target );
  
          var that = this;
  
          // 这里改变点击时行的样式
          var rowStyle = {
            bgImgUrl: "../resources/images/dlist_bg_focus.png",
            color: '#FFFFFF'
          };
  
          that.setData({rowStyle: rowStyle});
      }
  });

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

  点击行之后效果图：

  

  从两图效果看，并不是想要的结果，点击行之后并不是当前行改变了，而是所有行都发生了变化，想想也是，Page 中的 data 数据属性是全局的，而列表行又是通过 wx:for 生成的多组件列表，属性所用的数据都是 data.rowStyle 中的样式数据，当点击时数据发生变化，导致所有行都发生了变化。

  但是 wxml 又不允许直接操作组件，也没法获取到组件对象下，只能从数据入手。

测试用例

• 列表行单个刷新样式的解决方法（从数据入手）

  此方法可能比较笨拙，经测试可以达到预期效果，具体思路：

  1. 页面组件中，动态属性写法：（运用 {{flag ? sth : other}} ）动态改变属性值；
  2. 怎么让 flag 在点击时能动态改变值呢，这个时候需要用到 wx:for 创建组件时的索引 idx 以及自定义属性了，即给每一行一个自定义属性，而这个属性的值就是当前组件的创建时的索引值，即：data-index="{{idx}}"，这样做之后，就可以在 index.js 中通过event.target.dataset.index 方式去取到该值；

  具体实现如下：

  页面修改：

  <!-- index.wxml -->
  
  <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" data-index="{{idx}}" style="background:url({{rowFocusFlagArray[idx] == 1 ? rowFocusStyle.bgImgUrl : rowDftStyle.bgImgUrl}}) no-repeat center;color:{{rowFocusFlagArray[idx] == 1 ? rowFocusStyle.color : rowDftStyle.color}};">{{dates[index + idx].desc}}</view>
  </view>

  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

  脚本修改：（体现在数据和行为上）

  
  Page({
      data: {
  
      // 这个数组用来保存焦点行标记值，非焦点行均为 'undefined'，焦点行为：1
      rowFocusFlagArray: [],
  
      // 默认行样式
      rowDftStyle: {
        bgImgUrl: '../resources/images/dlist_bg.png',
        color: '#727374'
      },
  
      // 焦点行样式
      rowFocusStyle: {
        bgImgUrl: '../resources/images/dlist_bg_focus.png',
        color: '#FFFFFF'
      }
    },
  
    // 这里面初始化工作要搞一下
    onLoad: function () {
  
      var that = this;
  
      var dates = util.getSevenDates();
  
      that.setData({ dates: dates });
  
      // 首先要清空下行标记值数组
      var rowFocusFlagArray = [];
  
      // 默认第一行为焦点行
      rowFocusFlagArray[0] = 1;
  
      that.setData({rowFocusFlagArray: rowFocusFlagArray});
    },  
  
    // 点击日期行，主要点击事件逻辑就在这里面了
    tapDateRow: function ( event ) {
      console.log( event );
      // console.log( event.currentTarget );
      // console.log( event.currentTarget == event.target );
  
      var that = this;
  
      // 1. 更新前先清空焦点标识数组，防止上一个样式不还原
      var rowFocusFlagArray = [];
  
      // 2. 根据 dataset 获取当前的索引，重点：必须要每行要加上个自定义数据：index
      var index = event.target.dataset.index;
  
      console.log( 'index = ' + index );
  
      // 3. 然后重新设置标识值，这里拿到的 index 就是当前被点击的行的索引了
      rowFocusFlagArray[index] = 1;
  
      // 4. 重新改变样式标识，刷新页面
      that.setData({rowFocusFlagArray: rowFocusFlagArray});
    }
  }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61

  经过上面的修改，正式达到我们想要的效果（网上随便百度了个屏幕录制gif软件，发现还挺好用的 - -！）

  

• 用例说明

  1. 页面： 充分利用 wx:for 的 index 值，并且和自定义属性 dataset 相结合，生成 data-index 自定义属性，值等于 wx:for 的 index 值；
  2. 数据： 添加两个样式对象和一个行标记值数组（rowDftStyle, rowFocusStyle, rowFocusFlagArray），三者关系为：通过判断rowFocusFlagArray 中对应行的标识值来决定采用 rowDftStyle 还是 rowFocusStyle 去作为当前行的样式；
  3. 行为： 先清空数据防止上一焦点行不还原，然后根据 dataset 获取当前行索引，再根据索引去设置 rowFocusFlagArray 值，最后通过自动刷新机制去改变样式；

• 总结

  1. 这篇本来根据 W3CSchool 分类是要和组件，和 WeUI.js 框架放一起，最后弄着弄着搞了点小例子，后面也看了下组件和WeUI.js 框架东西还是挺多的，决定分开放到下一次再去学习了，放一起怕消化不掉；

  2. 本篇主要简单记录了 WXSS 自己的一点东西，应该不止像素和样式问题，后续再慢慢积累，主要是后面的动态改变焦点例子的实现，这个也算是承上启下吧，连接上一篇学习的内容，做了个小小的测试练习，复习下上一篇内容，加深下印象；

  3. 这个小测试用例目的主要有关：焦点动态改变问题，由于不能直接操作页面组件，因此只能从数据和行为方面去做处理，还好想到了个方法，感觉这个比较笨拙，不知道还有没有更方便的方法来实现。

  完整demo代码地址：https://github.com/gcclll/JavaScript-Codes/tree/master/demos/WeChat/TvodPlayList