Hybrid選型和PhoneGap開發環境搭建

簡介

主流的Hybrid App如今有兩種方案：

• 以PhoneGap爲表明，使用HTML頁面進行構建的App
• 以Titanium爲表明，經過NodeJS驅動編譯Native層的代碼，從而產生近似於Native的效果

關於Titanium，在另一篇文章裏作嘗試，今天紀錄的是PhoneGap開發的環境搭建

WHY (爲何要這麼作)

對於使用native和hybrid的哪個能更好的開發，常常會有爭執。不談爭執，只說爲何要選擇hybrid

• 開發速度快。早期以Hybrid進行快速開發快速試錯，甚至能夠在其中採用ABTesting驗證哪種設計更好，當版本逐漸穩定，從Hybrid過分到Native能夠說是如今最好的開發模式
• 快速發佈。若是沒有淘寶或者微信的推送更新功能，那仍是考慮用Hybrid的增量更新功能，甚至有些活動頁面能夠直接訪問線上站點，提升更新的效率，繞開了某些store的審覈機制
• 大規模團隊協做。以模塊進行切分，最後合併不須要作總體的build優化了開發的效率

因此選型上就直接選擇了hybrid畢竟開發人員少的狀況下這是最好的方案，比較了國內的AppCan沒有猶豫的選擇了PhoneGap，後者開發的時間長，文檔和各類輔助工具齊全。

HOWTO (如何去作)

PhoneGap號稱已經免費了，可是考慮到它有收費的不良記錄仍是採用了它的開源版本cordova，cordova 是基於 apache 協議進行開發的。

在開發過程當中採用了基於nodejs的The Command-Line Interface

1. 安裝nodejs

2. 安裝coordova模塊

   sudo npm install -g cordova

   這個安裝過程須要花費很長的時間，推薦採用淘寶的npm鏡像

3. 安裝android開發環境而且配置環境變量，在Terminal裏面輸入android看看有沒有android的版本管理器出來就說明配置有沒有作好，關於如何配置環境變量搜素一下，mac推薦看這裏
4. 安裝ant，cordova採用ant來作的持續集成，須要配置ant環境，搜素一下，mac的看這裏

5. 建立HelloWorld執行命令

   cordova create hello com.example.hello HelloWorld

   這個過程異常的艱難，但願你有個好網絡

6. 配置開發平臺，進入hello目錄，執行

   cordova platform add android

7. 編譯

   cordova build

8. 安裝，很是不喜歡虛擬機，因此直接插上android運行

   cordova run android

   若是但願啓動虛擬機

   cordova emulate android

   而後一個很傻的，沒有什麼功能的應用就裝在手機上了

9. 進一步開發，用Android Studio導入工程，在\hello\www目錄下就是html開發內容，hybrid的開發就在這裏作

在這個階段中對環境變量的修改

export PATH="$PATH:/Users/xxx/android-sdk-macosx/platform-tools"
export PATH="$PATH:/Users/xxx/android-sdk-macosx/tools"
export PATH="$PATH:/Users/xxx/android-sdk-macosx"
export PATH="$PATH:/Users/xxx/apache-ant-1.9.4/bin"
export JAVA_HOME=`/usr/libexec/java_home`

SUPPLEMENT（補充）

mobile web ui的選型，列舉一下如今流行的一些ui庫做爲選型的標的

• ionic
• famo

famo與angularjs進行了深度的整合，可是考慮到ionic對cordova的封裝，準備用ionic

1. 安裝ionic cli

   $ npm install -g cordova ionic

2. 建立項目

   $ ionic start myApp tabs

   這個步驟很是的耗費時間，網絡啊網絡

   ➜  Project  ionic start bee-app tabs
   Creating Ionic app in folder /Users/xxx/myApp based on tabs project
   
   The directory /Users/xxx/myApp already exists.
   Would you like to overwrite the directory with this new project?
   (yes/no): yes
   
   Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
   [=============================]  100%  0.0s
   
   Downloading: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip
   [=============================]  100%  0.0s
   
   Update config.xml
   Initializing cordova project
   Fetching plugin "org.apache.cordova.device" via plugin registry
   Fetching plugin "org.apache.cordova.console" via plugin registry
   Fetching plugin "com.ionic.keyboard" via plugin registry
   
   Your Ionic project is ready to go! Some quick tips:
   
    * cd into your project: $ cd myApp
   
    * Setup this project to use Sass: ionic setup sass
   
    * Develop in the browser with live reload: ionic serve
   
    * Add a platform (ios or Android): ionic platform add ios [android]
      Note: iOS development requires OS X currently
      See the Android Platform Guide for full Android installation instructions:
      https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html
   
    * Build your app: ionic build <PLATFORM>
   
    * Simulate your app: ionic emulate <PLATFORM>
   
    * Run your app on a device: ionic run <PLATFORM>
   
    * Package an app using Ionic package service: ionic package <MODE> <PLATFORM>
   
   For more help use ionic --help or visit the Ionic docs: http://ionicframework.com/docs
   
   +---------------------------------------------------------+
   + New Ionic Updates for February 2015
   +
   + The View App just landed. Preview your apps on any device
   + http://view.ionic.io
   +
   + Add ngCordova to your project for easy device API access
   + bower install ngCordova
   +
   + Generate splash screens and icons with ionic resource
   + http://ionicframework.com/blog/automating-icons-and-splash-screens/
   +
   +---------------------------------------------------------+
   
   Create an ionic.io account to use the Ionic View app and other features?
   (Y/n): Y

3. 註冊ionic

   在ionic start的最後詢問是否Create an ionic.io account to use the Ionic View app and other features?，選擇Y，進行賬號註冊

4. 更新項目

   $ ionic login 
   $ ionic upload

5. 運行項目

   $ cd myApp
   $ ionic platform add android
   $ ionic build android
   $ ionic run android

REFERENCE (參考)

• $JAVA_HOME環境變量在Mac OS X中設置的問題
• Mac OS X，下載並安裝ant
• Cordova
• The Command-Line Interface
• 淘寶 NPM 鏡像
• 性能、UX、跨平臺：移動Web應用UI框架大比拼