Небольшая программа микроканала использует многоцветные значки Подробно

Апплет WeChat
Небольшая программа микроканала использует многоцветные значки Подробно

предисловие

Вслед за прошлым разом я написал "Это 9012, а вы все еще используете монохромные значки? (Подробное объяснение многоцветных значков значков)«После этого некоторые друзья спросили меня, могу ли я использовать многоцветные значки в апплете WeChat?

em....

Я проверил некоторую информацию и обнаружил, что сам апплет не поддерживаетsvg, Это отрицает то, что я хочу использовать напрямуюsvgПредставляем идею многоцветных иконок.

Большинство онлайн только для монохромныхiconfontДля ознакомления со шрифтом вот статья моего собственного предложения по ссылке на многоцветные значки в небольших программах.Если у вас есть лучшее решение, оставьте сообщение в комментариях, чтобы учиться вместе 😊, спасибо.

mini-program-iconfont-cli

Главный герой проекта —mini-program-iconfont-cliБиблиотека с открытым исходным кодом, на самом деле нужно только знать, что есть такая вещь, а затем следовать внутрьREADME.mdШаг за шагом вы сможете добиться эффекта.

первый шаг

Откройте корневой каталог вашего проекта в терминале, а затем используйтеnpmилиyarnустановить.

npm install mini-program-iconfont-cli --save-dev

yarn add mini-program-iconfont-cli --dev

второй шаг

Идите вперед и используйте команду для создания файла конфигурации:

npx iconfont init

(вотnpx,нетnpm)

В этот момент проект найдет генерацию каталогаiconfont.jsonдокумент:

{
  "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接",
  "save_dir": "./iconfont", // 生成的组件保存的路径
  "use_rpx": false, // 是否使用微信提供的尺寸单位rpx还是普通的像素单位px
  "trim_icon_prefix": "icon-",
  "default_icon_size": 18 // 默认字体大小
}

здесьtrim_icon_prefixСвойства объясняются ниже:

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

Например, имена классов всех иконок в моем проекте начинаются сicon-в начале, чтобы, когда я позже буду использовать имя класса значков, я могicon-Это следует опустить.

третий шаг

открыть тебяiconfontэлементы на и найтиSymbolВнешние ссылки для:

заменить эту ссылку наiconfont.jsonизsymbol_urlВниз:

{
    "symbol_url": "//at.alicdn.com/t/font_872514_tfvlfiqme6.js",
    "save_dir": "./iconfont",
    "use_rpx": false,
    "trim_icon_prefix": "icon-",
    "default_icon_size": 18
}

четвертый шаг

Использование создаваемого компонента командного апплета

npx iconfont

В этот момент в каталоге проекта будет еще одинiconfontпапка, в которой хранятся сгенерированные компоненты иконки.

пятый шаг

Поскольку сгенерированные выше компоненты являются компонентами, мы можем использовать их как другие компоненты в апплете:

  • Местные ссылки
  • Глобальная ссылка

глобальная ссылка, вapp.jsonДобавьте конфигурацию в:

"usingComponents": {
   "iconfont": "./iconfont/iconfont"
}

Шаг 6

Его также очень просто использовать на странице, поэтому я вставлю его прямо сюда:

// 原色彩
<iconfont name="alipay" />

// 单色：红色
<iconfont name="alipay" color="red" />

// 多色：红色+橘色
<iconfont name="alipay" color="{{['red', 'orange']}}" size="300" />

Я также создал новый проект, чтобы протестировать его, и он может достичь эффекта:

Но я обнаружил, что значок кажетсяblockвведите, так что это будет новая строка, так что я в глобальномwxssДобавлять:

iconfont {
  display: inline-block;
}

Кажется, это работает.

Если он позади, ваш проект должен обновить значок, просто нужно переконфигурить его.iconfont.jsonсерединаsymbol_url, затем выполните:

npx iconfont

регенерироватьiconfontКомпоненты в порядке.

Великолепные разделительные линии ----------------------------

Кстати говоря, вы можете в принципе использовать многоцветность в проекте.iconfont, следующий контент в основном является расширением этой реализации, и заинтересованные друзья могут продолжать смотреть вниз.

Поскольку я также упомянул в предисловии, апплет временно не поддерживаетсяsvg, так что тот же самый кусок кода, который вы вставили.htmlможет отображаться как значок в обычном режиме, но помещается вwxmlне влияет на:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
</svg>

.html中
Хотя мы не можем использовать его напрямую, как в Интернетеsvg, но мы можем пройтиcss, способ установить фоновое изображение для установки. следовательноmini-program-iconfont-cliдолжно бытьsvgпревратиться вBase64Формат. Затем создайте компонент, который можно использовать в апплете.

При этом мы открываемiconfontв папкеiconfont.wxmlфайл, вы также можете обнаружить, что в нем один за другим генерируетсяviewметку, а затем установите фоновое изображение.

Вставьте сюдаsvgПеревести вBase64URL-адрес:

код squirt.io/jakob-oh/spray…

послесловие

Схема, которую я использую здесь, может быть не самой разумной, и я надеюсь, что она может сыграть роль в привлечении новых идей.Посмотрев, я добавил 2 многоцветных и одноцветную иконку, а сгенерированныйiconfontпапка имеет16KB, она относительно велика.Кроме того, я ставлюiconfontИконка на официальном сайте скачана на локалку для сравнения размера:

Справочная статья:

mini-program-iconfont-cli

Использование SVG в разработке апплета WeChat

Знания бесценны и поддерживают оригинальность.

Категории