uni-App引入iconfont

Zero遊戲人生丶發表於2018-11-01
APP

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連結

image.png
起初以為Vue slot標籤識別不了&#xe6df;的程式碼串，嘗試多次，結果才知道好像就不支援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裡面這些功還沒實現

fake

相關文章