Android总结之WebView与Javascript交互（互相调用）_app

概述前言：最近公司的App为了加快开发效率选择了一部分功能采用H5开发，从目前市面的大部分App来讲，大致分成NativeApp、WebApp、HybridApp三种方式，个人觉得目前以HybridApp居多，单纯的数据展示我们直接采用WebView

前言：@H_301_3@

最近公司的App为了加快开发效率选择了一部分功能采用H5开发，从目前市面的大部分App来讲，大致分成Native App、Web App、HybrID App三种方式，个人觉得目前以HybrID App居多，单纯的数据展示我们直接采用WebVIEw来渲染就可以了，但是有时候可能会用到两者之间传递参数的情况，今天就来总结一下两者之间如何互相调用。本篇主要介绍WebVIEw与JavaScript交互数据，关于如何将H5网页呈现在WebVIEw上可以参考这篇博客文章：Android总结之WebView使用总结。

WebVIEw与JavaScript交互：@H_301_3@

WebVIEw与JavaScript交互是双向的数据传递，1.H5网页的Js函数调用Native函数 2.Native函数调用Js函数，具体实现以下面例子为主：

1.）mainfest.xml中加入网络权限@H_301_3@

<uses-permission androID:name="androID.permission.INTERNET"/>

2.）WebVIEw开启支持JavaScript@H_301_3@

mWebVIEw.getSettings().setJavaScriptEnabled(true);

3.）简单的H5网页实现，主要实现actionFromNative()、actionFromNativeWithParam(String str)，放在assets文件下

<HTML><head> <Meta http-equiv="Content-Type" content="text/HTML;charset=utf-8"> <script type="text/JavaScript"> function actionFromNative(){   document.getElementByID("log_msg").INNERHTML +=    "<br\>Native调用了Js函数"; } function actionFromNativeWithParam(arg){   document.getElementByID("log_msg").INNERHTML +=    ("<br\>Native调用了Js函数并传递参数："+arg); } </script></head><body><p>WebVIEw与JavaScript交互</p><div> <button onClick="window.wx.actionFromJs()">点击调用Native代码</button></div><br/><div> <button onClick="window.wx.actionFromJsWithParam('come from Js')">点击调用Native代码并传递参数</button></div><br/><div ID="log_msg">调用打印信息</div></body></HTML>

4.）Native实现与Js交互函数：actionFromJs()、actionFromJsWithparam()

public class MainActivity extends Activity { private WebVIEw mWebVIEw; private TextVIEw logTextVIEw; @OverrIDe public voID onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentVIEw(R.layout.main);  mWebVIEw = (WebVIEw) findVIEwByID(R.ID.webvIEw);  // 启用JavaScript  mWebVIEw.getSettings().setJavaScriptEnabled(true);  // 从assets目录下面的加载HTML  mWebVIEw.loadUrl("file:///androID_asset/wx.HTML");  mWebVIEw.addJavaScriptInterface(this,"wx");  logTextVIEw = (TextVIEw) findVIEwByID(R.ID.text);  button button = (button) findVIEwByID(R.ID.button);  button.setonClickListener(new button.OnClickListener() {   public voID onClick(VIEw v) {    // 无参数调用    mWebVIEw.loadUrl("JavaScript:actionFromNative()");    // 传递参数调用    mWebVIEw.loadUrl("JavaScript:actionFromNativeWithParam(" + "'come from Native'" + ")");   }  }); } @androID.webkit.JavaScriptInterface public voID actionFromJs() {  runOnUiThread(new Runnable() {   @OverrIDe   public voID run() {    Toast.makeText(MainActivity.this,"Js调用了Native函数",Toast.LENGTH_SHORT).show();    String text = logTextVIEw.getText() + "\njs调用了Native函数";    logTextVIEw.setText(text);   }  }); } @androID.webkit.JavaScriptInterface public voID actionFromJsWithParam(final String str) {  runOnUiThread(new Runnable() {   @OverrIDe   public voID run() {    Toast.makeText(MainActivity.this,"Js调用了Native函数传递参数：" + str,Toast.LENGTH_SHORT).show();    String text = logTextVIEw.getText() + "\njs调用了Native函数传递参数：" + str;    logTextVIEw.setText(text);   }  }); }}

mWebVIEw.addJavaScriptInterface(this,"wx");相当于添加一个Js回调接口，然后给这个起一个别名，我这里起的名字wx（微信哈哈）。@androID.webkit.JavaScriptInterface为了解决addJavaScriptInterface漏洞的，在4.2以后才有的。

5.）布局文件实现

<?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"> <WebVIEw  androID:ID="@+ID/webvIEw"  androID:layout_wIDth="match_parent"  androID:layout_height="0dp"  androID:layout_weight="1"/> <TextVIEw androID:ID="@+ID/text"  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  androID:text=""/> <button  androID:ID="@+ID/button"  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  androID:text="Native调用Js函数"/></linearLayout>

6.）代码简单解说@H_301_3@

（1.）Js（HTML）访问AndroID（Java）端代码是通过JsObj对象实现的，调用JsObj对象中的函数，如： window.JsObj.actionFromJs()，这里的JsObj就是Native中添加接口的别名

（2.）AndroID（Java）访问Js（HTML）端代码是通过loadUrl函数实现的，访问格式如：mWebVIEw.loadUrl("JavaScript:actionFromNative()");

demo运行截图：@H_301_3@

@H_301_3@

总结：@H_301_3@

这里简单的实现了Js与Native的交互，后期会抽空看下WebVIEwJavaScriptBrIDge这个开源框架。@H_301_3@

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android总结之WebView与Javascript交互（互相调用）全部内容，希望文章能够帮你解决Android总结之WebView与Javascript交互（互相调用）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出