我整个星期都在使用桌面编写一个 Sencha Touch 2 应用程序来测试它。我刚刚尝试将它与 PhoneGap 集成并在 iOS 模拟器和物理 iOS 设备上进行测试。
我可以看到 ST2 应用程序正在触发“启动”,并确认该应用程序仍然可以在桌面上运行......但 Ext.viewport.add(...) 似乎没有更新屏幕(默认蓝色/闪烁点加载器仍显示)。
我的 index.html 看起来像这样:
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>Yoga Journal's FindYoga</title>
<link href="resources/css/app.css" type="text/css" rel="stylesheet" />
<style type="text/css">
/* trimmed css */
</style>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
<script id="microloader" type="text/javascript" src="sdk/sencha-touch.js"></script>
<script id="microloader" type="text/javascript" src="all-classes.js"></script>
<script id="microloader" type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
我的 app.js 看起来像这样:
Ext.application({
name: 'YogaNow',
controllers: ['Main', 'C1','C2','C3'],
views: ['Main'],
stores: ['S1', 'S2', 'S3','S4'],
models: ['M1', 'M2', 'M3','M4'],
launch: function() {
console.log('launch');
Ext.Viewport.add({
xtype: 'mainpanel',
});
},
});
if(Ext.os.deviceType == 'Desktop') {
setTimeout(function() {
var e = document.createEvent('Events');
e.initEvent('deviceready');
document.dispatchEvent(e);
}, 250);
}
如前所述,该应用程序在桌面上运行良好(没有错误)。如果我从 index.html 中删除 cordova 引用并注释掉“if(Ext.os.deviceType) {...}”,它也会在 iOS(模拟器和设备)下的 Safari 中正常运行。
当在模拟器或设备上运行时,删除对 cordova 的引用还可以使应用程序在 PhoneGap/Cordova shell 中工作。
为什么包含 cordova-2.0.0.js 然后在 Xcode 中构建会导致 ST2 代码不更新视图?