webview初探

ref:     https://www.cnblogs.com/pqjwyn/p/7120342.html

一：释义

A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

        作者的理解：webview用来展示网页的view组件，该组件是你运行自己的浏览器或者在你的线程中展示线上内容的基础。使用webkit渲染引擎来展示，并且支持前进后退等基于浏览历史，放大缩小，等更多功能。

      简单来说WebView是手机中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装的一个组件。不给过没有提供地址栏和导航栏，只是单纯的展示一个网页界面。

二：为何需要webview?

       html是解释型语言，需要运行在解释器上。hybrid移动开发中，H5通过webview容器来解释运行。

 

三：Webview优化

        两个方向：    A.webview初始化太慢；  B.初始化webview时并行网络请求

3.1：减少webview初始化的消耗

　　A.    鉴于每次打开都要进行初始化webview组件的这种场景：

                  很自然的对应起来一种设计模式即单例模式，既然每次都要走相同步骤完全可以实例化一个全局对象，从而免去其他过程的消耗。当然客户端的同学们也是这样做的： 初始完全可以建一个全局，隐藏的webview。以供使用。省去了每次的初始化过程。

     B.    我们需要跳出仅仅局限于webview的视线，webview仅仅是移动系统的一个组件，统计存在其他组件，网络请求的过程完全可以交给native来做，也正如native一直在做的一样，完全是可以处理该过程的。

3.2：方案B引出的问题  webview与native的交互

        

webview如何调用native接口去请求数据并获取native拿到的数据呢？

除此之外还涉及到调用底层api等需求都需要借助native实现，问题的核心就是两者的交互如何实现，作为两者之间的沟通桥梁，jsbridge就应运而生了。

        原生调用h5比较简单，可以直接调用。毕竟这里存在一个宿主的关系，脱离了webview，js就没有生命力了，而native其他功能是在webview外部的。所以反过来不能直接调用。

H5网页的JS调用Native

    本质还是用uiwebview的代理方法进行字段拦截（判断url的scheme），实现js间接调用native的method。

　　android可以直接给网页中js函数注入一个原生代码接口。

1 //相当于添加一个js回调接口可以直接通过window全局对象调用对应接口了：
2 mWebView.addJavascriptInterface(this, "native");
3 <button onClick="window.native.actionFromJs()">点击调用Native代码</button>

　　ios说起来也是注入只不过没有android那么方便。
      在 webView 的 delegate 的 - (void)webViewDidFinishLoad:(UIWebView *)webView 里用下边的方式注入 JavaScript

NSString *js = @"(function() {\
window.JSBridge = {};\
window.JSBridge.callFunction = function(functionName, args){\
var url = \"bridge-js://invoke?\";\
var callInfo = {};\
callInfo.functionname = functionName;\
if (args)\
{\
callInfo.args = args;\
}\
url += JSON.stringify(callInfo);\
var rootElm = document.documentElement;\
var iFrame = document.createElement(\"IFRAME\");\
iFrame.setAttribute(\"src\",url);\
rootElm.appendChild(iFrame);\
iFrame.parentNode.removeChild(iFrame);\
};\
return true;\
})();";
[webView stringByEvaluatingJavaScriptFromString:js];     

以前端的角度来看这段代码，是在 window 里创建一个叫 JSBridge 的对象，然后在里边定义一个方法 callFunction，

　　这个方法的作用是把两个参数打包为 JSON 字符串，然后附带到我们自定义的 URL bridge-js://invoke? 后边，

　　最后用 IFRAME 的方式来加载这个 URL当加载 IFRAME 的时候，就会调用 webView 的 delegate 的

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 

（即特定方法来处理）方法。对url进行处理，把以约定字符开头的url后面的json解析出来，执行对应方法。

        至此webview与native的交互即jsbridge的实现从前端的角度也大概就是这样子结束了，关于上面的客户端代码可以自行研究，不给过前端来看也是不太难看懂。以上就是我对webview的理解了，欢迎大家相互交流共同进步。