寫稿計劃： PhoneGap Hybrid APP 開發實戰(1)：第一個 Android APK PhoneGap Hybrid APP 開發實戰(2)：Framework7 + Vue.js模板 PhoneGap Hybrid APP 開發實戰(3)：Android API操作: Media/File PhoneGap Hybrid APP 開發實戰(4)：API: webview PhoneGap Hybrid APP 開發實戰(5)：TBD
###前言： 以往已經開發了很多Web應用，比如：微信公眾號RSS。但這些應用如何成為安卓、蘋果應用呢？當然，安卓/蘋果上的瀏覽器直接開啟也可以，但原生應用還是有很多優勢的，比如可以離線、可以打包圖片/音訊資源等等。 如何解決？ Hybrid APP一直很流行，解決了三端（Web/Andriod/iOS）開發的限制。開發者用普通的HTML+JS技術，結合框架（UI：比如Framework7，前端：比如Vue.js，後端：比如Flask），先開發出網站Web應用，然後通過工具（Phonegap）一鍵轉換成Android&iOS App。對效能要求不苛刻及原型開發來說，是最快速、省力的流程！ 我們這個專題，就是準備跟大家一起走一走這個極速流程！
####1. 準備Android Studio開發環境 PhoneGap是以Cordova為核心的一個釋出版本。類似於Linux核心和Redhat/Ubuntu/...的關係
- Install Java SDK, 設定環境變數 JAVA_HOME
JAVA_HOME="C:\Program Files\Java\jdk1.8.0_131" - Download Android Studio，很耗時。。。 1.8GB, 解壓出來 4~5G.
- 設定環境變數Android HOME
ANDROID_HOME=C:\Users\<ID>\AppData\Local\Android\sdk - Install AVD 或者真機（直接USB連線電腦，手機要開啟USB除錯）
- 安裝AVD相對應的 SDK，真機連的時候，也會提示你安裝對應的SDK
- Create a New Project, and Run -> should open an Android Simulator and run your first Android APP
####2. PhoneGap Desktop
- 電腦上安裝PhoneGap Desktop: http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/
- 手機上安裝App: PhoneGap Developer。這樣，通過App繫結PhoneGap Desktop，不用build，就可以直接預覽原生的Android或iOS上的效果了
- PhoneGap Desktop -> Create a new PhoneGap Project -> 選Framework7模板 -> 取個名字
也可以用命令列：
phonegap create pg-f7 --template framework7
- Serve this project 啟動，注意最下方的地址
- Open Chrome: :3000 在電腦上用Chrome瀏覽器，可以快速預覽app的效果。通過上方按鈕：切換瀏覽器還是模擬手機（安卓、Apple、iPad等等）。會影響 myApp.device的值（Framework7的功能） 注：這裡介面上“Play1”是我後加的。Chrome那些紅色告警，是外掛的安全提示，現在不用理會
以下是myApp.device在不同環境下的返回值：
- Chrome模擬Android手機：{"androidChrome":true,"ipad":false,"iphone":false,"android":true,"ios":false,"os":"android","osVersion":"5.1.1","webView":null,"statusBar":false,"pixelRatio":3.4999998807907104}
- Chrome桌面：{"androidChrome":false,"ipad":false,"iphone":false,"android":false,"ios":false,"webView":null,"statusBar":false,"pixelRatio":1.5}
- 安卓真機：device: {"androidChrome":`true`,"ipad":false,"iphone":false,"android":`true`,"ios":false,"os":"android","osVersion":"6.0.1","webView":null,"statusBar":false,"pixelRatio":3}
複製程式碼3 Build APK in Android Studio
- 開啟終端視窗，run phonegap CLI，新增平臺支援：
phonegap plugin add cordova-plugin-media --save
phonegap platform add android browser
複製程式碼- 開啟Android Studio，Import project (Eclipse...)，指向Phonegap: //platforms/android 目錄
- Run -> Select AVD or 真機，Bingo！ 手機上應該出現跟Chrome模擬一樣的頁面了，而且是原生Native Android哦！
4. 自定義你的Android APK
新增Splash和自定義icon
參考 Android Splash Screen Example Using Android Studio 圖示工場 - 移動應用圖示生成工具，一鍵生成所有尺寸的應用圖示
- 準備好圖示和Splash
- 新建：/android/res/layout/splash.xml
android:background="@drawable/screen" - 新建：/android/java/com.phonegap.helloworld/SplashScreen Class
修改APK名字：
/<project-name>/platforms/android/res/values/strings.xml
5. 匯出APK
很方便：Android Studio -> Build ->build an Apk。十幾秒就出來了，我們這個小程式，打包後才2MB。 然後，你就可以快樂的跟小夥伴分享了。 如果要上市場釋出，還需要簽名，暫時不表。
6. Hybrid APP的結構如下：
入口檔案：/www/index.html 引用js： /www/js/my-app.js 所有資原始檔：/www/static/
下一步：開發你自己的Vue.js Hybrid APP