uni-app引入iconfont的坑

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">&#xe601;</text>
       <text class="icon" slot="headerRight">&#xe601;</text>
</headerTop>

本来是多么完美的事，解决了顶部栏，还能写一个通用方法，返回上个页面，和跳转其他页面，不但省略超多的代码和方法，关键还简单易懂，好用
uni-app引入iconfont的坑
经过一番折腾后
弄一个全局的通用返回上一个页面，跳转页面方法
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- */
}

uni-app引入iconfont的坑

TIPS

设想写一个通用的顶部标签栏

Font Class

相关推荐