首先weex為什么要接iconfont呢鹰椒？
在寫這個(gè)文章前項(xiàng)目中也是沒有接入的票灰，一直都是用圖片代替蔬墩。
然后我就接到了如下需求
進(jìn)度條.png
一看到這樣的進(jìn)度條斤贰，大腦飛速運(yùn)轉(zhuǎn)（1x1=2, 2x2=4, 3x3=9...）什么如果要用圖片代替居然要9張
這種小圖標(biāo)篡帕，又是純顏色的變換殖侵，很自然的就想到了平時(shí)h5項(xiàng)目中常用的iconfont
首先閱讀下weex文檔，是提供了DOM.addRule 以加載自定義字體镰烧。開發(fā)者可以通過指定 font-family加載 iconfont 和 custom font拢军。
<template>
<div>
<text class="iconfont"><text>
</div>
</template>
<script>
let dom = weex.requireModule('dom');
dom.addRule('fontFace', {
fontFamily: 'iconfont',
src: "url('http://at.alicdn.com/t/font_xxx.ttf')", //自己項(xiàng)目的iconfont地址
});
</script>
<style>
.iconfont {
font-family: iconfont;
}
</style>
如上面vue偽代碼所示就可以成功使用iconfont，是不是很簡單怔鳖，但是需求并沒有這么簡單茉唉，這個(gè)iconfont的圖標(biāo)需要是動(dòng)態(tài)的。
是不是直接把上面的這個(gè)變成一個(gè)變量就行了呢结执？
<template>
<div>
<text class="iconfont">{{icon}}<text>
</div>
</template>
<script>
module.exports = {
data: function () {
return {
icon: '',
}
},
}
</script>
我都這么說了明顯不是度陆，當(dāng)這里iconfont是變量的時(shí)候，發(fā)現(xiàn)根本渲染不出來献幔。
后面定位到如果是變量在webpack打包編譯的過程中根本不會(huì)對(duì)""進(jìn)行decode懂傀，所以展示不出來。
那既然定位到問題蜡感，就我們自己給它主動(dòng)解碼
<text class="iconfont">{{getIcon}}<text>
<script>
var he = require('he');
module.exports = {
data: function () {
return {
icon: '',
}
},
computed: {
getIcon: function() {
return he.decode(this.icon)
}
}
}
</script>
在vue里引入he解碼模塊鸿竖，但是這樣弄太麻煩了，感覺每次這樣寫都要瘋了, 其實(shí)還有一個(gè)簡單的方式就是使用\u解碼铸敏，只需要把""賦值換成"\ue6c9"賦值就行
<script>
module.exports = {
data: function () {
return {
icon: '\ue6c9',
}
},
}
</script>
終于可以愉快的在weex中使用iconfont了缚忧。
