安卓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高星,否则不知道哪一天就出事,避免踩坑,从选型做起。

相关文章
|
24天前
|
资源调度 JavaScript 前端开发
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
21 5
|
24天前
|
程序员 开发工具 Android开发
Android|WebView 禁止长按,限制非白名单域名的跳转层级
如何限制 WebView 仅域名白名单网址能随意跳转,并禁用长按选择文字。
30 2
|
2月前
|
定位技术 Android开发 iOS开发
引入百度地图,安卓出现白屏问题
引入百度地图,安卓出现白屏问题
178 57
|
3月前
|
JSON JavaScript 前端开发
Android调用Vue中的JavaScript代码
Android调用Vue中的JavaScript代码
36 3
|
3月前
|
JavaScript
创建Vue工程常用的命令
这篇文章提供了创建和启动Vue项目的基本命令步骤,包括初始化项目、安装依赖、安装Vue-router和Element-UI,以及启动项目进行测试,并提醒注意Vue版本与依赖包版本的兼容性问题。
|
5月前
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
|
5月前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
4月前
|
Web App开发 JavaScript 前端开发
Android端使用WebView注入一段js代码实现js调用android
Android端使用WebView注入一段js代码实现js调用android
113 0
|
6天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
8天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异,从编程语言到用户界面设计,再到市场分布的不同影响,旨在为开发者提供一个全面的视角,帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。