Cordova - 使用Cordova開發iOS應用實戰2（生命週期、使用Safari調試）

時間 2019-11-11

標籤 cordova 使用開發 ios 應用實戰生命週期 safari 調試欄目 Cordova 简体版

原文原文鏈接

Cordova - 使用Cordova開發iOS應用實戰2（生命週期、使用Safari調試）

前文咱們建立了一個簡單的Cordova項目，結構以下：

1，Cordova生命週期事件
（1）deviceready ：當Cordova加載完成會觸發
（2）pause：當應用程序進入到後臺會觸發
（3）resumes：應用程序從後臺進入到前臺會觸發

咱們將首頁 index.html 替換成以下內容：

 
           <!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 中進行開發調試。

 
           <!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>