Webview学习笔记

本文主要是介绍Webview学习笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、Webview简介

1. 什么是 webview
原生APP开发中有一个 webview 的组件(Android 中是 webview，iOS7 以下有 UIWebview，7以上有 WKWebview)，这个组件可以加载 Html 文件(有点类似于浏览器，可以加载解析 html，css啥的)。在 H5 火爆之前，webview 一般用来加载静态页面。H5 流行起来之后，主要的逻辑都用 H5 页面来编，然后原生直接用 webview 加载显示。

2. 为什么要在app中加载H5页面
(1) 原生APP：
优点：
直接依托于操作系统,直接调用官方提供的api，交互性最强，性能最好。
缺点：
a. 开发成本高，无法跨平台，Android和iOS上都要各自独立开发；
b. 应用更新过程缓慢，Android中还能直接下载整包APK进行更新，但是iOS中，如果是发布AppStore，必须通过AppStore地址更新，而每次更新都需要审核，所以无法达到及时更新。

(2) Web App:
即移动端的网站，将页面部署在服务器上，然后用户使用各大浏览器访问
优点：
a. 开发成本低,可以跨平台；
b. 更新快，资源是直接部署在服务器端的，只需更新服务器端的前端代码即可；
缺点：
a. 直接通过的浏览器访问，所以无法使用原生的API，操作体验不好；
b. 需要取服务器加载资源，所以很依赖网速；
c. 功能受限，无法调用原生API；
d. 临时性很高，一旦退出，不容易再次找到入口。

(3) Hybrid App：
通过以上两种方式的对比，大家想必也明白了为啥要把H5页面从浏览器挪到App里了吧，这种混合式的开发就叫Hybrid App，也就是半原生半Web的开发模式。
优点：
a. 开发成本较低，可以跨平台；
b. 更新发版快速，通过原生提供api，进行资源主动下载，达到只更新资源文件，不更新apk(ipa)的效果。
缺点：
a. 交互性和性能比原生app差。

所以用webview加载页面的方式，一般都用来加载展示性强的页面，交互太多的页面就不采用这种方式了。

简单说，Webview作用就是App内部网页加载UI。

二、Native端和前端的交互

下面了解一下是怎么用的，App这边我们称之为native端，js这边当然就是前端。之间的交互桥梁我们通常都叫JsBridge.

1. native调用前端js的方法有2种：
(1) 通过 WebView 的 loadUrl()
(2) 通过 WebView 的 evaluateJavascript()

2. 前端js调用native的方法有3种：
(1) 通过 WebView 的 addJavascriptInterface() 进行对象映射。
(2) 通过 WebViewClient 的 shouldOverrideUrlLoading() 方法回调拦截 url。
(3) 通过 WebChromeClient 的 onJsAlert()、onJsConfirm()、onJsPrompt() 方法回调拦截JS对话框 alert()、confirm()、prompt()

三、原生渲染和webview渲染

1. 原生的渲染方式

view -> layou t-> renderNode -> 合成 -> GPU渲染

2. webview 目前渲染方式

html -> dom tree -> render tree -> render layer + 栅格化 -> 合成 -> gpu渲染

3. 二者对比
(1) native layout 算法比浏览器快；
(2) JS Thread、DOM Thread、Native Main Thread，并行化进行；
(3) webview 本身其实更像一个容器或者盒子，它是装在在OS里面的一个套件而已，程序(HTML+js)要到OS必须走出这个盒子，多走了几步，自然比人家慢一些，而且关键还不是多走一步；

四、Hybrid App/React Native/微信小程序

这种将app和前端页面两者的优点结合起来的方式，不止Hybrid App这一种方式。

(1) ReactNative: (简称RN) 是 Facebook 于2015年四月开源的跨平台移动应用开发框架，是Facebook早先开源的 Web UI 框架 React 在原生移动应用平台的衍生产物，目前支持 iOS 和安卓两大平台。该框架使用 Javascript，类似于 HTML 的 JSX，以及 CSS 来开发移动应用 UI。
(2) 小程序: 微信小程序是混合式的移动应用，开发者在自己的微信中通过小程序的开发者工具，撰写出Native级别的界面，通过开发者工具生成压缩包，提交到微信公众平台，然后在微信app中请求执行，便可实现原生Native的界面体验。微信小程序是不需要下载安装的应用，实现'触手可及'，'用完即走'的理念。这也是小程序最大的特点。

由于微信小程序只能在微信平台上开发，不再和其他方式比较。

优秀博文：
http://www.jianshu.com/p/fb28b8e14bc5
http://www.cnblogs.com/dailc/p/5930238.html
https://www.cnblogs.com/cuncunjun/p/7374702.html --已看

TODO:
【Android】混合开发之WebView的介绍及使用:
https://blog.csdn.net/weixin_41885053/article/details/81011853?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1.pc_relevant_paycolumn_v3&utm_relevant_index=1
webview全面解析：
https://blog.csdn.net/vicwudi/article/details/81990467?spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-6.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-6.pc_relevant_aa&utm_relevant_index=10
初识webview:
https://blog.csdn.net/weixin_33735077/article/details/94745286?spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-12.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-12.pc_relevant_aa&utm_relevant_index=16
webview详解：
https://blog.csdn.net/zzz_zlp/article/details/121786805?spm=1001.2101.3001.6650.16&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-16.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-16.pc_relevant_aa&utm_relevant_index=20
Android中WebView渲染显示web页面：
https://blog.csdn.net/chendi1992/article/details/77885483/?utm_term=webview%E6%B8%B2%E6%9F%93%E7%A8%8B%E5%BA%8F&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-2-77885483&spm=3001.4430

这篇关于Webview学习笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！