Cordova应用显示空白页面

cordova app showing blank page

本文关键字：空白 显示 应用 Cordova      更新时间：2023-09-26

我想开发一个cordova应用程序与多个视图使用一个单一的页面借助车把 javascript库。我用phonegap创建了一个简单的应用程序，命名为MyFirstApp，然后编辑www目录下的index.html文件。但是当我在网络浏览器中运行应用程序时没有显示。有人看出我哪里做错了吗?

index . html 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>

    </head>
    <body>
        <div class="mainpage">
            <!--This is our template. -->
            <!--Data will be inserted in its according place, replacing the brackets.-->
            <script id="address-template" type="text/x-handlebars-template">
              <p>You can find me in {{city}}. My address is {{number}} {{street}}.</p>
            </script>
            <!--Your new content will be displayed in here-->
            <div class="content-placeholder"></div>
        </div>
        <script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/handlebars-v4.0.2.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

index.js 

    var app = {
    initialize: function() {
        this.bindEvents();
    },bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },onDeviceReady: function() {
        // Grab the template script
      var theTemplateScript = $("#address-template").html();
      // Compile the template
      var theTemplate = Handlebars.compile(theTemplateScript);
      // Define our data object
      var context={
        "city": "London",
        "street": "Baker Street",
        "number": "221B"
      };
      // Pass our data to the template
      var theCompiledHtml = theTemplate(context);
      // Add the compiled html to the page
      $('.content-placeholder').html(theCompiledHtml);
    }
};

使用这个作为你的index.js:

var app = {
    initialize: function() {
        this.bindEvents();
    },bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },onDeviceReady: function() {
        // Grab the template script
      var theTemplateScript = $("#address-template").html();
      // Compile the template
      var theTemplate = Handlebars.compile(theTemplateScript);
      // Define our data object
      var context={
        "city": "London",
        "street": "Baker Street",
        "number": "221B"
      };
      // Pass our data to the template
      var theCompiledHtml = theTemplate(context);
      // Add the compiled html to the page
      $('.content-placeholder').html(theCompiledHtml);
    }
};
相关文章：