前几周，高中同学找我做微信小程序比赛的前端，尽管我css/js经验很少，大概有两次网页前端的经历：一次是在高一，（顺带一提，当时的我立志成为新媒体作者或者文艺从业者，并誓不当程序员，结果……当时应该还没有“真香”梗），所以我坚决地拒绝学习css/js，用ps画了一整张网页背景，用浮动div和热点区域之类的可视化工具加上大量的flash动画组装起了我觉得还挺好看的网页……

第二次就是大一暑假跟着廖雪峰的python-web项目，自己改了改用UIKit组装的前端，也算不上什么很深入的接触。

有点扯远了，总之虽然前端方面菜的很，但画画图标，搞搞排版还是可以的。小组的组长把UI的大致排版给做好了，我寻思着就先导入些图标，顺便学一下微信小程序的前端跟普通css/js有啥不一样。之后就照例先百度，然后实践了一下，过程挺简单。不过可能因为时间先后的关系，有一些跟网上教程略有不同的地方，之后会讲到。

首先在Iconfont-阿里巴巴矢量图标库搜索自己想要的图标，中英文都有。有些图标的粗细可能不统一，可以在图标作者的仓库里找一些相同风格的图标。然后就可以下载代码，格式很全，像SVG可以直接用在Android界面资源的设计里。



其中有用的是iconfont.css，这里就是我实际操作跟网上博客所说的有些不一样的地方了。网上博客介绍说要把iconfont.css里的内容经过一个网站进行BASE64的转码。但可能是网站更新了，iconfont.css重命名成iconfont.wxss就可以直接在微信小程序里使用。

/* iconfont from https://www.iconfont.cn/          *//* 通过覆盖自动生成的BASE64代码更新icon列表（大概吧）  */@font-face {font-family: "iconfont";  src: url('iconfont.eot?t=1552055024198'); /* IE9 */  src: url('iconfont.eot?t=1552055024198#iefix') format('embedded-opentype'), /* IE6-IE8 */  /*实际这里的url很长，为了篇幅美观就删减掉了*/  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAmgA...') format('woff2'),  url('iconfont.woff?t=1552055024198') format('woff'),  url('iconfont.ttf?t=1552055024198') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */  url('iconfont.svg?t=1552055024198#iconfont') format('svg'); /* iOS 4.1- */}.iconfont {  font-family: "iconfont" !important;  font-size: 16px;  font-style: normal;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}.icon-weibiaoti201:before {  content: "e60b";}.icon-settings:before {  content: "e7c7";}.icon-help:before {  content: "e625";}.icon-team:before {  content: "e606";}.icon-sponsor:before {  content: "e634";}.icon-message:before {  content: "e64f";}.icon-ionc--1:before {  content: "e501";}.icon-analyze:before {  content: "e621";}.icon-submit:before {  content: "e6b5";}.icon-taskmanege:before {  content: "e6e2";}.icon-anonymous:before {  content: "e615";}

在app.wxss进行全局引用，这里的路径是直接相对于小程序根目录的。

@import "pages/iconfont/iconfont.wxss";

然后就能像普通的字体文件一样在页面里使用了。

text class="iconfont icon-settings" style="font-size:35rpx"/texttext style='margin:0rpx 15rpx'界面设置/text

不得不说比起原生安卓，微信小程序这种类React的书写方式和渲染速度真是太给劲了，安卓的Preview常常会因为自定义View之类的一片灰，全靠脑补和真机测试……希望自己接下来也能坚持学习，拓宽一下视野。