- row-gap 在PC端小程序不支持吗
我使用flex 布局,其中用到 gap, 手机端都是正常的,PC端只有 column-gap 生效,row-gap 不生效。 这个是 bug 还是故意而为之啊
2022-06-25 - 动态设置svg颜色
背景 小程序的想要使用不同颜色的svg只能通过引入多个svg文件。之前就有过动态改变svg颜色的需求,这几天看到也有其他同学想拥有这个功能。就想着能不能自己造一个。 解决方案 需求: 1.可以动态设置svg颜色。 2.最好不要改动svg源文件。 3.使用方便。 调查: 1.svg文件的颜色可以通过fill=“{color}”的值设置。所以基本思路就是,用正则替换改变color值,实现颜色的变化。 2.不想改变源文件,所以考虑以utf-8的格式读取svg文件,然后用正则替换后,将其转化为base64格式直接显示,而不是替换后写回文件。了解了一下,image已经支持base64。 [图片] 3.为了使用方便,功能实现后,考虑做成自定义组件。 代码 代码部分并不复杂,就三步: 读取文件,正则替换, base64编码。其中base64编码部分使用Dorian大佬分享的工具,非常感谢! [图片] 使用wx.getFileSystemManager()读取文件[代码]const fs = wx.getFileSystemManager() getSvgFile(src, color) { let that = this; fs.readFile({ filePath: src, encoding: 'UTF-8', position: 0, success(res) { let sourceFile = res.data; }, fail(res) { console.error(res) } }) }, [代码] 正则替换(考虑到部分svg没有默认fill属性,所以在svg头部主动增加了fill属性)[代码]changeColor(sourceFile, color) { let newSvg; if (/fill=".*?"/.test(sourceFile)) { newSvg = sourceFile.replace(/fill=".*?"/g, `fill="${color}"`); // SVG有默认色 } else { newSvg = sourceFile.replace(/<svg /g, `<svg fill="${color}" `); // 无默认色 } return newSvg } [代码] base64编码[代码]import { Base64 } from './base64.js'; const base64 = new Base64() getSvgFile(src, color) { let that = this; fs.readFile({ filePath: src, encoding: 'UTF-8', position: 0, success(res) { let sourceFile = res.data; let newFile = that.changeColor(sourceFile, color); let svgBase64File = base64.encode(newFile); that.setData({ svgData: 'data:image/svg+xml;base64,' + svgBase64File }) }, fail(res) { console.error(res) } }) }, [代码] 到这里主体功能完成,再封装成自定义组件就完工啦。自定义组件的代码片段可以自取: https://developers.weixin.qq.com/s/GrQhtZmg7yCJ 使用方法及效果 1.打开代码片段,把svg文件夹复制到自己项目的component文件夹下 [图片] 2.在需要引入svg的页面引入组件 [图片] 3.使用svg标签,可以自定义宽高,和颜色,以及文件路径。 [图片] [图片] color也支持使用JS动态控制,实现颜色变化的效果。 [图片] 4.目前就用了阿里icon的一些svg进行测试。有bug请多多反馈,也希望大家能提出更好的思路。
2022-10-14 - 大佬们,怎么获取页面的navigationBarTitleText标题?
我想在onShareAppMessage的时候设置转发的标题
2022-09-08 - 用户在小程序下单后如何通知商家?商家端目前是公众号嵌入H5页面
有大佬做过这个需要吗?
2019-10-25 - 微信小程序用户下单后 怎么通过微信通知商家能不能通过服务通知?
一次性订阅消息能否 解决商家只要有订单就能通过服务通知来通知
2020-06-12