移动应用开发的方式:
移动应用开发的方式,目前主要有三种:
- Native App: 本地应用程序;
- Web App:网页应用程序;
- 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
分享到:
相关推荐
它能大幅减少跨平台移动应用开发的工作量(相比原生代码开发能减少至少50%),并且代码结构清晰、简单易懂。同时React Native框架采用模块化的结构,使应用版本的更新迭代非常简单。随着它的日趋成熟,React Native...
适读人群 :web开发人员 只需掌握Web技术就能开发移动应用是不是很爽?有了Ionic之后,App的...√ 涵盖完整的移动应用开发过程 读者需要了解HTML、CSS和JavaScript知识;对于AngularJS,懂一些*好,不懂也没有关系。
HiApp一个简单而有趣基于Framework7开发的混合应用。利用Cordova ,你可以轻松地将其转换为本机iOS应用程序。
混合开发的方式可以利用两种编程语言的优势来提高开发效率、降低学习成本和增强应用安全性。通过本文的介绍,读者可以了解到Java与易语言混合开发的基本原理和方法,以及在实际项目中的应用场景和优势。
《Android应用开发揭秘》全部实例源代码,配合《Android应用开发揭秘》使用 前言 第一部分 准备篇 第1章 Android开发简介 1.1 Android基本概念 1.1.1 Android简介 1.1.2 Android的系统构架 1.1.3 ...
杨丰盛,Android应用开发先驱,对Android有深入研究,实战经验极其丰富。精通Java、C、C++等语言,专注于移动通信软件开发,在机顶盒软件开发和MTK平台软件开发方面有非常深厚的积累。2007年获得中国软件行业协会...
Flutter 跨平台应用开发简单的示例,常见组件效果,路由混合开发示例
《Spring3.x企业应用开发实战》是在《精通Spring2.x——企业应用开发详解》的基础上,经过历时一年的重大调整改版而成的,本书延续了上一版本追求深度,注重原理,不停留在技术表面的写作风格,力求使读者在熟练...
《Spring3.x企业应用开发实战》是在《精通Spring2.x——企业应用开发详解》的基础上,经过历时一年的重大调整改版而成的,本书延续了上一版本追求深度,注重原理,不停留在技术表面的写作风格,力求使读者在熟练...
1.3、混合开发应用场景 1.4、了解混合开发的意义 二、混合开发的核心技术 2.1、混合开发核心技术——JSBridge 2.2、混合开发主流技术框架 2.3、JSBridge实现原理 三、JSBridge的实现方式 3.1、创建Native和Web工程 ...
《Android应用开发揭秘》内容全面,不仅详细讲解了Android框架、Android组件、用户界面开发、游戏开发、数据存储、多媒体开发和网络开发等基础知识,而且还深入阐述了传感器、语音识别、桌面组件开发、Android游戏...
AndyHybrid为您提供了在JavaScript,HTML5和CSS3中开发可安装应用程序所需的功能,而不会遇到困难,并且不会占用大量RAM和CPU时间。 该示例/模板是针对Android 6(棉花糖)构建的。 可以很容易地对其进行修改以使...
第10章 Android应用开发 实例 10.1 情境模式 10.2 文件管理器 10.3 通讯录 10.4 音乐播放器 10.5 天气预报 10.6 个人地图 10.7 Widget日历 10.8 小结 第11 章Android游戏开发实例 11.1 手机游戏开发简介 11.2 游戏...
asp.net开发的精美的简易论坛源码。应用html、xml、php、asp等文件格式混合开发
待办事项忍者列表 简单的应用程序,出于教学目的,介绍了用于混合移动开发的 Ionic 框架。
例如,在第2章“GUI应用程序设计基础”里先介绍了用Qt Creator设计的.ui文件的原理,应用程序如何由.ui文件自动创建界面,再介绍手工代码创建界面的原理,搞清楚两种方法的关联之后,再介绍混合方式灵活设计UI界面。...
您可以使用它快速引导Ionic混合应用程序项目以及这些项目的开发环境。 种子包含一个示例离子应用程序,并被预先配置为安装Ionic框架,Ionic Material和大量开发和测试工具,以实现即时混合移动应用程序的开发。 ...
TodoDev一个简单的Todo应用程序,适用于使用Vuejs,Vuetify和功能强大的Firebase的开发人员。 实时:https://todoteam-3263d.web.app/具有Authentica TodoDev的功能,这是一个简单的Todo应用程序,适用于使用Vuejs,...