zoukankan      html  css  js  c++  java
  • PhoneGap搭建运行环境(3.2版本)

    一、

    1.准备环境nodejs(http://nodejs.org/download/)

    2.ant(http://ant.apache.org/bindownload.cgi)

    3.Android SDK工具 下载地址:http://developer.Android.com/sdk/

    运行SDK Manager.exe

    二、环境安装

    1. nodejs的安装比较简单,直接在官网上下载msi文件进行安装

    安装node.js

    phonegap3中需要使用命令行环境,早phonegap中叫CLI。而这个在windows中是基于node.js实现的。

    安装过程比较简单,只需要去官网下载对应的版本,安装即可。安装完成后,在cmd中输入npm,如果出现一堆数据,那就成功了。

    2. ant安装:

    将官网上下载下来的文件解压后,配置环境变量

    新增环境变量 ANT_HOME :E:antapache-ant-1.9.2-bin(目录为ant主目录)

    并在Path变量里面附加内容 :%ANT_HOME%in

    3. 确保你的android sdk的tools目录也在Path环境变量中,如没有,需手动加入;

          windows xp下配置JDK环境变量:       1.安装JDK,安装过程中可以自定义安装目录等信息,例如我们选择安装目录为D:/java/jdk1.5.0_08;

      2.安装完成后,右击“我的电脑”,点击“属性”;

          3.选择“高级”选项卡,点击“环境变量”;

          4.在“系统变量”中,设置3项属性,JAVA_HOME,PATH,CLASSPATH(大小写无所谓),若已存在则点击“编辑”,不存在则点击“新建”;

          5.JAVA_HOME指明JDK安装路径,就是刚才安装时所选择的路径D:/java/jdk1.5.0_08,此路径下包括lib,bin,jre等文件夹(此变量最好设置,因为以后运行tomcat,eclipse等都需要依*此变量);

    Path使得系统可以在任何路径下识别java命令,设为:

    %JAVA_HOME%/bin;%JAVA_HOME%/jre/bin

        CLASSPATH为java加载类(class or lib)路径,只有类在classpath中,java命令才能识别,设为:

    .;%JAVA_HOME%/lib/dt.jar;%JAVA_HOME%/lib/tools.jar (要加.表示当前路径)

      %JAVA_HOME%就是引用前面指定的JAVA_HOME;

    2 安装phonegap

    在命令行输入npm install -g cordova,然后等着它执行完成。

    在cmd中输入cordova -v 然后会输出一些信息,说明安装成功。

    3 配置android SDK路径

    将下面的两个android SDK 目录配置到环境变量path中。

    sdk/platform-tools 
    sdk/tools

    4 配置Ant

    在Apache上下载Ant,并且将Ant的bin目录配置到环境变量path中。

    随便在一个目录输入 ant 然后回车,出现以下的内容说明成功。

    Buildfile: build.xml does not exist!
    Build failed

    5 创建一个项目

    在cmd中切换到你想创建项目的目录,执行如下的命令。

    cordova create hello com.example.hello "Hello World"
    cd hello
    cordova platform add android

    执行完成后就会在对应的目录中创建一个hello的项目。

    6 导入Eclipse

    要求你的Eclipse已经安装了ADT。

    将这个项目导入的时候选择Android Project from Existing Code导入到Eclipse中,这时候就能按照正常的开发流程进行开发了。

     

    Eclipse 集成PhoneGap插件

    点击help——>install new software——>add连接:

    http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2.91/download/

     

     

    __________________________--------------------------------------------------------------------------------------------------

     

    phoneGap3.0安装步骤(以windows下的android环境为例):

    环境:

       WIN系统,JDK,Android,Eclipse,Ant,Git,PhoneGap3.x (Cordova)

    1. 安装JRE,设置JAVA_HOME,比如JAVA_HOME=C:programJavajre6in。

    2. Cordova支持Android 2.2, 2.3, and 4.x.

      下载安装SDK: http://developer.android.com/sdk/index.html

      安装Android SDK,比如安装在c:android-sdk,需要把c:android-sdk ools和platform-tools添加到系统PATH环境变量中。

       要不出后面第8步出错误:

       [Error: The command `android` failed. Make sure you have the latest Android SDK

       installed, and the `android` command (inside the tools/ folder) added to your pa

       th. Output: 'android'  ... ...

       ]

    3. 安装Eclipse,要能支持Android项目。http://www.eclipse.org/downloads/

    4. 安装ant,并将ant.bat所在目录加到path环境变量,如c:apache-antin,http://ant.apache.org  .

    5. 安装Node.js,安装成功后,可在命令行输入命令:node 或 npm .   http://nodejs.org/  。

    (注:以下所有命令都在nodejs命令行窗口中输入的)

    6. 安装PhoneGap工具集: 打开命令行,运行:npm install -g phonegap

    7. 把盘符转到想要创建项目的目录,比如 c:。

    8.  创建App,运行:phonegap create hello com.vmeitime.hello HelloWorld

       将在c:hello下创建名为HelloWorld的项目,HTML5文件在C:hellowww目录里。

       第一个参数hello表示项目文件夹名,在此文件夹下会生成www子目录作为主页面存入目录,包括有css,js和img资源。 其中config.xml包括了重要的资源描述和项目配置信息.

       第2个参数是可选的,com.vmeitime.hello表示项目包名; 第3个参数:HelloWord表示显示的文本;

       也可用-i 和-n 命令选项:

           c:> phonegap create hello -n HelloWorld -i com.vmeitime.hello

           c:> phonegap create hello --name HelloWorld --id com.vmeitime.hello

       当然,命令执行后,以上信息也可在后续开发中修改comfig.xml中的相应值。

    9.  后续操作都要在创建的项目目录下进行:cd hello

    10. 运行build命令,输入不同平台标识,生成不同平台下的相应文件。如下以android设备为例:

           c:hello> phonegap build android

       要查看详细(verbose)执行过程,可增加命令参数-V :

           c:hello> phonegap -V build android

       之后可以看到C:helloplatformsandroid里出现Android项目。

    11. 在模块器或移动设备上测试App: c:hello>phonegap install android

       也可用参数e专门指定运行在模块器上: c:hello>phonegap -e install android

    12. build和运行(相当于上面build和install两步骤操作):c:hello>phonegap run android

        也可用参数e专门指定运行在模块器上:c:hello>phonegap -e run android

    13. 打开Eclispe,导入项目C:helloplatformsandroid,HelloWorld。

    14. 可能项目有一些错误,把Android Project Build Target设置为最高等级的API Level一般就能解决。

    15. 然后就可以用Eclipse启动项目了。

    16. 可以用命令phonegap emulate android在模拟器里启动项目,不过感觉比Eclipse麻烦,总是启动一个新的模拟器。

         用这个方法还要注意Android虚拟设备的版本,似乎至少是API Level 10,因为自动生成的AndroidManifest.xml里:

         <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="17" />

    17. 可以用命令phonegap run android在真实设备上运行App。

    18. 添加插件(需要先安装git工具 https://help.github.com/articles/set-up-git):

       PhoneGap 3.0 最需要关注的是完全的插件体系结构,所有的功能特性包括摄像头等都是使用插件方式提供。也就是说新建项目后很多功能是无法使用的,你必须将其对应的插件添加到项目中。

       例如在 cordova 中添加插件的方法是:

           cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

       而通过 phonegap 命令行工具的方法是:

           phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

       这意味着在开始 PhoneGap 项目时你要先考虑项目需要什么功能,然后通过命令行来添加这些功能。

    1). 添加的插件都将放在C:helloplugins目录下.

    2). 同时会在所有平台下的config.xml文件中增加feature插件配置,如:C:helloplatforms<平台> esxmlconfig.xml)

    3). 增加相应的插件java文件:C:helloplatformsandroidsrc

    4). 增加相应的插件js文件:C:helloplatformsandroidassetswwwplugins

    下面是完整的插件列表,我直接拷贝过来,可能会有变化:

       Basic device information (Device API):

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

       Network Connection and Battery Events:

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git

       Accelerometer, Compass, and Geolocation:

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

       Camera, Media playback and Capture:

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git

       Access files on device or network (File API):

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git

       Notification via dialog box or vibration:

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git

       Contacts:

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git

       Globalization:

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git

       Splashscreen:

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git

       Open new browser windows (InAppBrowser):

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

       Debug console:

           $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

       查看当前已安装的插件: $ phonegap local plugin list

       删除指定的插件: $ phonegap local plugin remove org.apache.cordova.core.console

    19 自定义各平台资源(merges):

       在www/merges/目录下创建各平台不同的资源文件,如css,js,图片等,引用相应的文件路径时,不需要写各平台路径。如:

       在www/index.html文件中添加自定义的css文件overrides.css如下:

           <link rel="stylesheet" type="text/css" href="css/overrides.css" />

       在www/merges/android/目录下创建针对于android平台的overrides.css,(如果是ios,由是www/merges/ios/overrides.css文件。)

       overrides.css文件中添加如下内容,覆盖www/css/index.css文件中默认的12px文字大小样式:

           body { font-size:14px; }

       这样,在android平台下,显示的文件是14px,其他平台下显示的文字是12px;

       也可添加各平台自定义的图片资源,如 merges/ios/img/back_button.png, 在www/index.html页面引用的写法是img/back_button.png.

    20. 远程编译:

       默认情况下,是编译本地安装SDK环境的相应平台,生成目标在platforms。 但也可通过远程编译本地没有安装SDK(或已安装SDK)的相应平台。也可远程测试。

    1). 首先,你要在PhoneGap Build网站(https://build.phonegap.com/) 上注册账号,并使用login命令登录操作。

       $ phonegap remote login -u iamreallyadog@gmail.com -p mYpASSw0RD

       $ phonegap remote login --username iamreallyadog@gmail.com --password mYpASSw0RD

        使用loginout命令退出登录phonegap build.

           $ phonegap remote logout

       2). 远程编译:$ phonegap remote build ios

       3). 要使用插件,你必须先添加插件到本地,然后再远程编译。如:

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git

       $ phonegap remote build ios

    4) $ phonegap remote install ios

       # ...or...

       $ phonegap remote run ios

    5) 默认情况下是local本地编译,如下两命令是一样效果:

       $ phonegap local build ios

       $ phonegap build ios

    21. 更新phonegap到最新版本命令:c:> npm update -g phonegap

    22. 查看phonegap版本命令:

       $ phonegap version

       $ phonegap -v

    23. 查看phonegap详细信息命令:

       $ npm info phonegap

    24。安装指定版本的phonegap命令:

       c:> npm install -g phonegap@2.9.0-rc1-0.12.2

    参考:

    http://www.cocoachina.com/applenews/devnews/2013/0724/6665.html

    http://docs.phonegap.com/en/edge/guide_platforms_android_index.md.html#Android%20Platform%20Guide

    http://docs.phonegap.com/en/3.0.0/guide_cli_index.md.html#The%20Command-line%20Interface

  • 相关阅读:
    母版页中对控件ID的处理
    使用Gridview绑定数据库中的图片
    导出Excel表格时,如何把数据库表中的编号转换成配置文件中的"汉字"
    ORA01502: 索引'P_ABCD.PK_WEB_BASE'或这类索引的分区处于不可用状态
    Oracle 把触发器说透
    规模估算失准 软件开发成空中楼阁
    在web开发中的三个层次使用事务
    oninput,onpropertychange,onchange的用法和区别
    Oracle 把游标说透
    在datatable中,在指定位置插入列
  • 原文地址:https://www.cnblogs.com/aibo/p/3463799.html
Copyright © 2011-2022 走看看