猿问

Weex关于字体图标的bug

尝试在android和iOS平台下使用字体图标:
1.装载字体图标

 created:function () {   
          var domModule=weex.requireModule("dom");
            domModule.addRule('fontFace',{        
                    'fontFamily':'iconfont',                
                    'src':"url(\'http://at.alicdn.com/t/font_h973ii9uesgaatt9.ttf\')"
            })

        }

2.使用字体图标

<text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}" >&#xe685;</text>

通过以上这种方式,直接写死unicode是可以正常渲染出来的。然而,如果将里面的字符使用变量的方式给予赋值,是无法渲染出来的。

 <text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}" >{{fontName}}</text>
 fontName:"&#xe685;"

尝试各种办法,无果,可能是底层渲染时机的问题。


有只小跳蛙
浏览 1140回答 2
2回答

摇曳的蔷薇

对这个问题我仔细跟踪了下,导致的原因是:在template中 text写死 &#xe685;时,weex-template-compiler在编译阶段使用了he进行decode,而在template中Mustache进行数据绑定fontName(fontName:"&#xe685;")时不会进行decode既然了解了原因,可以这样解决,在vue中引入he模块,自己进行解码<text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}">{{getFontName}}</text><script>&nbsp; var he = require('he');&nbsp; module.exports = {&nbsp; &nbsp; data: function () {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; fontName: '&#xe685;',&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; computed: {&nbsp; &nbsp; &nbsp; getFontName: function() {&nbsp; &nbsp; &nbsp; &nbsp; return he.decode(this.fontName)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp;}</script>

白板的微信

不用那么麻烦,不需要什么解码,只需要把&#xe685;换成\ue685就可以了<text&nbsp;:style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}"&nbsp;>{{fontName}}</text> fontName:"\ue685"
随时随地看视频慕课网APP
我要回答