Cordova/appFramework应用程序在iOS上显示为空白
我用Cordova和appFramework开发了一个非常简单的混合移动应用程序 index.html如下所示Cordova/appFramework应用程序在iOS上显示为空白,ios,cordova,cordova-3,hybrid-mobile-app,appframework,Ios,Cordova,Cordova 3,Hybrid Mobile App,Appframework,我用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 wi
<!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>
即使我直接从平台构建打开index.html文件,它们也会正确显示在桌面浏览器上
我对这一切都很陌生,所以我可能错过了一些步骤。任何帮助都将不胜感激。你不需要所有的appframework js和css文件,你只需要包含2个css和1个js文件,这里是更新的代码,它在android上作为cordova应用程序工作,我用构建了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>
XDK
$.ui.ready(函数(){
log(“UI就绪!!!”;
});
$(文档).ready(函数(){
log('documentready…');
警报(“文件准备就绪…”);
});
这是主页!
导航主页
非常感谢您的努力,因为我看不出您的HTML和我的HTML之间有什么区别,除了删除一些多余的CSS引用之外,我是否应该认为是XDK构建使它在您的案例中起作用?因此,也许Cordova build在我的案例中缺少了一些东西?我没有太多使用Cordova cli,您必须进行一些配置,并设置config.xml以获得正确的构建。IntelXDK使这变得容易。您的代码是正确的,有一些构建设置我使用XDK创建了一个项目,并比较了两者的差异,我认为问题在于我包含appframework.*.js文件的方式,XDK包含appframework.ui.min.js,如果我包含了它(和css文件),那么一切都很好。问题是,除了CDN之外,我找不到要下载的min文件,而且下载的包中没有关于如何构建它的说明。虽然XDK是一个很好的工具,但我不喜欢appFramework只在使用它构建项目时才工作。XDK不包括appFramework文件,appFramework应该独立工作,如果没有bug,我会检查Thank@krisrak,我说appFramework.ui.min.js不在下载中是错误的。它在build文件夹中。因此,它在没有XDK的情况下工作是正确的。再次感谢你的努力。
<!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>