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

相关文章
|
9月前
|
机器学习/深度学习 算法 数据可视化
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
286 0
|
5月前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
144 12
|
4月前
|
监控 安全 Apache
构建安全的URL重定向策略:确保从Web到App平滑过渡的最佳实践
【10月更文挑战第2天】URL重定向是Web开发中常见的操作,它允许服务器根据请求的URL将用户重定向到另一个URL。然而,如果重定向过程没有得到妥善处理,可能会导致安全漏洞,如开放重定向攻击。因此,确保重定向过程的安全性至关重要。
232 0
|
6月前
|
Web App开发 Android开发
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
实时数据传输在互联网中至关重要,不仅支持即时通讯如QQ、微信的文字与图片传输,还包括音视频通信。一对一通信常采用WebRTC技术,如《Android Studio开发实战》中的App集成示例;而一对多的在线直播则需部署独立的流媒体服务器,使用如SRT等协议。SRT因其优越的直播质量正逐渐成为主流。本文档概述了SRT协议的使用,包括通过OBS Studio和SRT Streamer进行SRT直播推流的方法,并展示了推流与拉流的成功实例。更多细节参见《FFmpeg开发实战》一书。
97 1
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
|
6月前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
223 0
|
6月前
|
存储 XML Linux
深入理解操作系统:进程管理与调度策略探索安卓应用开发:从零开始构建你的第一个App
【8月更文挑战第28天】在数字世界里航行,操作系统是掌控一切的舵手。本文将带你领略操作系统的精妙设计,特别是进程管理和调度策略这两大核心领域。我们将从基础概念出发,逐步深入到复杂的实现机制,最后通过实际代码示例,揭示操作系统如何高效协调资源,确保多任务顺畅运行的秘密。准备好了吗?让我们启航,探索那些隐藏在日常电脑使用背后的奥秘。 【8月更文挑战第28天】在这个数字时代,拥有一款自己的移动应用程序不仅是技术的展示,也是实现创意和解决问题的一种方式。本文将引导初学者了解安卓开发的基础知识,通过一个简单的待办事项列表App项目,逐步介绍如何利用安卓开发工具和语言来创建、测试并发布一个基本的安卓应用
|
6月前
|
Java 程序员 Android开发
探索安卓开发:构建你的第一个App
【8月更文挑战第27天】在数字化时代的浪潮中,移动应用成为人们生活不可或缺的一部分。对于渴望进入软件开发领域的新手而言,掌握如何构建一款简单的安卓App是开启技术之旅的关键一步。本文旨在通过浅显易懂的语言和步骤分解,引导初学者了解安卓开发的基础知识,并跟随示例代码,一步步实现自己的第一个安卓App。从环境搭建到界面设计,再到功能实现,我们将一同揭开编程的神秘面纱,让每个人都能体会到创造软件的乐趣。
|
7月前
|
消息中间件 存储 监控
构建支持实时数据处理的返利App系统架构
构建支持实时数据处理的返利App系统架构
|
7月前
|
存储 缓存 NoSQL
实现返利App中的数据缓存与预加载机制
实现返利App中的数据缓存与预加载机制
|
7月前
|
消息中间件 负载均衡 Kubernetes
构建可扩展性强的返利App后端服务架构
构建可扩展性强的返利App后端服务架构

热门文章

最新文章

  • 1
    DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
  • 2
    【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 5
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 6
    电竞陪玩系统架构优化设计,陪玩app如何提升系统稳定性,陪玩小程序平台的测试与监控
  • 7
    【Azure App Service】对App Service中CPU指标数据中系统占用部分(System CPU)的解释
  • 8
    微信小程序 app.json 配置文件解析与应用
  • 9
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
  • 10
    轻松搭建婚恋交友系统源码,H5/小程序/APP自动适配,智能匹配恋爱交友平台快速落地