Phonegap(cordova)小Dome

阳光穿透心脏的1/2处 2022-09-22 01:16 124阅读 0赞

> **一、环境配置**
> 
> 在这里使用的是cordova，因此在创建的android项目中进行如下操作：
> 
> 1.在assets下创建www文件夹，把cordova.js 到/assets/www目录下；
> 
> ![20160625121554841][]  
> 
> 
> 2.把cordova-3.4.0.jar 到/libs目录并Add to Build Path；
> 
> ![20160625121619744][]  
> 
> 
> 3.把下载的phonegap中的xml文件夹拷贝到res目录下；
> 
> ![20160625121636791][]  
> 
> 
> 4.将MainActivity的继承类由 Activity改为DroidGap
> 
> ![20160625121704432][]  
> 
> 
> 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标签中添加如下信息
> 
> ![20160625122033301][]  
> 
> 
> 所需文件[resource][]
> 
> **二、数据接口的引用**
> 
> 使用聚合数据的[历史的今天][Link 1]数据接口，查看某月某日的事件列表。
> 
> 返回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}';
>     	}
>     ?>
> 
>   
> 
> 
> **四、测试**
> 
> 首页
> 
> ![20160625125120015][]      ![20160625125312885][]  
> 
> 
> 查询列表：
> 
> ![20160625125409791][]  
> 
> 
> 详细信息：
> 
> ![20160625125505630][]  
> 
> 
>   
> 
> 
> **GitHub：[Today][]**
> 
> **学之，以记之。**

[20160625121554841]: /images/20220721/3711c756ffee4be5b405e02bbefeeaaa.png
[20160625121619744]: /images/20220721/a730930d3f4b4bd58f1fd1a2ee998d11.png
[20160625121636791]: /images/20220721/774296c6bf774ad5b13fcc80b2dab92b.png
[20160625121704432]: /images/20220721/250a74dfb7224e2c854c0bf23b2e6916.png
[20160625122033301]: /images/20220721/40dbc6e8e4f8474b927d98d8ea3937e0.png
[resource]: http://download.csdn.net/detail/baalhuo/9559266
[Link 1]: https://www.juhe.cn/docs/api/id/63
[20160625125120015]: https://img-blog.csdn.net/20160625125120015
[20160625125312885]: /images/20220721/6cb0bfbfb22c455b9fb2d2eb3a2bc7ae.png
[20160625125409791]: /images/20220721/5dc8806ac4fb4c8c8d4c37c4db1a678d.png
[20160625125505630]: /images/20220721/1592b2dc1f4b44e780e9db91112d7835.png
[Today]: https://github.com/holif/TodayInHistory