phonegap 框架详解 - Blue Sky ......

标签: phonegap 框架 blue | 发表时间:2015-01-11 17:39 | 作者:Blue Sky ......
出处:

首先, 来看一下phonegap 初始化流程以及Native 与 JS 交互流程图。

 

说明:socket server模式下, phonegap.js 源码实现的采用1 毫秒执行一次XHR请求,  当Native  JS 队列里面有JS语句数据时,才是真正的1毫秒调用一下;  当没有数据, scoket server 会阻塞10毫秒, 也就是XHR 要等10秒钟才能收到结果,并进行下一次的轮询。

 

1、Activity继承 DroidGap (extends PhonegapActivity)

从phonegap.xml 中加载白名单配置 和 log配置


2、loadUrl (每个Activity 都初始化一次)

》》初始化webview
》》初始化callbackServer
》》插件管理器PluginManager 

 

3、加载插件配置:

》》读取 plugins.xml 配置,用map存储起来。

<plugins>
<plugin name="Camera" value="com.phonegap.CameraLauncher"/>
<plugin name="Contacts" value="com.phonegap.ContactManager"/>
<plugin name="Crypto" value="com.phonegap.CryptoHandler"/>
<plugin name="File" value="com.phonegap.FileUtils"/>
<plugin name="Network Status" value="com.phonegap.NetworkManager"/>
</plugins>

说明:
name 是别名,javascript调用时通过别名来调用。
value:java具体实现类

web页面调用(例如查找联想人)
PhoneGap.exec(successCB, errorCB, "Contacts", "search", [fields, options]);


4、插件实现

》》编程java类,继承Plugin类(Plugin 实现了IPlugin接口),并实现execute方法。
例如联系人管理插件:

public class ContactManager extends Plugin{
/**
* action : 用来指定一个具体动作 search 表示搜索联系人
* args: 方法参数
* callbackId:js与java指定一个标识,
*/
public PluginResult execute(String action, JSONArray args, String callbackId) {
try {
if (action.equals("search")) {
JSONArray res = contactAccessor.search(args.getJSONArray(0), args.optJSONObject(1));
return new PluginResult(status, res, "navigator.contacts.cast");
}
else if (action.equals("save")) {
String id = contactAccessor.save(args.getJSONObject(0));
if (id != null) {
JSONObject res = contactAccessor.getContactById(id);
if (res != null) {
return new PluginResult(status, res);
}
}
}
else if (action.equals("remove")) {
if (contactAccessor.remove(args.getString(0))) {
return new PluginResult(status, result);
}
}
// If we get to this point an error has occurred
JSONObject r = new JSONObject();
r.put("code", UNKNOWN_ERROR);
return new PluginResult(PluginResult.Status.ERROR, r);
} catch (JSONException e) {
Log.e(LOG_TAG, e.getMessage(), e);
return new PluginResult(PluginResult.Status.JSON_EXCEPTION);
}
}
}

  


5、polling和server初始化


android DroidGap 初始化时,如果loadUrl的url不是以file:// 开头时,polling = true, 否则是socket server方式

代码见CallbackServer.java 类init方法

public void init(String url) {
//System.out.println("CallbackServer.start("+url+")");
// Determine if XHR or polling is to be used
if ((url != null) && !url.startsWith("file://")) {
this.usePolling = true;
this.stopServer();
}
else if (android.net.Proxy.getDefaultHost() != null) {
this.usePolling = true;
this.stopServer();
}
else {
this.usePolling = false;
this.startServer();
}
}

  


6、phonegap.js  关键代码说明

 

phonegap .js在启动时,首先会通过prompt("usePolling", "gap_callbackServer:")获取调用方式: XHR 轮询 OR prompt 轮询,  如果是XHR的话, 会启动XHR调用获取http server端口 和token。


方法PhoneGap.Channel.join 启动 js server 或者polling调用 

UsePolling 默认为false。 通过var polling = prompt("usePolling", "gap_callbackServer:") 获取调用方式。

PhoneGap.Channel.join(function () {

// Start listening for XHR callbacks
setTimeout(function () {
if (PhoneGap.UsePolling) {
PhoneGap.JSCallbackPolling();
}
else {
console.log('PhoneGap.Channel.join>>>>>>>>>>>>>>>>>>>>>>>>>');
//phonegap js 首次启动获取js调用Native方式
var polling = prompt("usePolling", "gap_callbackServer:");
PhoneGap.UsePolling = polling;
if (polling == "true") {
PhoneGap.UsePolling = true;
PhoneGap.JSCallbackPolling();
}
else {
PhoneGap.UsePolling = false;
PhoneGap.JSCallback();
}
}
}, 1);
}

  

XHR轮询:PhoneGap.JSCallback方法

通过XHR 与java端 socket进行通信,每一毫秒执行一次JSCallback,从android socket获取javascript执行结果代码,最后通过eval动态执行javascript

XHR调用, 通过prompt 获取socket端口 和 token(uuid)

if (PhoneGap.JSCallbackPort === null) {
PhoneGap.JSCallbackPort = prompt("getPort", "gap_callbackServer:");
console.log('PhoneGap.JSCallback getPort>>>>>>>>>>>>>>>>>>>>>>>>>:' + PhoneGap.JSCallbackPort);
}
if (PhoneGap.JSCallbackToken === null) {
  PhoneGap.JSCallbackToken = prompt("getToken", "gap_callbackServer:");
  console.log('PhoneGap.JSCallback getToken>>>>>>>>>>>>>>>>>>>>>>>>>:' + PhoneGap.JSCallbackToken);
}
xmlhttp.open("GET", "http://127.0.0.1:" + PhoneGap.JSCallbackPort + "/" + PhoneGap.JSCallbackToken, true);
xmlhttp.send();

XHR返回结果代码片段
var msg = decodeURIComponent(xmlhttp.responseText);
setTimeout(function () {
try {
var t = eval(msg);
}
catch (e) {
// If we're getting an error here, seeing the message will help in debugging
console.log("JSCallback: Message from Server: " + msg);
console.log("JSCallback Error: " + e);
}
}, 1);
setTimeout(PhoneGap.JSCallback, 1);
}

  

prompt轮询: PhoneGap.JSCallbackPolling方法

 

PhoneGap.JSCallbackPolling = function () {

// Exit if shutting down app
if (PhoneGap.shuttingDown) {
return;
}

// If polling flag was changed, stop using polling from now on
if (!PhoneGap.UsePolling) {
PhoneGap.JSCallback();
return;
}

var msg = prompt("", "gap_poll:");
if (msg) {
setTimeout(function () {
try {
var t = eval("" + msg);
}
catch (e) {
console.log("JSCallbackPolling: Message from Server: " + msg);
console.log("JSCallbackPolling Error: " + e);
}
}, 1);
setTimeout(PhoneGap.JSCallbackPolling, 1);
}
else {
setTimeout(PhoneGap.JSCallbackPolling, PhoneGap.JSCallbackPollingPeriod);
}
};

  

 7、总结

  1、phonegap android 插件管理器PluginManager初始化时, 是每个Activity都要初始化一次, 数据都缓存一次, 导致同一份数据缓存多次。-- 暂不清楚为啥这样实现? 难道是phonegap 框架是为单webview 实现的,如果有知道原因的请告知一下。

     2、同第1点一样, Socket Server 每个Activity都会初始化一下, 如果loadUrl 的url类型不同,会不会导致scoket server状体错乱, 待验证!

     3、phonegap 采用 prompt 和 XHR 轮询机制,一是会导致手机耗电情况严重, 二是了解到prompt 调用是会阻塞js执行的, 这样导致影响到页面加载速度。

 

  phonegap 已经改名cordova, 在最新版本cordova 框架里面已经去掉了socket server模式, 详细请查看: http://www.cnblogs.com/hubcarl/p/4202784.html

 


本文链接: phonegap 框架详解,转载请注明。

相关 [phonegap 框架 blue] 推荐:

phonegap 框架详解 - Blue Sky ......

- - 博客园_首页
首先, 来看一下phonegap 初始化流程以及Native 与 JS 交互流程图. 说明:socket server模式下, phonegap.js 源码实现的采用1 毫秒执行一次XHR请求,  当Native  JS 队列里面有JS语句数据时,才是真正的1毫秒调用一下;  当没有数据, scoket server 会阻塞10毫秒, 也就是XHR 要等10秒钟才能收到结果,并进行下一次的轮询.

看看国外的phonegap和ionic移动app开发框架有多火

- - Web前端 - ITeye博客
下面给大家分享一下外的phonegap和ionic移动app开发框架到底有多火:. phonegap网站的日访问量:  ip:555000. 基于phonegap 以及angularjs 的移动app  html5开发框架 Ionic 的日访问量  ip:492000. 大家都懂的,下面给大家简单介绍一下  phonegap   Angularjs    ionic  懂的可以不看.

初识PhoneGap

- - IT技术博客大学习
标签:   PhoneGap.      一、PhoneGap是什么.     PhoneGap是一个标准的开源框架,用PhoneGap开发移动应用是免费的,无论是商业或是开源;一个用基于HTML,CSS和JavaScript的,创建跨平台移动应用的 快速开发平台. 它使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能.

Phonegap踩过的坑

- - snoopyxdy的博客
最近2个月一直在做一个Phonegap(现改名为cordova,其实我用的cordova来做的,但是叫惯了phonegap)的手机app项目,目前已经debug完毕,准备发布上线了,发现真印证了网上流传的一句话:. 如果你恨一个人,让他去开发PhoneGap应用;如果你爱一个人,让他去开发PhoneGap应用.

开辟新战场:Adobe收购HTML5移动应用框架开发者PhoneGap Nitobi,11月份将推云存储以及6大新平板应用

- Huadong Wang - 36氪
在Flash与HTML5的对垒中,Flash不断的败下阵来并逐渐被许多科技巨头抛弃,Adobe也坐不住了开始敞开怀抱迎接HTML5. 近日,其就宣布收购HTML5移动应用框架PhoneGap和Phone Build的开发者Nitobi Software,收购条款不详. 据悉,PhoneGap的开源平台允许开发者使用HTML5和JavaScript创建并发布跨平台的移动应用.

卷土重来,Color的下一站blue ?

- 个篱 - 36氪
既然Color(彩色)做不下去了,那就来点单色blue(蓝色)吧. 近日Color CEO Bill Nguyen的Facebook内容流中经常会有几张来自一个名叫“Blue”的应用的照片. 这个会不会是Color团队的下一款转型产品呢. 虽然目前无法了解到更多的情况,但是从MG Sigler挖掘到的logo上可以看出这款应用肯定将会和Facebook Photos有重大联系.

Android + Eclipse + PhoneGap 环境配置

- - CSDN博客推荐文章
用了3天的时间,终于把环境搭建完毕,郁闷了N天,终于完成了. 这里我只是讲述我安装的过程,仅供大家参考. 环境搭建首先要去下载一些安装包:. (下载前注意一下,电脑是32位还是64位的请注意选择安装包). java环境的JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html.

PhoneGap现已完全支持WP7

- - HTML5研究小组
PhoneGap现已完全支持Windows Phone 7所有的原生功能,其支持力度达到了iOS与Android的水平. 微软在去年7月帮助Nitobi将PhoneGap移植到了Windows Phone Mango上,并在9月 发布了 该框架的一个可用版本. 很多原生特性都得到了支持,包括Accelerometer、Camera、Contacts、Geolocation、 Notification与MediaCapture,但团队希望能找到一些Bug.

关于Phonegap的一些看法

- - SweetRiver
呃, phonegap今年发展不错啊,至少“跨平台”一个词就是多少人无法拒绝的一个诱惑,而且使用HTML+CSS+JS开发,可灰常有吸引力. 网易轻博LOFTER的移动客户端就是用phonegap开发的,但是目前只有iOS版本,Android版本似乎还在开发中. 试用了下iOS下phonegap做出来的LOFER,应该说UI效果非常接近原生APP,但不如原生APP流畅,可以感觉到网易LOFTER团队付出了很多的努力.

Phonegap + HTML5 开发经验小结

- - Miller
        去年曾对 Phonegap做过一次调研,当时还是1.1版本,印象也一般. 对他的性能以及真实的跨平台能力都不太确定. 今年过完春节至今正好有机会参与了一个纯Phonegap + HTML5开发的项目,项目至今已经完成了一期的App Store提交,所以也正好能抽时间来小结一下. 一个月左右的开发过程让我对这种开发模式有了更深的认识,这对于前端开发人员而言绝对是一个大的机会.