微信小程序中文编码-微信小程序 中文乱码

在微信小程序的开发过程中，需要在小程序中使用SVG矢量图标。 至于为什么要用SVG图标微信小程序中文编码，相信看完这篇文章你应该就明白了。 不懂的请百度

将SVG矢量图标导入微信小程序有两种方式：

1.将SVG图标转为BASE64编码

使用工具将需要导入的SVG图标转为BASE64编码

注意：生成BASE64编码时，需要更改开头data:image/svg； 到数据：图像/svg+xml； 这个在线工具的问题，使用其他在线BASE64编码功能时一定要注意

将转换后的编码复制到wxss文件中对应的background-image:url("SVG图标BASE64编码")，代码如下

.svg{background:url("data:svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAIAAAAhotZpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVhttp://www.cppcns.comFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADhttp://www.cppcns.comw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+2T3kLSMg8LC1QJzR/Dv3t/jrmSE9K/tTuKTbVJF1LQ93QcQG6L6nPEkWqECzSEhhiahTSNGLN0KKH4yG1CDLmhCN8EMskTdhAEXqaofsy9LWqNOCmeEgtgJRZZOF4EA0DlnSoC642kfxdQ+o+S1IOeURyXlRtSxVlJN3Ykve1Eaqwyvs2WuhQYC8Sq7nVDhYb6QhzJlL9rxkltKKokZKLdEhHB8l8OdRUNG6qsQ9sclBHkZ6k7Ojc0jJaSfLqYCG+g3h1编程客栈E99dDnm+P2oJetK2VLClE7LNtigHIBZI8mpOiGb0EebGhojVQl1xj5FXRSITP8YpRBpYFhiOKJlgJq9oKs3xhA+kB5UvppaOxhxJ0zGxMxDMkDSTZkiaIWkmRUn6fwEGwww.cppcns.comAE2xLmu6HJtTAAAAAElFTkSuQmCC");
width:100rpx;
height:100rpx;
background-size: contain
}

同时还需要添加background-size:contain属性，这样图标就可以根据元素的大小自动缩放

然后在wxss对应的wxml文件中添加

编译效果

2.使用财富地址引入SVG图标

将SVG图标上传到网站服务器，在浏览器中输入SVG图标地址，测试是否可以正常打开

将SVG图标地址复制到background-image:url（SVG图标URL地址）如下

.svg{background:url(http://mt.com/coding.svg);
 widwww.cppcns.comth:100rpx;
 height:100rpx;
}

编译效果

总结：

第一种方法直接将SVG图标的BASE64编码放到WXSS文件中，会大大增加微信小程序的体积。 如果要换图标，需要重新编译上传，不推荐

与第一种方法相比，第二种方法不会增加小程序的大小。 当需要更改图标时，可以上传到服务器。 很灵活微信小程序中文编码，推荐第二种方法

更多微信小程序开发文章，请点击下方相关文章查看

本文标题：详解微信小程序中SVG矢量图标的使用方法