回覆列表
-
1 # 鋼鐵機械俠
-
2 # 做前端的蝸牛
當你上網閱讀東西時,我們一般會選擇一款瀏覽器,比如Chrome、火狐、safari、IE或者Edge。你可能不知道這些瀏覽器之間有一些競爭,而競爭的主要形式就是WebView。
WebView的定義什麼是WebView呢?它是本地應用程式內嵌的一個瀏覽器!這句話有兩處需要搞清楚!
本地應用程式一般會採用諸如C++、Java、OC等語言配合它們各自的UI框架去開發,一般情況下,是不能跨平臺的,比如ios和android就需要同時開發兩個版本,pc和手機本地應用程式也是不相容的。
瀏覽器的特點,其實它大概可以分為兩部分
上面是火狐的一個頁面,紅色區域可以認為是WebView,它擁有渲染引擎,可以透過http/https請求載入內容,載入回來的程式碼就可以被執行和渲染出來。紅色區域以上的部分就是瀏覽器本地的UI元件。
移動端app中WebView的特點我們經常把h5頁面內嵌入app中,這種就是混合型的app,除了渲染頁面本身的功能外,頁面中的js還有能力呼叫app系統介面的,比如某些彈窗、分享等,這些區別對使用者來說都是無感知的。
在普通瀏覽器中是沒有這個能力的,至少瀏覽器沒有開放這些api。
混合型的app一部分是native UI,一部分是H5頁面,我們如何判斷是前者還是後者?在安卓中可以透過開啟”設定“->”開發者選項“->”顯示佈局邊界“,所有NA部分都會被紅色的框選出來。(蘋果手機沒有這個開關)WebView中的渲染引擎ios中,渲染引擎是webkit,和safari、chrome相同
Android中,渲染引擎是Blink
在Window、Linux和macOS中,渲染引擎的選擇就比較靈活了,比較知名的有chrome的Blink、IE的Trident,它主要依賴於app和WebView的實現
WebView帶來的好處因為它是從服務端載入頁面資源,所以更新就比較方便,如果採用native UI那就要經歷繁瑣的稽核過程。
誇平臺,不用各個平臺都開發一套程式碼
總結可以認為WebView就是瀏覽器,只是在不同平臺長相和能力有所不同!
WebView(網路檢視)能載入顯示網頁,可以將其視為一個瀏覽器。
在Android手機中,網頁的解析和顯示網頁的能力是由webkit核心實現的。
(如chrome瀏覽器使用的是webkit核心,現在,webkit被內建到了android系統中)
webview對網頁處理也是交給強大的webkit做的
webview在android SDK(原生)中:
封裝為一個叫做WebView元件,透過這個元件可以在app中顯示html+css+js,當然也就可以顯示一個遠端url,比如用它開啟百度首頁是可以的。
可以理解為:android開發中的一個activity裡使用了webview元件,並打開了一個html頁面呈現給使用者。
其中“activity”是android原生開發時的“一張頁面”,app的所謂跳轉到不同“頁”是在activity中跳來跳去,activity是java的一個類,佈局則是使用xml(如果沒做過原生android開發就這麼理解就行)
webview在mui app框架開發中:
在mui開發中,這些webview就是一張一張的網頁。
這些網頁是webview物件,其操作方法被封裝在html5+的plus.webview物件中
webview本身只是個瀏覽器效果元件,切換即使網頁之間的跳轉,理論上不可能像原生的activity中切換一樣流暢,本身也不會有什麼動畫。
還好,mui的開發組,dcloud(數字天堂)和他們的html5+中中國產業聯盟(社群)實現了webview切換的動畫效果,他們把這些webview對映到了真正的java webview,呼叫的也是原生的activity切換動畫,從而使得webview切換也可以像原生app activity一樣切換的效果!圖一(簡約圖)原生開發和mui的hybrid模式區別圖:(圖二)希望幫助到你!