MUI框架快速开发

文章目录

• ​​创建项目​​
• ​​快速编写​​

• ​​标题​​
• ​​页面主体​​
• ​​底部选项卡​​
• ​​常用关键词​​

• ​​字体图标​​
• ​​事件处理​​

• ​​常见手势事件​​

• ​​窗口对象​​
• ​​底部选项卡-页面切换​​

• ​​底部选项卡​​
• ​​窗口对象设置​​
• ​​点击事件处理​​

• ​​栅格系统​​
• ​​页面传值​​

• ​​通过openWindow​​
• ​​通过自定义事件​​

创建项目

使用MUI框架搭建项目，首先我们要下载一个HBuilderX。使用HBuilderX新建一个项目，在工具栏选择文件–新建–项目。

选择5+App项目，选择mui项目模板，输入项目名称，创建成功！

项目目录如下，包含基本的mui的css、js文件，入口文件是index.html。

快速编写

标题

输入mh可以快速生成标题栏。

生成的代码如下。

页面效果如图所示。

页面主体

输入mbo，创建项目主体代码。

在mui-content包含的盒子内书写代码，属于项目主体的代码，当需要滚动的时候，mh生成的标题栏仍然一直在顶部。

底部选项卡

输入mt，得到底部选项卡。

页面显示如下。

常用关键词

字体图标

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内置了常用的手势事件，目前支持的手势事件见如下列表：

窗口对象

1. ​​H5+ Webview窗口对象​​
2. ​​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]，即可。

实例：
通过定义.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>

new.html

<script type="text/javascript">
  mui.init()
</script>
<script>
  window.addEventListener("getname",function(e){
    alert(e.detail.username)
  })
</script>

【参考】

1. ​​MUI的简介​​