gm-icss 自定义样式 解码 编码

前言

解决自定义样式需求，实现了此功能，功能包含有此inline-css代码规范，以统一设置标准。

代码格式： eid = css

eid 为标签唯一ID，在C端AXML里能找到 css 为即将应用在此标签上的行内样式

注意：对多个标签设置样式需要换行符，一行一个标签样式。

保存后在C端即可看到效果：

安装

npm i -s gm-icss

使用方法

编码成icss：

const icss = require('gm-icss');

let data = {
    eid2: [
        {
            name: "color",
            value: "red",
        },
        {
            name: "background-color",
            value: "blue",
        },
        {
            name: "font-size",
            value: "16px",
        },
    ],
    eid3: [
        {
            name: "font-size",
            value: "26px",
        },
    ],
};

icss.encode(data);
//"eid2=color:red;background-color:blue;font-size:16px;\neid3=font-size:26px;"

解码icss：

const icss = require('gm-icss');


let css = `
  eid2=color:red;background-color:blue;font-size:16px; 
  eid3=font-size:26px;
`

icss.decode(css);
/*
{
  eid2: [
    { name: 'color', value: 'red' },
    { name: 'background-color', value: 'blue' },
    { name: 'font-size', value: '16px' }
  ],
  eid3: [ { name: 'font-size', value: '26px' } ]
}
*/

相关工具

如果对axml文件处理，加上icss特性，可以使用axmlcss命令工具 npm i -g axmlcss 命令行使用方法  axmlcss axml文件路径

axmlcss pages/index/index.axml
# 在命令行中  即可自动转换index.axml文件。
# 同时pages/index/.icss会存放备份的axml

之后在index.js   中的this.data.$css 写好样式可以生效，或者更新$css值

this.setData({
    $css: `e2 = color:red`
})

既然行内样式可以在js中作为字符串存放更新，那就可以存入数据库。所以你可以配合前端函数库中 apis.$init 使用