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

  • 相关阅读:
    lr 增强窗格中,如何生成调试信息?
    lr 自带的例子,如何进行关联,通过代码的函数进行实现
    lr11 录制脚本时候,无法自动启动ie,查了网上很多方法都未解决?
    loadrunner11 录制脚步不成功,在录制概要出现“No Events were detected”,浮动窗口总是显示“0 Events”,解决办法
    loadrunner11 安装及破解教程来自百度文库
    安装loadrunner11 ,出现如下错误如何解决?
    回收站数据删除了,如何进行恢复?
    网管工作方面——————打印机删除了然后开机重启他依然存在,如何解决
    Windows 不能在 本地计算机 启动 SQL Server 服务 错误代码126
    Sorry, the page you are looking for is currently unavailable. Please try again later. Nginx
  • 原文地址:https://www.cnblogs.com/aibo/p/3463799.html
Copyright © 2011-2022 走看看