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

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

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

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

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

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

为什么用图标字体

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

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

查找并下载图标

我们采用阿里的 iconfont。

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

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

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

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

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

除了前两个，其他的几个文件都是以 iconfont 作为文件名，只是后缀不同。猜想这应该是为了兼容不同的浏览器而形成的不同格式，打开 iconfont.css 瞅一眼，可以看到前面几行是引入了下面几个文件，还有注释，分别是兼容 IE9 、IE6-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 图标字体的全部内容。

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