前言

项目中,要根据返回的国家名称显示对应的国旗图标。实现思路很简单,找到对应的国旗图片,然后根据返回的国家名匹配对应的图片就可以了。

获取国旗图标

一开始,打算在网上找点相关的Icon,但是很多找到的,有的要付费 flaticon,不付费的也不好看,有点杂乱。后来,找到了 COUNTRYFLAGS 这个网站, 国旗比较齐全,也比较美观,可以选择下载的类型和尺寸也很多,唯一的不足是没找到批量下载的方法,190+ 的国旗一个个下载也很费劲。 于是想,有没有更简便的方法?无意中,看到了 Emoji ,想起来,在手机上输入 中国 的时候,会出现一个 Emoji 图标, 🇨🇳 ,所以是不是可以用 Emoji 实现呢?

Emoji 实现国旗图标

简单的说,Emoji 本质是一些字符,可能是多个字符组合出来,像是中国的国旗 Emoji,其实是 🇨🇳 ( CN )这两个字符组合而成的, 注意这里不是我们平时使用的英文 C, N,而是 Unicode 字符集里非常靠后的另外两个字符。 而为了让返回的国家和 Emoji 能够对应起来,我们需要一套规则CN 表示中国, DE 表示德国…, 只要得到国家的国家编号,然后找到这两个字母在 Unicode 字符集的位置, 获取可以生成 Emoji 的 Unicode 字符,然后把获取的字符渲染到页面即可。 Country Code Emoji 中的方法可以帮我们根据国家编号 (CN) 找到其在 Unicode 中对应的位置。

Emoji 存在的问题

用 Emoji 实现国旗是很方便的,不需要下载图片,只要去找国家代码对应的 Unicode 然后进行渲染即可。 但是遗憾的是, Window 系统下,并不支持国旗的 Emoji ,就 Mac 的系统支持. 为了在不同的系统都能显示, 还是得使用 PNG 图片的形式。

最终解决方案

COUNTRYFLAGS 下载对应的国旗png图片,按照 ISO 3166-1 alpha-2 进行命名,然后根据国家编码去对应获取就好。如中国( CN )就渲染 CN.png.

Tips

COUNTRYFLAGS 一张张点下载太慢了,可以写个小脚本,批量下载下来。可以参考 flag-download

参考链接