0x00 前言

前一段时间分别读了两篇博客,分别是叶小钗兄的《浅谈Hybrid技术的设计与实现》以及徐磊哥的《从技术经理的角度算一算,如何可以多快好省的做个app》。受到了很多启发,同时也有自己的一些看法。因为目前三大平台(虽然wp的份额相对于iOS以及android来说十分可怜)的开发语言分别是Objective-C(swift)、Java以及C#,先不论平台的其他特性如何,单单是各个平台开发语言就已经不同了。而往往一个App要同时登陆不同的多个平台,那么如何能够快速的开发跨平台的App,尽量使得代码复用便成了一个开发者不得不面对的问题。

正如叶小钗兄在他的那篇博文中所说的:“这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而H5的低成本、高效率、跨平台等特性马上被利用起来形成了一种新的开发模式:Hybrid APP。”——利用Web配合Native开发的Hybrid APP出现了。所以在正式介绍C#开发跨平台App之前,我觉得有必要先从不使用C#语言进行开发的另外两个平台(iOS~OC、Android~Java)的角度来聊聊Hybrid。需要提醒各位注意的是本文中我所使用的一些web端代码来自叶小钗兄所分享的web端“简单Hybrid框的实现”的代码 。

本文所使用的iOS端Hybrid的代码可以在这里查看:

https://github.com/chenjd/iOS-Hybrid-Sample

0x01 你好,WebView

由于Hybrid开发的Web端本质上是一些网络页面,因此在使用App的相关功能时相当于利用原生平台去访问一些网页。正是因为内容来源于网页而不是依赖于平台,因此也就变相的实现了跨平台。那么对于iOS和Android来说,它们需要在Native端提供一个用来访问页面的容器——WebView。

iOS的UIWebView

在iOS平台我们会使用UIKit.framework的UIWebView来访问页面。利用UIWebView控件,iOS平台既可以获取网络资源也可以加载本地的HTML代码。这里主要会使用的是以下三个方法:

UIWebView控件中加载资源的方法
- (void)loadData:(NSData *)data
MIMEType:(NSString *)MIMEType
textEncodingName:(NSString *)encodingName
baseURL:(NSURL *)baseURL
- (void)loadHTMLString:(NSString *)string
baseURL:(NSURL *)baseURL
- (void)loadRequest:(NSURLRequest *)request

下面我们就利用这些方法,在iOS平台上使用UIWebView控件来访问叶小钗兄所提供的web页面。

//ViewController.h
@interface ViewController : UIViewController
{
UIWebView *webView;
} //ViewController.m
- (void)viewDidLoad {
[super viewDidLoad];
webView = [[UIWebView alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; //load yexiaochai's html
NSBundle *thisBundle = [NSBundle mainBundle];
NSString *path = [thisBundle pathForResource:@"webapp/hotel/index" ofType:@"html"];
NSURL *baseURL = [NSURL fileURLWithPath:path];
NSURLRequest *urlReq = [NSURLRequest requestWithURL:baseURL];
[self.view addSubview: webView];
[webView loadRequest:urlReq];

在iOS模拟器中运行,我们可以看到在Native端通过UIWebView已经加载出了Web端的内容。

当然,此时我们只是迈出了第一步,即在Native端渲染出Web端的内容。但是还没有涉及到Native和Web之间的交互。既然说道了Native和Web交互,那么便不得不提的是另外两个重要的方法:

UIWebView控件中涉及Native和Web交互的方法

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
- (BOOL)webView:(UIWebView *)webView
shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType

除此之外,iOS的UIWebView还有一些页面能否前进后退的属性以及控制它们前进后退的方法:

UIWebView控件中关于页面前进后退的属性和方法

canGoBack
canGoForward
- (void)goBack
- (void)goForward

初步介绍完iOS的UIWebView之后,再让我们来看一看Android平台上的Web页面的容器——WebView。

Android的WebView

在Android的部分,我们首先需要知道的是在Andorid平台上我们使用的是android.webkit下的WebView来访问页面。和iOS平台类似,Andorid平台是通过利用WebView来实现获取网络资源或是加载本地的HTML代码的。需要提醒各位注意的一点是,为了使Activity能够正确的连接上网络,在使用WebView加载远程资源时务必确保在AndroidManifest文件中开启INTERNET权限:

<uses-permission android:name="android.permission.INTERNET" />

而WebView加载资源的方法主要包括以下几个:

WebView加载资源的方法
public void loadUrl(String url);
public void loadUrl(String url, Map<String, String> additionalHttpHeaders);
public void loadData(String data, String mimeType, String encoding);
public void loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl);

下面我们就利用这些方法,在Andorid平台上使用WebView控件来访问叶小钗兄所提供的web页面。

首先我们要在Native端添加一个WebView控件,通过在layout文件中添加<WebView>就可以十分容易的实现。

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

当然,除了在layout中添加<WebView>元素之外,我们可以直接通过代码在Activity设置为WebView,

WebView webview = new WebView(this);
setContentView(webview);

不过下文还是假设我们在layout中添加了<WebView>元素。
此时,我们在Native端已经准备好了盛放Web页面的容器。接下来便是加载Html资源了。

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("file:///android_asset/webapp/hotel/index.html");

到这里我们便再次将叶小钗兄的Web页面渲染了出来。
和上文描述iOS类似,此时我们也仅仅是迈出了第一步,即在Native端渲染出Web端的内容。但是还没有涉及到Native和Web之间的交互。不过Android平台和iOS平台当然也存在着区别,例如默认状态下Andorid的WebView是不支持js的,所以如果我们仅仅是将一个web页面作为一个没有交互的静态UI是可以的,但是如果想要使用js进而实现Native和Web的交互,那么还需要多设置一些内容。这里我们需要获取WebView的WebSettings对象,在WebSettings中开启对js的支持。

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

好了,开启了对js的支持,也就是开启了对Native和Web交互的支持。而Android平台主要通过以下方法来实现Native调用web以及web调用Native的:

  • public void evaluateJavaScript(String script, ValueCallback<String> resultCallback);方法可以在Native端调用JS代码,当然这里存在一个Android版本的问题,下文还会详细说明。
  • 另外我们需要使用JavascriptInterface.java,通过这个interface来完成Web调用Native的实现。

除此之外,Android的WebView当然还有和iOS的UIWebView类似的用来控制页面行为的一些方法:

  1. canGoBack();
  2. goBack();
  3. canGoForward();
  4. goForward();

0x02 Native端调用JS

在上一小节中我分别向大家介绍了iOS和Android在Native端是如何做到既能够访问Native本地资源,又能够访问远程资源的。这样在App开发的过程中将部分常常需要更新的模块以Web的形式创建,不仅仅避免了用户升级App整包替换的情况,又能够比较快速的实现多平台更新迭代

而这一切的背后都离不开Native和Web之间的交互。这种交互说起来无非是Native调用Web的方法,或是Web调用Native的方法。那么在本小节,我就和大伙分别聊聊iOS和Android是如何调用Web中的方法的。

iOS Native调用JS

//ViewController.h
@interface ViewController : UIViewController
{
UIWebView *webView;
NSMutableString *msg;
UITextField *msgText;
UIButton *nativeCallJsBtn;
} //ViewController.m
- (void)createNativeCallJsSample{
[webView loadHTMLString:@"<html><head><script language = 'JavaScript'>function msg(text){alert(text);}</script></head><body style=\"background-color: #0ff000; color: #FFFFFF; font-family: Helvetica; font-size: 10pt; width: 300px; word-wrap: break-word;\"><button type='button' onclick=\"msg('Js调用')\" style=\"margin:30 auto;width:100;height:25;\">web button</button></body></html>" baseURL:nil];
//创建一个UITextField,用来在native调用js时向js的函数传送参数
[self createNativeTextField];
//创建一个按钮,用来演示Native调用js
[self createNativeCallJsButton];
}
...
//native 调用 js
- (void)btnClickMsg{
[msg setString:@"msg('"];
[msg appendString:@"native调用js:"];
[msg appendString:[msgText text]];
[msg appendString:@"')"];
[webView stringByEvaluatingJavaScriptFromString:msg];
}

我们首先使用UIWebView的loadHTMLString方法,直接加载了一段Html代码。其中的JS部分定义了一个函数function msg(text){alert(text);},即调用alert方法。而在Native端,我们使用UIWebView的stringByEvaluatingJavaScriptFromString方法来实现对JS的调用。

最左边的截图是直接点击Web页面中HTML代码生成的Button之后触发的JS的msg方法。

而中间和右边的截图,则是通过Native的UITextField控件获得用户的输入之后再通过Native的按钮控件调用btnClickMsg方法,进而调用stringByEvaluatingJavaScriptFromString方法之后,从Native端执行了JS的msg方法。

Android Native调用JS

Andorid平台与iOS在调用JS的部分十分类似。不过需要提醒各位注意两点,其一就是我们在上文提过的,Android的WebView默认状态下没有开启和JS交互的功能。这里我们需要获取WebView的WebSettings对象,在WebSettings中开启对js的支持。第二点需要注意的是Android的版本问题。在Kitkat(4.4)之后,我们可以使用evaluateJavaScript方法来调用JS,而之前的版本我们直接调用WebView的loadUrl的方法,将JS代码作为参数传入。

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
...
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
//开启js支持
webSettings.setJavaScriptEnabled(true);
myWebView.loadData("<html><head><script language = 'JavaScript'>function msg(text){alert(text);}</script></head><body><button type='button' onclick= 'msg()'>web button</button></body></html>", "text/html", "utf-8"); evaluateJavascript(myWebView);
} ....
//Native调用JS
public static void evaluateJavascript(WebView mWebview) {
//判断版本调用不同的方法
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
mWebview.evaluateJavascript("msg('native call js')", null);
} else {
mWebview.loadUrl("msg('native call js')");
}
}

0x03 Web调用Native

Hybrid交互设计

我想行文至此,各位应该已经明白了两大平台(iOS和Android)的Native端是如何调用JS代码的了。那么本小节则主要来聊一聊Web是如何调用Native的。Web和Native之间交互的第一步便是要约定好格式。由于我直接使用了叶小钗兄的Web部分,因此按照他设计的Web请求Native的模型:

requestHybrid({
//创建一个新的webview对话框窗口
tagname: 'hybridapi',
//请求参数,会被Native使用
param: {},
//Native处理成功后回调前端的方法
callback: function (data) {
}
}); //index.html中的实际例子
requestHybrid({
tagname: 'forward',
param: {
topage: 'webapp/flight/index',
type: 'webview'
}
});

而Native端会收到一个URL,例如:

hybrid://forward?t=1447949881120&param=%7B%22topage%22%3A%22webapp%2Fflight%2Findex%22%2C%22type%22%3A%22webview%22%7D
十分清楚,这里我们交互使用的schema是hybrid://,在Native部分会监控Webview发出的所有schema://请求,然后分发到“控制器”hybridapi处理程序,Native控制器处理时会需要param提供的参数。下面就让我们来分别看一下iOS和Android是如何使用Web调用Native的吧。(这里我只是简单的实现了和叶小钗兄web交互的iOS部分,Android部分演示的是一个简单的Web调用Native的例子)。

iOS Web调用Native

在iOS平台,我们会用到shoudStartLoadWithRequest这个方法来捕获Web所发出的请求。下面我们就来看一段简单的演示吧。

//按照和web端规定的格式,获取数据
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSURL * url = [request URL];
if ([[url scheme] isEqualToString:@"hybrid"]) {
NSString *actionType = request.URL.host;
//从url中获取web传来的参数
NSDictionary *actionDict = [self getDicFromUrl : url];
//根据web的指示,native端相应的做出回应
[self doActionType:actionType : actionDict];
return NO;
}
return YES;
} //从url中获取web传来的参数
- (NSDictionary *) getDicFromUrl : (NSURL *)url{
NSArray* paramArray = [[url query] componentsSeparatedByString:@"param="];
NSString* paramStr = paramArray[];
NSString *jsonDictString = [paramStr stringByRemovingPercentEncoding];
NSData *jsonData = [jsonDictString dataUsingEncoding:NSUTF8StringEncoding];
NSError *e;
NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:jsonData options:nil error:&e];
return dict;
} //根据web的指示,native端相应的做出回应
-(void) doActionType : (NSString*) type : (NSDictionary*) dict{ if ([type isEqualToString:@"forward"]) {
[webView goForward];
}
//打开一个新的Web
if([dict[@"type"] isEqualToString: @"webview"]){
[self web2Web: dict[@"topage"]];
}
//打开一个Native页面(我简化为了控件)
else if ([dict[@"type"] isEqualToString: @"native"]){
[self web2Native];
}
}

最左边的图是最开始的Web页面,点击“新开webview...”按钮之后,Native端又打开了一个新的Web页面,即中间的图所示。

最右边的图演示的是点击“跳转native...”按钮之后,Native端创建了一个Native的UI控件。

Android Web调用Native

Android平台上Web调用Native要比iOS稍微复杂一些。因为在Android平台上我们需要借助JavaScriptInterface来实现Web调用Native的功能。

下面就让我们演示一个小例子,不让Web调用JS的alert,相反使用Web调用Native的Dialog来显示提示吧。

首先我们要在Android应用中引入JavaScriptInterface。

...
...
import android.webkit.JavascriptInterface; public class WebAppInterface {
Context mContext; WebAppInterface(Context c) {
mContext = c;
} @JavascriptInterface
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
}

之后,我们使用WebView的 addJavascriptInterface()方法将这个类和JS代码绑定,作为Web调用Native的桥梁。

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

最后,在Web端也做相应的实现。点击Web中的button会调用Native的showToast方法。

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>

0x04 让Web的归Web,Native的归Native

到此,在没有使用C#作为开发语言的两大平台上使用Hybrid的方式令Web和Native交互的内容就介绍完了。但是,不知道各位读者是否和我有相同的感觉呢?那就web和native之间的界线仍然十分明显。

事实上我认为Hybrid的最大价值其实并不在于跨平台。相反,在一些常常变动的模块的热更新的问题上使用这种将Web和Native结合的Hybrid方式是十分适合的。

这是因为它并没有从本质上解决所谓的跨平台的问题,而是采用了一个十分讨巧的方式或者说是逃避问题的方式超脱于平台的范畴。而这也导致了Hybrid的缺点,比如Hybrid体验和Native相比是有距离的。因此,Hybrid是一种优秀的热更新技术,同时也是一个不完美的跨平台方案。

至于解决跨平台问题更好的方案,就交给Native端自己去想办法吧。比如三大移动平台都使用同一种语言甚至是同一个IDE进行Native部分的开发,看上去似乎就是一个很美妙的方案。如果再加上利用Hybrid方式带来的热更新加持,结果就更棒了。

所以,就让Web的归Web,Native的归Native吧。

未完待续~~~~~

利用C#开发移动跨平台Hybrid App(一):从Native端聊Hybrid的实现的更多相关文章

  1. Hybrid App 和 React Native 开发那点事

    简介:Hybrid App(混合模式移动应用)开发是指介于Web-app.Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开 ...

  2. 基于webview的Hybrid app和React Native及html5

    基于webview的Hybrid app和React Native及html5 React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iO ...

  3. 移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处

    因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H ...

  4. Hybrid APP基础篇(一)->什么是Hybrid App

    最新更新 一个开源的快速混合开发框架:https://github.com/quickhybrid/quickhybrid Android.iOS.JS三端内容初步都已经完成,有完善的设计思路.教程以 ...

  5. 【Hybrid App】Hybrid App开发实战

    [引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员, 技术成熟度,时间,项目需求等一堆的因素.因此,开发App的方案已经变得越来越 ...

  6. Hybrid App开发实战

    Hybrid App开发实战 作者 李秉骏 发布于 九月 04, 2013 | [引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员 ...

  7. Hybrid APP混合开发的一些经验和总结

    http://www.cnblogs.com/kingplus/p/5588339.html 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经 ...

  8. 【Hybrid App】Hybrid App开发 四大主流移平台分析

    转自http://dev.yesky.com/238/34657738.shtml Hybrid App在过去的两年中已经成为移动界的核心话题,但是作为一名Web开发者来说要如何站在移动互联网的浪潮之 ...

  9. Hybrid App混合模式开发的了解

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

随机推荐

  1. Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作

    Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 1.实施前准备工作 1.1 服务器安装操 ...

  2. Android 获取meta-data中的数据

    在 Android 的 Mainfest 清单文件中,Application,Activity,Recriver,Service 的节点中都有这个的存在.很多时候我们可以通过 meta-data 来配 ...

  3. 客户端的验证插件validator

    简单,智能,令人愉悦的表单验证~~~ 官方文档:http://www.niceue.com/validator/ <!DOCTYPE html> <html> <head ...

  4. [WCF]缺少一行代码引发的血案

    这是今天作项目支持的发现的一个关于WCF的问题,虽然最终我只是添加了一行代码就解决了这个问题,但是整个纠错过程是痛苦的,甚至最终发现这个问题都具有偶然性.具体来说,这是一个关于如何自动为服务接口(契约 ...

  5. OVS local network 连通性分析 - 每天5分钟玩转 OpenStack(132)

    前面已经创建了两个 OVS local network,今天详细分析它们之间的连通性. launch 新的 instance "cirros-vm3",网络选择 second_lo ...

  6. WebApi接口 - 响应输出xml和json

    格式化数据这东西,主要看需要的运用场景,今天和大家分享的是webapi格式化数据,这里面的例子主要是输出json和xml的格式数据,测试用例很接近实际常用情况:希望大家喜欢,也希望各位多多扫码支持和点 ...

  7. 关于Visual Studio 未能加载各种Package包的解决方案

    问题: 打开Visual Studio 的时候,总提示未能加载相应的Package包,有时候还无法打开项目,各种提示 解决方案: 进入用户目录 C:\Users\用户名\AppData\Local\M ...

  8. C#发送邮箱

    之前自己从来没有做过发送邮箱的功能,前段时间项目需要,在找了很多帖子之后,终于实现了. 之后有整理了一下,写了一个类.直接给类传递信息,就可以发送了. 这里还需要说明的是,发送邮箱需要开通POP3/S ...

  9. Mysql - 游标/动态sql/事务

    游标这个在我目前的项目里面用的还不多, 但是其功能还是很强大的. 动态sql以前都没用过, 是跟着富士康(不是张全蛋的富土康哦)过来的同事学的. 还是挺好用的. 我的数据库方面, 跟他学了不少. 在此 ...

  10. 【教程】SQLite数据库修复

    SQLite 大家都知道,就不多说了. 有时候数据量大了,或者存储过程中出现异常,数据库就可能会出问题. 这是以前公司产品出现过的问题,导致软件都打不开了,我花了不少时间才解决的,趁现在有空贡献出来. ...