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

九酒發表於2019-02-14
前端APPWebView

移動應用開發模式

現在的移動應用開發模式有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 事件。

站在一個前端的角度瞭解app裡使用的webview
博文--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:

相關文章