文章目錄
- 建立項目
- 快速編寫
- 标題
- 頁面主體
- 底部頁籤
- 常用關鍵詞
- 字型圖示
- 事件處理
- 常見手勢事件
- 視窗對象
- 底部頁籤-頁面切換
- 底部頁籤
- 視窗對象設定
- 點選事件處理
- 栅格系統
- 頁面傳值
- 通過openWindow
- 通過自定義事件
建立項目
使用MUI架構搭建項目，首先我們要下載下傳一個HBuilderX。使用HBuilderX建立一個項目，在工具欄選擇檔案–建立–項目。
選擇5+App項目，選擇mui項目模闆，輸入項目名稱，建立成功！
項目目錄如下，包含基本的mui的css、js檔案，入口檔案是index.html。
快速編寫
标題
輸入mh可以快速生成标題欄。
生成的代碼如下。
頁面效果如圖所示。
頁面主體
輸入mbo，建立項目主體代碼。
在mui-content包含的盒子内書寫代碼，屬于項目主體的代碼，當需要滾動的時候，mh生成的标題欄仍然一直在頂部。
底部頁籤
輸入mt，得到底部頁籤。
頁面顯示如下。
常用關鍵詞
| mui-dom結構 | 标題 | 主體 | 頁籤 | 數字角标 | 按鈕 | 九宮格 | 區域滾動 | 開關 |
| md | mh | mbo | mt | mb | mbu | mg | ms | msw |
字型圖示
MUI內建了自己的字型圖示，輸入關鍵詞mi回車就可以得到一個字型圖示的代碼。
mui提供的字型圖示有限，有時候無法滿足我們的需求，我們也可以使用第三方字型圖示庫，如阿裡巴巴矢量圖示庫。
事件處理
MUI使用on綁定事件。
// 使用on()進行事件綁定--MUI事件處理，mui("").on(event,selector,handler)
// mui("選擇器")，選中元素得到mui對象；event綁定事件名稱；selector：事件委托機制，給前面選中元素内部元素添加事件；hanlder：事件回調函數；
mui(".myfooter").on("tap",".mui-tab-item",function(){
alert("按鈕被點選了！");
}) 常見手勢事件
在開發移動端的應用時，會用到很多的手勢操作，比如滑動、長按等，為了友善開放者快速內建這些手勢，mui内置了常用的手勢事件，目前支援的手勢事件見如下清單：
| 分類 | 參數 | 描述 |
| 點選 | tap | 單擊螢幕 |
| doubletap | 輕按兩下螢幕 | |
| 長按 | longtap | 長按螢幕 |
| hold | 按住螢幕 | |
| release | 離開螢幕 | |
| 滑動 | swipeleft | 向左滑動 |
| swiperight | 向右滑動 | |
| swipeup | 向上滑動 | |
| swipedown | 向下滑動 | |
| 拖動 | dragstart | 開始拖動 |
| drag | 拖動中 | |
| dragend | 拖動結束 |
視窗對象
- H5+ Webview視窗對象
- Webview介紹
底部頁籤-頁面切換
底部頁籤
<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-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></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> 視窗對象設定
// 視窗對象設定。首先定義一個數組，把所有頁面的html的名字存儲下來
var subpage = ["home.html","wealth.html","praise.html","friends.html","mine.html"];
// 添加頁面：得到目前頁面的視窗對象，再得到另外五個頁面的視窗對象，最後使用一個append方法将其添加進來即可
mui.plusReady(function () {
// 先得到目前頁面的視窗對象
var currentWebview = plus.webview.currentWebview();
for(var i= 0;i < 5;i++){
// 将五個頁面對應的視窗對象都建立出來
var sub = plus.webview.create(subpage[i],subpage[i],{
top:"50px",
bottom:"50px"
});
// 将子視窗對象添加到目前頁面視窗對象中
currentWebview.append(sub);
// 令打開APP首次展示的是首頁，即subpage[0],若不加判斷，則展示的是subpage[4]
if(i > 0){
sub.hide();
}
}
}); 點選事件處理
// 事件處理。點選底部按鈕，其實就是點選不同的超連結元素，切換不同的元素顯示和隐藏。
// 首先，給超連結元素綁定事件，針對不同的href，顯示/隐藏不同的webview
mui(".myfooter").on("tap","a",function(){
// alert(this.href);
var currentActiveTab = this.getAttribute("href");
if(currentActiveTab == mui(".mui-active")[0].getAttribute("href")){
return;
};
plus.webview.hide(mui(".mui-active")[0].getAttribute("href")); // 隐藏
plus.webview.show(currentActiveTab); // 顯示
}); 栅格系統
MUI 提供了非常簡單實用的12列響應式栅格系統。使用時隻需在外圍容器上添加.mui-row，在列上添加 .mui-col-[sm|xs]-[1-12]，即可。
| 尺寸 | 超小螢幕(<400px)(Extrasmall) | 小螢幕(≥400px) Small |
| 類字首 | .mui-col-xs-[1-12] | .mui-col-sm-[1-12] |
| 列（column）數 | 12 | |
| 可嵌套 | 是 |
執行個體：
通過定義.mui-col-sm-6類在大屏(≥400px)裝置上會展現為并排的兩列,而.mui-col-xs-12在小屏(＜400px)裝置上會覆寫之前定義的類展現為水準排列。
<div class="mui-content">
<div class="mui-row">
<div class="mui-col-sm-6 mui-col-xs-12">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
</div>
<div class="mui-col-sm-6 mui-col-xs-12">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
</div>
</div>
</div> 頁面傳值
通過openWindow
old.html
<button type="button" class="mui-btn mui-btn-blue" id="openwindow">按鈕</button>
<script type="text/javascript">
var openwindow = document.getElementById("openwindow");
openwindow.addEventListener("tap",function(){
mui.openWindow({
url:"new_file.html",
id:"new_file.html",
extras:{
username:"愛發脾氣的小老虎",
password:"123456",
}
})
})
</script> new.html
<script type="text/javascript">
mui.init()
</script>
<script>
mui.plusReady(function(){
// 擷取目前的視窗對象下的username值
var currentwindow = plus.webview.currentWebview();
alert(currentwindow.username);
alert(currentwindow.password);
})
</script> 通過自定義事件
old.html
<button type="button" class="mui-btn mui-btn-blue" id="open2">自定義事件</button>
<script>
var file = document.getElementById("open2");
open2.addEventListener("tap",function(){
// 指明要打開的視窗
mui.openWindow({
url:"new_file2.html",
id:"new_file2.html",
})
var targetwebview = plus.webview.getWebviewById("new_file2.html");
// 需要傳值的目标webview，自定義事件名稱,json格式的資料
mui.fire(targetwebview,"getname",{username:"list"});
})
</script> <script type="text/javascript">
mui.init()
</script>
<script>
window.addEventListener("getname",function(e){
alert(e.detail.username)
})
</script> - MUI的簡介