Android与JS交互功能总结整理附（个人源码Github连接）

最新推荐文章于 2024-07-24 11:23:56 发布

FrancisXuWhale

最新推荐文章于 2024-07-24 11:23:56 发布

阅读量322

点赞数

文章标签： javascript android

本文链接：https://blog.csdn.net/lslanding/article/details/105729181

版权

写在前面

因为公司需求需要Android与JS交互做一个Android应用，于是我就被赶鸭子上架了。还好这一方面还挺简单，不算难理解。在此我就简介一下这方面的逻辑，用法，以及我的代码实例。

逻辑

用法

从JS控制Android控件

首先我们要布局在中添加webview控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="200dp"/>
    <TextView
        android:id="@+id/tv_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/colorAccent"
        android:textSize="20sp"
        android:layout_marginTop="20dp"
        tools:text="123456"/>

</LinearLayout>

然后在对应的Java文件中初始化WebView相应的权限。注意权限很重要！一些权限默认是关闭的，需要手动开启，对于webview权限不了解的可以去百度一下，百度上很全的。

private WebView mWebView;
private TextView mTextView;
private Handler mHandler;

 private void inti() {
        mHandler=new Handler();
        mWebView=findViewById(R.id.webview);
        mTextView=findViewById(R.id.tv_result);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);//允许WEBVIEW加载JS代码
        mWebView.addJavascriptInterface(new JsInterface(this),"Launcher");//给webView添加JS接口
        mWebView.loadUrl("file:///android_asset/index.html");
        mWebView.getSettings().setUserAgentString(mWebView.getSettings().getUserAgentString());
        mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        mWebView.getSettings().setAllowFileAccess(true);
        mWebView.getSettings().setAppCacheEnabled(true);
        mWebView.getSettings().setDomStorageEnabled(true);
        mWebView.getSettings().setDatabaseEnabled(true);
    }

mWebView.addJavascriptInterface(new JsInterface(this),"Launcher");//给webView添加JS接口

如上，我们使用了一个JavascriptInterface，现在我们需要定义这个JavascriptInterface

import android.content.Context;
import android.util.Log;
import android.webkit.JavascriptInterface;

public class JsInterface {
    private Context context;
    private JsBridge jsBridge;

    public JsInterface(JsBridge jsBridge) {
        this.jsBridge = jsBridge;
    }
    @JavascriptInterface
    public void setValue(String value){
        Log.e("JsInterface","value="+value);
        jsBridge.setTextViewValue(value);
    }
}

定义接口


public interface JsBridge {
    void setTextViewValue(String value);
}

然后我们写个html，css，javascript文件，并将在main目录下建一个assets文件夹，将这三个文件放在这三个目录下，如果你是要用网站上的html，css，javascript文件仅需要在

mWebView.loadUrl("输入你要打开的文件");

html文件如下：


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<h2>WebView</h2>
<div><span>请输入要传递的值：</span><input type="text" id="input"></div>
<div id="btn"><button class="btn">点我</button></div>
<script src="js/index.js"></script>
</body>
</html>

css文件如下：

body {
    background: #2070B4;
}

.btn {
    line-height: 40px;
    margin: 10px;
    background: #0ED6D2;
}

JS文件如下：

var btnEle=document.getElementById("btn");
       var inputEle=document.getElementById("input");
      btnEle.addEventListener("click",function(){
         var str=inputEle.value;
         if(window.Launcher){
            Launcher.setValue(str);
         }else{
            alert("Launcher not found!")
         }
   });

最后是修改textview控件的代码

 @Override
    public void setTextViewValue(final String value) {
        mHandler.post(new Runnable() {
            @Override
            public void run() {
             mTextView.setText(value);
            }
        });
    }

主要这里是要修改控件，所以需要将他放在主线程中；相反如果不需要修改控件就没必要放在线程中。

从Android控制JS

从Android控制JS很简单只需去在js里写好要调用的方添加

webView.loadUrl("javascript:方法名;");

即可

例如JS中已经添加了一个名为AppCacheClearCallback();的方法，下面我们在Android里添加如下语句即可调用

 webView.loadUrl("javascript:AppCacheClearCallback();");

代码实例

Github：https://github.com/Landingt/MyWebView.git