Phonegap试用手记

phoneGap是什么?

就是个壳子,方便原来做web开发的同学快速切入移动端开发。 本手记最终将生成“五四陈科学院”android版本和ios版本。

安装

基础环境是rmbp,有java环境,有xcode环境。

官方说明在http://phonegap.com/install/ ,居然没有被墙,怪不得不火。

需要先安装nodejs。去http://nodejs.org 下载一个pkg包,双击运行安装,然后就会有npm这个命令了。

然后运行sudo npm install -g phonegap完成安装。

使用

  • phonegap create chen
  • cd chen

创建一个app。

  • phonegap run android
  • phonegap run ios

上述两个命令分别是启动android(其慢无比)和ios虚拟机,第一次运行可能会有需要安装anroid-sdk和ios的东西,照着安装。

关键的两个目录www和platform。

  • www下所有的html js css完成了交互
  • platforms里是转化后的java/objectC代码

常见配置

  • vim www/config.xml

修改核心定义文件:

  • name description author信息可修改为想要的
  • 一堆icon的定义,是各种条件下使用图标
  • <gap:plugin name=“ChildBrowser” /> 引用了插件ChildBrowser,用来打开常见的webview

写js/html

可以直接用上jquery之类的东西,省事。

这里目标是读本博客的rss文件显示出来。

  • var feed = new google.feeds.Feed(RSS);

这里使用了google的api,在html里进行了js声明:

一切都变得很简单,插上usb线,phonegap run android,手机里有了这个app。

http://www.raymondcamden.com/index.cfm/2011/10/11/PhoneGap-RSS-Reader 这个老外很有耐心地完成了所有的代码,还提供下载。

icon的问题

  • www目录下的config.xml与res目录的图片文件,统统都是给phonegap线上的编译准备的,本地编译时,是没有意义的,要去platforms下找对应的文件修改,只能说这种商业模式直接导致了这项技术的不可传播。

  • 亲测在android4.2.1+三星galaxy s3+MIUI 4.3.14下icon会被cache,经过把packagename改成新的才起作用。

代码及demo下载

apk:http://chen54.b0.upaiyun.com/20140318/chen.apk

code:https://github.com/54chen/demo

总结

  • 适合用来做一些内部工具,比如服务器监控图之类的。
  • 不适合对native性能较高的场景。
  • 对于复杂的交互依旧有不方便的地方。
  • 算是对html5 app封装比较完整的方案。


原创文章如转载,请注明:转载自五四陈科学院[http://www.54chen.com]

捐款订阅54chen
捐赠说明

Comments