简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  微信小程式  >  淺析小程式中怎麼實現Icon圖示？

淺析小程式中怎麼實現Icon圖示？

青灯夜游
青灯夜游轉載
2021-11-18 19:31:102892瀏覽

小程式中怎麼實作Icon圖示？以下這篇文章跟大家分享小程式Icon圖示的幾種實作方案，希望對大家有幫助！

淺析小程式中怎麼實現Icon圖示？

小程式原生提供的#Icon元件

屬性
屬性 類型 預設值 必填 說明
#type string
#是 icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size number/string ##23 否 icon的大小
color string
否 icon的顏色，同css的color
說明
元件size屬性的長度單位預設為px，2.4.0起支援傳入單位( rpx/px)

  • PX 數值類型，預設使用，什麼單位都不填，只寫一個數值就可以

  • RPX（Responsive Pixel）螢幕自適應單位，他將螢幕分為750個單位，每個單位是1/750。 【相關學習推薦：小程式開發教學】

淺析小程式中怎麼實現Icon圖示？

比方說：iphone6的螢幕寬度是350px，每個rpx就是0.5px。也就是說如果我們在iphone6機器上將size的值設定為60rpx，他與設定為30或30px的效果是一樣的。

元件color屬性是改變圖示所有像素點的顏色

#常見問題

圖示與文字能否放在同一行？

可以的，圖示本身就是為了更好的佈局和更方便使用而誕生的。程式碼如下：

<view style="font-size: 17px;margin-top: 20px;">
    我是一行文字，<icon type="success" size="15"></icon>我里面包含了图标！
</view>
有時候真機上Icon顯示空白

首先此問題肯定不是由於字體檔案連結沒有加入小程式的安全域名，WXSS載入圖片及字體允許外域！如果圖示是自訂實現的，要檢查一下機型及嵌入的字體檔案類型，可能是相容性引起的，在小程式中推薦使用TTF和WOFF格式的字體。如果使用的是這兩種字體，情況依然存在，可以考慮換SVG格式的資料嵌入。

weui元件庫裡的icon元件的圖示如何取出來，儲存在本機？

直接可以開啟 weui官網（https://weui.io/），然後透過瀏覽器開發者工具查看原始碼，找到資源位址然後下載。或在微信的官方文件上下載（https://developers.weixin.qq.com/miniprogram/design/#圖示）。

優點

開箱即用。

缺點

只支援success, success_no_circle, info, warn, waiting, cancel, download, search, clear這幾種類型，遠遠無法滿足開發需求。

自訂實作圖示

直接使用圖片

優點

  • #簡單粗暴，每個圖示對應一個圖片。

  • 缺點

  • 圖片在文字中不方便佈局。不方便修改顏色。

  • 圖片不能升縮，放大之後會變虛、有鋸齒。

圖片需要在本地或網路上存儲，這將導致大量HTTP請求，使得頁面載入速度變慢。

使用起來不如圖示只使用一個名稱方便。

淺析小程式中怎麼實現Icon圖示？

使用精靈圖
Sprite，連續圖片集，以非重疊、最小化分佈的方式排列成一張圖片。每次使用的時間透過縱橫顯示的起始座標及區域大小，以達到動態切換的效果。

使用範例

透過精靈圖實作一個爆炸效果。圖片大小為（650x650） px；所以每個小圖示大小為（130x130）px；這是css樣式設定的width和height為130px的原因，也是js程式移動step設定為130的原因。 js中left和top皆為負數，這是由於這裡不是顯示圖示的座標，而是背景圖片所要向左上方移動的距離。
注意：在wxss中只可以使用網路圖片，不能使用本機圖片！

  • 程式碼如下：

    <!--icon.wxml-->
<view>
<icon class="sprite scale" style="background-position: {{left}} {{top}};"></icon>
</view>
    /* 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);
}
    // 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)
    },
})
優點

在載入的時候，只載入一次。減少了HTTP請求。
使用CSS樣式繪製
  • #使用範例

    <view>
    <icon class="icon-close"></icon>
</view>
    .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);
}
  • 缺點

  • 每個圖示都需要寫CSS樣式程式碼，勞動量大。

    #########這種圖示不是字符，每個圖示在繪製時要統一一個中心點，不然使用起來控制位置會比較麻煩。 ############大小與顏色也不方便控制。所以這並不是一種好的圖標方案。 ###

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

当浏览器渲染一个字符的时候，首先看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+

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+");
}
<view>
    <icon class="svg-icon"></icon>
</view>
说明

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

使用Canvas绘制SVG绘制

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

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

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

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

以上是淺析小程式中怎麼實現Icon圖示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除
上一篇：手把手教你在小程式中實現內容搜尋功能下一篇：手把手教你在小程式中實現內容搜尋功能

相關文章

看更多