天天看點

H5 開發ap 架構PhoneGap(cordova)的應用詳解

phonegap是一套能讓你使用html5輕松調用本地api接口和釋出應用到商店的應用開發平台。官方說有低成本,低開發周期,輕量化等優點,這些咱暫時也沒法證明,略過不表。但是有一條跨平台,卻是很明顯的優勢。因為它采用html5+javascript的模式來開發應用。phonegap用javascript統一封裝了幾大平台的本地api(andriod,ios,wp8/7,winrt)等等。。這樣的話從一個平台移植到另外一個平台隻需要把html代碼跟js原封不動的拿過去,打包一下就可以了。phonegap後來被adobe收購,然後又貢獻給了開源社群,現在由apache管理,改名cordova。

為了給昨天的html5畫圖闆移植到移動裝置上,我決定采用phonegap平台,這樣隻要編寫一邊就可以多出運作了。

今天先在andriod下架設phonegap環境。

1.下載下傳phonegap

<a target="_blank" href="http://phonegap.com/download/#autodownload">http://phonegap.com/download/#autodownload</a>

解壓出來,找到lib/android目錄。

2.在eclipse下建立andriod項目,這個跟普通項目一樣。

3.在assets目錄下建立檔案夾“www”

把lib/android目錄下的cordova-2.6.0.js複制到這個目錄下。把cordova-2.6.0.jar複制到libs目錄下。

H5 開發ap 架構PhoneGap(cordova)的應用詳解

4.在www目錄下建立一個html檔案index.html。我們的界面就要在這裡建立了。

H5 開發ap 架構PhoneGap(cordova)的應用詳解

index的代碼如下:

複制代碼

代碼如下:

&lt;!doctype html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&gt;

&lt;title&gt;html5paint&lt;/title&gt;

&lt;script type="text/javascript" src="cordova-2.6.0.js" charset="utf-8"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;

alert("hello cordova");

&lt;/script&gt;&lt;/p&gt; &lt;p&gt;&lt;/head&gt;

&lt;body&gt;&lt;/p&gt; &lt;p&gt;&lt;h1&gt;html5paint&lt;/h1&gt;

&lt;/body&gt;

&lt;/html&gt;

5.把lib/android目錄下的xml檔案夾整個複制到res面目下

H5 開發ap 架構PhoneGap(cordova)的應用詳解

6.修改androidmanifest.xml添加使用者權限

在&lt;manifest &gt;标簽的内的最前部添加如下代碼

&lt;supports-screens

android:largescreens="true"

android:normalscreens="true"

android:smallscreens="true"

android:xlargescreens="true"

android:resizeable="true"

android:anydensity="true"

/&gt;&lt;/p&gt; &lt;p&gt; &lt;uses-permission android:name="android.permission.camera" /&gt;

&lt;uses-permission android:name="android.permission.vibrate" /&gt;

&lt;uses-permission android:name="android.permission.access_coarse_location" /&gt;

&lt;uses-permission android:name="android.permission.access_fine_location" /&gt;

&lt;uses-permission android:name="android.permission.access_location_extra_commands" /&gt;

&lt;uses-permission android:name="android.permission.internet" /&gt;

&lt;uses-permission android:name="android.permission.receive_sms" /&gt;

&lt;uses-permission android:name="android.permission.record_audio" /&gt;

&lt;uses-permission android:name="android.permission.record_video"/&gt;

&lt;uses-permission android:name="android.permission.modify_audio_settings" /&gt;

&lt;uses-permission android:name="android.permission.read_contacts" /&gt;

&lt;uses-permission android:name="android.permission.write_contacts" /&gt; 

&lt;uses-permission android:name="android.permission.write_external_storage" /&gt; 

&lt;uses-permission android:name="android.permission.access_network_state" /&gt;

&lt;uses-permission android:name="android.permission.get_accounts" /&gt;

&lt;uses-permission android:name="android.permission.broadcast_sticky" /&gt;

7.修改mainacivity.java

public class mainactivity extends droidgap {&lt;/p&gt; &lt;p&gt; @override

public void oncreate(bundle savedinstancestate)

{

super.oncreate(savedinstancestate);

super.loadurl("file:///android_asset/www/index.html");

}&lt;/p&gt; &lt;p&gt;}

8.build一下會有錯誤,這是因為前面的cordova-2.6.0.jar沒有添加到buildpath裡面去。添加buildpath。

H5 開發ap 架構PhoneGap(cordova)的應用詳解

繼續build就過了。

最後run一下:

H5 開發ap 架構PhoneGap(cordova)的應用詳解
H5 開發ap 架構PhoneGap(cordova)的應用詳解

繼續閱讀