现在的位置: 首页 > 移动开发> 正文
编写 PhoneGap 程序调试问题解决方案
2012年03月28日 移动开发 评论数 5 ⁄ 被围观 8,805+

这几天做项目,需要设计一个和服务器交互的库,同时也有一个提高效率的需求就是设计缓存机制,无奈PhoneGap提供的API太坑爹了,编写个缓存费了N大的劲才完成,记录一下要注意的地方。

1. 客户端浏览器调试Ajax请求报错“Origin null is not allowed by Access-Control-Allow-Origin. ”

解决办法:谷歌浏览器 chrome.exe --disable-web-security

2. PhoneGap 远程调试

远程调试架构图如下所示:

remote_debugging_architecture

配置步骤如下:

a. 登录网址:http://debug.phonegap.com/ 填写配置信息

debug_phonegap_getting_started

b. 在本地代码中引用远程调试JS代码文件

debug_phonegap_client

c. 打开远程调试窗口http://debug.phonegap.com/client/#bbshow (bbshow为第一步骤配置的名字)

debug_phonegap_server

在调试窗口中可以修改节点的属性,然后手机上的画面就会自动更新了。

3.  常用的代码总结

a. 设计 Ajax 数据通信(如用户登录)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/*
用户登录模块
 
params = {};
params.username 登录用户名
params.password 登录用户密码
 
succcb  登录成功时候的回调函数 function(data);
errcb   登录失败时候的回调函数 function(text);
*/
function bb_login(params, succcb, errcb)
{
   var tmplate = login_req_xml(params);
 
   doPost(tmplate, function(data, textStatus, jqXHR) {
      if (data.status == 0) {
          errcb(data.info);
      } else {
          GServerData.curToken = data.data;
          succcb(data.data);
      }
   }, function(jqXHR, textStatus, errorThrown) {
         errcb(textStatus);
   });
}
 
/*用户登录的模板文件*/
function login_req_xml(params)
{
  var tmplate = '<?xml version="1.0" encoding="utf-8"?>'
       + '<request>'
       + '<operation>'
       + '<module>token</module>'
       + '<action>login</action>'
       + '<params>'
       + '<username>' + params.username + '</username>'
       + '<password>' + params.password + '</password>'
       + '</params>'
       + '</operation>'
       + '</request>';
   return  tmplate;
}
 
/*
向服务器发送 POST 请求.
 
data: 向服务器发送的数据内容
succcb: 成功时候的回调函数 success(data, textStatus, jqXHR)
errcb:  失败时候的回调函数 error(jqXHR, textStatus, errorThrown)
*/
function doPost(data, succcb, errcb)
{
   $.ajax({
      type: "POST",
      url: Config.serverapi,
      data: data,
      cache: false,
      dataType: "json",
      success: succcb,
      error: errcb
   });
}
 
b.  数据缓存
 
/*
dataUrl 请求数据的网络URL地址
如果缓存成功,则会返回本地的File地址
 
succcb 登录成功时候的回调函数 function(data);
errcb 登录失败时候的回调函数 function(text);
*/
function bb_loadCacheData(dataurl, succcb, errcb)
{
  var errorCB = function (err) {
      console.log("Error processing : " + err.code);
      errcb("Error processing : " + err.code);
  }
 
var downLoadFile = function(db) {
  console.log("downLoadFile ... [" + dataurl + "]");
 
   //特别备注:在Phonegap1.5.0中,LocalFileSystem.TEMPORARY 和 LocalFileSystem.PERSISTENT 两者相反了
   window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
        var datadate = new Date().getTime();
        var filename = datadate + '_' + dataurl.substr(dataurl.lastIndexOf('/')+1);
 
        var fileTransfer = new FileTransfer();
 
        fileTransfer.download(
           dataurl,
           fileSystem.root.fullPath.substr("file://".length) + Config.datacachepath + filename,
           function(entry) {
               console.log("download complete: " + entry.fullPath);
               db.transaction(function (tx) {
                   tx.executeSql('INSERT INTO data_cache (dataurl, datapath, datadate) VALUES ("' + dataurl + '","' + entry.fullPath + '","' + datadate + '")');
               succcb(entry.fullPath);
               }, errorCB);
           },
          function(error) {
              console.log("download error source " + error.source);
              console.log("download error target " + error.target);
              console.log("download error code " + error.code);
              errcb("download error code " + error.code);
          }
      ); 
     }, errorCB);
   };
 
   var db = window.openDatabase("cache.db", "1.0", "BBShow Data Cache DB", 200000);
   db.transaction(function (tx) {
      tx.executeSql('CREATE TABLE IF NOT EXISTS data_cache (id unique, dataurl, datapath, datadate)');
      tx.executeSql('SELECT * FROM data_cache WHERE dataurl=?', [dataurl], function(tx, results) {
      if (results.rows.length > 0) {
         window.resolveLocalFileSystemURI(results.rows.item(0).datapath, function(fileEntry) {
              console.log(fileEntry.fullPath);
              succcb(fileEntry.fullPath);
         }, function(error) {
              console.log("Unable to resolveLocalFileSystemURI: " + error.code);
              db.transaction(function (tx) {
              tx.executeSql('DELETE FROM data_cache WHERE dataurl=?', [dataurl]);
              downLoadFile(db);
         }, errorCB);
        });
      } else {
          downLoadFile(db);
      }
     }, errorCB);
   }, errorCB);
}
/*
用户登录模块

params = {};
params.username 登录用户名
params.password 登录用户密码

succcb  登录成功时候的回调函数 function(data);
errcb   登录失败时候的回调函数 function(text);
*/
function bb_login(params, succcb, errcb)
{
   var tmplate = login_req_xml(params);

   doPost(tmplate, function(data, textStatus, jqXHR) {
      if (data.status == 0) {
          errcb(data.info);
      } else {
          GServerData.curToken = data.data;
          succcb(data.data);
      }
   }, function(jqXHR, textStatus, errorThrown) {
         errcb(textStatus);
   });
}

/*用户登录的模板文件*/
function login_req_xml(params)
{
  var tmplate = '<?xml version="1.0" encoding="utf-8"?>'
       + '<request>'
       + '<operation>'
       + '<module>token</module>'
       + '<action>login</action>'
       + '<params>'
       + '<username>' + params.username + '</username>'
       + '<password>' + params.password + '</password>'
       + '</params>'
       + '</operation>'
       + '</request>';
   return  tmplate;
}

/*
向服务器发送 POST 请求.

data: 向服务器发送的数据内容
succcb: 成功时候的回调函数 success(data, textStatus, jqXHR)
errcb:  失败时候的回调函数 error(jqXHR, textStatus, errorThrown)
*/
function doPost(data, succcb, errcb)
{
   $.ajax({
      type: "POST",
      url: Config.serverapi,
      data: data,
      cache: false,
      dataType: "json",
      success: succcb,
      error: errcb
   });
}

b.  数据缓存

/*
dataUrl 请求数据的网络URL地址
如果缓存成功,则会返回本地的File地址

succcb 登录成功时候的回调函数 function(data);
errcb 登录失败时候的回调函数 function(text);
*/
function bb_loadCacheData(dataurl, succcb, errcb)
{
  var errorCB = function (err) {
      console.log("Error processing : " + err.code);
      errcb("Error processing : " + err.code);
  }

var downLoadFile = function(db) {
  console.log("downLoadFile ... [" + dataurl + "]");

   //特别备注:在Phonegap1.5.0中,LocalFileSystem.TEMPORARY 和 LocalFileSystem.PERSISTENT 两者相反了
   window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
        var datadate = new Date().getTime();
        var filename = datadate + '_' + dataurl.substr(dataurl.lastIndexOf('/')+1);

        var fileTransfer = new FileTransfer();

        fileTransfer.download(
           dataurl,
           fileSystem.root.fullPath.substr("file://".length) + Config.datacachepath + filename,
           function(entry) {
               console.log("download complete: " + entry.fullPath);
               db.transaction(function (tx) {
                   tx.executeSql('INSERT INTO data_cache (dataurl, datapath, datadate) VALUES ("' + dataurl + '","' + entry.fullPath + '","' + datadate + '")');
               succcb(entry.fullPath);
               }, errorCB);
           },
          function(error) {
              console.log("download error source " + error.source);
              console.log("download error target " + error.target);
              console.log("download error code " + error.code);
              errcb("download error code " + error.code);
          }
      ); 
     }, errorCB);
   };

   var db = window.openDatabase("cache.db", "1.0", "BBShow Data Cache DB", 200000);
   db.transaction(function (tx) {
      tx.executeSql('CREATE TABLE IF NOT EXISTS data_cache (id unique, dataurl, datapath, datadate)');
      tx.executeSql('SELECT * FROM data_cache WHERE dataurl=?', [dataurl], function(tx, results) {
      if (results.rows.length > 0) {
         window.resolveLocalFileSystemURI(results.rows.item(0).datapath, function(fileEntry) {
              console.log(fileEntry.fullPath);
              succcb(fileEntry.fullPath);
         }, function(error) {
              console.log("Unable to resolveLocalFileSystemURI: " + error.code);
              db.transaction(function (tx) {
              tx.executeSql('DELETE FROM data_cache WHERE dataurl=?', [dataurl]);
              downLoadFile(db);
         }, errorCB);
        });
      } else {
          downLoadFile(db);
      }
     }, errorCB);
   }, errorCB);
}

总之,这两天才发现 PhoneGap不是一般的难用,真应该再多完善完善!!!

目前有 5 条留言 其中:访客:5 条, 博主:0 条

  1. 郑凯彬 : 2012年03月30日05:37:07  -49楼 @回复 回复

    我是郑凯彬,一起交流下,可以来我博客看看。

  2. 足球比分 : 2012年03月30日02:36:19  -48楼 @回复 回复

    写的不错,多谢分享,学习了 谢谢楼主。 多更新, 会常光顾的

  3. 家居饰品 : 2012年03月29日22:27:47  -47楼 @回复 回复

    交换友情链接么?

  4. 匿名 : 2012年03月29日09:02:36  -46楼 @回复 回复

    phonegap不是一个开源包吗?可以使android开发界面用js写?

    • 匿名 : 2012年03月29日12:06:35 @回复 回复

      @程丹丹: 用 Jquery JqueryMobile 和 Html 设计界面,然后混合编译就 OK!

给我留言

留言无头像?


×
腾讯微博