编写 PhoneGap 程序调试问题解决方案

最新推荐文章于 2023-03-23 16:33:02 发布

load_life

最新推荐文章于 2023-03-23 16:33:02 发布

阅读量1.2k

点赞数

分类专栏： PhoneGap 文章标签： phonegap function download processing cache login

PhoneGap 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这几天做项目，需要设计一个和服务器交互的库，同时也有一个提高效率的需求就是设计缓存机制，无奈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 数据通信（如用户登录）

/*
用户登录模块
 
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不是一般的难用，真应该再多完善完善！！！

load_life

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
编写 PhoneGap 程序调试问题解决方案

这几天做项目，需要设计一个和服务器交互的库，同时也有一个提高效率的需求就是设计缓存机制，无奈PhoneGap提供的API太坑爹了，编写个缓存费了N大的劲才完成，记录一下要注意的地方。1. 客户端浏览器调试Ajax请求报错“Origin null is not allowed by Access-Control-Allow-Origin. ”解决办法：谷歌浏览器 chrome.exe
复制链接

扫一扫