PhoneGap使用

转载请注明出处: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

时间: 2024-10-12 13:56:43

PhoneGap使用的相关文章

Phonegap(Cordova)3.4 + Android 环境搭建

PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够利用iPhone,Android,WP7等多种智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能. PhoneGap最初由Nitobi开发, 它被Adobe收购后,PhoneGap项目也被贡献给Apache软件基金会,并改名为 Apache Cordova. 目前最新版本:3.4.1 . Phone

使用The PhoneGap Developer App实现快速调试项目

如今,基于 PhoneGap 的混合 APP 开发技术更加成熟,优势更加凸显.移动互联网的迅猛发展,Android 和 iOS 的版本快速迭代,使 HTML5 的性能问题逐步解决.仅仅在 PhoneGap 官网上,已经有来自第三方开发者提交的数百项插件,涵盖了 APP 开发的各个方面,大大扩展了 PhoneGap 的功能体系. PhoneGap 官方推出了新的调试工具 The PhoneGap Developer App .这是一款由 PhoneGap 开发的APP ,安装在手机上后,可以通过

PhoneGap+Cordova+SenchaTouch-04-退出程序和对话框的使用

sencha touch 2.4.1对话框的使用是很简单的. 下面简单介绍下st对话框的使用,查看官方文档,在Ext.Msg中,找到show 方法,有个示例挺好 图1 按着示例做就搞定了! 我的代码如下,也是示例. Ext.Msg.confirm("Confirmation", "Are you sure you want to do that?", Ext.emptyFn); 效果图如下: 这里,我想把按钮等英文改为中文,查看文档,可以看到Ext.Msg有个but

为PhoneGap写一个android插件

为PhoneGap写一个android插件,要怎么做? 其实这句话应该反过来说,为android写一个PhoneGap插件,要怎么做? 这里以最简单的Hello World!为例,做个说明: 1.第一步,要先建立一个支持PhoneGap(Cordova)的android工程 因为这个插件本质上是安卓插件,用于PhoneGap,因此,要二者支持才行,所以我们要建立一个支持PhoneGap(Cordova)的android工程,插件在这个工程里面编写. 扫盲:PhoneGap现在已经出售给了Apac

我的第一个phonegap开发WebApp的demo 怎么搭建安卓开发环境以及安装phonegap

一.先来张图,赏心悦目观赏一下,哈 . 这个就是使用phonegap框架搭建起来的,运行在安卓环境上的第一个demo. 安卓的开发环境,大家都会搭建了,所以不赘述.讲一下,安装phonegap的步骤. 二.phonegap的安装   1. 设置系统变量系统变量 Path后面添加:(以下变量都是必须的,路径根据自己的设置)E:\android_sdk\sdk\tools;E:\android_sdk\sdk\platform-tools;E:\android_sdk\eclipse\plugins

安装配置PhoneGap开发环境(一)

1 安装JDK 略. 2 安装Eclipse并安装ADT插件 Android的官网提供集成了Android插件的Eclipse开发环境. 眼下訪问不了,尝试百度一下其他资源. 3 安装Android SDK最新版本号 眼下最新版本号为API 22. 4 安装Node.js 到Node.js官网下载并安装Node.js. 5 安装PhoneGap.Cordoba Node.js成功安装后,将其路径配入Path环境变量.以方便命令行使用.在命令行中输入: npm install -g phonega

phonegap常用事件

在任何PhoneGap项目中,首先应该侦听deviceready事件.事件触发表示DOM已经加载和PhoneGapAPI已加载,此时可以检测其他事件或者处理其他内容. 其他事件: <!DOCTYPE html>   <html>       <head>           <meta charset="utf-8" />           <title>PhoneGap resume Example</title&g

使用phonegap获取设备的一些信息

device.name   设备的名称device.phonegap   phonegap版本device.platform  设备的类型device.uuid  设备唯一识别号device.version  所运行的操作系统的版本device是被指派给window对象的 <!DOCTYPE html>   <html>          <head>           <meta charset="UTF-8">           

使用PhoneGap搭建一个山寨京东APP

为什么要写一个App 首先解释下写出来的这个App,其实无任何功能,只是用HTML和CSS模仿JD移动端界面写的一个适配移动端的Web界面.本篇主要内容是介绍如何使用PhoneGap把开发出来的mobile web app快速打包成Native App.最近还在学习HTML&CSS以及Javascript,偶然想想学这些有什么用,一方面可以做Web系统的前端开发,另一方面也可以做移动端的Web App.刚好最近了解到PhoneGap,研究了一下它的框架平台,花了两个晚上终于把一个web系统变成了

phonegap android 开发环境搭建

1.下载JDK并安装   http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 配置环境变量    i) JAVA_HOME的值 C:\Program Files\Java\jdk1.8.0_65 ii) classpath的值 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar iii) Path添加值  %JAVA_HOME%\bin;%JAVA_HOME