• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序-使用阿里图标(彩色图标)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1、阿里图标使用帮助

2、简述:

  阿里图标三种应用方式:

  1> unicode:nicode是字体在网页端最原始的应用方式

a. 兼容性最好,支持ie6+,及所有现代浏览器
b. 支持按字体的方式去动态调整图标大小,颜色等等
c. 因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目(这里的项目时你在阿里图表官网中创建的图表集合)里有多色图标也会自动去色
这里需要注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式

 

  2> font-class:unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题

a. 兼容性良好,支持ie8+,及所有现代浏览器
b. 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么
c. 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用
这里需要注意:本质上还是使用的字体,所以多色图标还是不支持的,如果有需求建议使用symbol的引用方式

  3> symbol:全新的使用方式,应该说这才是未来的主流(这种用法其实是做了一个svg的集合,不懂,不管了,能用就行)

a. 支持多色图标了,不再受单色限制。
b. 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
c. 兼容性较差,支持 ie9+,及现代浏览器。
d. 浏览器渲染svg的性能一般,还不如png。

3. 这里仅说明symbol的使用方法(PS:因为微信小程序现在只有image组件支持svg)

  首先选择你想使用的图片,加入到购物车,最后点击添加至项目,进入项目可以看到所有你选择的图标,点击 暂无代码,点此生成,记住这个链接,考试要考

  这里说明一下,我没有使用到npm的组件包,这表示我需要重新搭建npm环境,嘁!

  1> 快速搭建npm环境,yarn没装,不管了,这里只用npm

    到你的根目录,打开终端命令(CMD窗口),确保当前目录是项目的根目录,命令:

    >  npm init -y

    这时根目录会多出一个package.json文件

  2> 需要使用到mini-program-iconfont-cli(PS:一种适合小程序的多色解决方案),命令:

    >  npm install mini-program-iconfont-cli --save-dev

    这时正在下载支持的组件,耐心等待,会多出一个node_modules文件夹

  3> 支持的组件已经下载完了,初始一下,生出配置文件,命令:

    > npx iconfont init

    出现了,Help 怪。。。

    多出一个 iconfont.json配置文件

Usage:
    npx iconfont-init     : generate config file
    npx iconfont-wechat   : generate wechat icon component
    npx iconfont-alipay   : generate alipay icon component
    npx iconfont-baidu    : generate baidu icon component
    npx iconfont-toutiao  : generate toutiao icon component
    npx iconfont-qq       : generate qq icon component

 

    > npx iconfont-wechat

    多出一个 iconfont文件夹,这个是为小程序生成的组件

  4> 打开iconfont.json配置文件

{
    "symbol_url": "阿里官网提供的JS链接,例://at.alicdn.com/t/font_1616497_b708i6mgh3d.js",  ###生成的在线链接
    "save_dir": "./iconfont", 
    "use_rpx": false, 
    "trim_icon_prefix": "icon", 
    "default_icon_size": 18 
}

  5> 组件就需要引用

  到app.json 中加上(注意目录)

"usingComponents": {
    "iconfont": "./iconfont/iconfont"
}

  6> 建一个页面测试

<iconfont name="iconbolanggu-" size="99"/>

效果:

 

  

  demo:  链接:https://pan.baidu.com/s/11fiJi9Flfo35MNoTzzUSwQ 
         提取码:8zzh 

     -------- 转载请标注


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序开发初体验发布时间:2022-07-18
下一篇:
微信小程序调用api接口发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap