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

  • 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值