为进一步提升用户使用体验，降低开发者接入成本，小程序音视频通话（for 硬件）将切换为免费使用，适用于所有设备类型。 一、切换时间 2024年9月9日 15时 二、开发接入 切换后，校园模式和IoT模式的存量设备均可正常使用，无需消耗license。增量设备通话不再依赖license激活。切换后，已有license相关接口处于「待回收」状态，不再消耗资源。具体调整如下：激活设备 license：不再消耗license，所有设备默认返回无实际意义的「激活成功」。查询设备激活详情：所有设备默认返回无实际意义的「已激活」。查询 license 资源包列表：无变化。上述接口将于2024年12月31日正式回收。开发者需在接口回收前清除相关依赖，避免业务受影响。 三、退款指引 资源池中未激活的license，可在2024年9月30日10时之前申请退款，退款流程如下： 填写退款申请，补充退款银行等信息若已开具发票，需要申请发票核销，并提供核销证明 若license为服务商分配，资金统一退回至服务商，开发者无需单独申请申请后将进行资料审核，退款金额预计在3个月内打入登记账户提交入口：license退款申请 四、运营规范 我们依然会严格验证设备类型、呼叫行为的真实性，若发现开发者有冒用、滥用、骚扰、欺诈等违规行为，将依照运营规范回收音视频能力，并对小程序进行违规处理，详见《微信小程序平台运营规范》 五、相关文档 小程序音视频通话（for 硬件） 硬件VoIP审核验证要求 微信团队 2024年9月4日

背景 小程序的想要使用不同颜色的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请多多反馈，也希望大家能提出更好的思路。

// 自定义组件myDialog中 <mp-halfScreenDialog show="{{visible}}" maskClosable="{{true}}" close="close"> <view slot='title'> <view class='slideTop'> {{ modalTitle}} </view> </view> <view slot="desc"> <view class='slideCon'> {{modalContent}} </view> </view> </mp-halfScreenDialog> // 页面使用 <myDialog modalContent="内容" visible="{{tipMark}}" bind:close="closeTip" modalTitle="标题" bind:sure="getTip"></myDialog>