`
AnhuiOSS技术分享
  • 浏览: 34923 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论
阅读更多

移动应用开发的方式:

移动应用开发的方式,目前主要有三种:

  1. Native App: 本地应用程序;
  2. Web App:网页应用程序;
  3. Hybrid App:混合应用程序;

Native App和Web App都有自己的优缺点,而Hybrid App在具备Native App和Web App优点的同时,也继承了两者的缺点。

 

国内外已经有一些中间件支持混合应用开发,例如:PhoneGap,AppCan,Titanium,Rexsee等,下图可以看到它们之间的一个对比:



 混合应用程序实现原理:

在本地应用程序中添加WebView来显示HTML5(CSS、JavaScript)部分的内容,逻辑操作则集中在JavaScript和本地代码中实现。通过JavaScript来实现本地代码和HTML5之间的互操作。这也是上述一些中间件实现的基本原理。

 

在Android平台上的实现:

首先我们需要一个WebView对象,然后对其属性做一些设置,具体如下:

 

		// 禁止显示垂直条
		webView.setVerticalScrollBarEnabled(false);
		
		// 允许WebView执行JavaScript
		webView.getSettings().setJavaScriptEnabled(true);
		
		// 自定义JavaScript处理
		webView.setWebChromeClient(new CustomWebChromeClient());
		
		// 绑定对象到JavaScript,这样就可以在JS中访问该对象含有的方法
		webView.addJavascriptInterface(this, "android");
		
		// 使能DOM存储API
		webView.getSettings().setDomStorageEnabled(true);
		
		// 加载HTML文件
		webView.loadUrl("file:///android_asset/game_poker.html");
 
下面给出CustomWebChromeClient的实现:

 

	class CustomWebChromeClient extends WebChromeClient {

		@Override
		public boolean onJsAlert(WebView view, String url, String message,
				JsResult result) {
			
			// 处理Alert显示效果和操作逻辑
			AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());
			builder.setTitle("标题");
			builder.setMessage(message);
			builder.setPositiveButton("确定",
				new OnClickListener() {
					@Override
					public void onClick(DialogInterface dialog,
							int which) {
							webView.loadUrl("javascript:confirm();");
					}
				});
			builder.setOnKeyListener(new OnKeyListener() {
				@Override
				public boolean onKey(DialogInterface dialog, int keyCode,
						KeyEvent event) {
					return true;
				}
			});
			builder.setCancelable(false);
			AlertDialog dialog = builder.create();
			dialog.show();
			result.confirm();
			return true;
			
		}

		@Override
		public boolean onJsConfirm(WebView view, String url, String message,
				JsResult result) {
			// 处理Confirm显示效果和操作逻辑
			return super.onJsConfirm(view, url, message, result);
		}

		@Override
		public boolean onJsPrompt(WebView view, String url, String message,
				String defaultValue, JsPromptResult result) {
			// 处理Prompt显示效果和操作逻辑
			return super.onJsPrompt(view, url, message, defaultValue, result);
		}
		
	}
如果需要对Alert做不同的UI效果显示和逻辑处理,那么需要在CustomWebChromeClient中做相应处理,最简单的一种方式是可以在onJsAlert中去区别每个显示,而从message中获取这样的标志,可以简单满足这个要求。如果想从message中获取这样的标志,需要事前定义一个协议(协议的复杂程度根据项目需要可以随意定义),例如:::IntegerNumber::,代码中需要查找到“::”包含的内容,并解析得到然后做字符串分割,拿到标志和真正的显示信息即可。当然也有其它方式来完成这样的信息传递,在此不再赘述。

 

对信息的解析,以下是一种方式:

 

	/**
	 * 
	 * @param mixedString 由标志和信息组合的字符串
	 * @return result[0] : 标志 result[1] : 信息
	 * @throws Exception
	 */
	public String[] getFlagAndMessage(String mixedString) throws Exception {
		
		String result[] = new String[2];
		
		Pattern pattern = Pattern.compile("::(.+?)::");
        Matcher matcher = pattern.matcher(mixedString);
        while (matcher.find()) {
                result[0] = mixedString.substring(matcher.start() + 2, matcher.end() - 2);
                result[1] = mixedString.substring(matcher.end(), mixedString.length());
        }
        
        return result;
		
	}
 
下面要做的就是根据result[0]来做不同的处理了。

 

 如果WebView所在的Activity含有如下方法:

 

	public String getVersionName() {
	    try {
	    	PackageInfo pinfo = getPackageManager().getPackageInfo(getPackageName(), PackageManager.GET_CONFIGURATIONS);
	    	return pinfo.versionName;
	    } catch (NameNotFoundException e) {
	    	e.printStackTrace();
	    }
	    return null;
	}
 
那么我们在JavaScript中的调用可以像下面的格式:

 

function displayVersionName() {
	alert(android.getVersionName());
}
 
遇到问题:在从JavaScript中调用Confirm时,返回结果是true或者false,经常根据这个返回结果来做不同操作。当获得返回结果有误时,可以尝试使用WebView调用相应的JavaScript代码来解决。
格式如下:
webView.loadUrl("javascript:function-name(parameters ...);");

 

如果是费时操作,也可以采用类似方式进行处理来达到想要的效果。

 

如果你认为这样定制和JS相关的Alert,Confirm,Prompt比较麻烦,而且不通用,那么自定义具有这样功能的显示效果是个不错的选择!:)

 

在iOS平台上的实现: 

和在Android平台上的实现步骤类似,同样也是需要一个WebView对象,并对属性做一些设置,如下:

 

    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"game_poker" ofType:@"html"];
    NSURL *url = [NSURL fileURLWithPath:filePath];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [webView loadRequest:request];

 

如果想定制JavaScript弹出的Alert,Confirm等对话框,可以使用类别来实现,也可以通过Objective-C和JavaScript代码相互调用来实现,而后者也是一些第三方中间件采用的方式。

 

关键的两个方法:

 

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

 

关于这两个方法的具体如何使用,在此不在赘述,网络上有比较多的资料!:)

 

通过第一个方法来实现从JavaScript中调用,然后可以在Objective-C中对不同类型的请求做操作,通过第二个方法可以实现从Objective-C代码调用JavaScripte代码,从而实现两者的互动。从JavaScript中调用第一个方法,需要设置window.location属性,然后在第一个方法里面对做相应处理:

 

NSString *mainDocumentURL = [[request mainDocumentURL] relativePath];

 

但是要注意,window.location的字符长度是有限制的,不要准备过长的字符串,否则会被自动截断。

 

混合移动应用程序开发时,如果需要对JavaScript弹出的Alert,Confirm做定制,那么最好采用在HTML5+CSS+JavaScript重新定义的形式,而不要在Java和Objective中来做处理,这样可以让JS和本地代码之间的耦合降到最低,从而更方便的在不同平台上做移植。

 

混合移动应用在响应速度上受到浏览器执行JavaScript速度的影响。

 

为了控制页面缩放和显示时的宽度,需要在HTML中添加如下代码:

 

<meta name="viewport" content="user-scalable=no, width=device-width" />

 

采用上述方法,在Android和iOS上的简单扑克游戏效果如下(只有iOS截图):



 

 

 

 

 

 更多详细内容,请参考我们公司网站:http://www.anhuioss.com

 

 

  • 大小: 231.9 KB
  • 大小: 204.1 KB
  • 大小: 200.7 KB
  • 大小: 155.1 KB
  • 大小: 208.2 KB
  • 大小: 47.7 KB
分享到:
评论

相关推荐

    hybrid混合开发

    同时,混合应用的维护和更新相对简单,用户可以享受到类似于原生应用的良好用户体验,同时具备跨平台特性,这意味着开发者可以将其发布到多个应用商店,满足不同操作系统用户的需求。 混合开发的挑战主要来自于其...

    Android离线webview调试工具,开发H5混合应用必备

    它不仅避免了因网络问题导致的空白页面,而且适用于所有Android机型,无论你是开发简单的网页应用还是复杂的混合应用,它都能成为你的得力助手。 该工具名为jh5_debug_view_v2.0.2,版本号表明它已经过多次迭代和...

    混合开发搭建教程

    在移动应用开发领域,混合开发是一个将Web技术与原生开发优势相结合的技术路线。通过混合开发,开发者可以使用HTML、CSS和JavaScript等前端技术来构建跨平台的移动应用,同时又能通过插件机制访问移动设备的原生功能...

    HiApp一个简单而有趣基于Framework7开发的混合应用

    总结,`HiApp`项目充分体现了混合应用开发的优势,既利用了Web技术的灵活性,又享受到了原生应用的性能。通过学习和实践`HiApp`,开发者可以掌握`Framework7`和`Cordova`的用法,进一步提升混合应用开发能力。在移动...

    移动应用混合开发

    它能大幅减少跨平台移动应用开发的工作量(相比原生代码开发能减少至少50%),并且代码结构清晰、简单易懂。同时React Native框架采用模块化的结构,使应用版本的更新迭代非常简单。随着它的日趋成熟,React Native...

    Android混合开发的基本框架JavaScript和java之间的桥梁

    在Android应用开发中,混合开发模式逐渐成为主流,它结合了原生开发的高性能和Web开发的便捷性。本文将深入探讨"Android混合开发的基本框架JavaScript和Java之间的桥梁"这一主题,带你理解如何通过JavaScript与Java...

    基于Flutter 3.x 实战跨平台仿抖音App混合开发

    本课程会手把手教你用简单、高效且通用的方式,将原生项目迁移成一个Flutter/原生混合开发的项目,从双平台开发转变为跨平台开发,大大提高项目开发效率。 学好 Flutter,它的灵活、高效,将在你的工作实践中显现极...

    jsp应用开发详解.zip

    【JSP应用开发详解】 JavaServer Pages(JSP)是一种基于Java的技术,用于创建动态网页。JSP在Web开发领域中扮演着重要角色,因为它允许开发者将HTML代码与Java代码混合编写,使得网页内容能够根据服务器端的数据...

    Java与易语言混合开发的注意要点

    在移动应用开发中,这种混合开发方式尤为常见。 首先,要进行混合开发,需要确保Java和易语言环境的正确配置。安装Java和易语言的开发环境,包括设置相应的环境变量,以便于在命令行中调用编译器和运行时环境。接着...

    一个移动应用开发工具完全基于存储在JSON文件中的HTML创建App

    标签“JavaScript开发-混合移动开发”揭示了这个工具是使用JavaScript语言,并且是用于混合移动应用开发的。混合移动应用开发结合了原生应用的性能和Web应用的开发效率,它通常利用像Cordova或React Native这样的...

    《Android应用开发揭秘》附带光盘代码.

    《Android应用开发揭秘》全部实例源代码,配合《Android应用开发揭秘》使用 前言  第一部分 准备篇  第1章 Android开发简介  1.1 Android基本概念  1.1.1 Android简介  1.1.2 Android的系统构架  1.1.3 ...

    《Android应用开发揭秘》源码

     杨丰盛,Android应用开发先驱,对Android有深入研究,实战经验极其丰富。精通Java、C、C++等语言,专注于移动通信软件开发,在机顶盒软件开发和MTK平台软件开发方面有非常深厚的积累。2007年获得中国软件行业协会...

    SD大会精品讲座:混合语言开发

    混合语言开发是一种灵活且高效的开发方式,它不仅能够满足现代应用系统的多样化需求,还能帮助开发团队更好地应对未来的挑战。然而,成功实施混合语言开发需要深思熟虑地规划和精心管理。通过合理选择语言组合,构建...

    基于快应用开发的内涵车站APP

    【基于快应用开发的内涵车站APP】是一种利用快应用框架技术构建的移动应用程序,它结合了JavaScript开发和混合移动开发的特性,旨在提供快速、便捷的用户体验,同时减少了传统原生应用的安装和更新繁琐过程。...

    华为分布式日历应用开发实践.pdf

    通过支持JS和Java的混合编程,HarmonyOS应用开发可以充分利用各自的优势,达到最佳效果。 #### 四、总结 华为分布式日历应用开发实践充分展示了HarmonyOS在构建跨设备应用方面的强大能力。通过遵循MVVM架构模式、...

    android与phonegap混合开发之相互跳转

    在移动应用开发领域,PhoneGap和Android是两种广泛使用的平台。PhoneGap是一种基于HTML5、CSS3和JavaScript的跨平台框架,它允许开发者使用Web技术创建原生移动应用。而Android则是Google主导的开源操作系统,提供了...

    Delphi开发B.S数据库应用系统教程

    ### Delphi开发B.S数据库应用系统教程 #### Delphi编程语言概述 Delphi是一种功能强大的编程语言,基于Object Pascal,并经过扩展以适应现代软件开发的需求。作为一种通用编程语言,Delphi不仅保留了Pascal的强大...

Global site tag (gtag.js) - Google Analytics