2016-11-19 43 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> 
相關問題