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;
	}
	//其余页面引用
	<text class="icon">&#xe6df;</text>
	
复制代码

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

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

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

之前在vue中

<header>
      <view class="header-left">
         <slot name='headerLeft'>
      </view>
      <view class="header-content">
        {{title}}
      </view>
      <view class="header-left">
         <slot name='headerRight'>
      </view>
</header>
复制代码

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

<headerTop :title="包河消防">   //发现uni也不支持直接绑定数据，只有数字能够
       <text class="icon" slot="headerLeft">&#xe601;</text>
       <text class="icon" slot="headerRight">&#xe601;</text>
</headerTop>
解决方法：
    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- */ } 复制代码

vue里面这些功还没实现