七爪源码：如何在 Android Webview 中

七爪源码：如何在 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/小程序/网站源码资源！

、背景

最近开始重新关注SEO，也对网站做了一下优化整理，期间遇到了一些问题，这里简单记录下。希望能对有同样问题的人有所帮助。流水账而已也没啥特别好说的...

二、问题及分析

2.1、遇到了什么问题

我们知道在使用Nuxt进行SSR后，网站会启用服务端渲染，然后进行前端页面展示。最近因为关注SEO所以看了下我的网页源代码。

我的天啊，真的是不看不知道一看惨不忍睹，下面上一个直观图：

这还只是冰山一角！页面中充斥着大量的css样式。

2.2、为什么会产生这个问题

我们正常的前端项目是会有一个个的css和js文件，但是Nuxt项目在经过webpack打包后整合到了一起。从上图中红色标注中我们可以看到。这是把element-ui的组件中的样式全部整合进来了。

2.3、带来的影响

我们知道网络爬虫在爬取你的网页数据时不能进行JS的动态编译，但是像上述中这一坨css是可以被爬取的。

于是乎，爬虫的到的网页源代码就包含了这些无用信息（对于爬虫来说是无用的，会降低他们对网页质量的判断），同样会印象网站的响应速度这样是不利于网站做SEO的！

三、解决方案

3.1、修改nuxt.config文件

其实这个网页源代码中被嵌入css的问题可以通过一个配置进行解决！talk is cheap show me your code!


// 将内嵌CSS样式提取到外部
extractCSS: { allChunks: true },

Java

我们只需要再Nuxt.config中加入以上配置就可以使得html和css进行分离了！

3.2、效果

瞬间清新整洁了不少哈！

四、题外话

4.1、关于h1、h2

在SEO中是要好好使用h1、h2这些标签的，至于原因我们下期详细讲讲...

比于 Native App 和 Web App，Hybrid App 凭借其迭代灵活、控制自如、多端同步的优势在应用市场上越发显得优胜，主要得力于，其将变更频繁的部分产品功能使用 H5 开发并在客户端中借助 WebView 控件嵌入应用当中。所以，开发中我们总会遇到原生 Java 代码与网页中的 Js 代码之间相互调用从而产生的交互问题。

Java 与 Js 彼此调用的前提是设置 WebView 支持 JavaScript 功能：

Java 调用 Js

第一步，在网页中使用 Js 定义提供给 Java 访问的方法，就像普通方法定义一样，如：

第二步，在 Java 代码中按照 “javascript：XXX” 的 Url 格式使用 WebView 加载访问即可：

注意：String 类型的参数需要使用单引号 “’” 包裹，数组类型的参数则不用，如：javascript：javaCallJs([01, 02, 03])，其他复杂类型的参数可以转换为 Json 字符串的形式传递。

Js 调用 Java

第一步，在 Java 对象中定义 Js 访问的方法，如：

注意事项：提供给 Js 访问的属性和方法必须定义为 public 类型，并且添加注解 @JavascriptInterface。在 API 17 及更高版本的系统中，任何暴露给 Js 访问的 Java 接口都需要添加这个注解，否则会报异常：Uncaught TypeError: Object [object Object] has no method ‘XXX’。系统这种做法也是为了降低应用的安全隐患，因为在之前的版本中，Js 可以通过反射的方式访问注入 WebView 中的 Java 对象的 public 类型 field 和 method，从而随意修改宿主程序。

第二步，将提供给 Js 访问的接口内容所属的 Java 对象注入 WebView 中：

addJavascriptInterface(Object object, String name) 参数说明：object 表示 Js 访问的接口内容所在的 Java 对象；name 表示 Js 调用 Java 代码时的接口名称，与 Js 中的调用保持一致即可。

第三步，Js 按照指定的接口名访问 Java 代码，有如下两种写法：

这里简单提供一个可供测试的 Html 网页和 Activity 代码：

test.html:

MainActivity.java:

效果图：

注意：无论是 Java 调用 Js 还是 Js 调用 Java，只能通过参数传递数据，而无法获取彼此方法的返回值！解决方案就是额外添加一层回调来达到这个目的。比如 Java 调用 Js 的方法，Js 计算结束所得结果不能通过 return 语句返回给 Java 调用者，而是再回调 Java 的另一个方法，通过传参的形式传递给 Java。

注意事项

1.使用 loadUrl() 方法实现 Java 调用 Js 功能时，必须放置在主线程中，否则会发生崩溃异常。比如修改上面的代码：

运行时会得到如下 logcat 异常信息：

java.lang.RuntimeException: java.lang.Throwable: A WebView method was called on thread 'Thread-18022'. All WebView methods must be called on the same thread.

如果真的在子线程中遇到调用 Js 的功能，也要将其转换到主线程中去：

2.Js 调用 Java 方法时，不是在主线程 (Thread Name：main) 中运行的，而是在一个名为 JavaBridge 的线程中执行的，通过如下代码可以测试：

所以这里需要注意的是，当 Js 调用 Java 时，如果需要 Java 继续回调 Js，千万别在 JavascriptInterface 方法体中直接执行 loadUrl() 方法，而是像前面一样进行线程切换操作。

3.代码混淆时，记得保持 JavascriptInterface 内容，在 proguard 文件中添加如下类似规则 (有关类名按需修改)：

Url 拦截

除了上面这种 Java 与 Js 互调方法的方式，还可以利用 WebView 拦截 Url 的方式实现原生应用与 H5 之间的交互动作。通过 WebViewClient 提供的接口拦截网页内诸如二级跳转的 Url 链接，便可以进行业务逻辑上的判断处理、Url 参数传递等功能，如：

注意：过去常用的 shouldOverrideUrlLoading(WebView view, String url) 方法已经被废弃。

参考使用

通过 Java 与 Js 之间的交互可以做很多事情，比如获取网页中的图片，利用原生控件予以展示，类似响应微信公众号文章中的图片点击事件。参考代码如下：

作者博客地址：

http://yifeng.studio/2016/12/01/android-webview-java-js-interaction

在线咨询

上一篇：我猜你没见过如此用心的安卓应用市场活动表
下一篇：.net程序员个人简历怎么写

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商