weex接入iconfont

首先weex为什么要接iconfont呢？

在写这个文章前项目中也是没有接入的，一直都是用图片代替。

然后我就接到了如下需求

进度条.png

一看到这样的进度条，大脑飞速运转（1x1=2, 2x2=4, 3x3=9...）什么如果要用图片代替居然要9张

这种小图标，又是纯颜色的变换，很自然的就想到了平时h5项目中常用的iconfont

首先阅读下weex文档，是提供了DOM.addRule 以加载自定义字体。开发者可以通过指定 font-family加载 iconfont 和 custom font。

<template>
    <div>
        <text class="iconfont">&#xe6c9;<text>
    </div>
</template>
<script>
let dom = weex.requireModule('dom');

dom.addRule('fontFace', {
    fontFamily: 'iconfont',
    src: "url('http://at.alicdn.com/t/font_xxx.ttf')", //自己项目的iconfont地址
});

</script>
<style>
 .iconfont {
    font-family: iconfont;
}
</style>

如上面vue伪代码所示就可以成功使用iconfont，是不是很简单，但是需求并没有这么简单，这个iconfont的图标需要是动态的。

是不是直接把上面的这个变成一个变量就行了呢？

<template>
    <div>
        <text class="iconfont">{{icon}}<text>
    </div>
</template>
<script>
module.exports = {
    data: function () {
      return {
        icon: '&#xe6c9;',
      }
    },
}
</script>

我都这么说了明显不是，当这里iconfont是变量的时候，发现根本渲染不出来。
后面定位到如果是变量在webpack打包编译的过程中根本不会对""进行decode，所以展示不出来。

那既然定位到问题，就我们自己给它主动解码

 <text class="iconfont">{{getIcon}}<text>
<script>
  var he = require('he');
  module.exports = {
    data: function () {
      return {
        icon: '&#xe6c9;',
      }
    },
    computed: {
      getIcon: function() {
        return he.decode(this.icon)
      }
    }
   }
</script>

在vue里引入he解码模块，但是这样弄太麻烦了，感觉每次这样写都要疯了, 其实还有一个简单的方式就是使用\u解码，只需要把""赋值换成"\ue6c9"赋值就行

<script>
module.exports = {
    data: function () {
      return {
        icon: '\ue6c9',
      }
    },
}
</script>

终于可以愉快的在weex中使用iconfont了。