Une brève analyse de la façon d'implémenter les icônes Icon dans les mini-programmes ?-Développement de mini-programmes-php.cn

Comment implémenter l'icône Icon dans le

mini programme ? L'article suivant partagera avec vous plusieurs solutions d'implémentation pour les icônes de mini-programmes. J'espère qu'il vous sera utile !

Une brève analyse de la façon d'implémenter les icônes Icon dans les mini-programmes ?

Le Composant Icône

property

property	type	valeur par défaut	re demandé	Description
type	string		est le type d'icône	. Les valeurs valides sont : success, success_no_circle, info, warn, wait, cancel, download, search, clear
size	number/string	23	Non.	taille de l'icône
couleur	chaîne		Non	couleur de l'icône, identique à la couleur CSS

Explication

L'unité de longueur de l'attribut de taille du composant est par défaut px, 2.4.0 prend en charge les unités entrantes (rpx/px)

Type numérique PX, utilisé par défaut, aucune unité n'est utilisé Remplissez, écrivez simplement une valeur
Unité adaptative d'écran RPX (Responsive Pixel), elle divise l'écran en 750 unités, chaque unité est 1/750. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]

Une brève analyse de la façon dimplémenter les icônes Icon dans les mini-programmes ?

Par exemple : la largeur de l'écran de l'iPhone 6 est de 350 px et chaque rpx est de 0,5 px. C'est-à-dire que si nous définissons la valeur de taille sur 60rpx sur la machine iPhone 6, cela aura le même effet que de la définir sur 30 ou 30px.

La propriété color du composant est de changer la couleur de tous les pixels de l'icône

FAQ

L'icône et le texte peuvent-ils être placés sur la même ligne ?

Oui, l'icône elle-même est née pour une meilleure mise en page et une utilisation plus facile. Le code est le suivant :

<view style="font-size: 17px;margin-top: 20px;">
    我是一行文字，<icon type="success" size="15"></icon>我里面包含了图标！
</view>

Copier après la connexion

Parfois, l'icône s'affiche vide sur la vraie machine

Tout d'abord, ce problème n'est certainement pas dû au fait que le lien du fichier de police n'ajoute pas le nom de domaine sécurisé du mini-programme de chargement. les images et les polices autorisent les domaines externes ! Si l'icône est implémentée de manière personnalisée, vérifiez le modèle et le type de fichier de police intégré. Cela peut être dû à la compatibilité. Il est recommandé d'utiliser les polices au format TTF et WOFF dans le mini-programme. Si vous utilisez ces deux polices et que la situation existe toujours, vous pouvez envisager de modifier l'intégration des données au format SVG.

Comment retirer l'icône du composant icône dans la bibliothèque de composants weui et l'enregistrer localement ?

Vous pouvez ouvrir directement le site officiel de weui (https://weui.io/), puis visualiser le code source via les outils de développement du navigateur, trouver l'adresse de la ressource et la télécharger. Ou téléchargez-le depuis la documentation officielle de WeChat (https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87).

Avantages

Prêt à l'emploi dès la sortie de la boîte.

Inconvénients

Supporte uniquement les types success, success_no_circle, info, warn, wait, Cancel, Download, Search, Clear Types, qui sont loin de répondre aux besoins de développement.

Implémentation personnalisée des icônes

Utilisez directement les images

Avantages

Simple et brut, chaque icône correspond à une image.

Inconvénients

Les images ne sont pas pratiques à mettre en texte. Il n'est pas pratique de modifier la couleur.
L'image ne peut pas être agrandie ou réduite, et elle deviendra floue et irrégulière après un zoom avant.
Les images doivent être stockées localement ou sur le réseau, ce qui entraînera un grand nombre de requêtes HTTP et ralentira le chargement des pages.
Ce n'est pas aussi pratique à utiliser que d'utiliser un seul nom pour l'icône.

Utilisez des sprites

Sprite, un ensemble d'images consécutives, disposées en une seule image de manière non superposée et peu distribuée. Chaque fois qu'il est utilisé, les coordonnées de départ et la taille de la zone affichées verticalement et horizontalement sont utilisées pour obtenir un effet de commutation dynamique.

Une brève analyse de la façon dimplémenter les icônes Icon dans les mini-programmes ?

Exemple d'utilisation

Obtenez un effet d'explosion grâce aux sprites. La taille de l'image est de (650x650) px ; donc la taille de chaque petite icône est de (130x130) px ; c'est la raison pour laquelle la largeur et la hauteur du paramètre de style CSS sont de 130 px, et aussi la raison pour laquelle l'étape de déplacement du code js est réglé à 130. La gauche et le haut en js sont des nombres négatifs. En effet, il ne s'agit pas de la coordonnée de l'icône affichée ici, mais de la distance dont l'image d'arrière-plan a besoin pour se déplacer vers le coin supérieur gauche.

Remarque : Seules les images réseau peuvent être utilisées dans wxss, les images locales ne peuvent pas être utilisées !

Le code est le suivant :

<!--icon.wxml-->
<view>
<icon class="sprite scale" style="background-position: {{left}} {{top}};"></icon>
</view>

Copier après la connexion

/* icon.wxss */
.sprite{
    display: block;
    width: 130px;
    height: 130px;
    background: url("https://i.loli.net/2021/11/15/7BH5gdkbLynrfM3.png") no-repeat;
}
.scale{
    transform-origin: 0 0 0;
    transform: scale(2,2);
}

Copier après la connexion

// icon.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        left:&#39;0px&#39;,
        top:&#39;0px&#39;,
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function () {
        var that = this;
        var left = 0;
        var top = 0;
        const step = 130;
        const stop = (650-130);
        var i = setInterval(function() {
             if (left >= stop && top >=stop) {
                  clearInterval(i)
             } else {
                left += step;
                if(left >= 650){
                    left = 0;
                    top += step;
                }
                that.setData({
                    left: &#39;-&#39; + left +&#39;px&#39;,
                    top: &#39;-&#39; + top +&#39;px&#39;
                  })
             }
        }, 100)
    },
})

Copier après la connexion

Avantages

Lors du chargement, il ne se charge qu'une seule fois. Requêtes HTTP réduites.

Utiliser les styles CSS pour dessiner

Exemples d'utilisation

<view>
    <icon class="icon-close"></icon>
</view>

Copier après la connexion

.icon-close{
    display: inline-block;
    width: 17px;
    height: 2px;
    background: red;
    transform: rotate(45deg);
}
.icon-close::after {
    content: &#39;&#39;;
    display: block;
    width: 17px;
    height: 2px;
    background: red;
    transform: rotate(-90deg);
}

Copier après la connexion

Inconvénients

Chaque icône doit écrire du code de style CSS, ce qui demande beaucoup de travail.
Ce type d'icône n'est pas un personnage. Chaque icône doit avoir un point central unifié lors du dessin, sinon il sera plus difficile de contrôler la position.
La taille et la couleur sont également difficiles à contrôler. Ce n’est donc pas un bon schéma d’icônes.

使用矢量字体（推荐使用）

当浏览器渲染一个字符的时候，首先看font-family样式，确定使用字体名是哪一个。接着以此字符的Unicode在字体文件里查找对应的字符信息。

字体类型有两种，一种是点阵字体，一种是矢量字体。现在使用最广泛的是矢量字体。矢量字体大概分成三类：Adobe主导的Type1、Apple和Microsoft主导的TrueType、Adobe，Apple和Microsoft共同主导的开源字体OpenType。

在矢量字体里面每个Unicode只是每个字符的一个索引，每个字符描述信息是一个几何矢量绘图描述信息。以Type1为例，它使用三次贝塞尔曲线来绘制字形。TrueType则使用二次贝塞尔曲线描述字形。正是由于矢量字体是绘制出来的，所以它可以实时填充任何颜色，并且可以无极缩放而没有锯齿。

阿里巴巴的图标网站（https://iconfont.cn/），我们可以在此网站上搜索到任何图片在线编辑，并下载样式文件，在小程序里面使用。

字体源说明：

EOT是微软IE浏览器专用的OpenType字体类型。
TTF是TrueType字体。
WOFF与WOFF2是移动开发专用的矢量字体格式。是对三种矢量字体格式的再封装。

链接各种字体文件源可以兼容不同浏览器宿主环境。浏览器会选择自己支持的格式，从列表中的第一个开始尝试加载。一旦获得一个可以使用的，就不会再加载剩下的字体格式了。小程序里面建议使用TTF和WOFF这两个格式。WOFF2在低版本的IOS设备上会有不兼容的问题。

使用示例可以参考此文章
https://www.jianshu.com/p/25db60f77531

使用SVG矢量文件

很多作图软件都可以导出SVG格式的矢量文件，比方说 Sketch，但是它导出的SVG格式的矢量文件有没有用的垃圾信息。可以到阿里巴巴的图标网站编辑好之后下载SVG格式的矢量文件，它不带什么垃圾信息。然后我们拿这个文件找一个Image2base64工具，将文件内容转化为base64的字符串。然后就可以在小程序里使用这个base64的字符串作为图片源，实现自定义图标了。

示例

1、准备SVG图片

2、使用线上Image2base64转换图片为：

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjM2OTcwNTk4NjAyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzI2LjIgNDI5LjdMNzEwIDQyOCA1MjUuNCA4OTIuMXoiIGZpbGw9IiM4M0E0RkYiIHAtaWQ9IjI2MDEiPjwvcGF0aD48cGF0aCBkPSJNMzcwLjIgMjcxLjFsMjkyLjQgMi42IDUxLjcgMTEzLTM3OS41LTIuNnoiIGZpbGw9IiNGRjdFNzEiIHAtaWQ9IjI2MDIiPjwvcGF0aD48cGF0aCBkPSJNMjk2LjEgMzgwLjdMNjQuOSAyODQuMWwxMjQuMi05Mi4zIDE0OC40IDc2Ljd6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjAzIj48L3BhdGg+PHBhdGggZD0iTTY0LjkgMzMwLjVMMjg0IDQyOGwyMzUuNSA0NjAuNnpNNzU1LjYgNDI3LjFMOTYwLjkgMzIxIDUyOC44IDg4NnoiIGZpbGw9IiM1Qjc5RkIiIHAtaWQ9IjI2MDQiPjwvcGF0aD48cGF0aCBkPSJNNzUxLjMgMzc5LjhsLTU3LjgtMTE5IDEzMi03My40IDExMy44IDk1Ljh6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjA1Ij48L3BhdGg+PHBhdGggZD0iTTM2NS44IDIzMy40bC01MC0xMi45LTk0LTUyLjcgMTEwLjQtMzkuNmgzNjAuNmwxMDkuNSA0NS43LTEwNS4yIDUwLjktMzUuNCA4LjZ6IiBmaWxsPSIjQzdEOEZGIiBwLWlkPSIyNjA2Ij48L3BhdGg+PC9zdmc+

Copier après la connexion

3、编写代码

.svg-icon{
    display: block;
    width: 200px;
    height: 200px;  
    background-repeat: no-repeat;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjM2OTcwNTk4NjAyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzI2LjIgNDI5LjdMNzEwIDQyOCA1MjUuNCA4OTIuMXoiIGZpbGw9IiM4M0E0RkYiIHAtaWQ9IjI2MDEiPjwvcGF0aD48cGF0aCBkPSJNMzcwLjIgMjcxLjFsMjkyLjQgMi42IDUxLjcgMTEzLTM3OS41LTIuNnoiIGZpbGw9IiNGRjdFNzEiIHAtaWQ9IjI2MDIiPjwvcGF0aD48cGF0aCBkPSJNMjk2LjEgMzgwLjdMNjQuOSAyODQuMWwxMjQuMi05Mi4zIDE0OC40IDc2Ljd6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjAzIj48L3BhdGg+PHBhdGggZD0iTTY0LjkgMzMwLjVMMjg0IDQyOGwyMzUuNSA0NjAuNnpNNzU1LjYgNDI3LjFMOTYwLjkgMzIxIDUyOC44IDg4NnoiIGZpbGw9IiM1Qjc5RkIiIHAtaWQ9IjI2MDQiPjwvcGF0aD48cGF0aCBkPSJNNzUxLjMgMzc5LjhsLTU3LjgtMTE5IDEzMi03My40IDExMy44IDk1Ljh6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjA1Ij48L3BhdGg+PHBhdGggZD0iTTM2NS44IDIzMy40bC01MC0xMi45LTk0LTUyLjcgMTEwLjQtMzkuNmgzNjAuNmwxMDkuNSA0NS43LTEwNS4yIDUwLjktMzUuNCA4LjZ6IiBmaWxsPSIjQzdEOEZGIiBwLWlkPSIyNjA2Ij48L3BhdGg+PC9zdmc+");
}

Copier après la connexion

<view>
    <icon class="svg-icon"></icon>
</view>

Copier après la connexion

说明

此种方法仍旧需要一张图片处理一次，然后在页面中引用。注意：样式文件中的width和height属性的值需要和下载的SVG文件的width和height保持一致的（在svg标签中可以看到）。

使用Canvas绘制SVG绘制

这种绘制用于制作动画还是可以的，但是用来做图标有点大材小用了。

腾讯的将SVG绘制成图像的 Cax 引擎

https://developers.weixin.qq.com/community/develop/article/doc/000ca493bc09c0d03a8827b9b5b013

更多编程相关知识，请访问：编程入门！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Une brève analyse de la façon d'implémenter les icônes Icon dans les mini-programmes ?

Le Composant Icône

property

Explication

L'unité de longueur de l'attribut de taille du composant est par défaut px, 2.4.0 prend en charge les unités entrantes (rpx/px)

La propriété color du composant est de changer la couleur de tous les pixels de l'icône

FAQ

L'icône et le texte peuvent-ils être placés sur la même ligne ?

Parfois, l'icône s'affiche vide sur la vraie machine

Comment retirer l'icône du composant icône dans la bibliothèque de composants weui et l'enregistrer localement ?

Avantages

Inconvénients

Implémentation personnalisée des icônes

Utilisez directement les images

Avantages

Inconvénients

Utilisez des sprites

Exemple d'utilisation

Avantages

Utiliser les styles CSS pour dessiner

Exemples d'utilisation

Inconvénients

使用矢量字体 （推荐使用）

使用示例可以参考此文章

使用SVG矢量文件

示例

说明

使用Canvas绘制SVG绘制

使用矢量字体（推荐使用）