webView 与 JS 间互相调用传值

以下Android代码基于kotlin编写

1 webView 与 JS 互相调用

webView 与 JS 间互相传值只能传递字符串

1.1 JS 部分代码

  <script>
    function getPhone(phone) {
        alert(phone)
    }
    var btn = document.getElementById("btn1");
    btn.onclick = function () {
        native.jsGetPhone("getPhone")
    };
  
  </script>

1.2 webView部分代码

.....
  webView?.addJavascriptInterface(new JSNativeInterface(activity, webView), "native")
.....

1.3 JSNativeInterface部分代码

  .....
  @JavascriptInterface
  fun jsGetPhone(callback:String) {  //提供给JS调用的方法
      activity?.runOnUiThread {
          var phone = "1111222233";
          webView.loadUrl("javascript:$callback('$phone')") //调用JS的方法
      }
  }
  .....

1.4 JS调用webView方法并传值

  native.jsGetPhone("getPhone")   //这里传递一个回调函数

1.5 webView调用JS方法并传值

  var phone = "1111222233";
  webView.loadUrl("javascript:$callback('$phone')")  //这里传递给JS一个手机号

2 webView 与 Vue 互相调用

2.1 Vue调用webView方法

和JS调用webView方法一样

  native.jsGetPhone("getPhone")   //这里传递一个回调函数

2.2 webView调用Vue方法

• 1：在methods中定义方法
• 2：在mounted中将定义的方法再赋值给window 如：

   window.getPhone = this.getPhone;

3 webView 调用 JS 传值注意事项

   var phone = "1111222233"

可以使用

  webView.loadUrl("javascript:"+ callback +"('" + phone + "')")

或者简洁一点

  webView.loadUrl("javascript:$callback('" + phone + "')")

或者更简洁

  webView.loadUrl("javascript:$callback('$phone')")

如果使用 下面这种 则会报 Uncaught ReferenceError: xxx is not defined

  webView.loadUrl("javascript:$callback($phone)")  //$phone外层需要加引号

注意
因为webView和JS互相传值的只能是字符串，所以通过loadUrl调用JS方法时，需要这种格式

  webView.loadUrl("javascript:getPhone('1111222233')")

因为 webView.loadUrl("…") 需要这样调用JS方法，所以如果这样写

  webView.loadUrl("javascript:$callback($phone)")

相当于

  webView.loadUrl("javascript:getPhone(1111222233)")

那我们调用 getPhone 传递的就不是字符串类型，就会报 Uncaught ReferenceError: xxx is not defined

所以需要 给传递的参数 再加一层引号

  webView.loadUrl("javascript:$callback('$phone')")

相当于

  webView.loadUrl("javascript:getPhone('1111222233')")

这样才可以调用JS的getPhone方法并传递参数