JQM+Phonegap项目实战Demo1.0

quasiceo 2014-09-04

展开全文

1.1版本新增功能：

1、增加离线浏览功能，实现文字及图片的缓存。
2、增加清除缓存功能，包括清除文字和图片的缓存。
3、增加开启、关闭离线浏览功能。
4、增加下拉刷新功能
5、去除1.0版本里的IOS主题

功能预览：

结合iscroll动态ajax跨域加载数据
结合iscroll上拉翻页
图片上传
phonegap控制双击返回退出程序

JQM+Phonegap项目实战Demo1.0 简介：

1、结合iscroll动态ajax跨域加载数据

关于jqm+iscroll已经在上篇文章:JQM项目实战 Demo中举了很多例子，需要的朋友可以下载来看一下。

关于ajax的跨域请求，此demo中主要是运用了jsonp的方式来实现的。具体的大家可以查看源码，这里摘抄部分代码：

$.ajax({
					async : false,
					url : serverURL + '/ajax!jqmMobileDemoInput', // 跨域URL
					type : 'get',
					dataType : 'jsonp',
					jsonp : 'jsoncallback', //默认callback
					data : params,
					timeout : 5000,
					beforeSend : function() { //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话，就已经不是ajax事件了
					},
					success : function(json) { //客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，会动态执行这个callback函数 
						hideLoading();
						var jsonObject = eval("(" + json + ")");
						if("ok"==jsonObject.str){
							$.mobile.changePage("dialog.html", {
								role : "dialog",
								transition : "slidedown"
							});
						}else{
							myAlert("发布失败");
					}
						
					},
					complete : function(XMLHttpRequest, textStatus) {
					},
					error : function(xhr) {
						hideLoading();
						//jsonp 方式此方法不被触发
						//请求出错处理 
						myAlert("请求出错(请检查相关度网络状况.)");
					}
				});

上面提到的myAlert方法是笔者借用jqm的loading效果写的一个信息提示效果，提示文字并三秒自动隐藏，有兴趣的话可以在源码的global.js中找到此方法。

2、结合iscroll上拉翻页

iscroll上拉翻页已经在上篇文章:JQM项目实战 Demo中举了例子，而这里这是把数据通过ajax动态获取了，需要的朋友可以下载源码来看一下。

3、图片上传

这个功能包括内容文字和图片的上传两部分。

1、在文字内容上传这里，由于是jsonp跨域上传，所以遇到了中文乱码问题，解决方法如下：

在ajax的参数中用encodeURIComponent(name)转码，例如：

var params = {
jqmMobileDemoInputName :encodeURIComponent(name),
jqmMobileDemoInputContent : encodeURIComponent(content)
				};

在服务器端也需要转码，拿java举例如：

URLDecoder.decode(jqmMobileDemoInputName, "utf-8")

2、图片上传这里的代码请大家看一下源码就可以了，这里贴一下服务器端接收图片的代码(java)：

String baseUrl = "jqmMobileDemoUploadFile/";
baseUrl += Tools.getCurrentDateSortNoTime() + "/";
String picUrl = request.getSession().getServletContext()
					.getRealPath("/").replace("\\", "/")
					+ baseUrl;
String fileName = new Date().getTime()+"ContentImg"
					+ Tools.getExtention(fileFileName);
File dstFile = FileTools.createFile(picUrl, fileName);
FileTools.copy(file, dstFile);
CompressPic cPic = new CompressPic();   
cPic.compressPic(picUrl, picUrl, fileName, fileName, 400, 0, true);

服务器端就和普通的web图片上传一样接收就可以了，需要注意的是，传过来的文件变量是file,文件名变量是fileFileName。

以上代码只是为了说明服务器端接收方式和普通web方式基本一样，里面用到的几个工具类，包括创建文件类、保存类、压缩类等就不在这里贴出来了。

4、phonegap控制双击返回退出程序

此功能是利用phonegap绑定方法到手机back按键，从而实现点击一次back提示“再点击一次退出”，再点击back则退出系统的功能。

此功能代码在global.js中，代码片段：

// 等待加载PhoneGap
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap加载完毕
function onDeviceReady() {
	// 按钮事件
	document.addEventListener("backbutton", eventBackButton, false); // 返回键
}

// 返回键
function eventBackButton() {
	 if($.mobile.activePage.is('#indexPage')){
		 myAlert('再点击一次退出!');
			document.removeEventListener("backbutton", eventBackButton, false); // 注销返回键
			document.addEventListener("backbutton", exitApp, false);//绑定退出事件
			// 3秒后重新注册
			var intervalID = window.setInterval(function() {
				window.clearInterval(intervalID);
				document.removeEventListener("backbutton", exitApp, false); // 注销返回键
				document.addEventListener("backbutton", eventBackButton, false); // 返回键
			}, 3000);
     }	 	
}

function exitApp(){
	navigator.app.exitApp();
}

写在最后的话:
对于jqm+phonegap+iscroll来做android客户端开发，根据笔者用3个机型分别是：
1、2.3系统单核
2、4.0系统双核
3、4.2系统四核
以上机型测试本demo来说，#1运行的流畅度很不理想，#2和#3都很流畅。
或许还有很多地方可以使性能更优化一些，笔者也不是专业移动开发人员，希望大家可以多多赐教，多多讨论。