国家信息资源 国旗 国际电话区号 汇总
in 技术 with 0 comment

国家信息资源 国旗 国际电话区号 汇总

in 技术 with 0 comment

2880px-Oceania_ISO_3166-1.svg.png

最近有一个搜集所有国家地区国旗的需求。
搜了很多相关的资源,分享一下。

注意:国际电话区号跟国家地区并非一一对应的关系,部分国家地区可能存在多个区号。

国家代码

国家地区代码 - 维基百科,自由的百科全书
这里使用的是 ISO 3166-1 二位字母代码(一般都是用这个)。

国旗

所有国家地区国旗的 PNG与SVG格式
256个国家的高清大图,可以下载并且按照步骤生成自己想要的尺寸,文件命名规范,也是使用 ISO 3166-1 二位字母代码

CSS Sprite Generator, Editor, and Code
在线生成精灵图,导入所有需要的图片,生成相应的雪碧图和css文件。
由于各国国旗的比例并不是一致的,所以选择竖排国旗,最大程度减小图片体积

TinyPNG – Compress PNG images while preserving transparency
压缩图片,图片压缩方式很多。当然也可以用构建工具压缩。

国际电话区号

GitHub - 一个用于输入和验证国际电话号码的JavaScript插件
功能相当完整的jQuery插件,集成了很多库,支持选择区号以及格式校验。但是由于需求本身不需要校验,加上我极度不想要引入jQuery,所以没有选用这个。

Google的JavaScript库,用于解析,格式化和验证国际电话号码。
Google 出的一个库,验证手机号码是否有效,资源比较大,需要安装编译。
上面的intl-tel-input也集成了这个库,并且提供了异步加载方案。

要啥有啥

Country.io
这个网站提供各国信息,还有可下载的数据资源,但是不太完整(部分国际电话区号是空的)。
最终没有使用。

GitHub - mledoze/countries: World countries in JSON, CSV, XML and Yaml. Any help is welcome!
各种国家信息,需要php编译。
由于这个编译看上去就很麻烦,所以我选择先观望。之后我找到了下面这个资源。

GitHub - hengkiardo/restcountries: Get information about countries via a RESTful API (Node.JS Version)
用node.js写的,用来获取各个国家信息的RESTful风格接口。而它的数据来源于上面的project。
直接用示例请求https://restcountries.herokuapp.com/api/v1,获取所有国家的数据,然后只要写一小段代码处理一下数据就好了(筛选出需要的信息并组织,同时按照国家首字母进行排序)……YEEEEEEES!!!!

开发中的小问题

overflow: scroll;这一css属性可以让超出既定长度的容器滚动起来。
但是在ios safari中,滚动会变得十分生硬艰难,手指一离开屏幕,滑动就会立刻停止。
如何能够做到“惯性滚动”呢,解决方案如下:
🦉CSS - iOS safari 开启物理惯性滚动支持 - 开发哥

性能问题的思考

一开始想了很多方案,比如国家信息和国旗图片dataURL存在一个json里,通过网络请求获取,不过由于页面一进入就需要用户看到预制的国家信息,同时可以点击进行选择,这个操作是不可以阻塞的。

所以最终还是从需求的优先级出发,选择加载策略:

其实还可以用PWA缓存资源和请求,以及用AMP加快加载速度和优化体验,不过当时没有想到,后续可以往这些方面优化。

评论