微信小程序自定义图标动态显示不同颜色
该方法不仅仅局限于阿里图标,后台传过来的图标依旧适用,但是后台上传图标的时候需要上传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()就好啦。
捯饬了一天呢这个鬼东东呢,我先下班啦,加油兄弟们
后续上代码哈(我这个人忘性大,可能就真的忘记啦哈哈哈哈)