原生APP跳转到H5页面时,往往需要携带一些用户信息,之前做法是在跳转的地址中拼接H5页面需要的参数,现在通过window.WebViewJavascriptBridge悄悄的进行数据交互。
本文主要从H5的角度记录交互思路:
1:安卓环境和ios环境稍微有点不同,需要根据navigator.userAgent判断一下当前环境
2:仍然是APP环境不同,安卓需要进行兼容性判断,如果不存在window.WebViewJavascriptBridge变量,需要手动添加Dom的WebViewJavascriptBridgeReady事件监听;ios同样需要判断是否存在window.WebViewJavascriptBridge变量,如果不存在继续判断window.WVJBCallbacks变量,如果仍然不存在,则手动赋值为H5回调,然后document.createElement('iframe')插入document中,随即移除。
3:以上处理完成后,通过WebViewJavascriptBridge变量来注册【事件】以便APP能监听到并执行相应操作
4:3中需要对安卓系统进行init处理,如果是安卓系统,注册事件之前需要先调用WebViewJavascriptBridge.init()
方法(注意: 一个页面整个生命周期过程中,只能进行一次init()否则会报错,我的做法是通过一个全局变量来判断是否初始化过)
以下是具体代码:
//针对安卓和ios系统,对window.WebViewJavascriptBridge进行