zoukankan      html  css  js  c++  java
  • Android webview和js交互

    刚登进来的时候看到博客园的首页好像改了,比之前好看很多了,也希望博客园可以越做越好!加油啊!

    最近又对webview进行了一遍扫盲,对于webview和js交互这块理解比之前更深了一点,在这里记录下,以后忘了可以直接翻自己的博客来做。吐槽一下,csdn现状,吵来吵去,标注20年发布的文章,抄的却是人家11年发布的。有时候百度一搜,十几条csdn,一摸一样的内容,有些人抄博客连称呼都不改的。

    牢骚发完了,讲讲js交互。

    首先要想要交互,就必须允许webview加载js,比较小白的事,但还是要提醒。

    webSettings.setJavaScriptEnabled(true);

    android和js交互主要是在webview上实现的。怎么使用webview也不多说了,比较基础的东西。贴一下官方的地址。

    https://developer.android.google.cn/guide/webapps/webview

    这里讲了js怎么调用android的方法。写的也很详细,代码也简单,我就做一个搬运工吧。

        public class WebAppInterface {
            Context mContext;
    
            /** Instantiate the interface and set the context */
            WebAppInterface(Context c) {
                mContext = c;
            }
    
            /** Show a toast from the web page */
            @JavascriptInterface
            public void showToast(String toast) {
                Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
            }
        }
        

    创建一个这样的类,注意,@JavascriptInterface这个,表示js可以调用这个方法。不加的js调用方法的时候会报一个方法不存在的错。

        WebView webView = (WebView) findViewById(R.id.webview);
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");
       

    这块我把它理解成channel,创建了一个js和webview的通道,然后通道里是js可以调用的方法,“android”这个是通道的标示,要跟js上对应起来。

        <input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
    
        <script type="text/javascript">
            function showAndroidToast(toast) {
                Android.showToast(toast);
            }
        </script>
        

    直接上对应的js方法,可以看到。Android.showToast即调用webview的showToast方法。(注:这里的Android和前面“Android”是对应的,自己写个demo跑一跑就明白了。)

    不过当然还可以在android端去拦截要加载的url来实现方法,这块我给的链接里有,就在下面。我个人不太喜欢这种方法,不太纯粹。这里就不介绍了。

    android调用js的方法

    上面这些官网都有,我的文笔也不太行,没看明白的可以直接去翻官网。而且百度也能出来一堆。但是接下来讲的,我还没在官网里找到详细介绍的(官网肯定都有,不过介绍的详细与否就不清楚了)

    然后自己稍微总结了下。

    用的是webview的evaluateJavascript方法。文字描述不如代码来的直接。

    String js = String.format("jsFunction(%s",string);
    webView.evaluateJavascript(js,new ValueCallback<String>() {
      @Override
      public void onReceiveValue(String value) {
        Log.i("TAG",value+"!!!");
      }
    });

    这个就是直接调用js的方法( jsFunction(string) ),这个方法存在js这边,有没有参数,有几个参数都随js这边来定。放参数主要是为了把android这边的数据回调给js。

    这样一套组合拳,就可以完成js和android端的交互。当需要调用原生这边的方法的时候,使用第一种方法,并且传参数过去。然后把数据处理完使用第二种方法,再还给js。

    还有就是,webview需要处于一个handle之下!!!不然调用方法会报错,要使用的时候把用getMainlooper拿过来。

    东西比较简单,mark一下记录自己的成长。

  • 相关阅读:
    word无法启动转换器RECOVR32.CNV
    win10致远OA显示正在转换。请稍等,不能获取office文件转换服务
    视频编辑剪辑软件
    软件质量属性——可修改性
    《架构之美》阅读笔记五
    架构漫谈一
    《架构之美》阅读笔记三
    《架构之美》阅读笔记二
    机器学习七讲——最优化
    机器学习六讲——降维
  • 原文地址:https://www.cnblogs.com/afei123/p/13490209.html
Copyright © 2011-2022 走看看