阅读 398

在小程序框架 wepy 中使用 iconfont 图标字体

新的小程序项目准备踩坑 Wepy 啦!

纠结过原生、Wepy、mpvue到底用哪个。

  • 原生:之前的项目用的就是原生,开发起来有点太原始,想换换口味。把原生作为托底方案,假如另外两个遇到踩不过去的坑就转用原生做。
  • wepy:star数量有16k,看了看官方文档,感觉开发方式还不错。毕竟算是腾讯亲生儿子,感觉靠谱些。
  • mpvue:star数跟 wepy 不相上下,也是 16k,一套代码多端通用很有吸引力。

mpvue 跟 wepy 真的很难抉择,我目前没有兼容多平台的需求,所以直觉告诉我还是用 wepy 吧~

100 多位经验丰富的开发者参与,在 Github 上获得了近 1000star 的全栈全平台开源项目想了解或参与吗?
项目地址:https://github.com/cachecats/coderiver

为什么用图标字体

一是轻量级、灵活性,二是小程序的特殊性。

目前小程序整体虽然可以达到 8M,但每个分包不能超过2M,图标都用图片的话体积太大。

查找并下载图标

我们采用阿里的 iconfont

打开 iconfont ,搜索想要的图标,然后鼠标放到图标上点购物车小按钮加入购物车,如下图:

选完后找到购物车,点添加进项目。没有项目的话可以新建一个。

把图标放进项目的目的是,以后再想添加其他图标,直接加入项目即可,方便一键下载。

打开项目,可以看到刚选择的图标都在里面。点 下载至本地,将这些图标字体打包下载到本地。

下载完是一个 .zip 压缩包,解压得到一系列文件。

除了前两个,其他的几个文件都是以 iconfont 作为文件名,只是后缀不同。猜想这应该是为了兼容不同的浏览器而形成的不同格式,打开 iconfont.css 瞅一眼,可以看到前面几行是引入了下面几个文件,还有注释,分别是兼容 IE9IE6-8 等各种版本的浏览器。

知道原理后,可以根据自己项目的情况选择引入哪些文件。最保险的是把以 iconfont 为文件名的几个文件都拷过去,肯定没问题。但小程序的内核版本应该比较高,在微信内部打开不用考虑兼容性问题,所以我们只用引 iconfont.css 这一个文件即可。

将 iconfont 引入wepy项目

打开 wepy 项目,将 iconfont.css 拷到项目中。我习惯放到 src/assets/iconfont 下面。

拷进来之后还要做一些更改。

由于我在项目中用了 SCSS,为了引入方便将文件名改为 iconfont.scss。虽然 SCSS 也能直接引入 CSS 文件,但我试了如果用 .css 作为后缀则引不成功,所以还是改成 .scss 吧。

然后改 iconfont.scss 里的代码,把代码中引入其他文件的代码都删掉,只保留有 base64 的那行:

url('data:application/x-font-woff2;charset=utf-8;base64...
复制代码

然后还需要在 url 的前面加上 src:。改完后最终的代码:

@font-face {font-family: "iconfont";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAA...==') format('woff2');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-like:before {
  content: "\e614";
}

.icon-add:before {
  content: "\e612";
}
复制代码

上面 base64 中间删掉了很多用 … 代替了。

改完 iconfont.scss ,再在 app.wpy 中引入即可。

<style lang="scss">
  @import "./assets/iconfont/iconfont";

  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }
</style>
复制代码

现在就可以愉快的在 wepy 项目中使用图标字体啦!

演示

新建一个页面,放一个 text 和 一个图标,编译后用微信开发工具打开看效果

<template lang="wxml">
  <div>
    <text>哈哈</text>
    <i class='iconfont icon-add'></i>
  </div>
</template>
复制代码

图标显示成功。

以上就是在 wepy 中使用 iconfont 图标字体的全部内容。


全栈全平台开源项目 CodeRiver

CodeRiver 是一个免费的项目协作平台,愿景是打通 IT 产业上下游,无论你是产品经理、设计师、程序员或是测试,还是其他行业人员,只要有好的创意、想法,都可以来 CodeRiver 免费发布项目,召集志同道合的队友一起将梦想变为现实!

CodeRiver 本身还是一个大型开源项目,致力于打造全栈全平台企业级精品开源项目。涵盖了 React、Vue、Angular、小程序、ReactNative、Android、Flutter、Java、Node 等几乎所有主流技术栈,主打代码质量。

目前已经有近 100 名优秀开发者参与,github 上的 star 数量将近 1000 个。每个技术栈都有多位经验丰富的大佬坐镇,更有两位架构师指导项目架构。无论你想学什么语言处于什么技术水平,相信都能在这里学有所获。

通过 高质量源码 + 博客 + 视频,帮助每一位开发者快速成长。

项目地址:https://github.com/cachecats/coderiver


您的鼓励是我们前行最大的动力,欢迎点赞,欢迎送小星星✨ ~

关注下面的标签,发现更多相似文章
评论