微信小程序開發 | 如何在小程序中使用自定義 icon 圖標

2022-06-22

題圖 karrylady.cn

本文是(shi)微信(xin)小(xiao)程(cheng)序(xu)開發學習筆記。

微信小程序(xu) icon 組(zu)件(標(biao)(biao)簽)只提(ti)供 9 型圖標(biao)(biao)，不(bu)能滿足開發或設計的個(ge)(ge)性化需求。為了解(jie)決(jue)這個(ge)(ge)問題，我(wo)們可以使用定制的 icon 圖標(biao)(biao)，豐富原圖標(biao)(biao)類型。

在微信小程序中使用自定義 icon 圖標有 6 種方法：

1.使用 icon 圖標(特指位圖)

2. 微(wei)信(xin)(精(jing)靈圖)

3.使用 CSS 風格繪(hui)制(zhi)(這種方法工作量大)

4.使用矢量字體

5.使用 SVG 矢量文件

6.使用微信

這篇文章只解釋了第(di) 4 的方(fang)法，因為(wei)我暫時不除(chu)了第(di) 1 的方(fang)法。

使用矢量字體來自定義 icon 圖標(biao)，需要阿里巴(ba)巴(ba)圖標(biao)庫網站微信。

題外話，我一(yi)直(zhi)認為這個網站只能用于設計，直(zhi)到我接(jie)觸到一(yi)些前端知(zhi)識，我才知(zhi)道它(ta)也可(ke)以用于編程(cheng)。

打開網站，選(xuan)擇你最(zui)喜歡的(de)圖標，添加到(dao)購物(wu)(wu)車(che)中，將(jiang)商(shang)品添加到(dao)購物(wu)(wu)車(che)中，重復操作(zuo)，并將(jiang)你最(zui)喜歡的(de)圖標添加到(dao)購物(wu)(wu)車(che)中。

選擇(ze)所(suo)有需要的圖(tu)標后，單擊(ji)右上角「購物車」圖(tu)標。

瀏覽(lan)器(qi)右側會彈出面板，選擇「添加至項(xiang)(xiang)目」，如果你以前沒有創建過一個項(xiang)(xiang)目，你需(xu)要在這里建立一個新(xin)的項(xiang)(xiang)目。新(xin)項(xiang)(xiang)目實(shi)際上是(shi)一個新(xin)的文件夾。

將(jiang)鼠標移動到網(wang)頁(ye)頂部的導航欄上「圖(tu)標管理」，單擊彈出菜單「我的項目」。

點擊我的(de)項目「查看在線鏈接」。

下(xia)面會有一(yi)長(chang)串代碼，其中 url 鏈(lian)接指向的(de)就是(shi)存放在阿里云服務器的(de)矢量(liang)字(zi)體(ti)，這些字(zi)體(ti)有不同的(de)格式(shi)，如 ttf、woff、woff2.為了兼容不同的(de)設(she)備或系(xi)統，需要使用(yong)不同的(de)字(zi)體(ti)格式(shi)。

接著點擊(ji)「點此 ** 代(dai)碼」，將代(dai)碼 ** 進入(ru)系統剪貼板(ban)。

回(hui)到微信(xin)小程序開發(fa)者(zhe)工(gong)具，將(jiang)代(dai)碼(ma)粘貼到小程序頁(ye)面(mian) wxss 文件中，wxss 文件可以類比為(wei)普通網頁(ye) css 文件。

接著在 wxss進(jin)一步定義 icon輸入以(yi)下(xia)代碼：

.微(wei)信(xin)(xin){ 微(wei)信(xin)(xin): '微(wei)信(xin)(xin)'; color: red; 微(wei)信(xin)(xin): 30px;}.微(wei)信(xin)(xin):微(wei)信(xin)(xin){ 微(wei)信(xin)(xin):'e8ab';}.微(wei)信(xin)(xin):微(wei)信(xin)(xin){ 微(wei)信(xin)(xin):'e8ad';}

微(wei)信指定我們嵌入的(de)字體名(ming)稱，需要與一(yi)起(qi)使用@微(wei)信中微(wei)信的(de)值(zhi)保持一(yi)致，color微(wei)信設(she)置圖標的(de)顏色(se)。

微(wei)(wei)信(xin)和微(wei)(wei)信(xin)是自(zi)定義的(de)類選擇器名(ming)稱(以下簡(jian)稱類名(ming))。你可以根據自(zi)己的(de)喜好來(lai)命名(ming)。微(wei)(wei)信(xin)代(dai)表愛情圖(tu)標，微(wei)(wei)信(xin)代(dai)表贊美(mei)圖(tu)標。

微信指定圖標的微信編碼需(xu)要返回微信，將鼠標移動到圖標上方，并在彈出(chu)菜單中選擇(ze)「編輯圖標」。

在打開(kai)的(de)頁面中，左下角的(de) 4 位字符(fu)——e8ab，微信編碼(ma)為愛心圖標(biao)，粘貼到 wxss 文件對應(ying)的(de)位置，并(bing)在字符(fu)前(qian)添(tian)加反斜杠。

微(wei)信編碼獲得點(dian)贊圖標，也需要同(tong)樣的(de)操作。

至此，即(ji)使完成了 wxss 編(bian)輯(ji)風(feng)格。

為了(le)在小程序中(zhong)看到圖標的最終渲染效果，我(wo)們還需要編輯 wxml 文件(jian)，wxml 相當于普通網頁html 文件(jian)wxml 中(zhong)使用 icon輸入以(yi)下代碼：

這里的(de)(de) class 屬性值對應 wxss 文件中自定義的(de)(de)類名，通過類名來應用(yong)相應的(de)(de)樣式。完(wan)成(cheng)以(yi)上所有操作(zuo)，最終的(de)(de)渲染(ran)效果如下：