新的小程序项目准备踩坑 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 图标字体的全部内容。
全栈全平台开源项目 CodeRiver
CodeRiver 是一个免费的项目协作平台，愿景是打通 IT 产业上下游，无论你是产品经理、设计师、程序员或是测试，还是其他行业人员，只要有好的创意、想法，都可以来 CodeRiver 免费发布项目，召集志同道合的队友一起将梦想变为现实！
CodeRiver 本身还是一个大型开源项目，致力于打造全栈全平台企业级精品开源项目。涵盖了 React、Vue、Angular、小程序、ReactNative、Android、Flutter、Java、Node 等几乎所有主流技术栈，主打代码质量。
目前已经有近 100 名优秀开发者参与，github 上的 star 数量将近 1000 个。每个技术栈都有多位经验丰富的大佬坐镇，更有两位架构师指导项目架构。无论你想学什么语言处于什么技术水平，相信都能在这里学有所获。
通过 高质量源码 + 博客 + 视频，帮助每一位开发者快速成长。
项目地址：https://github.com/cachecats/coderiver
您的鼓励是我们前行最大的动力，欢迎点赞，欢迎送小星星✨ ~
