uni-App引入iconfont

最新推荐文章于 2024-09-23 21:20:18 发布

weixin_34150224

最新推荐文章于 2024-09-23 21:20:18 发布

阅读量1.6k

点赞数

文章标签：移动开发前端框架 javascript ViewUI

原文链接：https://juejin.im/post/5bda6d64f265da391d2ecb37

版权

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里面这些功还没实现