weex踩坑之旅第三弹 ~ 在weex中集成font-awesome

为了完成一个APP开发,图标是必不可少,使用图片图标加载速度慢,编程复杂。可以考虑使用字体图标库,阿里有一套图标库 http://www.iconfont.cn/collec...,大家可以借鉴,但我更偏向于使用font-awesome(官网 http://fontawesome.io/icons)。那么,如何将其集成到weex开发中呢?这并不是一个简单的事情。

一开始我尝试使用在vue中使用style-loader,css-loader加载css文件,使用file-loader加载字体文件,web环境测试ok,但是部署到真机时,直接报错!这种传统的加载字体库的方式显然不适用于weex开发,这是因为在native环境中根本不支持dom,bom,而style-loader,css-loader插件中有大量的dom操作

怎么办?查看weex文档发现一个有用的模块,现在发现,官方文档也没有大家说的那么不堪,仔细看看还是有很多可以借鉴和学习的地方,只不过一开始不是很熟悉,所以感觉晦涩难懂。

weex踩坑之旅第三弹 ~ 在weex中集成font-awesome_第1张图片

在weex中集成font-awesome

1. 获取ttf字体文件

根据官方文档,可以将ttf文件加载到项目中,并且可以指定fontFamily。那么,从哪里获取字体文件呢,cdn(http://www.bootcdn.cn/)!通过...,可以知道ttf文件的位置为https://cdn.bootcss.com/font-...

weex踩坑之旅第三弹 ~ 在weex中集成font-awesome_第2张图片

2. 设置字体

应该在哪里设置字体?在使用之前呗。我是将其放在了vue生命周期的created函数中

let domModule = weex.requireModule('dom');
//...
created(){
            //添加规则 addRule是可以为dom 添加一条规则,目前支持自定义字体fontFace规则,构建自定义的font-family,可以在text使用
      domModule.addRule('fontFace', {
          'fontFamily': "awesomeFont",
          'src': "url('https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0')"
      });
}

3. 引用

已经迫不及待要看看效果了。那么如何使用呢?font-awesome标准用法是导入css文件,然后给i标签添加class,添加不同的class具有图标,但是我们现在没有导入css文件,而是直接导入字体库,那我们在使用的时候也是直接通过unicode使用字体。在http://fontawesome.io/cheatsheet 中可以查看到图标对应的unicode码

模板代码:

css代码

.icon {
    font-family: awesomefont
}

weex踩坑之旅第三弹 ~ 在weex中集成font-awesome_第3张图片

接下来在模拟器上进行测试

weex踩坑之旅第三弹 ~ 在weex中集成font-awesome_第4张图片

你可能感兴趣的:(vue.js,font-awesome,weex)