文章/答案/技术大牛

发布

社区首页 >问答首页 >Cordova/appFramework应用程序在iOS上显示为空白

问Cordova/appFramework应用程序在iOS上显示为空白
EN

Stack Overflow用户

提问于 2014-05-14 03:25:29

回答 1查看 569关注 0票数 1

我有一个非常简单的混合移动应用程序开发与科多瓦和appFramework。

index.html看起来像这样

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=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" />

    <link rel="stylesheet" type="text/css" href="css/af/main.css"  />
    <link rel="stylesheet" type="text/css" href="css/af/appframework.css" />
    <link rel="stylesheet" type="text/css" href="css/af/lists.css"  />
    <link rel="stylesheet" type="text/css" href="css/af/forms.css"  />
    <link rel="stylesheet" type="text/css" href="css/af/buttons.css"  />
    <link rel="stylesheet" type="text/css" href="css/af/badges.css"  />      
    <link rel="stylesheet" type="text/css" href="css/af/grid.css"  />

    <link rel="stylesheet" type="text/css" href="css/af/android.css"  />
    <link rel="stylesheet" type="text/css" href="css/af/win8.css"  />
    <link rel="stylesheet" type="text/css" href="css/af/bb.css"  />
    <link rel="stylesheet" type="text/css" href="css/af/ios.css"  />
    <link rel="stylesheet" type="text/css" href="css/af/ios7.css"  />
    <link rel="stylesheet" type="text/css" href="css/af/tizen.css"  />

    <title>Cordova Application</title>
    <script type="text/javascript" charset="utf-8"
    src="js/vendor/appframework.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/plugins/af.scroller.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/plugins/af.css3animate.js"></script>

    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/appframework.ui.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/fade.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/flip.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/pop.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/slide.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/slideDown.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/slideUp.js"></script>
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/plugins/af.slidemenu.js"></script>

    <script>
        $.ui.ready(function () {
            console.log("UI Ready!!!");
        });
        $(document).ready(function() {
            console.log('Document Ready...');
            alert('Document Ready...');
        });
    </script>
</head>
<body>
    <div id="afui">
        <div id="header">
        </div>
        <div id="content">
            <div data-title="Home" class="panel"
                                 id="main" selected="true">
                <span>THIS is the HOME Page!</span>
            </div>
            <div data-title="Second Page" class="panel" id="second">
            </div>
        </div>
        <nav>
            <div class="title">Nav Home</div>
            <ul>
                <li><a class="icon home mini"
                                    href="#main">Home Link</a></li>
                <li><a class="icon mini"
                                    href="#second">Second Link</a></li>
            </ul>
        </nav>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
</body>
</html>

这将正确显示，甚至在Safari或Chrome桌面浏览器中打开导航时也会连接起来。

但是，如果我在iOS或Android模拟器中运行它，我就会看到警报‘文档就绪’，并在该空白页之后。不显示主面板。

下面是我运行模拟器所做的工作。

 cordova emulate ios
 cordova emulate android

即使我直接从平台构建中打开index.html文件，它们也会在桌面浏览器上正确显示。

我对这一切很陌生，所以我可能错过了这里的一步。任何帮助都将不胜感激。

cordova

cordova-3

hybrid-mobile-app

appframework

ios

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-05-14 17:55:10

你不需要所有的支离破碎的应用程序js和css文件，你可以只包含2个css和1个js文件，下面是更新的代码，它作为安卓上的cordova应用程序工作，我用英特尔XDK构建了Cordova应用程序。

<!DOCTYPE html>
<html>
<head>
    <title>XDK</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />

    <link rel="stylesheet" type="text/css" href="css/af.ui.css" />
    <link rel="stylesheet" type="text/css" href="css/icons.css" />
    <script type="text/javascript" charset="utf-8" src="js/appframework.ui.min.js"></script>

    <script>
        $.ui.ready(function () {
            console.log("UI Ready!!!");
        });
        $(document).ready(function() {
            console.log('Document Ready...');
            alert('Document Ready...');
        });
    </script>
</head>
<body>
    <div id="afui">
        <div id="header">
        </div>
        <div id="content">
            <div title="Home" class="panel" id="main" selected="true">
                <span>THIS is the HOME Page!</span>
            </div>
            <div title="Second Page" class="panel" id="second">
            </div>
        </div>
        <nav>
            <div class="title">Nav Home</div>
            <ul class="list">
                <li><a class="icon home mini" href="#main">Home Link</a></li>
                <li><a class="icon mini" href="#second">Second Link</a></li>
            </ul>
        </nav>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23645121

复制

相似问题

问Cordova/appFramework应用程序在iOS上显示为空白
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Cordova/appFramework应用程序在iOS上显示为空白EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Cordova/appFramework应用程序在iOS上显示为空白
EN