在UI界面给组件设置皮肤时遇到的问题,Button组件丢失了皮肤”lose skin wxlocal/enemy.png”无法正常显示,但是旁边的Image组件却能正常的展示。
根据官方的文档(官方本地资源和动态资源加载的文档),wxlocal(默认本地目录)目录被视为本地目录,即便使用了URL.basePath,对于包含在nativefiles白名单内的目录名或文件,都不会从网络动态加载,只会从本地加载。但相同的皮肤设置下,最终Image组件可以正常展示,而Button组件则会lose skin。
在Image的官方API(Image)中可以看到Image组件是可以自动去加载资源的,而Button等其他组件不行。
接下来就是去找原因了。
我在laya.ui.js中找到Button设置皮肤的地方,发现它会调用changeClips。
在changeClips可以发现,img如果没有取到就会打印lose skin,并且直接返回。
所以我们接着到laya.core.js中找到getRes,发现它调用了formatURL
打印出最终返回的地址可以发现这是带着基础路径的地址,这并不是我们想要的结果。
显而易见,getRes中的Loader.loadedMap[URL.formatRUL(url)]得到的肯定是null,皮肤资源也就设置失败了。
然后我们再来看Image设置皮肤的处理方式。
和Button一样,getRes返回的是null,但是Image多做了一件事Laya.loader.load。
找到laya.core.js中LoaderManager类的load。
可以看到content和info都是取不到的,但是它会去生成一个info并存到LoaderManager._resMap[url]中。
再回去看Laya.loader.load加载结束回调setSource,在回调中成功的设置皮肤。
总结一下,这里的主要问题有两个:
第一是formatURL的时候对本地资源地址的处理不应该加上基础路径。
第二是Button不能像Image那样在资源未加载时,自动加载并缓存。
解决方法:
第一点我们可以在formatURL中判断url是否在本地白名单中,如果在则不加基础路径直接返回。
这里我们在laya.wxmini.js中更改(不同的平台可以在不同的适配库中修改)。
第二点我们可以在laya.ui.js中Button的处理皮肤地址时参考Image的处理方式来实现。