2023-06-29

1、svg-image组件

本组件支持传入svg路径，然后主色调根据专区的style切换而变化。

提供一个外部样式类：image-class. 可以对这个svg的样式进行修改

提供里两个properties 属性

src:  svg文件的路径。（注意！这里一定要写绝对路径！！！）

ignoreColors: 不需要换色的颜色。 特别是有多颜色的时候，比如上述的预约看房的图片， 外部黑色框框#222222是不需要换色的，那么就传入ignoreColors=['#222222']， 在更改主题色的时候就忽略掉这个。

主要思路： 通过读取项目的svg矢量图文件，然后解析svg的xml内容， 对xml的节点内容进行颜色替换。

 各个节点会在这三个地方产生颜色值fill, stroke,filter，而fill里面还会有纯色、线性渐变色、放射性渐变色, 后两者会在defs节点中先定义id，再通过fill="url(#defid)"， 因为存在渐变以及透明，所以直接修改fill="主题色"会损失渐变、透明度的属性。   filter这个一样会在defs预先定义。 

所以总体思路就是先枚举defs中的定义的节点，改变颜色值。  然后枚举各个节点，对于节点内容如果出现fill值，并且是以"#"开头的，就开始修改值为主题色值 （同时要判断这个颜色是否是要忽略修改的） 。  对于渐变色之内的，因为预先在defs中修改了，所以fill\ filter之类的就不用再次修改了。 

读取svg文件是用的  wx.getFileSystemManager().readFileSync

这个方法要求就是传入绝对路径。

很多帖子说需要预先将svg文件copy到${wx.env.USER_DATA_PATH}目录中，再readFile,但是测试得知，可以不用先copy到USER_DATA_PATH目录，直接readFIle即可。 

操作和编辑svg的内容是使用的xml-js库，svg本身就是一段xml， 使用xml-js库，将这段xml字符串转换为js对象， 然后直接操作对象即可。

2、calc

不管是在wxml写的 style，还是wxss中写的样式。  如果使用到calc 时，一定要主要 加号、减号 左右都要空格。 不然不生效

错误的：

style="height:calc(100%-62px);"

正确的

 style="height: calc(100% - 62px);"

错误的（constant、env 前面没空格）：

.root {

  height: calc(100% - 56px);

  height: calc(100% - 56px -constant(safe-area-inset-bottom));

  height: calc(100% - 56px -env(safe-area-inset-bottom));

}

正确的：

.root {

  height: calc(100% - 56px);

  height: calc(100% - 56px - constant(safe-area-inset-bottom));

  height: calc(100% - 56px - env(safe-area-inset-bottom));

}

3、box-sizing: border-box的使用