Hybrid App 技术详解

前言

在移动应用开发中，Hybrid App成为了多个行业领域的主流方案之一。其制作方式采用Web App和Native App相结合的开发技术，旨在将Web技术的跨平台兼容性和Native App的高显度使用体验相结合。

定义

Hybrid App 是一种通过WebView将Html、CSS、JavaScript等WebView支持的Web技术组合形成的界面进行包装，在与WebView打交道的同时，能够完全利用设备硬件组件提供丰富功能的应用程序。同时，Hybrid App也是指适应不同操作系统、浏览器的移动应用，并提供离线缓存等特殊功能的应用程序开发技术和开发模式。它通过App嵌套浏览器加载Web页面，提供原生应用的用户体验。

优势

相比于Native App 和 Web App优势有很多：

1.开发成本低：Hybrid App一套代码可以跨平台使用，而不必双倍开发移动应用及桌面端网站。

2.维护简单：Hybrid App采用前端技术，如HTML、JS来搭建移动应用及页面，对于像js及HTML这些前端人员更加便捷和友好。

3.跨平台兼容性强：一套代码只需要少许改动即可在各种操作系统、浏览器及各个平台运行，适应Android、IOS等多种平台。

4.离线缓存：Hybrid App使用了类似原生App的本地存储技术，并提供了通过网站离线访问页面的选项。

5.具有良好的用户体验，与Native App相近的效果，能够快速地反馈交互行为。

技术实现

Hybrid App可以说是Native App和Web App的结合，本质上仅是Web App内嵌于Native App中。

一般的开发流程如下：

1.搭建组件

首先需要做的便是将Web App和Native App 集成起来。因此要在原生App中创建一个webview引用HTML内容并在App中运行。

Android 平台

在android端，因为系统自带WebView,所以我们不需要自己再去配置，只需要直接使用即可。可以在XML文件中添加WebView:

<WebViewandroid:id="@+id/web_view"android:layout_width="match_parent"android:layout_height="match_parent"/>

同时，还需要编写Java代码处理 动态加入UIComponent 进webView:

public class MainActivity extends Activity {private WebView webView;public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);webView = (WebView) findViewById(R.id.web_view);webView.setWebChromeClient(new WebChromeClient() {public void onProgressChanged(WebView view, int progress) {}});webView.loadUrl("http://myurl.html");}
}

IOS 平台

在iOS端，需要使用UIWebView和WKWebKit,下面采用UIWebView作为解释器。

- (void)viewDidLoad {[super viewDidLoad];UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://myurl.html"]];[webView loadRequest:request];[self.view addSubview:webView];
}

2.实现联系

接下来要做的便是单向绑定两个应用以使它们之间能相互访问。

Native 应用通过 JavaScript 核心类库（如：cordova.js）将 API 注入到 Hybrid 应用中，从而允许JavaScript代码调用 Native 函数、访问原生方法等。

Android 平台

通过WebView的addJavascriptInterface() 方法把当前Native对象与JavaScript联系起来，

public class MyJsBridge {private Context mContext;public MyJsBridge(Context context) {this.mContext = context;}@JavascriptInterfacepublic void showToast(String message) {Toast.makeText(mContext.getApplicationContext(), message, Toast.LENGTH_SHORT).show();}
}

并执行JavaScript命令：

var bridge = window.MyJsBridge;
bridge.showToast('Hello World');

IOS 平台

userContentController代表整个注入部分。 它管理着一组具备特定名称的JavaScript消息处理程序，可在远程调用时触发。

为了创建一个所需的项，我们必须先为它定义初始名称，然后通过WebKit API为UIWebView元素加载一个用户脚本。这个脚本将立即与HTML文档一起注入，并自动建立接口。

- (void)viewDidLoad 
{[super viewDidLoad];UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds]webView.delegate = self;NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"https://myUrl.html"]];[webView loadRequest:request];[self.view addSubview:webView];NSString *JSFunctionName = @"showToast";webView.configuration.userContentController = [[WKUserContentController alloc] init];// Inject JavaScript CodeNSString* scriptSource = [NSString stringWithFormat:@"""function calledFromOutside() { ""window.webkit.messageHandlers.%@.postMessage('Hello World!');""}", JSFunctionName];WKUserScript *script = [[WKUserScript alloc] initWithSource:scriptSource injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:NO];[webView.configuration.userContentController addUserScript:script];// Register JSFunctionName[webView.configuration.userContentController addScriptMessageHandler:self name:JSFunctionName];
}- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {if ([message.name isEqualToString:@"showToast"]) {NSString *messageBody = message.body;UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Message from JavaScript" message:messageBody preferredStyle:UIAlertControllerStyleAlert];UIAlertAction *action = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];[alert addAction:action];[self presentViewController:alert animated:YES completion:nil];}
}
javascript
function showToast() {window.webkit.messageHandlers.showToast.postMessage('Hello World');
}

3.双向数据绑定

完成上述操作后，我们需要实现双向数据绑定。这样，我们便可以在Native端调用JavaScript函数，同时也可以在JavaScript端调用Native函数。

Android 平台

在Java代码中调用JavaScript函数：

webView.loadUrl("javascript:showAlert('Hello from Android')");
//在JavaScript代码中调用Java函数：
javascript
function showAlert(message) {alert(message);
}

IOS 平台

在Objective-C代码中调用JavaScript函数：

[webView evaluateJavaScript:@"showAlert('Hello from iOS')" completionHandler:nil];
//在JavaScript代码中调用Objective-C函数：
javascript
function showAlert(message) {alert(message);
}

这样，我们便实现了Hybrid App的基本功能。通过这种方法，我们可以轻松地将Web App和Native App结合起来，实现跨平台兼容性和良好的用户体验。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！