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 .feeds.Feed(RSS);

这里使用了的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
捐赠说明