最终效果:
主要采用方式:
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是Google主导的开源操作系统,主要用于智能手机和平板...
- 当从原生Activity返回到PhoneGap页面时,可以使用`startActivityForResult()`方法启动Activity,并在`onActivityResult()`方法中处理返回的数据。 - 在PhoneGap的JavaScript中,可以通过监听`deviceready`事件,...
在"android之PhoneGap入门实例"中,我们首先需要了解PhoneGap的安装和配置过程。开发者需要在本地安装Java Development Kit (JDK)、Android SDK以及Apache Ant等必备工具。然后,通过PhoneGap CLI(命令行接口)或...
它通过一个WebView组件(在Android中是Android Web View)加载本地或远程的HTML、CSS和JavaScript文件,从而实现与用户交互的功能。在这个示例中,“HelloWorld”很可能就是应用的主入口,它包含了展示"Hello, World...
在本篇《Android PhoneGap源码详解(二)》中,我们将深入探讨PhoneGap这一混合移动应用开发框架的内部机制,以及如何利用它来构建原生功能丰富的Android应用。PhoneGap是一个基于Apache Cordova的开源框架,允许...
在本文中,我们将探讨Android PhoneGap开发的关键知识点,以及在实际应用中可能遇到的问题和解决策略。PhoneGap是一个开放源代码框架,它允许开发者使用HTML、CSS和JavaScript来构建跨平台的移动应用程序,包括...
总之,搭建Android+PhoneGap开发环境涉及安装JDK、Android Studio、Node.js和PhoneGap CLI,配置Android SDK,以及创建和运行第一个PhoneGap项目。掌握这个过程后,开发者就可以利用Web技术开发出能在Android平台上...
在Android中,创建一个PhoneGap插件通常涉及以下步骤: 1. 创建Java类:你需要创建一个继承自`org.apache.cordova.CordovaPlugin`的Java类,这是你的插件核心。在这个类中,你需要重写`execute()`方法,这个方法会...
本篇将详细介绍如何在Android的PhoneGap项目中集成WebSocket插件。 首先,我们需要理解WebSocket的基本概念。WebSocket协议是HTTP的升级版,它在建立连接后保持持久化连接,使得数据可以在服务器和客户端之间双向...
phonegap的API提供 震动 响铃 调用原生弹窗功能. 此篇文章以cordova 3.3版本编写 据我总结核心步骤: 创建工程 ; 下载插件 ;编译工程; 调用插件; 按照如下步骤就能生产出代码: 打开cmd 控制台 1 使用...
5. **通信机制**:PhoneGap使用JSON消息传递机制,通过`pluginResult`对象在JavaScript和Java之间传递数据。当Plugin执行完毕,它会返回一个结果,这个结果会被转化为JSON并传回JavaScript层。 在实际应用中,可能...
本文将深入探讨PhoneGap的核心技术、架构、通信过程以及在Android中的实现。 **WebView与JS通信** 在Android中,WebView是基于WebKit的组件,用于渲染网页内容。PhoneGap的可行性在于WebView支持JavaScript与本地...
- **使用`window.location`或`window.location.hash`**:可以改变URL的一部分来传递数据,或者利用`window.postMessage`进行双向通信,这种方式适用于简单的数据传递。 5. **示例应用——MyTest** 文件列表中的...
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实例中,开发者通常会经历以下几个关键步骤: 1. **环境配置**:首先,你需要安装Java Development Kit (JDK)、Android SDK、Android Studio以及PhoneGap CLI。这些工具是开发Android PhoneGap...
在"PhoneGap开发中JS与Android之间的交互"这一主题中,我们将深入探讨如何通过JavaScript调用Android的API,以及如何处理Android与JavaScript的通信。 1. **PhoneGap架构** PhoneGap基于Cordova,它的架构分为三个...
android phonegap
■ 用PhoneGap和它的NFC插件写Android上的NFC应用程序用例 ■ 深入了解NDEF结构:测试已有的写标签程序,然后写自己的标签程序 ■ 用PhoneGap事件监听器来监听和过滤NDEF消息 ■ 写一个完整的Android应用程序来控制...
在Android中使用PhoneGap去访问Html,方便开发