top
本文目录
阿里巴巴最高市值
微信小程序开发 | 如何在小程序中使用自定义 icon 图标

icon阿里云,阿里云图标

阿里巴巴最高市值

超过了8000亿美元。截止2022年1月22日,阿里巴巴最高市值在2020年10月份阿里巴巴股价迎来了最高峰,最高时达309.4亿美元,市值超过了8000亿美元,而那时苹果icon差不多2万亿美元市值,苹果的市值是阿里巴巴市值的2.5倍。

拓展资料:

1.阿里巴巴介绍:阿里巴巴集团控股有限公司(简称:阿里巴巴集团)是马云带领下的18位创始人于1999年在浙江省杭州市创立的公司。

2.阿里巴巴集团经营多项业务,另外也从关联公司的业务和服务中取得经营商业生态系统上的支援。业务和关联公司的业务包括:淘宝网、天猫、聚划算、全球速卖通、阿里巴巴国际交易市场、1688、阿里妈妈、阿里云、蚂蚁金服、菜鸟网络等。

3.20多年来,阿里巴巴已由一家电子商务公司彻底蜕变为以技术驱动,包含数字商业、金融科技、智慧物流、云计算、人地关系文化娱乐等场景的平台,服务数以亿计的消费者和数千万的中小企业。阿里巴巴致力于让天下没有难做的生意,开拓数字经济时代的商业基础设施,助力消费市场繁荣,推动各行各业走向数字化、智能化。

4.阿里巴巴主要业务:淘宝,前身是创立于2003年的淘宝网,是以商务为导向的社交平台,通过大数据分析为消费者提供既有参与感又个性化的购物体验。在淘宝网上,消费者能够从商家处获取高度相关、具吸引力的内容及实时更新,从而掌握产品与潮流资讯并与其他消费者或喜爱的商家和品牌互动。平台上的商家主要是个体户和小企业。天猫,原名淘宝商城,是一个综合性购物网站,是阿里巴巴集团B2C(商业零售)平台。其整合品牌商、生产商,为商家和消费者之间提供一站式解决方案。提供100%品质保证的商品,7天无理由退货的售后服务,以及购物积分返现等优质服务。2011年天猫超市上线,位用户提供次日达、小时达、半日达服务。2014天猫国际上线,为国内消费者直供海外原装进口商品。

微信小程序开发 | 如何在小程序中使用自定义 icon 图标

题图:来自 Unsplash.com

本文是微信小程序开发学习笔记。

微信小程序 icon组件(标签)只提供了 9种类型的图标,不能满足开发或设计的个性化需求。为了解决这个问题,我们可以使用自定义的 icon图标,来丰富原有的图标类型。

在微信小程序中使用自定义 icon图标有 6种方法:

1.使用 icon图标(特指位图)

2.使用 Sprite(精灵图)

3.使用 CSS样式绘制(这种方法工作量大)

4.使用矢量字体

5.使用 SVG矢量文件

6.使用 Canvas

本文只对第 4种方法进行说明,因为除了第 1种方法,其他方法我暂时还都不会。

使用矢量字体来自定义 icon图标,需要用到阿里巴巴图标库网站 Iconfont。

题外话,以前我一直以为这个网站只能用于设计,直到接触了一些前端的知识,才知道它也能运用到编程中。

打开网站,选择一个自己喜欢的图标,将其添加到购物车,类似购物时将商品添加到购物车的操作,重复操作,将你喜欢的图标一一添加到购物车中。

选择好需要的所有图标后,点击右上角的「购物车」图标。

浏览器右侧会弹出一个面板,选择「添加至项目」,如果你之前未曾创建过项目,这里就需要新建一个项目,新建项目其实就是新建一个文件夹。

将鼠标移动到网页顶部的导航栏「图标管理」,在弹出的菜单中,点击「我的项目」。

在我的项目中,点击「查看在线链接」。

下方会出现一长串代码,其中的 url链接指向的就是存放在阿里云服务器的矢量字体,这些字体有不同的格式,如 ttf、woff、woff2,之所以需要用到不同的字体格式,是为了兼容不同的设备或系统。

接着点击「点此复制代码」,将代码复制到系统剪贴板中。

回到微信小程序开发者工具中,将代码粘贴到小程序页面的 wxss文件中,wxss文件可以类比为普通网页的 css文件。

接着在 wxss文件中进一步定义 icon图标的样式,输入以下的代码:

font-family指定我们嵌入的字体名称,它需要与@font-face中 font-family的值保持一致,color设置图标的颜色,font-size设置图标的大小。

icon-heart和 icon-like是自定义的类选择器名称(简称类名),你可以根据自己的喜好进行命名,这里的 icon-heart代表爱心图标,icon-like代表点赞图标。

content指定图标的 unicode编码,获取图标的编码还需要回到 iconfont,将鼠标移动到图标上方,在弹出的菜单中,选择「编辑图标」。

在打开的页面中,左下角的 4位字符——e8ab,就是爱心图标的 unicode编码,将其粘贴到 wxss文件中对应的位置,并在字符前面加上一个反斜杠\。

获取点赞图标的 unicode编码,也需要进行同样的操作。

至此,就算完成了 wxss样式的编辑。

为了在小程序中看到图标最终的渲染效果,我们还需要编辑一下 wxml文件,wxml相当于普通网页的 html文件。在 wxml中使用 icon标签,输入如下代码:

这里的 class属性的值,就是对应 wxss文件中自定义的类名,通过类名来应用相应的样式。完成以上所有操作,最终的渲染效果如下:

搞得那么费劲,就只为得到两个小图标。。。好像有点得不偿失

扩展阅读:

《写一个微信小程序的最少必要知识》

以上,希望有帮助。

References

[1] Iconfont: iconfont.cn/

欢迎关注

阅读剩余
THE END
icon
0
icon
打赏
icon
分享
icon
二维码
icon
海报