理解APP应用中的webview

一、什么是webview

个人理解webview是嵌在APP的H5页面。
APP分为三种形式：

• 原生APP
• 混合式APP（部分原生，部分是H5页面）
• 移动web

webview就是在混合应用中存在的H5页面。一个用来展示网页的view组件，使用webkit渲染引擎来展示（iOS）。一款webkit内核浏览器，含有前进后退，没有地址栏。

二、webview的初始化

webview初始化

浏览器：

刚打开APP模拟不初始化webview，需要打开webview页面的时候，创建webview实例，这个过程需要耗时，这也是打开原生页面很快，打开webview页面要等待一小会，这也是打开慢的其中一个原因。
iOS的webview有两种，UIWebview和WKWebview，不同类型的webview和iOS的交互方法也不同。

UIWebviewbview	WKWebview
拦截url	拦截url
jsCore	不支持

思考：目前项目中交互方式是使用哪种方式。

三、webview调用native方法

这里有一个jsBridge的概念，jsBridge用来webview页面和native通讯的。

什么是jsBridge？
翻译成“桥”，一端链接web，一端链接native，通过jsBridge可以调用native提供出来的方法。
调用客户端提供的方法，也即是jsBridge方法。在调用之前要保证jsBridge已注入成功

在APP里面打开H5页面时，native会注入jsBridge，们调用native方法前，判断一下挂在window下面的这个对象是否已经存在了。

  waitForJSBridge() {
    return new Promise((resolve) => {
      if (!window.StockJSBridge) {
        document.addEventListener('StockJSBridgeReady', resolve);
      } else {
        resolve();
      }
    });
  }
  

调用native提供的拉起分享框方法openShareView

  openShareView(config: SdkShareConfig): Promise<any> {
    return this.waitForJSBridge().then(() => {
        window.StockJSBridge.invoke('openShareView', {
          to: config.platform || ['wx', 'pyq', 'qq', 'qzone'],
          type: config.type,
          params: {
            title: config.title,
            summary: config.description,
            url: config.link,
            image: config.image,
            iconUrl: config.image,
          },
        });
    });
  }

三、webview的优化

1. 提前初始化webview

打开webview页面很明显比native页面慢，其中一个原因是webview初始化需要时间，为了更快打开webview页面，在打开APP时，提前初始化webview，等需要的时候就派上场了。这个做法的弊端：会让APP的内存增加。衡量利弊，控制初始化的webview数量以及做好webview内存的释放