Cordova/appFramework 应用程序在 iOS 上显示为空白
Posted
技术标签:
【中文标题】Cordova/appFramework 应用程序在 iOS 上显示为空白【英文标题】：Cordova/appFramework app shows up blank on iOS 【发布时间】：2014-05-14 03:25:29 【问题描述】：我有一个使用 Cordova 和 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 文件，它们也会在桌面浏览器上正确显示。
我对这一切都很陌生，所以我可能在这里遗漏了一些步骤。任何帮助将不胜感激。
【问题讨论】：
【参考方案1】：你不需要所有碎片化的 appframework js 和 css 文件，你可以只包含 2 个 css 和 1 个 js 文件，这里是更新的代码，它在 android 上作为 cordova 应用程序工作，我用 Intel 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>
【讨论】：
非常感谢你的努力，因为我看不出你的 HTML 和我的 HTML 有什么不同，除了删除一些多余的 CSS 引用，我应该接受它，因为它是 XDK 构建的在你的情况下工作？那么在我的情况下，也许 Cordova 构建缺少一些东西？ 我没有太多使用cordova cli，你必须做一些配置并设置config.xml才能正确构建。 IntelXDK 让这一切变得简单。您的代码是正确的，与构建设置有关 我使用 XDK 创建了一个项目并比较了差异，我认为问题在于我包含 appframework.*.js 文件的方式，XDK 包含 appframework.ui.min.js，如果我包括那个（和css文件），那么事情就很好了。问题是，我找不到要下载的 min 文件，除了 CDN，下载的包不包含如何构建它的说明。虽然 XDK 是一个很好的工具，但我不喜欢 appFramework 仅在使用它构建项目时才有效。 XDK 不包含 appframework 文件，appframework 应该独立工作，如果没有错误，我会检查 谢谢@krisrak，我说 appframework.ui.min.js 不在下载中是错误的。它在构建文件夹中。因此，它可以在没有 XDK 的情况下工作是正确的。再次感谢您的努力。以上是关于Cordova/appFramework 应用程序在 iOS 上显示为空白的主要内容，如果未能解决你的问题，请参考以下文章
Qt程序,“由于应用程序配置不正确，应用程序未能启动 重新安装应用程序可能会纠正这个问题”,高手请指点
将 iPhone 应用程序转换为通用应用程序时应用程序图标不显示