PhoneGap框架下JavaScript操作卡片技术验证及说明文档

PhoneGap 框架下 JavaScript 操作卡片技术 验证及说明 技术积累文档 PhoneGap 框架下 JavaScript 操作卡片技术验证及说 明 第 2 页 总 6 页 目录目录 1PhoneGap 概述 3 1 1PhoneGap 简介 3 1 2调用本地接口 3 1 3参考资料 3 2PhoneGap 插件开发 4 2 1开发本地代码 4 2 2编写 Javascript 代码 5 2 3添加插件配置项 5 3使用新增插件 5 4经验总结 6 PhoneGap 框架下 JavaScript 操作卡片技术验证及说 明 第 3 页 总 6 页 1 PhoneGap 概述概述 1 1 PhoneGap 简介简介 目前移动设备在人们的生活中扮演者越来越重要的角色 随着 iPhone android 及 windows phone 的发展 移动应用越来越丰富 用户对应用的需求逐步的增大 然而对于 开发者而言 同一个应用针对不同的移动设备平台需要分别作开发 这无疑增大了成本 随着 html5 等技术的发展和完善 借助于 PhoneGap 跨移动平台的开发正在成为现实 PhoneGap 是一个用基于 HTML CSS 和 JavaScript 的 创建移动跨平台移动应用程序的 快速开发平台 目前他支持的平台包括 iPhone Android Palm Symbian WP7 Bada 和 Blackberry WebOs 通过它 开发者可以使用 HTML CSS 及 JavaScript 来开发本地移动应 用程序 开发者可以只编写一次应用程序 然后在各个移动平台和应用程序商店里进行发 布 PhoneGap 提供了诸多本地特性的 JavaScript API 接口 使得开发者使用 JavaScript 即可 访问这些浏览器本身不能够支持的本地特性 如设备摄像头 设备信息 通讯录等 但是 我们仍可以添加自己的一些本地特性 以满足我们的需求 1 2 调用本地接口调用本地接口 在 android 平台下 可以实现 html 中 JavaScript 代码和本地的 java 接口之间的通信 关于此类的教程有很多 在此就不做叙述 PhoneGap 使用了 JavaScript 技术 因此它可以 实现调用本地的 java 接口 但是在 PhoneGap 开发框架下 是以插件的形式实现本地接口 调用的 PhoneGap 在不断推出访问本地功能的新 API 接口 但对于移动应用开发者 仍然可能 需要访问一些 PhoneGap 尚不支持的功能 同时在编写复杂的业务逻辑时 JavaScript 显得力 不从心 其速度还是无法和原生代码相比 或者希望能够使用本地 API 来实现某些重量级 的功能 这时 PhoneGap 提供了一套插件体系来帮助开发者定制扩展插件 事实上 标准 的 PhoneGap 本地 API 也是以插件的方式提供的 通过插件方式 开发者可以使用平台指 定的本地语言 例如 Java 编写功能 并通过 JavaScript 把这些定制化的本地代码暴露出来 供 PhoneGap 应用访问 1 3 参考资料参考资料 PhoneGap 的相关资料 PhoneGap 框架下 JavaScript 操作卡片技术验证及说 明 第 4 页 总 6 页 2 PhoneGap 插件开发插件开发 由于要写原生代码 所以各个平台插件的编写略有不同 本文以 Android 为例 来讲述 PhoneGap 插件的开发过程 2 1 开发本地代码开发本地代码 首先必须在工程中添加 PhoneGap 的依赖包 cordova 1 7 0 jar 然后在 java 文件中引入 import com phonegap api Plugin import com phonegap api PluginResult import com phonegap api PluginResult Status java 类需要继承 com phonegap api Plugin 实现如下接口 public PluginResult execute String action JSONArray data String callbackId 代码实例如下 public class WdPlugin extends Plugin public static final String ACTION WdPluginAc Override public PluginResult execute String action JSONArray data String callbackId PluginResult result null if ACTION equals action try String name data getString 0 JSONObject fileInfo new JSONObject 数据结果保存到json中 fileInfo put CardInfo getCardInfo name result new PluginResult Status OK fileInfo catch JSONException jsonEx Log d WdPlugin Got JSON Exception jsonEx getMessage else result new PluginResult Status JSON EXCEPTION return result PhoneGap 框架下 JavaScript 操作卡片技术验证及说 明 第 5 页 总 6 页 private String getCardInfo String arg TODO 调用具体读取卡片的接口 2 2 编写编写 JavaScript 代码代码 代码实例如下 var WdPlugin function 参数可以是多个 本例仅一个参数name 可以再增加一个id 对应的exec中的 参数变为 name id 在本地的java代码中也应有相应的处理 WdPlugin prototype getCardInfo function name success error Cordova exec success error WdPlugin WdPluginAc name Cordova addConstructor function Cordova addPlugin wdplugin new WdPlugin 另外要补充的是 本 JavaScript 文件可以放到外部存储设备的路径中 只要在页面中通 过正确的路径调用即可 2 3 添加插件配置项添加插件配置项 打开 res xml plugins xml 文件 在最后添加 至此自定义的插件已经添加到 PhoneGap 框架中 我们可以在 JavaScript 中去调用插件的 getCardInfo 接口去读取卡片的信息 PhoneGap 框架下 JavaScript 操作卡片技术验证及说 明 第 6 页 总 6 页 3 使用新增插件使用新增插件 3 1 内部内部 html 中使用插件中使用插件 首先在页面中加入你自己的编写插件的 js 文件 而且顺序必须在 phonegap 的 js 之后 如 下所示 在 JavaScript 中通过以下代码使用添加的插件接口 window plugins wdplugin getCardInfo openCardArg function r alert r CardInfo function e log e 执行成功后即可在警示框中显示获取的信息 3 2 外部外部 html 中使用插件中使用插件 如果在 phonegap 中使用外部的 html SD 卡上的 html 调用插件接口 只需将页面中的 js 路径配置正确即可 当然内部的 html 也可以配置外部的 js 路径进而调用外部的 js 需要说 明的是 路径分别为 绝对路径 内部路径 file android asset www 外部路径 file mnt sdcard www PS www 为