Weex中网络图片加载的解决方案

Posted 2021-04-29 轻易科技技术中心

背景：在进行充值改造项目开发中，有个界面是银行卡限额列表，展示的都是所支持的银行卡；此界面是Weex开发的，然而银行卡图标未能正常展示。

1、Weex中开发银行卡限额列表功能时，涉及到动态加载银行卡图标功能，此功能之前在ios的原生界面也做过，于是在Weex中开发时，采用了跟之前原生界面一样的方式进行加载银行卡图标；之前在原生界面按照以下路径加载银行卡图标是可以正常显示的，但是在Weex中加载时，就出了问题，部分图标不能显示；

2、此时，我首先想到的会不会是加载的路径有问题？于是将不能正常显示图标的加载路径去浏览器中输入，却能正常显示，这说明加载的路径是没问题的；然后将显示和不显示的银行卡图标加载的路径进行对比，发现最大的区别就是不能正常显示的银行卡图标路径中包含有中文字符。

3、于是按照加载的路径中含有中文字符这个思路去接着定位问题，最终找到问题的原因：

Weex框架源码中有个类WXURLRewriteDefaultImpl，该类中有个以下的方法对URLString字符串的处理欠妥当，如果url里面含有中文字符，得到的completeURL为nil，这样就导致含中文字符的图片网址会加载不出来。

4、此时，试着对加载的url先进行UTF8处理，然后再去加载，最终能够正常加载出含中文字符的网络图片

总结：在Weex的日常开发中，很多之前按照原生界面的开发思路，可能在Weex中行不通，这也是Weex需要完善的地方，也需要咱们平时开发中多留意！