站在一個前端的角度瞭解app裏使用的webview

移動應用開發模式

如今的移動應用開發模式有3種：

• Native App： 本地應用程序（原生App）
• Web App：網頁應用程序（移動web）
• Hybrid App：混合應用程序（混合App）

如今愈來愈多的app採用混合模式開發（Hybrid App），既有原生app的優良用戶體驗，又有web app的跨平臺優勢。 而其核心是使用 WebView 控件實現加載url，接下來我總結了關於 WebView 的介紹和使用。

webview的概念

看過一些從app開發者的角度寫的關於 Hybrid App，但卻尚未從前端的角度去理解 Hybrid App。

webview 用來展現網頁的 view 組件，該組件是你運行本身的瀏覽器或者在你的線程中展現線上內容的基礎。使用 webkit 渲染引擎來展現，而且支持前進後退等基於瀏覽歷史，放大縮小，等更多功能。

簡單來講 WebView 是手機中內置了一款高性能 webkit 內核瀏覽器，在 SDK 中封裝的一個組件。不過沒有提供地址欄和導航欄，只是單純的展現一個網頁界面。

上面這段話是一個app開發者說的，而站在一個前端開發者的角度，使用事後的感覺就是：

webview 能夠簡單理解爲頁面裏的 iframe 。原生app與 webview 的交互能夠簡單看做是頁面與頁面內 iframe 頁面進行的交互。就如頁面與頁面內的 iframe 共用一個 window 同樣，原生與 webview 也共用了一套原生的方法。

原生app與webview的交互

在項目中，可能會存在原生和 webview 屬於兩個不一樣的組開發的狀況，好比一個app將業務分開，原生部分業務由原生的app開發者開發， webview 內業務由前端開發者開發，此時須要原生開發者與前端開發者統一一下交互方式，前端須要告知app哪些方法能夠調用，而app須要告訴前端app提供了哪些方法和數據給前端。

原生app分 android 和 ios 兩種應用，原生的寫法，這兩種應用的開發語言和框架都不一樣，因此他們與 webview 的交互也不一樣。

android 與 webview 的事件交互

android 和 webview 的事件交互其實也就是 android 和 webview 內部的js事件交互，他們的事件交互又分爲 android 調用js事件和js調用 android 事件。

博文--Android：你要的WebView與 JS 交互方式 都在這裏了已經將相關 android 方法和js使用的方法寫的很是淺顯易懂了。

我接觸到的項目中使用了圖片中的兩個方法1，做爲一個前端開發者，在js上只須要調用 android 提供的映射對象中的方法和聲明一個方法給app調用就ok，能夠說是很是的簡潔了。

ios 與 webview 的事件交互

ios的webview有兩種：UIWebView 和 WKWebView，不一樣類型的 webview 與ios的交互方法也不一樣：

1.攔截url（適用於 UIWebView 和 WKWebView，只適合簡單的調用，若是要傳遞參數，雖然也能夠拼接在url上，如 jxaction://scan?method=aaa，可是須要咱們自行對字符串進行分割解析信息）

2.JavaScriptCore（只適用於 UIWebView，iOS7+）

3.WKScriptMessageHandler（只適用於 WKWebView，iOS8+）

4.WebViewJavascriptBridge（適用於 UIWebView 和 WKWebView，屬於第三方框架）

這四種方法都有對應的比較好的demo，能夠根據須要選擇。

接觸的項目中使用了 javaScriptCore，大概是由於使用這個方法在js中寫方法和調用方法都比較簡潔和方便吧。

原生與webview的數據交互

上面是事件的交互，那數據的交互呢？

在使用過程當中，數據的交互有兩種方式：

1. webview 傳入的 url 中攜帶數據
2. 在 webview 中調用原生提供的映射對象中指定的方法獲取。 webview 傳數據給原生也可使用該方法，將數據做爲參數傳遞給原生app。

注：ios的第一種方法不支持傳參給原生

webview 的屬性

就像 html 標籤都有各自的屬性同樣， webview 也有本身的屬性。

android 和 ios 的 webview 有所不一樣。ios 官方提供了有 UIwebview（貌似將要被棄用了）和 WKwebview 的屬性。android文檔中也提供了 webview 相關的接口。

接觸了一下RN的 webview 組件，官方提供了豐富的屬性和方法。既然將 webview 比做 iframe，那就舉個例子：像 iframe 的 src 在 webview 中就有對應的 source 與其相對應，固然，RN上 webview 的屬性要豐富的多。

weex中也有 webview，但它並非做爲一個組件使用，而是做爲一個模塊控制 <web /> 組件一塊兒使用。 官方的demo感受很良心了。

最後，上個RN官方的 webview 的超簡例子

import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyWeb extends Component {
  render() {
    return (
      <WebView source={{uri: 'https://github.com/facebook/react-native'}} style={{marginTop: 20}} /> ); } } 複製代碼

瞭解了一波webview，感受做爲一個前端也能夠本身寫一個app了，用h5寫:yum: