开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《PhoneGap精粹:构建跨平台的移动App》——1.3节PhoneGap工作机制

简介:
+关注继续查看

本节书摘来自异步社区《PhoneGap精粹:构建跨平台的移动App》一书中的第1章,第1.3节PhoneGap工作机制,作者 【美】John M. Wargo,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.3 PhoneGap工作机制
PhoneGap精粹:构建跨平台的移动App
正如之前提到的,PhoneGap让开发人员可以使用Web技术(HTML、CSS和JavaScript)为移动设备(智能机和平板电脑)构建原生的应用程序。一名开发人员为移动设备构建Web应用程序,然后使用PhoneGap提供的特殊工具将Web应用程序打包成各个平台的原生应用程序。图1-1揭示了这个打包的过程,在本章后面的部分我们会详细解释其中的细节。


7fcb8eb61f06cedf7dcbb8a43583d02c7ce35580

在打包出来的原生应用程序中,该应用程序的用户界面主要由一个满屏显示的web视图构成。当启动应用程序时,该应用程序会将Web应用程序的启动页(通常是index.html,但你也可以修改为其他的页面)加载到Web视图中,然后将用户操作传入Web视图中,让用户可以与Web应用程序交互。当用户与应用程序的内容(即Web应用程序)交互时,应用程序中的链接或者JavaScript代码可以从随应用程序打包的资源文件中加载其他内容,当可以访问网络时,也可以从Web服务器或者应用程序服务器上获取内容。

对于某些移动平台来说,比如bada、Symbian和webOS,原生应用程序就是Web应用程序。它们没有编译成原生应用程序,然后部署到设备的概念。取而代之的是在设备上运行一个被专门打包的Web应用程序。在后续的章节中,我们会更详细地介绍。

Web视图

Web视图是一个原生应用程序组件,该组件用于显示原生应用程序中的Web内容(通常是HTML页面)。在移动设备中,Web视图本质上是一个可以通过编程方式访问的内置Web浏览器的封装器。

比如,在BlackBerry平台上,Web视图被实现为一个Browser Field对象(使用net.rim. device. api. browser.filed2)。在Android上,通过WebView视图(android.webkit. WebView)实现,还有在iOS上,它是UIWebView(System/Library/Frameworks/UIKit. framework)。
Web应用程序运行在Web视图这个容器中,就像Web应用程序运行在移动Web浏览器中。Web视图也可以显示其他(本地或远程Web服务器上)的HTML页面;内嵌在应用程序中的JavaScript实现了所需的应用程序逻辑、根据页面需要显示或隐藏内容、播放多媒体文件、打开新的页面、执行运算以及向服务器收发内容。应用程序的外观和体验可以通过CSS或者直接在HTML元素中添加设置来实现,比如线、间距、色彩或底纹等属性。在页面中使用图形元素也可以为应用程序提供更好的外观。任何可以通过Web应用程序实现的功能,你都可以用PhoneGap应用程序实现。

通常来说,移动Web浏览器无法像设备上的其他应用程序(比如,通讯录(Contacts)应用程序)那样访问设备端的组件和硬件(加速度计、摄像头、罗盘、麦克风等)。但是典型的原生移动应用程序是会经常使用这些组件的。为了能够创造出有趣的移动应用程序,我们的移动应用程序需要访问这些web容器之外的原生设备组件。PhoneGap提供了一套JavaScript API来满足这些需要,开发人员可以使用这些JavaScript API让运行在PhoneGap应用程序容器中的Web应用程序访问这些设备组件。图1-2在一个较高的层次上说明了其中的原理。


4eb18db87fe7be8c6e88fa4c8f4fd68a2644d640

当开发人员在应用程序中使用PhoneGap实现某个功能时,该应用程序会通过JavaScript调用PhoneGap API,然后应用程序的某个特殊的层会将对PhoneGap API的调用翻译成对应的原生API。比如在BlackBerry上调用摄像头的方法就和在Android上的不一样,所以这个API公共层让开发人员可以对不同平台使用同一接口,该接口会在作为容器的应用程序中被翻译成对应平台的原生API。让我们来看下使用PhoneGap的应用程序,JavaScript代码看上去应该像下面这样:

navigator.camera.getPicture( onSuccess, onFail );

这里我们传入了两个回调函数作为参数:onSuccess和onFail(在后面的章节中我们会详细解释)。

在BlackBerry上,上面这段代码相当于在后端执行了下面的代码:

Player player = Manager.createPlayer("capture://video");
player.realize();
player.start();
VideoControl vc = (VideoControl) player.getControl("VideoControl");
viewFinder = (Field)vc.initDisplayMode(VideoControl.USE_GUI_PRIMITIVE,   
       "net. rim.device.api.ui.Field");
scrnMain.add(viewFinder);
vc.setDisplayFullScreen(true);
String imageType ="encoding=jpeg&width=1024&height=768&quality=fine";
byte[] theImageBytes = vc.getSnapshot(imageType);
Bitmap image = Bitmap.createBitmapFromBytes(imageBytes, 0, imageBytes.length, 5);
BitmapField bitmapField = new BitmapField();
bitmapField.setBitmap(image);
scrnMain.add(bitmapField);
在Android上,对应的代码如下所示:

camera.takePicture( shutterCallback, rawCallback,jpegCallback );
以及在iOS上,代码如下所示:

UIImagePickerController *imgPckr =[[UIImagePickerController alloc] init];
imgPckr.sourceType = UIImagePickerControllerSourceTypeCamera;
imgPckr.delegate = self;
imgPckr.allowsImageEditing = NO;
[self presentModalViewController:imgPckr animated:YES];

虽然这里列出的示例代码并没有涵盖获取图片过程的所有方面(比如处理错误或者处理返回的图片),但是这个示例向我们展示了PhoneGap是如何简化跨平台移动开发的。在PhoneGap支持的移动平台间,开发人员可以使用一个通用的API,PhoneGap会将这次调用翻译成每个平台对应的原生API。这使得开发人员无需掌握大量潜在的技术,让他们可以更专注于应用程序本身而不是如何在不同设备上实现。

目前,PhoneGap支持以下API:

 Accelerometer(加速度计)
 Camera(摄像头)
 Capture(捕获)
 Compass(罗盘)
 Connection(连接)
 Contacts(通讯录)
 Device(设备)
 Events(事件)
 File(文件)
 Geolocation(地理位置)
 Media(多媒体)
 Notification(通知)
 Storage(存储)
随着新标准的演变,PhoneGap项目团队会不断提出其他的API。PhoneGap对于API的实现倾向根据W3C的Device APIs and Policy(DAP)Working Group(www.w3.org/2009/dap)的规范进行实现。该小组致力于“创造一种客户端API,通过该API可以在开发Web应用程序和Web元件时和设备服务(比如日历、通讯录、摄像头等)交互。随着DAP API越来越规范,PhoneGap将会实现DAP API。

随着时间的推移,当移动设备浏览器完全实现DAP API时,PhoneGap就会失去价值。当所有移动浏览器都支持DAP API时,就没有什么功能是需要PhoneGap提供的了,同时PhoneGap也将消失。

Apple和PhoneGap

在iOS应用程序中,Apple对能做什么和不能做什么有着严格的限制。在2009年9月,Apple通过了PhoneGap应用程序(使用PhoneGap框架的0.8版本)。如今,在Apple App Store中已经有许多PhoneGap应用程序了。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
选型宝访谈:什么是APP测试的正确打开方式?
在今天的移动互联网时代,信息系统移动化成为企业CIO/CTO们最关心的话题之一。虽然移动化有很多路径,但相对来说,开发原生APP仍然是性能和体验最佳的一种方式。 但是,开发APP并非易事,尤其是其测试过程,常常令人崩溃。
8998 0
移动APP渗透测试方案 展示5个方面总结3种常见漏洞—转载绿盟科技
移动APP渗透测试方案 展示5个方面总结3种常见漏洞 发布时间:2017年10月26日 10:47    浏览量:1193   绿盟科技这几天连出渗透测试文章,真是干货啊。
2738 0
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(40)-精准在线人数统计实现-【过滤器+Cache】
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(40)-精准在线人数统计实现-【过滤器+Cache】 系列目录 上次的探讨没有任何结果,我浏览了大量的文章和个别系统的参考!决定用Cache来做,这可能有点难以接受但是配合mvc过滤器来做效果非常好! ...
909 0
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(33)-数据验证共享
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(33)-数据验证共享 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可或缺的,微软的东西还是做得比较人性化的,从webform到MVC,都做到了双向验证 单单的用j...
848 0
ASP.NET MVC & EF 构建智能查询 二、模型的设计与ModelBinder
在第一篇中,我讲解了我们要做智能查询的原因,以及基本的解决方案设计。从这篇开始我们开始讲解它的实现过程。 其实在写这一系列文章之初,我其实是想由底至上去讲解,但是我又整理了一遍代码才发现,其实如果不了解最表面的东西,也是不太好深入的。
778 0
C++ Builder构建算二十四点小游戏
 所谓算二十四点可能是不少读者朋友童年喜欢玩的扑克游戏之一,玩法是:把一副扑克牌从A到10选出来均分成两份,两个小朋友各持一份即可开始游戏,每人随机抽两张出来组成四张牌,把这四张牌加减乘除凑成结果为二十四,先算出来的一方赢得对方的两张牌,进行下一轮,如果都没计算出来为和局,直到把对方所有的扑克牌全部缴获,游戏方告结束。
736 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载