Phonegap(cordova)小Dome 阳光穿透心脏的1/2处 2022-09-22 01:16 173阅读 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
相关 redis 简单分布式锁dome redis 简单分布式锁dome import org.springframework.beans.factory.annotation.Value; i ╰+哭是因爲堅強的太久メ/ 2024年03月27日 13:39/ 0 赞/ 74 阅读
相关 HTML5画布小dome八卦图 <table> <tbody> <tr> <td> </td> <td><span><!DOCTYPE html> </span 「爱情、让人受尽委屈。」/ 2023年08月17日 16:51/ 0 赞/ 102 阅读
相关 spring cloud实例Dome详细搭建(二) 详解搭建spring cloud的实例Demo,跟着一步一步走,肯定可以的 直接跟上上一章 继续搭建 配置中心(config), 熔断器(hystrix),(负载均 你的名字/ 2023年02月18日 08:00/ 0 赞/ 4 阅读
相关 Phonegap(cordova)小Dome > 一、环境配置 > > 在这里使用的是cordova,因此在创建的android项目中进行如下操作: > > 1.在assets下创建www文件夹,把cordova.js 阳光穿透心脏的1/2处/ 2022年09月22日 01:16/ 0 赞/ 174 阅读
相关 JS_无限dome任意拖动 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5q2qIHwg5 深藏阁楼爱情的钟/ 2022年09月14日 13:26/ 0 赞/ 252 阅读
相关 spring+dubbo+zookeeper 微服务架构Dome 1.安装好zookeeper:[zookeeper安装步骤][zookeeper] 2.搭建好dubbo管理控制台:[dubbo管理控制台搭建步骤][dubbo] 3.Do Myth丶恋晨/ 2022年06月05日 23:22/ 0 赞/ 242 阅读
相关 spring cloud实例Dome详细搭建(一) 详解搭建spring cloud的实例Demo,跟着一步一步走,肯定可以的 -------------------- [GitHub代码地址][GitHub] 准备 一时失言乱红尘/ 2022年01月29日 23:19/ 0 赞/ 401 阅读
相关 spring boot拦截器dome 配置拦截路径放行路径 WebConfig类 package com.roncoo.education.util.Interceptor; impor 痛定思痛。/ 2021年09月26日 09:18/ 0 赞/ 391 阅读
相关 ZMQ dome 1,pom <!-- ZeroMq--> <dependency> <groupId>org.zeromq</groupId> 秒速五厘米/ 2021年09月24日 22:32/ 0 赞/ 228 阅读
还没有评论,来说两句吧...