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

相关文章
|
4月前
|
存储 自然语言处理 C#
.NET开源、跨平台的本地日记APP - SwashbucklerDiary
.NET开源、跨平台的本地日记APP - SwashbucklerDiary
|
25天前
|
机器学习/深度学习 算法 数据可视化
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
34 0
|
2月前
|
存储 前端开发 Go
flutter+go构建的即时通讯app,ChatCraft
社交应用程序在世界各地都很流行,例如 Facebook、Line、Whatsapp。如果您渴望打造一款独具个性的社交平台,Chat-Craft项目将是您不可或缺的理想之选。Chat-Craft是一款跨平台移动应用,采用了Golang作为后端服务端技术,以及Flutter作为前端客户端技术。该应用旨在提供高效、稳定且跨平台的用户体验,将现代的移动应用开发技术和高性能的后端服务端技术相结合。在Chat-Craft项目中,作者精心雕琢了客户端UI,灵感汲取于各大即时通讯应用及最新的应用设计规范。
|
2月前
|
数据安全/隐私保护 iOS开发 开发者
hbuilderx打包应用上传到app store构建版本的教程
hbuilderx打包应用上传到app store构建版本的教程
17 0
|
3月前
|
Shell 开发工具 git
(亲测好用)构建React-app应用时create-react-app卡住超慢的解决办法
(亲测好用)构建React-app应用时create-react-app卡住超慢的解决办法
131 0
(亲测好用)构建React-app应用时create-react-app卡住超慢的解决办法
|
5月前
|
开发工具 开发者
上传了ipa但在苹果App Store中没有看到构建版本的问题
上传了ipa但在苹果App Store中没有看到构建版本的问题
|
9月前
|
数据安全/隐私保护 开发者 iOS开发
hbuilderx打包应用上传到app store构建版本的教程
将ipa上架app store的过程中,发现需要将打包的ipa文件上传到app store的构建版本里,但是苹果官方推荐的上传工具,只有xcode和transporter等工具,这些工具是不能安装在windows电脑的。那么有没有windows电脑的上传方法呢?我们这篇文章就教会大家如何通过香蕉云编来上传ipa文件
259 0
|
10月前
|
前端开发 JavaScript API
上传Api成功但在苹果开发者网站App Store Connect中未显示构建版本
上传Api成功但在苹果开发者网站App Store Connect中未显示构建版本的解决方案
|
XML Java 编译器
Android APP的构建过程
Android APP的构建过程
313 0
|
持续交付

相关产品

  • 云迁移中心