Android与JS代码交互

最新推荐文章于 2023-05-18 18:59:57 发布

转音视频的老王

最新推荐文章于 2023-05-18 18:59:57 发布

阅读量268

点赞数

分类专栏： Android 文章标签： android javascript html webview

本文链接：https://blog.csdn.net/naiwenw/article/details/78713750

版权

Android 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Android与JS代码交互

现如今，很多Android APP都要与JS进行交互，而WebView就是Android与JS交互的桥梁，日常中最常见Android和JS交互有：APP注册协议，APP里的文章，APP里的活动页，这都是嵌套的H5页面。

Android与JS交互有以下逻辑步骤：

创建WebView
创建Html文件
创建JS文件
WebView调用JS代码
JS代码中调用Android代码

1. 创建WebView
创建一个布局文件，布局文件中包含着一个WebView控件：在activity中获得这个这个WebView控件的实例

mWebView = findViewById(getResources().getIdentifier("web_view", "id", getPackageName()));

2. 创建Html文件
在main文件夹下创建assets文件夹，在其中再创建一个js文件夹, js文件夹就是放js代码，html文件可以直接放在assets文件夹下
创建一个test.html的文件，添加如下代码：

<html>
    <script src="js/jquery-2.2.4.min.js"></script>

    <script type="text/javascript">
            var userAgent = navigator.userAgent || navigator.vendor || window.opera;
            console.log(userAgent)
            if(userAgent.match(/Android/i)) {
                $.getScript("js/android.js")
            }
    </script>
    Java-Javascript Interaction In Android
</html>

上面的html中做了两件事情：
第一件事情就是：添加了一个jquery的插件，下载好：jquery-2.2.4.min.js放在assets/js目录下
第二件事情就是：判断当前用户所处的运行环境是不是Android下，如果是Android下，去加载js目录下的android.js文件

3. 创建JS文件
接下来我们就是创建android.js文件，代码如下

$(function(){
    document.body.style.webkitTouchCallout='none';
    document_loaded();
});
function document_loaded() {
    console.log("document loaded");
    window.JsObject.documentLoaded();
}

function sayHello() {
    alert("Hello")
 }

function sumToJava(number1, number2){
    window.JsObject.onSumResult(number1 + number2)
 }

在android.js文件中，我们定义了两个方法：
一个是sayHello方法，这个方法中，是在h5页面中弹出一个对话框，并且系那是syaHello
一个是sumToJava方法，在这里进行number1+number2运算，并且通过：
window.JsObject.onSumResult(number1 + number2)调用Java代码，这里很关键，后面会着重描述，

4. WebView调用JS代码
在activity中调用loadwebView函数，在函数里面，首先是让webView支持js, 再通过字符流的方式将html文件读出来，利用loadDataWithBaseURL将其加载出来。
最后调用了testMethod函数中的webView.loadUrl（）函数

@SuppressLint("JavascriptInterface")
    private void loadWebView(){
        mWebView.getSettings().setJavaScriptEnabled(true);
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){
            mWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);
        }
        StringBuilder content = new StringBuilder();
        InputStream stream;
        try {
            stream = this.getAssets().open("test.html");
            BufferedReader reader = new BufferedReader(new InputStreamReader(stream));
            String line;
            while((line = reader.readLine()) != null)
            {
                content.append(line);
                content.append('\n');
            }
            reader.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        String html = content.toString();
        mWebView.addJavascriptInterface(new JsObject(), "JsObject");
        mWebView.loadDataWithBaseURL("file:///android_asset/",html,"text/html","utf-8",null);
        mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                testMethod(mWebView);
            }
        });
    }

    private void testMethod(WebView webView){
        String call = "javascript:sayHello()";
        //call = "javascript:sumToJava(1,2)";
        webView.loadUrl(call);

    }

Android调用JS的关键就是通过这两行代码实现的，就是调用了js代码中的sayHello函数

String call = "javascript:sayHello()";
webView.loadUrl(call);

这样子就是实现了Java代码与Js代码交互的逻辑，运行就会出现一个弹框，上面写着：Hello

如果是调用js代码中的sumToJava（）函数，就直接把下面这行注释给干掉：

call = "javascript:sumToJava(1,2)";

5. JS代码调用Android代码

创建一个Java类

public class JsObject {
    private final static String TAG = "TAG_JsObject";

    @JavascriptInterface
    public void onSumResult(int result){
        Log.d(TAG, "result = " + result);
    }
}

上面在类中添加了一个onSumResult的函数，添加了JavascriptInterface注解, 这个onSumResult（）函数就是为js代码提供调用Java代码的接口，那它是怎么使用呢？

就是上面js文件中的sumToJava（）函数：

function sumToJava(number1, number2){
    window.JsObject.onSumResult(number1 + number2)
 }

这里的window后面的JsObject，是怎么来的呢，查看webView的配置，看到：

mWebView.addJavascriptInterface(new JsObject(), "JsObject");

对，就是后面的第二个字符串参数，这里是：JsObject，则调用就是：

window.JsObject.onSumResult(number1 + number2)

如果是：JsObject2，调用就是：

window.JsObject2.onSumResult(number1 + number2)

好了，本文就到这里。

转音视频的老王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android与JS代码交互

Android与JS代码交互现如今，很多Android APP都要与JS进行交互，而WebView就是Android与JS交互的桥梁，日常中最常见Android和JS交互有：APP注册协议，APP里的文章，APP里的活动页，这都是嵌套的H5页面。Android与JS交互有以下逻辑步骤：创建WebView创建Html文件创建JS文件WebView调用JS代码JS代码中调用And
复制链接

扫一扫