实战-安卓android java与vue js互相调用

第一部分:js调用android

1.这种情况,就是点击了web页面的控件,让android原生做出反应,如跳转或者处理方法
2.android代码要做的就是在写web页面的代码内部监听js点击的方法
3.这里监听的时候部分普通js和vue js
4.不管你用的什么web第三方控件都要实现下面的方法

1
2
3
4
// setJavaScriptEnabled这句代码在用TBS腾讯浏览服务的jar包时,显示过期,但是还是有效
webview.getSettings().setJavaScriptEnabled(true);
// 这里的this,一般是指加载web页面的context,name指的是js页面调用方法前的一个对象,具体看js代码
webview.addJavascriptInterface(this,"name");
  • 来一段没有注释的代码块
    1
    2
    3
    4
    WebSettings webSettings = webview.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webview.loadUrl("file:///android_asset/html.html");
    webview.addJavascriptInterface(MainActivity.this,"android");
  • 来一段js代码
    1.里面的test.hello(“xxx”),应该可以写成window.test.hello(“xxxx”)
    2.所以以hello命名的方法要写在android代码中,那之前在android代码中的那个name就是test
    3.所以写成webview.addJavascriptInterface(this,”test”);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Carson</title>
    <script>
    function callAndroid()
    {
    // 由于对象映射,所以调用test对象等于调用Android映射的对象
    test.hello("js调用了android中的hello方法");
    }
    </script>
    </head>
    <body>
    //点击按钮则调用callAndroid函数
    <button type="button" id="button1" onclick="callAndroid()"></button>
    </body>
    </html>
  • js代码示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <script>

    window.onload = function () {

    let temp = document.getElementById("test02");
    temp.onclick = function (e) {
    if(window.js_obj){
    window.js_obj.testJS();

    }
    }
    document.getElementById("test03").onclick = function(){
    if(window.js_obj){
    window.js_obj.shareTitleDesc("111","222");
    }
    };


    }

    </script>

  • 在来段js代码加深印象
    1.下面应该写成webview.addJavascriptInterface(this,”android”)
    2.this是上下文,根据具体情况定

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <html>
    <head>
    <meta http-equiv="Content-Type" charset="GB2312"/>

    <script type="text/javascript">

    // 这个方法是js调用java的方法名,也就是说这个方法名要在java中实现
    function javacalljs()
    {
    document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
    }

    // java调用js,我们这说的就是android调用js,因为android用的java语法
    function javacalljswith(arg){
    document.getElementById("showmsg").innerHTML = (arg);
    }

    </script>

    </head>

    <body>
    <h3>Web模块</h3>

    <h3 id="showmsg">调用js显示结果</h3>

    // 注意看,你可以知道addJavascriptInterface后面的name是哪个吗?没错就是android
    <input type="button" value="Js调用Java代码" onclick="window.android.jsCallAndroid()"/>

    <input type="button" value="Js调用Java代码并传参数" onclick="window.android.jsCallAndroidArgs('Js传过来的参数')"/>
    </body>
    </html>
  • 上面的代码在java中监听的写法是
    1.在Android4.4以上并且必须加入@JavascriptInterface才有响应。
    2.第一个方法不带参数,第二方法带参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @JavascriptInterface
    public void jsCallAndroid(){

    }

    @JavascriptInterface
    public void jsCallAndroidArgs(String args){

    }

第二部分:android调用js

1.那android怎么调用js中的方法呢
2.我分为两种,一个是调用普通的js代码,一个是调用vue js的代码

  • 看在js中定义的一个方法给android调用

    1
    2
    3
    function callFromJava(str){
    console.log(str);
    }
  • 接着在java中调用
    1.javascript这个是固定写法
    2.callFromJava(“xxxx”)才是真正要调用的方法

    1
    2
    3
    public void  javaCallJS(){
    webView.loadUrl("javascript:callFromJava('call from java')");
    }

android调用vue js

  • vue js 中的写法
    1.里面一定要把给java调用的方法挂在到window上,就是mounted()中写的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    mounted() {
    //将要给原生调用的方法挂载到 window 上面
    window.callJsFunction = this.callJsFunction
    },
    data() {
    return {
    msg: "哈哈"
    }
    },
    methods: {
    callJsFunction(str) {
    this.msg = "我通过原生方法改变了文字" + str
    return "js调用成功"
    }
    }
  • java中调用代码
    1.网上找了一种这个写法的,给参考下
    2.我自己写的方法直接点,这里还传了一个参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @Override
    public void callVueJS() {
    tbsWebView.post(new Runnable() {
    @Override
    public void run() {
    webView.loadUrl("javascript:callJsFunction('soloname')");
    }
    });
    }
  • 自己写的是

    1
    webView.loadUrl("javascript:callJsFunction('soloname')");