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給的思路.