转载请注明出处:CodingAlarm的博客
介绍
PhoneGap是快速开发APP平台,能把你写的页面转换成APP(无论是Android还是IOS),它还能调用手机核心功能接口,联系人、地理、声音、振动等。有了它前端人员也可以快速开发APP了。不过开发的APP是依赖于html的,它和原生的用Object-c或Android写成的APP比起来有差距,具体如下:
1.如果哪天你混合页面的APP在网络不好的情况下,CSS样式没加载上,那么页面会变成如下这样,原生的就不会有这情况。
2.动画表现上原生的会更好,能实现非常华丽的动画,而且非常稳定。
第一种情况没办法避免,但第二种情况,还是可以利用技术做一些弥补的,比如使用jQuery Mobile。
jQuery Mobile是PhoneGap的得力助手,虽然开发PhoneGap的程序,JQM不是必备的,用html+css写的普通页面也可以,但是,有了JQM可以使你的“APP”更像真实的APP(混合APP要注意的是,要让你的页面看起来更像APP原生)。
JQM是一堆样式集和事件,比如一个按钮,手机有手机的显示样式,而且Android和IOS还分别不一样,用html做出来的往往会另手机用户没有好的感受。使按钮等组件更接近手机平台的样式,是前端人员必做的。JQM提供了这方面样式的封装,通过简单属性设置就能做出和手机平台相似的按钮,非常方便。
通过PhoneGap平台将页面打包成APP
1.创建jQueryMobile的站点(参考《使用DreamWeaver6创建jQueryMobile移动站点》),创建的站点中一定要包括index.html,不然在phoneGap上传时无法通过。
2.把创建的站点打包成zip
右键你的站点文件夹,选择“添加到压缩文件”,然后在弹出的对话框中选择压缩成的类型
3.用PhoneGap发布成各种移动平台的安装包(创建应用)
a.官网登录https://build.phonegap.com/
用Adobe账号或GitHub账号登录,如果没有这两个账号选择Sign up注册一下
Sign in
Sign up
免费版的可以发布一个app,如果想发布多个需要升级,点击free
点击free后提示让你登录,可是你没有账号怎么办?点击SIGN IN下的"Get an Adobe ID"注册
注册成功的页面如下
b.上传刚打包好的zip包
点击Upload a .zip file,找到你的压缩包
等待上传
上传成功,点击ready to build
进入后会出现下面的页面,点击Android图标,让phoneGap生成Android平台的apk安装包,当然你也可以选择IOS和win的
点击Android后,apk会下载到本地,然后安装到手机,看看你的手机是不是多了个APP?这样你的网站就变成应用了,PhoneGap生成的APP还满意吗?。
如果你用的360浏览器,并且用了360手机管家,会是这样的,一键安装吧。
end