`
萧_瑟
  • 浏览: 161214 次
社区版块
存档分类
最新评论

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

阅读更多

最终效果:


 

 

主要采用方式:

 

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的形式吗?或是还有更好一点的方法?

 

  • 大小: 9.4 KB
  • 大小: 11.7 KB
分享到:
评论

相关推荐

    android+phonegap+jquery mobile

    【标题】:“Android + PhoneGap + jQuery Mobile” 这个项目标题揭示了一个使用三种技术栈构建的移动应用程序:Android、PhoneGap和jQuery Mobile。Android是Google主导的开源操作系统,主要用于智能手机和平板...

    android与phonegap混合开发之相互跳转

    - 当从原生Activity返回到PhoneGap页面时,可以使用`startActivityForResult()`方法启动Activity,并在`onActivityResult()`方法中处理返回的数据。 - 在PhoneGap的JavaScript中,可以通过监听`deviceready`事件,...

    android之PhoneGap入门实例

    在"android之PhoneGap入门实例"中,我们首先需要了解PhoneGap的安装和配置过程。开发者需要在本地安装Java Development Kit (JDK)、Android SDK以及Apache Ant等必备工具。然后,通过PhoneGap CLI(命令行接口)或...

    phonegap之android示例

    它通过一个WebView组件(在Android中是Android Web View)加载本地或远程的HTML、CSS和JavaScript文件,从而实现与用户交互的功能。在这个示例中,“HelloWorld”很可能就是应用的主入口,它包含了展示"Hello, World...

    android phonegap源码详解(二)

    在本篇《Android PhoneGap源码详解(二)》中,我们将深入探讨PhoneGap这一混合移动应用开发框架的内部机制,以及如何利用它来构建原生功能丰富的Android应用。PhoneGap是一个基于Apache Cordova的开源框架,允许...

    Android PhoneGap开发简结

    在本文中,我们将探讨Android PhoneGap开发的关键知识点,以及在实际应用中可能遇到的问题和解决策略。PhoneGap是一个开放源代码框架,它允许开发者使用HTML、CSS和JavaScript来构建跨平台的移动应用程序,包括...

    android+Phonegap开发环境搭建

    总之,搭建Android+PhoneGap开发环境涉及安装JDK、Android Studio、Node.js和PhoneGap CLI,配置Android SDK,以及创建和运行第一个PhoneGap项目。掌握这个过程后,开发者就可以利用Web技术开发出能在Android平台上...

    android PhoneGap 自定义插件

    在Android中,创建一个PhoneGap插件通常涉及以下步骤: 1. 创建Java类:你需要创建一个继承自`org.apache.cordova.CordovaPlugin`的Java类,这是你的插件核心。在这个类中,你需要重写`execute()`方法,这个方法会...

    android PhoneGap websocket 插件

    本篇将详细介绍如何在Android的PhoneGap项目中集成WebSocket插件。 首先,我们需要理解WebSocket的基本概念。WebSocket协议是HTTP的升级版,它在建立连接后保持持久化连接,使得数据可以在服务器和客户端之间双向...

    android phonegap震动,声音,Dialog

    phonegap的API提供 震动 响铃 调用原生弹窗功能. 此篇文章以cordova 3.3版本编写 据我总结核心步骤: 创建工程 ; 下载插件 ;编译工程; 调用插件; 按照如下步骤就能生产出代码: 打开cmd 控制台 1 使用...

    自定义plugin插件实现phonegap与Android交互

    5. **通信机制**:PhoneGap使用JSON消息传递机制,通过`pluginResult`对象在JavaScript和Java之间传递数据。当Plugin执行完毕,它会返回一个结果,这个结果会被转化为JSON并传回JavaScript层。 在实际应用中,可能...

    Android PhoneGap简析

    本文将深入探讨PhoneGap的核心技术、架构、通信过程以及在Android中的实现。 **WebView与JS通信** 在Android中,WebView是基于WebKit的组件,用于渲染网页内容。PhoneGap的可行性在于WebView支持JavaScript与本地...

    安卓和html5的交互,phonegap

    - **使用`window.location`或`window.location.hash`**:可以改变URL的一部分来传递数据,或者利用`window.postMessage`进行双向通信,这种方式适用于简单的数据传递。 5. **示例应用——MyTest** 文件列表中的...

    Android代码-phonegap-android

    PhoneGap Android is an Android application library that allows for PhoneGap-based projects to be built for the Android Platform. PhoneGap-based applications are, at the core, an application written in...

    Android PhoneGap实例

    在Android PhoneGap实例中,开发者通常会经历以下几个关键步骤: 1. **环境配置**:首先,你需要安装Java Development Kit (JDK)、Android SDK、Android Studio以及PhoneGap CLI。这些工具是开发Android PhoneGap...

    phonegap开发中JS与Android之间的交互

    在"PhoneGap开发中JS与Android之间的交互"这一主题中,我们将深入探讨如何通过JavaScript调用Android的API,以及如何处理Android与JavaScript的通信。 1. **PhoneGap架构** PhoneGap基于Cordova,它的架构分为三个...

    android phonegap

    android phonegap

    NFC+Arduino、Android与PhoneGap近场通信

    ■ 用PhoneGap和它的NFC插件写Android上的NFC应用程序用例 ■ 深入了解NDEF结构:测试已有的写标签程序,然后写自己的标签程序 ■ 用PhoneGap事件监听器来监听和过滤NDEF消息 ■ 写一个完整的Android应用程序来控制...

    Android PhoneGap DroidGap的使用

    在Android中使用PhoneGap去访问Html,方便开发

Global site tag (gtag.js) - Google Analytics