欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

学习笔记-Android webview和JS交互

程序员文章站 2022-04-18 13:53:46
...

           本文主要介绍一下Android 原生控件webview和JavaScript 的交互方式，原生App 不够灵活，而通过webview 载入js 这种混合式开发可以弥补 原生app 不够灵活的缺陷；现在采用混合式开发的app也越来越多，因此掌握这项技术能为你个人技术加分不少。这里我会通过 Android 调用JS代码和 JS代码调用Android代码来实现 Android 与JS的交互；

一.准备工作

     在main 文件夹下建一个assets 文件夹，里面放 你要加载的html 文件，这里咱们就不联网获取 html 文件啥的了，直接在本地放html 文件；

temp.html

<script type="text/javascript">
        var result = JavaScriptInterface.jsontohtml();  
        var obj = eval("("+result+")");//解析json字符串  
        function showAndroidToast(toast)   
        {
            JavaScriptInterface.showToast(toast);   
        }

         function call() {
            obj.showToast("我来自js");//对象名 为 obj 
         }

         function getsum(){//Android调用js代码
            return("here is the data i send to you");
         }

        function getjsonData(){  
            var result = JavaScriptInterface.jsontohtml();  
            var obj = eval("("+result+")");//解析json字符串  
            for(i=0;i<obj.length;i++){  
                var user=obj[i];  
                document.write("<p>姓名:"+user.name+"</p>");  
                document.write("<p>年龄:"+user.age+"</p>");  
                document.write("<p>地址:"+user.address+"</p>");  
                if(user.phone!=null){  
                    document.write("<p>手机号码:"+user.address+"</p>");  
                }  
            }  
        }     
        function list(){  
            document.write("<div data-role='header'><p>another</p></div>");  
        }  
        </script>
</head>
<body>

<button type="button" onclick="call()" id=button1 >message</button>

<div data-role="page" >
    <div data-role="header" data-theme="c">
        <h1>Android via Interface</h1>
    </div><!-- /header -->
    <div data-role="content">
        <button value="say hello" onclick="showAndroidToast('Hello,Android!')" data-theme="e"></button>
        <button value="get json data" onclick="getjsonData()" data-theme="e"></button>
    </div><!-- /content -->
    <div data-role="collapsible" data-theme="c" data-content-theme="f">
        <h3>I'm <script>document.write(obj[0].name);</script>,click to see my info</h3>
        <p><script>document.write("<p>姓名："+obj[0].name+"</p>");</script></p>
        <p><script>document.write("<p>年龄："+obj[0].age+"</p>");</script></p>
        <p><script>document.write("<p>地址："+obj[0].address+"</p>");</script></p>
    </div>
    <div data-role="footer" data-theme="c">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
</body>

二.JS调用Android代码

     先初始化webview

private void init() {
        webview = (WebView) findViewById(R.id.wv);
        WebSettings settings = webview.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setDefaultTextEncodingName("UTF-8");
    }
先加载 html 文件，然后通过addJavascriptInterface        方法传递一个当前对象（可以调用这个方法的对象）和 一个“昵称”，该“昵称”对应 js 方法里面的对象名，上面js里面对象名是obj,所以，这里需要穿“obj”; 

webview.loadUrl("file:///android_asset/temp.html");
        webview.addJavascriptInterface(this,"obj");

JS里面，咱们写了一个按钮，点击这个按钮，会调用Android里面这句代码；

 @JavascriptInterface
    public void showToast(String s) {
        Toast.makeText(this, s, Toast.LENGTH_SHORT).show();
    }
这里需要注意一点就是 在Android 4.4以后，需要加上@JavascriptInterface注解

三.Android调用JS代码

Android调用JS代码有两种方式，一种是loadUrl();

webview.loadUrl("javascript:getsum()");这种方法直接调用JS的方法，但是没办法获取返回值，而且会刷新页面
所以我推荐使用第二种方法 

@TargetApi(Build.VERSION_CODES.KITKAT)
    public void atj(View view) {
       webview.evaluateJavascript("javascript:getsum()", new ValueCallback<String>() {
           @Override
           public void onReceiveValue(String value) {
               Log.d(TAG, "onReceiveValue=  "+value);
           }
       });
    }
这种方法不会刷新页面，效率会更高，可以通过回调获取到js给我们的返回值，也是在Android4.4以后支持

四.获取JS代码返回值给Android的其他几种方式

主要是通过js页面弹窗来传递数据，通过setWebViewClient 方法，里面回调 onJsAlert(),onJSconfirm();onJSprompt();对应JS 的 alert(); confirm(); promrt();方法，通过这几个方法传值；具体大家可以参考这篇文章：

http://blog.csdn.net/carson_ho/article/details/64904691

      感谢博主！好了，就分享到这里。


相关标签： JS webview

上一篇： Active Record Validations 6 Performing Custom Validations 执行个性化校验

下一篇： 比较完善的手写数组reduce方法

推荐阅读