关于搭建基于Android和PhoneGap开发环境图文详解

关于搭建基于Android和PhoneGap开发环境图文详解

IDE需要使用Eclipse 3.4+

安装 SDK + PhoneGap

1、需要安装eclipse 3.4+

1. 下载地址：http://www.eclipse.org/downloads/

2、安装ADT插件

添加ADT plug，地址为：

1. http://dl-ssl.google.com/android/eclipse

3、下载并安装 Android SDK

因为http://androidappdocs.appspot.com/sdk/index.html 被墙掉了，所以得另外找一个地址

Android SDK 3.1 (以下链接转载至：

1. http://www.cnblogs.com/yaotong/archive/2011/01/25/1943615.html)

Windows

1. http://dl.google.com/android/android-sdk_r11-windows.zip

2. http://dl.google.com/android/installer_r11-windows.exe

Mac OS X(intel)

1. http://dl.google.com/android/android-sdk_r11-mac_x86.zip

Linux(i386)

1. http://dl.google.com/android/android-sdk_r11-linux_x86.tgz

然后就是安装了，需要很久很久….

别忘记了在系统环境变量中，添加android sdk的tools包路径

(设置好以后可以在cmd下测试一下~)

环境弄好了，开始写个Demo（详情可参考PhoneGap的官网，需要先下载PhoneGap-0.9.5）~

1、新建一个Android Project

2、导入需要的包、建议文件目录

下图是下载phonegap-0.9.5后解压出来的包，复制phonegap.0.9.5.jar到第一步建立的工程的libs目录中，复制xml文件夹到res文件夹中（否则报错）

现在工程的目录(红色标的为新建的目录)：

选中 phonegap.0.9.5.jar，右击 -> Build Path –> Config Build Path… 切换到Libraries选项卡：

添加架包：

这时，可以看到libs目录与assets、res一样了，目录图标左上角多了个东西

这里为了简单，直接复制phonegap例子中的三个文件到www目录下：

修改com.phonegap.helloworld包下面的App.java文件：

类继承于DroidGap（默认继承类Activity）

注释 setContentView(R.layout.main); 这一行，改为 super.loadUrl(file:///android_asset/www/index.html);

修改工程根目录下的AndroidManifest.xml文件，添加如下内容

1. <supports-screens android:largeScreens="true"

2. android:normalScreens="true"

3. android:smallScreens="true"

4. android:resizeable="true"

5. android:anyDensity="true"

6. />

7. <uses-permission android:name="android.permission.CAMERA" />

8. <uses-permission android:name="android.permission.VIBRATE" />

9. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

10. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

11. <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

12. <uses-permission android:name="android.permission.READ_PHONE_STATE" />

13. <uses-permission android:name="android.permission.INTERNET" />

14. <uses-permission android:name="android.permission.RECEIVE_SMS" />

15. <uses-permission android:name="android.permission.RECORD_AUDIO" />

16. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

17. <uses-permission android:name="android.permission.READ_CONTACTS" />

18. <uses-permission android:name="android.permission.WRITE_CONTACTS" />

19. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

20. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

21. <uses-feature android:name="android.hardware.camera" />

22. <uses-feature android:name="android.hardware.camera.autofocus" />

在application节点下，找到activity节点，添加android:configChanges="orientation|keyboardHidden"

1. <activity android:name=".exampleapp"

2. android:label="@string/app_name"

3. android:configChanges="orientation|keyboardHidden">

完整的文件内容

1. <?xml version="1.0" encoding="utf-8"?>

2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"

3. package="com.phonegap.helloworld"

4. android:versionCode="1"

5. android:versionName="1.1">

6. <supports-screens

7. android:largeScreens="true"

8. android:normalScreens="true"

9. android:smallScreens="true"

10. android:resizeable="true"

11. android:anyDensity="true"

12. />

13. <uses-permission android:name="android.permission.CAMERA" />

14. <uses-permission android:name="android.permission.VIBRATE" />

15. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

16. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

17. <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

18. <uses-permission android:name="android.permission.READ_PHONE_STATE" />

19. <uses-permission android:name="android.permission.INTERNET" />

20. <uses-permission android:name="android.permission.RECEIVE_SMS" />

21. <uses-permission android:name="android.permission.RECORD_AUDIO" />

22. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

23. <uses-permission android:name="android.permission.READ_CONTACTS" />

24. <uses-permission android:name="android.permission.WRITE_CONTACTS" />

25. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

26. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

27. <uses-feature android:name="android.hardware.camera" />

28. <uses-feature android:name="android.hardware.camera.autofocus" />

29. <application android:icon="@drawable/icon"

30. android:label="@string/app_name"

31. android:configChanges="orientation|keyboardHidden">

32. <activity android:name=".App" android:label="@string/app_name">

33. <intent-filter>

34. <action android:name="android.intent.action.MAIN" />

35. <category android:name="android.intent.category.LAUNCHER" />

36. </intent-filter>

37. </activity>

38. </application>

39. <uses-sdk android:minSdkVersion="2" />

40. </manifest>

3、运行项目

右击项目，选中Run as 并点击 Android Application ，如果第一次启动，需要配置模拟器的虚拟设备（可能会遇到问题，配置后无法启动，把生成的文件.android移动到当前登录用户的文档目录下就好了，网上也有很多其它解决方法）

如果不出其它意外情况，正常情况下将会看到类似下面的界面(运行起来比较慢、卡，需要点耐心~) ：

进入界面（点中左侧的"锁"不放，向右移动，当 Unlock 颜色加深时就解锁成功了）

需要再等待一会，在看到控制台出现

1. Starting activity com.phonegap.helloworld.App on device emulator-5554

之后，会看到下图所示的界面

搭建Dreamweaver集成移动开发环境

搭建开发环境

1、关于Dreamweaver版本

请确认版本是Dreamweaver CS5.5 版本号11.5，若已安装CS5.5但是版本号低于11.5，请移步至本站QQ群171559941下载升级包，否则Android SDK无法安装。

2、安装 Android SDK

该步骤安装Android模拟器，程序可在模拟器中运行。点击"站点-》移动应用程序-》配置应用程序框架"，弹出对话框见下图：

选择安装路径，点击"简易安装"，等待安装完成提示。

3、本机应用程序配置

该步骤设置应用程序名称、作者姓名、应用ID和启动虚拟机。点击"站点-》移动应用程序-》应用程序设置"，弹出对话框见下图：

填写完后，点击"管理AVD"，在弹出的对话框中，点击右面的"Start-》Launch"按钮，开始启动Android虚拟机，可能比较慢，直到出现下面界面：

开发第一个移动应用

1、生成DEMO应用

新建站点"HelloAndroid"，然后点击菜单"文件-》新建"，见下图

确认创建后，保存文件名为"index.html"，在弹出对话框中按"确认-》复制"按钮，然后点击"站点-》移动应用程序-》生成和模拟-》Android"等待程序打包发布到虚拟机吧，发布完成后，请查看虚拟机出现程序界面：