安卓webview访问vue工程白屏/无响应/无法加载问题处理

简介: 本文目录1. 问题出现2. 尝试更换内嵌浏览器3. 尝试各种babel配置4. 二分排除法定位问题5. 模拟器与真机测试还不一样6. 总结7. 反思

1. 问题出现

使用vue-cli构建的前端项目,开发期间一切正常,上线前夕一部分功能需要通过安卓内嵌浏览器webview来访问,结果直接白屏,浏览器访问正常,使用安卓模拟器根本不行。


2. 尝试更换内嵌浏览器

最开始感觉是浏览器内核问题,更换腾讯TBS后,依然白屏。


3. 尝试各种babel配置

然后又感觉是使用了es6等高级语法的问题,尝试各类babel配置,依然白屏


4. 二分排除法定位问题

将vue代码部分全部删除,只保留静态页面,结果能出现,然后慢慢放开部分代码,最终发现一些引入模块导入后会导致白屏。


看来是引入模块兼容性差导致的,悲催啊。


5. 模拟器与真机测试还不一样

终于解决问题,感觉大功告成,结果上了真机,又白屏了。


再次使用二分法,一部分一部分代码测试,又发现一些引入模块会导致白屏,去掉之后,终于搞定。


前后折腾3天时间…只怪自己缺乏经验啊。


6. 总结

chrome浏览器兼容性太好了,怎么都能跑。


模拟器的兼容性比真机好像还是要好一点,反正我这次有一个模块是模拟器可以跑,真机跑不了。


7. 反思

前端项目,选择模块要慎重!尽量选择大厂出品、大神出品、github高星,否则不知道哪一天就出事,避免踩坑,从选型做起。

相关文章
|
7天前
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
|
9天前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
18天前
|
XML API 开发工具
Android Bitmap 加载与像素操作
Android Bitmap 加载与像素操作
16 2
|
22天前
|
Web App开发 移动开发 前端开发
52. 【Android教程】网页视图:WebView
52. 【Android教程】网页视图:WebView
16 1
|
22天前
|
XML Java Android开发
04. 【Android教程】Android 工程解析及使用
04. 【Android教程】Android 工程解析及使用
17 0
04. 【Android教程】Android 工程解析及使用
|
11天前
|
安全 网络安全 API
kotlin安卓开发JetPack Compose 如何使用webview 打开网页时给webview注入cookie
在Jetpack Compose中使用WebView需借助AndroidView。要注入Cookie,首先在`build.gradle`添加WebView依赖,如`androidx.webkit:webkit:1.4.0`。接着创建自定义`ComposableWebView`,通过`CookieManager`设置接受第三方Cookie并注入Cookie字符串。最后在Compose界面使用这个自定义组件加载URL。注意Android 9及以上版本可能需要在网络安全配置中允许第三方Cookie。
|
1月前
|
Android开发
Android中Glide加载Https图片失败的解决方案
Android中Glide加载Https图片失败的解决方案
44 1
|
1月前
|
编解码 调度 Android开发
Android音频框架之一 详解audioPolicy流程及HAL驱动加载与配置
Android音频框架之一 详解audioPolicy流程及HAL驱动加载与配置
62 0
|
8月前
|
API Android开发 数据安全/隐私保护
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
420 0
|
1月前
|
JavaScript 前端开发 Android开发
android开发,使用kotlin学习WebView(详细)
android开发,使用kotlin学习WebView(详细)
246 0