mui開發app之webview是什麼

webview(網路檢視)能載入顯示網頁，可以將其視為乙個瀏覽器。

在android手機中，網頁的解析和顯示網頁的能力是由webkit核心實現的。

（如chrome瀏覽器使用的是webkit核心，現在，webkit被內建到了android系統中）

webview對網頁處理也是交給強大的webkit做的

webview在androidsdk（原生）中：

可以理解為：android開發中的乙個activity裡使用了webview元件，並開啟了乙個html頁面呈現給使用者。

在mui開發中，這些webview就是一張一張的網頁。

這些網頁是webview物件，其操作方法被封裝在html5+的plus.webview物件中

webview本身只是個瀏覽器效果元件，切換即使網頁之間的跳轉，理論上不可能像原生的activity中切換一樣流暢，本身也不會有什麼動畫。

關於dcloud的html5+和native.js技術請看我另一篇部落格：

關於原生android webview這個元件使用的部落格：

簡約圖：

原生開發和mui的hybrid模式區別圖：

先來談談我對mui的webview的理解：

我們按照傳統網頁的方式去理解：

，將webview理解為瀏覽器下不同標籤tab，每乙個tab也是乙個不同的頁面

場景一：

^_^）

場景二：

瀏覽器已經有了首頁的tab，我們新建更多tab，瀏覽更多頁面，並且跳轉到這些新tab下

這就像使用mui.openwindow()方法開啟新的webview，該方法傳入一些引數，如下官方說法：

mui.openwindow(,
extras:,
createnew:
false,//
是否重複建立同樣id的webview，預設為false:不重複建立，直接顯示
show:,
waiting:}})

openwindow開啟了乙個新的webview並且跳轉到了新的webview，就像瀏覽器新建乙個tab並且切換過去，只不過切換過程帶了引數，實現了動畫（這由native.js交給了原生動畫實現的），傳遞頁面引數，這也是比瀏覽器訪問網頁的強大之處

openwindow遇到已經開啟過並且id仍然在快取中的webview（這些webview通常是被hide()掉的），會直接跳轉過去，相當於getwebviewbyid().show()

openwindow有兩個核心引數，乙個是url表示開啟的html檔案，開啟tab也得知道網頁位址對吧？還乙個是id，這個引數相當於控制代碼，以後尋找這個webview就靠它了，使用getwebviewbyid()方法抓到這個webview並進行操作！

請注意：openwindow下有乙個特殊的引數：createnew

如果它為false，使用openwindow開啟新視窗的時候，會先判斷是不是有一樣id的webview，如果有，直接跳過去，沒有的話，就新建乙個視窗再跳過去！

請盡量不要使用createnew，除非特殊的頁面需要建立重複的多個。

注：我遇到過建立了重複的webview後造成的自定義觸發事件（fire）發生了意想不到的結果，在返回前，對返回頁面的dom進行修改重新整理，但dom並沒有被改變，其實是因為重複webview，修改了別的！

場景三：

我要關閉乙個頁面！

方法一：隱藏掉（非真關閉），這樣會暫時從當前webview切出去，返回上乙個webview，但是這樣不會清除這個webview，webview依然儲存在快取中。

此種方法用於不需要反覆重新整理建立的頁面，開啟一次後長時間駐留在記憶體中的webview，使用plus.webview.getwebviewbyid().hide()隱藏，同理使用show()方法再次喚出這個webview

此種方法開啟webview下的html是不會重新執行一遍js，也不會再次渲染css了。一般採用自定義事件監聽，然後觸發相應的js。

就是說mui.back()將會關閉當前的webview後返回上乙個webview，此時我們如果使用plus.webview.getwebviewbyid()獲取那個被返回的webview已經是查詢不到，因為webview被關閉了，快取也消失了。

方法三：不要返回，而要關閉指定的乙個webview，那使用plus.webview.getwebviewbyid().close()即可，這是不帶返回效果的關閉某個頁面。

比如關閉當前的頁面，plus.webview.currentwebview().close()，這個方法的效果會和mui.back()一樣。

方法四：直接清理掉，清理掉的話將會導致頁面跳轉不產生動畫或者顯示載入中，因為頁面將被認為從未開啟過，使用：plus.webview.getwebviewbyid().clear()

終極關閉**：假設我設定的主頁是login.html，現在我的使用者退出了登陸，那麼我要清空他已經開啟的所有webview，不留使用痕跡，使用如下**：

tologin = function
() 
//立刻退出
settimeout(function
() , 0);
}

場景四：開啟已經開啟過並且沒有被close或者clear的webview：

使用：plus.webview.getwebviewbyid().show()

使用：plus.webview.getwebviewbyid().hide()　　//隱藏掉

總結一下webview！

mui提供的plus物件封裝了對webview的操作，hbuilder中輸入plus.webview即可獲取物件下面的變數

下面有三個get方法獲取webview：

分別獲取：基座（就是首頁），當前頂部頁面（其實就是當前顯示的），根據id獲得webview

返回的是webviewobject，這個object下面有：

等等的方法，自行在hbuilder中檢視吧！

mui開發app之webview是什麼

體驗使用MUI上手練習app頁面開發

Hbuilder app 開發之 MUI個別細節

控制項縮小android控制項之WebView

mui開發app之webview是什麼

體驗使用MUI上手練習app頁面開發

Hbuilder app 開發 之 MUI個別細節

控制項縮小android控制項之WebView

相關推薦

Hbuilder app 開發之 MUI個別細節