PhoneGap Hybrid APP 开发实战(1)：第一个 Android APK

写稿计划：
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/...的关系

参考 Android Platform Guide - Apache Cordova

Paste_Image.png

• 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\\AppData\Local\Android\sdk
• Install AVD 或者真机（直接USB连接电脑，手机要打开USB调试）

Paste_Image.png

Paste_Image.png

• 安装AVD相对应的 SDK，真机连的时候，也会提示你安装对应的SDK

Paste_Image.png

• 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

Paste_Image.png

• Serve this project 启动，注意最下方的地址

Paste_Image.png

• Open Chrome: :3000
  在电脑上用Chrome浏览器，可以快速预览app的效果。通过上方按钮：切换浏览器还是模拟手机（安卓、Apple、iPad等等）。会影响 myApp.device的值（Framework7的功能）
  注：这里界面上“Play1”是我后加的。Chrome那些红色告警，是插件的安全提示，现在不用理会

Paste_Image.png

以下是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 目录

Paste_Image.png

• 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

Paste_Image.png

修改APK名字：
//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/

Paste_Image.png

下一步：开发你自己的Vue.js Hybrid APP