1.Native与Web通信(上):使用addJavascriptInterface

android Hybrid开发应用场景众多,Native与Web通信主要有两种方式:
1.使用addJavascriptInterface
2.使用JsBridge

本文对第一种交互方式做简单介绍,第二种交互将在下一篇博文进行描述。

1.接入

Android自带的交互方式,无需引入任何依赖。

2.Web调用Native

在Web页面调用Native的方法,分别用get/set两个方法来模拟数据交换。

  • Activity页面
    开启Javascript使能、传递交互接口对象、加载web页面。
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDefaultTextEncodingName("utf-8");

mWebView.addJavascriptInterface(new WebViewUtils(mWebView), "androidInterface");
mWebView.loadUrl("file:///android_asset/test.html");

  • 交互接口类定义
    交互接口类是web调用Native的最直接体现,所有的交互接口都在这里定义
public class WebViewUtils {
    private static final String TAG = "WebViewUtils";
    private WebView webView;

    public WebViewUtils(WebView webView) {
        this.webView = webView;
    }
    
    @JavascriptInterface
    public int getUserScore() {
        return 200;
    }

    @JavascriptInterface
    public void setUserScore(int score) {
        Log.d(TAG, "Score from web:" + score);
    }
}

  • web页面
    简单起见,写了最简单的HTML,两个script function 来调用Native的方法:
    getUserScore() 与 setUserScore()。
    页面命名test.html,放在assets目录下。
<!DOCTYPE html>
<html>

<body>
    <div id="web_test"></div>

    <button type="button" onclick="getUserScore()">getUserScore</button>
    <button type="button" onclick="setUserScore()">setUserScore</button>

    <script>

		function goBack() {
            return "1";
        }
        
        function getUserScore() {
            var ret = androidInterface.getUserScore();
            document.getElementById("web_test").innerHTML= "getUserScore:"+ret;
        }

        function setUserScore() {
            androidInterface.setUserScore(45);
        }

    </script>
</body>

</html>
// 运行结果 web调用Native的setUserScore,将数据45传给Native
2019-12-20 22:39:57.489 32263-1750/com.example.webdemo D/WebViewUtils: Score from web:45

3.Native调用Web方法

这里用web页面返回逻辑来模拟,在activity监听返回按键,调用web的goBack()方法来判断是返回web页面还是finish当前Activity。通过goBack()的返回值来判断,是否需要finish当前Activity。

@RequiresApi(api = Build.VERSION_CODES.KITKAT)
    private void handleGoBack() {
        mWebView.evaluateJavascript("goBack()", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                Log.d(TAG, "onReceiveValue: " + value);
            }
        });
    }
// Native调用web的goBack, 根据返回值做对应的处理
2019-12-20 22:41:52.058 32263-32263/com.example.webdemo D/JsInterfaceActivity: onReceiveValue: "1"

demo地址
[email protected]:justinworkshop/WebDemo.git

发布了37 篇原创文章 · 获赞 0 · 访问量 569

猜你喜欢

转载自blog.csdn.net/qq_37514242/article/details/103639201