Android WebView加载服务端JS进行交互

2019-04-10  本文已影响0人  KBein

Android WebView加载服务端JS进行交互

交互的方式

栗子

首先贴出服务端JS代码

/**
*用NodeJS 搭建的一个简单的服务器,
*主要是用于Get请求返回一个HTML网页
*从而便于我们Android 和 JS 交互
**/

    var express = require("express");
    var query= require("querystring");
    var app = express();
    app.use(express.static('public'));

    //我们要请求的网页
    var LogGet = require("./loginGet");
    //get请求返回HTML网页
    logGet = new LogGet();
    logGet.get(app);

    //这部分是执行POST请求代码,与本栗无关
    //var Mess = require("./login");
    //post请求,返回JSON数据
    //mess = new Mess();
    //mess.post(app,query);

    var server = app.listen(3000,function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log("应用实例,访问地址为 http://%s:%s", host, port)
})

loginGet.js文件代码

**
 * 模拟get请HTML页面
 * 以及HTML表单提交(get)
 * @constructor
 */
    function LogGet() {
            this.get = function get(app) {
            /**
            * 当我们请求URL = "http://localhost:3000/index.html"
            * 直接访问index.html
            */
            app.get("/index.html",function (req, res) {});
            /**
            * 用户HTML表单信息提交的响应,与本栗暂无关
            */
            app.get("/process_get",function (req, res) {
                if (req.query.first_name == "q" && req.query.last_name =="q"){
                    res.sendFile(__dirname+"/"+"index.html");
                }else {
                    // 输出 JSON 格式
                    var response = {
                        "first_name":req.query.first_name,
                        "last_name":req.query.last_name
                    };
                    console.log(response);
                    res.end(JSON.stringify(response));
                }
            })
        }
    }
module.exports = LogGet;

Android 调用JS代码

index.html文件代码

<!--
Created with KBein
User: kbein520@163.com
Date: 2019/4/10
Time: 11:14
Dec:
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div style="width: 400px;height: 400px;background-color: aqua;align-self: center;align-content: center" id="div">
        <button style="text-align: center;width: 100px;height: 70px;background-color: blueviolet;" type="button" id="btn1" onclick="onBtnClick()">点我</button>

        <script  type="text/javascript">
            function onBtnClick() {
                document.getElementById("div").style.backgroundColor='red';
            }
        </script>

    </div>

</body>
</html>

接下来贴出Android代码
MainActivity.java

  @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    private void initView() {
        mButton = findViewById(R.id.btn);
        mWebView = findViewById(R.id.webview);
        WebSettings webSettings = mWebView.getSettings();
        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        // 设置 WebViewClient
        mWebView.setWebViewClient(new WebViewClient(){

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                //此方法一般用于拦截web页面中的URL 用于重定向加载
                
                return super.shouldOverrideUrlLoading(view, request);
            }
        });

        mWebView.loadUrl("http://localhost:3000/index1.html");
    }

    private void androidToJS() {
        mButton.setOnClickListener(new View.OnClickListener() {
            @RequiresApi(api = Build.VERSION_CODES.KITKAT)
            @Override
            public void onClick(View v) {
                //Android 调用 JS 方法
                //Sdk小于4.4 时不可用
                mWebView.evaluateJavascript("javascript:onBtnClick()", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        //js返回值
                    }
                });
            }
        });
    }

JS调用Android代码

index.html文件代码

<!--
Created with KBein
User: kbein520@163.com
Date: 2019/4/10
Time: 11:14
Dec:
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div style="width: 400px;height: 400px;background-color: aqua;align-self: center;align-content: center" id="div">
        <button style="text-align: center;width: 100px;height: 70px;background-color: blueviolet;" type="button" id="btn1" onclick="onBtnClick()">点我</button>
    </div>
    
    <script type="text/javascript">
         function onBtnClick() {
            //android为要映射的类名
            //jsHello()为Android类中的方法名
            //此行为调用时应与后端把映射类名以及调用的方法名商定好,必须一致
             android.jsHello();
         }
     </script>

</body>
</html>

MainActivity.java代码

  @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    private void initView() {
        mButton = findViewById(R.id.btn);
        mWebView = findViewById(R.id.webview);
        WebSettings webSettings = mWebView.getSettings();
        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        
        mWebView.loadUrl("http://localhost:3000/index.html");
    }

    private void jsToAndroid() {
        // js 调用Android 代码方法
        //敲黑板!!!!!
        //此处的第一个参数是为一个对象,这个对象中的方法就是我们JS中要调用的方法
        //第二个参数是String name 为约定名
        //这两个名字必须和JS代码中一直,也就是说我们在开发时,这个是我们要和后端约定滴!!!!!
        mWebView.addJavascriptInterface(new AndroidJS(),"android");
    }

    class AndroidJS{
        //必须加此注解,否则不可用
        @JavascriptInterface
        public void jsHello(){
            Toast.makeText(Main3Activity.this,"走你",Toast.LENGTH_LONG).show();
        }
    }

到目前为止,几个简单的交互方式代码都已经贴上。还有最后一个拦截prompt()(一般最主要第拦截prompt()输入框传值),这个,我印象中万能的Github中有好多JSBridge框架就是利用这个原理实现的,非要说原理,我感觉可像线程间通讯机制,JSBridge相当于Handler(在总体功能上说),Native通过既定的协议(这个必须要有)由JSBridge中转发至JS中,反过来也是类似。应该像极了Handler,MessageQueue,Message,这个Message就是我们规定的协议内容,JSBridge 就是从这个MessageQueue中来回取、存协议消息进行转发。
嗯,就这么多吧,以上这个原理可能存在很多不对的地方,具体源码没怎么看,只是印象中大致这么了解的,如有不对,往大家指出【抱拳】【抱拳】【抱拳】

上一篇下一篇

猜你喜欢

热点阅读