Weex在native中离线加载本地的字体文件,如iconfont.ttf

鉴于自己的APP有个离线模式,所以在使用iconfont的时候不得不将字体文件保存到本地,通过离线的方式加载,所以有了以下的文章.

先讲一波道理

1. weex怎么加载字体 -->通过dom的方式添加自定义字体
2. 如何区别本地资源和在线资源--> Schemes的定义
3. native端的相对路径--> 相对路径的使用

总结一波道理

1. Android或者iOS 访问本地图片或者字体,在weex中统一以' local://'为前缀 ;
2. '/'在android下如果加载的是字体对应的就是assets目录,若果加载的图片就从drawable 目录, 所以iconfont.ttf放置在src/assets目录下的话,字体的url加载方式应该为('local:///iconfont.ttf')
3. iOS同理,不过资源文件在bundle resources下.(加载方法未测试)

道理我都懂,可仍然过不好这一生 Talk is cheap.

/**
 * 初始化加载iconfont字体
 * 
 * @type {{initIconfont: (function())}}
 */
let iconfontUtils = {
    initIconfont() {
        let dom = weex.requireModule('dom');
        //通过获取platform判断加载字体文件的路径,(待完善,在手机的playground中,是无法加载本地文件的)
        let platform = weex.config.env.platform.toLowerCase();
        let url;
        if ( "android" == platform) {
            //本地资源采用'local:// '的方式加载
           //第三个斜杠是代表当前目录,对于android来说,如果加载的是字体,那么就是assets目录,同理`/iconfont.ttf'`就是加载`assets`目录下的iconfont.ttf文件
            url = "url('local:///font/iconfont.ttf')";//注意我这里是将字体文件放在'assets/font/''目录下的,所以
        } else if ("ios" == platform) {
            //todo 理论上同android未测试
            url = "url('local:///font/iconfont.ttf')";
        } else {
            url = "url('http://at.alicdn.com/t/xxxxxxx.ttf')"
        }
        dom.addRule('fontFace', {
            'fontFamily': "iconfont",
            'src': url
        });
    }
}
export default iconfontUtils;

---

除了道理还有一波鸡汤

---

关于加载本地字体库文件,动态绑定的时候异常显示

加载本地的字体库的话,静态写死在<text>元素下,如<text class='iconfont'>&#xe600;<text>,这样正常,但是如果通过Mustache进行数据绑定{{font}}(这里的font='&#xe600;')时,页面中显示是错误的.

解决方案:

方案一

参考hayvane在Weex关于字体图标的bug的回答

在template中 text写死 &#xe685;时，weex-template-compiler在编译阶段使用了he进行decode，而在template中Mustache进行数据绑定fontName（fontName:"&#xe685;"）时不会进行decode.

 var he = require('he');
 getFontName: function() {
   return he.decode(this.fontName)
 }

方案点评:

1. 引入了he导致打包体积过大
2. 需要手动处理非常麻烦
3. 待官方解决

---

方案二:

通过正则表达式将iconfont的字符取出替换,用String.fromCharCode()方法处理

decode(text) {
        // 正则匹配 图标和文字混排 eg: 我去上学校,天天不迟到
        let regExp = /&#x[a-z]\d{3,4};?/;
        if (regExp.test(text)) {
            return text.replace(new RegExp(regExp, 'g'), function (iconText) {
                let replace = iconText.replace(/&#x/, '0x').replace(/;$/, '');
                return String.fromCharCode(replace);
            });
        } else {
            return text;
        }
    }

方案二感谢hizhengfu给的思路.