18221533805
      微信小程序開發 | 如何在小程序中使用自定義 icon 圖標
      上海微信小程序開發制作、APP、網站、小程序定制、小程序外包開發公司

      微信小程序開發 | 如何在小程序中使用自定義 icon 圖標

      2022-06-22

      題圖 m.eeefficiency.com

      本文是微信小程序開發學習筆記。

      微信小程序 icon 組件(標簽)只提供 9 型圖標,不能滿足開發或設計的個性化需求。為了解決這個問題,我們可以使用定制的 icon 圖標,豐富原圖標類型。

      在微信小程序中使用自定義 icon 圖標有 6 種方法:

      1.使用 icon 圖標(特指位圖)

      2. 微信(精靈圖)

      3.使用 CSS 風格繪制(這種方法工作量大)

      4.使用矢量字體

      5.使用 SVG 矢量文件

      6.使用 微信


      這篇文章只解釋了第 4 的方法,因為我暫時不除了第 1 的方法。


      使用矢量字體來自定義 icon 圖標,需要阿里巴巴圖標庫網站 微信。


      題外話,我一直認為這個網站只能用于設計,直到我接觸到一些前端知識,我才知道它也可以用于編程。


      打開網站,選擇你最喜歡的圖標,添加到購物車中,將商品添加到購物車中,重復操作,并將你最喜歡的圖標添加到購物車中。


      選擇所有需要的圖標后,單擊右上角「購物車」圖標。



      瀏覽器右側會彈出面板,選擇「添加至項目」,如果你以前沒有創建過一個項目,你需要在這里建立一個新的項目。新項目實際上是一個新的文件夾。



      將鼠標移動到網頁頂部的導航欄上「圖標管理」,單擊彈出菜單「我的項目」。



      點擊我的項目「查看在線鏈接」。



      下面會有一長串代碼,其中 url 鏈接指向的就是存放在阿里云服務器的矢量字體,這些字體有不同的格式,如 ttf、woff、woff2.為了兼容不同的設備或系統,需要使用不同的字體格式。

      接著點擊「點此 ** 代碼」,將代碼 ** 進入系統剪貼板。



      回到微信小程序開發者工具,將代碼粘貼到小程序頁面 wxss 文件中,wxss 文件可以類比為普通網頁 css 文件。



      接著在 wxss進一步定義 icon輸入以下代碼:


      .微信{ 微信: '微信'; color: red; 微信: 30px;}.微信:微信{ 微信:'e8ab';}.微信:微信{ 微信:'e8ad';}


      微信指定我們嵌入的字體名稱,需要與 一起使用@微信中 微信的值保持一致 ,color微信設置圖標的顏色。

      微信和 微信是自定義的類選擇器名稱(以下簡稱類名)。你可以根據自己的喜好來命名。 微信代表愛情圖標,微信代表贊美圖標。

      微信指定圖標的 微信編碼需要返回 微信,將鼠標移動到圖標上方,并在彈出菜單中選擇「編輯圖標」。



      在打開的頁面中,左下角的 4 位字符——e8ab, 微信編碼為愛心圖標,粘貼到 wxss 文件對應的位置,并在字符前添加反斜杠 。



      微信編碼獲得點贊圖標,也需要同樣的操作。

      至此,即使完成了 wxss 編輯風格。


      為了在小程序中看到圖標的最終渲染效果,我們還需要編輯 wxml 文件,wxml 相當于普通網頁html 文件wxml 中使用 icon輸入以下代碼:

             <icon class="微信30334"></icon> <icon class="微信30334"></icon>


      這里的 class 屬性值對應 wxss 文件中自定義的類名,通過類名來應用相應的樣式。完成以上所有操作,最終的渲染效果如下:


      只是為了得到兩個小圖標。。。似乎得不償失


      擴展閱讀:

      至少寫一個微信小程序的必要知識


      以上,希望有所幫助。





      微信小程序開發 | 如何在小程序中使用自定義 icon 圖標 希望這篇文章對您有幫助.

      上海西陸信息科技有限公司 承接各類微信小程序開發制作、小程序定制、APP 網站 開發制作,聯系電話 18221533805、15900430334

      為您推薦

      如果我從非正規渠道采購,會有什么風險?

      西陸家政,西陸二手市場,西陸招聘,西陸房地產,西陸旅游,西陸健身

      采購成品系統代碼一定要正規渠道嗎

      西陸成品系統:西陸家政,西陸房產,西陸招聘,西陸旅游,西陸二手市場,西陸健身

      西陸招聘成品系統

      西陸房產成品系統

      西陸家政成品系統

      西陸教育成品系統

      西陸二手市場成品系統

      西陸旅游成品系統

      西陸健身成品系統

      短視頻劇本|“瘋狂小楊哥”的爆火之路:人物關系反差

      關注短視頻編劇微信官方賬號,999個精品短劇本,免費領取!滿屏百萬贊的小楊哥短視頻紅人那么多,滿屏百...

      2年漲粉3800萬,零演技網紅——瘋狂小楊哥,為何會如此火?

      共享儲物柜小程序APP 必要的功能

      一、共享儲物柜小程序開發功能1.自動定位功能:有些商場或展會面積較大,共享儲物柜小程序可以通過定位功...

      小程序 開發公司 聊應用基礎模塊

      一、主要功能微信小程序功能分為管理員和非管理員功能。系統擁有多個非管理員用戶,管理員用戶僅有一個角色...

      生鮮小程序APP要知道什么

      1授權登錄有利于用戶了解相關促銷活動實現多次訪問,同時在下單支付時直接引用個人信息,不用多次輸入收貨...

      房產APP小程序開發須知

      1、地理位置  地理位置,用戶可以通過房產APP能在地圖上直接看到房源位置。也能看到房產周邊的環境,...

      教育類商城系統與教育小程序商城

      聊電商APP小程序模塊

      1、圖文視頻:利用圖文視頻控件,可以對產品進行精美詳細的介紹。2、導航功能:歷史記錄、標簽等等。3、...

      教育小程序開發功能

      開發一款教育小程序,需要哪些基本功能?

      聊聊 交友APP 小程序

      交友APP開發的需求1、實名認證:必須實名制之后才可以使用,確保雙方的權益保障。2、偏好選擇:用戶可...
      主站蜘蛛池模板: 天美传媒一区二区三区| 日本精品少妇一区二区三区| 日韩精品一区二区三区中文3d| 一区二区中文字幕在线观看| 国产成人综合一区精品| 波多野结衣AV无码久久一区| 日本一区视频在线播放| 国产乱码精品一区二区三区四川| 91午夜精品亚洲一区二区三区| 激情一区二区三区| 中文字幕国产一区| 99久久精品国产免看国产一区| 日韩精品无码人妻一区二区三区 | 无码少妇一区二区性色AV| 一区二区日韩国产精品| 国产一区二区三区免费在线观看| 影院成人区精品一区二区婷婷丽春院影视 | 国产精品亚洲一区二区三区| 亚洲国产AV一区二区三区四区| 日韩精品视频一区二区三区| 日韩人妻无码一区二区三区久久| 亚洲AV成人一区二区三区AV | 日韩一区二区三区在线精品| 色屁屁一区二区三区视频国产| 国产人妖在线观看一区二区| 国产一国产一区秋霞在线观看| 白丝爆浆18禁一区二区三区| 日本一区二区三区在线网| 一区三区三区不卡| 亚洲午夜福利AV一区二区无码| 亚洲av一综合av一区| 中文字幕一区二区三区5566| 亚洲乱色熟女一区二区三区蜜臀| 国模一区二区三区| 一区视频在线播放| 日韩精品成人一区二区三区| 91精品福利一区二区| 国产高清视频一区二区| 久久一区二区三区99| 性色A码一区二区三区天美传媒| 蜜臀AV在线播放一区二区三区|