長春大都市歡迎您!
長春大都市>微商>正文

給你代碼:小程序引入icon的三種方式

2020-04-02 07:50:13 來源: 閱讀:-


給你代碼:小程序引入icon的三種方式

好的應用需要好的圖標來映襯。

使用圖片做圖標的弊端有:固定尺寸;激活樣式需要做兩套;占空間。

相對于圖片圖標,字體圖標完美的解決了這些問題。

我們下面介紹小程序里引入圖片的三種方式。

原生圖標

小程序里原生圖標是通過icon標簽來引入的:


給你代碼:小程序引入icon的三種方式

但是原生圖標只有這么幾個,面對前端妖嬈繁雜的需求是捉襟見肘,遠遠不夠用??!

WeUI圖標組件

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫,基于小程序自定義組件構建。

由微信官方設計團隊為微信內網頁和微信小程序量身設計,令用戶的使用感知更加統一。

要使用WeUI組件,我們需要到組件下載頁面去下載icon組件:developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html

給你代碼:小程序引入icon的三種方式

下載完成后我們會得到一個icon文件夾。

里面有四個文件:icon.js, icon.json, icon.wxml,icon.wxss

我們在項目根目錄下創建一個components文件夾,再將icon文件夾拷貝進去,然后在app.json中增加以下配置:

"usingComponents": {
"mp-icon": "components/icon/icon"},

在測試頁面增加一段代碼:


給你代碼:小程序引入icon的三種方式

組件庫里icon圖標列表請參考這個鏈接:developers.weixin.qq.com/miniprogram/dev/extended/weui/icon.html。

目前一共有81個,這些圖標對本人來說已經夠用了。

但是對于很多特定行業比如旅游,外賣APP來說,圖標定制化程度可能更高。

那么我們也需要讓小程序有這樣引入外部資源的能力。

iconfont圖標

真不是說,阿里的這個圖標庫(www.iconfont.cn)真是給眾多不會搞設計的程序員帶來了莫大的福祉(馬云:這詞是我發明的)。

上面的圖標種類繁多,你想要的都有,更多的還是你想不到的。

你需要做的就是把喜歡的圖標加入購物車,然后分類作為一個項目下載下來:

給你代碼:小程序引入icon的三種方式

解壓下載下來的download.zip文件,將其中的iconfont.css文件拷貝到小程序utils目錄下,重命名為iconfont.wxss,打開iconfont.wxss,將@font-face部分的一些url引用(紅色框選部分)刪除掉(看不清楚點擊圖片看大圖哦):

給你代碼:小程序引入icon的三種方式

打開app.wxss,在首行引入iconfont.wxss:

/**app.wxss**/@import './utils/iconfont.wxss';

在視圖文件中,我們通過以下方式顯示圖標:


效果圖:

給你代碼:小程序引入icon的三種方式

以上。

本文為企業推廣,本網站不做任何建議,僅提供參考,作為信息展示!

推薦閱讀:手機性能排行

網友評論
請登錄后進行評論| 0條評論

請文明發言,還可以輸入140

您的評論已經發表成功,請等候審核

小提示:您要為您發表的言論后果負責,請各位遵守法紀注意語言文明

回到首頁 回到頂部
長春大都市 關于我們| 聯系我們| 招聘信息| 老版地圖| 網站地圖
免責聲明:長春大都市所有文字、圖片、視頻、音頻等資料均來自互聯網,不代表本站贊同其觀點,本站亦不為其版權負責。相關作品的原創性、文中陳述文字以及內容數據龐雜本站無法一一核實,如果您發現本網站上有侵犯您的合法權益的內容,請聯系我們,本網站將立即予以刪除!
Copyright © 2012-2019 http://www.739683.tw, All rights reserved.
福建今晚36选7开奖结果今天