mui開發app之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同樣切換的效果！

 

關於dcloud的html5+和native.js技術請看我另外一篇博客： http://www.cnblogs.com/devilyouwei/p/6793609.html

關於原生android webview這個組件使用的博客：http://www.jianshu.com/p/d2f5ae6b4927

 

簡約圖：

 

 

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

 

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

使用mui開發的app，實際上是在作web前端開發，打開的webview是網頁，用js+html+css替代了原來的xml+java activity的傳統android開發模式，h5最終性能相對原生必定是下降了不少（主要緣由不在webkit的解析速度，而是最終全部的ui和業務邏輯仍是會轉化爲android sdk交由java去實現，google可沒有直接提供android的js開發接口，mui的dcloud則是採用了native.js來提供js開發接口（js映射爲原生代碼）

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

將app理解爲瀏覽器，將webview理解爲瀏覽器下不一樣標籤tab，每個tab也是一個不一樣的頁面，瀏覽器瀏覽能夠在tab之中切換，以此來實現app不一樣webview（頁面）的切換

 

場景一：

在mainfest.json中咱們配置的首頁，好比login.html，而後咱們啓動app，login.html將會第一個呈如今咱們屏幕上，這就是第一個tab標籤（稱之爲launchWebView），若是此時咱們關閉這個tab，那麼瀏覽器沒有其餘tab將會關閉。

app也是一個道理，只有一個webView的狀況下（假設就是launchWebView，首頁），將會退出，能夠在首頁login.html使用plus.webview.getLaunchWebView().close()測試，app將會直接退出！

（在原生的android開發中，若是隻有一個activity的時候關閉當前activity也會退出app，其實webview之於html5 app，相較於，activity之於android app，邏輯處理十分類似^_^）

 

場景二：

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

這就像使用mui.openWindow()方法打開新的webview，該方法傳入一些參數，以下官方說法：

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新頁面頂部位置
      bottom:newage-bottom-position,//新頁面底部位置
      width:newpage-width,//新頁面寬度，默認爲100%
      height:newpage-height,//新頁面高度，默認爲100%
      ......
    },
    extras:{
      .....//自定義擴展參數，能夠用來處理頁面間傳值
    },
    createNew:false,//是否重複建立一樣id的webview，默認爲false:不重複建立，直接顯示
    show:{
      autoShow:true,//頁面loaded事件發生後自動顯示，默認爲true
      aniShow:animationType,//頁面顯示動畫，默認爲」slide-in-right「；
      duration:animationTime//頁面動畫持續時間，Android平臺默認100毫秒，iOS平臺默認200毫秒；
    },
    waiting:{
      autoShow:true,//自動顯示等待框，默認爲true
      title:'正在加載...',//等待對話框上顯示的提示內容
      options:{
        width:waiting-dialog-widht,//等待框背景區域寬度，默認根據內容自動計算合適寬度
        height:waiting-dialog-height,//等待框背景區域高度，默認根據內容自動計算合適高度
        ......
      }
    }
})

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，若是有，直接跳過去，沒有的話，就新建一個窗口再跳過去！

若是它是true，使用openWindow打開新窗口的時候，無論有沒有相同id的tab，都回去新建立一個，也就是可能會建立重複ID的webview，這是很蛋疼的，由於會形成app跳轉webview時，與預期效果不一樣（跳轉的webview不是本身想要的），或者getWebviewById()返回的不是本身想要的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()或返回事件，這裏注意了back並不會像瀏覽器那樣history.go(-1)返回上一頁，而是至關於瀏覽器直接關閉當前tab！

就是說mui.back()將會關閉當前的webview後返回上一個webview，此時咱們若是使用plus.webview.getWebviewById()獲取那個被返回的webview已是查找不到，由於webview被關閉了，緩存也消失了。

下一次打開須要從新加載整個html頁面，從新執行一遍JS代碼，從新渲染一次CSS佈局

 

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

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

 

方法四：直接清理掉，清理掉的話將會致使頁面跳轉不產生動畫或者顯示加載中，由於頁面將被認爲從未打開過，使用：plus.webview.getWebviewById().clear()

 

終極關閉大法：假設我設置的主頁是login.html，如今個人用戶退出了登錄，那麼我要清空他已經打開的全部webview，不留使用痕跡，使用以下代碼：

    toLogin = function() {
        var all = plus.webview.all();
        var launch = plus.webview.getLaunchWebview() //基座，不能夠關掉
        for(var i = 0; i < all.length; i++) {
            if(all[i] === launch)
                continue;
            all[i].close();
            all[i].clear();
        }
        //馬上退出
        setTimeout(function() {
            launch.show();　　//不要從新打開login，app的基座就是login頁面，直接show出來就好了
        }, 0);
    }

其中不能粗魯的把全部的webview通通關閉並清空，那將會致使app直接關閉，只要僅剩的最後一個webview被關閉，也就默認app退出，應保留基座：launchWebView（就是首頁）！

 

場景四：

打開已經打開過而且沒有被close或者clear的webview：

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

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

注意：被關閉（close）和清空（clear），返回掉（back）的webview將會返回null，不能夠操做！而且每次從新openWindow打開的時候都會從新加載頁面，執行一遍頁面的JS代碼

 

總結一下webview！

mui提供的plus對象封裝了對webview的操做，hbuilder中輸入plus.webview便可獲取對象下面的變量

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

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

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

等等的方法，自行在hbuilder中查看吧！