Warren

不积跬步,无以至千里

  • 2013-05-02 20:16:21.0月
  • 2013-05-02 20:16:21.0

JQM+Phonegap项目实战Demo1.0

13

2013-05-02 20:16:21.0 / 分类:JqueryMobile / 标签:JqueryMobile,Jqm,demo,phonegap,上拉翻页,下拉刷新,iscroll,jsonp

前言:

此项目是在JQM项目实战 Demo的基础上增加了phonegap的封装,以及动态数据的获取。

1.0版本主要功能:

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

1.1版本新增功能:

1、增加离线浏览功能,实现文字及图片的缓存。
2、增加清除缓存功能,包括清除文字和图片的缓存。
3、增加开启、关闭离线浏览功能。
4、增加下拉刷新功能
5、去除1.0版本里的IOS主题
具体请查看:JQM+Phonegap项目实战Demo1.1



功能预览:

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

自2015-4-13起,为了本网站能够长久服务大家,该资源由以前的免费获取改为赞助获取,希望大家能够谅解。

获取该资源(包括源码和APK)需赞助¥9.9
支付宝:125779473@qq.com
赞助后请联系QQ125779473索要资源链接。


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都很流畅。
或许还有很多地方可以使性能更优化一些,笔者也不是专业移动开发人员,希望大家可以多多赐教,多多讨论。

以上
Warren


原创文章,转载请注明出处:http://www.wglong.com/main/artical!details?id=15

亲,忘记输入评论内容了吧?

小青 2015-04-16 17:41:24.0

9.9太值了!对我这个jqm和phonegap新手来说真的太有用了!谢谢博主!

喵喵 2014-09-07 16:43:06.0

退出之后程序实际上并没有退出 只是后台运行了 有没有解决办法呢

阿斗斗斗 2014-07-01 16:30:46.0

如果能提供服务端和数据库就更好不过了

leinov 2014-05-12 15:19:30.0

为什么用了ajax就不能滑动了

︶ㄣ码农☻じ★ve 2014-03-10 00:56:56.0

按两次退出这个有点复杂了,加个记数器,用setTimeout来计数器清零,如果三秒内再按一次就退出!

小雨 2013-10-14 22:05:06.0

请教打包。

Warren 2013-09-25 11:34:47.0

服务器代码上面已经贴了关键部分了,其他语言也可以类似的,其实就是跟普通web程序的服务器代码一样的。

www.phonegap100.com 2013-09-21 06:36:48.0

同求 phonegap代码

peter 2013-09-19 15:52:53.0

求服务器代码

qq929541303 2013-07-10 21:44:15.0

作者太给力了 !!! 求服务器代码

pma 2013-05-28 10:14:49.0

ios版本和安卓版本基本可以通用,除了环境不一样。当然比如ios没有退出概念,呵呵。

Warren 2013-05-02 23:38:50.0

@努力粪斗 能不能说具体点? 看看我这篇文章提到的,希望可以帮到你 http://www.wglong.com/main/artical!details?id=4#q10

努力粪斗 2013-05-02 21:57:34.0

为什么闪屏?

分享按钮