|
|
51CTO旗下网站
|
|
移动端

Android原生与H5通信

如今,混合开发似乎成为了主流。H5拥有跨平台的优势,却存在性能上的问题正好可以用搭建原生壳承载H5代码的方式去解决。如何理解这种方式,就好像说Android原生代码封装外壳,内部包含H5代码作为核心内容。

作者:饮水思源为名来源:简书|2018-08-01 15:49

如今,混合开发似乎成为了主流。H5拥有跨平台的优势,却存在性能上的问题正好可以用搭建原生壳承载H5代码的方式去解决。

如何理解这种方式,就好像说Android原生代码封装外壳,内部包含H5代码作为核心内容。更细节一点,我们把引导页、登录页、首页等等与业务关联打不并且与用户交互较多的页面用原生去写,而业务页面,逻辑代码由H5处理,将他们结合就形成了混合开发的由原生壳承载的H5APP。

Android原生与H5通信

这么做有什么好处呢?组个例子,我们利用这种方式做好了一个Android原生APP,现在需要做一个IOS原生APP,我们可以直接简单搭建一个IOS壳,复用H5代码,完成IOS原生APP。同时我们需要在钉钉、微信小程序等等平台搭建,可以直接复用我们已有的H5代码。

而这样的搭建方式比纯H5搭建的APP的优势在于因为有原生壳的存在,可以自由的使用原生API。保证了交互上的流畅性。

如何实现原生与H5的通信呢?

关于通讯我们需要解决两个问题:

  • 原生向H5通讯
  • H5向原生通讯

第一个问题很好解决,以Android为例,WebView提供特有的方法,当你打开一个Html,你可以去调用这个Html中包含的JS。例如:

  1. webview.loadUrl("javascript:callH5('Android ok')"); 

第二个问题我们采用发送指令的方式来处理。同样以Android为例,WebView可以拦截html跳转时的url地址,我们可以利用这个地址,约定一个规则,如果符合规则,则拦截后不执行跳转,通过这个url获取我们需要的信息,执行对应的操作。

  1. window.location.href=protocol://android?code=toast&data=+Json.stringify(config) 

上述是一段JS的页面跳转方法。我们规定规则PRE=protocol://android?,当我们拦截的url包含PRE时,则我们认为这是一条指令,不需要跳转页面,应该执行对应操作。而参数code则是我们的指令内容,data为通信时的传参。

接下来是原生这边处理。首先我们拦截url。这里笔者还处理由于Http攻击导致H5页面出现广告的问题。我们主要是第一个if。

  1. webView.setWebViewClient(new WebViewClient() {  
  2. // Load opened URL in the application instead of standard browser  
  3. // application  
  4. public boolean shouldOverrideUrlLoading(WebView view, String url) {  
  5. showLogInfo("拦截到的url----"+url);  
  6. String advertising="http://"+sharedPreferencesUtil.getData(Constant.IP, RequestConfig.IP)  
  7. +":"+sharedPreferencesUtil.getData(Constant.PORT,RequestConfig.IPPORT);  
  8. if (url.contains(pre)) {  
  9. Map map = getParamsMap(url, pre);  
  10. String code = map.get("code");  
  11. String data = map.get("data");  
  12. parseCode(code, data);  
  13. return true 
  14. }else if(!url.contains(advertising)){  
  15. showLogError("拦截到植入广告,广告的url——"+url);  
  16. return true 
  17. else 
  18. return false 
  19.  
  20.  
  21. }); 

return 为ture表示拦截成功,不执行后面的跳转操作。而false表示按正常流程执行。拦截成功后我们从url中获取code和data,接着就可以按照我们自己的需求去处理了。

【编辑推荐】

  1. 欧盟罚款风波:Android要收费、闭源恐难于上青天
  2. 谷歌正式推出Android P第五个开发者预览版更新
  3. Android中数据的加密解密
  4. 谷歌公布7月Android各版本份额:老版本依旧坚挺
  5. 开发过程更透明,Google 将 AndroidX 移至 AOSP
【责任编辑:未丽燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

网络管理员考试考前冲刺预测卷及考点解析

本书依据最新版《网络管理员考试大纲》的考核要求,深入研究了历年网络管理员考试试题的命题风格和试题结构,对考查的知识点进行了提炼,并...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊