在小程序框架 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 圖標字體的所有內容。

---

全棧全平臺開源項目 CodeRiver

CodeRiver 是一個免費的項目協做平臺，願景是打通 IT 產業上下游，不管你是產品經理、設計師、程序員或是測試，仍是其餘行業人員，只要有好的創意、想法，均可以來 CodeRiver 免費發佈項目，召集志同道合的隊友一塊兒將夢想變爲現實！

CodeRiver 自己仍是一個大型開源項目，致力於打造全棧全平臺企業級精品開源項目。涵蓋了 React、Vue、Angular、小程序、ReactNative、Android、Flutter、Java、Node 等幾乎全部主流技術棧，主打代碼質量。

目前已經有近 100 名優秀開發者參與，github 上的 star 數量將近 1000 個。每一個技術棧都有多位經驗豐富的大佬坐鎮，更有兩位架構師指導項目架構。不管你想學什麼語言處於什麼技術水平，相信都能在這裏學有所獲。

經過 高質量源碼 + 博客 + 視頻，幫助每一位開發者快速成長。

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

---

您的鼓勵是咱們前行最大的動力，歡迎點贊，歡迎送小星星✨ ~