麻烦使用jQuery& deviceready with PhoneGap

时间:2017-09-25 03:11:34

标签: javascript jquery cordova phonegap

这似乎是一个重复的问题,但事实是我已经尝试了几种语法可用于堆栈&其他网站但无济于事。

我正在开发PhoneGap中的第一个应用程序。最初,我使用了document.ready,它在浏览器中运行良好。后来我发现它在app&我需要使用deviceready。

我已经尝试了几种语法来自docs&堆叠,但所有这些都失败了。

另外,lemme知道我是否需要使用任何插件来使用deviceready。

我的代码的测试位表明,我的应用程序中既没有deviceready事件监听器也没有任何jQuery代码。我不知道为什么?

index.html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    ...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="www/js/jquery.touchSwipe.min.js"></script>
<script src="www/js/index.js"></script>
</body>

index.js:

alert('Entered JS') ;
document.addEventListener("deviceready", onDeviceReady, false);

$(document).ready(function () {

    function onDeviceReady() {

        alert ('Device Ready') ;
        //this one is not showing

    };
});

这是我最新的试用版。

感谢所有人帮助我。问题的解决方案如下:

1 - &gt;不要使用URL加载任何css,js或其他文件,因为phoneGap或Cordova默认情况下不允许这样做。 2 - &gt;虽然如果您的应用要求您通过网络发送请求,请使用Cordova的cordova-plugin-whitelist插件将您的网址列入白名单。 3 - &gt;截至代码,如下所示:

index.html:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
<script src="www/js/jquery.min.js"></script>
        <script type="text/javascript" src="www/js/jquery.touchSwipe.min.js"></script>
    <script src="cordova.js"></script>
    </head>
    <body>
        ...
    <!-- Loading js containing deviceready & other functions-->
    <script src="www/js/index.js"></script>
    </body>

可以看出,有必要包括cordova.js。

index.js:

$(document).ready(function() {
    window.isphone = false;
    if(document.URL.indexOf("http://") === -1 
        && document.URL.indexOf("https://") === -1) {
        window.isphone = true;
    }

    if( window.isphone ) {
        document.addEventListener("deviceready", onDeviceReady, false);
    } else {
        onDeviceReady();
    }
});

function onDeviceReady ()
{
    //...
}

以上代码可确保您的应用在网络和网络上都能正常运行设备没有任何变化。如果您只想要基于设备的.js,那么只需使用:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady () { ... } ;

2 个答案:

答案 0 :(得分:0)

我使用require js来加载文件。代码如下

的index.html

<script type="text/javascript">
    require(['index.js'], function () {

    });
</script>

index.js

var MobileApp = function() {
    /*Constructor for Mobile App*/
}


MobileApp.prototype = {
    w_deviceId: 0, 
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        // your code goes here
    },
}

var w_app = new MobileApp();
w_app.initialize();

答案 1 :(得分:0)

你以错误的顺序执行,首先调用jQuery-ready-event然后调用cordova-ready-event:

$(document).ready(function () {
   document.addEventListener("deviceready",onDeviceReady, false);
});

function onDeviceReady(){
       // start your app here.
}