Android 和js进行简单交互处理_android与js交互 demo-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35115643/article/details/79291036

本文介绍了一种在不使用插件的情况下实现Android与JavaScript交互的方法。通过创建公共类并使用WebView加载前端页面，实现了Android调用JavaScript及JavaScript调用Android功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android 和js进行简单交互处理

首先本文下载demo地址 git地址为 https://github.com/zhiyongshuangquan/androidjs

csdn 下载地址http://download.youkuaiyun.com/download/qq_35115643/10246061

现在由于前端技术的发展和便捷，Android 原生的稳定，所以有些功能混合开发是个不错的选择，开发效率较快，有些特效前端实现比较便捷，样式炫酷。既然进行了混合开发，那么就避免不了进行Android 原生和js进行交互处理，那么如何进行交互呢？本文主要讲述的是不使用插件下，直接进行交互处理。

一：Android 加载前端界面

1：如果是本地加载，则需要放在assets目录下

然后进行webview加载，

mWebView.loadUrl("file:///android_asset/js.html");

2：如果是url，则直接进行加载就可以了

mWebView.loadUrl("https://www.baidu.com/");

记得配置网络权限喔

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

二：进行交互处理

进行配置交互处理

    class WebAPPInterface {

        public Context mContext;

        public WebAPPInterface(MainActivity context) {
            this.mContext = context;
        }

        //js调用as
        @JavascriptInterface  //加上这一句话，不然的话在高版本的时候有可能报错
        public void sayHello(String name) {
            Toast.makeText(mContext, "name= " + name, Toast.LENGTH_SHORT).show();
        }

        //as调用js
        public void showName(final String name) {
            Log.e("数据", name);
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    mWebView.loadUrl("javascript:showName('" + name + "')");
                }
            });
        }
    }

提供公共类，提供公开方法，便于前端进行调用处理，sayHello是为了js进行调用处理，showName是Android 调用 js代码，

进行webview配置处理

private WebAPPInterface mInterface;

 //打开本包内assets目录下的index.html文件
        mWebView.loadUrl("file:///android_asset/js.html");
        //1、设置允许执行的JS脚本
        mWebView.getSettings().setJavaScriptEnabled(true);
        mInterface = new WebAPPInterface(MainActivity.this);
        //2、添加通信接口
        mWebView.addJavascriptInterface(mInterface, "app");
        mButton = (Button) findViewById(R.id.button);
        mButton.setOnClickListener(this);
        mInterface.showName("超超");

app是作为js和Android 进行互相调用的一个媒介，也就是js调用时需要运用这个媒介进行调用处理，

app.sayHello(); 在js中进行调用处理，这个媒介是必须要设置处理的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML5 测试</title>

    <style type="text/css">
    .input{
        width:98%;
        height:38px;
    }
    .button{
        width:60%;
    height:20px;
    background:#fffeff;
    }



    </style>
    <script type="text/javascript">
       //js调用as
    function say(){
        var name = document.getElementById("textName").value;
        app.sayHello();
    }

    //as调用js
    function showName(name){
        alert(name)
        document.getElementById("textName").value = name;
        document.getElementById("buttontwo").innerHTML = name;
    }


    </script>
</head>
<body>
<input id="textName" class="input">
<br/>
<hr>
<button class="button" onclick="say()">say hello</button>
<button id="buttontwo">say hello</button>
</body>
</html>

这样就可以互相调用了，是不是很随意很简单，是的，那还等什么呢，去撸吧