Phonegap(cordova)小Dome

最新推荐文章于 2024-08-27 15:51:22 发布

weixin_34408624

最新推荐文章于 2024-08-27 15:51:22 发布

阅读量62

点赞数

文章标签：移动开发 php json

原文链接：http://www.cnblogs.com/baalhuo/p/5762097.html

版权

一、环境配置

在这里使用的是cordova，因此在创建的android项目中进行如下操作：

1.在assets下创建www文件夹，把cordova.js 到/assets/www目录下；

2.把cordova-3.4.0.jar 到/libs目录并Add to Build Path；

3.把下载的phonegap中的xml文件夹拷贝到res目录下；

4.将MainActivity的继承类由 Activity改为DroidGap

5.在AndroidManifest.xml中添加如下配置信息

<supports-screens 
	android:largeScreens="true" 
	android:normalScreens="true" 
	android:smallScreens="true" 
	android:resizeable="true" 
	android:anyDensity="true" 
/>     
    
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

6.在 AndroidManifest.xml中的application标签中添加如下信息

所需文件resource

二、数据接口的引用

使用聚合数据的历史的今天数据接口，查看某月某日的事件列表。

返回JSON

{
    "error_code": 0, /*返回码*/
    "reason": "请求成功！",
    "result": [
        {
            "day": 1,  /*日*/
            "des": "1907年11月1日电影导演吴永刚诞生吴永刚，1907年11月1日生于江苏吴县。
			1932年后参加影片《三个摩登女性》、《母性之光》的拍摄工作。1934年在联华影片
			公司编导处女作《神女》，一举成名，...",  /*描述*/
            "id": 9000,  /*事件ID*/
            "lunar": "丁未年九月廿六",
            "month": 11,  /*月份*/
            "pic": "",  /*图片*/
            "title": "电影导演吴永刚诞生",  /*事件标题*/
            "year": 1907  /*年份*/
        },
        {
            "day": 1,
            "des": "1902年11月1日 挪威作家格里格诞生 　　格里格，1902年11月1日生于卑尔根。
			挪威作家。青年时代在奥斯陆和牛津求学，好旅行。1924年出版描写海员生活的小说
			《航船在前进》。1926年至1927年在...",
            "id": 9010,
            "lunar": "壬寅年十月初二",
            "month": 11,
            "pic": "",
            "title": "挪威作家格里格诞生",
            "year": 1902
        }
    ]
}

phonegap数据交互使用jsonp（具体原因请自己查证），因此需要将返回的json封装一下，即callback(json);，如下

callback({
    "error_code": 0, /*返回码*/
    "reason": "请求成功！",
    "result": [
        {
            "day": 1,  /*日*/
            "des": "1907年11月1日电影导演吴永刚诞生吴永刚，1907年11月1日生于江苏吴县。
			1932年后参加影片《三个摩登女性》、《母性之光》的拍摄工作。1934年在联华影片
			公司编导处女作《神女》，一举成名，...",  /*描述*/
            "id": 9000,  /*事件ID*/
            "lunar": "丁未年九月廿六",
            "month": 11,  /*月份*/
            "pic": "",  /*图片*/
            "title": "电影导演吴永刚诞生",  /*事件标题*/
            "year": 1907  /*年份*/
        },
        {
            "day": 1,
            "des": "1902年11月1日 挪威作家格里格诞生 　　格里格，1902年11月1日生于卑尔根。
			挪威作家。青年时代在奥斯陆和牛津求学，好旅行。1924年出版描写海员生活的小说
			《航船在前进》。1926年至1927年在...",
            "id": 9010,
            "lunar": "壬寅年十月初二",
            "month": 11,
            "pic": "",
            "title": "挪威作家格里格诞生",
            "year": 1902
        }
    ]
});

三、编码

Android端：

index.html (ps:一网友说这么写能减小打开首页时的空白时间)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.location='./main.html';
		</script>
	</head>
<body>
</body>
</html>

main.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>历史上的今天</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="css/mui.min.css">
	<script type="text/javascript" charset="utf-8" src="js/mui.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/app.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
	<style>
		html,
		body {
			background-color: #efeff4;
		}
	    .mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
			margin-top: 0;
		}
		.mui-table h4{
			line-height: 21px;
			font-weight: 500;
		}
		.mui-table .oa-icon{
			position: absolute;
			right:0;
			bottom: 0;
		}
		.mui-table .oa-icon-star-filled{
			color:#f14e41;
		}
		a{color:#000;}
		a:link {color: #000; text-decoration:none;} 
		a:active:{color: #000; } 
		a:visited {color:#000;text-decoration:none;} 
		a:hover {color: #000; text-decoration:none;}    
		#button{margin-right:10px;}	
	</style>
	<script>
		mui.init();
	</script>
</head>
<body>
<script>
	function today(){
		var myDate = new Date();
		var month = myDate.getMonth()+1;       //获取当前月份(0-11,0代表1月)
		var day = myDate.getDate(); 
		window.location.href="listinfo.html?month="+month+"&day="+day;
	}
	function sel(){
		var month = document.getElementById('month').value;
		var day = document.getElementById('day').value;
		if(month>12||month<1||day<1||day>31){
			document.getElementById('contented').innerHTML = "请输入正确的日期";
		} else {
			window.location.href="listinfo.html?month="+month+"&day="+day;
		}			
	}
</script>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">历史上的今天</h1>
</header>
<div class="mui-content" id="serch">
	<input type="text" id="month" placeholder="月份 如：10" /><br />
	<input type="text" id="day" placeholder="日期 如：4" /><br />
	<center><input id="button" type="button" style="width:100px;" οnclick="today()" value="看今天" /><input type="button" style="width:100px;" οnclick="sel()" value="查一查" /></center>
	<center><p id="contented"></p></center>
</div>
</body>
</html>

listinfo.html

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>历史上的今天</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="css/mui.min.css">
	<script type="text/javascript" charset="utf-8" src="js/mui.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/app.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/jquery-1.9.1.min.js"></script>	
	<style>
		html,
		body {
			background-color: #efeff4;
		}
		.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
			margin-top: 0;
		}
		.mui-table h4{
			line-height: 21px;
			font-weight: 500;
		}
		.mui-table .oa-icon{
			position: absolute;
			right:0;
			bottom: 0;
		}
		.mui-table .oa-icon-star-filled{
			color:#f14e41;
		}
		a{color:#000;}
		a:link {color: #000; text-decoration:none;} 
		a:active:{color: #000; } 
		a:visited {color:#000;text-decoration:none;} 
		a:hover {color: #000; text-decoration:none;}    
		#button{margin-right:10px;}		
	</style>
	<script>
		mui.init();
	</script>
</head>
<body>
<script>
window.οnlοad=setinfo;
//获取传来的参数
function getArgs() { 
    var args = {};
    var query = location.search.substring(1);
    var pairs = query.split("&"); 
     for(var i = 0; i < pairs.length; i++) {
            var pos = pairs[i].indexOf('=');
            if (pos == -1) continue;
                var argname = pairs[i].substring(0,pos);
                var value = pairs[i].substring(pos+1);
                value = decodeURIComponent(value);
                args[argname] = value;
        }
    return args;
}
//设置请求参数 发送请求
function setinfo(){
 	var str =getArgs();
	var month = str['month'];
	var day = str['day'];
	document.getElementById("muititle").innerHTML = month+"月"+day+"日";
	asyncrequest(month,day);
}
function asyncrequest(month,day){
     var filename = month + day;
     $.ajax({
	type: "GET",
        async: false,
        url: "http://YourDomain/getinfo.php?month="+month+"&day="+day,
	crossDomain: true,
        dataType: "jsonp",
        timeout: 5000,
        jsonp: "callback",
        success: function(data){           
		var parent = $(".mui-table-view");
	        var result = data.result;
		var len = eval(result).length;
	        var day = new Date(); 
		for(i=0;i<len;i++){
		<span style="white-space:pre">	</span>var today = day.getFullYear() - data.result[i].year;
			var info ='<li class="mui-table-view-cell"><div class="mui-table"><div class="mui-table-cell mui-col-xs-10"><h4 class="mui-ellipsis"><a href="./detail.html?title=' + data.result[i].title + '&pic=' + data.result[i].pic + '&des=' + data.result[i].des + '">'+data.result[i].title+'</a></h4><h5>距今：'+ today +'年</h5><p class="mui-h6 mui-ellipsis">'+data.result[i].des+'</p></div><div class="mui-table-cell mui-col-xs-2 mui-text-right"><span class="mui-h5">'+data.result[i].year+'</span></div></div></li>';
			parent.append(info);
		}
        },
        error: function(x,e){
	}
    });
}	
</script>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title" id="muititle">历史上的今天</h1>
</header>
<div class="mui-content" id="listinfo" style="display: none; ">
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
</ul>
</div>
</body>
</html>

detail.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>历史上的今天</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="css/mui.min.css">
	<script type="text/javascript" charset="utf-8" src="js/mui.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/app.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
	<style>
		html,
		body {
			background-color: #efeff4;
		}
		.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
			margin-top: 0;
		}
		.mui-table h4{
			line-height: 21px;
			font-weight: 500;
		}

		.mui-table .oa-icon{
			position: absolute;
			right:0;
			bottom: 0;
		}
		.mui-table .oa-icon-star-filled{
			color:#f14e41;
		}			
	</style>
	<script>
		mui.init();		
	</script>
</head>
<body>
<script>
window.οnlοad=setinfo;
function getArgs() { 
    var args = {};
    var query = location.search.substring(1);
    var pairs = query.split("&"); 
     for(var i = 0; i < pairs.length; i++) {
            var pos = pairs[i].indexOf('=');
            if (pos == -1) continue;
            var argname = pairs[i].substring(0,pos);
            var value = pairs[i].substring(pos+1);
            value = decodeURIComponent(value);
            args[argname] = value;
     }
    return args;
 }
 function setinfo(){
 	var str =getArgs();
	var title = str['title'];
	var pic = str['pic'];
	var des = str['des'];
	
	var str = des;
	var  m=str.match( /(\d+)年(\d+)月(\d+)日/);
	var titleinfo = m[1]+"年"+m[2]+"月"+m[3]+"日";
	
	document.getElementById("muititle").innerHTML = titleinfo;	
	document.getElementById("title").innerHTML = title;
	document.getElementById("pic").src=pic;
	document.getElementById("des").innerHTML ="      "+ des;	
	var imgW = document.getElementById('pic').style.width;
 }
</script>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title" id="muititle"></h1>
</header>
<div class="mui-content">
	<center><h3 id="title"></h3></center><br/>
    <center><img id="pic" src="" /></center><br/>               
	<p class="mui-h4" id="des"></p>
</div>
</body>
</html>

服务端：

<?php
	//判断请求参数是否存在
	if(isset($_GET['month'])&&isset($_GET['day'])&&isset($_GET['callback']){
		$month = $_GET['month'];
		$day = $_GET['day'];
		$url="http://api.juheapi.com/japi/toh?v=1.0&month=".$month."&day=".$day."&key=YourKey";
	
		$file = $month.$day.".txt";
		
		//判断所请求的数据是否已存在 存在则直接读取
		if(file_exists($file)){
			$myfile = fopen($file, "r");
			$json = fread($myfile,filesize($file));
			fclose($myfile);
			echo $_GET['callback'] . '(' . $json . ');';
		} else {
			//若文件不存在则请求并写到目录下以便下次请求
			$json = file_get_contents($url);
			$myfile = fopen($file, "w");
			fwrite($myfile, $json);
			fclose($myfile);			
			echo $_GET['callback'] . '(' . $json . ');';
		}
	} else {
		echo '{"error_code":1}';
	}
?>

四、测试

首页

查询列表：

详细信息：

demo源码：Today

学之，以记之。

转载于:https://www.cnblogs.com/baalhuo/p/5762097.html

weixin_34408624

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Phonegap(cordova)小Dome

一、环境配置在这里使用的是cordova，因此在创建的android项目中进行如下操作：1.在assets下创建www文件夹，把cordova.js 到/assets/www目录下；2.把cordova-3.4.0.jar 到/libs目录并Add to Build Path；3.把下载的phonegap中的xml文件夹拷贝到res目录下；4...
复制链接

扫一扫