开发者社区> 异步社区> 正文

《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应用程序了。

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

相关文章
数字化时代,阿里云云效如何构建下一代研发协作工具平台?
本次分享主要由四部分组成: 1、企业在成长过程中遇到的研发效能困境; 2、研发管理从信息化走向数字化的路径,以及背后的逻辑; 3、云原生和 AI 两项新技术在研发平台上的落地; 4、结合阿里巴巴自身案例,分享如何进行研发管理数字化落地。
3910 0
Ext架构分析(3)--Widget之父Component:构建器
在Ext2.0中,Component是一切Widget的父类,所有的Widget都继承与它,而他又继承自Observable,因此,它天生就具备了对于事件的处理能力。 首先,让我们看一下它的构建器,它的构建器可以传入三种类型的对象: 对象(该对象的initailConfig属性为真正的配置对象;isAction属性决定了该参数是否是一个Ext.Action对象,如果是Ext.Action对象则注册Component对象)、Ext.Element对象和字符串对象。
807 0
从源码构建 MyBatis Generator(MBG)
从源码构建 所有MyBatis Generator(MBG)发行版包括源代码,唯一的编译时间依赖关系在ant.jar上 - 用于成功编译包含的Ant任务。直接从源代码编译MBG - 只需将源解压缩到一个分发中,然后用你最喜欢的工具编译它。
883 0
跨平台APP开发Flutter ListView 局部刷新数据、ListView点赞收藏
本文章实现的是 ListView 中 Item 局部数据刷新的效果,在这只是一个 Demo ,是一个实现思路,在应用开发的更多场景中如 资讯列表的点赞、收藏等等,诸多业务场景都可使用。
1074 0
iOS开发那些事-构建自适应iPhone和iPad工程
<p>有的时候应用需要能够在iPhone和iPad上运行,当然我们可以选择做两个完全不同的工程,然后共用一些类,但是我们也可以只创建一个工程,然后编译生成一个产品,这个产品能够自适应iPhone和iPad设备,然后在App Stroe发布的时候,它会有两套不同的截图展示给用户。App Store上的Evernote应用,它有两套截图iPhone和iPad,这说明Evernote就是自适应iPh
1033 0
《PhoneGap精粹:构建跨平台的移动App》——导读
本节书摘来自异步社区《PhoneGap精粹:构建跨平台的移动App》一书中的目录,作者 【美】John M. Wargo,更多章节内容可以访问云栖社区“异步社区”公众号查看
1172 0
每日学习与工作计划移至日事清APP
今天今天开始,每日学习与工作计划移至日事清APP。 博客园依然是我写文字的主战场。日事清APP仅限于做计划。
796 0
一个跨平台的 C++ 内存泄漏检测器
基本使用 对于下面这样的一个简单程序test.cpp: int main() { int* p1 = new int; char* p2 = new char[10]; return 0; } 我们的基本需求当然是对于该程序报告存在两处内存泄漏。
759 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载