在推进TPWallet这个项目进行的过程里面, 关于钱包Logo对接这件事, 从表面现象来看是属于比较简单的, 但是在实际的执行过程里面, 却是存在了不少的坑和障碍。

其中占据核心位置的有三个方面的关键内容, 分别是资源的格式问题、CDN的路径配置问题以及多分辨率下的适配处理问题。本人自身曾经在真实的生产环境事故中亲身经历并踩过两次相关的雷, 导致的具体故障表现均属于Logo区域呈现为白屏的状态。

关于Logo的这部分资源, 建议是采用SVG加上WebP这两种格式组合在一起这样的方式去做, 因为用SVG的话, 能够保证画面在显示的时候是矢量级别的清晰, 而使用WebP主要是作为一个兜底的方案, 用来兼容那些比较老旧的设备机型。

对于文件的具体存放位置, 路径应当安排到CDN里面去进行分发和托管。针对这个目录里面的文件, 缓存策略方面需要设置为让缓存的生命周期尽可能变长一些。

lv水波纹钱包logo_tpwallet钱包logo对接_钱包对接数币达

另外, 我在这一端会统一采用名为/wallet-icons/{chain}/logo的这一套命名规则来进行文件的整理和标识, 这样做的目的是为了后续如果需要批量替换文件或者是进行热更新操作的时候, 方便执行和处理这些任务。

最容易导致问题出现的就是动态加载场景。用户切换链之后, logo没有进行刷新, 或者在列表页滚动的时候, 图片被回收利用, 之后没有再重新去拉取。

我现在的做法是每一帧都对可见区域进行检查。一旦离屏就释放资源, 一旦回屏就重新请求数据。同时配合error事件来兜底, 显示默认的图标。上线以后, 关于白屏的投诉基本上已经清零了。