用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序样式(WXSS)及一个简单的小测试用例

纸飞机 2018-3-8 09:39

作者:gccll,来自原文地址 WXSS(WeiXin Style Sheets)这东西其实是微信自己的一种 CSS 语言,大部分都还是 CSS 语法,也有自己的东西,主要针对微信自己的 WXML 标记语言而生的,用来丰富其组件的显示效果。WXSS ...

作者:gccll,来自

原文地址

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}};",列表中的焦点行,获取到焦点时改变其宽度和字体颜色,就只要把这两个属性放到行内去运行时渲染。

    例子: (预期达到的效果:点击表内行,背景框变亮,字体颜色变成白色)

    
    <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 方式去取到该值;

    具体实现如下:

    页面修改:

    
    
    <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:forindex 值,并且和自定义属性 dataset 相结合,生成 data-index 自定义属性,值等于 wx:forindex 值;
    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

源码下载:
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏