位置: 编程技术 - 正文

cordova JS和HTML页面的数据通信(javascriptweb)

编辑:rootadmin

推荐整理分享cordova JS和HTML页面的数据通信(javascriptweb),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:cordova webview,html javascript页面,javascript webgl,javascriptweb,javascript document,javascriptweb,javascriptweb,jswebcontrol,内容如对您有帮助,希望把文章链接给更多的朋友!

项目下载地址: 不断摸索,才找到这个通过插件的方法实现通信

在5.0版本中,不再使用jar包的形式,我们如果要建立一个项目,需要通过命令行来新建(在此之前要先把环境配置好,详情请参见 create MyPluginTest com.example.myplugintest MyPluginTest

cd MyPluginTest

我在这里添加了几个插件

下面是添加平台

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=" <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="" android:targetSdkVersion="" /></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 ;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_first);firstActivity = this;tvTitle = (TextView)findViewById(R.id.tvTitle);tvTitle.setOnClickListener(new OnClickListener(){ @Overridepublic void onClick(View arg0) {// TODO Auto-generated method stubIntent 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(){@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stubString 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=" 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>

cordova JS和HTML页面的数据通信(javascriptweb)

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;@Overrideprotected 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(){@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stubString text = etContent.getText().toString();Intent intent = new Intent ();intent.putExtra("data", text);setResult(,intent);finish();}});}@Overridepublic 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(,intent);finish();}return super.onKeyDown(keyCode, event);}}

对应的布局文件activity_second.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns: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, ); 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, ); 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; } } @Overridepublic 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><!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.--><html> <head> <!-- Customize this policy to fit your own app's needs. For more guidance, see: Some notes: * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication * is required only on Android and is needed for TalkBack to function properly * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: * Enable inline JS: add 'unsafe-inline' to default-src --> <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 , 8::"); var endDate = new Date("July , ::"); 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 , 8::"); var endDate = new Date("July , ::"); 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 , 8::"); var endDate = new Date("July , ::"); 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=" xmlns:cdv=" <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=" Apache Cordova Team </author> <content src="index.html" /> <access origin="*" /> <allow-intent href=" /> <allow-intent href=" /> <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:eclipseadteclipsemyWorkspaceMyPluginTestplatformsandroidresxmlconfig.xml,直接对其进行修改的。

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

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

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

android icon和启动页大小与尺寸 1.本人根据经验记录下来的,属于保存,不好之处勿喷icon四个尺寸*(2k),*(3k),*(4k),*(5..5k)png启动页类网页启动页,尺寸一个

Sub-process /usr/bin/dpkg returned an error code (1)错误解决办法 这几天用ubuntu.,在用apt-get安装软件时出现了类于:install-info:Nodirfilespecified;try--helpformoreinformation.dpkg:处理gettext(--configure)时出错:子进程post-install

Android--全局获取Context的技巧 Android中很多地方都会用到Context,弹出Toast的时候需要、启动活动时需要、发送广播的时候也需要、操作数据库的时候需要、使用通知的时候也需要等等

标签: javascriptweb

本文链接地址:https://www.jiuchutong.com/biancheng/378191.html 转载请保留说明!

上一篇:listview中嵌套子listview,解决子listview点击问题(list嵌套list采用什么结构)

下一篇:android icon和启动页大小与尺寸(安卓手机如何打开.icon文件)

  • 个税待报解预算收入怎么使用
  • 结转本年利润要扣除企业所得税吗
  • 工程施工的间接费用怎么结转
  • 差额发票和全额发票一样吗
  • 银行转账记录能保存多久
  • 买入空调会计分录
  • 电子发票作废了还能恢复吗
  • 税收专用缴款书
  • 非正常户发票管理
  • 总分机构如何纳税
  • 不随物品一起销售的包装物怎么做账?
  • 费用怎么暂估
  • 医院收到卫生局补助会计分录怎么写
  • 结转报告中错误结转科目是什么意思
  • 劳务税能不能抵扣
  • 税控盘清盘怎么做
  • 跨年租金收入会计分录
  • 现金流量表中现金流量净额怎么算
  • 给客户的回扣做账时怎么写情况说明
  • 什么人适用131419手机号码
  • 种植业土地租赁计入哪个科目
  • 小型微利企业所得税率
  • 鸿蒙系统怎么快速充电
  • win10无法以管理员身份运行的原因及解决方法
  • 公司撤股需走什么程序
  • autotun.inf
  • pc程序是什么
  • 收到退回的增值税专用发票账务处理
  • 模式识别与图像处理能做什么
  • merge命令合并不了数据
  • 发票金额和打款金额不一致怎么办
  • 手工凭证三级明细
  • python二叉树遍历算法
  • 一般户需要做账报税吗
  • 法人股东分红要缴纳多少税
  • 工资和五险一金在公司发,个税在子公司扣
  • 租房押金会计分录是什么
  • 租房合同违约金200%合理吗
  • c#获取局域网ip
  • sql无法运行
  • 以前年度损益调整怎么结转
  • 小额贷款在银行需要什么条件
  • 预付款已经开了发票未到货要怎么做账
  • 建筑企业收挂靠公司的管理费如何做账?
  • 小规模纳税人所得税怎么计算
  • 计提附加税金额
  • 收到预付卡结算款怎么入账
  • 业务员垫付保费
  • 哪里还有备用金可以借
  • 安全生产责任险是强制险吗
  • 企业注销其他应付款怎么处理账务
  • 往来是啥意思
  • 影响固定资产折旧的基本因素不包括
  • 销售佣金 会计科目
  • sqlserver连接异常
  • mysql密码忘记怎么办
  • u盘安装vista
  • WIN10系统更新之后无法启动
  • xp.系统
  • mac屏幕共享软件
  • win7cpu虚拟化怎么看
  • 在操作系统中如何创建一个新的用户
  • CentOS中-bash: lsb_release: command not found错误的解决方法
  • linux的newgrp
  • spiral框架
  • unity3d物体移动代码
  • Vuforia 4.0 beta——Object Recognition (三)
  • activity之间的数据回传
  • radio js取值
  • ssh远程执行命令返回结果存成本地变量
  • androidui框架
  • python怎么爬
  • 基于javascript的毕业设计选题
  • jquery console.log
  • android documents
  • 国家税务12366电子税务局重庆
  • 财税专家刘杨简历图片介绍
  • 已经开具的专用发票
  • 烟叶的增值税税率9
  • 重庆税务局app下载官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设