首页 > 语言 > JavaScript > 正文

深入了解Hybrid App技术的相关知识

2024-05-06 15:36:55
字体:
来源:转载
供稿:网友

背景

随着Web技术的发展和移动互联网的发展,Hybrid技术已经成为一种前端开发的主流技术方案。那什么是Hybrid App呢?

Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具" Native App良好用户交互体验的优势 "和" Web App跨平台开发的优势 "。

总的来说,就是既具有APP的体验和性能,又具有Web灵活的开发模式和跨平台开发能力。

现有的技术方案

1、H5 + JSBridge,通过JSBridge完成H5和Native的通信,赋予H5一定的端能力。是一种基于WebView UI的解决方案。

2、React-Native,进一步通过JSbridge将js解析为虚拟DOM传递到Native,并使用原生进行渲染。

3、小程序解决方案,采用双线程的渲染机制,将渲染层WebView和逻辑层JavaScriptCore形成独立的模块,通过Native进行通信(setData),逻辑层的网络请求也会由Native进行转发。在UI方面,采用的是WebView和原生相结合的方式。

技术原理

本文将从jsbridge的原理、实现、双向通信、接入方式和H5的嵌入方式进行详细阐述。

jsbridge的原理

客户端能对WebView中请求进行拦截,都有相应的API:

Android:

// Android: shouldoverrideurlloading public boolean shouldOverrideUrlLoading(WebView view, String url){  //读取到url后自行进行分析处理    //如果返回false,则WebView处理链接url,如果返回true,代表WebView根据程序来执行url  return true;}

IOS:

// IOS: shouldStartLoadWithRequest - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {  NSURL *url = [request URL];     NSString *requestString = [[request URL] absoluteString];  //获取url scheme后自行进行处理

因此,在页面中可以通过iframe加载src的方式触发相应的捕获函数,在捕获函数中可以对url中的参数进行解析;此外,Android还可以通过重写OnJSPrompt方法,对调用Prompt进行拦截,同样能实现通信的目的。

示例:

调起ios端:

function iosInvoke(scheme) {  var elem = document.createElement('iframe');  var body = document.body || document.getElementsByTagName('body')[0];  elem.style.display = 'none';  elem.src = scheme;  body.appendChild(elem);  setTimeout(function () {    body.removeChild(elem);    elem = null;  }, 0);}

调起android端:

function androidInvoke(scheme) {  var androidJsBridge = window.Bdbox_android_jsbridge;  if (androidJsBridge && androidJsBridge.dispatch) {    androidJsBridge.dispatch(scheme);  } else {    var re = window.prompt('BdboxApp:' + JSON.stringify({      obj: 'Bdbox_android_jsbridge',      func: 'dispatch',      args: [scheme]    }));    return re;  }}            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选