Phonegap + JQuery Mobile: передовая практика инициализации/регистрации

Я разрабатываю приложение Phonegap (3.3.0) + JQuery Mobile (1.4).Phonegap + JQuery Mobile: передовая практика инициализации/регистрации

Я получаю бесконечную страницу загрузки (белая страница с иконкой ui-loader). Это неустойчиво, и иногда приложение начинается хорошо.
Я вижу очень странную ошибку: ни один из первых «console.logs», которые я использую в моем js-файле, отображается в консоли отладки Phonegap Build Weinre. Только после определенной строки (которая содержит, кстати, первую асинхронную функцию) консоль.log отображается в консоли Weinre.

Так что я думаю, у меня есть проблема порядка привязки, связанные с JQuery Mobile и PhoneGap, но я не могу найти то, что случилось в моей инициализации.

Могу ли я быть также в порядке, в котором я вызываю js-файлы в моем index.html?

Я последовал за этот пост, чтобы зарегистрировать PhoneGap и JQM: Correct way of using JQuery-Mobile/Phonegap together? рекомендуется здесь: jQuery Mobile : What is the order of page events triggering? по @Gajotres.

Вы можете помочь?

Благодаря

HTML:

<!DOCTYPE html> 
<html> 
<head> 
... 
</head>  
<body> 
<!-- SPLASH PAGE --> 
<div id="splash-page" data-role="page"> 
    <div class='toastenjs' style='display:none'></div> 
    <center id="splashLogoCenter"> 
     <img src="images/splash.png" width="200" /> 
    </center> 
    </div> 


<!-- WELCOME PAGE --> 
<div id="welcome-page" data-role="page">  
... 
</div> 

<script src="js/jquery-1.9.1.js"></script> 
<script src="js/jquery.jsonp-2.4.0.min.js"></script> 
<script src="js/functions.js"></script> 
<script src="js/functionCUgly.js"></script> 
<script src="js/boardDims.js"></script> 
<script src="phonegap.js"></script> 
<script src="js/jquery.mobile.config.js"></script> 
<script src="js/jquery.mobile-1.4.3.min.js"></script> 
<!--POUCHDB --> 
<script src="js/pouchdb-2.2.3.min.js"></script> 
<!-- Flexslider--> 
<!-- <script src="js/flexslider-v2.js"></script>--> <!-- v2.2 doesn't work, maybe because we're not using last versions of jquery and jqm --> 
<script src="js/flexsliderV2.3.js"></script>  
<!-- iScroll--> 
<script type="application/javascript" src="js/iscroll.js"></script> 
<script type="application/javascript" src="js/jquery.mobile.iscrollview.js"></script> 
<!-- Add2home : create a shortcut icon of the wep app on the phone homescreen --> 
<script type="application/javascript" src="js/add2home.js"></script> 
<script src="js/GoogleLogin.js"></script> <!--Phonegap module by eric valenzia https://github.com/valenzia10/PhonegapGoogleLogin--> 
<script src="js/jquery.ddslick.min.js"></script> 
<script src="js/jquery-geturlvar.js"></script> 
<script src="js/html2canvas.js"></script> 


<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    if (typeof(google) != 'undefined'){ 
     google.load('visualization', '1.0', {'packages':['corechart']}); 
    } 
</script>

JS файл:

var deviceReadyDeferred = $.Deferred(); 
var jqmReadyDeferred = $.Deferred(); 

$(document).one("mobileinit", function() { 
    console.log('mobileinit just fired'); //this one is not displayed in the weinre console 
    jqmReadyDeferred.resolve(); 
}); 

    if (isPhoneGap()) { 
     document.addEventListener("deviceReady", onDeviceReady, false); 
     function onDeviceReady() { 
      deviceReadyDeferred.resolve(); 
     } 
     $.when(deviceReadyDeferred, jqmReadyDeferred).then(EVERYTHING()); // !!!!! normalement il faut virer ces parenthèses pour respecter le $.when....mais ça fait tout bugger !!!!!!!!! 
    } else { 
     console.log("NOT Running on PhoneGap!"); 
     $.when(jqmReadyDeferred).then(EVERYTHING); 
    } 


function EVERYTHING() { 

console.log("on est entré dans EVERYTHING()"); //not displayed in the weinre console 
insideEVERYTHING = 1; 
console.log("jqmReadyDeferred is "+jqmReadyDeferred.state()); //not displayed in the weinre console 
console.log("deviceReadyDeferred is "+deviceReadyDeferred.state()); //not displayed in the weinre console 


//FOR EVERY PAGE 
$(document).on('pagecontainershow', function (e, ui) { 
    //... 
}); 
$(document).on('pagecontainershow', function (e, ui) { 
    //... 
}); 


// --------------- SPLASH PAGE --------------------- 

//$(document).on('pagecreate','#splash-page', function(){ 
$(document).on('pagecontainershow', function (e, ui) { 
    var activePageId = $(':mobile-pagecontainer').pagecontainer('getActivePage').attr('id'); 
    if (activePageId === 'splash-page') { 

    console.log("we are in splash-page"); 

    if (typeof debugOptionUseLocalDB != 'undefined' && debugOptionUseLocalDB) { 
     fallbackToLocalDBfile(); 
     console.log('on yess'); 
    }else{ 
     if(connectionStatus == 'online'){ 
       console.log("launching getJsonpFile..."); 
//DEBUG TIMER 
var time=[]; 
var dummy; 
dummy = new Date().getTime(); 
time.push(dummy); 
       getJsonpFile(dbUrl()) 
        .done(function(data) { 
         console.log("...getJsonpFile done."); 
         if(localStorage) { 
          if (isPhoneGap() || !isIOS()) { //BUG iOS safari doesn't work with this (Cf. Philippe's ipad), si on est sur phonegap ok, si on n'est pas sur phonegap et pas sur iOS ok 
           localStorage.setItem("proDB", JSON.stringify(data)); //write to localStorage 
          } 
         } 

//...JQM bindings are continued below

источник

2014-10-01 Louis

Лучшая регистрация следующее:

var isPhoneGap; 
var deviceReadyDeferred = $.Deferred(); 
var jqmReadyDeferred = $.Deferred(); 

isPhoneGap = checkIfPhoneGap(); 

if (isPhoneGap) { 
    $.when(deviceReadyDeferred, jqmReadyDeferred).done(Everything); 
} else { 
    console.log("NOT Running on PhoneGap!"); 
    $.when(jqmReadyDeferred).done(Everything); 
} 

$(document).on("mobileinit", function() { 
    //alert('mobileinit just fired'); 
    //popShortToast("mobileinit just fired"); 
    jqmReadyDeferred.resolve(); 
}); 

document.addEventListener("deviceReady", onDeviceReady, false); 
function onDeviceReady() { 
    //popShortToast("deviceReady just fired"); 
    deviceReadyDeferred.resolve(); 
} 
function checkIfPhoneGap() { 
    var app = document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1; // && document.URL.indexOf('file://'); 
    if (app) { 
     return true; 
    } else { 
     return false; 
    } 
} 

function Everything() { 
    //enter your JQM bindings here, and use Phonegap's features 
}

источник

2014-10-24 10:11:17 Louis

Phonegap + JQuery Mobile: передовая практика инициализации/регистрации

ответ

Смежные вопросы