您的位置: 吉林之声 > 资讯 > 正文

给你代码:小程序引入icon的三种方式

2020-04-02 09:59:27来源:阅读:-


给你代码:小程序引入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的三种方式

以上。

推荐阅读:adobe是什么软件

滚动推荐
59:27给你代码:小程序引入icon的三种
好的应用需要好的图标来映衬。使用图片做图标的弊端有:固定尺寸;激活样式[详细]
38:39这几款比较好的平板,快来看看,你还
要是论玩游戏还有看视频,视频通话,这当然还是平板或者电脑玩起来最舒服的[详细]
18:12怎么选购一款适合你的平板?看了这篇
近两年来平板电脑销量在大屏手机和轻薄笔记本的冲击下持续下滑,但是平板电[详细]
59:15平板电脑别乱买,这3款公认性价比高
现在平板电脑也是很多的人生活中的一个需求,平时用平板打个游戏,看个电影[详细]
41:05Reno3 Pro值得入手吗?一个
2020年是5G高速发展的元年,很多第三方分析机构数据预测,今年中国换[详细]
22:49三大运营商可查个人轨迹证明:发个短
随着企业复工和返程高峰的到来,为了助力疫情防控,电信、移动和联通三大运[详细]
05:51vivo的非凡服务!购买手机消毒,
所谓无接触购买,就是不仅让大家可以在线上完成选购,而且还有专人1对1视[详细]