前言

这是 HyBird 开发学习笔记的第一篇，在这一篇中介绍怎样通过 WebView 实现两种语言间的互相调用。

参考博客：https://blog.csdn.net/sy18298711239/article/details/51945478

调用 JavaScript

1. 调用 JavaScript 首先需要构建一个 html 文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<div id="div" style="width:100px; height:100px; background-color:#099;" onclick="window.demo.javaMethod()">
</div>
<body>
</body>
<script type="text/javascript">
function changeColor(){
   document.getElementById("div").style.backgroundColor='red';
   }
</script>
</html>

2. 创建 assets 文件夹（位置如图），将第一步创建的 html 放入

image.png

3. Activity 中调用

public class MainActivity extends AppCompatActivity {
    private WebView mWebView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = findViewById(R.id.webview);
        WebSettings webSettings = mWebView.getSettings();
        //开启Js调用权限
        webSettings.setJavaScriptEnabled(true);
        //加载
        mWebView.loadDataWithBaseURL(null,getFromAssets("FirstTest.html"),"text/html","utf-8",null);
        mWebView.addJavascriptInterface(MainActivity.this,"demo");
    }
   // 调用Js （webView.onClick）
    public void usejs(View view){
        mWebView.loadUrl("javascript:changeColor()");
    }
   //读取html转换成String
    private String getFromAssets(String fileName){
        try {
            InputStreamReader inputReader = new InputStreamReader( getResources().getAssets().open(fileName) );
            BufferedReader bufReader = new BufferedReader(inputReader);
            String line="";
            String Result="";
            while((line = bufReader.readLine()) != null)
                Result += line;
            inputReader.close();
            bufReader.close();
            return Result;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }

    }

xml 布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.webviewusejs.MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="200dp"></WebView>

    <Button
        android:id="@+id/button"
        android:layout_gravity="center"
        android:onClick="usejs"
        android:text="调用"
        android:layout_width="150dp"
        android:layout_height="50dp" />

</FrameLayout>

4. 实现效果

调用 Java

JavaScript 调用 Java，代码

  // 调用java
    @JavascriptInterface
    public void javaMethod(){
        Toast.makeText(MainActivity.this, "javascript调用了java方法！", Toast.LENGTH_SHORT).show();
    }

实现效果

GS20180427163806.gif