欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android总结之WebView与Javascript交互(互相调用)

程序员文章站 2024-02-29 10:25:16
前言: 最近公司的app为了加快开发效率选择了一部分功能采用h5开发,从目前市面的大部分app来讲,大致分成native app、web app、hybrid app...

前言:

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

webview与javascript交互:

 webview与javascript交互是双向的数据传递,1.h5网页的js函数调用native函数 2.native函数调用js函数,具体实现以下面例子为主:

1.)mainfest.xml中加入网络权限

<uses-permission android:name="android.permission.internet"/>

2.)webview开启支持javascript

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.)代码简单解说

(1.)js(html)访问android(java)端代码是通过jsobj对象实现的,调用jsobj对象中的函数,如: window.jsobj.actionfromjs(),这里的jsobj就是native中添加接口的别名

(2.)android(java)访问js(html)端代码是通过loadurl函数实现的,访问格式如:mwebview.loadurl("javascript:actionfromnative()");

demo运行截图:
Android总结之WebView与Javascript交互(互相调用)

总结:

这里简单的实现了js与native的交互,后期会抽空看下webviewjavascriptbridge这个开源框架。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。