uni-App引入iconfont
摘要：
uni-app 是什麼
uni-app 是一個借鑑 Vue.js 、 小程式 、 mpVue 開發跨平臺應用的前端框架。
通過編寫 一套程式碼，將其編譯到iOS、Android、微信小程式等多個平臺。
目前打包成Android，IOS的App，雖然能編譯到小程式，但...
uni-app 是什麼
- uni-app 是一個借鑑 Vue.js 、 小程式 、 mpVue 開發跨平臺應用的前端框架。
- 通過編寫 一套程式碼，將其編譯到iOS、Android、微信小程式等多個平臺。
- 目前打包成Android，IOS的App，雖然能編譯到小程式，但是好像還不能打包成小程式，官方文件好像也沒查到
- 有一個嚴重問題就是使用者群少，出現問題基本都要靠自己摸索，這倒不可怕，關鍵這樣容易浪費特別多時間，謹慎入坑，要不是公司非要用，我也懶得入坑
網上的教程特別少，就連簡單的引入icon Font向量圖也是問題一推，表示無奈
TIPS
框架定義App.vue檔案的樣式為全域性樣式，其他頁面為scoped的樣式
設想寫一個通用的頂部標籤欄
通用的頂部標籤欄弄成一個元件，全域性通用也是問題一堆，原諒我對Vue API瞭解還不是非常多 官方雖然沒有文件，但是在appDemo例子引入IconFont，不過這個操作很有問題
/* 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');
}
複製程式碼
src引入的是阿里巴巴unicode連結，但是這樣造成一個新問題出來， 就是Vue slot標籤識別不了  的程式碼串，嘗試多次未果，因為這個問題所以暫時想其他辦法代替，原本思路是寫成這樣通用元件
<header>
<view class="header-left">
<slot name='headerLeft'>
</view>
<view class="header-content" :title=title>
{{title}}
</view>
<view class="header-left">
<slot name='headerRight'>
</view>
</header>
複製程式碼
其他元件引入那個通用元件
<headerTop :title=''包河消防"> <text class="icon" slot="headerLeft"></text> <text class="icon" slot="headerRight"></text> </headerTop> 複製程式碼
本來是多麼完美的事，解決了頂部欄，還能寫一個通用方法，返回上個頁面，和跳轉其他頁面，不但省略超多的程式碼和方法，關鍵還簡單易懂，好用
經過一番折騰後 弄一個全域性的通用返回上一個頁面，跳轉頁面方法 main.js檔案下
// 跳轉到其他頁面
Vue.prototype.ways=function(url){
uni.navigateTo({
url: url
})
}
// 返回上個頁面
Vue.prototype.backs=function(){
uni.navigateBack({
delta: 1
})
}
複製程式碼
寫到這裡本來是完了，結果嘗試多次阿里巴巴的Font Class終於成功了，沒辦法，寫完程式碼，看效果的過程特別浪費時間（10秒-300秒），經常出問題，關鍵我寫完專案，都沒用，軟體才修復，這個問題好多了，無語 font Class的成功就意味這可以寫成通用元件，還不用搞的每個頁面寫那幾個基本方法了
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- */
}
複製程式碼