Touch WX 开发文档

Touch WX 开发文档

矢量图标库

在Touch WX中,可以使用iconfont提供的海量图标库。

访问网站:iconfont.cn,登录后创建一个项目。所有的图标都在该项目下管理。如图:

img

向项目里添加图标方法:

搜索需要的图标,点击购物车图标。

img

当把需要的图标都添加了购物车后,点击导航的购物车图标一并加入到项目中

img

图标加入到项目后需要编辑一下,调整一下留白。因为如果有的图标留白大,有的留白小,在同样的尺寸下图标大小会看起来不一致。

img

编辑图标,进行图标缩放来控制留白,建议以网格设为16时,四周统一留出1个网格的边距为准。

img

如果是比较瘦的图标,那么以上下为参考留出一个网格;同理,如果是比较胖的图标,以左右为参考。

img

除了调整边距,有时候还要修改名称。因为这里的名字决定了使用icon组件时设置的type值。

img

我们这里新增了两个图标:player-backward和player-forward,点击下载到本地。

img

会得到一个文件夹。文件中包含iconfont.ttf、iconfont.css。将ttf文件转位base64。

推荐转换工具:转换工具

在项目工程中,style文件夹下的icon.less

打开icon.less。在下图红框所画的位置,框架放了一些icon作为示例。如果要使用自己的iconfont。替换掉即可。

替换方法:复制转换工具中转换好的base64内容。粘贴在src的url中base64, 之后。

格式如下:

src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');

然后将下载下来的iconfont.css中如图所示红框位置的代码,替换icon.less中对应位置的代码。

增加新的icon后,需要在app.wxa中进行保存。将新添加的字体文件重新编译至dist目录中。

注意事项

@font-face{} 和 .ui-icon {} 的内容是必须保留的。 每次只需要替换后面的内容和@font-face{} 中base64的内容即可。