小程式點睛之二：小程式使用 Iconfont 的正確姿勢

Idan Loo ?發表於2019-01-23

前言

現如今移動裝置解析度不勝列舉，傳統的標量圖示要分別匯出 1 倍圖、2 倍圖、3 倍圖等以適應高分辯率裝置。這無疑大大增加了設計師和客戶端開發的工作量。向量圖以其無損縮放的優點，在圖示方面有著極大的優勢。

Iconfont 是由阿里推出，功能強大且圖示內容很豐富的向量圖示庫，提供向量圖示下載、線上儲存、格式轉換等功能，幾乎國內成了向量圖示庫的事實標準。

每個 Iconfont 專案都可以生成一個遠端 .css 檔案，下文以 //at.alicdn.com/t/font_883452_bqb4vsc7km8.css 為例。你可以查閱教程瞭解如何生成 .css 檔案。

正常 Iconfont 的使用流程是在 HTML 的 head 標籤中引入樣式檔案，然後通過類名呼叫圖示

<html>
    <head>
        <link href="//at.alicdn.com/t/font_883452_bqb4vsc7km8.css" />
    </head>
    <body>
        <!-- 這是一個名為 plus 的 icon -->
        <i class="iconfont icon-plus"></i>
    </body>
</html>
複製程式碼

不幸的是小程式不支援引入外部 css 檔案，為此我尋遍網路，竟沒有找到 Iconfont 在小程式中的正確用法。

本文根據我在實踐經驗所得，是我目前能找到在小程式中使用 Iconfont 最簡的方法。

引入

雖然小程式不支援引入外部樣式表，但 .wxss 檔案本質上就是 .css 檔案，因此我們可以將 Iconfont 的樣式表儲存到本地的 .wxss 中。

  1. 下載 at.alicdn.com/t/font_883452_bqb4vsc7km8.css 至 /iconfont.wxss，並在 app.wxss 中引入

    @import "/iconfont.wxss";
複製程式碼

  2. 在 .wxml 檔案中使用

    <text class="iconfont icon-plus"></text>
複製程式碼

現在應該可以在開發者工具中看到你想要的圖示了。

解決了基本的使用問題之後，我們發現，由於小程式元件內部有獨立的類作用域，因此在 app.wxss 中引入的 .iconfont 和 .icon-plus 並不能在自定義元件內生效，所以你需要在所有需要用到 Iconfont 的元件內，分別引入 iconfont.wxss。

元件化

如果你看過我之前的文章，應該知道我對冗餘程式碼深惡痛絕。自定義元件就是解決重複引入的手段。

定義一個 iconfont 元件

  • iconfont.wxss

    引入下載好的 Iconfont 樣式表

    @import "/iconfont.wxss"
複製程式碼

  • iconfont.js

    宣告元件引數

    Component({
  	properties: {
    	icon: String,
  	},
})
複製程式碼

  • iconfont.wxml

    <text class="iconfont icon-{{icon}}"></text>
複製程式碼

外部呼叫

  • page.json

    引用元件

    {
    "usingComponents": {
        "iconfont": "path/to/iconfont"
    }
}
複製程式碼

  • page.wxml

    <iconfont icon="plus"></iconfont>
複製程式碼

後記

現在你已經有了一個強大的元件，應付 Iconfont 上的任何專案應該都不在話下。但現在，你不能在外部控制 iconfont 元件的字型大小，下一篇文章我們會討論這個話題，在這之前，你可以使用 minapp-iconfont 獲得完整的特性。

關注我，不僅僅是小程式。

相關文章