(敲黑板)android - webview的优化办法: 不要使用spa,直接使用最传统的html

访问量: 83

重点来了。

经过投入很多的事件,我们发现,SPA项目(例如vuejs) 可以完美的运行在ios上。 

但是对于android, 则无法集成SPA项目,特别是该项目中js代码很复杂的时候。

现在的一个项目,在ios上瞬间打开,但是在android中,打开一次10秒钟。请求一个页面,5.6秒。

怎么优化都不行。 缓存啥的办法都使用了。不行。

昨天被逼无奈, 试了一下打开最简单的hello  的html页面。结果发现,瞬间打开。

问题根源找到了。

耗时5.x 秒的vuejs 页面, 是因为页面中的js逻辑太复杂导致的。

所以,对于android, 我们要直接使用 “最普通的”HTML。

把vuejs页面转换成普通html的过程: 

1. 打开vuejs 

2. google developer tool =>  查看元素

3. 找到<html> 标签,整个复制。

4. 新建一个html 文件(就是它了), 把整个内容粘贴过去。

5. 删掉无用的js. (大部分是在底部。都跟vuejs相关)

并且,在文件末尾,加上:

<script>
function continueVerify (){
  if (window.WebViewJavascriptBridge) {
    WebViewJavascriptBridge.callHandler(
      'continueVerify', {'param': 'verify'}
      , function(responseData) {
        console.log('****************' + responseData)
      }
    )
  } else {
    document.addEventListener(
      'WebViewJavascriptBridgeReady'
      , function () {
        WebViewJavascriptBridge.callHandler(
          'continueVerify', {'param': 'verify'}
          , function(responseData) {
            console.log('****************' + responseData)
          }
        )

      },
      false
    );
  }
}
</script>

6. 把  app.xxxxx.css 保存下来,重命名为: app_for_android.css,  这个css很关键,直接对应了后面很多元素的样式。

我们为了节省时间,就不一个一个的肉眼对了。

(以上步骤,如果已经做过一次的话,就不用再做了。把现有的文件copy过来用)

7. 回到vuejs页面,复制<div id='app'> 部分。  

(这个时候就会看到,页面出来了)

8. 修改对应的click 事件。

(这个时候,就可以了)

订阅/RSS Feed

Subscribe

分类/category