前言
当我们在开发中，有可能会使用本地h5资源来显示页面，这个时候就需要将h5中的图片，js，css等文件拷贝到项目工程中
资源拷贝
在android中可以在这些资源拷贝到assets目录中即可，在iOS中可以直接拷到工程的主目录即可，这个时候就会出现一个问题，当我们直接将文件拖动到相应的目录中去的时候，就会出现如下图
image.png
当我们默认选第一个的时候，其实所有的文件都会被打散成一个个的文件，如下图，什么意思呢，就是本来一个文件是有父目录的，但是选择这个选项之后，就会父目录就会在引用中消失，就如同，访问图片资源一样
image.png
造成的问题
这样做会造成什么问题呢？当我们使用WkWebView去加载这些h5资源后，h5中用到资源路径的地方可能就会出错，因为有些资源并不在当前根目录下，可能还在其他子目录中，这个时候，就会出现页面空白，或者出现页面404的问题；但是，WkWebView并不会报错的，也不会打印日志，如何来查这个问题呢？下面会简单地说下
image.png
如何查看定位WkWebView问题呢
由于iOS和Android不太一样，在Xcode中WkWebView的大部分日志，开发者是看不到的，想要看到其中日志，可以借助Mac上的Safari浏览器中的开发者工具，调试真机或者模拟器中WkWebView或者UIWebView，如下图
image.png
image.png
这样你就可以查看所有网页加载的过程中的变化情况。最后，通过调试，发现是有资源目录不存在，所以再去查看我们的H5资源问题，打开NSBundle资源目录发现所有的H5资源都被打散到一个目录下了，造成了资源路径不存在的问题。找到问题之后，就在最开始资源拷贝的地方，如下图，选择Create folder refenences这个选项，
image.png
image.png
有多级目录的文件夹都变成了蓝色的背景之后，H5中的资源路径就不会有问题了
总结
造成这个问题的根源就是在拷贝资源到工程中的时候，有两个选项，
1.是所有资源文件都在一个根目录中，选择Create groups即可
2.当资源中有子目录的时候，并且有资源之间有引用的时候，就需要选择Create folder references
作者：何浪
来源：CSDN
原文：https://blog.csdn.net/helang296479893/article/details/89844026
版权声明：本文为博主原创文章，转载请附上博文链接！
网友评论