2016-11-19 112 views
2

我一直在使用PhoneGap一段时间了,由于我真的不得不急于进入,没有真正的Web开发经验,所以我可能会做一个在调试和构建方面错误的几件事。在浏览器中使用CLI调试PhoneGap应用程序的最佳方法

首先,我使用PhoneGap CLI创建我的项目。 我使用PhoneGap Build服务构建我的移动应用程序,在该服务中我上传了我的www文件夹的压缩版本。

要调试我的应用程序,我在CLI中使用phonegap serve命令,然后我基本上只访问该URL并使用Chrome的开发工具来检查我的JS和HTML。我有时用一个Chrome扩展,称为纹波通常做的工作,但似乎有点马车(其他的选择吗?)

最近,我加入了PushBots插件安装到我的应用程序之一,我得到的参考调试时在控制台中发生错误。我怎样才能防止这些类型的错误?

我通常会遇到的另一个问题是,我得到cordova.js或cordova_plugins.js的引用错误。我明白,cordova javascript文件在构建时被dinamically添加到项目中,但它仍然在控制台中很烦人。任何方式来解决它?

我还在PhoneGap应用程序的顶部添加了Onsen UI框架,例如,关于使用哪些实例化函数来处理Android后退按钮,它有点忙乱。 (我目前使用的从我的脚本文件夹index.js为,那我刚刚手工创建的PhoneGap并没有为我创造它。)

我通常的文件夹结构如下所示:

www 
    > css - contains CSS for the onsen framework 
    > img - contains some images that are referenced in my code 
    > js - contains jquery, moment and other libraries that I use in my app 
    > lib - 
    > angular - contains angular.js 
    > onsen - contains the onsen framework 
    > bootstrap 
    > res - contains icons and splash screens 
    > scripts - recently added it myself, with an index.js file 
    > config.xml 
    > index.html 
    > main.html 
    > appController.js 
    > loginController.js 
    > ..... 

插件的错误开始发生在这里。 这是我的index.js在脚本文件夹,我在我的index.html引用刚刚引用cordova.js,我已经复制到根(www)文件夹后引用,所以我没有得到引用错误时间(我不明白这一点了对cordova.js,现在我得到它cordova_plugins.js,所以我想这个方法不好)

(function() { 
"use strict"; 

myApp.run(['$rootScope', function($rootScope) { 
    document.addEventListener('deviceready', function() { 

     // Handle the Cordova pause and resume events 
     document.addEventListener('pause', onPause.bind(this), false); 
     document.addEventListener('resume', onResume.bind(this), false); 

     // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here. 
     document.addEventListener("backbutton", onBackKeyDown, false); 
     window.plugins.PushbotsPlugin.initialize("--------", {"android":{"sender_id":"-------"}}); 

     // First time registration 
     // This will be called on token registration/refresh with Android and with every runtime with iOS 
     window.plugins.PushbotsPlugin.on("registered", function(token){ 
      console.log("Registration Id:" + token); 
     }); 

     window.plugins.PushbotsPlugin.getRegistrationId(function(token){ 
      alert("Registration Id:" + token); 
      console.log("Registration Id:" + token); 
     }); 

     // Should be called once app receive the notification 
     window.plugins.PushbotsPlugin.on("notification:received", function(data){ 
      $rootScope.$emit('onNotificationWhileOpen', data); 
      console.log("received:" + JSON.stringify(data)); 
     }); 

     // Should be called once the notification is clicked 
     window.plugins.PushbotsPlugin.on("notification:clicked", function(data){ 
      //alert("clicked:" + JSON.stringify(data)); 
      $rootScope.$emit('onNotificationClick', data); 
      console.log("clicked:" + JSON.stringify(data)); 
     }); 

     window.plugins.PushbotsPlugin.resetBadge(); 

    }, false); 
}]); 

...All the necessary functions for the callbacks go here... 
})(); 

这个插件是由添加的PhoneGap构建框架,所以我只需要在config.xml文件中指定它们。我想这就是为什么我在PC上调试时遇到问题的原因,但有没有办法解决这个问题?

我是否通过手动添加cordova.js参考来完成我的项目?实际上,当我有Onsen框架时需要它吗?

LE: 只是想确保我给尽可能多的信息。这是我的我的JavaScript文件加载到我的HTML文件:

<script src="js/onsenui.js"></script> 
<script src="js/angular/angular.js"></script> 
<script src="js/angular-onsenui.js"></script> 
<script src="js/jquery-3.1.0.js"></script> 
<script src="js/jquery-ui.js"></script> 
<script src="js/moment.min.js"></script> 
<script src="js/jquery.mobile-1.4.5.min.js"></script> 

<!--CONTROLLERS--> 
<script src="app.js"></script> 
<script src="appController.js"></script> 

<script src="helpers.js"></script> 

<script src="cordova.js"></script> 
<script src="scripts/index.js"></script> 

回答

0

有一件事我会建议是移动参考cordova.js进一步上涨之前,你的代码可能做出的科尔多瓦API的调用。像这样:

<!--CONTROLLERS--> 
<script src="cordova.js"></script> 
<script src="js/onsenui.js"></script> 
<script src="js/angular/angular.js"></script> 
<script src="js/angular-onsenui.js"></script> 
<script src="js/jquery-3.1.0.js"></script> 
<script src="js/jquery-ui.js"></script> 
<script src="js/moment.min.js"></script> 
<script src="js/jquery.mobile-1.4.5.min.js"></script> 

<!--CONTROLLERS--> 
<script src="app.js"></script> 
<script src="appController.js"></script> 

<script src="helpers.js"></script> 
相关问题