正文

如何轻松实现JS调用WebView：步骤解析与实战案例

/0 浏览量
0424

在移动应用开发中，WebView是一个重要的组成部分，它允许开发者将Web内容嵌入到原生应用中。JavaScript（JS）与WebView的结合使用，使得我们可以实现一些非常有趣的交互功能。本文将详细介绍如何在JS中调用WebView，并提供一个实战案例。

步骤解析

1. 准备工作

首先，确保你的项目中已经集成了WebView。对于Android项目，你可以在build.gradle文件中添加以下依赖：

dependencies {
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:support-v4:28.0.0'
    implementation 'com.android.support:webview-javascript-api:1.0.2'
}

对于iOS项目，你需要在Info.plist文件中添加NSAppTransportSecurity字段，并设置其NSAllowsArbitraryLoads属性为YES。

2. 创建WebView

创建一个WebView对象，并设置其内容。以下是一个Android示例：

WebView webView = new WebView(this);
webView.loadUrl("file:///android_asset/index.html");

3. 注册JS对象

在WebView中注册一个JS对象，以便在JS中调用。以下是一个Android示例：

webView.addJavascriptInterface(new WebAppInterface(this), "AndroidInterface");

WebAppInterface类需要实现一个onJsCallback方法，用于接收JS传递的数据：

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }

    public void onJsCallback(String data) {
        // 处理JS传递的数据
    }
}

4. 调用JS函数

在WebView加载的页面中，定义一个JS函数，并在需要时调用它。以下是一个HTML示例：

<script>
function callAndroid() {
    AndroidInterface.showToast("Hello from JavaScript!");
}
</script>

5. 调用WebView中的JS

在Java代码中，使用loadUrl方法调用WebView中的JS函数。以下是一个Android示例：

webView.loadUrl("javascript:callAndroid()");

实战案例

以下是一个简单的实战案例，演示了如何在Android应用中调用WebView中的JS函数，并获取返回的数据。

HTML页面（index.html）：

<!DOCTYPE html>
<html>
<head>
    <title>WebView JS调用示例</title>
</head>
<body>
    <button onclick="sendData()">发送数据</button>
    <script>
        function sendData() {
            var data = {name: "张三", age: 20};
            AndroidInterface.onJsCallback(JSON.stringify(data));
        }
    </script>
</body>
</html>

Java代码：

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webview);
        webView.addJavascriptInterface(new WebAppInterface(this), "AndroidInterface");
        webView.loadUrl("file:///android_asset/index.html");
    }

    public class WebAppInterface {
        Context mContext;

        WebAppInterface(Context c) {
            mContext = c;
        }

        @JavascriptInterface
        public void onJsCallback(String data) {
            try {
                JSONObject jsonObject = new JSONObject(data);
                String name = jsonObject.getString("name");
                int age = jsonObject.getInt("age");
                Toast.makeText(mContext, "姓名：" + name + "，年龄：" + age, Toast.LENGTH_SHORT).show();
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }
    }
}

在这个案例中，我们创建了一个包含按钮的HTML页面，当点击按钮时，会调用sendData函数，将数据发送到Android端。在Android代码中，我们实现了onJsCallback方法，用于处理接收到的数据。

通过以上步骤和案例，你可以在JS中轻松调用WebView，并实现一些有趣的交互功能。希望本文对你有所帮助！

-- 展开阅读全文 --