uni-app引入iconfont矢量图各种坑

uni-app 是什么

• uni-app 是一个借鉴 Vue.js、小程序、mpVue 开发跨平台应用的前端框架。
• 通过编写 一套代码，将其编译到iOS、Android、微信小程序等多个平台。
• 目前可以打包成Android、IOS的App、小程序
• 有一个严重问题就是用户群少，出现问题基本都要靠自己摸索，关键这样容易浪费特别多时间，谨慎入坑，要不是公司非要用，我也懒得入坑

---

网上的教程很少，就连简单的引入icon Font矢量图也是问题一推，表示无奈

TIPS

框架定义App.vue文件的样式为全局样式，其他页面为scoped的样式

在官方的文档中找到例子 App.vue

    /* icon图标 */
    @font-face {
      font-family: iconfont;
      font-weight: normal;
      font-style: normal;
      src: url('https://at.alicdn.com/t/font_874003_9rw87a8y04t.ttf')
        format('truetype');
    }
    .icon {
      font-size: 56px;
      color: #fff;
      font-family: iconfont;
    }
    //其他页面引用
    
    

注：src引入的是阿里巴巴unicode链接

image.png

起初以为Vue slot标签识别不了 的代码串，尝试多次，结果才知道好像就不支持Slot标签

设想写一个全局通用的顶部标签栏组件

以前在vue中

      
         
      
      
        {{title}}
      
      
         
      

其他组件引入那个通用组件

   //发现uni也不支持直接绑定数据，只有数字可以
       
       

解决方法：
    data(){
        return{
            msg:'包河消防'  // 竟然要这样，也是无语了
        }
    }

本来是多么完美的事，解决了顶部栏，还能写一个通用方法，返回上个页面，和跳转其他页面，不但省略超多的代码和方法，关键还简单易懂，好用

经过一番折腾后
弄一个全局的通用返回上一个页面，跳转页面方法
main.js文件下

// 跳转到其他页面
Vue.prototype.ways=function(url){
    uni.navigateTo({
        url: url
    })
}
// 返回上个页面
Vue.prototype.backs=function(){
    uni.navigateBack({
        delta: 1
    })
}

写到这里本来是完了，今天有尝试引入阿里巴巴的FontClass类型终于成功了

Font Class

每次添加新的icon时候，会更新链接，你要把链接里的代码复制出来，然后复制到创建到新的icon.css里面，还要在复制代码里面添加https:，哎，之前也是这样弄，为什么不成功，到要放弃的时候成功了，好吧 ，你厉害

@font-face {font-family: "iconfont";
  src: url('https://at.alicdn.com/t/font.eot?t=1540274617069'); /* IE9*/
  src: url('https://at.alicdn.com/t8y0t=15402format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-JMJM=') format('woff'),
  url('https://at.alicdn.ct.ttf?t=1540274617069') format('truetype'),
 /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('https://at.alicdn.com/t/fonfont') format('svg'); /* iOS 4.1- */
}