[Swift]使用WKWebView加载本地HTML文件

html-css015

[Swift]使用WKWebView加载本地HTML文件,第1张

我们项目中有的时候会使用HTML写一些静态页面, 然后直接加载显示到我们的APP中, 之前一直使用的UIWebView来加载, 是这样的: 如果想使用WKWebView来加载, 好像失败了: 这样是加载不了本地的HTML文件的. 下面就来看一下加载本地HTML的方法. 一般我们直接添加到项目中的文件是默认Create groups的, 即: 在我们添加文件到项目中, 例如一个文件夹, 选项是这样的: 这样在项目中添加的文件夹是黄色的, 这时我们在加载HTML的不能使用path来加载了, 应该使用URL, 即: 如果还是使用filePath来加载, 也是可以的, 但是将HTML文件添加到资源目录的时候需要注意: 我们需要选择Create folder references, 为便于区分, 我同样是添加了一个文件夹, 然后将HTML文件添加到这个文件下面: 这时候会发现, 文件夹是蓝色的, 项目中是这样的: 将HTML文件放到这个蓝色文件夹下面后, 我们就可以在项目中这样使用WKWebView来加载了: 这里最主要的是需要自己来拼接完整的文件路径: 上面黄色文件夹Files下的HTML可以使用UIWebView, 使用之前的方式加载, 也可以使用WKWebView以URL的方式来加载蓝色HTML_Files文件夹下的HTML文件, 可以使用上面的方式用WKWebView以路径的方式来来加载.

最近项目中，用到了flutter中的webview加载带有echarts控件的html文件，但是发现图表一直无法显示，通过查询相关资料，分析apk包文件，知道了是由于flutter项目中的文件打包后的路径发生变化，造成找不到相关依赖，特此记录一下，使用下面这个方法便可以解析出Android和IOS打包后的apk中资源文件的实际位置。 例如，你的资源文件是在flutter项目的根目录下的 'assets/files/echart-pie.html', 那 'getAssetsPath('assets/files/echart-pie.html')'才是打包成apk后，资源文件的实际路径。 按照上面的操作，你会发现在android设备上已经可以正常显示本地html页面了，但是IOS设备上还是一脸懵逼；不要慌，这块是由于webview_flutter本来就不支持加载本地文件，这时我们还需要修改下插件IOS部分的源码，FlutterWebView.m文件： 通过以上骚操作，就可以实现webview_flutter在android和ios设备上加载本地html文件了。 最后：推荐一个插件，已经在官方的基础上进行了优化webview_flutter_plus