Question

你好我在初始的电话间隙'deviceready'事件处理程序没有被正确触发，在ripple chrome扩展phonegap模拟器中遇到一些问题。

<script src="xui-2.0.0.js" type="text/javascript" charset="utf-8"></script> 
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<!--
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
-->
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script>
<!-- <script type="text/javascript" charset="utf-8" src="main.js"></script> -->
<script>
    function onLoad() {
        //console.log(document);
        /*document.addEventListener('deviceready',function() {
                console.log('PHONEGAP_READY');
            },false);*/
        console.log('ON_LOAD');
        x$(document).on('deviceready', function() {
                console.log('PHONEGAP_READY');
            }, false);
    }

</script>

所以问题是console.log（'PHONEGAP_READY'）永远不会运行。我在这里使用XUI只是试试官方波纹手机屏幕演示的工作方式（在他们的页面上发布的）。既不是，也不是document.addEventListener（），工作...奇怪的是，Chrome控制台输出显示“PhoneGap :: fired deviceready event！”所以我假设事件真的在解雇，但事件处理程序本身没有被调用...
感谢任何线索

感谢

Answer 1

ripple如何模拟phonegap的运行时有一个怪癖：docs here

ripple将在文档加载之前注入phonegap运行时，如果在应用程序中包含phonegap.js文件，它将覆盖纹波仿真环境，这可能会导致问题。

尝试从页面中删除phonegap源并重新加载以查看是否有帮助。

Answer 2

我花了好几个小时试图解决这个问题。有用的是在Ripple UI中手动将Cordova平台版本设置为2.0（左窗格＆gt;平台＆gt;版本：从1.0更改为2.0）。这很愚蠢，我用这个URL打电话给Ripple

http://localhost?enableripple=cordova-2.7.0-Nexus4

但我仍然需要手动更改设置以最终运行它。那是因为Ripple不知道任何高于2.0.0的版本，这使得它只是在UI中将平台版本设置为1.0.0 ......然后它只是使用它。

更多细节on my blog。

Answer 3

尝试http://localhost:8080/index.html?enableripple=cordova-2.0.0，这适用于我启动deviceready事件

Answer 4

在您的html文件中包含Cordova Script，如下所示。

    <script  src="cordova-2.7.0.js"></script>

Answer 5

FYI将查询字符串中的cordova-x.x.x更改为您应用中安装的版本也会导致设备准备好在更新版本的涟漪http://www.raymondcamden.com/index.cfm/2013/11/5/Ripple-is-Reborn中启动。

http://localhost:4400/?enableripple=cordova-3.0.0 (Default, not firing)

http://localhost:4400/?enableripple=cordova-3.2.0 (Changed to my version, firing)

Answer 6

基于以上建议，这里是Visual Studio 2015 RC cordova应用程序的完整index.js（编辑提供的模板）：

(function () {
    "use strict";
    function bootstrapAngular() {
    console.log("Bootstrapping AngularJS");
    // This assumes your app is named "app" and is on the body tag: <body ng-app="app">
    // Change the selector from "body" to whatever you need
    var domElement = document.querySelector('body');
    // Change the application name from "app" if needed
    angular.bootstrap(domElement, ['app']);
    }
    if (document.URL.indexOf('http://') === -1
        && document.URL.indexOf('https://') === -1) {
        console.log("URL: Running in Cordova/PhoneGap");
        //document.addEventListener("deviceready", bootstrapAngular, false);
        document.addEventListener('deviceready', onDeviceReady.bind(this), false);
    } else {
        console.log("URL: Running in browser");
        bootstrapAngular();
    }
    function onDeviceReady() {
        // 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.
        bootstrapAngular();
    };
    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };
    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
} )();

另外，他们并没有真正指出它，但你不应该在你的身体标签上放任何东西来使这项工作。功能为你做到了。最后，不要忘记在某处应用ng-controller，你仍然需要指定它。

phonegap deviceready事件 - 波纹模拟器

6 个答案: