MUI框架快速开发
原创
©著作权归作者所有:来自51CTO博客作者Serena_tz的原创作品,请联系作者获取转载授权,否则将追究法律责任
文章目录
- 标题
- 页面主体
- 底部选项卡
- 常用关键词
- 底部选项卡
- 窗口对象设置
- 点击事件处理
- 通过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>
new.html
<script type="text/javascript">
mui.init()
</script>
<script>
window.addEventListener("getname",function(e){
alert(e.detail.username)
})
</script>
【参考】
- MUI的简介