zoukankan      html  css  js  c++  java
  • 微信小程序使用wxs在页面中调用js函数,颜色值格式转换 rgb和十六进制的转换

    <wxs module="filter">
    var filter = {
      numberToFix: function (hex) {
          // 16进制颜色值的正则
            // var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
            var reg = getRegExp('^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$','g');
            console.log(reg);
            console.log('结束');
            // 把颜色值变成小写
            var color = hex.toLowerCase();
            if (reg.test(color)) {
                // 如果只有三位的值,需变成六位,如:#fff => #ffffff
                if (color.length === 4) {
                    var colorNew = "#";
                    for (var i = 1; i < 4; i += 1) {
                        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
                    }
                    color = colorNew;
                }
                // 处理六位的颜色值,转为RGB
                var colorChange = [];
                for (var i = 1; i < 7; i += 2) {
                    colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
                }
                console.log('ygy1');
                return "RGB(" + colorChange.join(",") + ")";
            } else {
                console.log('ygy2');
                return color;
            }
      },
      
    }
    module.exports = {
      numberToFix: filter.numberToFix
    }
    
    </wxs>

    <view class="recharge-list is-active" style="
    background-color:
    {{filter.numberToFix(baseinfo.base_color)}}"></view>
     

    参考:

    1、https://blog.csdn.net/weixin_34049948/article/details/93310218

    2、https://developers.weixin.qq.com/community/develop/doc/000cc054f101c0ebbb399ca2751000?highLine=wxs%2520%25E4%25B8%25AD%25E6%2594%25AF%25E6%258C%2581%25E6%25AD%25A3%25E5%2588%2599%25E8%25A1%25A8%25E8%25BE%25BE%25E5%25BC%258F

    3、https://www.liaoxuefeng.com/wiki/1022910821149312/1023021582119488

    4、https://blog.csdn.net/mossbaoo/article/details/93484635

  • 相关阅读:
    SpringBoot + CXF快速实现SOAP WebService(支持Basic Auth)
    利用iptables做端口转发
    artDialog测试
    jquery的常用ajax操作
    通过委托让缓存操作更优雅
    Jquery取得iframe中元素的几种方法
    jQuery选择器大全
    常用JS汇总
    firefox广告拦截插件
    easyUI删除行的操作
  • 原文地址:https://www.cnblogs.com/ygyy/p/12161802.html
Copyright © 2011-2022 走看看