androidWebView套壳H5踩坑总结
由于公司审核要求，本来无app端的项目突然需要在短时间内提供android端app。所以最快速的方式就是H5套壳啦。
项目经理跟我说这个需求的时候我给出的工期是大约一个周，毕竟要进行一些交互上的转换吗，比方说dialog，js调用等，但实际的情况说明自己的想法还是太年轻。
进入正题。套壳当然要跟前端对接，前端给出的工期大约是两个周。因为是将微信公众号端的功能移植到android端，困难点有两个：一是将调用微信api的功能转换为android原生实现；二是前端vue框架怎样与android端通信的问题（vue框架发布后为框架自动编译的文件，为一个index.html文件和其它编译整理过得js、css等文件--及所见非所得。而我要与前端打交道的就是这个index.html文件）。首先我们尝试了传统的加载html方式，只不过是将前端vue框架生成的静态代码放到了assets目录下，加载index.html，加载失败，报错：许多js无法调用。遂放弃。
考虑到前端使用了vue框架的问题，我们选择的是使用桥接模式进行尝试。工程导入jsbridge Library包，使用
BridgeWebView代替原WebView。通过webview.registerHandler()方法，通过js方法名参数与前端进行传参，通过回调方法进行返回参数。与之前一样还是使用vue静态代码加载，这里要说一下为什么要使用静态代码的问题：前端考虑框架的问题所以考虑将框架生成的代码都放到了android端这里（后期证明放不放这里都可以）。好吧，这样通过桥接的方式实现了通信但是比较奇葩的是，参数传递的问题。由于我们html首页需要瑜伽在部分字典数据，所以要讲数据暂存到android端，我使用sqlite数据库进行存储，这个过程没有问题。问题出在前端调用的时候，桥接框架会莫名的进行格式封装，导致前台无法解析，经过加班到凌晨的折腾，还是没有解决。第二天求救公司首席架构师，毕竟时间紧任务重，这一关过不去就没有办法估工期。架构师一通操作猛如虎，jsonObject、jsonArray、Object……相互转换，一同操作后依然打不过三方桥接的坑，遂放弃。架构师提出试试加载url地址，也不知是之前没有试过还是当时配置不正确，之前尝试是没有成功的，但是这次就成功的加载了首页……就是这么神奇，费了这么大劲还是使用了最原始的方式。下面具体讲一下使用腾讯X5浏览器内核加载从微信功能平台转移过来的h5页面：
首先说一下，为什么用腾讯x5,一是由于android自带的WebView功能有限。二是微信加载网页也是使用的x5内核浏览器，所以这样转移会有比较好的兼容性吧。使用了腾讯X5内核后，js交互很顺利，前端的缓存问题也得到了解决，不需要android提供缓存，直接按照浏览器的缓存机制就可以。一切仿佛进行的很顺利。直到进行测试时，问题暴露出来了。个别机型无法响应图片上传的功能，一开始认为是android9.0适配的问题，处理了一下可以了。但是一会又不行了，捣鼓一下好了……这样反复了好几回，在机型适配的问题上折腾了一大圈，最后发现问题的根源在于安装app后首次运行无法使用上传图片功能，将进程杀死后再次打开app就可以正常使用了。这才是问题的症结，饶了一大圈终于找的问题，仿佛看到了胜利的曙光。但是百度查询结果让人有些绝望：说这是腾讯x5首次加载的问题，首次加载内核使用的是异步加载，在没有加载成功X5内核的情况下加载的html使用的是android系统自带的webview,理所当然的一些js功能就加载不出来了。那问题有了，有没有解决办法呢？在网上搜索了很久：尝试了静态加载X5内核，无效，因为静态加载也是异步的，只不过之前是从网路上加载，静态加载法是从本地加载，也是需要时间的。好，既然你是异步加载，那我等你加载完，我再加载html不就可以了吗？最深的坑就在这里，腾讯的机制是首次加载内核不可以直接使用！！！吐血…… 官方的回应是市面上98%的手机都有安装微信或者QQ，可以直接加载微信、QQ中的x5内核，只有约2%的用户需要网络加载X5内核，所以这种问题涉及的用户很少，所以就不做处理了。就这个机制把我坑惨了，整好属于2%的范畴。一时间感觉感觉山穷水尽了…… 好在天无绝人之路，首次加载不可以，第二次就可以，那我重启一下不就可以吗？从网上搜索了app自身重启的方法，写到service中。在app加载时判断x5内核是否已加载，未加载 进行异步加载，页面为等待页面，待加载完成，若返回结果为false说明是第一次加载，杀死自己进程然后重启。重启期间会出现闪屏的效果，但是不是 太明显。这样一来就实现了首次启动即可正常使用X5内核的功能了。至此Android套壳加载微信公众号html的转移工作就算完成了，期间走了不少弯路，希望能对以后使用腾讯X5内核的小伙伴有帮助。
androidWebView套壳H5踩坑总结相关推荐
- android WebView套壳 H5微信支付
看博客,首先得看日期,首先吐槽下,第一次做webview 套壳的android APP ,项目有微信支付这一块,就百度搜 看别人的博客,有的说android webview H5 微 ...
- uniApp开发h5踩坑 px转rpx转rem 1px转2rpx 2倍
项目要求开发h5移动端页面,查看了后续可能会出现的ui设计.不选择使用原生写法写h5,选择了uniApp+vue3来开发h5,高效简洁.由于第一次使用uniApp开发h5,所以挺多坑和报错. 在h5移 ...
- Taro 兼容 h5 踩坑指南
最近一周在改造 公羊阅读? Taro 版本适配 h5 端,过程中改改补补,好不酸爽. 本文记录?遇到的问题,希望为有相同需求的哥们?节约点时间. Taro 版本:1.3.9. client_mobil ...
- 企业微信H5踩坑指南
企业微信开发H5功能,正在进行中,需要记录的点有两个: 第一是:域名验证,针对SPA应用,下载下来的验证文件跟index.html同一目录或者使用其他方式,需要保证域名+文件名可以访问即可,再次登录微 ...
- 微信小程序使用web-view，内嵌跳转h5踩坑记！！
先说说我遇到的错误,项目在部署测试环境之前一切正常,没有遇到任何阻碍性bug,但是部署测试环境之后,跳转h5报如下错误: 然后我就去查了官方文档,以及各类技术文档,意思就是需要在微信公众平台配置业务域 ...
- taro 引入js_Taro 兼容 h5 踩坑指南
最近一周在改造 公羊阅读
- 开发嵌入京东app h5| Hybrid | 微信小程序 ｜ 实践踩坑总结十六条
一 前言 笔者最近一直在开发京东app嵌入的h5项目和微信小程序商城项目,在此期间遇到很多坑.这篇文章主要是针对 h5| Hybrid | 微信小程序 三个方向来讲述我遇到的坑,以及详细讲解我是如何解 ...
- m3u8 video ios h5_移动端H5页面踩坑记
移动端H5页面踩坑记 移动端的样式问题 「1. 安卓 font-weight:700;以上才被认为是加粗.」 「2. border 在 1px 以内是不被安卓识别的一些 0.5px 的下划线怎么搞?」 ...
- h5 微信分享和踩坑指南
文章目录 思路 踩坑集锦 链接不能直接作用与分享 url 参数不能携带特殊字符,比如花括号 "{}" 代码实现 思路 h5 微信分享的官方文档在 这里,如果链接挂了,可以按照一下路 ...
最新文章
- Thinkpad W520 完美安装Ubuntu14.04LTS
- spring30: 事务
- 开源项目｜基于darknet实现量化感知训练，已实现yolov3-tiny所有算子
- oracle sql 表个数,【oracleSQL】查看当前用户各个表的记录数
- strcmp java_C语言中strcmp的实现原型
- php-php连接数据库
- 【hortonworks/registry】registry 如何添加新的类型 支持 json
- linux 多线程并行计算,浅谈.NET下的多线程和并行计算（五）线程池基础上
- JS正则表达式（RegExp）
- 正则表达式的几种字符判断（包括数字，字母组合等）
- 利用 Google API 调用谷歌地图 演示1
- 弃用 Notepad++ 还有更牛逼的选择
- 2022抖音日活用户超8亿，旅游商家如何从抖音获客？
- uni-app开发微信公众号H5网页，用微信开发者工具调试公众号
- svn 服务器端密码修改,svn服务器端设置密码
- 计算机硬件未来发展前景,计算机硬件发展趋势
- Excel用SQL合并多个工作表
- python基础学习总结
- 激励视频广告 Android,激励视频广告
- figma对比sketch有什么优势和不足？