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

问题描述：

我在Sencha Touch 2.1中编写了一个应用程序，其中我将一个包构建嵌入到Cordova/PhoneGap 2.5.0中，并在xCode中编译以在iOS Simulator/iOS上运行。我已经加入了PGSQLite插件的PhoneGap，并建立了自己的PhoneGap/SQLite的代理为煎茶，我在我的几个店铺的使用*确保在Sencha加载器之前加载phonegap和插件

问题：当我嵌入包建成的PhoneGap和运行在iOS Simulator中，我看到Cordova在Sencha初始化之前不会加载。我看到这个是因为我在我的代理初始化过程中在我的Sencha应用中创建的Cordova.exec的调用导致错误，告诉我无法找到Cordova对象。

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

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

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

我在寻找：我寻找答案如下：

是否有配置煎茶的微加载或一般我的煎茶的应用程序的方式，这样科尔多瓦保证在Sencha的小型装载机运行之前装载？
有没有一种方法来设置这个，以便使用Sencha Cmd仍然有效，并且在构建应用程序之后我不必在我的index.html文件中进行破解？

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

答

我最终通过构建自定义加载程序来解决这个问题。我不确定是否有更多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 
     // *, here: http://*.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>

接下来，在你的文档根目录创建loader.js定制装载机，沿着您的index.html。这个主要基于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文件不包含#microloaderscript元素。那是因为你应该把它拿出来并使用你的自定义加载器。

随着所有这些，你将能够顺利地航行，知道整个PhoneGap环境在你的Sencha javascript开始做事之前已经到位。

加载速度有多快？ – fct

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

相关推荐