Question

我正在开发一个Phonegap（3.3.0）+ Jquery Mobile（1.4）应用程序。

我得到一个无限加载页面（带有ui-loader图标的白页）。这是不稳定的，有时应用程序启动良好。
我看到一个非常奇怪的错误：没有第一个＆＃34; console.logs＆＃34;我在我的js文件中使用的是在Phonegap Build Weinre调试控制台中显示的。只有在某一行（包含第一个异步函数的方式）之后，才会在Weinre控制台中显示console.log。

所以我想我有一个与Jquery Mobile和Phonegap相关的绑定订单问题，但我在初始化时找不到什么错误。

我是否也可以归因于我在index.html中调用js文件的顺序？

我按照这篇文章注册了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

Answer 1

最佳注册如下：

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
}

Phonegap + Jquery Mobile：初始化/注册最佳实践

1 个答案: