您的位置：首页 > 移动开发 > Android开发

Android开发之Webview中原生与JS交互

2020-07-15 04:18 169 查看

文章目录

  • 总结

    • 概述

    由于手机硬件资源的快速提升，使得采用混合开发的可能性逐渐成为现实并且流行起来。Android开发中最为简单的方式就是通过Webview来嵌入一个网页使web作为App的一部分。

    使用场景

    1. 非重交互场景
    2. 非计算密集型场景
    3. 对UI复杂度要求不高的场景
      以上可见，《王者荣耀》断然不会使用混合开发的，其实谷歌举了两个最适合的场景：
      第一：内容需要动态更新的场景，例如APP里面的法律条款展示等。
      第二：总是需要通过网络来拉取展示内容的场景，例如新闻展示。

    交互方式

    我们知道，网页的行为现在是使用

    JavaScript
    来处理的，而Android原生使用的是
    Java（Kotlin）
    ，交互的意思即原生可以调用JavaScript方法，而JavaScript也可以调用原生的方法。

    Java调用JS代码的方法有2种：

    1. 通过WebView的loadUrl（） 方法
    2. 通过WebView的evaluateJavascript（）方法

    JS调用Java代码的方法有3种：

    1. 通过WebView的addJavascriptInterface（）进行对象映射
    2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
    3. 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息

    先上一张效果图：

    Java调用JS代码

    上面提到Android提供了两种方法来实现Java执行Js代码，其中

    evaluateJavascript()
    方法是从 API 19（4.4版本）开始提供的，而现在Android已经发布到 API 28 (9.0)了, 4.4以下版本占的比例已经非常少了，相信过不了多久基本上就不存在了，所以我们要放下历史包袱，直接使用新的方法。最重要的是，在Android 4.4及其以上版本Google 采用了 Chromium(http://www.chromium.org/) 作为系统WebView的底层内核，而不是WebKit了。新的webview对
    HTML5
    ,
    CSS3
    ,
    Javascript
    的支持更为广泛，而且js执行引擎直接换成了V8，执行效率大大提升.

    void evaluateJavascript(String script, ValueCallback<String> resultCallback){}

    参数script : 要执行的JS代码。
    参数 resultCallback: Js代码执行后的返回值

    具体步骤：
    第一：新建一个工程，新建一个Activity，包含一个

    Webview
    控件。
    第二：新建一个demo.html的文档，作为要在webview中展示的web页面，里面含有js代码。将其放在工程中的assets文件家中。

    <!DOCTYPE html>
<html>
<head lang="zh-cmn-Hans">
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width"/>
<title>JsBridgeDemo</title>
</head>
<style>
.btn {
text-align: center;
background: #d8d8d8;
color: #222;
padding: 20px;
margin: 30px;
font-size: 24px;
border-radius: 4px;
box-shadow: 4px 2px 10px #999;
}

.btn:active {
opacity: .7;
box-shadow: 4px 2px 10px #555;
}
</style>

<body>
<div class="btn" onclick="showAndroidToast('Js调用Java')">Js调用Java函数</div>
<p id="content"></p>

<script type="text/javascript">
function showAndroidToast(toast) {
android.showToast(toast);
}

function fillContent(){
document.getElementById("content").innerHTML ="此处内容由Java调用Js方法展示在Webview上";
return "ok";
}
</script>
</body>

    第三步：在activity中通过webview调用Js代码。

    final WebView myWebView=findViewById(R.id.webView);
WebSettings webSettings=myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
myWebView.loadUrl("file:///android_asset/demo.html");
Button btnCallJs=findViewById(R.id.btn_call_js);
btnCallJs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
myWebView.evaluateJavascript("fillContent()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Toast.makeText(MainActivity.this,value,Toast.LENGTH_SHORT).show();
}
});
}
});

    首先设置允许Webview执行Js，然后加载assets文件夹中的demo.html网页，最后在点击按钮的时候使用

    evaluateJavascript()
    方法来执行Js代码。

    JS代码的调用需要在web页面加载完成后才可以正常执行。可以通过监听WebViewClient的onPageFinished 回调来完成,如下代码所示。

    myWebView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url){
super.onPageFinished(view, url);
//执行Js代码
}
});

    JS调用Java代码

    上面提到有三种方法可以实现Js调用Java代码的目的，其中第一种简单明了，为Google推荐的方法，但是其在API 17（4.2）之前存在任意执行漏洞。但是我们前面分析了，4.4 都快没有了，4.2 就更别说了，所以我们直接针对Android4.4编程，使用这个方法是安全的。

    具体步骤：
    第一步：新建一个接口类

    JavaInterface
    ，里面定义给Js调用的方法。这些方法必须是public的，而且必须使用
    @JavascriptInterface
    进行注解，例如下面的代码示例中的
    showTost()
    。

    public class JavaInterface {
private Context mContext;

JavaInterface(Context c) {
mContext = c;
}

@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
}

    第二步：给Webview添加与Js的映射关系

    myWebView.addJavascriptInterface(new JavaInterface(this),"android");

    参数1：接口类的对象
    参数2：Java对象映射到Js的对象名，可以在Js中使用这个对象来调用接口类中的方法。

    第三步：在Js中调用Java方法

    <script type="text/javascript">
function showAndroidToast(toast) {
android.showToast(toast);
}
</script>

    可以看到，在js中可以使用android这个Js对象，直接调用我们定义在

    JavaInterface
    类中的方法。

    总结

    以上就是Android开发中使用Webview 完成原生与web的交互。开篇说道除了本文介绍的方式，还有其他几种方式，大部分不是有历史包袱就是本意不是用来做这件事情的，所以应该优先使用本文的方式，如果有的同学需要了解其他方法，可以参考这篇博客，写的比较全。

    如果是在项目中使用而不是为了学习，推荐使用前人写好的三方库，例如DSBridge，JsBridge等。特别是dsbridge，三端全有，现代简洁，易用。

    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航