
Cordova - 使用Cordova开发iOS应用实战2(生命周期、使用Safari调试)
前文我们创建了一个简单的Cordova项目,结构如下:

1,Cordova生命周期事件
(1)deviceready :当Cordova加载完成会触发
(2)pause:当应用程序进入到后台会触发
(3)resumes:应用程序从后台进入到前台会触发
我们将首页 index.html 替换成如下内容:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html> <html> <head>
<title>Pause Example</title>
<meta http-equiv= "Content-type" content= "text/html; charset=utf-8" >
<script type= "text/javascript" charset= "utf-8" src= "cordova.js" ></script>
<script type= "text/javascript" charset= "utf-8" >
//页面加载后添加各事件监听
function onLoad() {
document.addEventListener( "deviceready" , onDeviceReady, false );
document.addEventListener( "resume" , onResume, false );
document.addEventListener( "pause" , onPause, false );
}
//Cordova加载完毕
function onDeviceReady() {
alert( "Cordova加载完毕!" );
}
//进入后台
function onPause() {
console.log( "应用进入到后台!" );
}
//恢复到前台
function onResume() {
alert( "应用回到前台运行!" );
}
</script>
</head>
<body onload= "onLoad()" >
</body>
</html> |
程序启动后,页面就会弹出如下消息框:

2,使用Safari进行调试
(1)我们把 index.html 里的内容做如下修改。
不再使用 alert() 方法弹出调试信息,而是使用 console.log() 方法输出,后面在 Safari 中进行开发调试。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html> <html> <head>
<title>Pause Example</title>
<meta http-equiv= "Content-type" content= "text/html; charset=utf-8" >
<script type= "text/javascript" charset= "utf-8" src= "cordova.js" ></script>
<script type= "text/javascript" charset= "utf-8" >
//页面加载后添加各事件监听
function onLoad() {
document.addEventListener( "deviceready" , onDeviceReady, false );
document.addEventListener( "resume" , onResume, false );
document.addEventListener( "pause" , onPause, false );
}
//Cordova加载完毕
function onDeviceReady() {
console.log( "Cordova加载完毕!" );
}
//进入后台
function onPause() {
console.log( "应用进入到后台!" );
}
//恢复到前台
function onResume() {
console.log( "应用回到前台运行!" );
}
</script>
</head>
<body onload= "onLoad()" >
</body>
</html> |
(2)打开 Safari 的“偏好设置”-> “高级” -> “在菜单栏中显示开发菜单”

(3)在Safari菜单项“开发” -> “Simulator”中选择对应的html页面

(4)在打开的“Web检查器” -> “控制台”中就可以看到输出的调试信息。

原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1137.html