安卓中实现网络视图和Java脚本语言的互相调用详解

前言

很多复杂的用户界面界面，在机器人中需要配合大量可扩展标记语言代码和爪哇岛代码实现，而使用HTML5可以非常轻松的实现出来，而且具有很好的跨平台特性，让我们不必为了多个平台而重写代码，H5学习成本也较低，上手快。虽然从目前来说H5在机器人系统中的速度可能还欠佳一些，但相信随着手机的性能不断的提高，这些问题都会被解决

使用H5开发机器人的用户界面界面，最重要的就是如何实现射流研究…代码和爪哇代码之间的互相调用了

在讲解之前，让我们先把项目跑起来

效果图：

准备好index.html文件，将它放入机器人工程下的资产文件夹中：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML头元http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 ' title jstest/title script src=' http : app。js '/script/head dytable边框=' 1 '宽度=' 100% ' id=' table '单元格间距=' 0 ' tr TD宽度=' 50% ' align=' center '姓名TD TD TD宽度='50% '对齐='中心'电话/TD/tr/tablehrinput id=' jsinput '按钮onclick=' getMessage()' js传值给吐司/按钮/正文/htmlJavaScript的代码我单独写在一个射流研究…文件中了，把app.js文件也放入资产文件夹中：

函数getMessage(){ var message=document。getelementbyid(' jsinput ')；联系。showToast(消息。值)；}函数addPerson(persons){ var persona objs=eval(persons)；var表=文档。getelementbyid(' table ')；for(var I=0；I person objs . lengthi){ var tr=table。插入行(表格。行。长度)；var td1=tr。insert cell(0)；td1.align=' centervar td2=tr。insert cell(1)；TD 2 . align=' center TD 1 . innerHTMl=Personobjs[I].姓名；td2.innerHTML=personObjs[i].电话；}}最后就是爪哇代码

公共类主要活动扩展了app compatibility { private WebView MWebView；私有按钮mJsMethodBtn私有JsObject jsobj @ Override protected void onCreate(Bundle savedInstanceState){ super。onCreate(savedInstanceState)；setContentView(r . layout。activity _ main)；mJsMethodBtn=(Button)findwiewbyid(r . id。BTN _ js _ method)；mWebView=(WebView)findweiwbyid(r . id。web _ view)；mwebview。LoadURl('文件：///Android _ asset/index。html ')；WebSettings设置=mwebview。getsettings()；设置。SetJavaScript已启用(true)；设置。setdefaulttextencodingname(' utf-8 ')；jsobj=new JsObject()；mwebview。addjavascriptinterface(jsobj，' contact ')；mjsmethodbtn。setonclicklistener(新视图OnClickListener(){ @覆盖公共void onClick(视图v) { //添加一个联系人jsobj。addperson()；} });}私有类JsObject { //此方法被射流研究…调用@ Javascriptinterface public void showToast(字符串消息){吐司。制作文本(主要活动。这个，留言，祝酒词.长度_短).show()；} //在网页面增加一个联系人public void addPerson(){ String JSON='[{ \ ' name ' : ' zwt \ '，\ ' phone ' : ' 1594999999999 \ ' } ' } ']'；mwebview。加载URl(' JavaScript : addperson(' JSON ' ')')))；} } }还有布局代码：

？可扩展标记语言版本='1.0 '编码='utf-8 '？line layout xmlns : Android=' http://模式。安卓。com/apk/RES/AnDroid ' AnDroid : layout _ width=' match _ parent ' AnDroid : layout _ height=' match _ parent ' AnDroid : background=' # EED5B 7 ' AnDroid : orientation=' vertical ' WebView AnDroid : id=' @ id/web _ view ' AnDroid 3: layout _ width=' match '调用射流研究…方法//线性布局一、JavaScript调用机器人中的方法

这里实现的场景是点击网页面中的按钮，把投入中输入的数据传递给机器人系统，并通过烤显示出来

对应的射流研究…代码：

函数getMessage(){ var message=document。getelementbyid(' jsinput ')；联系。showToast(消息。值)；}对应的爪哇岛代码：

//此方法由js @ javascriptinterface public void show toast(字符串消息){ toast . make text(main activity . this，message，toast.length _ short)调用。show()；}这个“contact”实际上是指我们在java代码中定义的JsObject类

它们受以下方法的约束：

mwebview . addjavascriptinterface(jsobj，' contact ')；第一个参数传递给java对象，第二个参数指定在相应的js中调用类时要使用的自定义别名。这个方法的功能是将一个Java对象与JavaScript相关联

这里有一个需要注意的问题。在SDK17及以上版本中，出于安全考虑，google只允许js使用@javascriptInterface注释调用Java方法，因此我们需要在js调用的Java方法中添加@JavascriptInterface注释

第二，安卓在JavaScript中调用方法

在Android中点击Button控件后，用户向JavaScript方法发送一个json数据，js解析json数据并添加一个新的联系人显示在网页上

对应的js代码：

函数addPerson(persons){ var persona objs=eval(persons)；var table=document . getelementbyid(' table ')；for(var I=0；i personObjs.lengthI){ var tr=table . insert row(table . rows . length)；var td1=tr . insertcell(0)；td1.align=' centervar td2=tr . insertcell(1)；td2.align=' centertd1.innerHTML=personObjs[i]。姓名；td2.innerHTML=personObjs[i]。电话；}}对应的java代码：

//添加联系人公共void add person(){ string JSON='[{ \ ' name ' : ' zwt \ '，\ ' phone ' : ' 15949999999 \ ' }]到网页；mwebview . load URl(' JAVAScript : addperson(' JSON ' ')'))；}如果要在JavaScript中调用方法，只需使用以下方法的标准格式即可：

mwebview . LoadURl(' JavaScript : xxmethod()')；“xxxMethod()”是指JavaScript中的某个方法。如果需要调用其他方法，只需用js中对应的方法替换xxxMethod()即可。

三、常见问题

1.1之间的互调。安卓和js不成功

将WebView的setjavaScriptEnabled方法设置为true，这样它就允许在高于17的API版本上执行js代码。在js调用的Java方法前添加@javascriptInterface，检查js中的别名是否写错。调用Java方法时，类的别名必须是mwebview。addjavascriptinterface (jsobj，“contact”)。其中定义的别名2。无法播放网页的提醒

您需要在WebChromeClient中重写onJsAlert()方法

mwebview . setwebchromeclient(new WebChromeClient(){ @ Override public boolean onJsAlert(WebView视图，String url，String消息，JsResult结果){ return super.onJsAlert(view，url，message，result)；}});如果需要用安卓的AlertDialog替换网页的提醒弹出框，可以在onJsAlert()方法中重写，设置return为true

3.Js调用java方法修改UI界面失败

只需理解这一点：js调用的java方法实际上是在另一个子线程WebViewCoreThread中运行的，为了测试它：将以下语句分别放在Activity的onCreate()方法和js调用的java方法中

Log.e(TAG，' running thread name-' thread . currentthread()。getname())；onCreate执行时运行的日志：

运行线程名称-main

JsObject类中的方法运行时的日志：

运行线程名称-WebViewCoreThread

显然，子线程是不允许修改主线程的UI的，所以不允许通过js调用java代码直接修改UI界面。如果需要修改，可以通过Handler机制解决

4.如何让手机回车键跳转到上一个网页

如果手机系统的回车键没有被处理，那么按回车键将直接关闭当前活动，而不是返回到上一个网页来解决这个问题。我们可以重写活动中的onBackPressed()方法：

@ override public void onback press(){ super . onback press()；if(mwebview . cangoback()){ mwebview . goback()；} else { finish()；}}摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。