七爪源码:如何在 Android Webview 中使用 Javascript 注入

在移动应用程序开发中，有一种情况是用户希望将他们的交互式 Web 内容作为原生 Android 或 iOS 应用程序。 为此，开发人员有 2 个选项，他们可以从头开始构建应用程序，这需要额外的时间和资源，或者是将网页作为 web 视图嵌入到原生 android 应用程序中的最简单和更快的选项。 它将减少开发人员开发本机应用程序 UI 并仅使用当前网页中的 UI 的时间。

但是，这种方法存在局限性，例如某些任务或手势只能在移动应用程序中发生，而不能在浏览器中发生，例如语音命令或滑动手势。 为了适应这一点，我们需要在原生应用程序中添加额外的代码，并将这个原生任务连接到我们的 webview 应用程序。 在这种情况下，javascript 注入作为将本机代码（Java 或 Swift）桥接到网页代码（Javascript）的解决方案

Android 中的 Javascript 注入

在这里，我将尝试解释在 Native android 应用程序中加载网页所需完成的基本设置。首先，您需要在活动布局中设置 webview，下面是如何在 Android XML 文件中添加 <Webview> 标记的示例

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

之后，我们需要访问互联网才能在我们的应用程序中工作，为此我们应该在 Android 清单文件中添加以下语法

<manifest ... >
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

现在，我们可以移动到 MainActivity.java 文件，在这里我们需要在 onCreate() 函数中添加以下语法。因为 onCreate 函数是我们初始化一切的第一个地方，所以下面的语法帮助我们初始化我们的 webview。 setJavaScriptEnabled(true) 语法需要设置为 true，以授予在此使用 javascript 注入的权限。 addJavascriptInterface(this,"android") 语法将有助于创建可用作 Java 和 Javascript 之间的桥梁的 Web 界面。在这里，我们的界面将被称为android。最后一个语法是 loadUrl ，它有助于在 Native 应用程序中加载我们的网页。

WebView webViewMain;
webViewMain = findViewById(R.id.webview);

webViewMain.getSettings().setJavaScriptEnabled(true);
webViewMain.addJavascriptInterface(this, "android");
webViewMain.loadUrl("https://www.example.com");

仍然在 MainActivity.java 文件中，我们需要在 onCreate() 函数之外添加一个类。这个类将存储我们想要在 javascript 中运行的所有函数，我们也可以从 javascript 中获取任何值以传输到 Java 原生应用程序变量。示例之一是 getId 函数，它将 HTML 标签中的 id 传输到本地应用程序中进行识别。

public class WebAppInterface {
    String value = "hello"
    
    @JavascriptInterface
    public String runValue() {
       return value;
    }
    @JavascriptInterface
    public int getId(id) {
       return id;
    }
}

要使用上述函数，下面是我们可以在 onCreate() 或其他侦听器函数中添加的语法。您可以识别出我们使用 loadUrl 来注入 javascript，在 loadurl 中我们可以使用每种 javascript 语法来导出网页。同样在 loadurl 中，我们需要添加上面已经创建的函数，并将 android 作为父函数。

webViewMain.loadUrl("javascript:window.onclick = function(e) {\n" +
    "android.getId(e.target.id);}");
webViewMain.loadUrl("javascript:android.getSpeechIndex()");

关注七爪网，获取更多APP/小程序/网站源码资源！