研发三部系列培训010-phonegaphtml5视频初泳飞phonegaphtml

1、基于phonegap+html5的移动端应用解决方案介绍东华股份公司 研发三部医院协同组 初泳飞2014/12/18 北京市海淀区东华合创大厦16层东华软件股份公司现在手机应用的发展速度令人难以想象，有些实力的企业都在开发自己的手机端应用。目前市场上常用的手机开发平台有ios，android，symbian，Windows Phone，WebOS，BlackBerry等等，市场份额最大的还是ios和android，ios应用采用Objective-C来开发，基于C的面向对象语言，而android是java语言。要开发一个像样的手机端应用，无论是开发周期，还是开发成本，对中小企业来说还是相对偏高

2、的。并且之后的维护，版本更新等等也会需要安排专岗，不方便采用外包的形式。phonegap可以把用html+javascript开发的纯静态应用打包成不同的手机端应用，其中就包括ios，android，当然还有Blackberry，WindowsPhone，WebOS，Symbian，基本上可以覆盖所有的智能机。为手机应用开发提供了一套快捷的开发方案。Html5+PhoneGap | 背景背景GloriaPhoneGap是什么 PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发框架。它使开发者能够利用iPhone，Android，Palm，

3、Symbian,WP7,Bada和Blackberry智能手机的核心功能包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如iPhone的iPhone SDK，Android的Android SDK等，也可以和DW5.5配套开发。使用PhoneGap只比为每个平台分别建立应用程序好一点点，因为虽然基本代码是一样的，但是你仍然需要为每个平台分别编译应用程序。 PhoneGap针对不同平台的WebView做了扩展和封装，使WebView这个组件变成可访问设备本地API的强大浏览器，所

4、以开发人员在PhoneGap框架下可通过JavaScript访问设备本地API。 WebView是什么（WebView组件实质是移动设备的内置浏览器 WebView这个内置浏览器特性是Web能被打包成本地客户端的基础，可方便的用HTML5、CSS3页面布局，这是移动Web技术的优势相对于原生开发） 。Html5+PhoneGap | 背景Gloria标题导航 | 标题Gloria(1)可跨平台：PhoneGap是唯一的一个支持7个平台的开源移动框架（PhoneGap包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能，几乎Native App能

5、完成的功能他都能完成）。它的优势是无以伦比的：开发成本低据估算，至多Native App的五分之一！(2)易用性，基于标准的Web开发技术 (html + css +js)(3)提供硬件访问控制（api）(4)可利用成熟javascript框架（JqueryMobile SenchaTouch等）(5)方便的安装和使用优势标题导航 | 标题Gloria(1) PhoneGap应用程序的运行是寄托于移动设备上各平台的内置浏览器webkit的，受到webkit处理速度影响，以及各个平台的硬件与软件的性能制约，其程序运行的速度会比原生的程序慢、内存消耗比原生态大些、稳定性差一些。但是这些问题在1-2

6、年内都会有所缓解，因为现在的硬件的发展速度太快了。(2)还有一些底层的功能需要插件来实现比如（推送功能）(3)平台差异化不同，PhoneGap应用程序在所有平台上运行界面看起来都一样。即使这个应用程序与原生应用很相像，但对于习惯了iOS与 Android 平台的用户来说，会觉得不习惯，他们还是会很快看出差异。不足标题导航 | 标题Gloria关于前端框架 移动设备上的前端框架目前发展非常迅速，从Phonegap Development Tool列表上就可以看出，很大一部分都是前端开发框架。框架的种类很多，有打包了UI实现的例如Sencha Touch、jQuery Mobile、jQ Touc

7、h、jQ.Mobi等，也有UI无关的例如Zepto。 jQuery Mobile的实现方式是在jQuery的基础上写了一套Mobile相关的代码，例如事件、各种模拟的Native UI等。这种基于PC上的框架来实现移动框架的方式，使用时还必须先引用庞大（相对于移动设备而言）的jQuery。jQuery兼容了PC上各种浏览器的实现，而相对于移动设备较为单一的浏览器环境而言是臃肿的。 jQ.Mobi则换了种方式，它针对移动设备重写了jQuery中最常用的部分接口（jqMobi），因此在代码体积和效率上有更佳的表现，此外，在jqMobi的基础上还提供了jqUi。 jQ Touch与jQ.Mobi也很

8、相似，既可以选择jQuery，也可以选择Zepto来作为底层脚本库。 了解各个框架的特点后，就可以根据自己应用的特性来选择合适的框架了，如果应用UI完全自己实现，页面切换也是Single Page + 自己实现切换，因此基本上使用Zepto或者jqMobi就足够了。标题导航 | 标题准备：JDK1.6以上ADT（Android Development Tool）内包含 Android sdk、eclipsenode.js（官网下载就行） 注：3.0以上需要安装以上注意: 3.0以上android sdk最好下载一个4.4以上版本环境搭建Gloria标题导航 | 标题设置环境变量：设置JAVA环

9、境变量之后还需要添加如下内容系统变量path后面添加D:ADTeclipsepluginsorg.apache.ant_1.8.3.v201301120609D:ADTsdkplatform-toolsD:ADTsdktools验证环境变量：cmd执行java、javac、ant环境搭建Gloria标题导航 | 标题安装phoneGap：1、安装nodejs2、打开cmd执行：npm install g phoneGap/cordova3.0环境搭建Gloria标题导航 | 标题打开CMD,CD到要存放工程的目录执行：/创建工程phonegap create hello1/创建工程并指定包名工

10、程名phonegap create hello com.test.hello HelloWord/切换到工程目录 cd hello/创建adnroid平台工程phonegap platform add android/编译phonegap build/运行phonegap run android3.0创建项目Gloria标题导航 | 标题下载2.9的包并解压Cmd窗口cd到.phonegap-2.9.0libandroidbin执行：create d:hello com.test.hello HelloWord2.9创建项目Gloria标题导航 | 标题当你环境搭建完成、helloword也完

11、成后。接下来的问题就是如何与后台交互。 首先，PhoneGap是针对不同平台的WebView做了扩展和封装，所以我们完全可以把PhoneGap生成的应用看成一个浏览器。既然是浏览器，那么大家也可以想像的到，它的通讯方式是跟普通的BS架构的web程序是一样的。 唯一不同的地方是：这里所有的前端页面元素（html、js、css、img等）都是直接存在于客户端的，而不是访问服务端时响应返回的。 因为前端的页面元素存在于客户端，那么当我们请求服务端时就只需要业务数据，拿到数据后往客户端页面填充就可以；所以这里与服务端交互时只能采用异步的方式（AJAX），否则客户端将会显示服务端返回的内容。 当我们采用

12、AJAX方式访问服务端时，因为客户页面与服务端不处于同一个域，这时就会出现一个跨域请求的问题。下边是PhoneGap给出的解决方案。/ 支持跨域$(document).on(mobileinit, function() / support cross-domain requests 支持跨域 $.support.cors = true; $.mobile.allowCrossDomainPages = true;);后台交互Gloria标题导航 | 标题关于服务器端向Android客户端的推送，主要有三种方式： 1.客户端定时去服务端取或者保持一个长Socket，从本质讲这个不叫推送，这是去服

13、务端拽数据。但是实现简单，主要缺点：耗电等 2.Google的C2DM，具体不细说，缺点，服务器在国外，你懂得，不是很稳定。 3.XMPP协议，它是一种基于XML的传递协议，具有很强的灵活性和可扩展性。它的特点是将复杂性从客户端转移到了服务器端。听说GTalk、QQ、IM等都用这个协议。 这里给大家推荐的androidpn就是基于xmpp协议。听说是韩国人写的、一个很轻量的项目。项目包含服务端跟客户端两部分。当然都是JAVA写的哈。 服务端网上有tomcat+spring+struts2版本。所以如果想的话，完全可以把服务端当做一个组件集成到自己的工程（当然了，前提是你的工程是javaweb）

14、，即使你不使用spring、struts2。 如果只是使用的话，网上教程还挺多的，这里就不写了，下边有几个链接。贴个链接： Android下推送方案（androidpn）GloriaIOS推送只有一种方法。通过苹果服务推标题导航 | 标题 JavaScript的速度虽然在近些年提高了100倍，其速度还是无法和原生代码相比。在编写复杂的业务逻辑时JavaScript显得力不从心。那么PhoneGap有没有办法解决这个问题呢？答案是肯定的。PhoneGap平台提供了插件功能，开发者可以将重量级的功能封装在原生代码开发的插件中，并将接口暴露给JavaScript，JavaScript在调用插件功能时

15、都是非阻塞的，所以并不影响JavaScript层的性能。 我们用了androidpn实现了推送。那我们是不是可以写个插件控制推送开关？是3.0以上版本 官方插件地址： 示例：phonegap plugin add com.example.hello.abcphoneGap官方文档： PhoneGap插件Gloria标题导航 | 标题PhoneGap2.9插件实例Gloria编写插件后台代码package org.apache.cordova.plugin;import org.apache.cordova.api.CallbackContext;import org.apache.cordov

16、a.api.CordovaPlugin;import org.json.JSONArray;import org.json.JSONException;/* This class echoes a string called from JavaScript. */public class Echo extends CordovaPlugin Overridepublic boolean execute(String action, JSONArray args,CallbackContext callbackContext) throws JSONException if (action.eq

17、uals(echo) String message = args.getString(0);this.echo(message, callbackContext);return true;return false;private void echo(String message, CallbackContext callbackContext) if (message != null & message.length() 0) callbackContext.success(message); else callbackContext.error(Expected one non-empty string argument.);标题导航 | 标题PhoneGap2.9插件实例Gloria添加config.xml插件配置标题导航 | 标题编写前端JS代码win