根据国家显示国旗图标
前言
项目中,要根据返回的国家名称显示对应的国旗图标。实现思路很简单,找到对应的国旗图片,然后根据返回的国家名匹配对应的图片就可以了。
获取国旗图标
一开始,打算在网上找点相关的icon,但是很多找到的,有的要付费(flaticonopen in new window),不付费的也不好看,有点杂乱。
后来,找到了country flagopen in new window这个网站,国旗比较齐全,也比较美观,可以选择下载的类型和尺寸也很多,唯一的不足是没找到批量下载的方法,190+的国旗一个个下载也很费劲。
于是想,有没有更简便的方法?无意中,看到了emoji
,想起来,在手机上输入“中国”的时候,会出现一个emoji图标,🇨🇳
,所以是不是可以用emoji实现呢?
emoji实现国旗图标
简单的说,emoji本质是一些字符,可能是多个字符组合出来,像是中国的国旗emoji,其实是🇨🇳
(CN
)这两个字符组合而成的, 注意这里不是我们平时使用的英文C
, N
,而是unicode
字符集里非常靠后的另外两个字符。
而为了让返回的国家和emoji能够对应起来,我们需要一套规则open in new window:
CN
表示中国,DE
表示德国... 只要得到国家的国家编号,然后找到这两个字母在unicode字符集的位置,获取可以生成emoji的unicode字符,然后把获取的字符渲染到页面即可。
country-code-emoji open in new window中的方法可以帮我们根据国家编号(CN
)找到其在unicode中对应的位置。
emoji存在的问题
用emoji实现国旗是很方便的,不需要下载图片,只要去找国家代码对应的unicode然后进行渲染即可。但是遗憾的是,window
系统下,并不支持国旗的emoji,就apple
的系统支持.
为了在不同的系统都能显示, 还是得使用png图片的形式。
最终解决方案
到Country Flagopen in new window下载对应的国旗png图片,按照ISO 3166-1 alpha-2open in new window进行命名,然后根据国家编码去对应获取就好。如中国(CN
)就渲染CN.png
.
tips
在Country Flagopen in new window一张张点下载太慢了,可以写个小脚本,批量下载下来。可以参考flag downloadopen in new window