微信小程序-使用阿里图标（彩色图标）

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 

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