收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2068|回复: 2

[教程] 利用Phonegap搭建Android移动端开发环境

[复制链接]
发表于 2013-6-20 11:14:42 | 显示全部楼层 |阅读模式
一、准备工作
    1、下载Eclipse,建议采用 Eclipse Classic 程序包,当前版本:Eclipse Classic 4.2.2;
    2、下载Android SDK,当前版本:22.0.1;
    3、下载PhoneGap,当前版本:PhoneGap 2.8.1;

二、安装配置软件
    1、安装 Eclipse ,步骤如下:
        a、如果你下载的是 Eclipse Classic 程序包,那直接将下载的程序包解压到合适的目录,如 D:\eclipse ;
        b、安装完成后启动 Eclipse;
        c、如果启动时弹出提示:A Java Runtime Environment (JRE) or Java Development Kit (JDK),那说明你的电脑上没有安装java虚拟机,Eclipse压根依赖于java虚拟机运行,下载一个JDK(java虚拟机运行)安装
        d、JDK安装好后再次启动 Eclipse;
        e、初次使用 Eclipse 会要求设置工作目录,如设置 D:\workspace ;

    2、配置 Android SDK,将下载好的 Android SDK 压缩包解压到任意一个合适的目录,如 D:\AndroidSDK ;
    3、为 Eclipse 安装 ADT 插件,ADT是Android 开发工具,它必须通过 Eclipse Install New Software 向导来进行安装,步骤如下:
        a、在Eclipse上点击Help菜单,点击Install New Software;
        b、在弹出的 Available Software 对话框上点击右上角的ADD,弹出一个Add Repository对话框;
        c、在Name一栏输入"ADT插件",在Location一栏输入"https://dl-ssl.google.com/android/eclipse/",点击OK;
        e、在 Available Software 对话框中勾选 Developer Tools 左边的复选框,点南对话框下面的 Next ;
        f、在下一个对话框中,您会看到一个列表的工具下载,单击 Next 。
        g、选中 I accept the terms of the license agreements (阅读并接受许可协议),然后点击 Finish ,如果遇到弹出对话框提示 Warning: You are installing software that contains unsigned content 点击OK。
        h、当安装完成后会提示是否重新启动 Eclipse ,选择是,重启Eclipse,您必须指定位置你的 Android SDK目录;
        i、在"Welcome to Android Development"对话框选择 Use existing SDKs (使用现有的sdk),点击 Browse 选择刚才配置好的SDK目录,如 D:\AndroidSDK ,点击 Next。
        j、在下一个对话框点击 Finish ,完成安装;

    4、通过 Android SDK Manager 安装 Android API;
        a、配置好 ADT 插件后会弹出 Android SDK Manager 对话框,使用默认设置点击 Install 12 packages;
        b、在弹出的 Choose packages to Install 对话框右下角选择 Accept License,点击Install;
        c、等待软件下载完成,关闭对话框,重新启动 Eclipse ;

三、在 Eclipse 中创建项目
    1、使用快捷键 Ctrl + N 调出新建文件对话框,选择 Android > Android Application Project ,点 Next;
    2、在 New Android Application 对话框中,在出现的表单中填写
        Application Name:应用程序显示给用户的名称,如:"我的测试APP";
        Project Name:项目目录名称,如:"MyTestApp";
        Package Name:应用程序包的命名空间,建议使用与组织的反向域名开头的名称,如:"com.Gafish.MyTestApp";
        其它项可以用默认选项,单击 Next;

    3、在 Configure Project 对话框中,保留默认选项,然后单击 Next ;
    4、在 Configure Launcher Icon 对话框中可以为你的应用程序创建一个启动图标,然后单击 Next 。
    5、在 Create Activity 对话框中你可以选择一个template activity创建程序。对于这个项目,选择 BlankActivity ,然后单击 Next 。
    6、在 Blank Activity 对话框中你可以设置项目包的文件名,如:"MyTestAppActivity",然后单击 Finish 。
    7、此时,Eclipse 创建了一个空白的 Android 项目。但是,并未将它配置为使用 PhoneGap。

四、使用 PhoneGap 配置项目
    1、在新 Android 项目内的 assets 目录下创建一个 www 目录。PhoneGap 应用程序界面的所有 HTML 和 JavaScript 均将驻留在 assets/www 文件夹内。
    2、要将 PhoneGap 的必要文件复制到项目内,首先找出下载 PhoneGap 的目录,然后找到 lib/android 子目录;
        a、将 cordova.js 复制到 Android 项目内的 assets/www 目录
        b、将 cordova-2.8.1.jar 复制到 Android 项目内的 libs 目录。
        c、将 xml 目录复制到 Android 项目内的 res 目录。
        d、选中 Android 项目根目录,按F5刷新;

    3、接下来,在 assets/www 文件夹中创建一个名为 index.html 的文件。此文件将用作 PhoneGap 应用程序界面的主要入口点,在 index.html 中,添加以下 HTML 代码作为用户界面开发的起点;
            <!DOCTYPE HTML>
            <html>
             <head>
              <title>PhoneGap</title>
              <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
             </head>
             <body>
                <h1>Hello PhoneGap</h1>
             </body>
            </html>>

    4、在Eclipse的 Android 项目中找到 cordova-2.8.1.jar 右键单击,然后选择 Build Path > Add To Build Path;
    5、在项目程序包的 src 文件夹下找到 MyTestAppActivity.java;
        a、用 import org.apache.cordova.*; 替换以下两行代码;
            import android.app.Activity;
            import android.view.Menu;
        b、将基类从 Activity 更改为DroidGap ;它位于类定义中 extends 一词的后面 ;
            public class HelloGapActivity extends DroidGap {
        c、用这段代码
            @Override
            public void onCreate(Bundle savedInstanceState)
            {
                super.onCreate(savedInstanceState);
                super.loadUrl("file:///android_asset/www/index.html")
            }
            替换以下代码;
            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_my_test_app);
            }


            @Override
            public boolean onCreateOptionsMenu(Menu menu) {
                // Inflate the menu; this adds items to the action bar if it is present.
                getMenuInflater().inflate(R.menu.my_test_app, menu);
                return true;
            }

    6、在项目程序包根目录找到并打开 AndroidManifest.xml;
        a、为 manifest 根节点添加以下属性;
            android:windowSoftInputMode="adjustPan"
            android:hardwareAccelerated="true"

        b、添加以下supports-screen XML 节点作为 manifest 根节点的子节点;
            <supports-screens
            android:largeScreens="true"
            android:normalScreens="true"
            android:smallScreens="true"
            android:xlargeScreens="true"
            android:resizeable="true"
            android:anyDensity="true"
            />
            supports-screen 节点可识别您应用程序支持的屏幕大小。
            您可以通过更改此条目的内容来调整屏幕和外观设置支持。
            要阅读有关<supports-screens>,的更多信息,请访问 <a target="_blank" href="http://developer.android.com/guide/topics/manifest/supports-screens-element.html" > Android 开发人员主题 – 支持屏幕元素[/url]。

        c、接下来,您需要为 PhoneGap 应用程序配置权限;
            复制以下<uses-permission> XML 节点,并粘贴它们作为 AndroidManifest.xml 文件<manifest> 根节点的子节点>
            <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" />>
            <uses-permission android:name="android.permission.GET_ACCOUNTS" />
            <uses-permission android:name="android.permission.BROADCAST_STICKY" />
            uses-permission 值可识别您要为应用程序启用的功能。
            上述代码行可启用 PhoneGap 所有功能正常运行所需的全部权限。
            构建完应用程序后,您可能希望删除不会实际用到的所有权限;
            这将会删除应用程序安装过程中出现的安全警告。
            要阅读有关 Android 权限和 <uses-permission> 元素的更多信息,请访问 <a target="_blank" href="http://developer.android.com/guide/topics/manifest/uses-permission-element.html" >Android 开发人员主题 – 用户权限元素[/url];

        d、找到<activity>节点,它是 <application>XML 节点的子节点。将下面的属性添加到该<activity> 节点;
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"

五、在移动端运行应用程序
    1、用数据线将移动端连接到电脑,并开启移动端的USB调试模式;
    2、在程序项目根目录上点右键,然后选择 Run As > Android Application;
    3、在 Android Device Chooser 对话框选中第一条 Choose a running Android device ,在列表中选中移动端设备,点击OK;
    4、此时将会在该设备上安装并启动您的 PhoneGap 应用程序。

-----------------------
原创文章,转载请注明来自加菲博客:http://www.gafish.net/archives/1462



  
发表于 2013-6-20 15:53:29 | 显示全部楼层
phonegap曾说过移动开发的未来是属于他phonegap的。

不过我觉得现在可能不大会这么喊了。现在浏览器都在开放 Device APIs ,https://developer.mozilla.org/en-US/docs/WebAPI,有了更多的这些API就应该用不到phonegap了,更不用因为想获取硬件功能而硬把web应用套个壳变成本地应用了。

未来是HTML5的
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-6-20 21:15:37 | 显示全部楼层
ONEBOYS 发表于 2013-6-20 15:53
phonegap曾说过移动开发的未来是属于他phonegap的。

不过我觉得现在可能不大会这么喊了。现在浏览器都在 ...

目前技术发展还是群雄纷争的时代,最终结论还是个未知数,权且就静观其变吧。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-11-27 21:29 , Processed in 0.077928 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表