新的小程序項(xiàng)目準(zhǔn)備踩坑 Wepy 啦佩伤！
糾結(jié)過(guò)原生、Wepy晦毙、mpvue到底用哪個(gè)生巡。
- 原生：之前的項(xiàng)目用的就是原生，開(kāi)發(fā)起來(lái)有點(diǎn)太原始结序，想換換口味障斋。把原生作為托底方案，假如另外兩個(gè)遇到踩不過(guò)去的坑就轉(zhuǎn)用原生做徐鹤。
- wepy：star數(shù)量有16k垃环，看了看官方文檔，感覺(jué)開(kāi)發(fā)方式還不錯(cuò)返敬。畢竟算是騰訊親生兒子遂庄，感覺(jué)靠譜些。
- mpvue：star數(shù)跟 wepy 不相上下劲赠，也是 16k涛目，一套代碼多端通用很有吸引力。
mpvue 跟 wepy 真的很難抉擇凛澎，我目前沒(méi)有兼容多平臺(tái)的需求霹肝，所以直覺(jué)告訴我還是用 wepy 吧~
100多位經(jīng)驗(yàn)豐富的開(kāi)發(fā)者參與，在 Github 上獲得了近1000個(gè)star的全棧全平臺(tái)開(kāi)源項(xiàng)目想了解或參與嗎塑煎？
項(xiàng)目地址：https://github.com/cachecats/coderiver
為什么用圖標(biāo)字體
一是輕量級(jí)沫换、靈活性，二是小程序的特殊性最铁。
目前小程序整體雖然可以達(dá)到 8M讯赏，但每個(gè)分包不能超過(guò)2M垮兑，圖標(biāo)都用圖片的話體積太大。
查找并下載圖標(biāo)
我們采用阿里的 iconfont漱挎。
打開(kāi) iconfont 系枪，搜索想要的圖標(biāo)，然后鼠標(biāo)放到圖標(biāo)上點(diǎn)購(gòu)物車小按鈕加入購(gòu)物車磕谅，如下圖：
選完后找到購(gòu)物車私爷，點(diǎn)添加進(jìn)項(xiàng)目。沒(méi)有項(xiàng)目的話可以新建一個(gè)怜庸。
把圖標(biāo)放進(jìn)項(xiàng)目的目的是当犯，以后再想添加其他圖標(biāo)，直接加入項(xiàng)目即可割疾，方便一鍵下載嚎卫。
打開(kāi)項(xiàng)目，可以看到剛選擇的圖標(biāo)都在里面宏榕。點(diǎn) 下載至本地拓诸，將這些圖標(biāo)字體打包下載到本地。
下載完是一個(gè) .zip 壓縮包麻昼，解壓得到一系列文件奠支。
除了前兩個(gè)，其他的幾個(gè)文件都是以 iconfont 作為文件名抚芦，只是后綴不同倍谜。猜想這應(yīng)該是為了兼容不同的瀏覽器而形成的不同格式，打開(kāi) iconfont.css 瞅一眼叉抡，可以看到前面幾行是引入了下面幾個(gè)文件尔崔，還有注釋，分別是兼容 IE9 褥民、IE6-8 等各種版本的瀏覽器季春。
知道原理后，可以根據(jù)自己項(xiàng)目的情況選擇引入哪些文件消返。最保險(xiǎn)的是把以 iconfont 為文件名的幾個(gè)文件都拷過(guò)去载弄，肯定沒(méi)問(wèn)題。但小程序的內(nèi)核版本應(yīng)該比較高撵颊，在微信內(nèi)部打開(kāi)不用考慮兼容性問(wèn)題宇攻，所以我們只用引 iconfont.css 這一個(gè)文件即可。
將 iconfont 引入wepy項(xiàng)目
打開(kāi) wepy 項(xiàng)目倡勇，將 iconfont.css 拷到項(xiàng)目中逞刷。我習(xí)慣放到 src/assets/iconfont 下面。
拷進(jìn)來(lái)之后還要做一些更改。
由于我在項(xiàng)目中用了 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>
現(xiàn)在就可以愉快的在 wepy 項(xiàng)目中使用圖標(biāo)字體啦拗馒！
演示
新建一個(gè)頁(yè)面路星，放一個(gè) text 和 一個(gè)圖標(biāo)，編譯后用微信開(kāi)發(fā)工具打開(kāi)看效果
<template lang="wxml">
<div>
<text>哈哈</text>
<i class='iconfont icon-add'></i>
</div>
</template>
圖標(biāo)顯示成功诱桂。
以上就是在 wepy 中使用 iconfont 圖標(biāo)字體的全部?jī)?nèi)容洋丐。
全棧全平臺(tái)開(kāi)源項(xiàng)目 CodeRiver
CodeRiver 是一個(gè)免費(fèi)的項(xiàng)目協(xié)作平臺(tái)，愿景是打通 IT 產(chǎn)業(yè)上下游挥等，無(wú)論你是產(chǎn)品經(jīng)理友绝、設(shè)計(jì)師、程序員或是測(cè)試肝劲，還是其他行業(yè)人員迁客，只要有好的創(chuàng)意、想法辞槐，都可以來(lái) CodeRiver 免費(fèi)發(fā)布項(xiàng)目掷漱，召集志同道合的隊(duì)友一起將夢(mèng)想變?yōu)楝F(xiàn)實(shí)！
CodeRiver 本身還是一個(gè)大型開(kāi)源項(xiàng)目催蝗，致力于打造全棧全平臺(tái)企業(yè)級(jí)精品開(kāi)源項(xiàng)目切威。涵蓋了 React、Vue丙号、Angular先朦、小程序、ReactNative犬缨、Android喳魏、Flutter、Java怀薛、Node 等幾乎所有主流技術(shù)棧刺彩，主打代碼質(zhì)量。
目前已經(jīng)有近 100 名優(yōu)秀開(kāi)發(fā)者參與，github 上的 star 數(shù)量將近 1000 個(gè)创倔。每個(gè)技術(shù)棧都有多位經(jīng)驗(yàn)豐富的大佬坐鎮(zhèn)嗡害，更有兩位架構(gòu)師指導(dǎo)項(xiàng)目架構(gòu)。無(wú)論你想學(xué)什么語(yǔ)言處于什么技術(shù)水平畦攘，相信都能在這里學(xué)有所獲霸妹。
通過(guò) 高質(zhì)量源碼 + 博客 + 視頻，幫助每一位開(kāi)發(fā)者快速成長(zhǎng)知押。
項(xiàng)目地址：https://github.com/cachecats/coderiver
您的鼓勵(lì)是我們前行最大的動(dòng)力叹螟，歡迎點(diǎn)贊，歡迎送小星星? ~
