Второй штрих апплета: правильная поза апплета с помощью Iconfont

Апплет WeChat

предисловие

В настоящее время разрешение мобильных устройств бесконечно, и традиционные скалярные значки необходимо экспортировать как 1x, 2x, 3x и т. д., чтобы адаптировать их к устройствам с высоким разрешением. Это, несомненно, значительно увеличивает нагрузку на дизайнеров и клиентскую разработку. Векторная графика имеет большие преимущества в иконках благодаря своим преимуществам масштабирования без потерь.

IconfontЗапущенная Ali, это мощная библиотека векторных иконок с богатым содержимым. Она обеспечивает загрузку векторных иконок, онлайн-хранилище, преобразование формата и другие функции. Она почти стала стандартом де-факто для библиотек векторных иконок в Китае.

Каждый проект 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Получите полную функцию.

Следуйте за мной, а не только маленькие программы.

Категории