踏上APP之路,体验PhoneGap跨平台的魅力,入门笔记HelloWorld

安装

我习惯性地去找jar包下载,表面上好像很方便,但其实长远来看还是用官方的方法安装较好,因为这很好地为以后的升级、跨平台实现、插件加载提供了便利。

以下转载一发

http://www.dotblogs.com.tw/maplenote/archive/2014/01/16/phonegap_android_install.aspx

  1. 安装准备

    • 安裝 JAVA 的 JDK

    • 安裝 NodeJs (會一併安裝 npm)

    • 安裝 Apache Ant

    • 安裝 android 的 SDK

      預設載點會把 eclipse 抓下來(檔案有點大),可以點下方的 "DOWNLOAD FOR OTHER PLATFORMS" 單獨選 SDK Tools

  2. 安裝 PhoneGap,用命令提示字元 cmd 執行 (我習慣用系統管理者身分執行)

     C:\> npm install -g phonegap
    

    要是 NodeJs 有安裝完畢,npm 指令卻找不到,那就是安裝時沒選到自動修改環境變數的選項,可參照下面 6 的作法檢查使用者變數或系統變數的 path 中是否有 npm 的路徑及 node 的路徑

  3. 設定環境變數

    • 在我的電腦上按右鍵 -> 內容 -> 系統進階系統設定 -> 進階 -> 環境變數
    • 在使用者變數的區塊,新增名稱 JAVA_HOME 值為 JAVA 安裝路徑 C:\Program Files\Java\jdk1.7.0_21
    • 新增名稱 ANT_HOME 值為 ANT 安裝路徑 C:\Program Files (x86)\apache-ant-1.9.3
    • 修改 Path 屬性的值
    • 保留原本的值,在原本的後面加上;%JAVA_HOME%\bin\;%ANT_HOME%\bin\;SDK安裝目錄\tools\;SDK安裝目錄\platform-tools\
  4. 設定完成後,命令提示字元要關掉重開才會生效

    在命令提示字元 cmd 執行以下指令,檢測以上安裝是否成功,若安裝成功會印出版本資訊,失敗則會顯示找不到指令

     C:\> java -version
     C:\> ant -version
     C:\> adb version
     C:\> emulator -version
    
  5. 用 SDK tools 裡的 AVD Manager 建立 Android 模擬器,請記住新增時的 AVD Name (下面會用到)

  6. 終於到最後一個步驟了,我比官網多了第三個指令,也就是用 cmd 的方式把模擬器打開 (請等模擬器開啟完畢再執行下一個指令)

     $ phonegap create my-app com.test.packagename "MyAppName"
     $ cd my-app
     $ emulator.exe -avd "AVD的名稱"
     $ phonegap run android
    

    要是模擬器有開啟成功,但是命令提示字元好像停住了,請嘗試按一下 Enter 鍵

    注意: AVD 的名稱不是用指令 adb devices 查到的名稱唷! 是新增時自己設定的名稱

  7. 應該在模擬器中已可看到 PhoneGap 運行,app 名稱是 MyAppName,畫面則是 create 時預設產生的程式 :)

    若想要用 Eclipse 開啟專案請參考官方教學文件,裡面提到的 cordova 指令,可用 c:\> npm install cordova 安裝


cordova指令

  1. 安装

     c:\> npm install cordova
    
  2. 新建项目(文件夹hello,项目名HelloWorld)

     $ cordova create hello com.example.hello HelloWorld
    
  3. 进入项目文件夹并创建适应平台版本

     $ cordova platform add android
    
  4. 查看当前已建平台版本列表

     $ cordova platforms ls
    
  5. 删除平台

     $ cordova platform remove blackberry10
     $ cordova platform rm amazon-fireos
     $ cordova platform rm android
    
  6. 执行编译

     $ cordova build
     //以上是单独编译ios
     $ cordova prepare ios
     $ cordova compile ios
    
  7. 加载插件(插件API:http://docs.phonegap.com/en/edge/cordova_plugins_pluginapis.md.html#Plugin%20APIs

     $ cordova plugin add org.apache.cordova.device
     //以上是加载device插件
     //该命令将自动修改config.xml文件和AndroidManifest.xml文件,十分方便
    
  8. 列出当前项目加载的插件

     $ cordova plugin ls    # or 'plugin list'
    
  9. 删除插件

     $ cordova plugin rm org.apache.cordova.console
     $ cordova plugin remove org.apache.cordova.console    # same
    

Eclipse导入项目

  1. 导入过程这里省略,选择文件夹hello,正常能找到两个项目HelloWorldHelloWorld-CordovaLib
  2. 正常会出现红叉,右击HelloWorld项目,选择Properties,在Android中选择一个Android版本,再在Java Build Path - Projects 里 Add 入HelloWorld-CordovaLib项目,保存后clean一次,红叉应该就消失了
  3. Run it
若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏