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

该方法不仅仅局限于阿里图标，后台传过来的图标依旧适用，但是后台上传图标的时候需要上传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()就好啦。

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

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

微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序--自定义组件（超详细从新建到使用）
微信小程序–自定义组件微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...
微信小程序自定义组件：带未读数目的tabBar按钮(小红点+带未读数目)
http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1046&extra=page%3D1%26filter%3Dtypei ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
微信小程序自定义组件-树形数据表格（进阶版）
前言一.下载引用二.使用treegrid组件三.使用文档属性事件四.组件源码利用递归思想编写的表格行--treegrid-treeline 树形表格--treegrid-treegrid ...
（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
微信小程序-自定义导航栏
微信小程序-自定义导航栏第一步添加属性 "navigationStyle": "custom" 第二步自定义导航栏第二步自定义组件第四步使用组件 ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...

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

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

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

最新文章

热门文章