Phonegap(cordova)小Dome

時間 2019-11-18

標籤 phonegap cordova dome 欄目 Cordova 简体版

原文原文鏈接

1、環境配置javascript

在這裏使用的是cordova，所以在建立的android項目中進行以下操做：php

1.在assets下建立www文件夾，把cordova.js 到/assets/www目錄下；css

2.把cordova-3.4.0.jar 到/libs目錄並Add to Build Path；html

3.把下載的phonegap中的xml文件夾拷貝到res目錄下；java

4.將MainActivity的繼承類由 Activity改成DroidGapjquery

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

<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標籤中添加以下信息

所需文件resourceweb

2、數據接口的引用ajax

使用聚合數據的歷史的今天數據接口，查看某月某日的事件列表。json

返回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
        }
    ]
});

3、編碼

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;" onclick="today()" value="看今天" /><input type="button" style="width:100px;" onclick="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.onload=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.onload=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}';
	}
?>

4、測試

首頁

查詢列表：

詳細信息：

demo源碼：Today

學之，以記之。