亚洲婷婷丁香,亚洲精品一区二区久久这里,91在线看

Mobile 應(yīng)用基于 PhoneGap框架 搭建教程是本文要介紹的內(nèi)容，主要是來學(xué)習(xí) PhoneGap框架 的應(yīng)用，隨著Google的 Android 手機和蘋果的 iPhone 手機成為手機市場的主流，越來越多的開發(fā)者加入到移動應(yīng)用開發(fā)的大軍中，但是基于 Java 的 Android 應(yīng)用和基于C語言的 iPhone應(yīng)用讓開發(fā)者開發(fā)應(yīng)用的時候甚為煩惱，同樣的應(yīng)用必須用不同的語言開發(fā)兩次才能支持不同的手機平臺。

為了進一步簡化移動應(yīng)用的開發(fā)，Nitobi公司推出了一套開源的移動應(yīng)用解決方案 PhoneGap 。本文主要介紹PhoneGap的基礎(chǔ)知識，并通過一個示例介紹 PhoneGap 開發(fā)測試環(huán)境的搭建以及PhoneGap項目的開發(fā)和部署，并對PhoneGap提供的主要API做簡單介紹.

PhoneGap簡介

PhoneGap是一款基于HTML5的開源的手機應(yīng)用開發(fā)框架，它允許用戶僅僅通過Web（HTML、JavaScript）技術(shù)就可以訪問移動設(shè)備的本地應(yīng)用、API以及應(yīng)用程序庫等。PhoneGap提供了一系列豐富的API供開發(fā)者調(diào)用，這些API抽象和簡化了移動設(shè)備本身提供的復(fù)雜的API，使開發(fā)新的手機應(yīng)用和調(diào)用已有的手機功能更簡單方便。另外，PhoneGap真正實現(xiàn)了writtenonce,runeverywhere,并且它采用了W3C標準，能和jQueryMobile結(jié)合在一起使用。

PhoneGap特性

目前，PhoneGap已實現(xiàn)對iPhone/iPad、Android、Symbian、Palm、黑莓各版本絕大部分功能的支持,其中官方文檔中對其支持的詳細說明如圖1所示：

圖1.PhoneGapAPI對各手機平臺的支持

PhoneGapAPI簡介

Accelerometer

Accelerometer是一個設(shè)備移動感應(yīng)器，它能夠檢測到設(shè)備相對于原來位置的移動，并用三維坐標x，y，z表示。該API提供三個方法：

accelerometer.getCurrentAcceleration：得到用x,y,z值表示的當(dāng)前設(shè)備的移動加速度。

accelerometer.watchAcceleration：以特定的時間間隔得到用x,y,z值表示的當(dāng)前設(shè)備的移動加速度。

accelerometer.clearWatch：取消對設(shè)備移動加速度的監(jiān)控。

Camera

Camera提供了訪問和操作移動設(shè)備的默認攝像頭的API，包括用攝像頭動態(tài)攝取圖片或從移動設(shè)備的相冊中獲取圖片。

camera.getPicture():該方法通過配置不同的參數(shù)實現(xiàn)動態(tài)用攝像頭獲取圖片或從已有的相冊中獲取圖片，返回參數(shù)也可以根據(jù)設(shè)置不同的參數(shù)返回圖片的二進制數(shù)據(jù)或者圖片的路徑。

Compass

Compass提供了獲取移動設(shè)備指向的API。

compass.getCurrentHeading：獲取當(dāng)前移動設(shè)備的指向。

compass.watchHeading：以特定的時間間隔獲取當(dāng)前設(shè)備的指向。

compass.clearWatch：取消對當(dāng)前設(shè)備指向的監(jiān)控。

Contacts

Contacts提供了訪問和操作移動設(shè)備通訊錄數(shù)據(jù)庫的API，包括獲取聯(lián)系人列表（支持過濾條件），增加，刪除，編輯通訊錄聯(lián)系人等。

contacts.create：創(chuàng)建一個新的聯(lián)系人。

contacts.find：查找聯(lián)系人。

Contacts模塊包括幾個重要的對象：Contact，ContactName，ContactField，ContactAddress，ContactOrganization，ContactFindOptions，ContactError，通過這些對象和create、init方法共同實現(xiàn)對通訊錄的復(fù)雜操作，詳細的介紹可以參考PhoneGap的官方文檔。

Device

Device提供了訪問當(dāng)前移動設(shè)備參數(shù)的API，包括設(shè)備名、設(shè)備系統(tǒng)版本、設(shè)備平臺等。

File

File提供了訪問和操作移動設(shè)備文件系統(tǒng)的API，其中FileReader和FileWriter提供了對設(shè)備文件的讀寫API。

GeoLocation

GeoLocation提供了訪問移動設(shè)備的GPS感應(yīng)器的API。

Media

Media提供了訪問和操作移動設(shè)備語音文件的API，包括播放、停止、錄音等。

NetWork

Network提供了訪問移動設(shè)備移動網(wǎng)絡(luò)和無線網(wǎng)絡(luò)設(shè)置的API。

Notification

Notification提供了一組API來模擬移動設(shè)備的一些可視（對話框）、可聽（提示音）、可感覺（震動）的功能。

notification.alert:彈出警告或者對話框。

notification.confirm：彈出確認框。

notification.beep：播放設(shè)備的提示音。

notification.vibrate：使設(shè)備震動一段時間。

Storage

Store提供了訪問移動設(shè)備的存儲設(shè)備的API。

搭建PhoneGap開發(fā)化境

PhoneGap 支持開發(fā)適用于 iPhone 、 Android 、Palm等不同平臺的應(yīng)用，對不同的平臺開發(fā)環(huán)境也有所不同，本文以 Android 為例搭建開發(fā)環(huán)境和創(chuàng)建應(yīng)用。在搭建環(huán)境之前，我們需要先下載一些必須的工具和SDK，所有的工具都可以免費下載：

下載并安裝Eclipse3.4+。

下載并安裝 Android SDK。

下載并安裝ADTPluginforEclipse。

下載并解壓 PhoneGap 。

安裝好Eclipse、AndroidSDK和ADT插件之后，還需要做一些簡單的配置才可以創(chuàng)建項目。圖2顯示了如何在Eclipse里配置AndroidSDK的路徑，圖3和圖4顯示了如何在Eclipse里配置AVD（AndroidVirtualDevice）。

圖2.在Eclipse里配置AndroidSDK路徑

圖3.AndroidSDKandAVDManager菜單

圖4.在Eclipse里配置AVD

如果需要使用 Android 手機測試應(yīng)用，還需要安裝手機對應(yīng)型號的驅(qū)動器，把手機和開發(fā)機器用USB線連接，并且正確設(shè)置手機的開發(fā)調(diào)試功能。(Settings>Applications>Development)

創(chuàng)建一個簡單的PhoneGap應(yīng)用

創(chuàng)建一個新 Android 工程，如圖5所示：

圖5.創(chuàng)建新 Android 工程

完善項目結(jié)構(gòu)

在項目根目錄下創(chuàng)建/libs和/assets/www目錄，并從解壓后的 PhoneGap 目錄中拷貝phonegap.js(可能帶有版本信息)到/assets/www目錄下，拷貝phonegap.jar（可能帶有版本信息）到libs目錄。修改項目的JavaBuildPath信息，把libs下的jar文件包含在編譯路徑中。

修改項目文件實現(xiàn)簡單的獲取設(shè)備聯(lián)系人列表功能

com.phonegap.App.java

更改App.java文件為清單1的內(nèi)容：

清單1.App.java類

    
      
        
          
            packagecom.phonegap.sample; ?
          
        
      
      
        
          importandroid.app.Activity; ?
        
      
      
        
          importandroid.os.Bundle; ?
        
      
      
        
          importcom.phonegap.*; ?
        
      
      
        
          publicclassAppextendsDroidGap{ ?
        
      
      
        
          /**Calledwhentheactivityisfirstcreated.*/ ?
        
      
      
        
          @Override ?
        
      
      
        
          publicvoidonCreate(BundlesavedInstanceState){ ?
        
      
      
        
          super.onCreate(savedInstanceState); ?
        
      
      
        
          //loadtheindex.htmlpagewhenappisloaded. ?
        
      
      
        
          super.loadUrl("file:///android_asset/www/index.html"); ?
        
      
      
        
          } ?
        
      
      
        
          }?

AndroidManifest.xml

把清單2的內(nèi)容拷貝到AndroidManifest.xml文件的manifest標簽內(nèi),并拷貝android:configChanges="orientation|keyboardHidden到activity標簽內(nèi)做為activity標簽的一個屬性。

清單2.AndroidManifest.xml

    <supports-screens 
android:largeScreens="true" 
android:normalScreens="true" 
android:smallScreens="true" 
android:resizeable="true" 
android:anyDensity="true" 
/> 
<uses-permission android:name="android.permission.CAMERA" /> 
<uses-permission android:name="android.permission.VIBRATE" /> 
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> 
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 
<uses-permission android:name="
android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> 
<uses-permission android:name="android.permission.READ_PHONE_STATE" /> 
<uses-permission android:name="android.permission.INTERNET" /> 
<uses-permission android:name="android.permission.RECEIVE_SMS" /> 
<uses-permission android:name="android.permission.RECORD_AUDIO" /> 
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> 
<uses-permission android:name="android.permission.READ_CONTACTS" /> 
<uses-permission android:name="android.permission.WRITE_CONTACTS" /> 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

  
    index.html頁面
  
  
    在/assets/www目錄下創(chuàng)建一個新的HTML頁面命名為index.html，并拷貝清單3的內(nèi)容到index.html文件。
  
  
    清單3：Index.html
  
      <!DOCTYPE HTML> 
<html> 
 <head> 
   <meta name="viewport" content="width=320; user-scalable=no" /> 
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" > 
   <title>PhoneGap</title> 
 <link rel="stylesheet" href="master.css" type="text/css" media="screen" 
 title="no title" charset="utf-8" > 
 <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js" 
 ></script> 
 <script type="text/javascript" charset="utf-8" > 
 //show device information 
 var deviceInfo = function (){      
     document.getElementById("platform").innerHTML = device.platform; 
     document.getElementById("version").innerHTML = device.version; 
     document.getElementById("uuid").innerHTML = device.uuid; 
     document.getElementById("name").innerHTML = device.name; 
     document.getElementById("width").innerHTML = screen.width; 
     document.getElementById("height").innerHTML = screen.height; 
     document.getElementById("colorDepth").innerHTML = screen.colorDepth; 
    }; 
      //listen the device ready event and get the device information. 
 function init(){ 
document.addEventListener("deviceready", deviceInfo, true ); 
	 } 

 // get device contacts list by the contacts API. 
 function get_contacts() 
	 { 
var obj = new ContactFindOptions(); 
obj.filter=""; 
obj.multiple=true ; 
obj.limit=5; 
navigator.service.contacts.find(["name","displayName", "phoneNumbers", 
"emails"],contacts_success, fail, obj); 
	 } 

function fail(fail) 
    { 
      alert(fail); 
    } 
function contacts_success(contacts) 
 { 
var result = ""; 
for (var i=0;i<contacts.length;i++) 
		 { 
result += "Name: " + contacts[i].name.givenName + ", displayName: "+ 
contacts[i].displayName + ",Email:" + contacts[i].emails[0].value; 
result += "<br>"; 
		 } 
document.getElementById("conlist").innerHTML = result; 
alert(contacts.length + ' contacts returned.' ); 
	 } 
 </script>  

 </head> 
 <body onload="init();" id="stage" class="theme" > 
   <h1>Welcome to PhoneGap!</h1> 
   <h2>this file is located at assets/index.html</h2> 
   <div id="info" > 
       <h4>Platform: <span id="platform" > &nbsp;</span>,
       Version: <span id="version" >&nbsp;</span></h4> 
       <h4>UUID: <span id="uuid" > &nbsp;</span>, 
       Name: <span id="name" >&nbsp;</span></h4> 
       <h4>Width: <span id="width" > &nbsp;</span>,
       Height: <span id="height" >&nbsp; 
       </span>, Color Depth: <span id="colorDepth" ></span></h4> 
    </div>    
   <a href="#" class="btn large" onclick="get_contacts();">
   Get phone's contacts</a> 
    <a  class="btn large"
      >Access IBM Home Page</a> 
   <form action="http://x.x.x.x:8080/WebTest/index.jsp" method="get" > 
Username: <input type="text" name="name" /> 
<input type="submit" /> 
</form> 
   <div id="conlist" > 
   </div>     
 </body> 
</html> 
  
  
    ?
  
  
    ?
  
  
    ?
  
  
    ?
  
  
    ?
  
    
    注意：中的“x.x.x.x”應(yīng)為運行著一個contextroot為WebTest的Web應(yīng)用的主機地址（IP或者HostName），WebTest項目可從本文檔提供的鏈接中下載。
  
  
    
      測試項目
    
  
  
    在項目上點擊右鍵，在出現(xiàn)的菜單中選擇“RunAs”，然后選擇“AndroidApplication”，Eclipse會彈出窗口讓你選擇合適的AVD，如果還沒有配置，請參照“搭建PhoneGap開發(fā)環(huán)境”小節(jié)介紹的方法創(chuàng)建一個AVD。如果選擇用
    
      Android
    
    手機測試程序，請確認驅(qū)動已經(jīng)裝好，USB連接正常，并且正確設(shè)置手機的開發(fā)調(diào)試選項，然后選擇“RunAs--AndroidApplication”。
  
  
    ?
  
  
    
      運行結(jié)果展示
    
  
  
    圖6顯示了該實例在AVD上的運行結(jié)果。
  
  
    圖6.示例運行結(jié)果
  
  
    
      
    
  
  
    點擊“Getphone’scontacts”會出現(xiàn)圖7和圖8所示的結(jié)果:
  
  
    圖7.示例運行結(jié)果（對話框）
  
  
    
      
    
  
  
    圖8.示例運行結(jié)果（聯(lián)系人信息）
  
  
    
      
    
  
  
    點擊“AccessIBMHomePage”將會出現(xiàn)圖9所示的畫面：
  
  
    圖9.顯示IBM主頁畫面
  
  
    
      
    
  
  
    在圖6的輸入框中輸入“Rendy”，然后點擊“Submit”按鈕，會出現(xiàn)圖10所示的頁面：
  
  
    圖10.提交用戶名后顯示畫面
  
  
    
      
    
  
  
    從上面的示例可以看到，開發(fā)人員只需掌握HTML和JavaScript就可以開發(fā)基于
    
      PhoneGap
    
    的可以和移動設(shè)備的本地應(yīng)用交互的手機Web應(yīng)用，極大的簡化了移動應(yīng)用的開發(fā)周期。
  
  
    本文對PhoneGap開源框架做了簡單介紹，并通過一個示例介紹了如何開發(fā)基于
    
      PhoneGap框架
    
    的可以和移動設(shè)備的本地應(yīng)用交互的MobileWeb應(yīng)用。PhoneGap以它開發(fā)簡單、兼容性好、支持標準化等無與倫比的優(yōu)勢正在不斷的占據(jù)移動應(yīng)用開發(fā)的市場，雖然它也存在運行速度慢、UI反應(yīng)延時等問題，但是隨著技術(shù)的進步，這些不足會不斷的改進和消除。
  
  
    ?
  
  
    
      部署和運行示例代碼
    
  
  
    下載代碼到本地計算機，打開Eclipse，點擊File->import->ExistingProjectsintoWorkspace如圖7所示，選擇archivefile并指定到代碼所在的本地路徑（圖11），點擊Finish按鈕。
  
  
    圖11.導(dǎo)入工程到Eclipse
  
  
    
      
    
  
  
    圖12.導(dǎo)入Archive文件
  
  
    
      
    
  
  
    工程導(dǎo)入Eclipse后會自動編譯，右鍵點擊項目選擇RunAs?
    
      Android
    
    Application就可以運行程序。
  
  
    用同樣的方法將WebTest項目導(dǎo)入Eclipse工作空間中，右鍵點擊項目選擇RunAs?RunOnServer。
  
  
    小結(jié)：
    
      Mobile
    
    應(yīng)用基于
    
      PhoneGap框架
    
    搭建教程的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對你有所幫助！
  
  
    ?
  
  
    ?
  
  
    
      
        
          下載
        
      
    
  
  
    ?
  
  
    描述 名字 大小 下載方法 
  
  
    
      
      

        
          示例代碼
        
        
          SampleAndroidProject.zip
        
        
          340KB
        
        
          
            HTTP
          
        
      
      
        
          WebTest 項目代碼
        
        
          WebTest.zip
        
        
          6KB
        
        
          
            HTTP
          
        
      
    
  
  
    
      關(guān)于下載方法的信息
    
  
  
    ?
  
  
    
      『轉(zhuǎn)』搭建基于 PhoneGap 框架的 Mobile 應(yīng)用

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯(lián)系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義

示例代碼	SampleAndroidProject.zip	340KB	HTTP
WebTest 項目代碼	WebTest.zip	6KB	HTTP

欧美三区_成人在线免费观看视频_欧美极品少妇xxxxⅹ免费视频_a级毛片免费播放_鲁一鲁中文字幕久久_亚洲一级特黄