2. 程式人生 > 實用技巧 >[轉]mui初級入門教程（二）— html5+ webview 實現底部欄切換用法詳解

[轉]mui初級入門教程（二）— html5+ webview 實現底部欄切換用法詳解

阿新 • • 發佈：2020-08-02

原文：https://ask.dcloud.net.cn/article/650

==========-----------------------------------------------------------------------------------------------------------------------

mui初級入門教程（二）— html5+ webview 實現底部欄切換用法詳解

分類：MUI 選項卡Webviewmui

文章來源：小青年原創
釋出時間：2016-05-19
關鍵詞：mui,html5+
轉載需標註本文原始地址

寫在前面

本系列文章我們將利用mui基於網易雲音樂API實現一個音樂播放器APP，同時基於環形或者融雲實現聊天功能。作為本系列文章的第一篇，本文會詳細講解html5+中管理應用視窗介面的Webview模組的用法，因為是初級教程篇不過多講解原理部分，初級使用者只需要知道基本用法就可以，並使用mui.js中的元件進行頁面效果展示。

webview基本知識

Webview模組管理應用視窗介面，實現多視窗的邏輯控制管理操作。通過plus.webview可獲取應用介面管理物件。

什麼是視窗？什麼是webview?

這裡我們首先來舉個例子，大家都用過瀏覽器，常用的瀏覽器可以開啟多個網頁。電腦螢幕就是一個視窗，不同的頁面我們可以什麼是不同的webview，我們可以通過控制webview的切換從而控制瀏覽不同的頁面。

對於我們這裡就是一個html頁面就是一個視窗，一個html頁面可以建立多個webview。這個webview是原生APP中瀏覽網頁的元件，android和iOS都有，html5plus中的webview是對原生webview的封裝，可以用js進行呼叫，所以它的執行環境是APP環境，普通瀏覽器不支援。

首先我們現在html5plus官網看一下webview API文件:http://www.html5plus.org/doc/zh_cn/webview.html,
這裡我們重點看一下下面幾個方法:

建立新的Webview視窗
複製程式碼WebviewObject plus.webview.create( url, id, styles, extras );
說明：

建立Webview視窗，用於載入新的HTML頁面，可通過styles設定Webview視窗的樣式，建立完成後需要呼叫show方法才能將Webview視窗顯示出來。

顯示Webview視窗
複製程式碼void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
說明：

顯示已建立或隱藏的Webview視窗，需先獲取視窗物件或視窗id，並可指定顯示視窗的動畫及動畫持續時間。

隱藏Webview視窗
複製程式碼void plus.webview.hide( id_wvobj, aniHide, duration, extras );
說明：

根據指定的WebviewObject物件或id隱藏Webview視窗，使得視窗不可見。

獲取當前視窗的WebviewObject物件
複製程式碼WebviewObject plus.webview.currentWebview();
說明：

獲取當前頁面所屬的Webview視窗物件。

查詢指定標識的WebviewObject視窗
複製程式碼WebviewObject plus.webview.getWebviewById( id );
說明：

在已建立的視窗列表中查詢指定標識的Webview視窗並返回。 若沒有查詢到指定標識的視窗則返回null，若存在多個相同標識的Webview視窗，則返回第一個建立的Webview視窗。 如果要獲取應用入口頁面所屬的Webview視窗，其標識為應用的%APPID%，可通過plus.runtime.appid獲取。

建立並開啟Webview視窗
複製程式碼WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );
說明：

建立並顯示Webview視窗，用於載入新的HTML頁面，可通過styles設定Webview視窗的樣式，建立完成後自動將Webview視窗顯示出來。

以上來源於html5plus文件，只列舉了部分最常用的方法，旨在為後文做鋪墊，由於不是文件，所以也得也不清楚，如果想詳細瞭解請看這裡html5plus webview API。

mui雙webview模式

首先我們要了解mui為了解決窗體切換白屏和區域滾動提出的雙webview模式。

頁面初始化

mui框架將很多功能配置都集中在mui.init方法中，要使用某項功能，只需要在mui.init方法中完成對應引數配置即可，目前支援在mui.init方法中配置的功能包括：建立子頁面、關閉頁面、手勢事件配置、預載入、下拉重新整理、上拉載入、設定系統狀態列背景顏色。

mui需要在頁面載入時初始化很多基礎控制元件,如監聽返回鍵,因此務必在每個頁面中呼叫.

以下是可以配置的引數：

複製程式碼mui.init({  
    //子頁面  
    subpages: [{  
        //...  
    }],  
    //預載入  
    preloadPages:[  
        //...  
    ],  
    //下拉重新整理、上拉載入  
    pullRefresh : {  
       //...  
    },  
    //手勢配置  
     gestureConfig:{  
       //...  
    },  
    //側滑關閉  
    swipeBack:true, //Boolean(預設false)啟用右滑關閉功能    

    //監聽Android手機的back、menu按鍵  
    keyEventBind: {  
        backbutton: false,  //Boolean(預設truee)關閉back按鍵監聽  
        menubutton: false   //Boolean(預設true)關閉menu按鍵監聽  
    },  
    //處理視窗關閉前的業務  
    beforeback: function() {  
        //... //視窗關閉前處理其他業務詳情點選 ↑ "關閉頁面"連結檢視  
    },  
    //設定狀態列顏色  
    statusBarBackground: '#9defbcg', //設定狀態列顏色,僅iOS可用  
    preloadLimit:5//預載入視窗數量限制(一旦超出,先進先出)預設不限制  
})

在app開發中，若要使用HTML5+擴充套件api，必須等plusready事件發生後才能正常使用，mui將該事件封裝成了mui.plusReady()方法，涉及到HTML5+的api，建議都寫在mui.plusReady方法中。

如下為列印當前頁面URL的示例：

複製程式碼mui.plusReady(function(){  
     console.log("當前頁面URL："+plus.webview.currentWebview().getURL());  
});

建立子頁面

在mobile app開發過程中，經常遇到卡頭卡尾的頁面，此時若使用區域性滾動，在android手機上會出現滾動不流暢的問題； mui的解決思路是：將需要滾動的區域通過單獨的webview實現，完全使用原生滾動。具體做法則是：將目標頁面分解為主頁面和內容頁面，主頁面顯示卡頭卡尾區域，比如頂部導航、底部選項卡等；內容頁面顯示具體需要滾動的內容，然後在主頁面中呼叫mui.init方法初始化內容頁面。

複製程式碼mui.init({  
    subpages:[{  
      url:your-subpage-url,//子頁面HTML地址，支援本地地址和網路地址  
      id:your-subpage-id,//子頁面標誌  
      styles:{  
        top:subpage-top-position,//子頁面頂部位置  
        bottom:subpage-bottom-position,//子頁面底部位置  
        width:subpage-width,//子頁面寬度，預設為100%  
        height:subpage-height,//子頁面高度，預設為100%  
        ......  
      },  
      extras:{}//額外擴充套件引數  
    }]  
  });

引數說明：styles表示視窗屬性，參考5+規範中的WebviewStyle；特別注意，height和width兩個屬性,即使不設定，也預設按100%計算；因此若設定了top值為非"0px"的情況，建議同時設定bottom值，否則5+ runtime根據高度100%計算，可能會造成頁面真實底部位置超出螢幕範圍的情況；left、right同理。

示例：Hello mui的首頁其實就是index.html加list.html合併而成的，如下：

index.html的作用就是顯示固定導航，list.html顯示具體列表內容，列表項的滾動是在list.html所在webview中使用原生滾動，既保證了滾動條不會穿透頂部導航，符合app的體驗，也保證了列表流暢滾動，解決了區域滾動卡頓的問題。 list.html就是index.html的子頁面，建立程式碼比較簡單，如下：

複製程式碼mui.init({  
    subpages:[{  
      url:'list.html',  
      id:'list.html',  
      styles:{  
        top:'45px',//mui標題欄預設高度為45px；  
        bottom:'0px'//預設為0px，可不定義；  
      }  
    }]  
});

開啟新頁面

做web app，一個無法避開的問題就是轉場動畫；web是基於連結構建的，從一個頁面點選連結跳轉到另一個頁面，如果通過有重新整理的開啟方式，使用者要面對一個空白的頁面等待；如果通過無重新整理的方式，用Javascript移入DOM節點（常見的SPA解決方案），會碰到很高的效能挑戰：DOM節點繁多，頁面太大，轉場動畫不流暢甚至導致瀏覽器崩潰； mui的解決思路是：單webview只承載單個頁面的dom，減少dom層級及頁面大小；頁面切換使用原生動畫，將最耗效能的部分交給原生實現。

複製程式碼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,//等待框背景區域高度，預設根據內容自動計算合適高度  
        ......  
      }  
    }  
})

引數說明：

  • styles表示視窗引數，參考5+規範中的WebviewStyle；特別注意，height和width兩個屬性,即使不設定，也預設按100%計算；因此若設定了top值為非"0px"的情況，建議同時設定bottom值，否則5+ runtime根據高度100%計算，可能會造成頁面真實底部位置超出螢幕範圍的情況,left、right同理。

  • extras:新視窗的額外擴充套件引數，可用來處理頁面間傳值；例如：

    複製程式碼var webview = mui.openWindow({  
url:'info.html',  
extras:{  
    name:'mui'  
}  
});  
console.log(webview.name);

控制檯會輸出"mui"字串；
注意：擴充套件引數僅在開啟新視窗時有效，若目標視窗為預載入頁面，則通過mui.openWindow方法開啟時傳遞的extras引數無效。

  • createNew：是否重複建立相同id的webview；為優化效能、避免app中重複建立webview，mui v1.7.0開始增加createNew引數，預設為false；判斷邏輯如下：若createNew為true，則不判斷重複，每次都新建webview；若為fasle，則先計算當前App中是否已存在同樣id的webview，若存在則直接顯示；否則新建立並根據show引數執行顯示邏輯；該引數可能導致的影響：若業務寫在plusReady事件中，而plusReady事件僅首次建立時會觸發，則下次再次通過mui.openWindow方法開啟同樣webview時，是不會再次觸發plusReady事件的，此時可通過自定義事件觸發；案例參考：http://ask.dcloud.net.cn/question/6514;

  • show表示視窗顯示控制。autoShow：目標視窗loaded事件發生後，是否自動顯示；若目標頁面為預載入頁面，則該引數無效；aniShow表示頁面顯示動畫，比如從右側劃入、從下側劃入等，具體可參考5+規範中的AnimationTypeShow。

  • waiting表示系統等待框；mui框架在開啟新頁面時等待框的處理邏輯為：顯示等待框-->建立目標頁面webview-->目標頁面loaded事件發生-->關閉等待框；因此，只有當新頁面為新建立頁面（webview）時，會顯示等待框，否則若為預載入好的頁面，則直接顯示目標頁面，不會顯示等待框。waiting中的引數：autoShow表示自動顯示等待框，預設為true，若為false，則不顯示等待框；注意：若顯示了等待框，但目標頁面不自動顯示，則需在目標頁面中通過如下程式碼關閉等待框plus.nativeUI.closeWaiting();。title表示等待框上的提示文字，options表示等待框顯示引數，比如寬高、背景色、提示文字顏色等，具體可參考5+規範中的WaitingOption。

示例1：Hello mui中，點選首頁右上角的圖示，會開啟關於頁面，實現程式碼如下：

複製程式碼//tap為mui封裝的單擊事件，可參考手勢事件章節  
document.getElementById('info').addEventListener('tap', function() {  
  //開啟關於頁面  
  mui.openWindow({  
    url: 'examples/info.html',   
    id:'info'  
  });  
});

因沒有傳入styles引數，故預設全屏顯示；也沒有傳入show引數，故使用slide-in-right動畫，新頁面從右側滑入。

示例2：從A頁面開啟B頁面，B頁面為一個需要從服務端載入的列表頁面，若在B頁面loaded事件發生時就將其顯示出來，因伺服器資料尚未載入完畢，列表頁面為空，使用者體驗不好；可通過如下方式改善使用者體驗（最好的使用者體驗應該是通過預載入的方式）

第一步，B頁面loaded事件發生後，不自動顯示

複製程式碼//A頁面中開啟B頁面，設定show的autoShow為false，則B頁面在其loaded事件發生後，不會自動顯示；  
mui.openWindow({  
    url: 'B.html',   
    show:{  
      autoShow:false  
    }  
});

第二步，在B頁面獲取列表資料後，再關閉等待框、顯示B頁面

複製程式碼//B頁面onload從伺服器獲取列表資料；  
window.onload = function(){  
  //從伺服器獲取資料  
  ....  
  //業務資料獲取完畢，並已插入當前頁面DOM；  
  //注意：若為ajax請求，則需將如下程式碼放在處理完ajax響應資料之後；  
  mui.plusReady(function(){  
    //關閉等待框  
    plus.nativeUI.closeWaiting();  
    //顯示當前頁面  
    mui.currentWebview.show();  
  });  
}

關閉頁面

mui框架將視窗關閉功能封裝在mui.back方法中，具體執行邏輯是：

若當前webview為預載入頁面，則hide當前webview；否則，close當前webview。

在mui框架中，有三種操作會觸發頁面關閉（執行mui.back方法）。

  • 點選包含.mui-action-back類的控制元件
  • 在頁面上，向右快速滑動
  • Android手機按下back按鍵

hbuilder中敲mheader生成的程式碼塊，會自動生成帶有返回導航箭頭的標題欄，點選返回箭頭可關閉當前頁面，原因就是因為該返回箭頭包含.mui-action-back類，程式碼如下：

複製程式碼<header class="mui-bar mui-bar-nav">  
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
    <h1 class="mui-title">標題</h1>  
</header>

若希望在頂部導航欄之外的其它區域新增關閉頁面的控制元件，只需要在對應控制元件上新增.mui-action-back類即可，如下為一個關閉按鈕示例：

複製程式碼<button type="button" class='mui-btn mui-btn-danger mui-action-back'>關閉</button>

mui框架封裝的頁面右滑關閉功能，預設未啟用，若要使用右滑關閉功能，需要在mui.init();方法中設定swipeBack引數，如下：

複製程式碼mui.init({  
    swipeBack:true //啟用右滑關閉功能  
});

mui框架預設會監聽Android手機的back按鍵，然後執行頁面關閉邏輯； 若不希望mui自動處理back按鍵，可通過如下方式關閉mui的back按鍵監聽；

複製程式碼mui.init({  
    keyEventBind: {  
        backbutton: false  //關閉back按鍵監聽  
    }  
});

除了如上三種操作外，也可以直接呼叫mui.back()方法，執行視窗關閉邏輯；mui.back()僅處理視窗邏輯，若希望在視窗關閉之前再處理一些其它業務邏輯，則可將業務邏輯抽象成一個具體函式，然後註冊為mui.init方法的beforeback引數;beforeback的執行邏輯為：

執行beforeback引數對應的函式若返回false，則不再執行mui.back()方法；否則（返回true或無返回值），繼續執行mui.back()方法；

示例：從列表開啟詳情頁面，從詳情頁面再返回後希望重新整理列表介面，此時可註冊beforeback引數，然後通過自定義事件通知列表頁面重新整理資料，示例程式碼如下：

複製程式碼mui.init({  
    beforeback: function(){  
        //獲得列表介面的webview  
        var list = plus.webview.getWebviewById('list');  
        //觸發列表介面的自定義事件（refresh）,從而進行資料重新整理  
        mui.fire(list,'refresh');  
        //返回true，繼續頁面關閉邏輯  
        return true;  
    }  
});

注意：beforeback的執行返回必須是同步的（阻塞模式），若使用nativeUI這種非同步js（非阻塞模式），則可能會出現意想不到的結果；比如：通過plus.nativeUI.confirm()彈出確認框，可能使用者尚未選擇，頁面已經返回了（beforeback同步執行完畢，無返回值，繼續執行mui.back()方法，nativeUI不會阻塞js程序）：在這種情況下，若要自定義業務邏輯，就需要複寫mui.back方法了；如下為一個自定義示例，每次都需要使用者確認後，才會關閉當前頁面。

複製程式碼//備份mui.back，mui.back已將視窗關閉邏輯封裝的比較完善（預載入及父子視窗），因此最好複用mui.back  
var old_back = mui.back;  
mui.back = function(){  
  var btn = ["確定","取消"];  
  mui.confirm('確認關閉當前視窗？','Hello MUI',btn,function(e){  
    if(e.index==0){  
        //執行mui封裝好的視窗關閉邏輯；  
        old_back();  
    }  
  });  
}

注意：自定義關閉邏輯時，一定要重寫mui.back，不能簡單通過addEventListener增加back按鍵監聽， 因為addEventListener只會增加新的執行邏輯，老的監聽邏輯依然會執行；

專案實戰

這個系列的教程我準備帶大家一起實現音樂播放器和即時通訊的功能,先上圖不多說：

開始的頁面效果很簡單，就是一個tab bar頁面切換元件，我們重點講解實現方法，至於美化是後面的事。在開始專案之前我先抄了文件的內容，不是為了湊內容，只是想讓新手在開始專案之前還是多看看基本概念，俗話說磨刀不誤砍柴工，我們對mui的設計思路有一定了解之後寫起來才能得心應手。

相信大家對於mui的雙webview模式有初步認識，我們可以分析一下我們接下來要做的這個的實際例子，首先我們的入口檔案index.html是一個包括頭部和底部的導航欄的webview,中間是一個動態的webview，我們通過點選底部導航欄進行頁面切換，並且動態的改變頂部導航欄的內容。

下面我們新建一個mui專案，這裡我命名為M-BOX：

開始寫佈局檔案

相信很多人看了前面那麼多文件介紹內心肯定是崩潰的，其實我也是，畢竟寫了那麼多還沒有開始寫程式碼我也是拒絕的，只是考慮到很多新手對於找文件這事不一定有經驗，那還是先貼一下，大不了回過頭再去看咯。

好，那我們開始寫佈局檔案：

在MUI開發注意事項這篇文章中提到了幾個重要的注意事項，我們在一個就注意一下會比較好，這裡不再一一詳細列舉了，讀者自己去看。

文章中DOM結構提到：

  • 固定欄靠前

所謂的固定欄，也就是帶有.mui-bar屬性的節點，都是基於fixed定位的元素；常見元件包括：頂部導航欄（.mui-bar-nav）、底部工具條(.mui-bar-footer)、底部選項卡（.mui-bar-tab）;這些元素使用時需遵循一個規則：放在.mui-content元素之前，即使是底部工具條和底部選項卡，也要放在.mui-content之前，否則固定欄會遮住部分主內容；

  • 一切內容都要包裹在mui-content中

除了固定欄之外，其它內容都要包裹在.mui-content中，否則就有可能被固定欄遮罩，原因：固定欄基於Fixed定位，不受流式佈局限制，普通內容依然會從top:0的位置開始佈局，這樣就會被固定欄遮罩，mui為了解決這個問題，定義瞭如下css程式碼：

複製程式碼.mui-bar-nav ~ .mui-content {  
    padding-top: 44px;  
}  
.mui-bar-footer ~ .mui-content {  
    padding-bottom: 44px;  
}  
.mui-bar-tab ~ .mui-content {  
    padding-bottom: 50px;  
}

我們這裡重點看這兩條規則，因為這個對於我們正確佈局是至關重要的。

下面我們體驗一下hbuilder的程式碼塊功能，在index.html檔案的body之間輸入mheader，回車試試。

哈哈，頁面頭部出來了，不錯，這裡我們然後刪除下面的：

複製程式碼<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

先去掉返回箭頭。

然後繼續輸入mtab,回車，底部導航欄也出來了，我們修改一下導航欄的內容,把程式碼稍微調整一下。
整體程式碼如下：

複製程式碼<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title>M-BOX</title>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
</head>  
<body>  
    <header class="mui-bar mui-bar-nav">  
        <h1 class="mui-title">標題</h1>  
    </header>  
    <nav class="mui-bar mui-bar-tab">  
        <a class="mui-tab-item mui-active">  
            <span class="mui-icon mui-icon-home"></span>  
            <span class="mui-tab-label">首頁</span>  
        </a>  
        <a class="mui-tab-item">  
            <span class="mui-icon mui-icon-chatboxes"></span>  
            <span class="mui-tab-label">訊息</span>  
        </a>  
        <a class="mui-tab-item">  
            <span class="mui-icon mui-icon-gear"></span>  
            <span class="mui-tab-label">設定</span>  
        </a>  
    </nav>  

    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  
    </script>  
</body>  
</html>

首頁的靜態佈局我們寫完了，我們接下來新建三個含mui的html檔案：

  • 選擇工程名，郵件就可以看到【新建】，然後就是選擇【目錄】新建資料夾和【html檔案】新建含mui的html檔案。我們新建一個資料夾html，並且在html資料夾下新建，home.html，message.html,setting.html。
  • 在三個頁面body之間分別輸入mbody,就可以開始分別寫頁面了，比如可以先在頁面上寫上檔名，我們先來完善首頁的子頁切換邏輯。

動態頁面切換

1.建立子頁面，首個選項卡頁面顯示，其它均隱藏；

主要方法就是用plus.webview.create和plus.webview.hide();

複製程式碼//設定預設開啟首頁顯示的子頁序號；  
var Index=0;  
//把子頁的路徑寫在數組裡面  
var subpages = ['html/home.html','html/message.html','html/setting.html'];  

//所有的plus-*方法寫在mui.plusReady中或者後面。  
mui.plusReady(function() {  
    //獲取當前頁面所屬的Webview視窗物件  
    var self = plus.webview.currentWebview();  
    for (var i = 0; i < 3; i++) {  
        //建立webview子頁  
        var sub = plus.webview.create(  
            subpages[i], //子頁url  
            subpages[i], //子頁id  
            {  
                top: '45px',//設定距離頂部的距離  
                bottom: '50px'//設定距離底部的距離  
            }  
        );  
        //如不是我們設定的預設的子頁則隱藏，否則新增到視窗中  
        if (i != Index) {  
            sub.hide();  
        }  
        //將webview物件填充到視窗  
        self.append(sub);  
    }  
});

注：如果Index不是0，需要將nav下的a標籤中的.mui-active屬性寫到對應的a標籤下。

執行完我們會發現home.html的內容顯示出來了，但是底部切換還不能，因為這裡我們還沒有監聽底部的點選事件。在進行下一步之前，我們可以先做一個小實驗，將上面的程式碼中的top或者bottom改為0,我們會發現，底部欄或者底部欄會被覆蓋，這是因為mui一個重要的潛規則，父子結構的頁面子頁面會比父頁面層級高，說白了就是子頁面可以蓋住父頁面。這會導致開發者常犯的一個錯誤：將彈出層或者彈出選單寫在父頁面被子頁面蓋住的bug。

這裡的apend()方法是在Webview視窗中新增子視窗，是Webview視窗對的一個方法，具體的可以參考html5+ WebviewObject。

2.選項卡點選事件

mui 內部封裝了一些常用的方法，其中DOM選擇器、事件繫結等事件管理。具體可以參考文件：選擇器、事件管理。

mui()

mui使用css選擇器獲取HTML元素，返回mui物件陣列。

  • mui("p")：選取所有p元素
  • mui("p.title")：選取所有包含.title類的

    元素

若要將mui物件轉化成dom物件，可使用如下方法（類似jquery物件轉成dom物件）：

複製程式碼//obj1是mui物件  
var obj1 = mui("#title");  
//obj2是dom物件  
var obj2 = obj1[0];

.on( event , selector , handler )

  • event Type: String 需監聽的事件名稱，例如：'tap'
  • selector Type: String 選擇器
  • handler Type: Function( Event event )事件觸發時的回撥函式，通過回撥中的event引數可以獲得事件詳情

除了可以使用addEventListener()方法監聽某個特定元素上的事件外， 也可以使用.on()方法實現批量元素的事件繫結。

這裡我們將為底部導航按鈕新增事件：

複製程式碼//選項卡點選事件  
mui('.mui-bar-tab').on('tap', 'a', function(e) {  
    alert(true);  
});

當我們點選底部選項卡的時候會彈出true，這不夠，我們要能夠分辨當前物件具體是哪一個，有兩種思路:

  • 第一我們能夠知道當前點選的a標籤所在序號就好了，就是找到index,然後根據上面那個subpages陣列，利用plus.webview.show(subpages[index])方法顯示。
  • 我們給當前點選的a標籤新增一個可以識別的屬性，然後根據那個屬性獲取當前a的特徵，然後就可以顯示點選的子頁，隱藏當前子頁。

第一種方法需要遍歷此案獲取index，第二種方法新增一個href很容易拿到子頁id，我們採用第二種方案。

getAttribute()

getAttribute() 方法返回指定屬性名的屬性值。
提示：如果您希望以 Attr 物件返回屬性，請使用 getAttributeNode。

於是我們可以這樣寫：

複製程式碼//當前啟用選項  
var activeTab = subpages[Index],title=document.querySelector(".mui-title");  
//選項卡點選事件  
mui('.mui-bar-tab').on('tap', 'a', function(e) {  
    //獲取目標子頁的id  
    var targetTab = this.getAttribute('href');  
    if (targetTab == activeTab) {  
        return;  
    }  
    //更換標題  
    title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  
    //顯示目標選項卡  
    plus.webview.show(targetTab);  
    //隱藏當前選項卡  
    plus.webview.hide(activeTab);  
    //更改當前活躍的選項卡  
    activeTab = targetTab;  
});

後記

雖然最後實現的效果很簡單，好像直接看demo就可以寫出來，但是新手甚至寫了一段時間的同學也不見得對webview掌握得很好，這篇文章花了很長的篇幅去講解webview的用法，旨在為新手建立一種學習mui這邊的思路，那就是先看html5plus裡面的模組，然後看mui對應的文件，最後看hello mui的demo,把握這種學習路線個人覺得是一種最佳的方案。本文作為系列文章第一篇講程式碼的，所以做了很多鋪墊，所以有一定基礎的同學可能會覺得寫得並沒有什麼看點，後面的肯定會有所不一樣的。下一篇講解的是網路請求XMLHttpRequest模組，下一講會結合mui.ajax和網易雲音樂API一起講解。

文章原始地址是我部落格地址：

http://zhaomenghuan.github.io

相關推薦

[轉]mui初級入門教程（二）— html5+ webview 實現底部欄切換用法詳解

原文：https://ask.dcloud.net.cn/article/650 ==========-----------------------------------------------------------------------------------------------------------------------

寫給Java程式設計師的TypeScript入門教程（二）

本文內容承接本系列的上一篇《寫給Java程式設計師的TypeScript入門教程（一）》。上一篇介紹了本系列教程的背景，並進行了開發環境的搭建。本系列的教學思路是通過專案實戰來學習TypeScript，選取了一個簡單的雲服務

GAN網路從入門教程（二）之GAN原理

在一篇部落格GAN網路從入門教程（一）之GAN網路介紹中，簡單的對GAN網路進行了一些介紹，介紹了其是什麼，然後大概的流程是什麼。

go java對比_GO語言入門教程（二）

技術標籤：go java對比 Hello，各位小夥伴，在接著之前發表的Go語言系列教程之投石問路之後，我們大致瞭解了一下Go語言的發展史和Go語言的優勢，另外我也帶著小夥伴進行了Go語言環境的安裝和常用命令的介紹。接

Webpack 入門教程（二）

1.LOADER Webpack 本身只能處理 JavaScript 模組，如果要處理其他型別的檔案，就需要使用 loader 進行轉換。

JVM垃圾收集演算法與收集器（二）G1收集器、ZGC收集器詳解

G1收集器 G1 (Garbage-First)是一款面向伺服器的垃圾收集器,主要針對配備多顆處理器及大容量記憶體的機器. 以極高概率滿足GC停頓時間要求的同時,還具備高吞吐量效能特徵。一般G1收集器是用在8G以上記憶體的伺服器上的

Mybatis多資料來源（二）使用AbstractRoutingDataSource實現動態資料來源切換

一、原理 Spring boot提供了AbstractRoutingDataSource 根據使用者定義的規則選擇當前的資料來源，這樣我們可以在執行資料庫操作之前，設定使用的資料來源，

Node 使用 Egg 框架 之 上TS 的教程（二）

Node + Egg + TS + Mongodb + Resetful + graphql 本節課內容： graphql 和 egg 定時任務 執行環境： Node ，Yarn/NPM，MongoDB

golang web框架——gin使用教程（二）

gin使用教程（一）gin使用教程（二） 上篇教程主要講了gin的路由以及引數獲取，這篇主要講解gin的中介軟體。中介軟體可以在我們接受到一個http請求時，在handle之前或者handle之後做一些處理。通常，在handle之前，

探索ES-入門Kibana（二）

前文回顧 之前有講過一篇探索ES-什麼？你還不知道ES？（一）,今天來聊聊如何入門Kibana。

Spring Cloud入門筆記（二）Hystrix服務容錯

1.Hystrix基本概念 Hystrix is a latency and fault tolerance library designed to isolate points of access to remote systems,services and 3rd party libraries,stop cascading failure and enable resilienc

redis入門指南（二）—— 資料操作相關命令

寫在前面 　　以下絕大部分內容取材於《redis入門指南》，部分結合個人知識，實踐後得出。

GAN網路從入門教程（一）之GAN網路介紹

GAN網路從入門教程（一）之GAN網路介紹 稍微的開一個新坑，同樣也是入門教程（因此教程的內容不會是從入門到精通，而是從入門到入土）。主要是為了完成資料探勘的課程設計，然後就把挖掘榔頭挖到了GAN網路這裡來了。

GAN網路從入門教程（三）之DCGAN原理

目錄 DCGAN簡介 DCGAN的特點 幾個重要概念 下采樣（subsampled） 上取樣（upsampling） 反摺積(Deconvolution)

2020最新版SpringCloud(H版&alibaba)框架開發教程（二）

單機Eureka構建步驟 1.建module 2.改pom <dependencies> <!--eureka server--> <dependency>

.net core的Swagger介面文件使用教程（二）：NSwag

　　上一篇介紹了Swashbuckle ，地址：.net core的Swagger介面文件使用教程（一）：Swashbuckle

Redux 入門教程（一）：基本用法

作者：阮一峰 日期：2016年9月18日 一年半前，我寫了《React 入門例項教程》，介紹了 React 的基本用法。

Vala之入門篇（二）Vala安裝

Windows上的Valahttps://wiki.gnome.org/Projects/Vala/ValaOnWindows MSYS2 MSYS2專案使Windows版Vala的版本保持最新。

Linux教程（二）檔案目錄與使用者許可權

一、基本概念 在 linux 中，不論是由本級還是遠端登入系統，每個系統都必須有一個賬號，並且對於不同的系統資源有不同的使用許可權。

MinIO入門學習（二）

MinIO快速開始 前提:本地需要事先啟動MinIO 如果專案通過maven構建可在專案工程中引入maven座標