2024年Web前端最新谈一下WebView，vue前端面试题

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记

  

首先 Native 端需要实现这么一个类，给 JavaScript 调用。

public class WebAppInterface {    @JavascriptInterface    public void showToast(String toast) {        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();    }``}

然后将这个 WebAppInterface类，通过以下代码，添加到 WebView 的 JavaScriptInterface 中。​​​​​​​

WebView webView = (WebView) findViewById(R.id.webview);``webView.addJavascriptInterface(new WebAppInterface(this), “Android”); // 这里的Android会被当做一个变量，注入到页面的window中。

接着就可以在 JS 中调用 Native 了。

​​​​​​​

function showAndroidToast(toast) {    Android.showToast(toast);``}

2、WebViewClient.shouldOverrideUrlLoading()

这个方法的作用是拦截所有 WebView 的 URL Scheme 。

URL Scheme 是一种类似于 url 的链接，是为了方便 app 直接互相调用设计的，形式和普通的 url 近似，主要区别是 protocol 和 host 一般是自定义的。

拦截 URL Scheme 的主要流程是：Web 端通过某种方式（例如 iframe.src/location.href）发送 URL Scheme 请求，之后 Native 拦截到请求并根据 URL Scheme（包括所带的参数）进行相关操作。

页面可以构造一个特殊格式的 URL Scheme 触发，shouldOverrideUrlLoading 拦截 URL 后判断其格式，然后 Native 就能执行自身的逻辑了。

​​​​​​​

public class CustomWebViewClient extends WebViewClient {  @Override  public boolean shouldOverrideUrlLoading(   WebView view,   String url   ) {     if (isJsBridgeUrl(url)) {     // JSbridge的处理逻辑       return true;     }     return super.shouldOverrideUrlLoading(view, url);   }``}

3、WebChromeClient.onXXX()

通过修改原来浏览器的 window某些方法，然后拦截固定规则的参数，然后分发给Java 对应的方法去处理

• alert，可以被 WebView 的 WebChromeClient.onJsAlert() 监听

• confirm，可以被 WebView 的 WebChromeClient.onJsConfirm() 监听

• console.log，可以被 WebView 的 WebChromeClient.onConsoleMessage() 监听

• prompt，可以被 WebView 的 WebChromeClient.onJsPrompt()监听

prompt 简单举例说明，Web 页面通过调用 prompt()方法，安卓客户端通过监听WebChromeClient.onJsPrompt()事件，拦截传入的参数，如果参数符合一定协议规范，那么就解析参数，扔给后续的 Java 去处理。

window.prompt(message, value);

WebChromeClient.onJsPrompt()就会受到回调。onJsPrompt()方法的 message参数的值正是JS的方法 window.prompt()的 message的值。

​​​​​​​

public class CustomWebChromeClient extends WebChromeClient {  @Override  public boolean onJsPrompt(    WebView view,    String url,    String message,    String defaultValue,    JsPromptResult result    ) {        // 处理JS 的调用逻辑        result.confirm();        return true;    }``}

Java 调用 JavaScript

Android，在 Kitkat（4.4）只能用 loadUrl 一段 JavaScript 代码。

webView.loadUrl(“javascript:” + javaScriptString);

而 Kitkat 之后的版本，也可以用 evaluateJavascript 方法实现：

​​​​​​​

webView.evaluateJavascript(javaScriptString, new ValueCallback() {    @Override    public void onReceiveValue(String value) {      // native代码    }  });

IOS WebView

In apps that run in iOS 8 and later, use the WKWebView class instead of using UIWebView. Additionally, consider setting the WKPreferences property javaScriptEnabled to NO if you render files that are not supposed to run JavaScript.

在 IOS8 之前，苹果手机的 WebView 使用的 UIWebView，UIWebView长期以来存在某些问题：

• 加载速度慢

• 存在内存泄漏

• 内存占用多，内存优化困难

• 如果内存占用过多还可能因为占用过多被系统kill掉

在 WWDC 2014 大会上，IOS8推出了 WKWebView，WKWebView 是现代 Webkit API 在 iOS 8 和 OS X Yosemite 应用中的核心部分。它代替了 UIKit 中的 UIWebView 和 AppKit 中的 WebView，提供了统一的跨双平台 API。拥有 60fps 滚动刷新率、内置手势、高效的 app 和 web 信息交换通道、和 Safari 相同的 JavaScript 引擎。

JavaScript ↔︎ Swift 对话机制

使用用户脚本来注入 JavaScript

WKUserScript 允许在正文加载之前或之后注入到页面中。这个强大的功能允许在页面中以安全且唯一的方式操作网页内容。

一个简单的例子如下，用户改变背景的用户脚本被插入到网页中：

​​​​​​​

let source = "document.body.style.background = "#777;// 注入脚本 在文档加载完成后执行let userScript = WKUserScript()let userScript = WKUserScript(source: source, injectionTime: .AtDocumentEnd, forMainFrameOnly: true)let userContentController = WKUserContentController()``userContentController.addUserScript(userScript)`

`let configuration = WKWebViewConfiguration()configuration.userContentController = userContentControllerself.webView =WKWebView(frame: self.view.bounds, configuration: configuration)

对象可以以 JavaScript 源码形式初始化，初始化时还可以传入是在加载之前还是结束时注入，以及脚本影响的是这个布局还是仅主要布局。于是用户脚本被加入到 WKUserContentController 中，并且以 WKWebViewConfiguration 属性传入到 WKWebView 的初始化过程中。

这个样例可以简单扩展为更为高级的页面修改方法，例如去除广告、隐藏评论等。

Message Handlers

利用以下代码，可以跟Native进行通信

window.webkit.messageHandlers.{NAME}.postMessage()

Handler的name可以通过 WKScriptMessageHandler 协议中的 addScriptMessageHandler() 接口函数设置：

​​​​​​​

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript