写稿计划：
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/...的关系
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\<ID>\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: <IP-Address>: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: /<project-name>/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名字：
/<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/
Paste_Image.png
下一步：开发你自己的Vue.js Hybrid APP
网友评论