phonegap deviceready事件 - 波纹模拟器

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 Platform版本设置为2.0（左窗格>平台>版本：从1.0更改为2.0）。 这很傻，我用这个URL给Ripple打电话

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

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

更多细节也在我的博客上 。

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

仅供参考，将查询字符串中的cordova-xxx更改为应用程序中安装的版本，也可以使设备准备好在更新版本的纹理中触发http://www.raymondcamden.com/index.cfm/2013/11/5/Ripple-是 - 重生 。

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，你仍然必须指定它。