微信小程序自定义图标动态显示不同颜色

微信小程序自定义图标动态显示不同颜色

该方法不仅仅局限于阿里图标，后台传过来的图标依旧适用，但是后台上传图标的时候需要上传svg格式的图片呢。

主要思路是什么呢：后台上传的svg图片，先使用小程序提供的wx.getFileSystemManager().readFile()进行读取该svg图片文件，读取之后的数据是这样式儿的：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

</svg>

然后这时候就能通过改变fill属性的值进行修改图片颜色了呢，（改变fill属性值说着好简单呢，其实呢，搞了几圈正则表达式呢，还是不老好，优化中），改变之后呢，再将其这样式儿的数据转化成base64格式，用image的src属性不就可以显示在页面上啦。

特别说明哈：使用wx.getFileSystemManager().readFile()这个api的时候，使用本地路径"…/…/images/xxx.svg"，总是报错说找不到路径，像个傻子，也可能我对本地路径有什么误解吧，这个时候不要慌张，就要使用小程序的另一个api来解决啦，wx.downloadFile()这个将图片转化成临时路径，再使用wx.getFileSystemManager().readFile()就好啦。

捯饬了一天呢这个鬼东东呢，我先下班啦，加油兄弟们
后续上代码哈（我这个人忘性大，可能就真的忘记啦哈哈哈哈）