小程序引入差异方式的icon

给网站文字添加图标-Font Awesome

给网站添加图标:FontAwesome 先贴上各种图标的网址:https://fontawesome.com/?from=io 1、打开网址,我们可以看到: 像我这种英语不好的,直接用谷歌浏览器进行翻译中文好了,自己还是有点B数的······翻译后: 2、我们先将这个网站的CSS样式添加到我们的网站中,点击“入门”,找到: 3、然后我们点击“图标”,我们找一个自己喜欢的图标: 就可以看到好多好多图...

方式一:原生图标

小程序里原生图标是通过icon标签来引入的:

<icon type=”success” size=”24″ color=”green” />

然则原生图标只有这么几个,面临前端妖娆繁杂的需求是左支右绌,远远不够用啊!

方式二:WeUI图标组件

WeUI 是一套同微信原生视觉体验一致的基础样式库,基于小程序自界说组件构建。

由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知加倍统一。

要使用WeUI组件,我们需要到组件下载页面去下载icon组件:developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html

下载完成后我们会获得一个icon文件夹。

内里有四个文件:icon.js, icon.json, icon.wxml,icon.wxss

我们在项目根目录下确立一个components文件夹,再将icon文件夹拷贝进去,然后在app.json中增添以下设置:

“usingComponents”: {

“mp-icon”: “components/icon/icon”},

在测试页面增添一段代码:

<button type=”primary” style=”width:100%;”>

<mp-icon icon=”add” color=”white” size=”{{25}}”></mp-icon></button>

2020年4月4日举行全国性哀悼,一键把网站变成灰色教程

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院今天发布公告,决定2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使领馆下半旗志哀,全国停止公共娱乐活动。4月4日10时起,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。  各位网站站长,教你们把自己网站变灰色,哀悼!(用自己网站给你们做演示) 下面是程序代码