我们的态度是：每天进步一点点，理想终会被实现。

前言

Android webview和JS的交互已经是老生常谈了，坑很多、问题也很多。即使再多的坑，我们很多情况下还是要使用，毕竟直接嵌入HTML可以节省开发成本、节约开发时间，以及之前很火的Android和H5混合开发。因此，今天我写了一篇Android WebView和JS交互的详细教程，以及我们的WebView我们真是项目中都有哪些坑，或者说哪些问题BUG。

WebView和JS交互

1.android webview 调用Java方法

WebView调用Java方法主要分为三个步骤：

允许WebView加载JS代码
编写JS的接口类，供JS调用
给WebView添加JS接口
- MainActivity代码：
  `

public class MainActivity extends AppCompatActivity implements IJsBridge {   private WebView mWebView;   private TextView textView;   @Override   protected void onCreate(Bundle savedInstanceState) {       super.onCreate(savedInstanceState);       setContentView(R.layout.activity_main);       mWebView = findViewById(R.id.webview);       textView = findViewById(R.id.result);       initView();   }   @SuppressLint("SetJavaScriptEnabled")   private void initView() {       //1.允许WebView加载JS代码       mWebView.getSettings().setJavaScriptEnabled(true);       //2.编写JS接口       JStoJava jStoJava = new JStoJava(this);       //3.WebView添加JS接口  传递JsToJava的对象jsToJava       mWebView.addJavascriptInterface(jStoJava, "jsToJava");       mWebView.loadUrl("file:///android_asset/index.html");   }   /**    * 这个方法在子线程    *    * @param values    */   @Override   public void setTextView(final String values) {       runOnUiThread(new Runnable() {           @Override           public void run() {               //切换到主线程执行               textView.setText(values);           }       });   }}

编写JS的接口类，供JS调用

public class JStoJava {   private static final String TAG = "JStoJava";   private IJsBridge jsBridge;   /**    * 构造方法传入IJsBridge    * @param jsBridge    */   public JStoJava(IJsBridge jsBridge) {       this.jsBridge = jsBridge;   }   /**    * 该方法不在主线程执行    *    * @param str    */   @JavascriptInterface   public void setValues(String str) {       if (jsBridge != null) {           jsBridge.setTextView(str);       }   }}

html代码：

<html lang="en"><head>   <meta charset="UTF-8">   <title>WebViewtitle>   <style>       body{           background: #814aff;       }       .button{           line-height: 50px;           margin: 10px;           background: #f537bd;       }   style>head><body><h2>WebViewh2><div><span>请输入要传递的值：span><input type="text" id="input">div><div id="button"><span class="button">传递span>div><script type="text/javascript">   var btn=document.getElementById("button")   var value=document.getElementById("input")   btn.addEventListener("click",function () {       var str=value.value;       if (window.jsToJava){            jsToJava.setValues(str)       }else {           alert("jsToJava not found")       }   })script>body>html>

运行结果：

这样我们就搭建了一个简单的demo，实现了WebView调用Java方法。

2.Android 调用JS的方法

Android 调用JS的方法很简单，JS调用Java方法只有一个步骤：

webView.loadUrl(javascript:jsString);

对就是这么简单，就这一个方法；jsString就是js代码的字符串。

在我们之前的MainActivity中添加两个控件：EditText和Button

Button设置点击事件：

//javaToJS       btnToJS.setOnClickListener(new View.OnClickListener() {           @Override           public void onClick(View v) {               String string = etToJS.getText().toString();               //window.toJs是我们HTML中的方法               mWebView.loadUrl("javascript:if(window.toJs){window.toJs('"+string+"')}");           }       });

JS中也添加一个方法：

<html lang="en"><head>   <meta charset="UTF-8">   <title>WebViewtitle>   <style>       body{           background: #814aff;       }       .button{           line-height: 50px;           margin: 10px;           background: #f537bd;       }   style>head><body><h2>WebViewh2><div><span>请输入要传递的值：span><input type="text" id="input">div><div id="button"><span class="button">传递span>div><script type="text/javascript">   var btn=document.getElementById("button")   var value=document.getElementById("input")   btn.addEventListener("click",function () {       var str=value.value;       if (window.jsBridge){            jsBridge.setValues(str)       }else {           alert("jsBridge not found")       }   })   var toJs=function (str) {       value.value=str;   }script>body>html>

这里我们window.toJs是我们HTML中的方法，传入了我们的EditText中的字符串，然后显示到我们的HTML上面。

最后我们将WebView调用Java方法和Java调用JS方法的运行结果如下：

☛总结

以上就是我们的详细的Android WebView和JS的交互的详细教程了，这里不是给你讲详细的在项目中的使用，而是教给大家原理，实际的项目中怎么使用，那就要视具体的项目而定，我想很多WebView混合开发的老铁就知道，WebView其实有很多的坑的，下面我就说几个常见的坑。

3、WebView常见的坑

API 16以前没有限制addJavascriptInterface的方法，我们可以通过反射的方法执行Java对象的方法，别有用心之人，就可以利用这个安全性问题来给你的APP植入广告等等。
我们经常WebView是动态添加到布局容器中addView（webView）的方式，在销毁webview时要先remove掉webview，再销毁。因为不及时的销毁很有可能导致内存泄漏的问题
经常我们加载网页的时候要判断网页是否加载完成，通常使用的是webViewClient.onPageFinished方法，但是我们实际中最好是使用webChromClient.onProgressChanged来判断，更加的精准。
webView在使用完之后要及时的销毁，不然会后台耗电
webView使用硬件加速，确实会使得的webview更加的流畅，但是有可能会导致界面闪烁、页面白块等，因此不开硬件加速是最快的解决方法。
webView会导致内存泄漏解决办法：
1.webView在一个独立的进程中运行，简单暴力，但是这种情况会有进程通信的问题。
2.尽量动态添加WebView ，对传入WebView中的context中使用弱引用。

☛总结

以上就是今天总结的WebView的相关的坑，如有不足之处欢迎指出。

温馨提示：
我创建了一个技术交流群，群里有各个行业的大佬都有，大家可以在群里畅聊技术方面内容，以及文章推荐；如果有想加入的伙伴加我微信号【luotaosc】备注一下“加群”
另外关注公众号，还有一些个人收藏的视频：
回复“学习资源” ，获取学习视频。

文章不易，如果觉得写得好，扫码关注一下点个赞，是我最大的动力。

关注我，一定会有意想不到的东西等你：

Android(安卓)WebView和JS交互详细教程

前言

WebView和JS交互

1.android webview 调用Java方法

2.Android 调用JS的方法

3、WebView常见的坑

更多相关文章

随机推荐