代码改变世界

Cordova - 使用Cordova开发iOS应用实战2（生命周期、使用Safari调试）

2016-04-19 15:54  Komici  阅读(1719)  评论(0)    收藏  举报

Cordova - 使用Cordova开发iOS应用实战2（生命周期、使用Safari调试）

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

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>

程序启动后，页面就会弹出如下消息框：
原文:Cordova - 使用Cordova开发iOS应用实战2（生命周期、使用Safari调试）

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 的“偏好设置”-> “高级” -> “在菜单栏中显示开发菜单”
原文:Cordova - 使用Cordova开发iOS应用实战2（生命周期、使用Safari调试）

 
（3）在Safari菜单项“开发” -> “Simulator”中选择对应的html页面
原文:Cordova - 使用Cordova开发iOS应用实战2（生命周期、使用Safari调试）
 
（4）在打开的“Web检查器” -> “控制台”中就可以看到输出的调试信息。
原文:Cordova - 使用Cordova开发iOS应用实战2（生命周期、使用Safari调试）

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