Question

我在Sencha Touch 2.1中编写了一个应用程序，其中我将一个包构建嵌入到Cordova / PhoneGap 2.5.0中，并在xCode中编译以在iOS Simulator / iOS上运行。我已经将PGSQLite插件添加到PhoneGap，并为Sencha构建了自己的PhoneGap / SQLite代理，我在我的一些商店中使用了它。*

问题：当我将一个软件包构建嵌入到PhoneGap并在iOS模拟器中运行时，我发现在Sencha初始化之前Cordova没有加载。我看到这个是因为我在我的Sencha应用程序中调用Cordova.exec我在我的代理初始化中调用会导致错误，告诉我无法找到Cordova对象。

我稍后在我的应用程序中成功使用Cordova.exec来运行PhoneGap的Childbrowser插件之类的东西，并且它可以工作。但是在应用程序执行的早期阶段使用Cordova.exec，即初始化，还不能保证Cordova对象将被实例化。

已经尝试过：我已经尝试过以下方法：

我尝试将我的Sencha应用的开发者版本嵌入到PhoneGap中。虽然这很有效，但我不想将我的开发版本部署为我发布的应用程序，因为它效率低下并且占用了大量空间。然而，我从这个实验中了解到，Sencha Touch微型加载器在封装和生产构建上的工作方式是在Sencha之后加载PhoneGap。在Sencha加载包构建之后检查DOM时，可以清楚地看到这一点。
我已将app.json文件配置为包含PhoneGap和我在app.js和Sencha Touch框架之前的插件。播放我的app.json中的JS文件引用顺序没有似乎影响了加载顺序。
我也尝试过创建脚本加载器，如here所述（堆栈溢出）。然后我运行了Cordova的脚本加载器，然后运行回调，为我的插件运行脚本加载器，和然后，最后，在回调中，运行了Sencha Touch 微加载。这导致了错误。另外，我不得不这样做在Sencha构建我的文件后，在我的index.html文件中手动设置它包。这似乎是不可接受的。

我在寻找什么：我正在寻找以下答案：

有没有办法配置Sencha的微型加载器或我的Sencha应用程序，以便确保在Sencha的微型加载器运行之前加载Cordova？
有没有办法设置它，以便使用Sencha Cmd仍然有效，在构建应用程序后我不必在我的index.html文件中乱砍？

注意： *请不要建议我使用现有的，所谓的Sencha SQLite代理。我特意选择了我的方法，因为虽然我很欣赏Sencha Touch 2的SQLite代理（即this）的现有工作，但它实际上是一个WebSQL代理，它不能在iOS上的SQLite中本地存储。我的代理使用PhoneGap的PGSQLite插件在iOS上的SQLite中本地存储数据。当我有机会清理它并从我的代码中解开它时，我打算开源它。

Answer 1

我最终通过构建自定义加载器来解决这个问题。我不确定是否有更多的Sencha-ish方法可以做到这一点，但这里有我所做的细节，这确实有效，以防其他人想要确保PhoneGap完全加载在包和生产版本中在Sencha中运行任何东西之前。（在PhoneGap打包Sencha应用程序的所有场景中可能就是这种情况。）

我的index.html文件：

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <!-- Load Cordova first. Replace with whatever version you are using -->
    <script type="text/javascript" src="cordova.js"></script>    
    <script type="text/javascript" charset="utf-8">
        function onBodyLoad() {
            // Check for whatever mobile you will run your PhoneGap app
            // on. Below is a list of iOS devices. If you have a ton of
            // devices, you can probably do this more elegantly.
            // The goal here is to only listen to the onDeviceReady event
            // to continue the load process on devices. Otherwise you will
            // be waiting forever (literally) on Desktops.
            if ((navigator.platform == 'iPad') ||
                (navigator.platform == 'iPhone') ||
                (navigator.platform == 'iPod') ||
                (navigator.platform == 'iPhone Simulator') ||
                (navigator.platform == 'iPadSimulator')
               ) {
              // Listening for this event to continue the load process ensures
              // that Cordova is loaded.
              document.addEventListener("deviceready", onDeviceReady, false);
            } else {
                // If we're on Desktops, just proceed with loading Sencha.
                loadScript('loader.js', function() {
                    console.log('Finished loading scripts.');
                });
            }
        };

        // This function is a modified version of the one found on
        // StackOverflow, here: http://stackoverflow.com/questions/756382/bookmarklet-wait-until-javascript-is-loaded#answer-756526
        // Using this allows you to wait to load another script by
        // putting the call to load it in a callback, which is
        // executed only when the script that loadScript is loading has
        // been loaded.
        function loadScript(url, callback)
        {
            var head = document.getElementsByTagName("head")[0];
            var script = document.createElement("script");
            script.src = url;

            // Attach handlers for all browsers
            var done = false;
            script.onload = script.onreadystatechange = function()
            {
                if( !done && ( !this.readyState 
                            || this.readyState == "loaded" 
                            || this.readyState == "complete") )
                {
                    done = true;

                    // Continue your code
                    callback();
                }
            };

            head.appendChild(script);


        }

        function onDeviceReady() {
            console.log("[PhoneGap] Device initialized.");
            console.log("[PhoneGap] Loading plugins.");

            // You can load whatever PhoneGap plugins you want by daisy-chaining
            // callbacks together like I did with pgsqlite and Sencha.
            loadScript('pgsqlite_plugin.js', function() {
                console.log("[Sencha] Adding loader.");

                // The last one to load is the custom Sencha loader.
                loadScript('loader.js', function() {
                    console.log('Finished loading scripts.');
                });
            });

        };
    </script>

    <meta charset="UTF-8">
    <title>Sencha App</title>   
</head>
<!-- Don't forget to call onBodyLoad() in onLoad -->
<body onLoad="onBodyLoad();">
</body>
</html>

接下来，在index.html中的文档根目录中的loader.js中创建自定义加载程序。这个很大程度上基于Sencha附带的开发微装载机。很多道具给他们：

console.log("Loader included.");

(function() {
    function write(content) {
        document.write(content);
    }

    function meta(name, content) {
        write('<meta name="' + name + '" content="' + content + '">');
    }

    var global = this;

    if (typeof Ext === 'undefined') {
        var Ext = global.Ext = {};
    }

    var head = document.getElementsByTagName("head")[0];

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'app.json', false);
    xhr.send(null);

    var options = eval("(" + xhr.responseText + ")"),
        scripts = options.js || [],
        styleSheets = options.css || [],
        i, ln, path;

    meta('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');
    meta('apple-mobile-web-app-capable', 'yes');
    meta('apple-touch-fullscreen', 'yes');

    console.log("Loading stylesheets");
    for (i = 0,ln = styleSheets.length; i < ln; i++) {
        path = styleSheets[i];

        if (typeof path != 'string') {
            path = path.path;
        }

        var stylesheet = document.createElement("link");
        stylesheet.rel = "stylesheet";
        stylesheet.href = path;

        head.appendChild(stylesheet);
    }

    for (i = 0,ln = scripts.length; i < ln; i++) {
        path = scripts[i];

        if (typeof path != 'string') {
            path = path.path;
        }

        var script = document.createElement("script");
        script.src = path;
        head.appendChild(script);
    }

})();

请注意，您的index.html文件不包含#microloader script元素。那是因为你应该拿出来并使用自定义加载器。

有了这一切，你就可以顺利航行，因为你知道在你的Sencha javascript开始做事之前整个PhoneGap环境已经到位。

确保在Sencha加载器之前加载phonegap和插件

1 个答案: