zoukankan      html  css  js  c++  java
  • 微信小程序-使用阿里图标(彩色图标)

    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 

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

  • 相关阅读:
    项目功能规格说明书
    团队工作准则&贡献分配规则
    Scrum Meeting Alpha
    用户需求与NABCD分析
    团队项目选题-博客园移动客户端
    团队作业Week3
    爱情小故事
    高手遇事的处理方法,学会你也是高手
    富人思维--目标导向
    有一种失败叫瞎忙
  • 原文地址:https://www.cnblogs.com/eRrsr/p/12522284.html
Copyright © 2011-2022 走看看