cordova JS和HTML页面的数据通信

来源：互联网发布：阿里云电视价格编辑：程序博客网时间：2024/05/22 05:28

项目下载地址：http://download.csdn.net/detail/findsafety/8698731

先放效果图吧

在第一个activity里的文本框输入内容，把内容传入到html中

在html页面中，在页面输入参数，让其赋值给第一个activity

在html页面中输入参数，去到一个新的activity,并且把值赋给它

在第二个activity里，输入内容到文本框，让其把值赋给html页面

_____________________________________________________________________________________________________________________

我的项目使用的cordova版本是5.0的，我发现很多网上的教程都是基于比较低版本的cordova的，也不知道是不是版本原因按照他们的教程我怎么都实现不了。比如说有一种方式是使用addJavascriptInterface()的方法，但是5.0的版本我根本找不到这个方法！后面经过不断摸索，才找到这个通过插件的方法实现通信

在5.0版本中，不再使用jar包的形式，我们如果要建立一个项目，需要通过命令行来新建（在此之前要先把环境配置好，详情请参见http://blog.csdn.net/findsafety/article/details/45367319）

我要建立一个名称为MyPluginTest的项目，所以在控制台输入命令

cordova create MyPluginTest com.example.myplugintest MyPluginTest

cd MyPluginTest

我在这里添加了几个插件

cordova plugin add org.apache.cordova.device

 cordova plugin add org.apache.cordova.console

下面是添加平台

cordova platform add android

由于我是使用eclipse来开发的，所以build这一步我就不再使用命令行了，而是等下用eclipse直接运行就好了。

所以执行完上面这些命令后，把生成的这个项目导入到eclipse中，就是一个最基本的helloworld了。

导入后可以看到项目是这个样子的，如果你从windows打开项目，你会看到assets文件夹里面包含www文件夹，里面放着各个html和js文件的。但是在eclipse中却发现assets文件夹里面没有www文件夹，这是怎么回事呢？其实是因为它被隐藏了，在这里我觉得没必要非让它显示出来，毕竟这是cordova不希望你看到的。再来看看，项目的根目录下面有一个www文件夹，其实如果我们要编辑html,js文件，是可以对它进行操作的，在这个www文件夹下找到index.html进行修改即可。

但是有一点要注意，您应该也注意到了www文件夹有一个类似快捷方式一样的小图标，这说明我们直接对该文件夹内的文件的修改并不能直接应用到assets/www文件夹内的，在修改完后，我们还需要在命令行中去到项目的根目录中运行命令

运行这个命令后，再在eclipse中运行，这样html文件的修改才可以改成功，否则你会发现不论你怎么改，页面都不会有变化的

在了解正确修改html的做法后，我们继续来完成数据通信的功能吧

生成的项目会在src下面的com.example.myplugintest包生成一个MainActivity，这个activity里面的内容基本就是载入页面。在这里，我们需要对原来部分进行一系列修改。在demo中，程序的启动activity是FirstActivity，然后点击按钮可以去到MainActivity，在MainActivity里载入HTML页面，通过页面的按钮点击可以去到SecondActivity。所以我们还需要在配置文件中把启动activity给更改掉。

AndroidManifest.xml

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="com.example.myplugintest" xmlns:android="http://schemas.android.com/apk/res/android">
<supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:supportsRtl="true">
<activity android:launchMode="standard" android:name="MainActivity" android:theme="@android:style/Theme.Black.NoTitleBar" android:windowSoftInputMode="adjustResize">
</activity>
<activity android:name="FirstActivity" android:launchMode="standard">
<intent-filter android:label="@string/launcher_name">
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="SecondActivity" android:launchMode="standard"/>
</application>
<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="22" />
</manifest>

在com.example.myplugintest包新建2个activity

注意，在新建的时候，如果直接右键新建android activity，建立完成后可能由于和cordova的冲突项目会报错，所以我只好新建一个类，再让那个类继承Activity(也就是以手工的方式来写)，然后再去新建布局文件什么的。

FirstActivity.java

package com.example.myplugintest;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class FirstActivity extends Activity{
TextView tvTitle;
EditText etContent;
Button btnSend;

public static FirstActivity firstActivity ;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_first);

firstActivity = this;

tvTitle = (TextView)findViewById(R.id.tvTitle);

tvTitle.setOnClickListener(new OnClickListener(){

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent intent = new Intent(FirstActivity.this,MainActivity.class);
startActivity(intent);

}
}
);

etContent = (EditText)findViewById(R.id.etContent);
btnSend = (Button)findViewById(R.id.btnSend);
btnSend.setOnClickListener(new OnClickListener(){

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
String text = etContent.getText().toString();
Intent intent = new Intent(FirstActivity.this,MainActivity.class);
intent.putExtra("data", text);
startActivity(intent);
}});

Intent intent = getIntent();
if(intent != null){
String title = intent.getStringExtra("title");
tvTitle.setText(title);
}

}

public String getMessage()
{
return this.etContent.getText().toString();

}

public void changeText(String text)
{
tvTitle.setText("i'm the first activity , my text change to :"+text);
}

}

在res/layout 文件夹下面建立其对应的布局文件 activity_first.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="i'm the first activity"/>

<EditText android:id="@+id/etContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<Button android:id="@+id/btnSend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="把文本框的值赋值给HTML页面"/>
</LinearLayout>

SecondActivity.java

package com.example.myplugintest;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class SecondActivity extends Activity{
TextView tvTitle;
EditText etContent;
Button btnSend;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);

tvTitle = (TextView)findViewById(R.id.tvTitle);

String title = getIntent().getStringExtra("title");
tvTitle.setText(title);

etContent = (EditText)findViewById(R.id.etContent);
btnSend = (Button)findViewById(R.id.btnSend);
btnSend.setOnClickListener(new OnClickListener(){

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
String text = etContent.getText().toString();
Intent intent = new Intent ();
intent.putExtra("data", text);
setResult(200,intent);
finish();
}});
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
Intent intent = new Intent ();
intent.putExtra("data", "data from second activity");
// Toast.makeText(this, "onkeydown", 0).show();
setResult(200,intent);
finish();
}

return super.onKeyDown(keyCode, event);
}

}

对应的布局文件activity_second.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="no data"/>

<EditText android:id="@+id/etContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<Button android:id="@+id/btnSend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="把文本框的值赋值给HTML页面"/>

</LinearLayout>

然后MainActiviy.java改成这样

package com.example.myplugintest;

import android.content.Intent;
import android.os.Bundle;
import org.apache.cordova.*;

public class MainActivity extends CordovaActivity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
Intent intent = getIntent();
String data = intent.getStringExtra("data");

loadUrl(launchUrl);



}
}

添加我们的插件CalendarPlugin.java到com.example.myplugintest

CalendarPlugin.java

package com.example.myplugintest;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONObject;
import org.json.JSONArray;
import org.json.JSONException;

import android.app.Activity;
import android.content.Intent;
import android.util.Log;
import android.widget.Toast;

public class CalendarPlugin extends CordovaPlugin {
public static final String ACTION_FIRST = "action first";
public static final String ACTION_SECOND = "action second";
public static final String ACTION_THIRD = "action third";
public CallbackContext callbackContext;

@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
try {
if (ACTION_SECOND.equals(action)) {
this.callbackContext = callbackContext;



JSONObject arg_object = args.getJSONObject(0);
// Intent calIntent = new Intent(Intent.ACTION_EDIT)
// .setType("vnd.android.cursor.item/event")
// .putExtra("beginTime", arg_object.getLong("startTimeMillis"))
// .putExtra("endTime", arg_object.getLong("endTimeMillis"))
// .putExtra("title", arg_object.getString("title"))
// .putExtra("description", arg_object.getString("description"))
// .putExtra("eventLocation", arg_object.getString("eventLocation"));
//
// this.cordova.getActivity().startActivity(calIntent);

String title = arg_object.getString("title");



Intent intent = new Intent(cordova.getActivity(), SecondActivity.class);
intent.putExtra("title",title);
cordova.startActivityForResult((CordovaPlugin) this,intent, 200);

return true;
}
else if(ACTION_FIRST.equals(action))
{
this.callbackContext = callbackContext;
JSONObject arg_object = args.getJSONObject(0);
String title = arg_object.getString("title");
Intent intent = new Intent(cordova.getActivity(), FirstActivity.class);
intent.putExtra("title",title);
cordova.startActivityForResult((CordovaPlugin) this,intent, 200);
return true;
}
else if(ACTION_THIRD.equals(action))
{
this.callbackContext = callbackContext;
String message = FirstActivity.firstActivity.getMessage();
callbackContext.success(message);
return true;
}

callbackContext.error("Invalid action");
return false;
} catch(Exception e) {
System.err.println("Exception: " + e.getMessage());
callbackContext.error(e.getMessage());
return false;
}
}

@Override
public void onActivityResult(int requestCode, int resultCode, Intent intent) {

super.onActivityResult(requestCode, resultCode, intent);
if(intent == null) return;
//传递返回值给js方法
String data = intent.getStringExtra("data");
callbackContext.success(data);

}

}

修改www文件夹下的index.html文件

index.html

<!DOCTYPE html>

<html>
<head>

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

<p id="showText">text</p>
<input id="ipContent" type="text">请输入内容 </input>

<input id="ipGoFirst" type="button" value="把文本框内容赋值给第一个activity" onclick="goToFirst()"></input>
<p/>
<input id="ipGoSecond" type="button" value="把文本框内容赋值给第二个activity" onclick="goToSecond()"></input>

<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>

<script type="text/javascript" >

function goToFirst()
{
var a = document.getElementById("ipContent").value;


var startDate = new Date("July 19, 2013 8:00:00");
var endDate = new Date("July 19, 2013 18:00:00");
var notes = "Arrive on time, don't want to miss out (from Android)";
var title = a;
var location = "action first";
var notes = "Arrive on time, don't want to miss out!";
var success = function(message) { alert("Success"+message); changeText(message); };
var error = function(message) { alert("Oopsie! " + message); };
calendarPlugin.createEvent(title, location, notes, startDate, endDate, success, error);

}

function goToSecond()
{
var a = document.getElementById("ipContent").value;


var startDate = new Date("July 19, 2013 8:00:00");
var endDate = new Date("July 19, 2013 18:00:00");
var notes = "Arrive on time, don't want to miss out (from Android)";
var title = a;
var location = "action second";
var notes = "Arrive on time, don't want to miss out!";
var success = function(message) { alert("Success"+message); changeText(message); };
var error = function(message) { alert("Oopsie! " + message); };
calendarPlugin.createEvent(title, location, notes, startDate, endDate, success, error);

}

function changeText(message)
{

document.getElementById("showText").innerHTML = message;
}

function goToThird()
{
var a = document.getElementById("ipContent").value;

var startDate = new Date("July 19, 2013 8:00:00");
var endDate = new Date("July 19, 2013 18:00:00");
var notes = "Arrive on time, don't want to miss out (from Android)";
var title = a;
var location = "action third";
var notes = "Arrive on time, don't want to miss out!";
var success = function(message) { alert("Success"+message); changeText(message); };
var error = function(message) { alert("Oopsie! " + message); };
calendarPlugin.createEvent(title, location, notes, startDate, endDate, success, error);

}

function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
}
else {
window.onload = function(){
oldonload();
func();
}
}
}

addLoadEvent(goToThird);
</script>


</body>
</html>

在www/js文件夹下面添加插件的js文件

calendar.js

var calendarPlugin = {
createEvent: function(title, location, notes, startDate, endDate, successCallback, errorCallback) {
cordova.exec(
successCallback, // success callback function
errorCallback, // error callback function
'CalendarPlugin', // mapped to our native Java class called "CalendarPlugin"
location, // with this action name
[{ // and this array of custom arguments to create our entry
"title": title,
"description": notes,
"eventLocation": location,
"startTimeMillis": startDate.getTime(),
"endTimeMillis": endDate.getTime()
}]
);
}
}

最后一步是在config.xml文件中把关于插件的信息添加进去

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.myplugintest" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<preference name="loglevel" value="DEBUG" />
<feature name="Whitelist">
<param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
<param name="onload" value="true" />
</feature>
<feature name="Device">
<param name="android-package" value="org.apache.cordova.device.Device" />
</feature>
<feature name="CalendarPlugin"> <param name="android-package" value="com.example.myplugintest.CalendarPlugin" /> </feature><allow-intent href="market:*" />
<name>MyPluginTest</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
</widget>

但是很奇怪的一点是，如果直接在eclipse项目中修改config.xml文件，等会再运行prepare命令，却发现config.xml文件又重置回来了

所以我是直接在windows中找到D:\eclipse\adt20140702\eclipse\myWorkspace\MyPluginTest\platforms\android\res\xml\config.xml，直接对其进行修改的。

操作顺序应该是这样的：修改www文件夹的内容 - 执行prepare命令 - 在windows中通过写字板方式修改config.xml - 在eclipse中运行

————————————————————————————————————————————————————

按照上面的操作，demo项目就完成了，在eclipse中运行可以看到效果。

0 1