android phoneGap 静态页面中简单的数据传递

最新推荐文章于 2018-11-10 10:13:13 发布

yylxiaose

最新推荐文章于 2018-11-10 10:13:13 发布

阅读量114

点赞数

分类专栏： android 文章标签： android phoneGap 数据传递

本文链接：https://blog.csdn.net/yylxiaose/article/details/84240644

版权

android 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

最终效果：

主要采用方式：

window.localStorage.setItem("xxxx","");

window.localStorage.getItem("xxxx");

比较简单

核心文件：

index.html

<!DOCTYPE HTML>

<html>
<head>
<title>PhoneGap_dataTransfer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<link rel="stylesheet" href="../css/jquery.mobile-1.0.1.min.css">
<script type="text/javascript" charset="utf-8" src="../js/jquery-1.7.1.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/phonegap.js"></script>

<script type="text/javascript">
	$(function(){
		
		//点击登录
		var signIn = function(){
			var str_username = $("#input_username").val();
			var str_password = $("#input_password").val();
			//保存用户名和密码
			window.localStorage.setItem("username",str_username);
			window.localStorage.setItem("password",str_password);
			
			$.mobile.changePage("about.html", {transition:"slide"});
		}
		
		$('#btn_signIn').bind('click',signIn);
		
	});
</script>

</head>

<body>
	<div>
		用户名：<input id="input_username"/>
	</div>
	<div>
		密  码：<input id="input_password" type="password" />
	</div>
	<div>
		<button id="btn_signIn" type="button">登录</button>
	</div>
</body>

</html>

about.html

<!DOCTYPE HTML>

<html>
<head>
<title>about</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
</head>

<body>
	<div data-role="page">
	<!-- 要把script脚本写在这里面，不能写在head中，因为真正的page从这里开始 -->
	 <script type="text/javascript">
		$(function() {
			var str_username = window.localStorage.getItem("username");
			var str_password = window.localStorage.getItem("password");
			$("#lab_username").text(str_username);
			$("#input_password").val(str_password);
		});
	</script>
		<div data-role="header">
	      <h1>欢迎您</h1>
	   </div>
	   <div data-role="content" >
	   		<label id="lab_username"></label><br>
	   		<!-- 这里要小心，不能写input_password了，因为在index.html中也有一个，会冲突 -->
			您的密码是：<input id="about_input_password"/>
		</div>
	</div>
</body>

</html>

正如代码内注释处，要注意的地方：

1. <script>要写在page的后面。

2. id的标识最好不要相同了，不同的页面中不要用和其他页面相同的id。这也就是有别于平常的html不同处之一（可能是div作为了page的关系吧）。

3. 不可存放安全保密数据，只能作为简单的静态页面间的数据交互。

如果要和后台服务器数据交互该怎么办呢？用Plugin的形式吗？或是还有更好一点的方法？