发布时间: 2017-08-18 06:36:00
重点来了。
经过投入很多的事件，我们发现，SPA项目（例如vuejs) 可以完美的运行在ios上。
但是对于android, 则无法集成SPA项目，特别是该项目中ｊｓ代码很复杂的时候。
现在的一个项目，在iｏｓ上瞬间打开，但是在android中，打开一次１０秒钟。请求一个页面，５.6秒。
怎么优化都不行。 缓存啥的办法都使用了。不行。
昨天被逼无奈， 试了一下打开最简单的hello 的html页面。结果发现，瞬间打开。
问题根源找到了。
耗时5.x 秒的vuejs 页面， 是因为页面中的js逻辑太复杂导致的。
所以，对于android， 我们要直接使用 “最普通的”ＨＴＭＬ。
把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 事件。
（这个时候，就可以了）
Back