Phonegap(cordova)小Dome

2016-06-25 19:34:39来源:作者:人点击

一、环境配置

在这里使用的是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;" 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}';}?>


四、测试

首页





查询列表:



详细信息:



demo源码:Today

学之,以记之。

微信扫一扫

第七城市微信公众平台