浅淡iOS app加载h5页面

html-css011

浅淡iOS app加载h5页面,第1张

由于目前的工作中,原生app大量嵌入h5页面,很多的功能需要h5来实现,但是由于h5需要从网络加载,在弱网状态或者请求资源大的时候必然出现白屏,再网上搜索后发现并没有一个通用的解决方案,其中VasSonic(手Q的解决方案)侵入性太大,需要整个框架更换成本太大,经过一段时间的实践特总结优化的思路。

从上边的测试很明显可以证实我们的猜测

针对上边的问题我们进行了测试,通过先加载 h5项目的一个页面 再加载真正要展示的页面时间发现第二次加载时并没有load->start的耗时,甚至先加载 about:blank 也没有这个耗时,所以基本找到了问题。

我们解决做法是做了一个webview的复用池(当然如果项目中同时只有一个webview存在时可以做成单例),在加载闪屏页时进行初始化并加载url(我们项目是vue写的目前是加载一个vue的空白页,其实如果没有做静态资源拦截加载空白页面就好,这个防止网络错误的问题), 在需要展示的地方能过js(location.hash来改变路由或者bridge)来跳转页面。

但是由于我们用的webview是wkwebview也就有post请求body丢失的问题目前网上没有可行的解决方案, VasSonic上也是用的uiwebview,项目因为有很多的h5如果换回uiwebveiw会有很多的问题,并且uiwebview性能比较低,占的内存也很大,本身准备放弃,但是在部门老大的提示下,找到了绕过的方案

由于静态资源都是get请求,这样就绕过了post丢失body体的问题

针对这个问题,我们的解决办法是,h5也按版本更新,在app启动的时候与服务器比对是否需要更新静态资源,并且判断当前版本下h5可以访问的最新版本,当更新完成后提示用户然后刷新页面,如果未更新未完成依旧使用旧版本。

由于我们的项目主要是面向b端的,要求数据一致性较高, 主要采用第1种方案进行优化

html的引用标签是<a>标签

主要格式为<a href="链接地址,默认为#">名称</a>

在所有浏览器中,链接的默认外观是:

未被访问的链接带有下划线而且是蓝色的

已被访问的链接带有下划线而且是紫色的

活动链接带有下划线而且是红色的