解决jsbridge在原生app上页面调用两次的问题

最近做一个项目,需要h5页面嵌入到安卓原生app上，虽然我不太赞同这种技术方案，但还是做了，因为我认为如果不跨平台运行，最好是安卓自己开发，嵌入h5的除非需要运行在不同的系统上，比如说需要ios和window都需要运行，这时候嵌入h5是一个绝佳的方案，因为节省了很多开发成本。

下面说说这两次加载的问题吧，因为需要交互用到了jsbridge，第一次使用这个东西，抱着试试的心态看了api，引入了，挺不错的，一切都运行正常，大概h5写了40多个页面。

一个多月时间过去了，项目也快上线了，一个支付的页面，请求二维码，结果因为支付的系统不支持调用两次支付二维码，或者说是服务器压力扛不住，十分之一的概率出现加载二维码失败的问题，排查这个问题，最初打了log，发现接口总是调用两次，what's fuck ，什么鬼，难道是代码逻辑写的有问题，仔细看代码，逻辑没问题，为什么加载两次呢，换个页面打了log，惊奇的发现竟然所有页面都载入了两次，这简直是不能忍（本人有代码洁癖），

。。。。。。这中间经历很多尝试

写了几个测试的html嵌入安卓的webview中，发现不会加载两次，那么到现在怎么解决已经很清晰了，没错就是用iframe包裹我们的vue单页面应用，让原生app的webview感知不到URL的变化，完美解决。

亲测，如果只使用jsBridge的webview不初始化jsbridge是不会加载两次的，排除了url带#的问题

问题的原因大概是因为我们

1、路由变化加载了一次，

2、webview为了保持jsbridge通信正常又加载了一次，

所以是两次

解决jsbridge在原生app上页面调用两次的问题相关推荐

解决RequestMapping写在类上页面跳转失败
解决RequestMapping写在类上页面跳转失败问题: 问题出现原因: @RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上. 用于类上,表示类中的所有响应请求的方法 ...
vue h5 页面调起原生APP指定页面
这次分享可能比较适合小白,大神们多多指教哈!为什么这么说呢,因为我之前都是做pc,或者小程序.rn 什么的,原生app内嵌h5这种还是第一次. 最近提了个需求:app下载页如果当前应用已经安装就直接 ...
vue与原生app的对接交互的方法(混合开发)
小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我把我踩的一些坑,拿出来给大家分享下. 1.通过url传输数据:(一般是在入口页面传下ap ...
H5和原生APP之间的区别
原文:http://www.ui.cn/detail/247751.html 最近项目中因各种客观因素,移动端都是默认用的纯H5 APP,感受最深的就是各种坑啊,好大的坑啊.产品上线后,带着各种坑后的 ...
vue 获取安卓原生方法_vue与原生app的对接交互的方法(混合开发)
小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我把我踩的一些坑,拿出来给大家分享下.1.通过url传输数据:(一般是在入口页面传下app ...
混合开发中，H5页面与原生app交互（方法互相调用与传参）
H5与原生app交互,需要WebViewJavascriptBridge,废话不多直接上代码,下面是项目中的封装bridge.js的全部代码(示例代码为vue) //iOS 交互声明 function ...
5页面调用原生相机_React Native与原生通信全梳理（iOS端）
emmm-- 先说个题外话,时隔一年,再遇RN,较之以前唯一不同的一点就是遇到的坑终于有人先踩了本文会通过原生与RN页面相互跳转.方法间的相互调用.以及H5页面调用原生页面进而调用RN页面等方面来阐述 ...
h5页面和原生app页面的区别
"原生应用"占统治地位当我们为移动设备开发应用程序时,程序员通常都会选择开发"原生应用","原生应用"是一种用户必须通过手机应用商店购买下 ...
iOS原生App与H5页面交互离线缓存笔记
//webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法- (BOOL)webView:(UIWebView*)webView shouldStartLoadW ...

解决jsbridge在原生app上页面调用两次的问题

解决jsbridge在原生app上页面调用两次的问题相关推荐

最新文章

热门文章