新的小程式專案準備踩坑 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
您的鼓勵是我們前行最大的動力，歡迎點贊，歡迎送小星星✨ ~