題圖 www.eeefficiency.com

本文是微信小程序開發(fā)學(xué)習(xí)筆記。

微信小程序 icon 組件(標(biāo)簽)只提供 9 型圖標(biāo)，不能滿足開發(fā)或設(shè)計(jì)的個(gè)性化需求。為了解決這個(gè)問題，我們可以使用定制的 icon 圖標(biāo)，豐富原圖標(biāo)類型。

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

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

2. 微信(精靈圖)

3.使用 CSS 風(fēng)格繪制(這種方法工作量大)

4.使用矢量字體

5.使用 SVG 矢量文件

6.使用 微信

這篇文章只解釋了第 4 的方法，因?yàn)槲視簳r(shí)不除了第 1 的方法。

使用矢量字體來自定義 icon 圖標(biāo)，需要阿里巴巴圖標(biāo)庫網(wǎng)站 微信。

題外話，我一直認(rèn)為這個(gè)網(wǎng)站只能用于設(shè)計(jì)，直到我接觸到一些前端知識，我才知道它也可以用于編程。

打開網(wǎng)站，選擇你最喜歡的圖標(biāo)，添加到購物車中，將商品添加到購物車中，重復(fù)操作，并將你最喜歡的圖標(biāo)添加到購物車中。

選擇所有需要的圖標(biāo)后，單擊右上角「購物車」圖標(biāo)。

瀏覽器右側(cè)會彈出面板，選擇「添加至項(xiàng)目」，如果你以前沒有創(chuàng)建過一個(gè)項(xiàng)目，你需要在這里建立一個(gè)新的項(xiàng)目。新項(xiàng)目實(shí)際上是一個(gè)新的文件夾。

將鼠標(biāo)移動到網(wǎng)頁頂部的導(dǎo)航欄上「圖標(biāo)管理」，單擊彈出菜單「我的項(xiàng)目」。

點(diǎn)擊我的項(xiàng)目「查看在線鏈接」。

下面會有一長串代碼，其中 url 鏈接指向的就是存放在阿里云服務(wù)器的矢量字體，這些字體有不同的格式，如 ttf、woff、woff2.為了兼容不同的設(shè)備或系統(tǒng)，需要使用不同的字體格式。

接著點(diǎn)擊「點(diǎn)此 ** 代碼」，將代碼 ** 進(jìn)入系統(tǒng)剪貼板。

回到微信小程序開發(fā)者工具，將代碼粘貼到小程序頁面 wxss 文件中，wxss 文件可以類比為普通網(wǎng)頁 css 文件。

接著在 wxss進(jìn)一步定義 icon輸入以下代碼：

.微信{ 微信: '微信'; color: red; 微信: 30px;}.微信:微信{ 微信:'e8ab';}.微信:微信{ 微信:'e8ad';}

微信指定我們嵌入的字體名稱，需要與 一起使用@微信中 微信的值保持一致 ，color微信設(shè)置圖標(biāo)的顏色。

微信和 微信是自定義的類選擇器名稱(以下簡稱類名)。你可以根據(jù)自己的喜好來命名。 微信代表愛情圖標(biāo)，微信代表贊美圖標(biāo)。

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

在打開的頁面中，左下角的 4 位字符——e8ab， 微信編碼為愛心圖標(biāo)，粘貼到 wxss 文件對應(yīng)的位置，并在字符前添加反斜杠 。

微信編碼獲得點(diǎn)贊圖標(biāo)，也需要同樣的操作。

至此，即使完成了 wxss 編輯風(fēng)格。

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

       <icon class="微信30334"></icon> <icon class="微信30334"></icon>

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

只是為了得到兩個(gè)小圖標(biāo)。。。似乎得不償失

擴(kuò)展閱讀：

至少寫一個(gè)微信小程序的必要知識

以上，希望有所幫助。

上海西陸信息科技有限公司 承接各類微信小程序開發(fā)制作、小程序定制、APP 網(wǎng)站 開發(fā)制作，聯(lián)系電話 18221533805、15900430334