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裏面這些功還沒實現