小程序和cordova
2017-12-27 18:16:00 weixin_34293911 阅读数 5

“可惜的是,这些技术里面没有一项是「小程序」首创的,且大都有超过两年的历史:百度的 Blend UI、阿里的 Hybrid 容器、Google 的 PWA/AMP、Phonegap/Cordova、React Native/Weex……这也是很多技术从业人吐槽小程序在技术上毫无创新的原因。”

转载自:微信小程序正式上线,这是身为程序员的体验http://daily.zhihu.com/story/9136657


Cordova是什么?

使用HTML, CSS & JS进行移动App开发

多平台共用一套代码,免费开源

http://cordova.axuer.com/

小程序和cordova 相关内容

2016-06-25 13:07:00 weixin_34408624 阅读数 1

一、环境配置

在这里使用的是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

学之,以记之。

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

小程序和cordova 相关内容

2016-06-25 13:07:26 baalhuo 阅读数 3146

一、环境配置

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

四、测试

首页

      

查询列表:


详细信息:



GitHub:Today

学之,以记之。

小程序和cordova 相关内容

2015-12-15 23:22:31 gghome 阅读数 2621

JavaScript是一种运行在浏览器的脚本,它简单,轻巧,易于编辑,这种脚本通常用于浏览器的前端编程,但是一位开发者Ryan有一天发现这种前端式的脚本语言可以运行在服务器上的时候,一场席卷全球的风暴就开始了。

[1]  Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型的实时应用。

Node是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快,性能非常好。Node对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。

 

 

Node.js搭建的聊天服务器,网页,手机,之间的及时通信技术.,采用socket.io

服务器端node.js 代码:

var express = require('express'),   //创建一个express对象

io = require('socket.io');        //创建一个socket.io对象

var app = express();            

app.use(express.static(__dirname));

var server = app.listen(1000);    //监听1000端口

var ws = io.listen(server);   

console.log('ok!!!!');           输出OK

ws.on('connection'function (socket) {

    socket.emit('open''7890');  //通知客户端已经连接

    console.log(客户端连接OK );

    ///检测IP

    socket.on('send'function (msg) { //像全体用户广播

        ws.emit('get', msg);

    });

});

 

 

客户端代码:

<script type="text/javascript" src="js/socket.io.js"></script>//引入socket.io

 

<script type="text/javascript">

            $(function () {

                //与服务器建立了连接

                var ws = io.connect("http://192.168.23.1:1000");

                ws.on('open'function () {

                    alert("与服务器连接成功");

                    $("#btn1").click(function () {

                        var msg = $("#txt1").val();

                        ws.emit('send', msg);

                    });

                });

                ws.on('get'function (data) {

                    $("#txt2").val(data);

                });             

            });

</script>

 

 

Hybrid APP需要手机端android 系统支持websocket

Web APP要求使用的浏览器支持websocket

 

 

什么地方试用这个技术:

1:消息推送

2:即时聊天

小程序和cordova 相关内容

2018-10-09 15:09:00 weixin_34255055 阅读数 22

简评:跨平台开发五彩斑斓,本文作者简单介绍RN和Cordova的两种不同终端跨平台流程,从与原生开发联系中分析其利弊。

什么是原生(Native)?

原生是一个相对概念。其实软件开发最后意义指在操作硬件(大量晶体管和电路等),而操作硬件的原始指令对普通人类来说几乎是天书。不断发展中为了方便理解和操作,软件被划分成很多层,一个框架运行在另一个框架上,而越贴近硬件的框架,就越原生(More Native)。

13192231-3360e39d0277aa46.jpg

React Native 相对 Cordova 更原生

以ios和android开发为原生开发基准。Cordova 是基于本机的浏览器框架进行扩展开发,它的按钮,UI,你能看到的一切都是基于浏览器页面模拟展示的。RN则是直接基于本机框架中运行,也就是前面说的相对Cordova而言More Native。

13192231-9811c557b5dee813.jpg

如何抉择?

其实原文作者的整体描述都是偏向于选择RN,我倒不认为这有什么绝对的选择,RN虽然相对流畅性能较好,可也意味着开发成本学习成本的提高,而Cordova确能使前端开发人员快速上手,快速集成到终端应用,这一高效性也是不能忽略的,虽然是在牺牲性能情况下。

当然有的开发者会说性能用户体验难道不是第一生产要素吗?那这样直接基于原生开发不是更好,所以都有利弊,结合自身情况考虑抉择才是硬道理。

有兴趣的朋友可以继续探讨下。


13192231-99f102cc362dddd6.jpg
React Native vs. Cordova.

原文:React Native vs. Cordova, PhoneGap, Ionic etc.

推荐阅读:
各大浏览器相继发布声明将停止支持 TLS 1.0 和 TLS 1.1 !
如何在 Cordova Android 7.0.0 以下版本集成最新插件 极光插件为例

小程序和cordova 相关内容

没有更多推荐了,返回首页