乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

    • <output id="e9wm2"></output>
    <s id="e9wm2"><nobr id="e9wm2"><ins id="e9wm2"></ins></nobr></s> 
    

    • 
    
    
      



    
      
        
      
            
        
      
        
      
    
      
    
      
        
      
        
      
            
            
      
                
      
                    
                
      
                搜索
            
      

            分享
                
            

            
            
            
            
            
            
            
            

            
        
      
    
      
    
      

    
      

    
      
        
      
        
      
        
      
        
      
            
      
                
      
                    
      jqueryMobile phoneGap
      
                    
                    
                    
                    
      
                         命運(yùn)之輪
                        
                        
                        2012-05-08
                        
                            
                        
                    
      
                    
      
                        
                        
      
                    
      
                    
                    
      
                        
      
                            
                        
      
                        
      
                            
                                
      
                                    
                                        
      

                                        
                                        

                                        經(jīng)過(guò)了一段時(shí)間的學(xué)習(xí)，初步了解了該如何使用jQuery Mobile和 Phone Gap來(lái)開發(fā)一個(gè)Android應(yīng)用程序，也想把這些東西介紹給大家。
      
1、 軟件準(zhǔn)備
      
要進(jìn)行android app的開發(fā)，當(dāng)然需要準(zhǔn)備Java, eclipse和安裝Android SDK，這個(gè)部分網(wǎng)絡(luò)上面很多方法，搜索“安裝Android SDK”即可找到很多答案，所以就不再這里浪費(fèi)口水。
      

      
2、 知識(shí)準(zhǔn)備
      
（1）了解jQuery Mobile這個(gè)js框架，知道怎么組織一個(gè)簡(jiǎn)單的頁(yè)面。
      
官方網(wǎng)站：http:///（記得下載一個(gè)js庫(kù)文件）
      
（2）了解Phone Gap，怎么利用Phone Gap在后面的內(nèi)容也有介紹。
      
官方網(wǎng)站：http:///（同樣記得下載相關(guān)文件）
      
（3）能夠使用jQuery進(jìn)行開發(fā)。
      

      
3、 組織工程目錄
      
（1）打開Eclipse，建立一個(gè)android應(yīng)用工程，見(jiàn)下圖
      

      

      

      
（2）解壓phonegap的壓縮包，可以看到它針對(duì)不懂的應(yīng)用類型進(jìn)行了不同的分類，有android、IOS、Windows Phone等移動(dòng)終端系統(tǒng)，打開其中的android文件夾。
      
（3）在剛才新建的工程的根目錄下新建一個(gè)名為libs的文件夾，找到（1）中android文件夾中的jar包粘貼到剛才的libs文件夾下。
      
（4）將（1）中android文件夾下的xml文件夾整個(gè)粘貼到工程更目錄下的res文件夾下。
      
（5）在工程的assets文件夾下新建文件夾www，這個(gè)文件夾其實(shí)可以看作是phonegap的工程目錄，用來(lái)放js或者h(yuǎn)tml文件。
      
（6）在文件夾www下面新建一個(gè)js文件夾，用來(lái)放置js和css文件；新建文件夾pages用來(lái)放置html文件。（新建html和引入js庫(kù)可以參照?qǐng)D操作）
      
工程目錄如下圖：
      

      

      

      
4　Conding
      
（１）首先打開src下的Java類，修改繼承類為DroidGap（如果找不到這個(gè)類，估計(jì)是忘記將PhoneGap的jar包加入工程的Libraries），并且修改代碼，如下圖
      

      

      

      
（2）打開index.html文件，進(jìn)行編輯，記得開頭要用html5的doctype聲明。我在里面加入兩個(gè)簡(jiǎn)單的jQuery Mobile的頁(yè)面，并且調(diào)用了簡(jiǎn)單的Phone Gap的API：
      
http://docs./en/1.3.0/phonegap_notification_notification.md.html#notification.vibrate
      
代碼如下：
      

      

      

      Html代碼 
復(fù)制代碼 
收藏代碼
      

      

        

      1. <!Doctype html>  
      2. <html> 

      3.     <head> 

      4.         <title>Phone Gap Introduce</title> 

      5.         <meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"/> 

      6.         <link
rel="stylesheet"
type="text/css"
href="../JS/jquery.mobile-1.0rc1.min.css"/> 

      7.         <script
type="text/javascript"
src="../JS/jquery_1_6_4.js"></script> 

      8.         <script
type="text/javascript"
src="../JS/phonegap-1.2.0.js"></script> 

      9.         <script
type="text/javascript"
src="../JS/jquery.mobile-1.0rc1.js"></script> 

      10.         <script
type="text/javascript"> 

      11.             $('#PageOne').live('pageinit', function(event){  
      12.   
      13.                 var showTip = 
function(){  
      14.                     navigator.notification.alert("this is a message from page one!", null, "Message", "Close"); 

      15.                     $(this).die("click");  
      16.                 };  
      17.                   
      18.                 var confirm = 
function(){  
      19.                     navigator.notification.confirm(  
      20.                             'You are the winner!',  // message  

      21.                             null,                   // callback to invoke with index of button pressed 

      22.                             'Game Over',            // title  
      23.                             'Restart,Exit'          // buttonLabels  

      24.                         );  
      25.                     $(this).die("click");  
      26.                 };  
      27.                   
      28.                 var redirectPage =
function(){  
      29.                     $.mobile.changePage("#PageTwo");  
      30.                     $(this).die("click");  
      31.                 };  
      32.                   
      33.                 $(event.target).find('#alert').bind('click', showTip); 

      34.                 $(event.target).find('#confirm').bind('click', confirm); 

      35.                 $(event.target).find('#changePage').bind('click', redirectPage); 

      36.             });  
      37.               
      38.             $('#PageTwo').live('pageshow', function(event){  
      39.                 var showTip = 
function(){  
      40.                     navigator.notification.alert("this is a message from page two!", null, "Message", "Close"); 

      41.                     $(this).die("click");  
      42.                 };  
      43.                   
      44.                 var confirm = 
function(){  
      45.                     navigator.notification.confirm(  
      46.                             'You are the losser!',  // message  

      47.                             null,                   // callback to invoke with index of button pressed 

      48.                             'Game Over',            // title  
      49.                             'Restart,Exit'          // buttonLabels  

      50.                         );  
      51.                     $(this).die("click");  
      52.                 };  
      53.                 $(event.target).find('#alert').bind('click', showTip); 

      54.                 $(event.target).find('#confirm').bind('click', confirm); 

      55.             });  
      56.         </script> 

      57.     </head> 

      58.     <body> 

      59.         <div
id="PageOne"
data-role="page"> 

      60.             <div
data-role="header"
data-backbtn="false"> 

      61.                 <h1>Phone Gap One</h1> 

      62.             </div> 

      63.             <div
data-role="content"> 

      64.                 <div> 

      65.                     <a
href="#"
id="alert"
data-role="button"
data-theme="b">Alert</a> 

      66.                 </div> 

      67.                 <div> 

      68.                     <a
href="#"
id="confirm"
data-role="button"
data-theme="b">Confirm</a> 

      69.                 </div> 

      70.                 <div> 

      71.                     <a
href="#"
id="changePage"
data-role="button"
data-theme="b">Change Page</a> 

      72.                 </div> 

      73.             </div> 

      74.             <div
data-role="footer"> 

      75.                 <div
data-role="navbar"> 

      76.                     <ul> 

      77.                         <li><a
href="#PageOne">Page One</a></li> 

      78.                         <li><a
href="#PageTwo">Page Two</a></li> 

      79.                     </ul> 

      80.                 </div> 

      81.             </div> 

      82.         </div> 

      83.         <div
id="PageTwo"
data-role="page"> 

      84.             <div
data-role="header"
data-backbtn="true"> 

      85.                 <h1>Phone Gap Two</h1> 

      86.                 <a
data-role="button"
data-rel="back">Previous</a> 

      87.             </div> 

      88.             <div
data-role="content"> 

      89.                 <div> 

      90.                     <a
href="#"
id="alert"
data-role="button"
data-theme="b">Alert</a> 

      91.                 </div> 

      92.                 <div> 

      93.                     <a
href="#"
id="confirm"
data-role="button"
data-theme="b">Confirm</a> 

      94.                 </div> 

      95.                 <div> 

      96.                     <a
href="file:///android_asset/www/Pages/pageThree.html"
data-role="button"
data-theme="b">Page Three</a> 

      97.                 </div> 

      98.             </div> 

      99.             <div
data-role="footer"> 

      100.                 <div
data-role="navbar"> 

      101.                     <ul> 

      102.                         <li><a
href="#PageOne">Page One</a></li> 

      103.                         <li><a
href="#PageTwo">Page Two</a></li> 

      104.                     </ul> 

      105.                 </div> 

      106.             </div> 

      107.         </div> 

      108.     </body> 

      109. </html> 

      

      

      1. <!Doctype html>  
      2. <html>  
      3.     <head>  
      4.         <title>Phone Gap Introduce</title>  
      5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
      6.         <link rel="stylesheet" type="text/css" href="../JS/jquery.mobile-1.0rc1.min.css"/>  
      7.         <script type="text/javascript" src="../JS/jquery_1_6_4.js"></script>  
      8.         <script type="text/javascript" src="../JS/phonegap-1.2.0.js"></script>  
      9.         <script type="text/javascript" src="../JS/jquery.mobile-1.0rc1.js"></script>  
      10.         <script type="text/javascript">  
      11.             $('#PageOne').live('pageinit', function(event){  
      12.   
      13.                 var showTip = function(){  
      14.                     navigator.notification.alert("this is a message from page one!", null, "Message", "Close");  
      15.                     $(this).die("click");  
      16.                 };  
      17.                   
      18.                 var confirm = function(){  
      19.                     navigator.notification.confirm(  
      20.                             'You are the winner!',  // message  
      21.                             null,                   // callback to invoke with index of button pressed  
      22.                             'Game Over',            // title  
      23.                             'Restart,Exit'          // buttonLabels  
      24.                         );  
      25.                     $(this).die("click");  
      26.                 };  
      27.                   
      28.                 var redirectPage = function(){  
      29.                     $.mobile.changePage("#PageTwo");  
      30.                     $(this).die("click");  
      31.                 };  
      32.                   
      33.                 $(event.target).find('#alert').bind('click', showTip);  
      34.                 $(event.target).find('#confirm').bind('click', confirm);  
      35.                 $(event.target).find('#changePage').bind('click', redirectPage);  
      36.             });  
      37.               
      38.             $('#PageTwo').live('pageshow', function(event){  
      39.                 var showTip = function(){  
      40.                     navigator.notification.alert("this is a message from page two!", null, "Message", "Close");  
      41.                     $(this).die("click");  
      42.                 };  
      43.                   
      44.                 var confirm = function(){  
      45.                     navigator.notification.confirm(  
      46.                             'You are the losser!',  // message  
      47.                             null,                   // callback to invoke with index of button pressed  
      48.                             'Game Over',            // title  
      49.                             'Restart,Exit'          // buttonLabels  
      50.                         );  
      51.                     $(this).die("click");  
      52.                 };  
      53.                 $(event.target).find('#alert').bind('click', showTip);  
      54.                 $(event.target).find('#confirm').bind('click', confirm);  
      55.             });  
      56.         </script>  
      57.     </head>  
      58.     <body>  
      59.         <div id="PageOne" data-role="page">  
      60.             <div data-role="header" data-backbtn="false">  
      61.                 <h1>Phone Gap One</h1>  
      62.             </div>  
      63.             <div data-role="content">  
      64.                 <div>  
      65.                     <a href="#" id="alert" data-role="button" data-theme="b">Alert</a>  
      66.                 </div>  
      67.                 <div>  
      68.                     <a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a>  
      69.                 </div>  
      70.                 <div>  
      71.                     <a href="#" id="changePage" data-role="button" data-theme="b">Change Page</a>  
      72.                 </div>  
      73.             </div>  
      74.             <div data-role="footer">  
      75.                 <div data-role="navbar">  
      76.                     <ul>  
      77.                         <li><a href="#PageOne">Page One</a></li>  
      78.                         <li><a href="#PageTwo">Page Two</a></li>  
      79.                     </ul>  
      80.                 </div>  
      81.             </div>  
      82.         </div>  
      83.         <div id="PageTwo" data-role="page">  
      84.             <div data-role="header" data-backbtn="true">  
      85.                 <h1>Phone Gap Two</h1>  
      86.                 <a data-role="button" data-rel="back">Previous</a>  
      87.             </div>  
      88.             <div data-role="content">  
      89.                 <div>  
      90.                     <a href="#" id="alert" data-role="button" data-theme="b">Alert</a>  
      91.                 </div>  
      92.                 <div>  
      93.                     <a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a>  
      94.                 </div>  
      95.                 <div>  
      96.                     <a href="file:///android_asset/www/Pages/pageThree.html" data-role="button" data-theme="b">Page Three</a>  
      97.                 </div>  
      98.             </div>  
      99.             <div data-role="footer">  
      100.                 <div data-role="navbar">  
      101.                     <ul>  
      102.                         <li><a href="#PageOne">Page One</a></li>  
      103.                         <li><a href="#PageTwo">Page Two</a></li>  
      104.                     </ul>  
      105.                 </div>  
      106.             </div>  
      107.         </div>  
      108.     </body>  
      109. </html>  

      
要特別注意的是引入js庫(kù)的順序，參照下圖：
      

      

      
即：自己的包和phonegap的js包要放在中間，不然會(huì)出一些錯(cuò)誤，我開發(fā)的時(shí)候是遇見(jiàn)過(guò)這種狀況的，而且jQuery Mobile的官方也是這么要求的。
      

      
再打開pageThree.html，加入如下代碼：
      

      

      

      Html代碼 
復(fù)制代碼 
收藏代碼
      

      

        

      1. <div 
id="PageThree"
data-role="page"> 

      2.     <div 
data-role="header"
data-backbtn="true"> 

      3.         <h1>Phone Gap Three</h1> 

      4.         <a
data-role="button"
data-rel="back">Previous</a> 

      5.     </div> 

      6.     <div 
data-role="content"> 

      7.         <div> 

      8.             <a
href="#"
id="alert"
data-role="button"
data-theme="b">Alert</a> 

      9.         </div> 

      10.         <div> 

      11.             <a
href="#"
id="confirm"
data-role="button"
data-theme="b">Confirm</a> 

      12.         </div> 

      13.     </div> 

      14.     <div 
data-role="footer"> 

      15.         <div
data-role="navbar"> 

      16.             <ul> 

      17.                 <li><a
href="#PageOne">Page One</a></li> 

      18.                 <li><a
href="#PageTwo">Page Two</a></li> 

      19.             </ul> 

      20.         </div> 

      21.     </div> 

      22. </div> 

      

      

      1. <div id="PageThree" data-role="page">  
      2.     <div data-role="header" data-backbtn="true">  
      3.         <h1>Phone Gap Three</h1>  
      4.         <a data-role="button" data-rel="back">Previous</a>  
      5.     </div>  
      6.     <div data-role="content">  
      7.         <div>  
      8.             <a href="#" id="alert" data-role="button" data-theme="b">Alert</a>  
      9.         </div>  
      10.         <div>  
      11.             <a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a>  
      12.         </div>  
      13.     </div>  
      14.     <div data-role="footer">  
      15.         <div data-role="navbar">  
      16.             <ul>  
      17.                 <li><a href="#PageOne">Page One</a></li>  
      18.                 <li><a href="#PageTwo">Page Two</a></li>  
      19.             </ul>  
      20.         </div>  
      21.     </div>  
      22. </div>  

      

      
選擇工程，右鍵run as > android application，你應(yīng)該能夠看到下圖：
      

      

      

      
到這里工程的開發(fā)已經(jīng)完了，希望有興趣的可以具體操作一遍，然后可以修修改改其中的一些東西，這樣才能體會(huì)到這個(gè)開發(fā)過(guò)程是怎么一回事，光看和復(fù)制粘貼是很容易忘記怎么去開發(fā)的。
      

      

      
在我進(jìn)行了一段時(shí)間的開發(fā)之后，我認(rèn)為phonegap的好處在于：
      
（1）一個(gè)應(yīng)用能夠很容易就移植到其他的平臺(tái)，不需要同樣的邏輯寫多種語(yǔ)言版本；
      
（2）容易上手，學(xué)習(xí)了html5和js既可以進(jìn)行開發(fā)；
      
（3）如果學(xué)會(huì)了如何開發(fā)phonegap插件，那么android能夠做的事情，phonegap都能夠幫你完成，其他平臺(tái)開發(fā)也如此。（如何開發(fā)插件已經(jīng)不是這篇blog的內(nèi)容了）
      
同時(shí)我感覺(jué)phonegap讓我最不爽的一點(diǎn)就是調(diào)試太麻煩了，要在模擬器上才能看到效果到底對(duì)不對(duì)。
      

      
同時(shí)附上開發(fā)簡(jiǎn)易順序：
      
（1）把phonegap的jar包和xml文件放到工程下的正確目錄；
      
（2）修改src下的android默認(rèn)類，參照4 （1）；
      
（3）在aseets下面建立工程的根目錄www，并在其中放入js、html、image、css等普通的web文件；
      
（4）只需要在index頁(yè)面加入js包和css文件，其他頁(yè)面只需要組織成一個(gè)簡(jiǎn)單的jQuery Mobile頁(yè)面。
      
（5）調(diào)用一些特殊的api時(shí)，需要注意申請(qǐng)android許可?。ò俣纫幌戮涂梢暂p松解決）
      

      
最后一個(gè)壓縮包是工程壓縮包。
                                          		
                                
      
                                  
                        
      
                    
      



                
      
                
      
                    
                    
                        
      
                            
                                
        
                                    		
                        
        
                            
                
        
                
        
                
                
                
        
                
        


                

                
        本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
        
                
                

                
        
                    轉(zhuǎn)藏
                    
                    
                    
                    
                    
                    
                        分享
                        
                        
                    
                    獻(xiàn)花（0）
                            
                
        
                
                
                
        
                    
        
                        
                        
                    
        
                
        

            
        

            
        

            
        
                
                
                
        
                
        
                    
        
                        
        0條評(píng)論
        
                        
                        
                        
        
                            
                            
        
                                發(fā)表
                            
        
                        
        
                        
                    
        
                    
                    
        請(qǐng)遵守用戶 評(píng)論公約
        
                    
                    
          
                    
        
                    
        
                    
        
                    
                
        
               
                
        
                    
        
                        類似文章
                        更多